From 974e3cf7ef3ea6fcc8a77b47362e2ac03edb4625 Mon Sep 17 00:00:00 2001
From: Hendrik <hsiegeln@gmx.net>
Date: Fri, 17 Apr 2026 15:28:21 +0200
Subject: [PATCH] feat(ui): add ProfileSwitcher modal and StarRating component

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/ProfileSwitcher.svelte | 202 ++++++++++++++++++++++
 src/lib/components/StarRating.svelte      |  61 +++++++
 2 files changed, 263 insertions(+)
 create mode 100644 src/lib/components/ProfileSwitcher.svelte
 create mode 100644 src/lib/components/StarRating.svelte

diff --git a/src/lib/components/ProfileSwitcher.svelte b/src/lib/components/ProfileSwitcher.svelte
new file mode 100644
index 0000000..36d2640
--- /dev/null
+++ b/src/lib/components/ProfileSwitcher.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+  import { profileStore } from '$lib/client/profile.svelte';
+
+  let showModal = $state(false);
+  let newName = $state('');
+  let newEmoji = $state('🍳');
+
+  async function createAndSelect() {
+    if (!newName.trim()) return;
+    try {
+      const p = await profileStore.create(newName.trim(), newEmoji || null);
+      profileStore.select(p.id);
+      newName = '';
+      showModal = false;
+    } catch (e) {
+      alert((e as Error).message);
+    }
+  }
+</script>
+
+<button class="chip" onclick={() => (showModal = true)} aria-label="Profil wechseln">
+  {#if profileStore.active}
+    <span class="emoji">{profileStore.active.avatar_emoji ?? '🙂'}</span>
+    <span class="name">{profileStore.active.name}</span>
+  {:else}
+    <span class="emoji">👤</span>
+    <span class="name">Profil wählen</span>
+  {/if}
+</button>
+
+{#if showModal}
+  <div
+    class="backdrop"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Profil auswählen"
+  >
+    <button
+      class="backdrop-close"
+      aria-label="Schließen"
+      onclick={() => (showModal = false)}
+    ></button>
+    <div class="modal" role="document">
+      <h2>Wer kocht heute?</h2>
+      <ul class="list">
+        {#each profileStore.profiles as p (p.id)}
+          <li>
+            <button
+              class="profile-btn"
+              class:active={profileStore.activeId === p.id}
+              onclick={() => {
+                profileStore.select(p.id);
+                showModal = false;
+              }}
+            >
+              <span class="emoji-lg">{p.avatar_emoji ?? '🙂'}</span>
+              <span>{p.name}</span>
+            </button>
+          </li>
+        {/each}
+      </ul>
+      <hr />
+      <div class="new">
+        <h3>Neues Profil</h3>
+        <div class="new-row">
+          <input
+            type="text"
+            placeholder="Emoji"
+            bind:value={newEmoji}
+            maxlength="8"
+            class="emoji-input"
+          />
+          <input
+            type="text"
+            placeholder="Name"
+            bind:value={newName}
+            maxlength="50"
+            onkeydown={(e) => e.key === 'Enter' && createAndSelect()}
+          />
+          <button class="primary" onclick={createAndSelect}>Anlegen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.5rem 0.9rem;
+    border-radius: 999px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    font-size: 0.95rem;
+    cursor: pointer;
+    min-height: 44px;
+  }
+  .chip:hover {
+    background: #f4f8f5;
+  }
+  .emoji {
+    font-size: 1.1rem;
+  }
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+    z-index: 100;
+  }
+  .backdrop-close {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    background: rgba(0, 0, 0, 0.45);
+    cursor: pointer;
+  }
+  .modal {
+    position: relative;
+  }
+  .modal {
+    background: white;
+    border-radius: 16px;
+    padding: 1.25rem;
+    width: min(420px, 100%);
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  }
+  .modal h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.2rem;
+  }
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .profile-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #e4eae7;
+    border-radius: 12px;
+    background: white;
+    font-size: 1rem;
+    cursor: pointer;
+    min-height: 52px;
+  }
+  .profile-btn:hover {
+    background: #f4f8f5;
+  }
+  .profile-btn.active {
+    border-color: #2b6a3d;
+    background: #eaf4ed;
+  }
+  .emoji-lg {
+    font-size: 1.6rem;
+  }
+  hr {
+    border: none;
+    border-top: 1px solid #e4eae7;
+    margin: 1rem 0;
+  }
+  .new h3 {
+    font-size: 0.95rem;
+    margin: 0 0 0.5rem;
+    color: #555;
+  }
+  .new-row {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .emoji-input {
+    width: 3.5rem;
+    text-align: center;
+  }
+  .new-row input {
+    flex: 1;
+    padding: 0.6rem 0.8rem;
+    font-size: 1rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 8px;
+  }
+  .primary {
+    padding: 0.6rem 1rem;
+    background: #2b6a3d;
+    color: white;
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.95rem;
+  }
+</style>
diff --git a/src/lib/components/StarRating.svelte b/src/lib/components/StarRating.svelte
new file mode 100644
index 0000000..d5c0c3e
--- /dev/null
+++ b/src/lib/components/StarRating.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  type Props = {
+    value: number | null;
+    onChange?: (stars: number) => void;
+    readonly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+  };
+
+  let { value, onChange, readonly = false, size = 'md' }: Props = $props();
+
+  function setStars(n: number) {
+    if (readonly) return;
+    onChange?.(n);
+  }
+</script>
+
+<div class="stars" data-size={size}>
+  {#each [1, 2, 3, 4, 5] as n (n)}
+    <button
+      type="button"
+      class="star"
+      class:filled={value !== null && n <= value}
+      aria-label={`${n} Stern${n === 1 ? '' : 'e'}`}
+      onclick={() => setStars(n)}
+      disabled={readonly}
+    >
+      ★
+    </button>
+  {/each}
+</div>
+
+<style>
+  .stars {
+    display: inline-flex;
+    gap: 0.15rem;
+  }
+  .star {
+    background: none;
+    border: 0;
+    padding: 0.15rem 0.2rem;
+    cursor: pointer;
+    color: #d0d5d2;
+    line-height: 1;
+    font-size: 1.4rem;
+  }
+  .star:disabled {
+    cursor: default;
+  }
+  .star.filled {
+    color: #f1b100;
+  }
+  .stars[data-size='sm'] .star {
+    font-size: 1rem;
+  }
+  .stars[data-size='lg'] .star {
+    font-size: 1.9rem;
+    padding: 0.25rem 0.3rem;
+    min-width: 44px;
+    min-height: 44px;
+  }
+</style>