From 0ae1767649195eea1b3edfd07c1ef194f9e32d33 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Fri, 10 Apr 2026 12:29:58 +0200
Subject: [PATCH] feat(planner): align tile design with spec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/lib/planner/DesktopDayTile.svelte     | 255 ++++++++++++++----
 .../src/lib/planner/DesktopDayTile.test.ts    |   2 +-
 frontend/src/lib/planner/EmptyDayTile.svelte  |  51 ++--
 .../src/routes/(app)/planner/+page.svelte     |  20 +-
 4 files changed, 235 insertions(+), 93 deletions(-)

diff --git a/frontend/src/lib/planner/DesktopDayTile.svelte b/frontend/src/lib/planner/DesktopDayTile.svelte
index 44d8377..0a09a86 100644
--- a/frontend/src/lib/planner/DesktopDayTile.svelte
+++ b/frontend/src/lib/planner/DesktopDayTile.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import EmptyDayTile from './EmptyDayTile.svelte';
+	import { formatDayAbbr } from '$lib/planner/week';
 
 	interface TagItem {
 		id?: string;
@@ -57,10 +58,23 @@
 	} = $props();
 
 	const slotId = $derived(slot.id ?? '');
-
 	const isFlipped = $derived(activeSlotId === slot.id && !!slot.recipe);
 	const isDimmed = $derived(activeSlotId !== null && activeSlotId !== slot.id && !!slot.recipe);
 
+	const dayAbbr = $derived(slot.slotDate ? formatDayAbbr(slot.slotDate, 'short') : '');
+	const dateNum = $derived(slot.slotDate ? slot.slotDate.slice(-2).replace(/^0/, '') : '');
+
+	const visibleTags = $derived(
+		(slot.recipe?.tags ?? []).filter((t) => t.tagType === 'protein' || t.tagType === 'cuisine')
+	);
+
+	const metaLine = $derived((() => {
+		const parts: string[] = [];
+		if (slot.recipe?.cookTimeMin) parts.push(`${slot.recipe.cookTimeMin} Min`);
+		if (slot.recipe?.effort) parts.push(slot.recipe.effort);
+		return parts.join(' · ');
+	})());
+
 	function handleFlip() {
 		onflip?.(slotId);
 	}
@@ -103,21 +117,49 @@
 		data-flipped={isFlipped}
 		data-dimmed={isDimmed}
 		class="scene"
+		class:scene-today={isToday && !isFlipped}
+		class:scene-selected={isFlipped}
+		class:scene-dimmed={isDimmed}
 		onclick={handleFlip}
 		onkeydown={handleKeydown}
 	>
 		<div class="card" class:flipped={isFlipped}>
+
+			<!-- FRONT -->
 			<div
 				class="card-front"
 				style="background: {gradientBackground}; background-size: cover; background-position: center;"
 			>
-				<div class="card-front-scrim">
-					<p style="font-family: var(--font-display); font-size: 15px; margin: 0; color: #fff;">
-						{slot.recipe.name}
-					</p>
+				<!-- Full-tile dual gradient overlay -->
+				<div class="tile-overlay"></div>
+
+				<!-- Day header -->
+				<div class="tile-head">
+					<span class="tile-day-abbr">{dayAbbr}</span>
+					<span class="tile-day-num" class:dn-today={isToday} class:dn-selected={isFlipped}>
+						{dateNum}
+					</span>
+				</div>
+
+				<!-- Recipe info at bottom -->
+				<div class="tile-info">
+					<p class="tile-name">{slot.recipe.name}</p>
+					{#if metaLine}
+						<p class="tile-meta">{metaLine}</p>
+					{/if}
+					{#if visibleTags.length > 0}
+						<div class="tile-tags">
+							{#each visibleTags as tag (tag.id)}
+								<span class="tile-tag" class:tag-today={isToday} class:tag-selected={isFlipped}>
+									{tag.name}
+								</span>
+							{/each}
+						</div>
+					{/if}
 				</div>
 			</div>
 
+			<!-- BACK -->
 			<div class="card-back" aria-hidden={!isFlipped}>
 				<button
 					type="button"
@@ -128,24 +170,16 @@
 					×
 				</button>
 
-				{#if slot.recipe.cookTimeMin || slot.recipe.effort}
-					<div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;">
-						{#if slot.recipe.cookTimeMin}
-							<span class="meta-chip">{slot.recipe.cookTimeMin} min</span>
-						{/if}
-						{#if slot.recipe.effort}
-							<span class="meta-chip">{slot.recipe.effort}</span>
-						{/if}
-					</div>
+				<p class="back-name">{slot.recipe.name}</p>
+				{#if metaLine}
+					<p class="back-meta">{metaLine}</p>
 				{/if}
 
-				<div style="display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;">
-					<a class="btn-action" href="/recipes/{slot.recipe.id}/cook" onclick={(e) => e.stopPropagation()}>Koch-Modus</a>
+				<div class="back-actions">
+					<a class="btn-action btn-primary" href="/recipes/{slot.recipe.id}/cook" onclick={(e) => e.stopPropagation()}>Koch-Modus</a>
 					<a class="btn-action" href="/recipes/{slot.recipe.id}" onclick={(e) => e.stopPropagation()}>Rezept ansehen</a>
-				</div>
 
-				{#if isPlanner}
-					<div style="display: flex; flex-direction: column; gap: 4px;">
+					{#if isPlanner}
 						<button
 							type="button"
 							class="btn-action"
@@ -163,9 +197,10 @@
 								Entfernen
 							</button>
 						{/if}
-					</div>
-				{/if}
+					{/if}
+				</div>
 			</div>
+
 		</div>
 	</div>
 {:else}
@@ -180,12 +215,34 @@
 {/if}
 
 <style>
+	/* ── Scene (outermost positioned element) ── */
 	.scene {
 		perspective: 900px;
 		height: 100%;
 		width: 100%;
 		cursor: pointer;
+		border-radius: 10px;
+		box-shadow: 0 1px 3px rgba(28,28,24,.06), 0 1px 2px rgba(28,28,24,.04);
+		transition: box-shadow .15s, opacity .15s;
 	}
+	.scene:hover {
+		box-shadow: 0 6px 18px rgba(28,28,24,.14), 0 2px 6px rgba(28,28,24,.08);
+	}
+	.scene-today {
+		box-shadow: 0 0 0 2px var(--yellow), 0 1px 3px rgba(28,28,24,.06);
+	}
+	.scene-today:hover {
+		box-shadow: 0 0 0 2px var(--yellow), 0 6px 18px rgba(28,28,24,.14);
+	}
+	.scene-selected {
+		box-shadow: 0 0 0 2px var(--green-dark), 0 6px 18px rgba(28,28,24,.14);
+	}
+	.scene-dimmed {
+		opacity: 0.42;
+		pointer-events: none;
+	}
+
+	/* ── Card flip ── */
 	.card {
 		position: relative;
 		width: 100%;
@@ -205,21 +262,101 @@
 		border-radius: 10px;
 		overflow: hidden;
 	}
+
+	/* ── Front face ── */
+	.tile-overlay {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(
+			to bottom,
+			rgba(0,0,0,.32) 0%,
+			rgba(0,0,0,0)   30%,
+			rgba(0,0,0,0)   45%,
+			rgba(0,0,0,.55) 100%
+		);
+		border-radius: inherit;
+	}
+	.tile-head {
+		position: absolute;
+		top: 0; left: 0; right: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 7px 8px;
+		z-index: 2;
+	}
+	.tile-day-abbr {
+		font-size: 9px;
+		text-transform: uppercase;
+		letter-spacing: .06em;
+		color: rgba(255,255,255,.85);
+		font-weight: 500;
+	}
+	.tile-day-num {
+		width: 20px; height: 20px;
+		border-radius: 9999px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 10px;
+		font-weight: 500;
+		color: rgba(255,255,255,.9);
+		background: rgba(255,255,255,.22);
+	}
+	.dn-today {
+		background: var(--yellow) !important;
+		color: #fff !important;
+	}
+	.dn-selected {
+		background: var(--green-dark) !important;
+		color: #fff !important;
+	}
+	.tile-info {
+		position: absolute;
+		bottom: 0; left: 0; right: 0;
+		padding: 8px 9px 9px;
+		z-index: 2;
+	}
+	.tile-name {
+		font-size: 13px;
+		font-weight: 300;
+		color: #fff;
+		line-height: 1.3;
+		margin: 0;
+		text-shadow: 0 1px 3px rgba(0,0,0,.4);
+	}
+	.tile-meta {
+		font-size: 10px;
+		color: rgba(255,255,255,.75);
+		margin: 2px 0 0;
+	}
+	.tile-tags {
+		display: flex;
+		gap: 3px;
+		flex-wrap: wrap;
+		margin-top: 5px;
+	}
+	.tile-tag {
+		font-size: 8px;
+		font-weight: 500;
+		padding: 2px 5px;
+		border-radius: 2px;
+		background: rgba(255,255,255,.2);
+		color: rgba(255,255,255,.92);
+		backdrop-filter: blur(2px);
+	}
+	.tag-today { background: rgba(242,193,46,.35); }
+	.tag-selected { background: rgba(46,110,57,.45); }
+
+	/* ── Back face ── */
 	.card-back {
 		transform: rotateY(180deg);
 		background: var(--color-page);
 		border: 1px solid var(--color-border);
 		padding: 10px;
 		overflow-y: auto;
-	}
-	.card-front-scrim {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 20px 8px 8px;
-		background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
-		border-radius: 0 0 10px 10px;
+		display: flex;
+		flex-direction: column;
 	}
 	.btn-close {
 		background: none;
@@ -229,47 +366,61 @@
 		line-height: 1;
 		color: var(--color-text-muted);
 		padding: 2px 6px;
-		float: right;
-		margin: -4px -4px 4px 4px;
+		align-self: flex-end;
+		margin: -4px -4px 2px 0;
 	}
-	.btn-close:hover {
+	.btn-close:hover { color: var(--color-text); }
+	.back-name {
+		font-family: var(--font-display);
+		font-size: 13px;
+		font-weight: 300;
+		margin: 0 0 2px;
+		line-height: 1.3;
 		color: var(--color-text);
 	}
-	.meta-chip {
-		font-size: 11px;
-		padding: 2px 7px;
-		border-radius: 99px;
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
+	.back-meta {
+		font-size: 10px;
 		color: var(--color-text-muted);
+		margin: 0 0 10px;
+	}
+	.back-actions {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		margin-top: auto;
 	}
 	.btn-action {
 		display: block;
 		width: 100%;
-		padding: 6px 10px;
+		padding: 7px;
 		border-radius: 6px;
 		border: 1px solid var(--color-border);
-		background: var(--color-surface);
+		background: #fff;
 		color: var(--color-text);
-		font-size: 12px;
+		font-size: 11px;
+		font-weight: 500;
+		letter-spacing: .04em;
 		text-align: center;
 		text-decoration: none;
 		cursor: pointer;
 		box-sizing: border-box;
 	}
-	.btn-action:hover {
-		background: var(--color-border);
+	.btn-action:hover { background: var(--color-surface); }
+	.btn-primary {
+		background: var(--green-dark);
+		color: #fff;
+		border: none;
 	}
+	.btn-primary:hover { background: var(--green-dark); filter: brightness(1.1); }
 	.btn-danger {
-		color: var(--color-destructive, #dc2626);
-		border-color: var(--color-destructive, #dc2626);
-	}
-	.btn-danger:hover {
-		background: color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent);
+		color: #dc4c3e;
+		border-color: #dc4c3e;
+		background: transparent;
 	}
+	.btn-danger:hover { background: rgba(220,76,62,.08); }
+
 	@media (prefers-reduced-motion: reduce) {
-		.card {
-			transition: none;
-		}
+		.card { transition: none; }
+		.scene { transition: none; }
 	}
 </style>
diff --git a/frontend/src/lib/planner/DesktopDayTile.test.ts b/frontend/src/lib/planner/DesktopDayTile.test.ts
index 1f1c151..ecd549a 100644
--- a/frontend/src/lib/planner/DesktopDayTile.test.ts
+++ b/frontend/src/lib/planner/DesktopDayTile.test.ts
@@ -22,7 +22,7 @@ describe('DesktopDayTile — filled slot', () => {
 	describe('front face', () => {
 		it('renders recipe name on front face', () => {
 			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } });
-			expect(screen.getByText('Pasta Bolognese')).toBeTruthy();
+			expect(screen.getAllByText('Pasta Bolognese').length).toBeGreaterThanOrEqual(1);
 		});
 
 		it('has data-testid="day-meal-card" on the scene element', () => {
diff --git a/frontend/src/lib/planner/EmptyDayTile.svelte b/frontend/src/lib/planner/EmptyDayTile.svelte
index fed8d2f..bf9fc67 100644
--- a/frontend/src/lib/planner/EmptyDayTile.svelte
+++ b/frontend/src/lib/planner/EmptyDayTile.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { computeReasoningTags } from './reasoningTags';
+	import { formatDayAbbr } from '$lib/planner/week';
 
 	interface TagItem {
 		id?: string;
@@ -46,44 +47,52 @@
 	let reasoningTags = $derived(
 		topSuggestion ? computeReasoningTags(slotMap, topSuggestion.recipe) : []
 	);
+
+	const dayAbbr = $derived(slotDate ? formatDayAbbr(slotDate, 'short') : '');
+	const dateNum = $derived(slotDate ? slotDate.slice(-2).replace(/^0/, '') : '');
 </script>
 
 <div
 	data-testid="empty-day-tile"
 	role="group"
-	class="h-full flex flex-col gap-2 p-3"
-	style="border: 1px dashed var(--color-border);"
+	class="h-full flex flex-col overflow-hidden"
+	style="border: 1.5px dashed var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: 0 1px 3px rgba(28,28,24,.06);"
 >
+	<!-- Day header -->
+	<div style="display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 0; flex-shrink: 0;">
+		<span style="font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 500;">{dayAbbr}</span>
+		<span style="font-size: 10px; font-weight: 500; color: var(--color-text-muted);">{dateNum}</span>
+	</div>
+
+	<!-- CTA -->
 	{#if isPlanner}
-		<button
-			type="button"
-			aria-label="Gericht wählen"
-			onclick={() => onaddrecipe?.()}
-			class="self-start font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition-colors"
-		>
-			+ Gericht wählen
-		</button>
+		<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 6px 6px; gap: 2px; flex-shrink: 0; border-bottom: 1px solid var(--color-border);">
+			<button
+				type="button"
+				aria-label="Gericht wählen"
+				onclick={() => onaddrecipe?.()}
+				style="background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;"
+			>
+				<span style="font-size: 18px; color: var(--color-border); line-height: 1;">+</span>
+				<span style="font-size: 9px; color: var(--color-text-muted); font-family: var(--font-sans);">Gericht wählen</span>
+			</button>
+		</div>
 	{/if}
 
 	{#if topSuggestion}
-		<p class="font-[var(--font-display)] text-[12px] text-[var(--color-text-muted)] leading-snug">
-			{topSuggestion.recipe.name}
-		</p>
-
-		{#if reasoningTags.length > 0}
-			<div class="flex flex-wrap gap-1">
+		<div style="display: flex; flex-direction: column; padding: 5px 7px 6px; flex: 1; overflow: hidden;">
+			<div style="font-size: 8px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); padding: 3px 0 5px; border-bottom: 1px solid var(--color-subtle, var(--color-border)); margin-bottom: 2px;">Vorschlag</div>
+			<div style="display: flex; align-items: center; gap: 4px; padding: 5px 0;">
+				<span style="font-family: var(--font-display); font-size: 11px; font-weight: 300; color: var(--color-text); flex: 1; line-height: 1.2;">{topSuggestion.recipe.name}</span>
 				{#each reasoningTags as tag (tag.id)}
 					<span
 						data-testid="reasoning-tag"
-						class="inline-block rounded px-1.5 py-0.5 font-[var(--font-sans)] text-[11px] font-medium"
-						style={tag.color === 'green'
-							? 'background: var(--green-tint); color: var(--green-dark);'
-							: 'background: var(--yellow-tint); color: var(--yellow-text);'}
+						style="font-size: 8px; font-weight: 500; padding: 1px 4px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; {tag.color === 'green' ? 'background: var(--green-tint); color: var(--green-dark);' : 'background: var(--yellow-tint); color: var(--yellow-text);'}"
 					>
 						{tag.label}
 					</span>
 				{/each}
 			</div>
-		{/if}
+		</div>
 	{/if}
 </div>
diff --git a/frontend/src/routes/(app)/planner/+page.svelte b/frontend/src/routes/(app)/planner/+page.svelte
index a75bd86..7ed61cd 100644
--- a/frontend/src/routes/(app)/planner/+page.svelte
+++ b/frontend/src/routes/(app)/planner/+page.svelte
@@ -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>