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

src/app/pages/client/direct/Direct.tsx

@@ -48,6 +48,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { PluginButtonSlot } from '../../../features/settings/plugins/PluginButtonSlot';
 import { PluginNavSlot } from '../../../features/settings/plugins/PluginNavSlot';
 import { useSetting } from '../../../state/hooks/settings';
+import { useRoomListReorder, useListReorderAnimation } from '../../../hooks/useRoomListReorder';
 import { settingsAtom } from '../../../state/settings';
 import {
   getRoomNotificationMode,
@@ -245,6 +246,8 @@ export function Direct() {
   const selectedRoomId = useSelectedRoom();
   const noRoomToDisplay = directs.length === 0;
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
+  
+  const reorderTrigger = useRoomListReorder(mx, directs);
 
   const sortedDirects = useMemo(() => {
     const items = Array.from(directs).sort(factoryRoomIdByActivity(mx));
@@ -252,7 +255,9 @@ export function Direct() {
       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,
@@ -307,6 +312,7 @@ export function Direct() {
                 </RoomNavCategoryButton>
               </NavCategoryHeader>
               <div
+                ref={animationRef}
                 style={{
                   position: 'relative',
                   height: virtualizer.getTotalSize(),
@@ -321,8 +327,9 @@ export function Direct() {
                   return (
                     <VirtualTile
                       virtualItem={vItem}
-                      key={vItem.index}
+                      key={roomId}
                       ref={virtualizer.measureElement}
+                      data-room-id={roomId}
                     >
                       <RoomNavItem
                         room={room}