Unify UI workflows and streamline fleet management

src/routes/+page.svelte

@@ -3,7 +3,7 @@
     import ServerCard from '$ui/components/ServerCard.svelte';
     import DeployServerDialog from '$ui/components/DeployServerDialog.svelte';
     import Button from '$ui/components/primitives/Button.svelte';
-    import Stat from '$ui/components/primitives/Stat.svelte';
+    import ServerIdentity from '$ui/components/ServerIdentity.svelte';
     import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
     import EmptyState from '$ui/components/primitives/EmptyState.svelte';
     import StatusPip from '$ui/components/primitives/StatusPip.svelte';
@@ -22,6 +22,7 @@
     let view = $state<'cards' | 'table'>('cards');
     let grouping = $state<'map' | 'game' | 'none'>('none');
     let operationsOpen = $state(false);
+    let viewOptionsOpen = $state(false);
     let pinned = $state<string[]>([]);
     let preferencesReady = $state(false);
     let deployOpen = $state(false);
@@ -110,10 +111,10 @@
 <svelte:head><title>Fleet · Electric Cherry</title></svelte:head>
 
 <section class="page">
-    <SectionHeader title="Fleet" subtitle="Your lobbies. Every player. The next move.">
+    <SectionHeader title="Fleet" subtitle="Live health, players, and server operations.">
         {#snippet actions()}
             <Button variant="ghost" size="sm" loading={$fleetRefreshing} onclick={() => void refreshFleet()}>Refresh</Button>
-            <Button variant="primary" onclick={() => launch()}>Deploy new server</Button>
+            <Button variant="primary" onclick={() => launch()}>Create server</Button>
         {/snippet}
     </SectionHeader>
     <DeployServerDialog bind:open={deployOpen} {initialGame} {initialMapSlug} />
@@ -126,21 +127,21 @@
     {#if !$fleet.receivedAt}
         {#if !$fleetError}<div class="loading" role="status">Loading your fleet…</div>{/if}
     {:else}
-        <div class="overview">
-            <div><Stat label="Players online" value={players} size="lg" tone={players > 0 ? 'online' : 'primary'} tween /><span class="hint">From fresh server reports</span></div>
-            <div><Stat label="Healthy servers" value={`${healthy.length}/${servers.length}`} size="lg" tween={false} /><span class="hint">{starting ? `${starting} starting` : 'Live fleet status'}</span></div>
-            <button class="metric-link" onclick={() => { resetFilters(); filter = 'empty'; }}><Stat label="Empty lobbies" value={empty} size="lg" tween /><span class="hint">Find an open lobby →</span></button>
-            <a class="metric-link" href="/campaigns"><Stat label="Active campaigns" value={campaigns} size="lg" tween /><span class="hint">View progress →</span></a>
+        <div class="overview" aria-label="Fleet summary">
+            <span><strong>{healthy.length ? players : '—'}</strong> players online</span>
+            <span><strong>{healthy.length}/{servers.length}</strong> healthy</span>
+            <button class="metric-link" onclick={() => { resetFilters(); filter = 'empty'; }}><strong>{empty}</strong> empty lobbies</button>
+            <a class="metric-link" href="/campaigns"><strong>{campaigns}</strong> active rollouts</a>
         </div>
 
-        {#if servers.length || activeOperations.length}
+        {#if problems.length || attentionOperations.length || starting}
             <div class="attention" class:has-issues={problems.length > 0 || attentionOperations.length > 0}>
                 <span class="attention-mark" aria-hidden="true">{problems.length || attentionOperations.length ? '!' : '✓'}</span>
                 <div class="attention-copy">
                     {#if problems.length}
                         <button onclick={() => { resetFilters(); filter = 'attention'; }}>{problems.length} {problems.length === 1 ? 'server needs' : 'servers need'} attention →</button>
                     {:else}<strong>{servers.length ? starting ? `${starting} ${starting === 1 ? 'server is' : 'servers are'} starting` : 'All servers healthy' : 'Preparing your fleet'}</strong>{/if}
-                    <span>{problems.length ? 'Open a server to inspect its connection and diagnostics.' : 'Live health, match reports, and operation progress in one place.'}</span>
+
                 </div>
                 {#if attentionOperations.length}<a href="#fleet-operations" onclick={() => operationsOpen = true}>{attentionOperations.length} operation {attentionOperations.length === 1 ? 'needs' : 'need'} attention →</a>{/if}
             </div>
@@ -154,6 +155,9 @@
             </a>
         {/if}
 
+        {#if activeOperations.length || $lobbyWatches.length}
+            <details id="fleet-operations" class="operations" bind:open={operationsOpen}>
+                <summary>Activity · {activeOperations.length} operations{ $lobbyWatches.length ? ` · ${$lobbyWatches.length} lobby watches` : ''}{attentionOperations.length ? ` · ${attentionOperations.length} need attention` : ''}</summary>
         {#if $lobbyWatches.length}
             <div class="watches" aria-label="Lobby watches">
                 <div><strong>Following {$lobbyWatches.length} {$lobbyWatches.length === 1 ? 'condition' : 'conditions'}</strong><span class="hint">Notifications stay active as you navigate. Keep this app open.</span></div>
@@ -163,9 +167,6 @@
             </div>
         {/if}
 
-        {#if activeOperations.length}
-            <details id="fleet-operations" class="operations" bind:open={operationsOpen}>
-                <summary>{activeOperations.length} server {activeOperations.length === 1 ? 'operation' : 'operations'} in progress{attentionOperations.length ? ` · ${attentionOperations.length} need attention` : ''}</summary>
                 <div class="operation-list">{#each activeOperations as operation (operation.key)}
                     <a href={operation.href} class:issue={operation.state === 'attention'}><strong>{serverTitle(operation.server)}</strong><span>{operation.label}</span><small>{operation.detail}</small></a>
                 {/each}</div>
@@ -177,24 +178,28 @@
         {:else}
             <div class="toolbar">
                 <div class="search-row">
-                    <label class="search"><span>Find a lobby or player</span><input type="search" bind:value={query} placeholder="Search players, maps, or server names…" /></label>
-                    <label>Game<select bind:value={game}><option value="">All games</option><option value="t5">T5 · Black Ops</option><option value="t6">T6 · Black Ops II</option></select></label>
+                    <label class="search"><span class="sr-only">Find a lobby or player</span><input type="search" bind:value={query} placeholder="Search lobbies, maps, or players…" /></label>
+                    <button class="view-options-toggle" aria-expanded={viewOptionsOpen} aria-controls="fleet-view-options" onclick={() => viewOptionsOpen = !viewOptionsOpen}>View options{game ? ' · filtered' : ''}</button>
+                </div>
+                {#if viewOptionsOpen}<div id="fleet-view-options" class="view-options">
+                    <label>Game<select bind:value={game}><option value="">All games</option><option value="t5">Black Ops I</option><option value="t6">Black Ops II</option></select></label>
                     <label>Group by<select bind:value={grouping}><option value="map">Map</option><option value="game">Game</option><option value="none">None</option></select></label>
                     <label>Sort by<select bind:value={sort}><option value="name">Lobby name</option><option value="players">Most players</option><option value="round">Highest round</option><option value="duration">Longest match</option></select></label>
-                </div>
+                    <div class="view-toggle" aria-label="Display mode"><button class:selected={view === 'cards'} aria-pressed={view === 'cards'} onclick={() => view = 'cards'}>Cards</button><button class:selected={view === 'table'} aria-pressed={view === 'table'} onclick={() => view = 'table'}>Table</button></div>
+                </div>{/if}
                 <div class="filter-row">
                     <div class="chips" aria-label="Filter servers">{#each filters as item}
                         <button class:selected={filter === item.id} aria-pressed={filter === item.id} onclick={() => filter = item.id}>{item.label}<span>{servers.filter(server => matchesFleet(server, '', item.id, game, pinned, activeOperations, $uiNow)).length}</span></button>
                     {/each}</div>
-                    <div class="view-toggle" aria-label="Display mode"><button class:selected={view === 'cards'} aria-pressed={view === 'cards'} onclick={() => view = 'cards'}>Cards</button><button class:selected={view === 'table'} aria-pressed={view === 'table'} onclick={() => view = 'table'}>Table</button></div>
+
                 </div>
-                <div class="result-count"><span role="status">Showing {filtered.length} of {servers.length} servers</span>{#if query || filter !== 'all' || game}<button onclick={resetFilters}>Clear filters</button>{/if}<span class="hint">Pinned lobbies appear first in each group.</span></div>
+                <div class="result-count"><span role="status">Showing {filtered.length} of {servers.length} servers</span>{#if query || filter !== 'all' || game}<button onclick={resetFilters}>Clear filters</button>{/if}</div>
             </div>
 
             {#if filtered.length === 0}<EmptyState title="No matching lobbies" description="Try a different player or map, or clear your filters." />{/if}
             {#each groups as [key, group] (key)}
                 <section class="map-group" aria-label={group.title}>
-                    <div class="group-heading"><div><span class="eyebrow">{grouping === 'map' ? group.game.toUpperCase() : 'Fleet lineup'}</span><h2>{group.title}</h2><p>{group.servers.length} {group.servers.length === 1 ? 'lobby' : 'lobbies'} · {group.servers.reduce((sum, s) => sum + (freshServer(s, $uiNow) ? s.last_players ?? 0 : 0), 0)} players · {group.servers.filter(s => freshServer(s, $uiNow) && s.last_players === 0).length} empty</p></div>
+                    <div class="group-heading"><div>{#if grouping === 'map'}<span class="eyebrow">{group.game.toUpperCase()}</span>{/if}<h2>{group.title}</h2><p>{group.servers.length} {group.servers.length === 1 ? 'lobby' : 'lobbies'} · {group.servers.some(s => freshServer(s, $uiNow)) ? group.servers.reduce((sum, s) => sum + (freshServer(s, $uiNow) ? s.last_players ?? 0 : 0), 0) : '—'} players · {group.servers.filter(s => freshServer(s, $uiNow) && s.last_players === 0).length} empty</p></div>
                         {#if group.launch}<Button size="sm" onclick={() => launch(group.launch)}>Add another lobby</Button>{/if}
                     </div>
                     {#if view === 'cards'}
@@ -214,7 +219,7 @@
                         <div class="table-scroll"><table><caption class="sr-only">{group.title} servers</caption><thead><tr><th>Lobby</th><th>Status</th><th>Players</th><th>Round / match</th><th>Operation</th><th>Follow</th></tr></thead><tbody>
                             {#each group.servers as server (server.name)}
                                 {@const round = currentRound(server, $telemetryByServer.get(server.name), $uiNow)}
-                                <tr><td><a class="lobby-link" href="/servers/{encodeURIComponent(server.name)}">{serverTitle(server.name)}</a><small>{fleetIdentity(server).map}</small></td>
+                                <tr><td><a class="lobby-link" href="/servers/{encodeURIComponent(server.name)}"><ServerIdentity name={server.name} mapLabel={fleetIdentity(server).map} /></a></td>
                                     <td><span class="health"><StatusPip health={server.health} />{server.health}</span></td><td>{freshServer(server, $uiNow) ? server.last_players ?? '—' : '—'}</td>
                                     <td>{round !== null ? `Round ${round}` : '—'}{#if matchDuration(server) >= 0}<small>{elapsedSince(server.game_started_at, $uiNow)}</small>{/if}</td>
                                     <td>{@render serverOperations(server, true)}</td><td><div class="table-actions">{@render serverActions(server)}</div></td></tr>
@@ -247,48 +252,52 @@
 {/snippet}
 
 <style>
-    .page { display: flex; flex-direction: column; gap: 24px; }
+    .page { display: flex; flex-direction: column; gap: var(--space-4); }
     button, input, select { font: inherit; }
     button { cursor: pointer; }
     button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-primary-hover); outline-offset: 3px; }
-    .overview { display: grid; grid-template-columns: repeat(4, 1fr); padding: 24px; gap: 24px; background: var(--surface); border-radius: 16px; border: 1px solid var(--border-subtle); }
+    .overview { display: flex; align-items: center; flex-wrap: wrap; padding: 12px 16px; gap: 8px 24px; background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--text-sm); }
+    .overview strong { color: var(--text-primary); font-variant-numeric: tabular-nums; margin-right: 4px; }
+    .view-options { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 16px; background: var(--surface); border-radius: var(--radius-md); }
+    .view-options label { flex: 1 1 140px; }
+    .view-options-toggle { background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-primary); padding: 8px 12px; font-size: var(--text-sm); }
     .overview > * { min-width: 0; }
     .metric-link { text-align: left; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; }
-    .metric-link:hover .hint { color: var(--accent-primary-hover); }
+
     .hint { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 6px; }
-    .attention { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border: 1px solid var(--border-subtle); border-radius: 12px; }
+    .attention { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
     .attention-mark { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--surface-raised); color: var(--state-online); }
     .has-issues { border-color: color-mix(in srgb, var(--state-warning) 35%, transparent); }
     .has-issues .attention-mark { color: var(--state-warning); }
     .attention-copy { flex: 1; display: flex; flex-direction: column; gap: 5px; }
-    .attention-copy span { font-size: 13px; color: var(--text-secondary); }
+
     .attention button, .result-count button, .error button { background: none; color: var(--accent-primary-hover); border: 0; padding: 0; text-align: left; }
     .attention a { font-size: 13px; color: var(--state-warning); }
-    .spotlight { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px 24px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent-primary) 15%, var(--surface)), var(--surface)); border: 1px solid var(--border-strong); border-radius: 14px; color: var(--text-primary); text-decoration: none; }
+    .spotlight { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 12px 16px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent-primary) 15%, var(--surface)), var(--surface)); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); color: var(--text-primary); text-decoration: none; }
     .spotlight > div { flex: 1; min-width: 190px; }
     .spotlight strong { display: block; margin-top: 6px; }
     .spotlight > span:last-child { color: var(--text-secondary); font-size: 13px; }
     .round { font-family: var(--font-mono); font-size: 23px; color: var(--state-online); }
-    .eyebrow { color: var(--text-secondary); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; font-weight: 600; }
-    .toolbar { display: flex; flex-direction: column; gap: 18px; }
+    .eyebrow { color: var(--text-secondary); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: .12em; font-weight: 600; }
+    .toolbar { display: flex; flex-direction: column; gap: var(--space-3); }
     .search-row { display: flex; gap: 12px; flex-wrap: wrap; }
     label { display: flex; flex-direction: column; gap: 8px; color: var(--text-secondary); font-size: 12px; }
     .search { flex: 1; min-width: min(280px, 100%); }
-    input, select { color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; min-height: 42px; padding: 10px 12px; max-width: 100%; }
+    input, select { color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); min-height: 42px; padding: 10px 12px; max-width: 100%; }
     input::placeholder { color: var(--text-secondary); }
     .filter-row, .result-count { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
     .chips, .view-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
-    .chips button, .view-toggle button, .pin, .watches button { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; color: var(--text-secondary); font-size: 12px; }
+    .chips button, .view-toggle button, .pin, .watches button { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 8px 12px; color: var(--text-secondary); font-size: 12px; }
     .chips button span { margin-left: 8px; opacity: .75; font-variant-numeric: tabular-nums; }
     button.selected { background: color-mix(in srgb, var(--accent-primary) 15%, var(--surface)); color: var(--accent-primary-hover); border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent); }
     .result-count { justify-content: flex-start; font-size: 12px; color: var(--text-secondary); }
-    .result-count .hint { margin: 0 0 0 auto; }
+
     .map-group { display: flex; flex-direction: column; gap: 16px; }
     .group-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
     h2 { margin: 4px 0 6px; font-size: 20px; letter-spacing: -.03em; }
     .group-heading p { margin: 0; color: var(--text-secondary); font-size: 12px; }
     .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 16px; align-items: start; }
-    .server-tile { min-width: 0; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: var(--surface); }
+    .server-tile { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
     .server-tile.pinned { border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent); }
     .server-tile :global(.card) { border-radius: 0; }
     .tile-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
@@ -298,27 +307,29 @@
     .server-operations a { text-decoration: none; color: var(--accent-primary-hover); overflow-wrap: anywhere; }
     .server-operations small { display: block; margin-top: 5px; color: var(--text-secondary); }
     .server-operations .issue, .operation-list .issue { color: var(--state-warning); }
-    .operations { border: 1px solid var(--border-subtle); padding: 16px 20px; border-radius: 12px; font-size: 13px; }
+    .operations { border: 1px solid var(--border-subtle); padding: 16px 20px; border-radius: var(--radius-md); font-size: 13px; }
     summary { cursor: pointer; }
     .operation-list { display: grid; gap: 10px; margin-top: 16px; }
-    .operation-list a { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 12px; text-decoration: none; background: var(--surface); border-radius: 8px; color: var(--text-primary); }
+    .operation-list a { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 12px; text-decoration: none; background: var(--surface); border-radius: var(--radius-md); color: var(--text-primary); }
     .operation-list small { grid-column: 1 / -1; color: var(--text-secondary); overflow-wrap: anywhere; }
-    .watches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
+    .watches { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
     .watches > div { margin-right: auto; }
-    .error { padding: 16px; border: 1px solid var(--state-warning); border-radius: 12px; font-size: 13px; line-height: 1.7; }
+    .error { padding: 16px; border: 1px solid var(--state-warning); border-radius: var(--radius-md); font-size: 13px; line-height: 1.7; }
     .error button { margin-left: 8px; }
-    .loading { padding: 70px 20px; text-align: center; color: var(--text-secondary); background: var(--surface); border-radius: 16px; }
-    .table-scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 12px; }
+    .loading { padding: 70px 20px; text-align: center; color: var(--text-secondary); background: var(--surface); border-radius: var(--radius-lg); }
+    .table-scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
     table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; text-align: left; }
     th { color: var(--text-secondary); font-weight: 500; white-space: nowrap; font-size: 12px; }
     th, td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
     tr:last-child td { border-bottom: 0; }
     td small { display: block; color: var(--text-secondary); margin-top: 6px; }
     td .server-operations { padding: 0; min-width: 180px; }
-    .lobby-link { color: var(--text-primary); text-decoration: none; font-weight: 600; white-space: nowrap; }
+    .lobby-link { color: var(--text-primary); text-decoration: none; font-weight: 600; }
     .health { display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
     .table-actions { display: flex; align-items: center; gap: 8px; }
     .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
     @media (max-width: 900px) { .overview { grid-template-columns: repeat(2, 1fr); } .attention { flex-wrap: wrap; } }
-    @media (max-width: 600px) { .page { gap: 20px; } .overview { padding: 18px; gap: 22px 16px; } .search-row > label:not(.search) { flex: 1; min-width: 100px; } .search { flex-basis: 100%; } .group-heading { align-items: flex-start; } .result-count .hint { width: 100%; margin: 0; } .spotlight { padding: 18px; gap: 12px; } .spotlight > div { flex-basis: 100%; } .operation-list a { grid-template-columns: 1fr; } }
+    @media (max-width: 600px) { .page { gap: 20px; } .overview { padding: 18px; gap: 22px 16px; } .search-row > label:not(.search) { flex: 1; min-width: 100px; } .search { flex-basis: 100%; } .group-heading { align-items: flex-start; }  .spotlight { padding: 18px; gap: 12px; } .spotlight > div { flex-basis: 100%; } .operation-list a { grid-template-columns: 1fr; } }
+
+@media (max-width: 600px) { .overview { padding: 10px 12px; gap: 8px 16px; } .search-row { flex-wrap: nowrap; } .search { flex-basis: auto; min-width: 0; } .view-options-toggle { flex-shrink: 0; } .chips { flex-wrap: nowrap; overflow-x: auto; padding: 3px; width: 100%; } .chips button { white-space: nowrap; flex-shrink: 0; } .attention { padding: 10px 12px; font-size: 13px; } .spotlight { padding:12px; gap:8px; } .spotlight > div { min-width:0; } .page { gap: 16px; } .group-heading p { display: none; } }
 </style>