move t and handleEdit

src/app/features/room/RoomTimeline.tsx

@@ -435,6 +435,7 @@ export function RoomTimeline({
   accessibleTagColors,
 }: RoomTimelineProps) {
   const mx = useMatrixClient();
+  const { t } = useTranslation();
   const useAuthentication = useMediaAuthentication();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
@@ -592,15 +593,8 @@ export function RoomTimeline({
     room,
     useCallback(
       (mEvt: MatrixEvent) => {
-        // if user is at bottom of timeline
-        // keep paginating timeline and conditionally mark as read
-        // otherwise we update timeline without paginating
-        // so timeline can be updated with evt like: edits, reactions etc
         if (atBottomRef.current) {
           if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
-            // Check if the document is in focus (user is actively viewing the app),
-            // and either there are no unread messages or the latest message is from the current user.
-            // If either condition is met, trigger the markAsRead function to send a read receipt.
             requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()!, hideActivity));
           }
 
@@ -668,13 +662,11 @@ export function RoomTimeline({
     }, [room, liveTimelineLinked])
   );
 
-  // Stay at bottom when room editor resize
   useResizeObserver(
     useMemo(() => {
       let mounted = false;
       return (entries) => {
         if (!mounted) {
-          // skip initial mounting call
           mounted = true;
           return;
         }
@@ -742,8 +734,6 @@ export function RoomTimeline({
         if (inFocus && atBottomRef.current) {
           if (unreadInfo?.inLiveTimeline) {
             handleOpenEvent(unreadInfo.readUptoEventId, false, (scrolled) => {
-              // the unread event is already in view
-              // so, try mark as read;
               if (!scrolled) {
                 tryAutoMarkAsRead();
               }
@@ -757,7 +747,6 @@ export function RoomTimeline({
     )
   );
 
-  // Handle up arrow edit
   useKeyDown(
     window,
     useCallback(
@@ -788,7 +777,6 @@ export function RoomTimeline({
     }
   }, [eventId, loadEventTimeline]);
 
-  // Scroll to bottom on initial timeline load
   useLayoutEffect(() => {
     const scrollEl = scrollRef.current;
     if (scrollEl) {
@@ -796,8 +784,6 @@ export function RoomTimeline({
     }
   }, []);
 
-  // if live timeline is linked and unreadInfo change
-  // Scroll to last read message
   useLayoutEffect(() => {
     const { readUptoEventId, inLiveTimeline, scrollTo } = unreadInfo ?? {};
     if (readUptoEventId && inLiveTimeline && scrollTo) {
@@ -815,7 +801,6 @@ export function RoomTimeline({
     }
   }, [room, unreadInfo, scrollToItem]);
 
-  // scroll to focused message
   useLayoutEffect(() => {
     if (focusItem && focusItem.scrollTo) {
       scrollToItem(focusItem.index, {
@@ -834,7 +819,6 @@ export function RoomTimeline({
     }, 2000);
   }, [alive, focusItem, scrollToItem]);
 
-  // scroll to bottom of timeline
   const scrollToBottomCount = scrollToBottomRef.current.count;
   useLayoutEffect(() => {
     if (scrollToBottomCount > 0) {
@@ -844,14 +828,24 @@ export function RoomTimeline({
     }
   }, [scrollToBottomCount]);
 
-  // Remove unreadInfo on mark as read
   useEffect(() => {
     if (!unread) {
       setUnreadInfo(undefined);
     }
   }, [unread]);
 
-  // scroll out of view msg editor in view.
+  const handleEdit = useCallback(
+    (editEvtId?: string) => {
+      if (editEvtId) {
+        setEditId(editEvtId);
+        return;
+      }
+      setEditId(undefined);
+      ReactEditor.focus(editor);
+    },
+    [editor]
+  );
+
   useEffect(() => {
     if (editId) {
       const editMsgElement =
@@ -982,18 +976,6 @@ export function RoomTimeline({
     },
     [mx, room]
   );
-  const handleEdit = useCallback(
-    (editEvtId?: string) => {
-      if (editEvtId) {
-        setEditId(editEvtId);
-        return;
-      }
-      setEditId(undefined);
-      ReactEditor.focus(editor);
-    },
-    [editor]
-  );
-  const { t } = useTranslation();
 
   const renderMatrixEvent = useMatrixEventRenderer<
     [string, MatrixEvent, number, EventTimelineSet, boolean]