60021b879f
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m16s
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.
477 lines
12 KiB
Svelte
477 lines
12 KiB
Svelte
<script lang="ts">
|
||
import { onMount } from 'svelte';
|
||
import { page } from '$app/stores';
|
||
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';
|
||
import type { SearchHit } from '$lib/server/recipes/search-local';
|
||
import type { WebHit } from '$lib/server/search/searxng';
|
||
|
||
let { children } = $props();
|
||
|
||
let navQuery = $state('');
|
||
let navHits = $state<SearchHit[]>([]);
|
||
let navWebHits = $state<WebHit[]>([]);
|
||
let navSearching = $state(false);
|
||
let navWebSearching = $state(false);
|
||
let navWebError = $state<string | null>(null);
|
||
let navOpen = $state(false);
|
||
let navContainer: HTMLElement | undefined = $state();
|
||
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
|
||
|
||
const showHeaderSearch = $derived(
|
||
$page.url.pathname.startsWith('/recipes/') || $page.url.pathname === '/preview'
|
||
);
|
||
|
||
$effect(() => {
|
||
const q = navQuery.trim();
|
||
if (debounceTimer) clearTimeout(debounceTimer);
|
||
if (q.length <= 3) {
|
||
navHits = [];
|
||
navWebHits = [];
|
||
navSearching = false;
|
||
navWebSearching = false;
|
||
navWebError = null;
|
||
navOpen = false;
|
||
return;
|
||
}
|
||
navSearching = true;
|
||
navWebHits = [];
|
||
navWebSearching = false;
|
||
navWebError = null;
|
||
navOpen = true;
|
||
debounceTimer = setTimeout(async () => {
|
||
try {
|
||
const res = await fetch(`/api/recipes/search?q=${encodeURIComponent(q)}`);
|
||
const body = await res.json();
|
||
if (navQuery.trim() !== q) return;
|
||
navHits = body.hits;
|
||
if (body.hits.length === 0) {
|
||
navWebSearching = true;
|
||
try {
|
||
const wres = await fetch(`/api/recipes/search/web?q=${encodeURIComponent(q)}`);
|
||
if (navQuery.trim() !== q) return;
|
||
if (!wres.ok) {
|
||
const err = await wres.json().catch(() => ({}));
|
||
navWebError = err.message ?? `HTTP ${wres.status}`;
|
||
} else {
|
||
const wbody = await wres.json();
|
||
navWebHits = wbody.hits;
|
||
}
|
||
} finally {
|
||
if (navQuery.trim() === q) navWebSearching = false;
|
||
}
|
||
}
|
||
} finally {
|
||
if (navQuery.trim() === q) navSearching = false;
|
||
}
|
||
}, 300);
|
||
});
|
||
|
||
function submitNav(e: SubmitEvent) {
|
||
e.preventDefault();
|
||
const q = navQuery.trim();
|
||
if (!q) return;
|
||
navOpen = false;
|
||
void goto(`/search?q=${encodeURIComponent(q)}`);
|
||
}
|
||
|
||
function handleClickOutside(e: MouseEvent) {
|
||
if (navContainer && !navContainer.contains(e.target as Node)) {
|
||
navOpen = false;
|
||
}
|
||
}
|
||
|
||
function handleKey(e: KeyboardEvent) {
|
||
if (e.key === 'Escape' && navOpen) navOpen = false;
|
||
}
|
||
|
||
function pickHit() {
|
||
navOpen = false;
|
||
navQuery = '';
|
||
navHits = [];
|
||
navWebHits = [];
|
||
}
|
||
|
||
afterNavigate(() => {
|
||
navQuery = '';
|
||
navHits = [];
|
||
navWebHits = [];
|
||
navOpen = false;
|
||
});
|
||
|
||
onMount(() => {
|
||
profileStore.load();
|
||
void wishlistStore.refresh();
|
||
document.addEventListener('click', handleClickOutside);
|
||
document.addEventListener('keydown', handleKey);
|
||
return () => {
|
||
document.removeEventListener('click', handleClickOutside);
|
||
document.removeEventListener('keydown', handleKey);
|
||
};
|
||
});
|
||
</script>
|
||
|
||
<ConfirmDialog />
|
||
|
||
<header class="bar">
|
||
<div class="bar-inner">
|
||
<a href="/" class="brand">Kochwas</a>
|
||
{#if showHeaderSearch}
|
||
<div class="nav-search-wrap" bind:this={navContainer}>
|
||
<form class="nav-search" onsubmit={submitNav} role="search">
|
||
<input
|
||
type="search"
|
||
bind:value={navQuery}
|
||
onfocus={() => {
|
||
if (navHits.length > 0 || navQuery.trim().length > 3) navOpen = true;
|
||
}}
|
||
placeholder="Rezept suchen…"
|
||
autocomplete="off"
|
||
inputmode="search"
|
||
aria-label="Suchbegriff"
|
||
/>
|
||
</form>
|
||
{#if navOpen}
|
||
<div class="dropdown" role="listbox">
|
||
{#if navSearching && navHits.length === 0}
|
||
<SearchLoader scope="local" size="sm" />
|
||
{:else if navHits.length > 0}
|
||
<ul class="dd-list">
|
||
{#each navHits as r (r.id)}
|
||
<li>
|
||
<a
|
||
href={`/recipes/${r.id}`}
|
||
class="dd-item"
|
||
onclick={pickHit}
|
||
role="option"
|
||
aria-selected="false"
|
||
>
|
||
{#if r.image_path}
|
||
<img src={`/images/${r.image_path}`} alt="" loading="lazy" />
|
||
{:else}
|
||
<div class="dd-placeholder"><CookingPot size={22} /></div>
|
||
{/if}
|
||
<div class="dd-body">
|
||
<div class="dd-title">{r.title}</div>
|
||
{#if r.source_domain}
|
||
<div class="dd-domain">{r.source_domain}</div>
|
||
{/if}
|
||
</div>
|
||
</a>
|
||
</li>
|
||
{/each}
|
||
</ul>
|
||
<a
|
||
class="dd-web"
|
||
href={`/search/web?q=${encodeURIComponent(navQuery.trim())}`}
|
||
onclick={pickHit}
|
||
>
|
||
<Globe size={16} strokeWidth={2} />
|
||
<span>Im Internet weitersuchen</span>
|
||
</a>
|
||
{:else}
|
||
<p class="dd-section">Keine lokalen Rezepte – aus dem Internet:</p>
|
||
{#if navWebSearching}
|
||
<SearchLoader scope="web" size="sm" />
|
||
{:else if navWebError}
|
||
<p class="dd-status dd-error">Internet-Suche zurzeit nicht möglich.</p>
|
||
{:else if navWebHits.length > 0}
|
||
<ul class="dd-list">
|
||
{#each navWebHits as w (w.url)}
|
||
<li>
|
||
<a
|
||
href={`/preview?url=${encodeURIComponent(w.url)}`}
|
||
class="dd-item"
|
||
onclick={pickHit}
|
||
role="option"
|
||
aria-selected="false"
|
||
>
|
||
{#if w.thumbnail}
|
||
<img src={w.thumbnail} alt="" loading="lazy" />
|
||
{:else}
|
||
<div class="dd-placeholder"><Utensils size={22} /></div>
|
||
{/if}
|
||
<div class="dd-body">
|
||
<div class="dd-title">{w.title}</div>
|
||
<div class="dd-domain">{w.domain}</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
{/each}
|
||
</ul>
|
||
{:else}
|
||
<p class="dd-status">Auch im Internet nichts gefunden.</p>
|
||
{/if}
|
||
{/if}
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
{/if}
|
||
<div class="bar-right">
|
||
<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} />
|
||
</a>
|
||
<ProfileSwitcher />
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
{@render children()}
|
||
</main>
|
||
|
||
<style>
|
||
:global(html, body) {
|
||
margin: 0;
|
||
padding: 0;
|
||
background: #f8faf8;
|
||
color: #1a1a1a;
|
||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
:global(a) {
|
||
color: #2b6a3d;
|
||
}
|
||
:global(*) {
|
||
box-sizing: border-box;
|
||
}
|
||
.bar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
background: white;
|
||
border-bottom: 1px solid #e4eae7;
|
||
}
|
||
.bar-inner {
|
||
max-width: 760px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
padding: 0.6rem 1rem;
|
||
position: relative;
|
||
}
|
||
.brand {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
color: #2b6a3d;
|
||
flex-shrink: 0;
|
||
}
|
||
.nav-search-wrap {
|
||
position: relative;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.nav-search {
|
||
display: flex;
|
||
}
|
||
.nav-search input {
|
||
width: 100%;
|
||
padding: 0.55rem 0.85rem;
|
||
font-size: 0.95rem;
|
||
border: 1px solid #cfd9d1;
|
||
border-radius: 999px;
|
||
background: #f4f8f5;
|
||
min-height: 40px;
|
||
}
|
||
.nav-search input:focus {
|
||
outline: 2px solid #2b6a3d;
|
||
outline-offset: 1px;
|
||
background: white;
|
||
}
|
||
.dropdown {
|
||
position: absolute;
|
||
top: calc(100% + 0.4rem);
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
border: 1px solid #e4eae7;
|
||
border-radius: 12px;
|
||
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
z-index: 50;
|
||
}
|
||
.dd-list {
|
||
list-style: none;
|
||
padding: 0.35rem;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.1rem;
|
||
}
|
||
.dd-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.65rem;
|
||
padding: 0.45rem 0.55rem;
|
||
text-decoration: none;
|
||
color: #1a1a1a;
|
||
border-radius: 10px;
|
||
min-height: 52px;
|
||
}
|
||
.dd-item:hover {
|
||
background: #f4f8f5;
|
||
}
|
||
.dd-item img,
|
||
.dd-placeholder {
|
||
width: 44px;
|
||
height: 44px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
background: #eef3ef;
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 1.3rem;
|
||
flex-shrink: 0;
|
||
}
|
||
.dd-body {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
.dd-title {
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
line-height: 1.25;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.dd-domain {
|
||
font-size: 0.78rem;
|
||
color: #888;
|
||
margin-top: 0.1rem;
|
||
}
|
||
.dd-status {
|
||
text-align: center;
|
||
color: #888;
|
||
padding: 0.9rem 0.6rem;
|
||
margin: 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
.dd-error {
|
||
color: #c53030;
|
||
}
|
||
.dd-section {
|
||
margin: 0;
|
||
padding: 0.6rem 0.85rem 0.3rem;
|
||
font-size: 0.8rem;
|
||
color: #888;
|
||
border-bottom: 1px solid #f0f3f1;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
.dd-web {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.4rem;
|
||
padding: 0.75rem 0.85rem;
|
||
border-top: 1px solid #e4eae7;
|
||
text-decoration: none;
|
||
color: #2b6a3d;
|
||
font-size: 0.95rem;
|
||
background: #fafdfb;
|
||
}
|
||
.dd-web:hover {
|
||
background: #eaf4ed;
|
||
}
|
||
.bar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
flex-shrink: 0;
|
||
margin-left: auto;
|
||
}
|
||
.nav-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
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;
|
||
margin: 0 auto;
|
||
}
|
||
@media (max-width: 520px) {
|
||
.brand {
|
||
font-size: 0;
|
||
width: 1.6rem;
|
||
height: 1.6rem;
|
||
background: #2b6a3d;
|
||
border-radius: 8px;
|
||
position: relative;
|
||
}
|
||
.brand::after {
|
||
content: '🍳';
|
||
font-size: 1rem;
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
.nav-link {
|
||
width: 36px;
|
||
height: 36px;
|
||
font-size: 1.05rem;
|
||
}
|
||
/* Beim Tippen auf engen Screens nach rechts ausdehnen
|
||
und die Action-Icons dahinter verschwinden lassen. */
|
||
.nav-search-wrap:focus-within {
|
||
position: absolute;
|
||
top: 0.6rem;
|
||
bottom: 0.6rem;
|
||
left: calc(1rem + 1.6rem + 0.6rem);
|
||
right: 1rem;
|
||
z-index: 60;
|
||
}
|
||
.nav-search-wrap:focus-within .nav-search input {
|
||
background: white;
|
||
}
|
||
}
|
||
</style>
|