Marcel Raddatz
3f9bd2b226
- border-radius: 10px → var(--radius-lg) in both tile components - opacity: 0.42 → var(--opacity-dimmed) in DesktopDayTile - var(--yellow) → var(--color-ring-today) for today ring and date circle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
74 lines
3.1 KiB
Svelte
74 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { computeReasoningTags } from './reasoningTags';
|
|
import { formatDayAbbr } from '$lib/planner/week';
|
|
import type { Suggestion, SlotMap } from '$lib/planner/types';
|
|
|
|
let {
|
|
slotDate,
|
|
slotId,
|
|
isPlanner,
|
|
slotMap,
|
|
topSuggestion,
|
|
onaddrecipe
|
|
}: {
|
|
slotDate: string;
|
|
slotId: string;
|
|
isPlanner: boolean;
|
|
slotMap: SlotMap;
|
|
topSuggestion?: Suggestion;
|
|
onaddrecipe?: () => void;
|
|
} = $props();
|
|
|
|
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 overflow-hidden"
|
|
style="border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg); 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}
|
|
<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}
|
|
<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"
|
|
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>
|
|
</div>
|
|
{/if}
|
|
</div>
|