Implement user favorites feature for recipes

- Add UserFavorites MongoDB model with ObjectId references
- Create authenticated API endpoints for favorites management
- Add Heart icon and FavoriteButton components with toggle functionality
- Display favorite button below recipe tags for logged-in users
- Add Favoriten navigation link (visible only when authenticated)
- Create favorites page with grid layout and search functionality
- Store favorites by MongoDB ObjectId for data integrity

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-09-01 20:18:57 +02:00
parent 1d78b5439e
commit fe46ab194e
11 changed files with 460 additions and 1 deletions

View File

@@ -0,0 +1,58 @@
<script lang="ts">
import type { PageData } from './$types';
import '$lib/css/nordtheme.css';
import Recipes from '$lib/components/Recipes.svelte';
import Card from '$lib/components/Card.svelte';
import Search from '$lib/components/Search.svelte';
export let data: PageData;
export let current_month = new Date().getMonth() + 1;
</script>
<style>
h1{
text-align: center;
margin-bottom: 0;
font-size: 4rem;
}
.subheading{
text-align: center;
margin-top: 0;
font-size: 1.5rem;
}
.empty-state{
text-align: center;
margin-top: 3rem;
color: var(--nord3);
}
</style>
<svelte:head>
<title>Meine Favoriten - Bocken Rezepte</title>
<meta name="description" content="Meine favorisierten Rezepte aus der Bockenschen Küche." />
</svelte:head>
<h1>Favoriten</h1>
<p class=subheading>
{#if data.favorites.length > 0}
{data.favorites.length} favorisierte Rezepte
{:else}
Noch keine Favoriten gespeichert
{/if}
</p>
<Search></Search>
{#if data.error}
<p class="empty-state">Fehler beim Laden der Favoriten: {data.error}</p>
{:else if data.favorites.length > 0}
<Recipes>
{#each data.favorites as recipe}
<Card {recipe} {current_month}></Card>
{/each}
</Recipes>
{:else}
<div class="empty-state">
<p>Du hast noch keine Rezepte als Favoriten gespeichert.</p>
<p>Besuche ein <a href="/rezepte">Rezept</a> und klicke auf das Herz-Symbol, um es zu deinen Favoriten hinzuzufügen.</p>
</div>
{/if}