231 lines
13 KiB
TypeScript
231 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { AlertTriangle, ArrowLeftRight, Plus, X } from "lucide-react";
|
|
import { useState, type Dispatch } from "react";
|
|
import { APPLIANCES, DAY_NAMES, activeSlots, describeBlockers, isCookable, mealLabel, recipeBlockers, slotKey } from "@/app/lib/plan";
|
|
import { RECIPES_BY_ID } from "@/app/lib/recipes";
|
|
import { formatUsd } from "@/app/lib/units";
|
|
import type { PlanAction } from "@/app/lib/usePlanState";
|
|
import type { MealPlanState } from "@/app/types";
|
|
import { ApplianceIcon } from "./Icons";
|
|
|
|
interface MealGridProps {
|
|
state: MealPlanState;
|
|
dispatch: Dispatch<PlanAction>;
|
|
mealCosts: Map<string, number>;
|
|
onOpenSlot: (key: string) => void;
|
|
onViewSlot: (key: string) => void;
|
|
onRemoveSlot: (key: string, recipeTitle: string) => void;
|
|
}
|
|
|
|
const applianceLabel = (id: string) => APPLIANCES.find((a) => a.id === id)?.label ?? id;
|
|
|
|
export function MealGrid({ state, dispatch, mealCosts, onOpenSlot, onViewSlot, onRemoveSlot }: MealGridProps) {
|
|
const [dragFrom, setDragFrom] = useState<string | null>(null);
|
|
const [dragOver, setDragOver] = useState<string | null>(null);
|
|
/** Mobile & keyboard slot-swap picker: holds the origin slot key currently choosing a destination. */
|
|
const [moveSourceKey, setMoveSourceKey] = useState<string | null>(null);
|
|
|
|
const allSlots = activeSlots(state);
|
|
const days = Array.from({ length: state.daysCount }, (_, day) => allSlots.filter((s) => s.dayIndex === day));
|
|
|
|
return (
|
|
<section aria-labelledby="grid-heading">
|
|
<div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
|
|
<h2 id="grid-heading" className="font-serif text-xl font-semibold tracking-tight">
|
|
Weekly menu
|
|
</h2>
|
|
<p className="text-xs text-ink-faint">
|
|
<span className="hidden md:inline">Drag meals or use the swap icon to rearrange · </span>
|
|
Tap any planned dish for its scaled recipe
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 2xl:grid-cols-3">
|
|
{days.map((slots, day) => {
|
|
const dayCost = slots.reduce((sum, s) => sum + (s.recipeId ? (mealCosts.get(s.recipeId) ?? 0) : 0), 0);
|
|
const hasAnyMeal = slots.some((s) => s.recipeId !== null);
|
|
|
|
return (
|
|
<article key={day} className="flex flex-col overflow-hidden rounded-xl border border-line bg-surface">
|
|
{/* Architectural day header */}
|
|
<div className="flex items-baseline justify-between border-b border-line bg-raised/65 px-4 py-2.5">
|
|
<h3 className="font-serif text-base font-semibold tracking-tight text-ink">{DAY_NAMES[day]}</h3>
|
|
{hasAnyMeal && (
|
|
<span className="font-mono text-xs text-ink-muted tabular-nums">{formatUsd(dayCost)} eaten</span>
|
|
)}
|
|
</div>
|
|
|
|
<ul className="flex-1 divide-y divide-line">
|
|
{slots.map((slot) => {
|
|
const key = slotKey(slot.dayIndex, slot.mealNumber);
|
|
const recipe = slot.recipeId ? RECIPES_BY_ID.get(slot.recipeId) : undefined;
|
|
const blocked = recipe ? !isCookable(recipe, state) : false;
|
|
const label = mealLabel(slot.mealNumber);
|
|
const isDropTarget = dragOver === key && dragFrom !== key;
|
|
const isMovingThis = moveSourceKey === key;
|
|
|
|
return (
|
|
<li
|
|
key={key}
|
|
onDragOver={(e) => {
|
|
if (!dragFrom) return;
|
|
e.preventDefault();
|
|
setDragOver(key);
|
|
}}
|
|
onDragLeave={() => setDragOver((current) => (current === key ? null : current))}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
if (dragFrom && dragFrom !== key) dispatch({ type: "swapSlots", from: dragFrom, to: key });
|
|
setDragFrom(null);
|
|
setDragOver(null);
|
|
}}
|
|
className={`transition-colors ${isDropTarget ? "bg-brand-950 ring-2 ring-inset ring-brand-600" : ""}`}
|
|
>
|
|
{recipe ? (
|
|
<div
|
|
draggable
|
|
onDragStart={() => setDragFrom(key)}
|
|
onDragEnd={() => {
|
|
setDragFrom(null);
|
|
setDragOver(null);
|
|
}}
|
|
className={`p-3.5 transition-colors ${
|
|
blocked ? "bg-status-warn-bg/65" : "hover:bg-raised/45"
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => onViewSlot(key)}
|
|
className="min-w-0 flex-1 text-left"
|
|
aria-label={`View recipe for ${DAY_NAMES[day]} ${label}: ${recipe.title}`}
|
|
>
|
|
<span className="block font-mono text-[11px] font-medium tracking-wider text-ink-faint uppercase">
|
|
{label}
|
|
</span>
|
|
<span className="mt-0.5 block leading-snug font-semibold text-ink hover:text-brand-300">
|
|
{recipe.title}
|
|
</span>
|
|
|
|
<span className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-ink-muted">
|
|
<span>{recipe.prepTime} min</span>
|
|
<span aria-hidden>·</span>
|
|
<span className="font-mono tabular-nums">{formatUsd(mealCosts.get(recipe.id) ?? 0)}/meal</span>
|
|
{recipe.requiredAppliances.length > 0 && (
|
|
<>
|
|
<span aria-hidden>·</span>
|
|
<span
|
|
className="inline-flex items-center gap-1 text-ink-faint"
|
|
title={`Requires: ${recipe.requiredAppliances.map(applianceLabel).join(", ")}`}
|
|
>
|
|
{recipe.requiredAppliances.map((a) => (
|
|
<ApplianceIcon key={a} id={a} className="size-3.5" />
|
|
))}
|
|
<span className="sr-only">
|
|
Requires {recipe.requiredAppliances.map(applianceLabel).join(", ")}
|
|
</span>
|
|
</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
|
|
{blocked && (
|
|
<span className="mt-1.5 inline-flex items-center gap-1 text-xs font-medium text-status-warn">
|
|
<AlertTriangle className="size-3.5 shrink-0" aria-hidden />
|
|
{describeBlockers(recipeBlockers(recipe, state))}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{/* Non-overlapping 36x36px touch & keyboard action controls */}
|
|
<div className="flex shrink-0 items-center gap-0.5">
|
|
{allSlots.length > 1 && (
|
|
<button
|
|
type="button"
|
|
aria-expanded={isMovingThis}
|
|
onClick={() => setMoveSourceKey(isMovingThis ? null : key)}
|
|
aria-label={`Move or swap ${recipe.title}`}
|
|
title="Move or swap slot"
|
|
className={`grid size-9 place-items-center rounded-lg transition-colors ${
|
|
isMovingThis ? "bg-selected text-ink" : "text-ink-faint hover:bg-raised hover:text-ink"
|
|
}`}
|
|
>
|
|
<ArrowLeftRight className="size-4" strokeWidth={1.75} aria-hidden />
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (isMovingThis) setMoveSourceKey(null);
|
|
onRemoveSlot(key, recipe.title);
|
|
}}
|
|
aria-label={`Remove ${recipe.title} from ${DAY_NAMES[day]} ${label}`}
|
|
title="Remove meal"
|
|
className="grid size-9 place-items-center rounded-lg text-ink-faint transition-colors hover:bg-status-danger-bg hover:text-status-danger"
|
|
>
|
|
<X className="size-4" strokeWidth={1.75} aria-hidden />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Touch & keyboard accessible Swap/Move picker */}
|
|
{isMovingThis && (
|
|
<div className="mt-3 rounded-lg border border-line-strong bg-raised p-2.5">
|
|
<p className="text-xs font-medium text-ink-muted">Swap or move to another slot:</p>
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
{allSlots
|
|
.filter((target) => slotKey(target.dayIndex, target.mealNumber) !== key)
|
|
.map((target) => {
|
|
const targetKey = slotKey(target.dayIndex, target.mealNumber);
|
|
const occupant = target.recipeId ? RECIPES_BY_ID.get(target.recipeId)?.title : null;
|
|
return (
|
|
<button
|
|
key={targetKey}
|
|
type="button"
|
|
onClick={() => {
|
|
dispatch({ type: "swapSlots", from: key, to: targetKey });
|
|
setMoveSourceKey(null);
|
|
}}
|
|
className="trim-cap min-h-8 rounded-md border border-line-strong bg-surface px-2.5 py-1 text-xs font-medium text-ink transition-colors hover:border-brand-600 hover:bg-brand-950"
|
|
title={occupant ? `Swap with ${occupant}` : "Move to empty slot"}
|
|
>
|
|
{DAY_NAMES[target.dayIndex]} {mealLabel(target.mealNumber)}
|
|
{occupant ? " ⇄" : ""}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => onOpenSlot(key)}
|
|
className="group flex min-h-16 w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-raised/65"
|
|
>
|
|
<span>
|
|
<span className="block font-mono text-[11px] font-medium tracking-wider text-ink-faint uppercase">
|
|
{label}
|
|
</span>
|
|
<span className="mt-0.5 block text-sm font-medium text-ink-muted group-hover:text-ink">
|
|
Choose a meal
|
|
</span>
|
|
</span>
|
|
<span className="grid size-8 place-items-center rounded-lg border border-dashed border-line-strong text-ink-muted transition-colors group-hover:border-brand-600 group-hover:bg-brand-950 group-hover:text-brand-300">
|
|
<Plus className="size-4" strokeWidth={2} aria-hidden />
|
|
</span>
|
|
</button>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|