feat: establish albedo dashboard shell

src/App.svelte

@@ -1,54 +1,58 @@
 <script lang="ts">
   let serverAddress = 'http://127.0.0.1:8787';
-  let connectionState = 'Not connected';
+  let connectionState = 'OFFLINE';
   let serverVersion = '—';
+  let activeView = 'Live dashboard';
 
   async function checkServer() {
-    connectionState = 'Connecting…';
+    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';
+      connectionState = 'CONNECTED';
     } catch {
-      connectionState = 'Server unavailable';
+      connectionState = 'SERVER UNAVAILABLE';
     }
   }
 </script>
 
-<svelte:head>
-  <meta name="theme-color" content="#2575e6" />
-</svelte:head>
+<svelte:head><title>Trixie</title></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>
+<div class="app-shell">
+  <header class="app-bar">
+    <div class="brand"><span class="brand-mark">T</span><span>TRIXIE</span></div>
+    <nav class="top-nav" aria-label="Primary navigation">
+      {#each ['Live dashboard', 'Chat', 'Bot', 'Overlays'] as item}
+        <button class:active={activeView === item} class="nav-item" onclick={() => (activeView = item)}>{item}</button>
+      {/each}
+    </nav>
+    <div class="app-actions"><span class:online={connectionState === 'CONNECTED'} class="connection-state">{connectionState}</span><button class="icon-button" aria-label="Settings">⚙</button></div>
   </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>
+  <main class="workspace">
+    <aside class="side-panel">
+      <div class="panel-header"><span>TRIXIE</span><span class="panel-kicker">CONTROL</span></div>
+      <div class="server-card">
+        <div class="micro">SERVER CONNECTION</div>
+        <div class="server-status"><span class:good={connectionState === 'CONNECTED'} class="status-dot"></span>{connectionState}</div>
+        <label for="server-address" class="micro">ADDRESS</label>
+        <input id="server-address" class="control" bind:value={serverAddress} spellcheck="false" />
+        <button class="primary control-button" onclick={checkServer}>TEST CONNECTION</button>
       </div>
-      <small>Server version: {serverVersion}</small>
-    </div>
-  </section>
+      <div class="side-section"><div class="micro">CHANNEL</div><div class="empty-row">No Twitch account connected</div></div>
+      <div class="side-section side-footer"><div class="micro">SERVER VERSION</div><div class="mono">{serverVersion}</div></div>
+    </aside>
 
-  <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>
+    <section class="content-area">
+      <div class="content-heading"><div><div class="micro">LIVE DASHBOARD / {activeView.toUpperCase()}</div><h1>{activeView}</h1></div><button class="secondary">⋮</button></div>
+      <div class="dashboard-grid">
+        <section class="panel preview-panel"><div class="panel-header"><span>STREAM PREVIEW</span><span class="panel-menu">⋮</span></div><div class="preview-stage"><div class="offline-mark">STREAM OFFLINE</div><div class="offline-subtitle">CONNECT TWITCH TO BEGIN</div></div><div class="panel-footer"><span class="micro">VIDEO PLAYER</span><span class="badge">OFFLINE</span></div></section>
+        <section class="panel activity-panel"><div class="panel-header"><span>ACTIVITY FEED</span><span class="panel-menu">⋮</span></div><div class="panel-tabs"><button class="tab active">ALL ACTIVITY</button><button class="tab">MODERATION</button></div><div class="empty-state"><div class="empty-glyph">◌</div><strong>Nothing here yet</strong><span>Follows, subscriptions, raids, and server events will appear here.</span></div></section>
+        <section class="panel chat-panel"><div class="panel-header"><span>MY CHAT</span><span class="panel-menu">⋮</span></div><div class="chat-empty"><div class="empty-glyph">⌁</div><strong>Chat is waiting</strong><span>Connect a streamer or bot account to begin.</span></div><div class="chat-composer"><input class="control" placeholder="Send a message" disabled /><button class="primary" disabled>SEND</button></div></section>
+        <section class="panel quick-panel"><div class="panel-header"><span>QUICK ACTIONS</span><span class="panel-menu">⋮</span></div><div class="quick-grid"><button class="quick-action accent">EDIT STREAM INFO</button><button class="quick-action">MODERATION</button><button class="quick-action">BOT COMMANDS</button><button class="quick-action">OVERLAYS</button></div></section>
+      </div>
+    </section>
+  </main>
+</div>