Refactor Tauri Integration to Use Platform Context

- Replaced direct Tauri API calls with a unified platform context across multiple components, enhancing code maintainability and readability.
- Removed the deprecated tauri.ts file, consolidating platform-related logic into the new PlatformContext.
- Updated components such as App, AudioPlayer, and ServerSettings to utilize the new platform context for lifecycle management and server interactions.
- Improved platform detection and handling for audio playback and system audio capture functionalities.
- Ensured consistent error handling and user feedback across the application when interacting with platform-specific features.

web/src/main.tsx

@@ -1,10 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from '../../app/src/App';
 import '../../app/src/index.css';
+import { PlatformProvider } from '../../app/src/platform/PlatformContext';
+import { webPlatform } from './platform';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 10, // 10 minutes
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <PlatformProvider platform={webPlatform}>
+        <App />
+      </PlatformProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );

web/src/platform/audio.ts

@@ -0,0 +1,27 @@
+import type { PlatformAudio, AudioDevice } from '@/platform/types';
+
+export const webAudio: PlatformAudio = {
+  isSystemAudioSupported(): boolean {
+    return false; // System audio capture not supported in web
+  },
+
+  async startSystemAudioCapture(_maxDurationSecs: number): Promise<void> {
+    throw new Error('System audio capture is only available in the desktop app.');
+  },
+
+  async stopSystemAudioCapture(): Promise<Blob> {
+    throw new Error('System audio capture is only available in the desktop app.');
+  },
+
+  async listOutputDevices(): Promise<AudioDevice[]> {
+    return []; // No native device routing in web
+  },
+
+  async playToDevices(_audioData: Uint8Array, _deviceIds: string[]): Promise<void> {
+    throw new Error('Native audio device routing is only available in the desktop app.');
+  },
+
+  stopPlayback(): void {
+    // No-op for web
+  },
+};

web/src/platform/filesystem.ts

@@ -0,0 +1,15 @@
+import type { PlatformFilesystem, FileFilter } from '@/platform/types';
+
+export const webFilesystem: PlatformFilesystem = {
+  async saveFile(filename: string, blob: Blob, _filters?: FileFilter[]) {
+    // Browser: trigger download
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  },
+};

web/src/platform/index.ts

@@ -0,0 +1,14 @@
+import type { Platform } from '@/platform/types';
+import { webFilesystem } from './filesystem';
+import { webUpdater } from './updater';
+import { webAudio } from './audio';
+import { webLifecycle } from './lifecycle';
+import { webMetadata } from './metadata';
+
+export const webPlatform: Platform = {
+  filesystem: webFilesystem,
+  updater: webUpdater,
+  audio: webAudio,
+  lifecycle: webLifecycle,
+  metadata: webMetadata,
+};

web/src/platform/lifecycle.ts

@@ -0,0 +1,27 @@
+import type { PlatformLifecycle } from '@/platform/types';
+
+class WebLifecycle implements PlatformLifecycle {
+  onServerReady?: () => void;
+
+  async startServer(_remote = false): Promise<string> {
+    // Web assumes server is running externally
+    // Return a default URL - this should be configured via env vars
+    const serverUrl = import.meta.env.VITE_SERVER_URL || 'http://localhost:17493';
+    this.onServerReady?.();
+    return serverUrl;
+  }
+
+  async stopServer(): Promise<void> {
+    // No-op for web - server is managed externally
+  }
+
+  async setKeepServerRunning(_keep: boolean): Promise<void> {
+    // No-op for web
+  }
+
+  async setupWindowCloseHandler(): Promise<void> {
+    // No-op for web - no window close handling needed
+  }
+}
+
+export const webLifecycle = new WebLifecycle();

web/src/platform/metadata.ts

@@ -0,0 +1,9 @@
+import type { PlatformMetadata } from '@/platform/types';
+
+export const webMetadata: PlatformMetadata = {
+  async getVersion(): Promise<string> {
+    // Return version from env var or package.json
+    return import.meta.env.VITE_APP_VERSION || '0.1.0';
+  },
+  isTauri: false,
+};

web/src/platform/updater.ts

@@ -0,0 +1,44 @@
+import type { PlatformUpdater, UpdateStatus } from '@/platform/types';
+
+class WebUpdater implements PlatformUpdater {
+  private status: UpdateStatus = {
+    checking: false,
+    available: false,
+    downloading: false,
+    installing: false,
+    readyToInstall: false,
+  };
+
+  private subscribers: Set<(status: UpdateStatus) => void> = new Set();
+
+  private notifySubscribers() {
+    this.subscribers.forEach((callback) => callback(this.status));
+  }
+
+  subscribe(callback: (status: UpdateStatus) => void): () => void {
+    this.subscribers.add(callback);
+    callback(this.status);
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  }
+
+  getStatus(): UpdateStatus {
+    return { ...this.status };
+  }
+
+  async checkForUpdates(): Promise<void> {
+    // Web apps don't need client-side updates
+    // Updates are handled by redeploying the web app
+  }
+
+  async downloadAndInstall(): Promise<void> {
+    // No-op for web
+  }
+
+  async restartAndInstall(): Promise<void> {
+    // No-op for web
+  }
+}
+
+export const webUpdater = new WebUpdater();