@ssejal8/recipe-ui-kit 0.1.0

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

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import RecipeGrid from '$components/RecipeGrid.svelte';
+  import type { RecipeSummary } from '$domain/recipe';
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+  import { favorites } from '$stores/favorites.svelte';
+  import { toasts } from '$stores/toast.svelte';
+
+  let query = $state('');
+  let activeCategory = $state('');
+
+  const all = $derived(favorites.all);
+
+  /** Category facets, derived from what is actually favorited. */
+  const categories = $derived.by(() => {
+    const tally = new Map<string, number>();
+    for (const recipe of all) {
+      tally.set(recipe.category, (tally.get(recipe.category) ?? 0) + 1);
+    }
+    return [...tally.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+  });
+
+  const visible = $derived.by<RecipeSummary[]>(() => {
+    const needle = query.trim().toLowerCase();
+    return all.filter((recipe) => {
+      if (activeCategory && recipe.category !== activeCategory) return false;
+      if (!needle) return true;
+      return recipe.name.toLowerCase().includes(needle) || recipe.area.toLowerCase().includes(needle);
+    });
+  });
+
+  let confirmClear = $state(false);
+
+  function clearAll() {
+    const snapshot = favorites.all;
+    favorites.clear();
+    confirmClear = false;
+    toasts.push(`Cleared ${snapshot.length} ${snapshot.length === 1 ? 'favorite' : 'favorites'}.`, {
+      tone: 'info',
+      action: {
+        label: 'Undo',
+        run: () => {
+          // Re-add oldest first so the original ordering is preserved.
+          for (const recipe of [...snapshot].reverse()) favorites.add(recipe);
+        }
+      }
+    });
+  }
+</script>
+
+<svelte:head>
+  <title>Favorites — Mise</title>
+</svelte:head>
+
+<div class="page-head">
+  <div>
+    <p class="eyebrow">Saved</p>
+    <h1 class="page-title">Favorites</h1>
+    <p class="page-lede">
+      {#if favorites.count === 0}
+        Recipes you favorite are kept here, in this browser.
+      {:else}
+        {favorites.count} {favorites.count === 1 ? 'recipe' : 'recipes'} saved. Tap the heart on any card to remove it.
+      {/if}
+    </p>
+  </div>
+
+  {#if favorites.count > 0}
+    <button class="btn btn-danger btn-sm" type="button" onclick={() => (confirmClear = true)}>Clear all</button>
+  {/if}
+</div>
+
+{#if favorites.count === 0}
+  <rk-empty-state icon="🤍" heading="No favorites yet" message="Browse the catalogue and tap the heart on any recipe to save it here.">
+    <a class="btn btn-primary" href="/">Discover recipes</a>
+  </rk-empty-state>
+{:else}
+  <div class="controls">
+    <WebComponent
+      tag="rk-search-bar"
+      props={{ value: query, placeholder: 'Filter your favorites…', debounce: 180 }}
+      events={{ rkSearch: ((event: CustomEvent<string>) => (query = event.detail)) as (event: CustomEvent<never>) => void }}
+    />
+
+    {#if categories.length > 1}
+      <div class="chips" role="group" aria-label="Filter by category">
+        <!-- Chips: `selected` down as a prop, `rkChipToggle` back up. -->
+        <WebComponent
+          tag="rk-chip"
+          props={{ label: 'All', value: '', selected: activeCategory === '', count: all.length, tone: 'primary' }}
+          events={{ rkChipToggle: (() => (activeCategory = '')) as (event: CustomEvent<never>) => void }}
+        />
+        {#each categories as [name, count] (name)}
+          <WebComponent
+            tag="rk-chip"
+            props={{ label: name, value: name, selected: activeCategory === name, count, tone: 'primary' }}
+            events={{
+              rkChipToggle: ((event: CustomEvent<{ selected: boolean }>) => {
+                activeCategory = event.detail.selected ? name : '';
+              }) as (event: CustomEvent<never>) => void
+            }}
+          />
+        {/each}
+      </div>
+    {/if}
+  </div>
+
+  <div class="section">
+    <RecipeGrid recipes={visible}>
+      {#snippet empty()}
+        <rk-empty-state
+          bare
+          icon="🫙"
+          heading="Nothing matches that filter"
+          message="No favorite recipe matches the current search and category."
+        >
+          <button
+            class="btn"
+            type="button"
+            onclick={() => {
+              query = '';
+              activeCategory = '';
+            }}
+          >
+            Reset filters
+          </button>
+        </rk-empty-state>
+      {/snippet}
+    </RecipeGrid>
+  </div>
+{/if}
+
+<!-- Confirm dialog is driven by the Stencil modal via the bridge component. -->
+<WebComponent
+  tag="rk-modal"
+  props={{
+    open: confirmClear,
+    heading: 'Clear all favorites?',
+    subheading: `${favorites.count} ${favorites.count === 1 ? 'recipe' : 'recipes'} will be removed.`,
+    size: 'sm'
+  }}
+  events={{ rkModalClose: (() => (confirmClear = false)) as (event: CustomEvent<never>) => void }}
+>
+  {#snippet children()}
+    <p>Your own recipes are not affected — only the list of favorites is cleared. You can undo this straight after.</p>
+    <div slot="footer" class="dialog-actions">
+      <button class="btn" type="button" onclick={() => (confirmClear = false)}>Cancel</button>
+      <button class="btn btn-danger" type="button" onclick={clearAll}>Clear favorites</button>
+    </div>
+  {/snippet}
+</WebComponent>
+
+<style>
+  .controls {
+    display: grid;
+    gap: 14px;
+    max-width: 720px;
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .dialog-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+  }
+</style>

package/apps/recipe-web/src/routes/my-recipes/+layout.ts

@@ -0,0 +1,55 @@
+import { listAreas, listCategories } from '$api/mealdb';
+import type { LayoutLoad } from './$types';
+
+/**
+ * Category and cuisine lists power the create/edit selects. They are fetched
+ * once for the whole `/my-recipes` subtree rather than per page, and fall back
+ * to a built-in list so the form still works if the API is unreachable.
+ */
+const FALLBACK_CATEGORIES = [
+  'Beef',
+  'Breakfast',
+  'Chicken',
+  'Dessert',
+  'Goat',
+  'Lamb',
+  'Miscellaneous',
+  'Pasta',
+  'Pork',
+  'Seafood',
+  'Side',
+  'Starter',
+  'Vegan',
+  'Vegetarian'
+];
+
+const FALLBACK_AREAS = [
+  'American',
+  'British',
+  'Chinese',
+  'French',
+  'Greek',
+  'Indian',
+  'Italian',
+  'Japanese',
+  'Mexican',
+  'Moroccan',
+  'Spanish',
+  'Thai',
+  'Turkish',
+  'Vietnamese'
+];
+
+export const load: LayoutLoad = async ({ fetch }) => {
+  const [categories, areas] = await Promise.all([
+    listCategories(fetch)
+      .then((list) => list.map((category) => category.name))
+      .catch(() => FALLBACK_CATEGORIES),
+    listAreas(fetch).catch(() => FALLBACK_AREAS)
+  ]);
+
+  return {
+    categories: categories.length > 0 ? categories : FALLBACK_CATEGORIES,
+    areas: areas.length > 0 ? areas : FALLBACK_AREAS
+  };
+};

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

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import ConfirmDialog from '$components/ConfirmDialog.svelte';
+  import RecipeGrid from '$components/RecipeGrid.svelte';
+  import { toSummary, type Recipe } from '$domain/recipe';
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+  import { myRecipes } from '$stores/myRecipes.svelte';
+  import { planner } from '$stores/planner.svelte';
+  import { toasts } from '$stores/toast.svelte';
+
+  let query = $state('');
+  let sort = $state<'recent' | 'az'>('recent');
+
+  const SORT_OPTIONS = [
+    { label: 'Recently updated', value: 'recent' },
+    { label: 'A–Z', value: 'az' }
+  ];
+
+  const visible = $derived.by(() => {
+    const needle = query.trim().toLowerCase();
+    const list = myRecipes.all.filter((recipe) => {
+      if (!needle) return true;
+      return (
+        recipe.name.toLowerCase().includes(needle) ||
+        recipe.category.toLowerCase().includes(needle) ||
+        recipe.area.toLowerCase().includes(needle) ||
+        recipe.tags.some((tag) => tag.toLowerCase().includes(needle)) ||
+        recipe.ingredients.some((row) => row.name.toLowerCase().includes(needle))
+      );
+    });
+
+    return sort === 'az' ? [...list].sort((a, b) => a.name.localeCompare(b.name)) : list;
+  });
+
+  const summaries = $derived(visible.map(toSummary));
+
+  /* --------------------------------------------------------------- deleting */
+
+  let pendingDelete = $state<Recipe | null>(null);
+
+  /** How many planner slots the recipe occupies, so the warning is specific. */
+  const plannedSlots = $derived.by(() => {
+    if (!pendingDelete) return 0;
+    const id = pendingDelete.id;
+    return Object.keys(planner.archive).reduce((total, weekKey) => {
+      const week = planner.week(weekKey);
+      return (
+        total +
+        Object.values(week).reduce(
+          (dayTotal, day) => dayTotal + Object.values(day ?? {}).filter((meal) => meal?.recipeId === id).length,
+          0
+        )
+      );
+    }, 0);
+  });
+
+  function confirmDelete() {
+    if (!pendingDelete) return;
+    const removed = myRecipes.remove(pendingDelete.id);
+    pendingDelete = null;
+    if (!removed) return;
+
+    toasts.push(`Deleted “${removed.name}”.`, {
+      tone: 'info',
+      action: { label: 'Undo', run: () => myRecipes.restore(removed) }
+    });
+  }
+
+  const deleteMessage = $derived.by(() => {
+    if (!pendingDelete) return '';
+    const base = `“${pendingDelete.name}” will be removed from your collection and your favorites.`;
+    if (plannedSlots === 0) return `${base} You can undo this straight after.`;
+    return `${base} It is also planned in ${plannedSlots} meal ${plannedSlots === 1 ? 'slot' : 'slots'}, which will be cleared. You can undo this straight after.`;
+  });
+</script>
+
+<svelte:head>
+  <title>My recipes — Mise</title>
+</svelte:head>
+
+<div class="page-head">
+  <div>
+    <p class="eyebrow">Your collection</p>
+    <h1 class="page-title">My recipes</h1>
+    <p class="page-lede">
+      {#if myRecipes.count === 0}
+        Add your own recipes to search, favorite and plan them alongside the catalogue.
+      {:else}
+        {myRecipes.count} {myRecipes.count === 1 ? 'recipe' : 'recipes'} you wrote. They appear in Discover and the planner too.
+      {/if}
+    </p>
+  </div>
+
+  <a class="btn btn-primary" href="/my-recipes/new">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+    New recipe
+  </a>
+</div>
+
+{#if myRecipes.count === 0}
+  <rk-empty-state
+    icon="📝"
+    heading="Your collection is empty"
+    message="Write up a recipe once and it becomes searchable, favoritable and plannable just like the rest."
+  >
+    <a class="btn btn-primary" href="/my-recipes/new">Add your first recipe</a>
+  </rk-empty-state>
+{:else}
+  <div class="controls">
+    <WebComponent
+      tag="rk-search-bar"
+      props={{ value: query, placeholder: 'Search your recipes, tags or ingredients…', debounce: 180 }}
+      events={{ rkSearch: ((event: CustomEvent<string>) => (query = event.detail)) as (event: CustomEvent<never>) => void }}
+    />
+
+    <WebComponent
+      tag="rk-segmented-control"
+      props={{ options: SORT_OPTIONS, value: sort, label: 'Sort your recipes' }}
+      events={{ rkSegmentChange: ((event: CustomEvent<string>) => (sort = event.detail as 'recent' | 'az')) as (event: CustomEvent<never>) => void }}
+    />
+  </div>
+
+  <div class="section">
+    <RecipeGrid recipes={summaries}>
+      {#snippet actions(recipe)}
+        <div slot="actions" class="card-actions">
+          <a class="btn btn-sm" href={`/my-recipes/${recipe.id}/edit`}>Edit</a>
+          <button
+            class="btn btn-sm btn-danger"
+            type="button"
+            onclick={() => (pendingDelete = myRecipes.get(recipe.id) ?? null)}
+          >
+            Delete
+          </button>
+        </div>
+      {/snippet}
+
+      {#snippet empty()}
+        <rk-empty-state bare icon="🫙" heading="No matches" message={`Nothing in your collection matches “${query}”.`}>
+          <button class="btn" type="button" onclick={() => (query = '')}>Clear search</button>
+        </rk-empty-state>
+      {/snippet}
+    </RecipeGrid>
+  </div>
+{/if}
+
+<ConfirmDialog
+  open={pendingDelete !== null}
+  heading="Delete this recipe?"
+  message={deleteMessage}
+  confirmLabel="Delete recipe"
+  destructive
+  onconfirm={confirmDelete}
+  oncancel={() => (pendingDelete = null)}
+/>
+
+<style>
+  .controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 14px;
+  }
+
+  .controls :global(rk-search-bar) {
+    flex: 1 1 320px;
+  }
+
+  .card-actions {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .card-actions > * {
+    flex: 1 1 0;
+    justify-content: center;
+  }
+</style>

package/apps/recipe-web/src/routes/my-recipes/[id]/edit/+page.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import RecipeForm from '$components/RecipeForm.svelte';
+  import type { Recipe } from '$domain/recipe';
+  import { myRecipes } from '$stores/myRecipes.svelte';
+  import { toasts } from '$stores/toast.svelte';
+  import type { LayoutData } from '../../$types';
+
+  let { data }: { data: LayoutData } = $props();
+
+  const id = $derived(page.params.id ?? '');
+  const recipe = $derived<Recipe | undefined>(myRecipes.get(id));
+
+  /**
+   * The store only exists in the browser, so during SSR (and the first render
+   * before hydration) `recipe` is undefined. `hydrated` keeps the page from
+   * flashing "not found" in that window.
+   */
+  let hydrated = $state(false);
+  $effect(() => {
+    hydrated = true;
+  });
+
+  function handleSubmit(payload: Omit<Recipe, 'id' | 'origin' | 'createdAt' | 'updatedAt'>): string | void {
+    if (myRecipes.nameTaken(payload.name, id)) {
+      return `You already have another recipe called “${payload.name}”.`;
+    }
+
+    const updated = myRecipes.update(id, payload);
+    if (!updated) return 'That recipe no longer exists.';
+
+    toasts.success(`Saved changes to “${updated.name}”.`);
+    void goto(`/recipes/${updated.id}`);
+  }
+</script>
+
+<svelte:head>
+  <title>{recipe ? `Edit ${recipe.name} — Mise` : 'Edit recipe — Mise'}</title>
+</svelte:head>
+
+{#if !recipe}
+  {#if hydrated}
+    <rk-empty-state
+      icon="🔎"
+      heading="Recipe not found"
+      message="Only recipes you created in this browser can be edited. This one may have been deleted."
+    >
+      <a class="btn btn-primary" href="/my-recipes">Back to my recipes</a>
+    </rk-empty-state>
+  {:else}
+    <p class="muted">Loading…</p>
+  {/if}
+{:else}
+  <nav class="crumbs small" aria-label="Breadcrumb">
+    <a href="/my-recipes">My recipes</a>
+    <span aria-hidden="true">/</span>
+    <a href={`/recipes/${recipe.id}`}>{recipe.name}</a>
+    <span aria-hidden="true">/</span>
+    <span class="muted">Edit</span>
+  </nav>
+
+  <div class="page-head">
+    <div>
+      <p class="eyebrow">Edit</p>
+      <h1 class="page-title">{recipe.name}</h1>
+      <p class="page-lede">
+        Changes flow through to your favorites and every meal plan this recipe appears in.
+        {#if recipe.updatedAt}
+          Last saved {new Date(recipe.updatedAt).toLocaleString()}.
+        {/if}
+      </p>
+    </div>
+  </div>
+
+  <RecipeForm
+    categories={data.categories}
+    areas={data.areas}
+    {recipe}
+    submitLabel="Save changes"
+    onsubmit={handleSubmit}
+    oncancel={() => goto(`/recipes/${recipe.id}`)}
+  />
+{/if}
+
+<style>
+  .crumbs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 18px;
+  }
+
+  .crumbs a {
+    color: var(--rk-ink-2);
+    text-decoration: none;
+  }
+
+  .crumbs a:hover {
+    color: var(--rk-primary);
+    text-decoration: underline;
+  }
+</style>

package/apps/recipe-web/src/routes/my-recipes/new/+page.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import RecipeForm from '$components/RecipeForm.svelte';
+  import type { Recipe } from '$domain/recipe';
+  import { myRecipes } from '$stores/myRecipes.svelte';
+  import { toasts } from '$stores/toast.svelte';
+  import type { LayoutData } from '../$types';
+
+  let { data }: { data: LayoutData } = $props();
+
+  function handleSubmit(payload: Omit<Recipe, 'id' | 'origin' | 'createdAt' | 'updatedAt'>): string | void {
+    // Duplicate titles are checked here rather than in `validateDraft`, because
+    // the rule depends on the store rather than the shape of the input.
+    if (myRecipes.nameTaken(payload.name)) {
+      return `You already have a recipe called “${payload.name}”. Pick a different name.`;
+    }
+
+    const created = myRecipes.create(payload);
+    toasts.success(`Added “${created.name}” to your collection.`);
+    void goto(`/recipes/${created.id}`);
+  }
+</script>
+
+<svelte:head>
+  <title>New recipe — Mise</title>
+</svelte:head>
+
+<nav class="crumbs small" aria-label="Breadcrumb">
+  <a href="/my-recipes">My recipes</a>
+  <span aria-hidden="true">/</span>
+  <span class="muted">New</span>
+</nav>
+
+<div class="page-head">
+  <div>
+    <p class="eyebrow">Add</p>
+    <h1 class="page-title">New recipe</h1>
+    <p class="page-lede">Everything except the image, time, servings, tags and notes is required.</p>
+  </div>
+</div>
+
+<RecipeForm
+  categories={data.categories}
+  areas={data.areas}
+  submitLabel="Add recipe"
+  onsubmit={handleSubmit}
+  oncancel={() => goto('/my-recipes')}
+/>
+
+<style>
+  .crumbs {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 18px;
+  }
+
+  .crumbs a {
+    color: var(--rk-ink-2);
+    text-decoration: none;
+  }
+
+  .crumbs a:hover {
+    color: var(--rk-primary);
+    text-decoration: underline;
+  }
+</style>