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/ClientRoot.tsx

@@ -39,6 +39,7 @@ import { isTauriMobile, startBackgroundSync, stopBackgroundSync } from '../../ut
 import { TitleBar } from '../../components/title-bar';
 import { AccountSwitcher } from '../../components/account-switcher';
 import { getLoginPath, withSearchParam } from '../pathUtils';
+import { useViewTransitions } from '../../hooks/useViewTransitions';
 
 function ClientRootLoading() {
   return (
@@ -159,6 +160,9 @@ export function ClientRoot({ children }: ClientRootProps) {
   const [syncError, setSyncError] = useState<Error | null>(null);
   const { baseUrl } = getCurrentSession() ?? {};
 
+  // Enable view transitions for smooth navigation
+  useViewTransitions();
+
   const [loadState, loadMatrix] = useAsyncCallback<MatrixClient, Error, []>(
     useCallback(() => {
       const session = getCurrentSession();