feat: Implement view transitions for smoother navigation

- Added `useViewTransitions` hook to enable view transitions in the app.
- Created `useNavigateWithTransition` for navigation with transitions.
- Integrated view transitions in `ClientRoot`, `HomeTab`, `InboxTab`, and `SettingsTab`.
- Introduced `AnimatedOutlet` and `RouteTransition` components for route-based animations.
- Enhanced CSS for transitions and added a new `twilightTheme`.
- Updated Vite configuration to serve sound and font assets.
- Added support for reaction notifications in the room utility.
- Created `DirectList` and related components for direct messaging functionality.

src/app/pages/client/inbox/Inbox.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import { useAtomValue } from 'jotai';
-import { NavCategory, NavItem, NavItemContent, NavLink } from '../../../components/nav';
+import { NavCategory, NavCategoryHeader, NavItem, NavItemContent, NavLink } from '../../../components/nav';
 import { getInboxInvitesPath, getInboxNotificationsPath } from '../../pathUtils';
 import {
   useInboxInvitesSelected,
@@ -11,6 +11,7 @@ import { UnreadBadge } from '../../../components/unread-badge';
 import { allInvitesAtom } from '../../../state/room-list/inviteList';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
+import { DirectList, DirectListHeader } from '../../../components/direct-list';
 
 function InvitesNavItem() {
   const invitesSelected = useInboxInvitesSelected();
@@ -45,23 +46,23 @@ function InvitesNavItem() {
 
 export function Inbox() {
   useNavToActivePathMapper('inbox');
+  const scrollRef = useRef<HTMLDivElement>(null);
   const notificationsSelected = useInboxNotificationsSelected();
 
   return (
     <PageNav>
       <PageNavHeader>
-        <Box grow="Yes" gap="300">
-          <Box grow="Yes">
-            <Text size="H4" truncate>
-              Inbox
-            </Text>
-          </Box>
-        </Box>
+        <DirectListHeader title="Inbox" />
       </PageNavHeader>
 
-      <PageNavContent>
+      <PageNavContent scrollRef={scrollRef}>
         <Box direction="Column" gap="300">
           <NavCategory>
+            <NavCategoryHeader>
+              <Text size="O400" style={{ padding: '0 var(--fo-space-200)' }}>
+                Inbox
+              </Text>
+            </NavCategoryHeader>
             <NavItem variant="Background" radii="400" aria-selected={notificationsSelected}>
               <NavLink to={getInboxNotificationsPath()}>
                 <NavItemContent>
@@ -80,6 +81,7 @@ export function Inbox() {
             </NavItem>
             <InvitesNavItem />
           </NavCategory>
+          <DirectList scrollRef={scrollRef} showCreateButton showCategoryHeader />
         </Box>
       </PageNavContent>
     </PageNav>