Add favorite indicators to recipe cards and improve favorites UI

- Add heart emoji indicators to recipe cards (top-left positioning)
- Show favorites across all recipe list pages (season, category, icon, tag)
- Create favorites utility functions for server-side data merging
- Convert client-side load files to server-side for session access
- Redesign favorite button with emoji hearts (🖤/❤️) and bottom-right positioning
- Fix randomizer array mutation issue causing card display glitches
- Implement consistent favorite indicators with drop shadows for visibility

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-09-01 20:45:28 +02:00
parent 4350528c85
commit 82c71ad136
23 changed files with 198 additions and 123 deletions

View File

@@ -0,0 +1,48 @@
/**
* Utility functions for handling user favorites on the server side
*/
export async function getUserFavorites(fetch: any, locals: any): Promise<string[]> {
const session = await locals.auth();
if (!session?.user?.nickname) {
return [];
}
try {
const favRes = await fetch('/api/rezepte/favorites');
if (favRes.ok) {
const favData = await favRes.json();
return favData.favorites || [];
}
} catch (e) {
// Silently fail if favorites can't be loaded
console.error('Error loading user favorites:', e);
}
return [];
}
export function addFavoriteStatusToRecipes(recipes: any[], userFavorites: string[]): any[] {
return recipes.map(recipe => ({
...recipe,
isFavorite: userFavorites.some(favId => favId.toString() === recipe._id.toString())
}));
}
export async function loadRecipesWithFavorites(
fetch: any,
locals: any,
recipeLoader: () => Promise<any>
): Promise<{ recipes: any[], session: any }> {
const [recipes, userFavorites, session] = await Promise.all([
recipeLoader(),
getUserFavorites(fetch, locals),
locals.auth()
]);
return {
recipes: addFavoriteStatusToRecipes(recipes, userFavorites),
session
};
}