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/sidebar/SettingsTab.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEventHandler, useState } from 'react';
 import { Box, config, Icon, Icons, Line, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigateWithTransition } from '../../../hooks/useViewTransitions';
 import { SidebarItem, SidebarAvatar } from '../../../components/sidebar';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -22,7 +22,7 @@ export function SettingsTab() {
   const useAuthentication = useMediaAuthentication();
   const userId = mx.getUserId();
   const profile = useUserProfile(userId ?? '');
-  const navigate = useNavigate();
+  const navigate = useNavigateWithTransition();
 
   const [settings, setSettings] = useState(false);
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();