web: vite + react + tailwind hello page with dark-mode toggle

Workspace packages export TS source under a 'source' condition used by
vite, node (--conditions=source) and tsc.

Task: M0-T4

apps/web/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SelfPhoneNG</title>
+    <script>
+      // Apply the theme before first paint so dark mode doesn't flash.
+      try {
+        const t = localStorage.getItem('theme');
+        if (t === 'dark' || (!t && matchMedia('(prefers-color-scheme: dark)').matches))
+          document.documentElement.classList.add('dark');
+      } catch {}
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/web/package.json

@@ -10,9 +10,17 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@selfphoneng/shared": "workspace:*"
+    "@selfphoneng/shared": "workspace:*",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-router": "^8.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "tailwindcss": "^4.3.3",
     "vite": "^8.3.4"
   }
 }

apps/web/src/index.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@custom-variant dark (&:where(.dark, .dark *));

apps/web/src/main.ts

@@ -1,4 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-import { APP_NAME } from '@selfphoneng/shared';
-
-document.title = APP_NAME;

apps/web/src/main.tsx

@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { StrictMode, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
+import { APP_NAME } from '@selfphoneng/shared';
+import { toggleTheme } from './theme.ts';
+import './index.css';
+
+function Home() {
+  const [dark, setDark] = useState(() => document.documentElement.classList.contains('dark'));
+  return (
+    <main className="mx-auto flex min-h-dvh max-w-3xl flex-col items-start gap-6 p-4 sm:p-8">
+      <header className="flex w-full items-center justify-between gap-4">
+        <h1 className="text-2xl font-semibold sm:text-3xl">{APP_NAME}</h1>
+        <button
+          type="button"
+          onClick={() => setDark(toggleTheme())}
+          aria-pressed={dark}
+          className="rounded-md border border-zinc-300 px-3 py-1.5 text-sm hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 dark:border-zinc-700 dark:hover:bg-zinc-800"
+        >
+          {dark ? 'Light mode' : 'Dark mode'}
+        </button>
+      </header>
+      <p className="text-zinc-600 dark:text-zinc-400">
+        Open source, self-hosted business phone system.
+      </p>
+    </main>
+  );
+}
+
+const router = createBrowserRouter([{ path: '*', Component: Home }]);
+
+document.body.className = 'bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

apps/web/src/theme.ts

@@ -0,0 +1,11 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// index.html applies the stored/OS theme before paint; this flips and remembers it.
+export function toggleTheme(): boolean {
+  const dark = document.documentElement.classList.toggle('dark');
+  try {
+    localStorage.setItem('theme', dark ? 'dark' : 'light');
+  } catch {
+    // storage blocked (private mode): the toggle still works for this page view
+  }
+  return dark;
+}

apps/web/vite.config.ts

@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { defaultClientConditions, defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: { conditions: ['source', ...defaultClientConditions] }, // workspace packages ship TS source
+  server: {
+    proxy: {
+      // Same split as the reverse proxy (01 §5): /ws is Asterisk SIP-over-WebSocket, the rest is the api.
+      '/api': { target: 'http://127.0.0.1:8080', ws: true },
+      '/ws': { target: 'ws://127.0.0.1:8088', ws: true },
+    },
+  },
+});