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

src/app/components/direct-list/DirectList.tsx

@@ -50,6 +50,7 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
 import { useDirectCreateSelected } from '../../hooks/router/useDirectSelected';
+import { useRoomListReorder, useListReorderAnimation } from '../../hooks/useRoomListReorder';
 
 /**
  * Props for the DirectMenu component
@@ -214,6 +215,8 @@ export function DirectList({
   const createDirectSelected = useDirectCreateSelected();
   const selectedRoomId = useSelectedRoom();
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
+  
+  const reorderTrigger = useRoomListReorder(mx, directs);
 
   const sortedDirects = useMemo(() => {
     const items = Array.from(directs).sort(factoryRoomIdByActivity(mx));
@@ -221,7 +224,9 @@ export function DirectList({
       return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
     }
     return items;
-  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId]);
+  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId, reorderTrigger]);
+
+  const animationRef = useListReorderAnimation(sortedDirects);
 
   const virtualizer = useVirtualizer({
     count: sortedDirects.length,
@@ -275,6 +280,7 @@ export function DirectList({
           </NavCategoryHeader>
         )}
         <div
+          ref={animationRef}
           style={{
             position: 'relative',
             height: virtualizer.getTotalSize(),
@@ -287,7 +293,12 @@ export function DirectList({
             const selected = selectedRoomId === roomId;
 
             return (
-              <VirtualTile virtualItem={vItem} key={vItem.index} ref={virtualizer.measureElement}>
+              <VirtualTile 
+                virtualItem={vItem} 
+                key={roomId} 
+                ref={virtualizer.measureElement}
+                data-room-id={roomId}
+              >
                 <RoomNavItem
                   room={room}
                   selected={selected}