@ssejal8/recipe-ui-kit 0.1.0

package/apps/recipe-web/src/routes/planner/+page.svelte

@@ -0,0 +1,422 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import ConfirmDialog from '$components/ConfirmDialog.svelte';
+  import RecipePickerDialog from '$components/RecipePickerDialog.svelte';
+  import type { RecipeSummary } from '$domain/recipe';
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+  import {
+    currentWeekKey,
+    dateForDay,
+    DAYS,
+    formatWeekRange,
+    MEALS,
+    planner,
+    shiftWeekKey,
+    type DayKey,
+    type MealKey
+  } from '$stores/planner.svelte';
+  import { toasts } from '$stores/toast.svelte';
+
+  const weekKey = $derived(planner.selectedWeek);
+  const isCurrentWeek = $derived(weekKey === currentWeekKey());
+  const plannedCount = $derived(planner.countFor(weekKey));
+  const weekRecipes = $derived(planner.recipesFor(weekKey));
+  const totalSlots = DAYS.length * MEALS.length;
+
+  const previousWeekKey = $derived(shiftWeekKey(weekKey, -1));
+  const previousWeekCount = $derived(planner.countFor(previousWeekKey));
+
+  const today = $derived(new Date().toDateString());
+
+  /* ---------------------------------------------------------- picker dialog */
+
+  let pickerOpen = $state(false);
+  let target = $state<{ day: DayKey; mealType: MealKey } | null>(null);
+
+  const targetLabel = $derived.by(() => {
+    if (!target) return '';
+    const day = DAYS.find((entry) => entry.key === target!.day)?.label ?? target.day;
+    const meal = MEALS.find((entry) => entry.key === target!.mealType)?.label ?? target.mealType;
+    return `${day} · ${meal} · week of ${formatWeekRange(weekKey)}`;
+  });
+
+  function openPicker(day: DayKey, mealType: MealKey) {
+    target = { day, mealType };
+    pickerOpen = true;
+  }
+
+  function handlePick(recipe: RecipeSummary) {
+    if (!target) return;
+    planner.assign(target.day, target.mealType, recipe, weekKey);
+
+    const dayLabel = DAYS.find((entry) => entry.key === target!.day)?.label ?? target.day;
+    const mealLabel = MEALS.find((entry) => entry.key === target!.mealType)?.label ?? target.mealType;
+    toasts.success(`${recipe.name} → ${dayLabel} ${mealLabel.toLowerCase()}.`);
+
+    pickerOpen = false;
+    target = null;
+  }
+
+  /* ------------------------------------------------------ slot interactions */
+
+  /**
+   * The component's payload identifies the slot by its display label, so the
+   * canonical `DayKey` / `MealKey` are closed over from the grid loop instead.
+   */
+  function removeMeal(day: DayKey, mealType: MealKey) {
+    const removed = planner.meal(day, mealType, weekKey);
+    if (!removed) return;
+
+    planner.remove(day, mealType, weekKey);
+    toasts.push(`Removed ${removed.name} from the plan.`, {
+      tone: 'info',
+      action: {
+        label: 'Undo',
+        run: () => planner.assign(day, mealType, { ...removed, id: removed.recipeId }, weekKey)
+      }
+    });
+  }
+
+  /**
+   * Drag payloads are `day:mealType` strings, so a drop can identify the source
+   * slot and move the meal rather than copying it.
+   */
+  function dropOnto(day: DayKey, mealType: MealKey, payload: string) {
+    const [fromDay, fromMeal] = payload.split(':');
+    if (!fromDay || !fromMeal) return;
+
+    planner.move({ day: fromDay as DayKey, mealType: fromMeal as MealKey }, { day, mealType }, weekKey);
+  }
+
+  function handleDragStart(event: DragEvent, day: DayKey, mealType: MealKey) {
+    event.dataTransfer?.setData('text/plain', `${day}:${mealType}`);
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+  }
+
+  /* ------------------------------------------------------------ week actions */
+
+  let confirmClear = $state(false);
+
+  function clearWeek() {
+    const count = plannedCount;
+    planner.clearWeek(weekKey);
+    confirmClear = false;
+    toasts.push(`Cleared ${count} planned ${count === 1 ? 'meal' : 'meals'}.`, { tone: 'info' });
+  }
+
+  function repeatLastWeek() {
+    planner.copyWeek(previousWeekKey, weekKey);
+    toasts.success(`Copied ${previousWeekCount} ${previousWeekCount === 1 ? 'meal' : 'meals'} from last week.`);
+  }
+
+  /** Aggregated ingredient-free shopping overview: recipes and their slot count. */
+  let showSummary = $state(true);
+</script>
+
+<svelte:head>
+  <title>Weekly planner — Mise</title>
+</svelte:head>
+
+<div class="page-head">
+  <div>
+    <p class="eyebrow">Meal planner</p>
+    <h1 class="page-title">Week of {formatWeekRange(weekKey)}</h1>
+    <p class="page-lede">
+      {plannedCount} of {totalSlots} slots planned.
+      {#if plannedCount > 0}
+        Drag a meal to another slot to move it.
+      {:else}
+        Pick a slot below to start building the week.
+      {/if}
+    </p>
+  </div>
+
+  <div class="week-nav">
+    <button class="btn btn-sm" type="button" onclick={() => (planner.selectedWeek = shiftWeekKey(weekKey, -1))} aria-label="Previous week">
+      ← Prev
+    </button>
+    <button class="btn btn-sm" type="button" onclick={() => (planner.selectedWeek = currentWeekKey())} disabled={isCurrentWeek}>
+      This week
+    </button>
+    <button class="btn btn-sm" type="button" onclick={() => (planner.selectedWeek = shiftWeekKey(weekKey, 1))} aria-label="Next week">
+      Next →
+    </button>
+  </div>
+</div>
+
+<div class="toolbar">
+  {#if previousWeekCount > 0 && plannedCount === 0}
+    <button class="btn btn-accent btn-sm" type="button" onclick={repeatLastWeek}>
+      Repeat last week ({previousWeekCount} {previousWeekCount === 1 ? 'meal' : 'meals'})
+    </button>
+  {/if}
+
+  {#if plannedCount > 0}
+    <button class="btn btn-danger btn-sm" type="button" onclick={() => (confirmClear = true)}>Clear this week</button>
+  {/if}
+
+  <a class="btn btn-ghost btn-sm" href="/favorites">Browse favorites</a>
+</div>
+
+<div class="planner-scroll">
+  <div class="planner-grid" style={`--day-count: ${DAYS.length}`}>
+    <!-- Header row: one column per day. -->
+    <div aria-hidden="true"></div>
+    {#each DAYS as day (day.key)}
+      {@const date = dateForDay(weekKey, day.key)}
+      <div class="day-head" class:is-today={date.toDateString() === today}>
+        <span class="day-name">{day.short}</span>
+        <span class="day-date">{date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })}</span>
+      </div>
+    {/each}
+
+    <!-- One row per meal type. -->
+    {#each MEALS as meal (meal.key)}
+      <div class="meal-head">{meal.label}</div>
+
+      {#each DAYS as day (day.key)}
+        {@const planned = planner.meal(day.key, meal.key, weekKey)}
+        <div
+          class="cell"
+          draggable={planned ? 'true' : 'false'}
+          ondragstart={(event) => handleDragStart(event, day.key, meal.key)}
+          role="presentation"
+        >
+          <!--
+            The planner cell is a Stencil component. Props carry the planned
+            recipe down; add / open / remove / drop come back as custom events.
+          -->
+          <WebComponent
+            tag="rk-meal-slot"
+            props={{
+              day: day.label,
+              mealType: meal.key,
+              mealLabel: meal.label,
+              recipeId: planned?.recipeId,
+              recipeName: planned?.name,
+              recipeImage: planned?.image
+            }}
+            events={{
+              rkMealAdd: (() => openPicker(day.key, meal.key)) as (event: CustomEvent<never>) => void,
+              rkMealSwap: (() => openPicker(day.key, meal.key)) as (event: CustomEvent<never>) => void,
+              rkMealOpen: ((event: CustomEvent<{ recipeId: string }>) => goto(`/recipes/${event.detail.recipeId}`)) as (
+                event: CustomEvent<never>
+              ) => void,
+              rkMealRemove: (() => removeMeal(day.key, meal.key)) as (event: CustomEvent<never>) => void,
+              rkMealDrop: ((event: CustomEvent<{ payload: string }>) => dropOnto(day.key, meal.key, event.detail.payload)) as (
+                event: CustomEvent<never>
+              ) => void
+            }}
+          >
+            {#snippet children()}
+              {#if planned?.origin === 'custom'}
+                <rk-badge tone="success" small>yours</rk-badge>
+              {/if}
+            {/snippet}
+          </WebComponent>
+        </div>
+      {/each}
+    {/each}
+  </div>
+</div>
+
+{#if plannedCount === 0}
+  <div class="section">
+    <rk-empty-state
+      icon="🗓️"
+      heading="Nothing planned for this week yet"
+      message="Tap any empty slot to pick a recipe from your favorites, your own collection, or the whole catalogue."
+    >
+      <a class="btn btn-primary" href="/">Find recipes</a>
+    </rk-empty-state>
+  </div>
+{:else}
+  <section class="section">
+    <div class="section-head">
+      <h2 class="section-title">This week's recipes</h2>
+      <button class="btn btn-ghost btn-sm" type="button" onclick={() => (showSummary = !showSummary)} aria-expanded={showSummary}>
+        {showSummary ? 'Hide' : 'Show'}
+      </button>
+    </div>
+
+    {#if showSummary}
+      <ul class="summary">
+        {#each weekRecipes as entry (entry.meal.recipeId)}
+          <li class="summary-row card-surface">
+            {#if entry.meal.image}
+              <img class="summary-thumb" src={entry.meal.image} alt="" width="56" height="56" loading="lazy" />
+            {:else}
+              <span class="summary-thumb summary-thumb-fallback" aria-hidden="true">🍽️</span>
+            {/if}
+
+            <div class="summary-text">
+              <a class="summary-name" href={`/recipes/${entry.meal.recipeId}`}>{entry.meal.name}</a>
+              <p class="small muted">{entry.meal.category}{entry.meal.area && entry.meal.area !== 'Unknown' ? ` · ${entry.meal.area}` : ''}</p>
+            </div>
+
+            <rk-badge tone={entry.slots > 1 ? 'primary' : 'neutral'}>
+              {entry.slots} {entry.slots === 1 ? 'slot' : 'slots'}
+            </rk-badge>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </section>
+{/if}
+
+<RecipePickerDialog
+  open={pickerOpen}
+  slotLabel={targetLabel}
+  onpick={handlePick}
+  onclose={() => {
+    pickerOpen = false;
+    target = null;
+  }}
+/>
+
+<ConfirmDialog
+  open={confirmClear}
+  heading="Clear this week?"
+  message={`All ${plannedCount} planned ${plannedCount === 1 ? 'meal' : 'meals'} for the week of ${formatWeekRange(weekKey)} will be removed. Other weeks are not affected.`}
+  confirmLabel="Clear week"
+  destructive
+  onconfirm={clearWeek}
+  oncancel={() => (confirmClear = false)}
+/>
+
+<style>
+  .week-nav {
+    display: flex;
+    gap: 6px;
+  }
+
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 22px;
+  }
+
+  /* Horizontal scroll keeps all seven days addressable on narrow screens. */
+  .planner-scroll {
+    overflow-x: auto;
+    margin: 0 calc(-1 * var(--app-gutter));
+    padding: 2px var(--app-gutter);
+  }
+
+  .planner-grid {
+    display: grid;
+    grid-template-columns: 96px repeat(var(--day-count), minmax(148px, 1fr));
+    gap: 8px;
+    min-width: 860px;
+  }
+
+  .day-head {
+    display: grid;
+    gap: 1px;
+    padding: 8px 10px;
+    border-radius: var(--rk-radius);
+    background: var(--rk-surface-2);
+    border: 1px solid var(--rk-border);
+    text-align: center;
+  }
+
+  .day-head.is-today {
+    background: var(--rk-primary-soft);
+    border-color: var(--rk-primary);
+  }
+
+  .day-name {
+    font-weight: 700;
+    font-size: 0.85rem;
+  }
+
+  .day-date {
+    font-size: 0.72rem;
+    color: var(--rk-muted);
+  }
+
+  .day-head.is-today .day-date {
+    color: var(--rk-primary-strong);
+  }
+
+  .meal-head {
+    display: flex;
+    align-items: center;
+    font-size: 0.74rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--rk-muted);
+    padding-right: 8px;
+  }
+
+  .cell {
+    display: flex;
+  }
+
+  .cell > :global(*) {
+    flex: 1 1 auto;
+  }
+
+  .cell[draggable='true'] {
+    cursor: grab;
+  }
+
+  .cell[draggable='true']:active {
+    cursor: grabbing;
+  }
+
+  .summary {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 10px;
+  }
+
+  .summary-row {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 16px;
+  }
+
+  .summary-thumb {
+    flex: 0 0 auto;
+    width: 56px;
+    height: 56px;
+    border-radius: var(--rk-radius-sm);
+    object-fit: cover;
+    background: var(--rk-surface-2);
+  }
+
+  .summary-thumb-fallback {
+    display: grid;
+    place-items: center;
+    font-size: 1.4rem;
+  }
+
+  .summary-text {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .summary-name {
+    font-family: var(--rk-font-display);
+    font-size: 1.03rem;
+    font-weight: 650;
+    color: var(--rk-ink);
+    text-decoration: none;
+  }
+
+  .summary-name:hover {
+    color: var(--rk-primary);
+  }
+
+  @media (max-width: 720px) {
+    .page-head {
+      align-items: flex-start;
+    }
+  }
+</style>