fix root element in thread looking wrongly selected (#929)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

Fix the topmost item in a thread looking highlighted when it shouldnt,
but it still highlights if you specifically want to actually reply to it
it
<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->
Fixes #

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->
Written with the inspiration of eating by and by

Author: 7w1

src/app/features/room/ThreadDrawer.tsx

@@ -230,6 +230,7 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra
   const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(threadRootId));
   const replyDraft = useAtomValue(roomIdToReplyDraftAtomFamily(threadRootId));
   const activeReplyId = replyDraft?.eventId;
+  const suppressMark = !replyDraft?.body;
 
   // User profile popup
   const openUserRoomProfile = useOpenUserRoomProfile();
@@ -711,7 +712,7 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra
       showHiddenEvents,
       hideThreadChip: true,
     },
-    state: { focusItem, editId, activeReplyId, openThreadId: threadRootId },
+    state: { focusItem, editId, activeReplyId, openThreadId: threadRootId, suppressMark },
     permissions: {
       canRedact,
       canDeleteOwn,

src/app/hooks/timeline/useTimelineEventRenderer.tsx

@@ -286,6 +286,7 @@ export interface TimelineEventRendererOptions {
     editId?: string;
     activeReplyId?: string;
     openThreadId?: string;
+    suppressMark?: boolean;
   };
   permissions: {
     canRedact: boolean;
@@ -337,7 +338,7 @@ export function useTimelineEventRenderer({
     showHiddenEvents,
     hideThreadChip,
   },
-  state: { focusItem, editId, activeReplyId, openThreadId },
+  state: { focusItem, editId, activeReplyId, openThreadId, suppressMark },
   permissions: { canRedact, canDeleteOwn, canSendReaction, canPinEvent },
   callbacks: {
     onUserClick,
@@ -375,7 +376,7 @@ export function useTimelineEventRenderer({
         const reactions = reactionRelations?.getSortedAnnotationsByKey();
         const hasReactions = reactions && reactions.length > 0;
         const highlighted = focusItem?.index === item && focusItem.highlight;
-        const marked = activeReplyId === mEventId;
+        const marked = activeReplyId === mEventId && suppressMark !== true;
 
         const pushActions = pushProcessor.actionsForEvent(mEvent);
         let notifyHighlight: 'silent' | 'loud' | undefined;