Implement secure client-side favorites loading to fix nginx 502 issues

- Create client-side favorites store with secure authentication
- Remove server-side favorites fetching that caused nginx routing issues
- Update FavoriteButton to properly handle short_name/ObjectId relationship
- Use existing /api/rezepte/favorites/check endpoint for status checking
- Maintain security by requiring authentication for all favorites operations

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/routes/rezepte/+page.server.ts

@@ -1,22 +1,14 @@
 import type { PageServerLoad } from "./$types";
-import { getUserFavorites, addFavoriteStatusToRecipes } from "$lib/server/favorites";
 
-export async function load({ fetch, locals }) {
+export async function load({ fetch }) {
     let current_month = new Date().getMonth() + 1
     const res_season = await fetch(`/api/rezepte/items/in_season/` + current_month);
     const res_all_brief = await fetch(`/api/rezepte/items/all_brief`);
     const item_season = await res_season.json();
     const item_all_brief = await res_all_brief.json();
     
-    // Get user favorites and session
-    const [userFavorites, session] = await Promise.all([
-        getUserFavorites(fetch, locals),
-        locals.auth()
-    ]);
-    
     return {
-        season: addFavoriteStatusToRecipes(item_season, userFavorites),
-        all_brief: addFavoriteStatusToRecipes(item_all_brief, userFavorites),
-        session
+        season: item_season,
+        all_brief: item_all_brief
     };
 };

src/routes/rezepte/+page.svelte

@@ -1,12 +1,26 @@
 <script lang="ts">
 	import type { PageData } from './$types';
+	import { onMount } from 'svelte';
+	import { favorites, addFavoriteStatusToRecipes } from '$lib/stores/favorites';
+	import { page } from '$app/stores';
     	import MediaScroller from '$lib/components/MediaScroller.svelte';
     	import AddButton from '$lib/components/AddButton.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
-	const categories = ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Frühstück", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli", "Snack"]
+	const categories = ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Frühstück", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli", "Snack"];
+
+	// Load favorites when component mounts and user is authenticated
+	onMount(() => {
+		if ($page.data.session?.user) {
+			favorites.load();
+		}
+	});
+
+	// Reactively add favorite status to recipes
+	$: seasonWithFavorites = addFavoriteStatusToRecipes(data.season, $favorites.favorites);
+	$: allBriefWithFavorites = addFavoriteStatusToRecipes(data.all_brief, $favorites.favorites);
 </script>
 <style>
 h1{
@@ -35,15 +49,15 @@ h1{
 <Search></Search>
 
 <MediaScroller title="In Saison">
-{#each data.season as recipe}
-	<Card {recipe} {current_month} loading_strat={"eager"} do_margin_right={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user}></Card>
+{#each seasonWithFavorites as recipe}
+	<Card {recipe} {current_month} loading_strat={"eager"} do_margin_right={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!$page.data.session?.user}></Card>
 {/each}
 </MediaScroller>
 
 {#each categories as category}
 	<MediaScroller title={category}>
-	{#each data.all_brief.filter(recipe => recipe.category == category) as recipe}
-		<Card {recipe} {current_month} do_margin_right={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user}></Card>
+	{#each allBriefWithFavorites.filter(recipe => recipe.category == category) as recipe}
+		<Card {recipe} {current_month} do_margin_right={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!$page.data.session?.user}></Card>
 	{/each}
 	</MediaScroller>
 {/each}