feat: add initial client shell

2026-10-25 03:52:37 +01:00
parent 67a8a06268
commit 5298c6870b
13 changed files with 1831 additions and 4 deletions
@@ -0,0 +1,54 @@
+<script lang="ts">
+  let serverAddress = 'http://127.0.0.1:8787';
+  let connectionState = 'Not connected';
+  let serverVersion = '—';
+
+  async function checkServer() {
+    connectionState = 'Connecting…';
+    try {
+      const response = await fetch(`${serverAddress}/api/v1/server/info`);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const info: { server_version: string } = await response.json();
+      serverVersion = info.server_version;
+      connectionState = 'Connected';
+    } catch {
+      connectionState = 'Server unavailable';
+    }
+  }
+</script>
+
+<svelte:head>
+  <meta name="theme-color" content="#2575e6" />
+</svelte:head>
+
+<main class="shell">
+  <header class="topbar">
+    <div>
+      <p class="eyebrow">TRIXIE</p>
+      <h1>Twitch control center</h1>
+    </div>
+    <span class:connected={connectionState === 'Connected'} class="status">{connectionState}</span>
+  </header>
+
+  <section class="hero panel">
+    <div>
+      <p class="eyebrow">SERVER CONNECTION</p>
+      <h2>Ready to build the dashboard</h2>
+      <p class="muted">The client and server now share a versioned readiness contract.</p>
+    </div>
+    <div class="connection-form">
+      <label for="server-address">Server address</label>
+      <div class="input-row">
+        <input id="server-address" bind:value={serverAddress} spellcheck="false" />
+        <button on:click={checkServer}>Test connection</button>
+      </div>
+      <small>Server version: {serverVersion}</small>
+    </div>
+  </section>
+
+  <section class="dashboard-grid">
+    <article class="panel card"><span class="icon">◈</span><h3>Live dashboard</h3><p>Stream preview, activity, chat, and controls will live here.</p></article>
+    <article class="panel card"><span class="icon">⌁</span><h3>Bot and plugins</h3><p>Modular commands and safe WASM extensions are planned next.</p></article>
+    <article class="panel card"><span class="icon">◎</span><h3>Overlays</h3><p>Browser-source alerts will be editable and previewable.</p></article>
+  </section>
+</main>