feat(planner): align tile design with spec

Front face:
- Full dual gradient overlay (dark top 32% → transparent → dark bottom 55%)
- Day abbreviation + date number pill at top of each tile
- Recipe name 13px/weight-300 with text-shadow
- Meta line (cookTimeMin · effort) below name
- Glassmorphism tag pills (protein + cuisine only)
- State rings via box-shadow (yellow for today, green for selected)
- Dimming (opacity 0.42) on non-selected filled tiles

Back face:
- Koch-Modus as green primary button
- Entfernen as red outline (transparent bg)
- All buttons 11px / weight 500

EmptyDayTile: add day header + spec-aligned suggestion list layout
Page: remove external column header (now rendered inside each tile)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-10 12:29:58 +02:00
parent d54ac6a37a
commit 0ae1767649
4 changed files with 235 additions and 93 deletions

View File

@@ -477,26 +477,9 @@
{#each days as day (day)}
{@const slot = slotMap[day] ?? { id: null, slotDate: day, recipe: null }}
{@const isTodayDay = day === today}
{@const dateNum = day.slice(-2).replace(/^0/, '')}
{@const dayAbbr = formatDayAbbr(day, 'narrow')}
{@const isThisTileActive = drawerSlotId === day}
<div class="flex h-full flex-col">
<!-- Column header -->
<div class="mb-2 flex flex-col items-center gap-1">
<p class="font-[var(--font-sans)] text-[9px] uppercase tracking-wide text-[var(--color-text-muted)]">
{dayAbbr}
</p>
<div
class="flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-medium
{isTodayDay ? 'bg-[var(--yellow)] text-white' : 'bg-transparent text-[var(--color-text)]'}"
>
{dateNum}
</div>
</div>
<!-- Flip tile -->
<div class="min-h-0 flex-1">
<div class="h-full">
<DesktopDayTile
{slot}
isToday={isTodayDay}
@@ -511,7 +494,6 @@
onremove={() => handleTileRemove(slot)}
onaddrecipe={() => handleEmptyTileAdd(day)}
/>
</div>
</div>
{/each}
</div>