Add favorite indicators to recipe cards and improve favorites UI
All checks were successful
CI / update (push) Successful in 17s

- 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 6a64a7ddd6
commit b534cd1ddc
23 changed files with 198 additions and 123 deletions

View File

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

View File

@@ -14,7 +14,7 @@
<SeasonLayout active_index={current_month-1}>
<Recipes slot=recipes>
{#each rand_array(data.season) as recipe}
<Card {recipe} {current_month}></Card>
<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user}></Card>
{/each}
</Recipes>
</SeasonLayout>

View File

@@ -1,10 +0,0 @@
import type { PageLoad } from "./$types";
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 item_season = await res_season.json();
return {
season: item_season,
};
};

View File

@@ -0,0 +1,19 @@
import type { PageServerLoad } from "./$types";
import { getUserFavorites, addFavoriteStatusToRecipes } from "$lib/server/favorites";
export const load: PageServerLoad = async ({ fetch, locals, params }) => {
const res_season = await fetch(`/api/rezepte/items/in_season/` + params.month);
const item_season = await res_season.json();
// Get user favorites and session
const [userFavorites, session] = await Promise.all([
getUserFavorites(fetch, locals),
locals.auth()
]);
return {
month: params.month,
season: addFavoriteStatusToRecipes(item_season, userFavorites),
session
};
};

View File

@@ -12,7 +12,7 @@
<SeasonLayout active_index={data.month -1}>
<Recipes slot=recipes>
{#each rand_array(data.season) as recipe}
<Card {recipe} icon_override=true></Card>
<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user}></Card>
{/each}
</Recipes>
</SeasonLayout>

View File

@@ -1,12 +0,0 @@
import type { PageLoad } from "./$types";
export async function load({ fetch, params }) {
const res_season = await fetch(`/api/rezepte/items/in_season/` + params.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();
return {
month: params.month,
season: item_season,
};
};