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/colors.css.ts

@@ -430,3 +430,100 @@ export const discordDarkerTheme = createTheme(color, {
     Overlay: 'rgba(0, 0, 0, 0.9)',
   },
 });
+
+export const twilightTheme = createTheme(color, {
+  Background: {
+    Container: '#14121F',
+    ContainerHover: '#1C1A2E',
+    ContainerActive: '#24223D',
+    ContainerLine: '#2D2A4C',
+    OnContainer: '#F0F0FF',
+  },
+
+  Surface: {
+    Container: '#1C1A2E',
+    ContainerHover: '#24223D',
+    ContainerActive: '#2D2A4C',
+    ContainerLine: '#35325B',
+    OnContainer: '#F0F0FF',
+  },
+
+  SurfaceVariant: {
+    Container: '#24223D',
+    ContainerHover: '#2D2A4C',
+    ContainerActive: '#35325B',
+    ContainerLine: '#3E3A6A',
+    OnContainer: '#F0F0FF',
+  },
+
+  Primary: {
+    Main: '#8B7FFF',
+    MainHover: '#7A6EF5',
+    MainActive: '#6E62E8',
+    MainLine: '#6256DB',
+    OnMain: '#FFFFFF',
+    Container: '#3E3A6A',
+    ContainerHover: '#4A4580',
+    ContainerActive: '#565096',
+    ContainerLine: '#625BAC',
+    OnContainer: '#E8E5FF',
+  },
+
+  Secondary: {
+    Main: '#FFFFFF',
+    MainHover: '#E5E5E5',
+    MainActive: '#D9D9D9',
+    MainLine: '#CCCCCC',
+    OnMain: '#1A1A1A',
+    Container: '#404040',
+    ContainerHover: '#4D4D4D',
+    ContainerActive: '#595959',
+    ContainerLine: '#666666',
+    OnContainer: '#F2F2F2',
+  },
+
+  Success: {
+    Main: '#85E0BA',
+    MainHover: '#70DBAF',
+    MainActive: '#66D9A9',
+    MainLine: '#5CD6A3',
+    OnMain: '#0F3D2A',
+    Container: '#175C3F',
+    ContainerHover: '#1A6646',
+    ContainerActive: '#1C704D',
+    ContainerLine: '#1F7A54',
+    OnContainer: '#CCF2E2',
+  },
+
+  Warning: {
+    Main: '#E3BA91',
+    MainHover: '#DFAF7E',
+    MainActive: '#DDA975',
+    MainLine: '#DAA36C',
+    OnMain: '#3F2A15',
+    Container: '#5E3F20',
+    ContainerHover: '#694624',
+    ContainerActive: '#734D27',
+    ContainerLine: '#7D542B',
+    OnContainer: '#F3E2D1',
+  },
+
+  Critical: {
+    Main: '#E69D9D',
+    MainHover: '#E28D8D',
+    MainActive: '#E08585',
+    MainLine: '#DE7D7D',
+    OnMain: '#401C1C',
+    Container: '#602929',
+    ContainerHover: '#6B2E2E',
+    ContainerActive: '#763333',
+    ContainerLine: '#803737',
+    OnContainer: '#F5D6D6',
+  },
+
+  Other: {
+    FocusRing: 'rgba(139, 127, 255, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 1)',
+    Overlay: 'rgba(0, 0, 0, 0.85)',
+  },
+});