Marcel Raddatz
f0bbb3b009
Adds excludeRecipeId prop to SwapSuggestionList so the meal being replaced is not offered as a swap candidate. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
127 lines
3.7 KiB
Svelte
127 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
interface Recipe {
|
|
id: string;
|
|
name: string;
|
|
effort?: string | null;
|
|
cookTimeMin?: number | null;
|
|
}
|
|
|
|
let {
|
|
replacingName,
|
|
replacingMeta,
|
|
recipes,
|
|
currentWeekRecipeIds,
|
|
excludeRecipeId,
|
|
isLoading = false,
|
|
onpick,
|
|
oncancel
|
|
}: {
|
|
replacingName: string;
|
|
replacingMeta?: string;
|
|
recipes: Recipe[];
|
|
currentWeekRecipeIds: Set<string>;
|
|
excludeRecipeId?: string;
|
|
isLoading?: boolean;
|
|
onpick: (recipeId: string, recipeName: string) => void;
|
|
oncancel?: () => void;
|
|
} = $props();
|
|
|
|
let visibleRecipes = $derived(
|
|
excludeRecipeId ? recipes.filter((r) => r.id !== excludeRecipeId) : recipes
|
|
);
|
|
|
|
function recipeMeta(recipe: Recipe): string {
|
|
return [
|
|
recipe.cookTimeMin != null ? `${recipe.cookTimeMin} min` : null,
|
|
recipe.effort ?? null
|
|
]
|
|
.filter(Boolean)
|
|
.join(' · ');
|
|
}
|
|
</script>
|
|
|
|
<!-- Replacing banner -->
|
|
<div
|
|
style="background: var(--orange-tint); border: 1px solid #FBCDA4; border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 14px;"
|
|
>
|
|
<p
|
|
style="font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dark); margin: 0 0 4px 0; font-family: var(--font-sans);"
|
|
>
|
|
Wird ersetzt
|
|
</p>
|
|
<span
|
|
data-testid="replacing-name"
|
|
title={replacingName}
|
|
style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 14px; text-decoration: line-through; opacity: 0.6; color: var(--color-text);"
|
|
>
|
|
{replacingName}{#if replacingMeta} · {replacingMeta}{/if}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Eyebrow label -->
|
|
<p
|
|
style="font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 6px 0; font-family: var(--font-sans);"
|
|
>
|
|
Ersetzen durch (einfachste zuerst)
|
|
</p>
|
|
|
|
<!-- Recipe list -->
|
|
{#if visibleRecipes.length === 0}
|
|
<p
|
|
data-testid="swap-empty-state"
|
|
style="text-align: center; color: var(--color-text-muted); font-family: var(--font-sans); margin: 0;"
|
|
>
|
|
Keine Rezepte verfügbar.
|
|
</p>
|
|
{:else}
|
|
{#each visibleRecipes as recipe (recipe.id)}
|
|
{@const meta = recipeMeta(recipe)}
|
|
{@const alreadyPlanned = currentWeekRecipeIds.has(recipe.id)}
|
|
<div
|
|
style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px;"
|
|
>
|
|
<div style="flex: 1; min-width: 0;">
|
|
<p
|
|
style="font-family: var(--font-display); font-size: 13px; color: var(--color-text); margin: 0;"
|
|
>
|
|
{recipe.name}
|
|
</p>
|
|
{#if meta}
|
|
<p
|
|
style="font-size: 9px; color: var(--color-text-muted); font-family: var(--font-sans); margin: 1px 0 0;"
|
|
>
|
|
{meta}
|
|
</p>
|
|
{/if}
|
|
{#if alreadyPlanned}
|
|
<p
|
|
data-testid="already-planned-{recipe.id}"
|
|
style="font-size: 9px; color: var(--yellow-text); font-family: var(--font-sans); margin: 1px 0 0;"
|
|
>
|
|
⚠ Bereits diese Woche
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onclick={() => onpick(recipe.id, recipe.name)}
|
|
disabled={isLoading}
|
|
style="background: none; border: none; cursor: {isLoading ? 'default' : 'pointer'}; font-size: 11px; font-weight: 500; color: var(--green); font-family: var(--font-sans); flex-shrink: 0; opacity: {isLoading ? '0.4' : '1'};"
|
|
>
|
|
Wählen
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
|
|
<!-- Cancel button (optional) -->
|
|
{#if oncancel}
|
|
<button
|
|
type="button"
|
|
onclick={oncancel}
|
|
style="width: 100%; background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 8px 0; font-family: var(--font-sans);"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
{/if}
|