feat(ui): add admin area (domains, profiles, backup) with gear link in header

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/routes/admin/domains/+page.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { AllowedDomain } from '$lib/types';
+
+  let domains = $state<AllowedDomain[]>([]);
+  let loading = $state(true);
+  let newDomain = $state('');
+  let newLabel = $state('');
+  let adding = $state(false);
+  let errored = $state<string | null>(null);
+
+  async function load() {
+    const res = await fetch('/api/domains');
+    domains = await res.json();
+    loading = false;
+  }
+
+  async function add() {
+    errored = null;
+    if (!newDomain.trim()) return;
+    adding = true;
+    const res = await fetch('/api/domains', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        domain: newDomain.trim(),
+        display_name: newLabel.trim() || null
+      })
+    });
+    adding = false;
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({}));
+      errored = body.message ?? `HTTP ${res.status}`;
+      return;
+    }
+    newDomain = '';
+    newLabel = '';
+    await load();
+  }
+
+  async function remove(id: number) {
+    if (!confirm('Domain entfernen?')) return;
+    await fetch(`/api/domains/${id}`, { method: 'DELETE' });
+    await load();
+  }
+
+  onMount(load);
+</script>
+
+<h1>Erlaubte Domains</h1>
+<p class="intro">
+  Nur Rezepte von diesen Domains können importiert werden. Jeder darf pflegen.
+</p>
+
+<form
+  class="row"
+  onsubmit={(e) => {
+    e.preventDefault();
+    void add();
+  }}
+>
+  <input type="text" bind:value={newDomain} placeholder="chefkoch.de" required />
+  <input type="text" bind:value={newLabel} placeholder="Anzeigename (optional)" />
+  <button type="submit" class="btn primary" disabled={adding}>Hinzufügen</button>
+</form>
+
+{#if errored}
+  <p class="error">{errored}</p>
+{/if}
+
+{#if loading}
+  <p class="muted">Lädt…</p>
+{:else if domains.length === 0}
+  <p class="muted">Noch keine Domains. Füge Chefkoch, Emmi kocht einfach o.ä. hinzu.</p>
+{:else}
+  <ul class="list">
+    {#each domains as d (d.id)}
+      <li>
+        <div>
+          <div class="dom">{d.domain}</div>
+          {#if d.display_name}<div class="label">{d.display_name}</div>{/if}
+        </div>
+        <button class="btn danger" onclick={() => remove(d.id)}>Löschen</button>
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  h1 {
+    font-size: 1.3rem;
+    margin: 0 0 0.5rem;
+  }
+  .intro {
+    color: #666;
+    margin: 0 0 1rem;
+    font-size: 0.95rem;
+  }
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+  }
+  .row input {
+    flex: 1;
+    min-width: 140px;
+    padding: 0.7rem 0.85rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 10px;
+    min-height: 44px;
+    font-size: 1rem;
+  }
+  .btn {
+    padding: 0.7rem 1rem;
+    min-height: 44px;
+    border-radius: 10px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    cursor: pointer;
+    font-size: 0.95rem;
+  }
+  .btn.primary {
+    background: #2b6a3d;
+    color: white;
+    border: 0;
+  }
+  .btn.primary:disabled {
+    opacity: 0.6;
+  }
+  .btn.danger {
+    color: #c53030;
+    border-color: #f1b4b4;
+  }
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .list li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: white;
+    border: 1px solid #e4eae7;
+    border-radius: 12px;
+    padding: 0.75rem 1rem;
+  }
+  .dom {
+    font-weight: 600;
+  }
+  .label {
+    color: #888;
+    font-size: 0.85rem;
+  }
+  .error {
+    color: #c53030;
+    margin-bottom: 1rem;
+  }
+  .muted {
+    color: #888;
+    text-align: center;
+    padding: 2rem 0;
+  }
+</style>