feat: implement room list reordering and animation hooks; add scroll to latest behavior settings

src/app/features/room-nav/RoomNavItem.tsx

@@ -1,6 +1,7 @@
 import React, { MouseEventHandler, forwardRef, useState, useMemo } from 'react';
 import { Room, EventTimeline } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
+import { useNavigate } from 'react-router-dom';
 import {
   Avatar,
   Box,
@@ -44,7 +45,7 @@ import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../util
 import { getViaServers } from '../../plugins/via-servers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
+import { settingsAtom, ScrollToLatestBehavior } from '../../state/settings';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import {
@@ -294,6 +295,8 @@ export function RoomNavItem({
 }: RoomNavItemProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
+  const navigate = useNavigate();
+  const [scrollToLatestBehavior] = useSetting(settingsAtom, 'scrollToLatestBehavior');
   const [hover, setHover] = useState(false);
   const { hoverProps } = useHover({ onHoverChange: setHover });
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
@@ -365,6 +368,20 @@ export function RoomNavItem({
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  const handleRoomClick: MouseEventHandler<HTMLAnchorElement> = (evt) => {
+    if (selected) {
+      evt.preventDefault();
+      
+      const shouldScroll = 
+        scrollToLatestBehavior === ScrollToLatestBehavior.Always ||
+        (scrollToLatestBehavior === ScrollToLatestBehavior.OnNewMessage && unread !== undefined);
+      
+      if (shouldScroll) {
+        navigate(linkPath, { replace: true, state: { scrollToLatest: Date.now() } });
+      }
+    }
+  };
+
   const optionsVisible = hover || !!menuAnchor;
 
   return (
@@ -380,7 +397,7 @@ export function RoomNavItem({
         {...hoverProps}
         {...focusWithinProps}
       >
-        <NavLink to={linkPath}>
+        <NavLink to={linkPath} onClick={handleRoomClick}>
           <NavItemContent>
             <Box as="span" grow="Yes" alignItems="Center" gap={shouldShowIcon ? "200" : "100"}>
               {shouldShowIcon && (