From 4d7783dd8b1239ed2e9ed92d259afb53fd179708 Mon Sep 17 00:00:00 2001
From: Hendrik <hsiegeln@gmx.net>
Date: Fri, 17 Apr 2026 15:35:20 +0200
Subject: [PATCH] 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/+layout.svelte              |  23 ++-
 src/routes/admin/+layout.svelte        |  58 ++++++++
 src/routes/admin/+page.svelte          |  15 ++
 src/routes/admin/backup/+page.svelte   |  78 ++++++++++
 src/routes/admin/domains/+page.svelte  | 168 ++++++++++++++++++++++
 src/routes/admin/profiles/+page.svelte | 191 +++++++++++++++++++++++++
 6 files changed, 532 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/admin/+layout.svelte
 create mode 100644 src/routes/admin/+page.svelte
 create mode 100644 src/routes/admin/backup/+page.svelte
 create mode 100644 src/routes/admin/domains/+page.svelte
 create mode 100644 src/routes/admin/profiles/+page.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e5a463f..e1e042f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -12,7 +12,10 @@
 
 <header class="bar">
   <a href="/" class="brand">Kochwas</a>
-  <ProfileSwitcher />
+  <div class="bar-right">
+    <a href="/admin" class="admin-link" aria-label="Einstellungen">⚙️</a>
+    <ProfileSwitcher />
+  </div>
 </header>
 
 <main>
@@ -51,6 +54,24 @@
     text-decoration: none;
     color: #2b6a3d;
   }
+  .bar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .admin-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 999px;
+    text-decoration: none;
+    font-size: 1.15rem;
+  }
+  .admin-link:hover {
+    background: #f4f8f5;
+  }
   main {
     padding: 0 1rem 4rem;
     max-width: 760px;
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
new file mode 100644
index 0000000..dadf18d
--- /dev/null
+++ b/src/routes/admin/+layout.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  let { children } = $props();
+
+  const items = [
+    { href: '/admin/domains', label: '🌐 Domains' },
+    { href: '/admin/profiles', label: '👥 Profile' },
+    { href: '/admin/backup', label: '💾 Backup' }
+  ];
+</script>
+
+<nav class="tabs">
+  {#each items as item (item.href)}
+    <a
+      href={item.href}
+      class="tab"
+      class:active={$page.url.pathname.startsWith(item.href)}
+    >
+      {item.label}
+    </a>
+  {/each}
+</nav>
+
+<section class="admin-body">
+  {@render children()}
+</section>
+
+<style>
+  .tabs {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.75rem 0 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .tab {
+    padding: 0.6rem 0.9rem;
+    background: white;
+    border: 1px solid #e4eae7;
+    border-radius: 999px;
+    text-decoration: none;
+    color: #444;
+    font-size: 0.95rem;
+    white-space: nowrap;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+  }
+  .tab.active {
+    background: #2b6a3d;
+    color: white;
+    border-color: #2b6a3d;
+  }
+  .admin-body {
+    padding: 1rem 0;
+  }
+</style>
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
new file mode 100644
index 0000000..e19d5b4
--- /dev/null
+++ b/src/routes/admin/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  onMount(() => goto('/admin/domains'));
+</script>
+
+<p class="muted">Weiterleitung…</p>
+
+<style>
+  .muted {
+    color: #888;
+    text-align: center;
+    margin: 3rem 0;
+  }
+</style>
diff --git a/src/routes/admin/backup/+page.svelte b/src/routes/admin/backup/+page.svelte
new file mode 100644
index 0000000..43809c1
--- /dev/null
+++ b/src/routes/admin/backup/+page.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  let working = $state(false);
+
+  function download() {
+    working = true;
+    // Use a direct navigation so the browser handles the download;
+    // reset the flag after a short delay since we don't have a completion event.
+    window.location.href = '/api/admin/backup';
+    setTimeout(() => (working = false), 2000);
+  }
+</script>
+
+<h1>Backup</h1>
+<p class="intro">
+  Lade ein ZIP-Archiv mit der Datenbank und allen Bildern herunter. Bewahre es an einem
+  sicheren Ort auf — damit sind alle Rezepte, Bewertungen, Kommentare und Kochjournal-Einträge gesichert.
+</p>
+
+<button class="btn primary" onclick={download} disabled={working}>
+  {working ? 'Wird erstellt…' : '⬇️ Backup herunterladen'}
+</button>
+
+<div class="note">
+  <h2>Hinweis</h2>
+  <p>
+    Die Wiederherstellung aus einem ZIP folgt in Phase 5b — fürs Erste ersetze den Inhalt
+    des <code>data/</code>-Ordners manuell.
+  </p>
+</div>
+
+<style>
+  h1 {
+    font-size: 1.3rem;
+    margin: 0 0 0.5rem;
+  }
+  .intro {
+    color: #444;
+    margin: 0 0 1.25rem;
+    line-height: 1.5;
+  }
+  .btn {
+    padding: 0.8rem 1.2rem;
+    min-height: 48px;
+    border-radius: 10px;
+    border: 0;
+    cursor: pointer;
+    font-size: 1rem;
+  }
+  .btn.primary {
+    background: #2b6a3d;
+    color: white;
+  }
+  .btn:disabled {
+    opacity: 0.6;
+  }
+  .note {
+    margin-top: 2rem;
+    padding: 1rem;
+    background: #f4f8f5;
+    border: 1px solid #dbe5de;
+    border-radius: 10px;
+  }
+  .note h2 {
+    font-size: 0.95rem;
+    margin: 0 0 0.4rem;
+    color: #2b6a3d;
+  }
+  .note p {
+    margin: 0;
+    color: #555;
+    font-size: 0.9rem;
+  }
+  .note code {
+    background: white;
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/routes/admin/domains/+page.svelte b/src/routes/admin/domains/+page.svelte
new file mode 100644
index 0000000..c14c476
--- /dev/null
+++ b/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>
diff --git a/src/routes/admin/profiles/+page.svelte b/src/routes/admin/profiles/+page.svelte
new file mode 100644
index 0000000..c7bacc8
--- /dev/null
+++ b/src/routes/admin/profiles/+page.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+  import { profileStore } from '$lib/client/profile.svelte';
+
+  let newName = $state('');
+  let newEmoji = $state('🍳');
+  let adding = $state(false);
+  let errored = $state<string | null>(null);
+
+  async function add() {
+    errored = null;
+    if (!newName.trim()) return;
+    adding = true;
+    try {
+      await profileStore.create(newName.trim(), newEmoji || null);
+      newName = '';
+    } catch (e) {
+      errored = (e as Error).message;
+    } finally {
+      adding = false;
+    }
+  }
+
+  async function rename(id: number, currentName: string) {
+    const next = prompt('Neuer Name:', currentName);
+    if (!next || next === currentName) return;
+    const res = await fetch(`/api/profiles/${id}`, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ name: next.trim() })
+    });
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({}));
+      alert(`Fehler: ${body.message ?? res.status}`);
+      return;
+    }
+    await profileStore.load();
+  }
+
+  async function remove(id: number) {
+    if (!confirm('Profil wirklich löschen? Bewertungen, Favoriten und Kochjournal dieses Profils werden mit gelöscht.')) return;
+    await fetch(`/api/profiles/${id}`, { method: 'DELETE' });
+    if (profileStore.activeId === id) profileStore.clear();
+    await profileStore.load();
+  }
+</script>
+
+<h1>Profile</h1>
+<p class="intro">
+  Profile werden ohne Passwort verwendet. Beim App-Start wählt man einfach aus.
+</p>
+
+<form
+  class="row"
+  onsubmit={(e) => {
+    e.preventDefault();
+    void add();
+  }}
+>
+  <input type="text" bind:value={newEmoji} maxlength="8" class="emoji-in" />
+  <input type="text" bind:value={newName} placeholder="Name" required />
+  <button type="submit" class="btn primary" disabled={adding}>Anlegen</button>
+</form>
+
+{#if errored}
+  <p class="error">{errored}</p>
+{/if}
+
+{#if !profileStore.loaded}
+  <p class="muted">Lädt…</p>
+{:else if profileStore.profiles.length === 0}
+  <p class="muted">Noch keine Profile.</p>
+{:else}
+  <ul class="list">
+    {#each profileStore.profiles as p (p.id)}
+      <li>
+        <div class="who">
+          <span class="emoji">{p.avatar_emoji ?? '🙂'}</span>
+          <span class="name">{p.name}</span>
+          {#if profileStore.activeId === p.id}
+            <span class="active-badge">aktiv</span>
+          {/if}
+        </div>
+        <div class="actions">
+          <button class="btn" onclick={() => rename(p.id, p.name)}>Umbenennen</button>
+          <button class="btn danger" onclick={() => remove(p.id)}>Löschen</button>
+        </div>
+      </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;
+  }
+  .emoji-in {
+    width: 3.2rem;
+    text-align: center;
+  }
+  .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.55rem 0.85rem;
+    min-height: 40px;
+    border-radius: 10px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    cursor: pointer;
+    font-size: 0.9rem;
+  }
+  .btn.primary {
+    background: #2b6a3d;
+    color: white;
+    border: 0;
+    padding: 0.7rem 1rem;
+    min-height: 44px;
+  }
+  .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.6rem 0.9rem;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+  .who {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+  }
+  .emoji {
+    font-size: 1.4rem;
+  }
+  .name {
+    font-weight: 600;
+  }
+  .active-badge {
+    padding: 0.15rem 0.5rem;
+    background: #eaf4ed;
+    color: #2b6a3d;
+    border-radius: 999px;
+    font-size: 0.75rem;
+  }
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .error {
+    color: #c53030;
+    margin-bottom: 1rem;
+  }
+  .muted {
+    color: #888;
+    text-align: center;
+    padding: 2rem 0;
+  }
+</style>