Marcel Raddatz
be43fe94b6
- ChecklistItem: use:enhance with reset:false, role=checkbox, aria-checked, focus ring - RecipeReferencePanel: day abbreviation text-[12px] (was 11px) - ShoppingHeader: generating pending state disables button during submit - AddCustomItem: only collapse form on successful submission Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
63 lines
1.8 KiB
Svelte
63 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { formatDayAbbr } from '$lib/planner/week';
|
|
|
|
interface Slot {
|
|
slotDate?: string;
|
|
recipe?: {
|
|
id?: string;
|
|
name?: string;
|
|
};
|
|
}
|
|
|
|
interface Props {
|
|
slots: Slot[];
|
|
filteredStaplesCount: number;
|
|
}
|
|
|
|
let { slots, filteredStaplesCount }: Props = $props();
|
|
|
|
let filledSlots = $derived(slots.filter((s) => s.recipe));
|
|
</script>
|
|
|
|
<aside class="flex flex-col gap-4">
|
|
<div>
|
|
<h2 class="font-[var(--font-sans)] text-[12px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
|
|
Rezepte dieser Woche
|
|
</h2>
|
|
<div class="mt-2 space-y-1.5">
|
|
{#each filledSlots as slot}
|
|
<a
|
|
href="/recipes/{slot.recipe?.id}"
|
|
class="flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-3 py-2 hover:border-[var(--green-light)]"
|
|
>
|
|
<span class="min-w-[28px] font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">
|
|
{slot.slotDate ? formatDayAbbr(slot.slotDate, 'short') : ''}
|
|
</span>
|
|
<span class="flex-1 truncate font-[var(--font-sans)] text-[13px] font-medium text-[var(--color-text)]">
|
|
{slot.recipe?.name}
|
|
</span>
|
|
</a>
|
|
{/each}
|
|
{#if filledSlots.length === 0}
|
|
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">
|
|
Keine Gerichte geplant.
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if filteredStaplesCount > 0}
|
|
<div class="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-3 py-2">
|
|
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">
|
|
{filteredStaplesCount} Grundzutaten automatisch ausgeblendet
|
|
</p>
|
|
<a
|
|
href="/pantry"
|
|
class="font-[var(--font-sans)] text-[12px] font-medium text-[var(--green-dark)] hover:underline"
|
|
>
|
|
Vorrat bearbeiten
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</aside>
|