@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

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

@@ -1,422 +0,0 @@
-<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>