feat(wishlist): per-user Wünsche + Header-Badge mit Gesamtzahl

Schema-Änderung (Migration 005): - Tabelle wishlist umgestellt auf PK (recipe_id, profile_id) - wishlist_like-Tabelle zusammengelegt — Liken WAR schon "will ich auch", also werden alle bestehenden Likes Memberships auf der neuen Tabelle. - Alt-Einträge mit added_by_profile_id werden migriert, anonyme gehen verloren (war inkonsistent, jetzt erzwingen wir profile_id NOT NULL). Repository: - listWishlist aggregiert pro Rezept: wanted_by_count, wanted_by_names (kommagetrennt), on_my_wishlist für das aktive Profil - listWishlistProfileIds(recipeId) für den Recipe-Page-Loader - countWishlistRecipes für das Header-Badge (DISTINCT recipe_id) - addToWishlist/removeFromWishlist/isOnMyWishlist alle mit profile_id als Pflicht API: - POST /api/wishlist: profile_id jetzt Pflicht (nullable raus) - DELETE /api/wishlist/[recipe_id]?profile_id=X (nur eigenes Entry) - /api/wishlist/[recipe_id]/like komplett entfernt (Konzept obsolet) - Neu: GET /api/wishlist/count → { count: <distinct recipes> } UI: - Header-Heart bekommt rotes Badge mit Zahl der Wunschliste-Rezepte. wishlistStore in $lib/client/wishlist.svelte.ts hält den Count reaktiv; Refresh auf Mount, nach Add/Remove, beim Öffnen der Wunschliste. - Recipe-Detail: Loader liefert wishlist_profile_ids; onMyWishlist ist ein $derived. Toggle fragt aktives Profil (alertAction sonst), mutiert die lokale Liste + ruft wishlistStore.refresh. - Wunschliste-Seite: Heart toggelt eigenen Wunsch, Count zeigt Gesamt- wünsche, kommagetrennte Namen zeigen "wer will". Trash-Button entfernt — Heart-off reicht jetzt. Tests (99 → 99, 8 neu geschrieben): - Per-User-Add/Remove, aggregierte Counts, on_my_wishlist, Cascades bei Recipe/Profile-Delete, countWishlistRecipes = DISTINCT.
2026-04-17 19:16:19 +02:00
parent 224352d051
commit 60021b879f
12 changed files with 282 additions and 207 deletions
--- a/src/lib/client/wishlist.svelte.ts
+++ b/src/lib/client/wishlist.svelte.ts
@@ -0,0 +1,16 @@
+class WishlistStore {
+  count = $state(0);
+
+  async refresh(): Promise<void> {
+    try {
+      const res = await fetch('/api/wishlist/count');
+      if (!res.ok) return;
+      const body = await res.json();
+      this.count = typeof body.count === 'number' ? body.count : 0;
+    } catch {
+      // keep last known count on network error
+    }
+  }
+}
+
+export const wishlistStore = new WishlistStore();
--- a/src/lib/server/db/migrations/005_wishlist_per_user.sql
+++ b/src/lib/server/db/migrations/005_wishlist_per_user.sql
@@ -0,0 +1,29 @@
+-- Wishlist: from "one entry per recipe" to "per-user membership".
+-- Multiple profiles can now wish for the same recipe. The old wishlist_like
+-- table merges into this — liking WAS already "me too", so existing likes
+-- become wishlist memberships.
+
+CREATE TABLE wishlist_new (
+  recipe_id  INTEGER NOT NULL REFERENCES recipe(id) ON DELETE CASCADE,
+  profile_id INTEGER NOT NULL REFERENCES profile(id) ON DELETE CASCADE,
+  added_at   TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (recipe_id, profile_id)
+);
+
+-- Preserve existing explicit additions (only if a profile was attached)
+INSERT OR IGNORE INTO wishlist_new (recipe_id, profile_id, added_at)
+  SELECT recipe_id, added_by_profile_id, added_at
+  FROM wishlist
+  WHERE added_by_profile_id IS NOT NULL;
+
+-- Likes become memberships
+INSERT OR IGNORE INTO wishlist_new (recipe_id, profile_id, added_at)
+  SELECT recipe_id, profile_id, created_at
+  FROM wishlist_like;
+
+DROP TABLE wishlist_like;
+DROP TABLE wishlist;
+ALTER TABLE wishlist_new RENAME TO wishlist;
+
+CREATE INDEX idx_wishlist_profile ON wishlist(profile_id);
+CREATE INDEX idx_wishlist_recipe  ON wishlist(recipe_id);
--- a/src/lib/server/wishlist/repository.ts
+++ b/src/lib/server/wishlist/repository.ts
@@ -5,11 +5,10 @@ export type WishlistEntry = {
  title: string;
  image_path: string | null;
  source_domain: string | null;
-  added_by_profile_id: number | null;
-  added_by_name: string | null;
-  added_at: string;
-  like_count: number;
-  liked_by_me: 0 | 1;
+  added_at: string; // earliest per recipe
+  wanted_by_count: number;
+  wanted_by_names: string;  // comma-joined profile names
+  on_my_wishlist: 0 | 1;
  avg_stars: number | null;
 };

@@ -21,9 +20,9 @@ export function listWishlist(
  sort: SortKey = 'popular'
 ): WishlistEntry[] {
  const orderBy = {
-    popular: 'like_count DESC, w.added_at DESC',
-    newest: 'w.added_at DESC',
-    oldest: 'w.added_at ASC'
+    popular: 'wanted_by_count DESC, first_added DESC',
+    newest: 'first_added DESC',
+    oldest: 'first_added ASC'
  }[sort];

  return db
@@ -33,66 +32,76 @@ export function listWishlist(
         r.title,
         r.image_path,
         r.source_domain,
-         w.added_by_profile_id,
-         p.name AS added_by_name,
-         w.added_at,
-         (SELECT COUNT(*) FROM wishlist_like wl WHERE wl.recipe_id = w.recipe_id) AS like_count,
+         MIN(w.added_at) AS first_added,
+         MIN(w.added_at) AS added_at,
+         COUNT(w.profile_id) AS wanted_by_count,
+         COALESCE(GROUP_CONCAT(p.name, ', '), '') AS wanted_by_names,
         CASE
           WHEN ? IS NULL THEN 0
-           WHEN EXISTS (SELECT 1 FROM wishlist_like wl
-                         WHERE wl.recipe_id = w.recipe_id AND wl.profile_id = ?)
+           WHEN EXISTS (SELECT 1 FROM wishlist w2
+                         WHERE w2.recipe_id = w.recipe_id AND w2.profile_id = ?)
             THEN 1
           ELSE 0
-         END AS liked_by_me,
+         END AS on_my_wishlist,
         (SELECT AVG(stars) FROM rating WHERE recipe_id = w.recipe_id) AS avg_stars
       FROM wishlist w
       JOIN recipe r ON r.id = w.recipe_id
-       LEFT JOIN profile p ON p.id = w.added_by_profile_id
+       LEFT JOIN profile p ON p.id = w.profile_id
+       GROUP BY w.recipe_id
       ORDER BY ${orderBy}`
    )
    .all(activeProfileId, activeProfileId) as WishlistEntry[];
 }

-export function isOnWishlist(db: Database.Database, recipeId: number): boolean {
+export function listWishlistProfileIds(
+  db: Database.Database,
+  recipeId: number
+): number[] {
  return (
    db
-      .prepare('SELECT 1 AS ok FROM wishlist WHERE recipe_id = ?')
-      .get(recipeId) !== undefined
-  );
+      .prepare('SELECT profile_id FROM wishlist WHERE recipe_id = ?')
+      .all(recipeId) as { profile_id: number }[]
+  ).map((r) => r.profile_id);
+}
+
+export function countWishlistRecipes(db: Database.Database): number {
+  const row = db
+    .prepare('SELECT COUNT(DISTINCT recipe_id) AS n FROM wishlist')
+    .get() as { n: number };
+  return row.n;
 }

 export function addToWishlist(
  db: Database.Database,
  recipeId: number,
-  profileId: number | null
+  profileId: number
 ): void {
  db.prepare(
-    `INSERT INTO wishlist(recipe_id, added_by_profile_id)
+    `INSERT INTO wishlist(recipe_id, profile_id)
     VALUES (?, ?)
-     ON CONFLICT(recipe_id) DO NOTHING`
+     ON CONFLICT(recipe_id, profile_id) DO NOTHING`
  ).run(recipeId, profileId);
 }

-export function removeFromWishlist(db: Database.Database, recipeId: number): void {
-  db.prepare('DELETE FROM wishlist WHERE recipe_id = ?').run(recipeId);
-}
-
-export function likeWish(
+export function removeFromWishlist(
  db: Database.Database,
  recipeId: number,
  profileId: number
 ): void {
-  db.prepare(
-    'INSERT OR IGNORE INTO wishlist_like(recipe_id, profile_id) VALUES (?, ?)'
-  ).run(recipeId, profileId);
+  db.prepare('DELETE FROM wishlist WHERE recipe_id = ? AND profile_id = ?').run(
+    recipeId,
+    profileId
+  );
 }

-export function unlikeWish(
+export function isOnMyWishlist(
  db: Database.Database,
  recipeId: number,
  profileId: number
-): void {
-  db.prepare(
-    'DELETE FROM wishlist_like WHERE recipe_id = ? AND profile_id = ?'
-  ).run(recipeId, profileId);
+): boolean {
+  return (
+    db
+      .prepare('SELECT 1 AS ok FROM wishlist WHERE recipe_id = ? AND profile_id = ?')
+      .get(recipeId, profileId) !== undefined
+  );
 }
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
  import { goto, afterNavigate } from '$app/navigation';
  import { Heart, Settings, CookingPot, Globe, Utensils } from 'lucide-svelte';
  import { profileStore } from '$lib/client/profile.svelte';
+  import { wishlistStore } from '$lib/client/wishlist.svelte';
  import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte';
  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
  import SearchLoader from '$lib/components/SearchLoader.svelte';
@@ -105,6 +106,7 @@

  onMount(() => {
    profileStore.load();
+    void wishlistStore.refresh();
    document.addEventListener('click', handleClickOutside);
    document.addEventListener('keydown', handleKey);
    return () => {
@@ -211,8 +213,17 @@
      </div>
    {/if}
    <div class="bar-right">
-      <a href="/wishlist" class="nav-link" aria-label="Wunschliste">
+      <a
+        href="/wishlist"
+        class="nav-link wishlist-link"
+        aria-label={wishlistStore.count > 0
+          ? `Wunschliste (${wishlistStore.count})`
+          : 'Wunschliste'}
+      >
        <Heart size={20} strokeWidth={2} />
+        {#if wishlistStore.count > 0}
+          <span class="badge">{wishlistStore.count}</span>
+        {/if}
      </a>
      <a href="/admin" class="nav-link" aria-label="Einstellungen">
        <Settings size={20} strokeWidth={2} />
@@ -399,10 +410,28 @@
    border-radius: 999px;
    text-decoration: none;
    font-size: 1.15rem;
+    position: relative;
  }
  .nav-link:hover {
    background: #f4f8f5;
  }
+  .badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 999px;
+    background: #c53030;
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 700;
+    line-height: 18px;
+    text-align: center;
+    box-shadow: 0 0 0 2px white;
+    pointer-events: none;
+  }
  main {
    padding: 0 1rem 4rem;
    max-width: 760px;
--- a/src/routes/api/wishlist/+server.ts
+++ b/src/routes/api/wishlist/+server.ts
@@ -10,7 +10,7 @@ import {

 const AddSchema = z.object({
  recipe_id: z.number().int().positive(),
-  profile_id: z.number().int().positive().nullable().optional()
+  profile_id: z.number().int().positive()
 });

 const VALID_SORTS: readonly SortKey[] = ['popular', 'newest', 'oldest'] as const;
@@ -34,7 +34,7 @@ export const GET: RequestHandler = async ({ url }) => {
 export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json().catch(() => null);
  const parsed = AddSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  addToWishlist(getDb(), parsed.data.recipe_id, parsed.data.profile_id ?? null);
+  if (!parsed.success) error(400, { message: 'recipe_id and profile_id required' });
+  addToWishlist(getDb(), parsed.data.recipe_id, parsed.data.profile_id);
  return json({ ok: true }, { status: 201 });
 };
--- a/src/routes/api/wishlist/[recipe_id]/+server.ts
+++ b/src/routes/api/wishlist/[recipe_id]/+server.ts
@@ -3,14 +3,15 @@ import { json, error } from '@sveltejs/kit';
 import { getDb } from '$lib/server/db';
 import { removeFromWishlist } from '$lib/server/wishlist/repository';

-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid recipe_id' });
-  return id;
+function parsePositiveInt(raw: string | null, field: string): number {
+  const n = raw === null ? NaN : Number(raw);
+  if (!Number.isInteger(n) || n <= 0) error(400, { message: `Invalid ${field}` });
+  return n;
 }

-export const DELETE: RequestHandler = async ({ params }) => {
-  const id = parseId(params.recipe_id!);
-  removeFromWishlist(getDb(), id);
+export const DELETE: RequestHandler = async ({ params, url }) => {
+  const id = parsePositiveInt(params.recipe_id!, 'recipe_id');
+  const profileId = parsePositiveInt(url.searchParams.get('profile_id'), 'profile_id');
+  removeFromWishlist(getDb(), id, profileId);
  return json({ ok: true });
 };
--- a/src/routes/api/wishlist/[recipe_id]/like/+server.ts
+++ b/src/routes/api/wishlist/[recipe_id]/like/+server.ts
@@ -1,31 +0,0 @@
-import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
-import { z } from 'zod';
-import { getDb } from '$lib/server/db';
-import { likeWish, unlikeWish } from '$lib/server/wishlist/repository';
-
-const Schema = z.object({ profile_id: z.number().int().positive() });
-
-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid recipe_id' });
-  return id;
-}
-
-export const PUT: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.recipe_id!);
-  const body = await request.json().catch(() => null);
-  const parsed = Schema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  likeWish(getDb(), id, parsed.data.profile_id);
-  return json({ ok: true });
-};
-
-export const DELETE: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.recipe_id!);
-  const body = await request.json().catch(() => null);
-  const parsed = Schema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  unlikeWish(getDb(), id, parsed.data.profile_id);
-  return json({ ok: true });
-};
--- a/src/routes/api/wishlist/count/+server.ts
+++ b/src/routes/api/wishlist/count/+server.ts
@@ -0,0 +1,8 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { getDb } from '$lib/server/db';
+import { countWishlistRecipes } from '$lib/server/wishlist/repository';
+
+export const GET: RequestHandler = async () => {
+  return json({ count: countWishlistRecipes(getDb()) });
+};
--- a/src/routes/recipes/[id]/+page.server.ts
+++ b/src/routes/recipes/[id]/+page.server.ts
@@ -8,6 +8,7 @@ import {
  listFavoriteProfiles,
  listRatings
 } from '$lib/server/recipes/actions';
+import { listWishlistProfileIds } from '$lib/server/wishlist/repository';

 export const load: PageServerLoad = async ({ params }) => {
  const id = Number(params.id);
@@ -19,7 +20,16 @@ export const load: PageServerLoad = async ({ params }) => {
  const comments = listComments(db, id);
  const cooking_log = listCookingLog(db, id);
  const favorite_profile_ids = listFavoriteProfiles(db, id);
+  const wishlist_profile_ids = listWishlistProfileIds(db, id);
  const avg_stars =
    ratings.length === 0 ? null : ratings.reduce((s, r) => s + r.stars, 0) / ratings.length;
-  return { recipe, ratings, comments, cooking_log, favorite_profile_ids, avg_stars };
+  return {
+    recipe,
+    ratings,
+    comments,
+    cooking_log,
+    favorite_profile_ids,
+    wishlist_profile_ids,
+    avg_stars
+  };
 };
--- a/src/routes/recipes/[id]/+page.svelte
+++ b/src/routes/recipes/[id]/+page.svelte
@@ -14,6 +14,7 @@
  import RecipeView from '$lib/components/RecipeView.svelte';
  import StarRating from '$lib/components/StarRating.svelte';
  import { profileStore } from '$lib/client/profile.svelte';
+  import { wishlistStore } from '$lib/client/wishlist.svelte';
  import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
  import type { CommentRow } from '$lib/server/recipes/actions';

@@ -24,7 +25,7 @@
  let comments = $state<CommentRow[]>([]);
  let cookingLog = $state<typeof data.cooking_log>([]);
  let favoriteProfileIds = $state<number[]>([]);
-  let onWishlist = $state(false);
+  let wishlistProfileIds = $state<number[]>([]);
  let newComment = $state('');

  let title = $state('');
@@ -37,6 +38,7 @@
    comments = [...data.comments];
    cookingLog = [...data.cooking_log];
    favoriteProfileIds = [...data.favorite_profile_ids];
+    wishlistProfileIds = [...data.wishlist_profile_ids];
    title = data.recipe.title;
  });

@@ -50,6 +52,10 @@
    profileStore.active ? favoriteProfileIds.includes(profileStore.active.id) : false
  );

+  const onMyWishlist = $derived(
+    profileStore.active ? wishlistProfileIds.includes(profileStore.active.id) : false
+  );
+
  async function setRating(stars: number) {
    if (!profileStore.active) {
      await alertAction({
@@ -195,27 +201,28 @@
  }

  async function toggleWishlist() {
-    if (onWishlist) {
-      await fetch(`/api/wishlist/${data.recipe.id}`, { method: 'DELETE' });
-      onWishlist = false;
+    if (!profileStore.active) {
+      await alertAction({
+        title: 'Kein Profil gewählt',
+        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
+      });
+      return;
+    }
+    const profileId = profileStore.active.id;
+    if (onMyWishlist) {
+      await fetch(`/api/wishlist/${data.recipe.id}?profile_id=${profileId}`, {
+        method: 'DELETE'
+      });
+      wishlistProfileIds = wishlistProfileIds.filter((id) => id !== profileId);
    } else {
      await fetch('/api/wishlist', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({
-          recipe_id: data.recipe.id,
-          profile_id: profileStore.active?.id ?? null
-        })
+        body: JSON.stringify({ recipe_id: data.recipe.id, profile_id: profileId })
      });
-      onWishlist = true;
+      wishlistProfileIds = [...wishlistProfileIds, profileId];
    }
-  }
-
-  async function refreshWishlistState() {
-    const res = await fetch('/api/wishlist?sort=newest');
-    if (!res.ok) return;
-    const body = await res.json();
-    onWishlist = body.entries.some((e: { recipe_id: number }) => e.recipe_id === data.recipe.id);
+    void wishlistStore.refresh();
  }

  // Wake-Lock
@@ -232,7 +239,6 @@

  onMount(() => {
    void requestWakeLock();
-    void refreshWishlistState();
    const onVisibility = () => {
      if (document.visibilityState === 'visible' && !wakeLock) void requestWakeLock();
    };
@@ -286,8 +292,8 @@
          <Heart size={18} strokeWidth={2} fill={isFav ? 'currentColor' : 'none'} />
          <span>Favorit</span>
        </button>
-        <button class="btn" class:wish={onWishlist} onclick={toggleWishlist}>
-          {#if onWishlist}
+        <button class="btn" class:wish={onMyWishlist} onclick={toggleWishlist}>
+          {#if onMyWishlist}
            <Check size={18} strokeWidth={2.5} />
            <span>Auf Wunschliste</span>
          {:else}
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
  import { onMount } from 'svelte';
-  import { Heart, Trash2, CookingPot } from 'lucide-svelte';
+  import { Heart, CookingPot } from 'lucide-svelte';
  import { profileStore } from '$lib/client/profile.svelte';
-  import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
+  import { wishlistStore } from '$lib/client/wishlist.svelte';
+  import { alertAction } from '$lib/client/confirm.svelte';
  import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';

  let entries = $state<WishlistEntry[]>([]);
@@ -26,36 +27,34 @@
    void load();
  });

-  async function toggleLike(entry: WishlistEntry) {
+  async function toggleMine(entry: WishlistEntry) {
    if (!profileStore.active) {
      await alertAction({
        title: 'Kein Profil gewählt',
-        message: 'Tippe oben rechts auf „Profil wählen", um zu liken.'
+        message: 'Tippe oben rechts auf „Profil wählen", um mitzuwünschen.'
      });
      return;
    }
-    const method = entry.liked_by_me ? 'DELETE' : 'PUT';
-    await fetch(`/api/wishlist/${entry.recipe_id}/like`, {
-      method,
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ profile_id: profileStore.active.id })
-    });
+    const profileId = profileStore.active.id;
+    if (entry.on_my_wishlist) {
+      await fetch(`/api/wishlist/${entry.recipe_id}?profile_id=${profileId}`, {
+        method: 'DELETE'
+      });
+    } else {
+      await fetch('/api/wishlist', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ recipe_id: entry.recipe_id, profile_id: profileId })
+      });
+    }
    await load();
+    void wishlistStore.refresh();
  }

-  async function remove(entry: WishlistEntry) {
-    const ok = await confirmAction({
-      title: 'Von der Wunschliste entfernen?',
-      message: `„${entry.title}" wird aus der Wunschliste entfernt. Das Rezept selbst bleibt gespeichert.`,
-      confirmLabel: 'Entfernen',
-      destructive: true
-    });
-    if (!ok) return;
-    await fetch(`/api/wishlist/${entry.recipe_id}`, { method: 'DELETE' });
-    await load();
-  }
-
-  onMount(load);
+  onMount(() => {
+    void load();
+    void wishlistStore.refresh();
+  });

  function resolveImage(p: string | null): string | null {
    if (!p) return null;
@@ -100,11 +99,11 @@
          <div class="text">
            <div class="title">{e.title}</div>
            <div class="meta">
-              {#if e.added_by_name}
-                <span>von {e.added_by_name}</span>
+              {#if e.wanted_by_names}
+                <span class="wanted-by">{e.wanted_by_names}</span>
              {/if}
              {#if e.source_domain}
-                <span>· {e.source_domain}</span>
+                <span class="src">· {e.source_domain}</span>
              {/if}
              {#if e.avg_stars !== null}
                <span>· ★ {e.avg_stars.toFixed(1)}</span>
@@ -115,18 +114,15 @@
        <div class="actions">
          <button
            class="like"
-            class:active={e.liked_by_me}
-            aria-label={e.liked_by_me ? 'Unlike' : 'Like'}
-            onclick={() => toggleLike(e)}
+            class:active={e.on_my_wishlist}
+            aria-label={e.on_my_wishlist ? 'Ich will das nicht mehr' : 'Ich will das auch'}
+            onclick={() => toggleMine(e)}
          >
-            <Heart size={18} strokeWidth={2} fill={e.liked_by_me ? 'currentColor' : 'none'} />
-            {#if e.like_count > 0}
-              <span class="count">{e.like_count}</span>
+            <Heart size={18} strokeWidth={2} fill={e.on_my_wishlist ? 'currentColor' : 'none'} />
+            {#if e.wanted_by_count > 0}
+              <span class="count">{e.wanted_by_count}</span>
            {/if}
          </button>
-          <button class="del" aria-label="Entfernen" onclick={() => remove(e)}>
-            <Trash2 size={18} strokeWidth={2} />
-          </button>
        </div>
      </li>
    {/each}
@@ -175,7 +171,8 @@
    padding: 3rem 1rem;
  }
  .big {
-    font-size: 3rem;
+    color: #8fb097;
+    display: inline-flex;
    margin: 0 0 0.5rem;
  }
  .hint {
@@ -215,7 +212,7 @@
    background: #eef3ef;
    display: grid;
    place-items: center;
-    font-size: 2rem;
+    color: #8fb097;
    flex-shrink: 0;
  }
  .text {
@@ -239,15 +236,16 @@
    font-size: 0.82rem;
    flex-wrap: wrap;
  }
+  .wanted-by {
+    color: #2b6a3d;
+    font-weight: 500;
+  }
  .actions {
    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
+    align-items: center;
    padding: 0.5rem 0.6rem 0.5rem 0;
-    justify-content: center;
  }
-  .like,
-  .del {
+  .like {
    min-width: 48px;
    min-height: 44px;
    border-radius: 10px;
@@ -259,6 +257,7 @@
    justify-content: center;
    gap: 0.3rem;
    font-size: 1.05rem;
+    color: #444;
  }
  .like.active {
    color: #c53030;
--- a/tests/integration/wishlist.test.ts
+++ b/tests/integration/wishlist.test.ts
@@ -7,9 +7,9 @@ import {
  addToWishlist,
  removeFromWishlist,
  listWishlist,
-  isOnWishlist,
-  likeWish,
-  unlikeWish
+  listWishlistProfileIds,
+  isOnMyWishlist,
+  countWishlistRecipes
 } from '../../src/lib/server/wishlist/repository';
 import type { Recipe } from '../../src/lib/types';

@@ -38,96 +38,95 @@ beforeEach(() => {
  db = openInMemoryForTest();
 });

-describe('wishlist add/remove', () => {
-  it('adds and lists', () => {
+describe('per-user wishlist', () => {
+  it('adds and lists for a single profile', () => {
    const r1 = insertRecipe(db, recipe('Carbonara'));
    const p = createProfile(db, 'Hendrik');
    addToWishlist(db, r1, p.id);
-    expect(isOnWishlist(db, r1)).toBe(true);
+    expect(isOnMyWishlist(db, r1, p.id)).toBe(true);
+
    const list = listWishlist(db, p.id);
    expect(list.length).toBe(1);
    expect(list[0].title).toBe('Carbonara');
-    expect(list[0].added_by_name).toBe('Hendrik');
+    expect(list[0].wanted_by_count).toBe(1);
+    expect(list[0].wanted_by_names).toBe('Hendrik');
+    expect(list[0].on_my_wishlist).toBe(1);
  });

-  it('is idempotent on double-add', () => {
+  it('aggregates multiple users per recipe', () => {
+    const r1 = insertRecipe(db, recipe('Pizza'));
+    const a = createProfile(db, 'Alice');
+    const b = createProfile(db, 'Bob');
+    const c = createProfile(db, 'Cara');
+    addToWishlist(db, r1, a.id);
+    addToWishlist(db, r1, b.id);
+    addToWishlist(db, r1, c.id);
+
+    const listFromA = listWishlist(db, a.id);
+    expect(listFromA.length).toBe(1);
+    expect(listFromA[0].wanted_by_count).toBe(3);
+    expect(listFromA[0].on_my_wishlist).toBe(1);
+
+    const ids = listWishlistProfileIds(db, r1);
+    expect(ids.sort()).toEqual([a.id, b.id, c.id].sort());
+  });
+
+  it('is idempotent on double-add for same profile', () => {
    const r1 = insertRecipe(db, recipe('Pizza'));
    const p = createProfile(db, 'A');
    addToWishlist(db, r1, p.id);
    addToWishlist(db, r1, p.id);
-    expect(listWishlist(db, p.id).length).toBe(1);
+    const list = listWishlist(db, p.id);
+    expect(list[0].wanted_by_count).toBe(1);
  });

-  it('removes', () => {
-    const r1 = insertRecipe(db, recipe('X'));
-    addToWishlist(db, r1, null);
-    removeFromWishlist(db, r1);
-    expect(listWishlist(db, null).length).toBe(0);
+  it('removes only my entry, keeps others', () => {
+    const r1 = insertRecipe(db, recipe('Salad'));
+    const a = createProfile(db, 'A');
+    const b = createProfile(db, 'B');
+    addToWishlist(db, r1, a.id);
+    addToWishlist(db, r1, b.id);
+    removeFromWishlist(db, r1, a.id);
+    expect(isOnMyWishlist(db, r1, a.id)).toBe(false);
+    expect(isOnMyWishlist(db, r1, b.id)).toBe(true);
+    expect(listWishlist(db, b.id)[0].wanted_by_count).toBe(1);
  });

-  it('cascades with recipe delete', () => {
+  it('on_my_wishlist is 0 for profiles that did not wish', () => {
+    const r1 = insertRecipe(db, recipe('Curry'));
+    const a = createProfile(db, 'A');
+    const b = createProfile(db, 'B');
+    addToWishlist(db, r1, a.id);
+
+    const listFromB = listWishlist(db, b.id);
+    expect(listFromB[0].on_my_wishlist).toBe(0);
+    expect(listFromB[0].wanted_by_count).toBe(1);
+  });
+
+  it('cascades when recipe is deleted', () => {
    const r1 = insertRecipe(db, recipe('X'));
-    addToWishlist(db, r1, null);
+    const a = createProfile(db, 'A');
+    addToWishlist(db, r1, a.id);
    db.prepare('DELETE FROM recipe WHERE id = ?').run(r1);
+    expect(listWishlist(db, a.id).length).toBe(0);
+  });
+
+  it('cascades when profile is deleted', () => {
+    const r1 = insertRecipe(db, recipe('X'));
+    const a = createProfile(db, 'A');
+    addToWishlist(db, r1, a.id);
+    db.prepare('DELETE FROM profile WHERE id = ?').run(a.id);
    expect(listWishlist(db, null).length).toBe(0);
  });
-});

-describe('wishlist likes + sort', () => {
-  it('counts likes per entry and shows liked_by_me for active profile', () => {
+  it('countWishlistRecipes counts distinct recipes (not rows)', () => {
    const r1 = insertRecipe(db, recipe('R1'));
    const r2 = insertRecipe(db, recipe('R2'));
    const a = createProfile(db, 'A');
    const b = createProfile(db, 'B');
-    const c = createProfile(db, 'C');
    addToWishlist(db, r1, a.id);
+    addToWishlist(db, r1, b.id); // same recipe, different user
    addToWishlist(db, r2, a.id);
-    likeWish(db, r1, a.id);
-    likeWish(db, r1, b.id);
-    likeWish(db, r1, c.id);
-    likeWish(db, r2, a.id);
-
-    const listA = listWishlist(db, a.id, 'popular');
-    expect(listA[0].title).toBe('R1');
-    expect(listA[0].like_count).toBe(3);
-    expect(listA[0].liked_by_me).toBe(1);
-    expect(listA[1].title).toBe('R2');
-    expect(listA[1].like_count).toBe(1);
-
-    const listB = listWishlist(db, b.id);
-    expect(listB.find((e) => e.recipe_id === r1)!.liked_by_me).toBe(1);
-    expect(listB.find((e) => e.recipe_id === r2)!.liked_by_me).toBe(0);
-  });
-
-  it('unlike is idempotent and decrements count', () => {
-    const r = insertRecipe(db, recipe('R'));
-    const a = createProfile(db, 'A');
-    addToWishlist(db, r, a.id);
-    likeWish(db, r, a.id);
-    unlikeWish(db, r, a.id);
-    unlikeWish(db, r, a.id);
-    const [entry] = listWishlist(db, a.id);
-    expect(entry.like_count).toBe(0);
-    expect(entry.liked_by_me).toBe(0);
-  });
-
-  it('sort=newest orders by added_at desc, oldest asc', () => {
-    const r1 = insertRecipe(db, recipe('First'));
-    // Force different timestamps via raw insert with explicit added_at
-    db.prepare("INSERT INTO wishlist(recipe_id, added_at) VALUES (?, '2026-01-01 10:00:00')").run(r1);
-    const r2 = insertRecipe(db, recipe('Second'));
-    db.prepare("INSERT INTO wishlist(recipe_id, added_at) VALUES (?, '2026-01-02 10:00:00')").run(r2);
-
-    expect(listWishlist(db, null, 'newest').map((e) => e.title)).toEqual(['Second', 'First']);
-    expect(listWishlist(db, null, 'oldest').map((e) => e.title)).toEqual(['First', 'Second']);
-  });
-
-  it('handles anonymous (no active profile) — liked_by_me always 0', () => {
-    const r = insertRecipe(db, recipe('R'));
-    addToWishlist(db, r, null);
-    likeWish(db, r, createProfile(db, 'A').id);
-    const [entry] = listWishlist(db, null);
-    expect(entry.like_count).toBe(1);
-    expect(entry.liked_by_me).toBe(0);
+    expect(countWishlistRecipes(db)).toBe(2);
  });
 });