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.

vite.config.js

@@ -42,6 +42,14 @@ const copyFiles = {
       src: 'public/locales',
       dest: 'public/',
     },
+    {
+      src: 'public/sound',
+      dest: 'public/',
+    },
+    {
+      src: 'public/font',
+      dest: 'public/',
+    },
   ],
 };
 
@@ -97,10 +105,41 @@ function serveGifWorker() {
   };
 }
 
+function servePublicAssets() {
+  return {
+    name: 'vite-plugin-serve-public-assets',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        // Serve sound files
+        if (req.url?.startsWith('/sound/')) {
+          const fileName = req.url.replace('/sound/', '');
+          const resolvedPath = path.join(path.resolve(), 'public', 'sound', fileName);
+
+          if (fs.existsSync(resolvedPath)) {
+            const ext = path.extname(fileName);
+            const contentType = ext === '.ogg' ? 'audio/ogg' : 'application/octet-stream';
+            res.setHeader('Content-Type', contentType);
+            res.setHeader('Cache-Control', 'no-cache');
+
+            const fileStream = fs.createReadStream(resolvedPath);
+            fileStream.pipe(res);
+          } else {
+            res.writeHead(404);
+            res.end('File not found');
+          }
+        } else {
+          next();
+        }
+      });
+    },
+  };
+}
+
 export default defineConfig({
   appType: 'spa',
   publicDir: false,
   base: buildConfig.base,
+  assetsInclude: ['**/*.ogg', '**/*.mp3', '**/*.wav'],
   server: {
     port: 38347,
     host: '0.0.0.0',
@@ -112,6 +151,7 @@ export default defineConfig({
   plugins: [
     serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
     serveGifWorker(),
+    servePublicAssets(),
     topLevelAwait({
       // The export name of top-level await promise for each chunk module
       promiseExportName: '__tla',