Extracts sanitizeForCssUrl helper that strips '"()\ before the URL
is embedded in url("..."). Prevents CSS injection via the hero image
field in inline style bindings.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Removes local TagItem, SlotRecipe, Slot, Suggestion interfaces and
imports Recipe, Slot, Suggestion from types.ts.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
transform-style:preserve-3d on a parent with box-shadow/transition
causes Chrome to fail backface-visibility:hidden. Replace with
independent per-face rotateY transforms:
front: 0deg → -180deg (flipped)
back: 180deg → 0deg (flipped)
No preserve-3d needed — each face is its own compositing layer.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
overflow:hidden on direct children of preserve-3d flattens the 3D
context in Chrome, causing backface-visibility:hidden to fail.
Move border-radius + overflow to inner wrapper divs (.card-front-inner,
.card-back-inner) and keep the face elements themselves free of those
properties. Also add -webkit-backface-visibility:hidden and
will-change:transform for consistent GPU compositing.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- backface-visibility hides elements visually but not to pointer events;
disable pointer events on the hidden face explicitly so the X button
on the back face is clickable and the front face doesn't intercept clicks
- Add .scene-selected:hover rule so green ring is not overwritten by the
higher-specificity .scene:hover box-shadow
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
'Hähnchen'.toLowerCase() → 'hähnchen' which never matched the CSS var
--gradient-protein-haehnchen. Add toCssKey() to replace ä→ae, ö→oe,
ü→ue, ß→ss so gradient fallbacks actually resolve.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add dark gradient scrim on card front so recipe name is always readable
over images and protein/cuisine gradients
- Style card-back actions as proper buttons (border, padding, border-radius)
instead of unstyled browser defaults
- Add meta chips for cookTimeMin and effort
- Scope Entfernen inside isPlanner guard alongside Gericht tauschen
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces 3-panel layout with 2-panel (sidebar + full-width grid):
- Remove persistent right panel and toolbar + Gericht hinzufügen button
- grid-cols-7 tiles use DesktopDayTile (CSS 3D card flip)
- RecipePickerDrawer slides in on tile CTA / Gericht tauschen
- Page-owned activeSlotId + drawerOpen/drawerSlotId state
- Single Escape handler: drawer > flip priority
- Extend server load to forward recipe tags from /v1/recipes API
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
CSS 3D card flip with scene/card/front/back structure. Filled slots
show gradient/image front face and action back face (Koch-Modus,
tauschen, entfernen). Empty slots delegate to EmptyDayTile.
Sibling dimming and aria-expanded via activeSlotId prop.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
