Unify UI workflows and streamline fleet management

src/routes/server-keys/+page.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
     import { onMount } from 'svelte';
+    import { confirmAction } from '$ui/confirm.js';
+    import { serverTitle } from '$ui/server-labels.js';
+    import ServerIdentity from '$ui/components/ServerIdentity.svelte';
+    import Dialog from '$ui/components/primitives/Dialog.svelte';
+    import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
+    import ListFooter from '$ui/components/primitives/ListFooter.svelte';
+    import EmptyState from '$ui/components/primitives/EmptyState.svelte';
     import Button from '$lib/ui/components/primitives/Button.svelte';
     import Field from '$lib/ui/components/primitives/Field.svelte';
     import Input from '$lib/ui/components/primitives/Input.svelte';
 
     interface SavedKey { server_id: string; deployed: number; updated_at: string }
+    let open = $state(false);
+    let search = $state('');
+    let limit = $state(25);
+    $effect(() => { search; limit = 25; });
     let keys = $state<SavedKey[]>([]);
     let serverId = $state('');
     let plutoKey = $state('');
@@ -13,13 +24,15 @@
     let loading = $state(true);
     let error = $state('');
     let notice = $state('');
+    const filtered = $derived(keys.filter(key => (key.server_id + ' ' + serverTitle(key.server_id)).toLowerCase().includes(search.toLowerCase())));
 
     async function load() {
         const res = await fetch('/api/server-keys');
         if (!res.ok) throw new Error('Could not load server keys');
         keys = (await res.json()).keys;
     }
-    onMount(() => { load().catch(e => error = e.message).finally(() => loading = false); });
+    async function reload() { try { await load(); error = ''; } catch (e) { error = (e as Error).message; } finally { loading = false; } }
+    onMount(() => { void reload(); });
     function reset() { serverId = ''; plutoKey = ''; editing = false; }
     async function save(e: SubmitEvent) {
         e.preventDefault();
@@ -31,12 +44,12 @@
             });
             const body = await res.json();
             if (!res.ok) throw new Error(body.error ?? 'Could not save key');
-            reset(); notice = 'Server key saved.'; await load();
+            reset(); open = false; notice = 'Server key saved.'; await load();
         } catch (e) { error = (e as Error).message; }
         finally { busy = false; }
     }
     async function remove(id: string) {
-        if (!confirm(`Remove the saved key for ${id}? Running servers are unaffected.`)) return;
+        if (!await confirmAction({title:'Remove saved key?',message:`Remove the key for ${serverTitle(id)} (${id})? Running servers are unaffected.`,confirmLabel:'Remove key',danger:true})) return;
         busy = true; error = ''; notice = '';
         try {
             const res = await fetch('/api/server-keys', {
@@ -52,10 +65,39 @@
 </script>
 
 <svelte:head><title>Keys · Electric Cherry</title></svelte:head>
-<h1>Keys</h1>
-<p>Save a Plutonium key for each server ID, even when the server is not deployed. Destroying a server keeps its saved key.</p>
-<form onsubmit={save}>
-    <h2>{editing ? 'Update key' : 'Add key'}</h2>
+<div class="page">
+<SectionHeader title="Server keys" subtitle="Save a Plutonium key for each server ID. Keys are kept when a server is destroyed.">
+    {#snippet actions()}<Button variant="primary" onclick={() => { reset(); error = ''; open = true; }}>Add key</Button>{/snippet}
+</SectionHeader>
+<div class="ui-toolbar"><input type="search" aria-label="Search server keys" bind:value={search} placeholder="Search servers…" /></div>
+
+{#if error && !open}<div role="alert" class="ui-error">{error}<Button size="sm" onclick={reload}>Retry</Button></div>{/if}
+{#if notice}<p role="status">{notice}</p>{/if}
+<h2>Saved keys</h2>
+{#if loading}<p>Loading keys…</p>
+{:else if !filtered.length}<EmptyState title={keys.length ? "No matching keys" : "No saved keys"} description="Add a key here or save one when creating a server." />
+{:else}
+    <div class="table-wrap"><table>
+        <thead><tr><th>Server ID</th><th>Status</th><th>Key</th><th>Actions</th></tr></thead>
+        <tbody>{#each filtered.slice(0,limit) as key (key.server_id)}
+            <tr>
+                <td><ServerIdentity name={key.server_id} /><code>{key.server_id}</code></td>
+                <td>{key.deployed ? 'Deployed' : 'Not deployed'}</td>
+                <td aria-label="Key saved">••••••••</td>
+                <td><div class="actions">
+                    <Button disabled={busy} onclick={() => { serverId = key.server_id; plutoKey = ''; editing = true; error = ''; notice = ''; open = true; }}>Update</Button>
+                    <Button disabled={busy} onclick={() => remove(key.server_id)}>Remove</Button>
+                </div></td>
+            </tr>
+        {/each}</tbody>
+    </table></div>
+{/if}
+
+<ListFooter total={filtered.length} bind:limit label="keys" />
+</div>
+<Dialog bind:open title={editing ? 'Update key' : 'Add key'} busy={busy}>
+    {#if error}<p role="alert" class="error">{error}</p>{/if}
+    <form onsubmit={save}>
     <Field label="Server ID" hint="Use a T5 or T6 map slug and lobby number from 1 to 20, e.g. t5_zombie_theater_2 or t6_zombie_tomb_1.">
         <Input bind:value={serverId} placeholder="t5_zombie_theater_2" required readonly={editing} disabled={busy} mono />
     </Field>
@@ -64,37 +106,16 @@
     </Field>
     <div class="actions">
         <Button type="submit" variant="primary" disabled={busy || loading} loading={busy}>{editing ? 'Update key' : 'Save key'}</Button>
-        {#if editing}<Button onclick={reset} disabled={busy}>Cancel</Button>{/if}
+        <Button onclick={() => open = false} disabled={busy}>Cancel</Button>
     </div>
 </form>
-{#if error}<p role="alert" class="error">{error}</p>{/if}
-{#if notice}<p role="status">{notice}</p>{/if}
-<h2>Saved keys</h2>
-{#if loading}<p>Loading keys…</p>
-{:else if keys.length === 0}<p>No saved keys yet. Add one above or save one when deploying a server.</p>
-{:else}
-    <div class="table-wrap"><table>
-        <thead><tr><th>Server ID</th><th>Status</th><th>Key</th><th>Actions</th></tr></thead>
-        <tbody>{#each keys as key (key.server_id)}
-            <tr>
-                <td><code>{key.server_id}</code></td>
-                <td>{key.deployed ? 'Deployed' : 'Not deployed'}</td>
-                <td aria-label="Key saved">••••••••</td>
-                <td><div class="actions">
-                    <Button disabled={busy} onclick={() => { serverId = key.server_id; plutoKey = ''; editing = true; error = ''; notice = ''; }}>Update</Button>
-                    <Button disabled={busy} onclick={() => remove(key.server_id)}>Remove</Button>
-                </div></td>
-            </tr>
-        {/each}</tbody>
-    </table></div>
-{/if}
-
+</Dialog>
 <style>
-    h1 { margin-top: 0; }
+
     h2 { font-size: var(--text-md); }
     p { color: var(--text-secondary); }
     form { display: grid; gap: var(--space-4); max-width: 620px; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); margin: var(--space-6) 0; }
-    form h2 { margin: 0; }
+
     .actions { display: flex; gap: var(--space-2); }
     .table-wrap { overflow-x: auto; }
     table { width: 100%; border-collapse: collapse; text-align: left; }
@@ -102,4 +123,7 @@
     th { color: var(--text-tertiary); font-size: var(--text-sm); }
     code { font-family: var(--font-mono); }
     .error { color: var(--state-danger); }
+    .page { display:grid; gap:24px; }
+    form { margin:0; padding:0; border:0; }
+    code { display:block; font-size:12px; color:var(--text-secondary); margin-top:6px; }
 </style>