version 0.4.0 [skip ci]

Cargo.lock

@@ -1772,7 +1772,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
 
 [[package]]
 name = "sustenance"
-version = "0.2.0"
+version = "0.4.0"
 dependencies = [
  "argon2",
  "async-trait",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "sustenance"
-version = "0.2.0"
+version = "0.4.0"
 edition = "2024"
 
 [dependencies]

e2e/helpers.ts

@@ -11,9 +11,17 @@ export async function registerAndLogin(page: Page, email: string) {
 }
 
 /** Creates a meal with the given name and markdown description. */
-export async function createMeal(page: Page, name: string, description: string) {
+export async function createMeal(
+  page: Page,
+  name: string,
+  description: string,
+  category?: string,
+) {
   await page.goto("/meals/new");
   await page.fill("#meal-name", name);
+  if (category) {
+    await page.selectOption("#meal-category", { label: category });
+  }
   await page.fill("#meal-description", description);
   await page.click('button:has-text("Save meal")');
   await expect(page).toHaveURL(/\/meals\/\d+/);

e2e/tests/add-meal.spec.ts

@@ -52,3 +52,47 @@ test("the add-meal picker closes when clicking outside", async ({ page }) => {
   await page.mouse.click(10, 10);
   await expect(picker).toHaveCount(0);
 });
+
+test("a meal added to a list is shown in the meals panel", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createMealWithIngredients(page, "Spaghetti Bolognese", [
+    { name: "Penne", quantity: "500g" },
+    { name: "Tomato", quantity: "2" },
+  ]);
+  await createList(page, "Weekly shop");
+
+  await page.click(".add-meal-button");
+  const picker = page.locator(".meal-picker-backdrop");
+  await picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" }).click();
+
+  // The meal appears in the "Meals on this list" panel.
+  const panel = page.locator("#list-meals-panel");
+  await expect(panel).toBeVisible();
+  await expect(panel.locator(".list-meal-row").filter({ hasText: "Spaghetti Bolognese" })).toBeVisible();
+});
+
+test("removing a meal from a list removes its ingredients", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createMealWithIngredients(page, "Spaghetti Bolognese", [
+    { name: "Penne", quantity: "500g" },
+    { name: "Tomato", quantity: "2" },
+  ]);
+  await createList(page, "Weekly shop");
+
+  await page.click(".add-meal-button");
+  const picker = page.locator(".meal-picker-backdrop");
+  await picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" }).click();
+
+  await expect(page.locator(".item-row").filter({ hasText: "Penne" })).toBeVisible();
+  await expect(page.locator(".item-row").filter({ hasText: "Tomato" })).toBeVisible();
+
+  // Remove the meal from the list.
+  const panel = page.locator("#list-meals-panel");
+  const row = panel.locator(".list-meal-row").filter({ hasText: "Spaghetti Bolognese" });
+  await row.locator(".list-meal-remove-button").click();
+
+  // The meal's ingredients are removed from the list.
+  await expect(page.locator(".item-row").filter({ hasText: "Penne" })).toHaveCount(0);
+  await expect(page.locator(".item-row").filter({ hasText: "Tomato" })).toHaveCount(0);
+  await expect(row).toHaveCount(0);
+});

e2e/tests/auth.spec.ts

@@ -13,3 +13,33 @@ test("a user can log out", async ({ page }) => {
   await expect(page).toHaveURL(/\/login/);
   await expect(page.locator("h1")).toContainText("Welcome back");
 });
+
+test("a user can change their password", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await page.goto("/account");
+  await page.fill("#new-password", "a-new-strong-password");
+  await page.fill("#confirm-password", "a-new-strong-password");
+  await page.click('button:has-text("Update password")');
+  await expect(page.locator(".alert-success")).toContainText("updated");
+
+  // The old password no longer works; the new one does.
+  await page.click('button:has-text("Sign out")');
+  await page.fill("#email", "alice@example.com");
+  await page.fill("#password", "a-strong-password");
+  await page.click('button[type="submit"]');
+  await expect(page.locator(".alert-error")).toContainText("incorrect");
+
+  await page.fill("#email", "alice@example.com");
+  await page.fill("#password", "a-new-strong-password");
+  await page.click('button[type="submit"]');
+  await expect(page).toHaveURL(/\/lists/);
+});
+
+test("changing password rejects a mismatched confirmation", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await page.goto("/account");
+  await page.fill("#new-password", "a-new-strong-password");
+  await page.fill("#confirm-password", "a-different-password");
+  await page.click('button:has-text("Update password")');
+  await expect(page.locator(".alert-error")).toContainText("do not match");
+});

e2e/tests/lists.spec.ts

@@ -84,6 +84,8 @@ test("a user can add a category", async ({ page }) => {
   await registerAndLogin(page, "alice@example.com");
   await createList(page, "Weekly shop");
 
+  // Categories are managed from the main lists page.
+  await page.goto("/lists");
   await page.fill("#category-name", "Bakery");
   await page.click("#add-category-button");
 

e2e/tests/meal-categories.spec.ts

@@ -0,0 +1,111 @@
+import { expect } from "@playwright/test";
+import { test } from "../fixtures";
+import { registerAndLogin, createMeal } from "../helpers";
+
+test("meals are grouped under their category on the meals page", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+
+  await createMeal(page, "Beef Stew", "", "Beef");
+  await createMeal(page, "Chicken Curry", "", "Chicken");
+  await createMeal(page, "Plain Rice", "");
+
+  await page.goto("/meals");
+
+  // Each category appears as a heading with its meals beneath it.
+  const beef = page.locator(".category-group").filter({ hasText: "Beef" });
+  await expect(beef.locator(".category-heading")).toContainText("Beef");
+  await expect(beef.locator(".list-card").filter({ hasText: "Beef Stew" })).toBeVisible();
+
+  const chicken = page.locator(".category-group").filter({ hasText: "Chicken" });
+  await expect(chicken.locator(".list-card").filter({ hasText: "Chicken Curry" })).toBeVisible();
+
+  // Uncategorized meals land in their own group.
+  const uncategorized = page.locator(".category-group").filter({ hasText: "Uncategorized" });
+  await expect(uncategorized.locator(".list-card").filter({ hasText: "Plain Rice" })).toBeVisible();
+});
+
+test("a user can create a meal category", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+
+  await page.goto("/meals");
+  await page.fill('form[action="/meals/categories"] input[name="name"]', "Breakfast");
+  await page.click('form[action="/meals/categories"] button[type="submit"]');
+
+  await expect(page).toHaveURL(/\/meals$/);
+  await expect(page.locator(".meal-category-name").filter({ hasText: "Breakfast" })).toBeVisible();
+});
+
+test("a user can delete a meal category and its meals become uncategorized", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+
+  // Create a custom category and a meal in it.
+  await page.goto("/meals");
+  await page.fill('form[action="/meals/categories"] input[name="name"]', "Breakfast");
+  await page.click('form[action="/meals/categories"] button[type="submit"]');
+  await expect(page).toHaveURL(/\/meals$/);
+
+  await createMeal(page, "Pancakes", "", "Breakfast");
+
+  // Delete the category.
+  await page.goto("/meals");
+  const row = page.locator(".meal-category-row").filter({ hasText: "Breakfast" });
+  await row.locator(".meal-category-delete").click();
+  await expect(page).toHaveURL(/\/meals$/);
+
+  // The category is gone and the meal is now uncategorized.
+  await expect(page.locator(".meal-category-name").filter({ hasText: "Breakfast" })).toHaveCount(0);
+  const uncategorized = page.locator(".category-group").filter({ hasText: "Uncategorized" });
+  await expect(uncategorized.locator(".list-card").filter({ hasText: "Pancakes" })).toBeVisible();
+});
+
+test("a user can change a meal's category via the edit modal", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createMeal(page, "Beef Stew", "", "Beef");
+
+  await page.click('button:has-text("Edit")');
+  const dialog = page.locator("dialog#meal-edit-modal");
+  await expect(dialog).toBeVisible();
+  await dialog.locator("#meal-edit-category").selectOption({ label: "Chicken" });
+  await dialog.locator("#meal-edit-save").click();
+
+  await expect(page).toHaveURL(/\/meals\/\d+/);
+  await page.goto("/meals");
+
+  const chicken = page.locator(".category-group").filter({
+    has: page.locator(".category-heading", { hasText: "Chicken" }),
+  });
+  await expect(chicken.locator(".list-card").filter({ hasText: "Beef Stew" })).toBeVisible();
+  const beef = page.locator(".category-group").filter({
+    has: page.locator(".category-heading", { hasText: "Beef" }),
+  });
+  await expect(beef.locator(".list-card").filter({ hasText: "Beef Stew" })).toHaveCount(0);
+});
+
+test("a meal's category is shown on its page", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createMeal(page, "Beef Stew", "", "Beef");
+
+  await expect(page.locator(".meal-category-label")).toHaveText("(Beef)");
+});
+
+test("the add-meal picker groups meals by category", async ({ page }) => {
+  await registerAndLogin(page, "alice@example.com");
+  await createMeal(page, "Beef Stew", "", "Beef");
+  await createMeal(page, "Chicken Curry", "", "Chicken");
+
+  // Go to a list to open the picker.
+  await page.goto("/lists");
+  await page.fill("#list-name", "Weekly shop");
+  await page.click('button:has-text("Create list")');
+  await expect(page).toHaveURL(/\/lists\/\d+/);
+
+  await page.click(".add-meal-button");
+  const picker = page.locator(".meal-picker-backdrop");
+  await expect(picker).toBeVisible();
+
+  const beef = picker.locator(".category-group").filter({ hasText: "Beef" });
+  await expect(beef.locator(".meal-picker-button").filter({ hasText: "Beef Stew" })).toBeVisible();
+
+  const chicken = picker.locator(".category-group").filter({ hasText: "Chicken" });
+  await expect(chicken.locator(".meal-picker-button").filter({ hasText: "Chicken Curry" })).toBeVisible();
+});

migrations/20240102000000_meal_categories.sql

@@ -0,0 +1,10 @@
+CREATE TABLE meal_categories (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    name TEXT NOT NULL UNIQUE COLLATE NOCASE,
+    position INTEGER NOT NULL DEFAULT 0,
+    created_at INTEGER NOT NULL
+);
+
+ALTER TABLE meals ADD COLUMN category_id INTEGER REFERENCES meal_categories(id) ON DELETE SET NULL;
+
+CREATE INDEX meals_category_idx ON meals(category_id);

migrations/20240103000000_list_meals.sql

@@ -0,0 +1,12 @@
+CREATE TABLE list_meals (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    list_id INTEGER NOT NULL REFERENCES lists(id) ON DELETE CASCADE,
+    meal_id INTEGER REFERENCES meals(id) ON DELETE SET NULL,
+    name TEXT NOT NULL,
+    created_at INTEGER NOT NULL
+);
+
+ALTER TABLE items ADD COLUMN list_meal_id INTEGER REFERENCES list_meals(id) ON DELETE CASCADE;
+
+CREATE INDEX list_meals_list_idx ON list_meals(list_id);
+CREATE INDEX items_list_meal_idx ON items(list_meal_id);

src/domain.rs

@@ -31,6 +31,9 @@ pub struct Passkey {
     pub user_id: i64,
     pub credential_id: String,
     pub credential: String,
+    /// WebAuthn sign counter, persisted for future cloned-authenticator
+    /// detection. Not currently read by application logic.
+    #[allow(dead_code)]
     pub counter: i64,
 }
 
@@ -65,11 +68,18 @@ pub struct Category {
     pub name: String,
 }
 
+#[derive(Clone, Debug)]
+pub struct MealCategory {
+    pub id: i64,
+    pub name: String,
+}
+
 #[derive(Clone, Debug)]
 pub struct Meal {
     pub id: i64,
     pub name: String,
     pub description: String,
+    pub category_id: Option<i64>,
     pub ingredients: Vec<MealIngredient>,
 }
 
@@ -82,6 +92,18 @@ pub struct MealIngredient {
     pub category_id: Option<i64>,
 }
 
+#[derive(Clone, Debug)]
+pub struct ListMeal {
+    pub id: i64,
+    /// The catalog meal this instance came from; `None` once the meal is deleted.
+    #[allow(dead_code)]
+    pub meal_id: Option<i64>,
+    pub name: String,
+    /// When the meal was added to the list.
+    #[allow(dead_code)]
+    pub created_at: i64,
+}
+
 #[derive(Clone, Debug)]
 pub struct PresenceUser {
     pub user_id: i64,

src/http.rs

@@ -14,6 +14,7 @@ use axum::{
     routing::{get, post},
 };
 use futures_util::{SinkExt, StreamExt};
+use maud::PreEscaped;
 use serde::{Deserialize, de::DeserializeOwned};
 use thiserror::Error;
 use tower_http::trace::{DefaultMakeSpan, DefaultOnResponse, TraceLayer};
@@ -30,6 +31,7 @@ use crate::webauthn::WebAuthnService;
 const STYLE_CSS: &[u8] = include_bytes!("../static/style.css");
 const PASSKEY_LOGIN_JS: &[u8] = include_bytes!("../static/passkey-login.js");
 const PASSKEY_REGISTER_JS: &[u8] = include_bytes!("../static/passkey-register.js");
+const PASSWORD_TOGGLE_JS: &[u8] = include_bytes!("../static/password-toggle.js");
 
 #[derive(Clone)]
 pub struct AppState {
@@ -92,6 +94,7 @@ pub fn build_router(state: AppState) -> Router {
             "/account/passkeys/{passkey_id}/delete",
             post(delete_passkey),
         )
+        .route("/account/password", post(change_password))
         .route("/lists", get(lists_page).post(create_list))
         .route("/lists/{list_id}", get(list_page))
         .route("/lists/{list_id}/items", post(add_item))
@@ -102,6 +105,11 @@ pub fn build_router(state: AppState) -> Router {
         .route("/invitations", post(create_invitation))
         .route("/meals", get(meals_page).post(create_meal))
         .route("/meals/new", get(new_meal_page))
+        .route("/meals/categories", post(create_meal_category))
+        .route(
+            "/meals/categories/{category_id}/delete",
+            post(delete_meal_category),
+        )
         .route("/meals/{meal_id}", get(meal_page))
         .route("/meals/{meal_id}/edit", post(edit_meal))
         .route("/meals/{meal_id}/delete", post(delete_meal))
@@ -115,6 +123,10 @@ pub fn build_router(state: AppState) -> Router {
             post(delete_ingredient),
         )
         .route("/lists/{list_id}/add-meal", post(add_meal_to_list))
+        .route(
+            "/lists/{list_id}/meals/{list_meal_id}/remove",
+            post(remove_meal_from_list),
+        )
         .route("/lists/{list_id}/stream", get(list_stream))
         .route("/invite/{token}", get(invitation_page))
         .route("/invite/{token}/accept", post(accept_invitation))
@@ -274,11 +286,20 @@ struct DeletePasskeyForm {
     csrf: String,
 }
 
+#[derive(Debug, Deserialize)]
+struct ChangePasswordForm {
+    csrf: String,
+    new_password: String,
+    confirm_password: String,
+}
+
 #[derive(Debug, Deserialize)]
 struct MealForm {
     name: String,
     #[serde(default)]
     description: String,
+    #[serde(default)]
+    category_id: Option<String>,
     csrf: String,
 }
 
@@ -315,6 +336,7 @@ async fn static_asset(Path(path): Path<String>) -> Response {
         "style.css" => ("text/css", STYLE_CSS),
         "passkey-login.js" => ("application/javascript", PASSKEY_LOGIN_JS),
         "passkey-register.js" => ("application/javascript", PASSKEY_REGISTER_JS),
+        "password-toggle.js" => ("application/javascript", PASSWORD_TOGGLE_JS),
         _ => return StatusCode::NOT_FOUND.into_response(),
     };
     ([(header::CONTENT_TYPE, mime)], data).into_response()
@@ -448,9 +470,42 @@ async fn account_page(
         &user.session.user,
         &passkeys,
         &user.session.csrf_token,
+        None,
+        false,
     )))
 }
 
+async fn change_password(
+    State(state): State<AppState>,
+    user: CurrentUser,
+    LoggedForm(form): LoggedForm<ChangePasswordForm>,
+) -> Result<Response, AppError> {
+    verify_csrf(&user, &form.csrf)?;
+    let passkeys = state.webauthn.list_passkeys(user.session.user.id).await?;
+    let render = |error: Option<&str>, success: bool| {
+        html_response(views::account_page(
+            &user.session.user,
+            &passkeys,
+            &user.session.csrf_token,
+            error,
+            success,
+        ))
+    };
+
+    if form.new_password != form.confirm_password {
+        return Ok(render(
+            Some("New password and confirmation do not match."),
+            false,
+        ));
+    }
+
+    state
+        .auth
+        .change_password(user.session.user.id, form.new_password)
+        .await?;
+    Ok(render(None, true))
+}
+
 async fn passkey_register_start(
     State(state): State<AppState>,
     user: CurrentUser,
@@ -539,9 +594,11 @@ async fn lists_page(
     user: CurrentUser,
 ) -> Result<Response, AppError> {
     let lists = state.lists.list_summaries().await?;
+    let categories = state.lists.categories().await?;
     Ok(html_response(views::lists_page(
         &user.session.user,
         &lists,
+        &categories,
         &user.session.csrf_token,
     )))
 }
@@ -570,12 +627,14 @@ async fn list_page(
     let access = require_list(&state, list_id).await?;
     let items = state.lists.items(list_id).await?;
     let categories = state.lists.categories().await?;
+    let list_meals = state.meals.list_meals_on_list(list_id).await?;
     let presence = state.realtime.presence(list_id).await;
     Ok(html_response(views::list_page(
         &user.session.user,
         &access,
         &items,
         &categories,
+        &list_meals,
         &presence,
         &user.session.csrf_token,
     )))
@@ -681,26 +740,65 @@ async fn create_category(
     Ok(Redirect::to("/lists").into_response())
 }
 
+async fn create_meal_category(
+    State(state): State<AppState>,
+    user: CurrentUser,
+    LoggedForm(form): LoggedForm<CategoryForm>,
+) -> Result<Response, AppError> {
+    verify_csrf(&user, &form.csrf)?;
+    let name = form.name.trim().to_owned();
+    if name.is_empty() || name.chars().count() > 60 {
+        return Err(AppError::BadRequest(
+            "Category names must be between 1 and 60 characters.".into(),
+        ));
+    }
+    state.meals.create_meal_category(name).await?;
+    Ok(Redirect::to("/meals").into_response())
+}
+
+async fn delete_meal_category(
+    State(state): State<AppState>,
+    user: CurrentUser,
+    Path(category_id): Path<i64>,
+    LoggedForm(form): LoggedForm<CsrfForm>,
+) -> Result<Response, AppError> {
+    verify_csrf(&user, &form.csrf)?;
+    state.meals.delete_meal_category(category_id).await?;
+    Ok(Redirect::to("/meals").into_response())
+}
+
 async fn meals_page(
     State(state): State<AppState>,
     user: CurrentUser,
     Query(query): Query<MealPickerQuery>,
 ) -> Result<Response, AppError> {
     let meals = state.meals.list_meals().await?;
+    let meal_categories = state.meals.list_meal_categories().await?;
     if let Some(list_id) = query.picker {
         return Ok(html_response(views::meal_picker(
             &meals,
+            &meal_categories,
             list_id,
             &user.session.csrf_token,
         )));
     }
-    Ok(html_response(views::meals_page(&user.session.user, &meals)))
+    Ok(html_response(views::meals_page(
+        &user.session.user,
+        &meals,
+        &meal_categories,
+        &user.session.csrf_token,
+    )))
 }
 
-async fn new_meal_page(user: CurrentUser) -> Result<Response, AppError> {
+async fn new_meal_page(
+    State(state): State<AppState>,
+    user: CurrentUser,
+) -> Result<Response, AppError> {
+    let meal_categories = state.meals.list_meal_categories().await?;
     Ok(html_response(views::meal_form_page(
         &user.session.user,
         None,
+        &meal_categories,
         &user.session.csrf_token,
     )))
 }
@@ -719,7 +817,11 @@ async fn create_meal(
     }
     let meal = state
         .meals
-        .create_meal(name, form.description.trim().to_owned())
+        .create_meal(
+            name,
+            form.description.trim().to_owned(),
+            parse_category_id(form.category_id),
+        )
         .await?;
     Ok(Redirect::to(&format!("/meals/{}", meal.id)).into_response())
 }
@@ -735,10 +837,12 @@ async fn meal_page(
         .await?
         .ok_or(AppError::NotFound)?;
     let categories = state.lists.categories().await?;
+    let meal_categories = state.meals.list_meal_categories().await?;
     Ok(html_response(views::meal_page(
         &user.session.user,
         &meal,
         &categories,
+        &meal_categories,
         &user.session.csrf_token,
     )))
 }
@@ -758,7 +862,12 @@ async fn edit_meal(
     }
     state
         .meals
-        .update_meal(meal_id, name, form.description.trim().to_owned())
+        .update_meal(
+            meal_id,
+            name,
+            form.description.trim().to_owned(),
+            parse_category_id(form.category_id),
+        )
         .await?;
     Ok(Redirect::to(&format!("/meals/{meal_id}")).into_response())
 }
@@ -853,6 +962,21 @@ async fn add_meal_to_list(
     list_fragment_response(&state, &user, list_id).await
 }
 
+async fn remove_meal_from_list(
+    State(state): State<AppState>,
+    user: CurrentUser,
+    Path((list_id, list_meal_id)): Path<(i64, i64)>,
+    LoggedForm(form): LoggedForm<CsrfForm>,
+) -> Result<Response, AppError> {
+    verify_csrf(&user, &form.csrf)?;
+    require_list(&state, list_id).await?;
+    state
+        .meals
+        .remove_meal_from_list(list_id, list_meal_id)
+        .await?;
+    list_fragment_response(&state, &user, list_id).await
+}
+
 async fn create_invitation(
     State(state): State<AppState>,
     user: CurrentUser,
@@ -1017,11 +1141,16 @@ async fn websocket_snapshot(
     let access = require_list(state, list_id).await?;
     let items = state.lists.items(list_id).await?;
     let categories = state.lists.categories().await?;
-    Ok(
-        views::live_list_fragments(&access, &items, &categories, &user.session.csrf_token)
-            .into_string()
-            + &views::presence_panel(presence, true).into_string(),
+    let list_meals = state.meals.list_meals_on_list(list_id).await?;
+    Ok(views::live_list_fragments(
+        &access,
+        &items,
+        &categories,
+        &list_meals,
+        &user.session.csrf_token,
     )
+    .into_string()
+        + &views::presence_panel(presence, true).into_string())
 }
 
 async fn websocket_list_update(
@@ -1032,10 +1161,15 @@ async fn websocket_list_update(
     let access = require_list(state, list_id).await?;
     let items = state.lists.items(list_id).await?;
     let categories = state.lists.categories().await?;
-    Ok(
-        views::live_list_fragments(&access, &items, &categories, &user.session.csrf_token)
-            .into_string(),
+    let list_meals = state.meals.list_meals_on_list(list_id).await?;
+    Ok(views::live_list_fragments(
+        &access,
+        &items,
+        &categories,
+        &list_meals,
+        &user.session.csrf_token,
     )
+    .into_string())
 }
 
 async fn list_fragment_response(
@@ -1046,12 +1180,18 @@ async fn list_fragment_response(
     let access = require_list(state, list_id).await?;
     let items = state.lists.items(list_id).await?;
     let categories = state.lists.categories().await?;
-    Ok(html_response(views::list_items_fragment(
+    let list_meals = state.meals.list_meals_on_list(list_id).await?;
+    Ok(html_response(PreEscaped(
+        views::list_items_fragment(
             &access,
             &items,
             &categories,
             &user.session.csrf_token,
             false,
+        )
+        .into_string()
+            + &views::list_meals_panel(&list_meals, list_id, &user.session.csrf_token, true)
+                .into_string(),
     )))
 }
 

src/main.rs

@@ -19,16 +19,17 @@ use tracing::{info, warn};
 use crate::http::{AppState, build_router};
 use crate::hub::InMemoryHub;
 use crate::ports::{
-    CategoryRepository, InvitationRepository, ItemRepository, ListRepository,
-    MealIngredientRepository, MealRepository, PasskeyRepository, PasswordHasher, RealtimeNotifier,
-    SessionRepository, TokenGenerator, UserRepository,
+    CategoryRepository, InvitationRepository, ItemRepository, ListMealRepository, ListRepository,
+    MealCategoryRepository, MealIngredientRepository, MealRepository, PasskeyRepository,
+    PasswordHasher, RealtimeNotifier, SessionRepository, TokenGenerator, UserRepository,
 };
 use crate::security::{Argon2PasswordHasher, RandomTokenGenerator};
 use crate::services::{AuthService, InvitationService, ListService, MealService, RegistrationMode};
 use crate::sqlite::{
     SqliteCategoryRepository, SqliteDatabase, SqliteInvitationRepository, SqliteItemRepository,
-    SqliteListRepository, SqliteMealIngredientRepository, SqliteMealRepository,
-    SqlitePasskeyRepository, SqliteSessionRepository, SqliteUserRepository,
+    SqliteListMealRepository, SqliteListRepository, SqliteMealCategoryRepository,
+    SqliteMealIngredientRepository, SqliteMealRepository, SqlitePasskeyRepository,
+    SqliteSessionRepository, SqliteUserRepository,
 };
 use crate::webauthn::{AppWebauthnConfig, WebAuthnService};
 
@@ -74,9 +75,11 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
     let lists: Arc<dyn ListRepository> = Arc::new(SqliteListRepository);
     let categories: Arc<dyn CategoryRepository> = Arc::new(SqliteCategoryRepository);
     let items: Arc<dyn ItemRepository> = Arc::new(SqliteItemRepository);
+    let list_meals: Arc<dyn ListMealRepository> = Arc::new(SqliteListMealRepository);
     let meals: Arc<dyn MealRepository> = Arc::new(SqliteMealRepository);
     let meal_ingredients: Arc<dyn MealIngredientRepository> =
         Arc::new(SqliteMealIngredientRepository);
+    let meal_categories: Arc<dyn MealCategoryRepository> = Arc::new(SqliteMealCategoryRepository);
     let invitations: Arc<dyn InvitationRepository> = Arc::new(SqliteInvitationRepository);
     let passkeys: Arc<dyn PasskeyRepository> = Arc::new(SqlitePasskeyRepository);
     let hasher: Arc<dyn PasswordHasher> = Arc::new(Argon2PasswordHasher);
@@ -107,8 +110,10 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
         db.clone(),
         Arc::clone(&meals),
         Arc::clone(&meal_ingredients),
+        Arc::clone(&meal_categories),
         Arc::clone(&lists),
         Arc::clone(&items),
+        Arc::clone(&list_meals),
         Arc::clone(&realtime),
     ));
 

src/ports.rs

@@ -2,8 +2,8 @@ use async_trait::async_trait;
 use sqlx::SqliteConnection;
 
 use crate::domain::{
-    Category, DomainResult, GroceryList, Item, Meal, MealIngredient, Passkey, PresenceUser,
-    SessionUser, User,
+    Category, DomainResult, GroceryList, Item, ListMeal, Meal, MealCategory, MealIngredient,
+    Passkey, PresenceUser, SessionUser, User,
 };
 
 /// Repositories take `&mut SqliteConnection` (which a `Transaction` derefs to),
@@ -29,6 +29,12 @@ pub trait UserRepository: Send + Sync {
         txn: &mut SqliteConnection,
         user_handle: Vec<u8>,
     ) -> DomainResult<Option<User>>;
+    async fn update_password_hash(
+        &self,
+        txn: &mut SqliteConnection,
+        user_id: i64,
+        password_hash: String,
+    ) -> DomainResult<()>;
     async fn has_users(&self, txn: &mut SqliteConnection) -> DomainResult<bool>;
 }
 
@@ -107,6 +113,9 @@ pub struct NewItem {
     pub quantity: String,
     pub note: String,
     pub category_id: Option<i64>,
+    /// When set, links this item to the `list_meals` row it came from, so the
+    /// item is removed together with that meal instance.
+    pub list_meal_id: Option<i64>,
 }
 
 #[async_trait]
@@ -152,6 +161,28 @@ pub trait ItemRepository: Send + Sync {
     ) -> DomainResult<i64>;
 }
 
+#[async_trait]
+pub trait ListMealRepository: Send + Sync {
+    async fn list_meals(
+        &self,
+        txn: &mut SqliteConnection,
+        list_id: i64,
+    ) -> DomainResult<Vec<ListMeal>>;
+    async fn add_meal(
+        &self,
+        txn: &mut SqliteConnection,
+        list_id: i64,
+        meal_id: i64,
+        name: String,
+    ) -> DomainResult<i64>;
+    async fn remove_meal(
+        &self,
+        txn: &mut SqliteConnection,
+        list_id: i64,
+        list_meal_id: i64,
+    ) -> DomainResult<i64>;
+}
+
 #[async_trait]
 pub trait InvitationRepository: Send + Sync {
     async fn create_invitation(
@@ -168,6 +199,21 @@ pub trait InvitationRepository: Send + Sync {
     ) -> DomainResult<()>;
 }
 
+#[async_trait]
+pub trait MealCategoryRepository: Send + Sync {
+    async fn meal_categories(&self, txn: &mut SqliteConnection) -> DomainResult<Vec<MealCategory>>;
+    async fn create_meal_category(
+        &self,
+        txn: &mut SqliteConnection,
+        name: String,
+    ) -> DomainResult<i64>;
+    async fn delete_meal_category(
+        &self,
+        txn: &mut SqliteConnection,
+        category_id: i64,
+    ) -> DomainResult<()>;
+}
+
 #[async_trait]
 pub trait MealRepository: Send + Sync {
     async fn create_meal(
@@ -175,6 +221,7 @@ pub trait MealRepository: Send + Sync {
         txn: &mut SqliteConnection,
         name: String,
         description: String,
+        category_id: Option<i64>,
     ) -> DomainResult<Meal>;
     async fn get_meal(
         &self,
@@ -188,6 +235,7 @@ pub trait MealRepository: Send + Sync {
         meal_id: i64,
         name: String,
         description: String,
+        category_id: Option<i64>,
     ) -> DomainResult<()>;
     async fn delete_meal(&self, txn: &mut SqliteConnection, meal_id: i64) -> DomainResult<()>;
 }

src/services.rs

@@ -1,10 +1,12 @@
 use std::sync::Arc;
 
-use crate::domain::{DomainError, DomainResult, GroceryList, Item, Meal, SessionUser, User};
+use crate::domain::{
+    DomainError, DomainResult, GroceryList, Item, ListMeal, Meal, MealCategory, SessionUser, User,
+};
 use crate::ports::{
-    CategoryRepository, InvitationRepository, ItemRepository, ListRepository,
-    MealIngredientRepository, MealRepository, NewItem, PasswordHasher, RealtimeNotifier,
-    SessionRepository, TokenGenerator, UserRepository,
+    CategoryRepository, InvitationRepository, ItemRepository, ListMealRepository, ListRepository,
+    MealCategoryRepository, MealIngredientRepository, MealRepository, NewItem, PasswordHasher,
+    RealtimeNotifier, SessionRepository, TokenGenerator, UserRepository,
 };
 use crate::sqlite::SqliteDatabase;
 
@@ -147,6 +149,22 @@ impl AuthService {
             })
             .await
     }
+
+    /// Replaces the user's password hash with a freshly hashed new password.
+    /// No current-password check is performed because the account page is
+    /// already authenticated and this app has no email capabilities.
+    pub async fn change_password(&self, user_id: i64, new_password: String) -> DomainResult<()> {
+        let users = Arc::clone(&self.users);
+        let hasher = Arc::clone(&self.hasher);
+        self.db
+            .run(move |txn| {
+                Box::pin(async move {
+                    let new_hash = hasher.hash(&new_password)?;
+                    users.update_password_hash(txn, user_id, new_hash).await
+                })
+            })
+            .await
+    }
 }
 
 pub struct ListService {
@@ -297,8 +315,10 @@ pub struct MealService {
     db: SqliteDatabase,
     meals: Arc<dyn MealRepository>,
     ingredients: Arc<dyn MealIngredientRepository>,
+    meal_categories: Arc<dyn MealCategoryRepository>,
     lists: Arc<dyn ListRepository>,
     items: Arc<dyn ItemRepository>,
+    list_meals: Arc<dyn ListMealRepository>,
     realtime: Arc<dyn RealtimeNotifier>,
 }
 
@@ -307,25 +327,36 @@ impl MealService {
         db: SqliteDatabase,
         meals: Arc<dyn MealRepository>,
         ingredients: Arc<dyn MealIngredientRepository>,
+        meal_categories: Arc<dyn MealCategoryRepository>,
         lists: Arc<dyn ListRepository>,
         items: Arc<dyn ItemRepository>,
+        list_meals: Arc<dyn ListMealRepository>,
         realtime: Arc<dyn RealtimeNotifier>,
     ) -> Self {
         Self {
             db,
             meals,
             ingredients,
+            meal_categories,
             lists,
             items,
+            list_meals,
             realtime,
         }
     }
 
-    pub async fn create_meal(&self, name: String, description: String) -> DomainResult<Meal> {
+    pub async fn create_meal(
+        &self,
+        name: String,
+        description: String,
+        category_id: Option<i64>,
+    ) -> DomainResult<Meal> {
         let meals = Arc::clone(&self.meals);
         self.db
             .run(move |txn| {
-                Box::pin(async move { meals.create_meal(txn, name, description).await })
+                Box::pin(
+                    async move { meals.create_meal(txn, name, description, category_id).await },
+                )
             })
             .await
     }
@@ -349,11 +380,43 @@ impl MealService {
         meal_id: i64,
         name: String,
         description: String,
+        category_id: Option<i64>,
     ) -> DomainResult<()> {
         let meals = Arc::clone(&self.meals);
         self.db
             .run(move |txn| {
-                Box::pin(async move { meals.update_meal(txn, meal_id, name, description).await })
+                Box::pin(async move {
+                    meals
+                        .update_meal(txn, meal_id, name, description, category_id)
+                        .await
+                })
+            })
+            .await
+    }
+
+    pub async fn list_meal_categories(&self) -> DomainResult<Vec<MealCategory>> {
+        let meal_categories = Arc::clone(&self.meal_categories);
+        self.db
+            .run(move |txn| Box::pin(async move { meal_categories.meal_categories(txn).await }))
+            .await
+    }
+
+    pub async fn create_meal_category(&self, name: String) -> DomainResult<i64> {
+        let meal_categories = Arc::clone(&self.meal_categories);
+        self.db
+            .run(move |txn| {
+                Box::pin(async move { meal_categories.create_meal_category(txn, name).await })
+            })
+            .await
+    }
+
+    pub async fn delete_meal_category(&self, category_id: i64) -> DomainResult<()> {
+        let meal_categories = Arc::clone(&self.meal_categories);
+        self.db
+            .run(move |txn| {
+                Box::pin(
+                    async move { meal_categories.delete_meal_category(txn, category_id).await },
+                )
             })
             .await
     }
@@ -428,11 +491,12 @@ impl MealService {
     }
 
     /// Expands a meal's ingredients into items on a list in one unit of work,
-    /// bumping the list revision exactly once.
+    /// recording the meal on the list and bumping the list revision exactly once.
     pub async fn add_meal_to_list(&self, meal_id: i64, list_id: i64) -> DomainResult<i64> {
         let meals = Arc::clone(&self.meals);
         let lists = Arc::clone(&self.lists);
         let items = Arc::clone(&self.items);
+        let list_meals = Arc::clone(&self.list_meals);
         let revision = self
             .db
             .run(move |txn| {
@@ -444,6 +508,9 @@ impl MealService {
                     if lists.get_list(txn, list_id).await?.is_none() {
                         return Err(DomainError::NotFound);
                     }
+                    let list_meal_id = list_meals
+                        .add_meal(txn, list_id, meal.id, meal.name.clone())
+                        .await?;
                     let new_items = meal
                         .ingredients
                         .into_iter()
@@ -452,6 +519,7 @@ impl MealService {
                             quantity: ingredient.quantity,
                             note: ingredient.note,
                             category_id: ingredient.category_id,
+                            list_meal_id: Some(list_meal_id),
                         })
                         .collect();
                     items.add_items_bulk(txn, list_id, new_items).await
@@ -461,6 +529,32 @@ impl MealService {
         self.realtime.publish_list_changed(list_id, revision).await;
         Ok(revision)
     }
+
+    /// Lists the meals that have been added to a list, most recent first.
+    pub async fn list_meals_on_list(&self, list_id: i64) -> DomainResult<Vec<ListMeal>> {
+        let list_meals = Arc::clone(&self.list_meals);
+        self.db
+            .run(move |txn| Box::pin(async move { list_meals.list_meals(txn, list_id).await }))
+            .await
+    }
+
+    /// Removes a meal instance from a list, deleting the items that came from it
+    /// and bumping the list revision exactly once.
+    pub async fn remove_meal_from_list(
+        &self,
+        list_id: i64,
+        list_meal_id: i64,
+    ) -> DomainResult<i64> {
+        let list_meals = Arc::clone(&self.list_meals);
+        let revision = self
+            .db
+            .run(move |txn| {
+                Box::pin(async move { list_meals.remove_meal(txn, list_id, list_meal_id).await })
+            })
+            .await?;
+        self.realtime.publish_list_changed(list_id, revision).await;
+        Ok(revision)
+    }
 }
 
 pub struct InvitationService {

src/sqlite.rs

@@ -7,13 +7,13 @@ use sha2::{Digest, Sha256};
 use sqlx::{Connection, Row, SqliteConnection, SqlitePool, sqlite::SqliteConnectOptions};
 
 use crate::domain::{
-    Category, DomainError, DomainResult, GroceryList, Item, Meal, MealIngredient, Passkey,
-    SessionUser, User,
+    Category, DomainError, DomainResult, GroceryList, Item, ListMeal, Meal, MealCategory,
+    MealIngredient, Passkey, SessionUser, User,
 };
 use crate::ports::{
-    CategoryRepository, InvitationRepository, ItemRepository, ListRepository,
-    MealIngredientRepository, MealRepository, NewItem, PasskeyRepository, SessionRepository,
-    UserRepository,
+    CategoryRepository, InvitationRepository, ItemRepository, ListMealRepository, ListRepository,
+    MealCategoryRepository, MealIngredientRepository, MealRepository, NewItem, PasskeyRepository,
+    SessionRepository, UserRepository,
 };
 
 /// The embedded SQL migrations, applied automatically on startup.
@@ -35,6 +35,7 @@ impl SqliteDatabase {
         let pool = SqlitePool::connect_with(options).await.map_err(db_error)?;
         MIGRATOR.run(&pool).await.map_err(migrate_error)?;
         seed_default_categories(&pool).await?;
+        seed_default_meal_categories(&pool).await?;
         Ok(Self { pool })
     }
 
@@ -61,6 +62,7 @@ impl SqliteDatabase {
         let pool = SqlitePool::connect_with(options).await.map_err(db_error)?;
         MIGRATOR.run(&pool).await.map_err(migrate_error)?;
         seed_default_categories(&pool).await?;
+        seed_default_meal_categories(&pool).await?;
         Ok(Self { pool })
     }
 }
@@ -117,6 +119,28 @@ async fn seed_default_categories(pool: &SqlitePool) -> DomainResult<()> {
     Ok(())
 }
 
+/// Inserts the default meal categories once, if the meal_categories table is empty.
+async fn seed_default_meal_categories(pool: &SqlitePool) -> DomainResult<()> {
+    let count: i64 = sqlx::query("SELECT COUNT(*) FROM meal_categories")
+        .fetch_one(pool)
+        .await
+        .map_err(db_error)?
+        .get(0);
+    if count > 0 {
+        return Ok(());
+    }
+    for (position, category_name) in DEFAULT_MEAL_CATEGORIES.iter().enumerate() {
+        sqlx::query("INSERT INTO meal_categories (name, position, created_at) VALUES (?1, ?2, ?3)")
+            .bind(category_name)
+            .bind(position as i64)
+            .bind(now())
+            .execute(pool)
+            .await
+            .map_err(db_error)?;
+    }
+    Ok(())
+}
+
 #[derive(Clone, Copy)]
 pub struct SqliteUserRepository;
 
@@ -209,6 +233,21 @@ impl UserRepository for SqliteUserRepository {
         }))
     }
 
+    async fn update_password_hash(
+        &self,
+        txn: &mut SqliteConnection,
+        user_id: i64,
+        password_hash: String,
+    ) -> DomainResult<()> {
+        sqlx::query("UPDATE users SET password_hash = ?1 WHERE id = ?2")
+            .bind(&password_hash)
+            .bind(user_id)
+            .execute(&mut *txn)
+            .await
+            .map_err(db_error)?;
+        Ok(())
+    }
+
     async fn has_users(&self, txn: &mut SqliteConnection) -> DomainResult<bool> {
         let row = sqlx::query("SELECT EXISTS(SELECT 1 FROM users)")
             .fetch_one(&mut *txn)
@@ -601,8 +640,8 @@ impl ItemRepository for SqliteItemRepository {
             ensure_category(txn, item.category_id).await?;
             sqlx::query(
                 "INSERT INTO items
-                 (list_id, name, quantity, note, category_id, checked, version, position, created_at, updated_at)
-                 VALUES (?1, ?2, ?3, ?4, ?5, 0, 1, ?6, ?7, ?7)",
+                 (list_id, name, quantity, note, category_id, checked, version, position, list_meal_id, created_at, updated_at)
+                 VALUES (?1, ?2, ?3, ?4, ?5, 0, 1, ?6, ?7, ?8, ?8)",
             )
             .bind(list_id)
             .bind(&item.name)
@@ -610,6 +649,7 @@ impl ItemRepository for SqliteItemRepository {
             .bind(&item.note)
             .bind(item.category_id)
             .bind(position)
+            .bind(item.list_meal_id)
             .bind(now)
             .execute(&mut *txn)
             .await
@@ -699,6 +739,83 @@ impl ItemRepository for SqliteItemRepository {
     }
 }
 
+#[derive(Clone, Copy)]
+pub struct SqliteListMealRepository;
+
+#[async_trait]
+impl ListMealRepository for SqliteListMealRepository {
+    async fn list_meals(
+        &self,
+        txn: &mut SqliteConnection,
+        list_id: i64,
+    ) -> DomainResult<Vec<ListMeal>> {
+        let rows = sqlx::query(
+            "SELECT id, meal_id, name, created_at
+             FROM list_meals
+             WHERE list_id = ?1
+             ORDER BY created_at ASC, id ASC",
+        )
+        .bind(list_id)
+        .fetch_all(&mut *txn)
+        .await
+        .map_err(db_error)?;
+        Ok(rows
+            .into_iter()
+            .map(|row| ListMeal {
+                id: row.get(0),
+                meal_id: row.get(1),
+                name: row.get(2),
+                created_at: row.get(3),
+            })
+            .collect())
+    }
+
+    async fn add_meal(
+        &self,
+        txn: &mut SqliteConnection,
+        list_id: i64,
+        meal_id: i64,
+        name: String,
+    ) -> DomainResult<i64> {
+        sqlx::query(
+            "INSERT INTO list_meals (list_id, meal_id, name, created_at)
+             VALUES (?1, ?2, ?3, ?4)",
+        )
+        .bind(list_id)
+        .bind(meal_id)
+        .bind(&name)
+        .bind(now())
+        .execute(&mut *txn)
+        .await
+        .map_err(db_error)?;
+        let id = sqlx::query("SELECT last_insert_rowid()")
+            .fetch_one(&mut *txn)
+            .await
+            .map_err(db_error)?
+            .get::<i64, _>(0);
+        Ok(id)
+    }
+
+    async fn remove_meal(
+        &self,
+        txn: &mut SqliteConnection,
+        list_id: i64,
+        list_meal_id: i64,
+    ) -> DomainResult<i64> {
+        let changed = sqlx::query("DELETE FROM list_meals WHERE id = ?1 AND list_id = ?2")
+            .bind(list_meal_id)
+            .bind(list_id)
+            .execute(&mut *txn)
+            .await
+            .map_err(db_error)?
+            .rows_affected();
+        if changed == 0 {
+            return Err(DomainError::NotFound);
+        }
+        bump_revision(txn, list_id).await
+    }
+}
+
 #[derive(Clone, Copy)]
 pub struct SqliteInvitationRepository;
 
@@ -764,6 +881,79 @@ impl InvitationRepository for SqliteInvitationRepository {
     }
 }
 
+#[derive(Clone, Copy)]
+pub struct SqliteMealCategoryRepository;
+
+#[async_trait]
+impl MealCategoryRepository for SqliteMealCategoryRepository {
+    async fn meal_categories(&self, txn: &mut SqliteConnection) -> DomainResult<Vec<MealCategory>> {
+        let rows = sqlx::query(
+            "SELECT id, name
+             FROM meal_categories
+             ORDER BY position ASC, name COLLATE NOCASE ASC",
+        )
+        .fetch_all(&mut *txn)
+        .await
+        .map_err(db_error)?;
+        Ok(rows
+            .into_iter()
+            .map(|row| MealCategory {
+                id: row.get(0),
+                name: row.get(1),
+            })
+            .collect())
+    }
+
+    async fn create_meal_category(
+        &self,
+        txn: &mut SqliteConnection,
+        name: String,
+    ) -> DomainResult<i64> {
+        let position: i64 =
+            sqlx::query("SELECT COALESCE(MAX(position), -1) + 1 FROM meal_categories")
+                .fetch_one(&mut *txn)
+                .await
+                .map_err(db_error)?
+                .get(0);
+        let result = sqlx::query(
+            "INSERT INTO meal_categories (name, position, created_at)
+             VALUES (?1, ?2, ?3)",
+        )
+        .bind(&name)
+        .bind(position)
+        .bind(now())
+        .execute(&mut *txn)
+        .await;
+        match result {
+            Ok(_) => {}
+            Err(error) if is_unique_violation(&error) => return Err(DomainError::Conflict),
+            Err(error) => return Err(db_error(error)),
+        }
+        Ok(sqlx::query("SELECT last_insert_rowid()")
+            .fetch_one(&mut *txn)
+            .await
+            .map_err(db_error)?
+            .get::<i64, _>(0))
+    }
+
+    async fn delete_meal_category(
+        &self,
+        txn: &mut SqliteConnection,
+        category_id: i64,
+    ) -> DomainResult<()> {
+        let changed = sqlx::query("DELETE FROM meal_categories WHERE id = ?1")
+            .bind(category_id)
+            .execute(&mut *txn)
+            .await
+            .map_err(db_error)?
+            .rows_affected();
+        if changed == 0 {
+            return Err(DomainError::NotFound);
+        }
+        Ok(())
+    }
+}
+
 #[derive(Clone, Copy)]
 pub struct SqliteMealRepository;
 
@@ -774,14 +964,16 @@ impl MealRepository for SqliteMealRepository {
         txn: &mut SqliteConnection,
         name: String,
         description: String,
+        category_id: Option<i64>,
     ) -> DomainResult<Meal> {
         let now = now();
         sqlx::query(
-            "INSERT INTO meals (name, description, created_at, updated_at)
-             VALUES (?1, ?2, ?3, ?3)",
+            "INSERT INTO meals (name, description, category_id, created_at, updated_at)
+             VALUES (?1, ?2, ?3, ?4, ?4)",
         )
         .bind(&name)
         .bind(&description)
+        .bind(category_id)
         .bind(now)
         .execute(&mut *txn)
         .await
@@ -795,6 +987,7 @@ impl MealRepository for SqliteMealRepository {
             id,
             name,
             description,
+            category_id,
             ingredients: Vec::new(),
         })
     }
@@ -805,7 +998,7 @@ impl MealRepository for SqliteMealRepository {
         meal_id: i64,
     ) -> DomainResult<Option<Meal>> {
         let row = sqlx::query(
-            "SELECT id, name, description
+            "SELECT id, name, description, category_id
              FROM meals
              WHERE id = ?1",
         )
@@ -820,6 +1013,7 @@ impl MealRepository for SqliteMealRepository {
             id: row.get(0),
             name: row.get(1),
             description: row.get(2),
+            category_id: row.get(3),
             ingredients: Vec::new(),
         };
         let ingredients = SqliteMealIngredientRepository
@@ -833,7 +1027,7 @@ impl MealRepository for SqliteMealRepository {
 
     async fn list_meals(&self, txn: &mut SqliteConnection) -> DomainResult<Vec<Meal>> {
         let rows = sqlx::query(
-            "SELECT id, name, description
+            "SELECT id, name, description, category_id
              FROM meals
              ORDER BY name COLLATE NOCASE ASC",
         )
@@ -846,6 +1040,7 @@ impl MealRepository for SqliteMealRepository {
                 id: row.get(0),
                 name: row.get(1),
                 description: row.get(2),
+                category_id: row.get(3),
                 ingredients: Vec::new(),
             };
             let ingredients = SqliteMealIngredientRepository
@@ -865,14 +1060,16 @@ impl MealRepository for SqliteMealRepository {
         meal_id: i64,
         name: String,
         description: String,
+        category_id: Option<i64>,
     ) -> DomainResult<()> {
         let changed = sqlx::query(
             "UPDATE meals
-             SET name = ?1, description = ?2, updated_at = ?3
-             WHERE id = ?4",
+             SET name = ?1, description = ?2, category_id = ?3, updated_at = ?4
+             WHERE id = ?5",
         )
         .bind(&name)
         .bind(&description)
+        .bind(category_id)
         .bind(now())
         .bind(meal_id)
         .execute(&mut *txn)
@@ -1061,6 +1258,9 @@ const DEFAULT_CATEGORIES: &[&str] = &[
     "Household",
 ];
 
+const DEFAULT_MEAL_CATEGORIES: &[&str] =
+    &["Beef", "Chicken", "Pasta", "Sandwiches", "Salads", "Soups"];
+
 fn hash_secret(secret: &str) -> Vec<u8> {
     let mut hasher = Sha256::new();
     hasher.update(secret.as_bytes());
@@ -1464,6 +1664,119 @@ mod tests {
         assert!(matches!(result, Err(DomainError::Conflict)));
     }
 
+    // ---- MealCategoryRepository ----
+
+    async fn get_meal_categories(db: &SqliteDatabase) -> Vec<MealCategory> {
+        let categories = SqliteMealCategoryRepository;
+        db.run(move |txn| {
+            let categories = categories.clone();
+            Box::pin(async move { categories.meal_categories(txn).await })
+        })
+        .await
+        .unwrap()
+    }
+
+    #[tokio::test]
+    async fn meal_categories_are_seeded_with_defaults() {
+        let db = setup().await;
+        let categories = get_meal_categories(&db).await;
+        let names = categories
+            .iter()
+            .map(|c| c.name.as_str())
+            .collect::<Vec<_>>();
+        assert!(names.contains(&"Beef"));
+        assert!(names.contains(&"Chicken"));
+        assert!(names.contains(&"Pasta"));
+        assert!(names.contains(&"Sandwiches"));
+        assert!(names.contains(&"Salads"));
+        assert!(names.contains(&"Soups"));
+    }
+
+    #[tokio::test]
+    async fn create_meal_category_returns_id_and_lists() {
+        let db = setup().await;
+        let categories = SqliteMealCategoryRepository;
+        let id = db
+            .run(move |txn| {
+                let categories = categories.clone();
+                Box::pin(async move {
+                    categories
+                        .create_meal_category(txn, "Breakfast".into())
+                        .await
+                })
+            })
+            .await
+            .unwrap();
+        assert!(id > 0);
+        let cats = get_meal_categories(&db).await;
+        assert!(cats.iter().any(|c| c.id == id && c.name == "Breakfast"));
+    }
+
+    #[tokio::test]
+    async fn create_duplicate_meal_category_conflicts() {
+        let db = setup().await;
+        let categories = SqliteMealCategoryRepository;
+        let result = db
+            .run(move |txn| {
+                let categories = categories.clone();
+                Box::pin(async move { categories.create_meal_category(txn, "Beef".into()).await })
+            })
+            .await;
+        assert!(matches!(result, Err(DomainError::Conflict)));
+    }
+
+    #[tokio::test]
+    async fn delete_meal_category_cascades_to_null_on_meals() {
+        let db = setup().await;
+        let categories = SqliteMealCategoryRepository;
+        let category_id = db
+            .run(move |txn| {
+                let categories = categories.clone();
+                Box::pin(async move {
+                    categories
+                        .create_meal_category(txn, "Breakfast".into())
+                        .await
+                })
+            })
+            .await
+            .unwrap();
+        let meal = create_meal(&db, "Pancakes").await;
+        let meals = SqliteMealRepository;
+        db.run(move |txn| {
+            let meals = meals.clone();
+            Box::pin(async move {
+                meals
+                    .update_meal(
+                        txn,
+                        meal.id,
+                        "Pancakes".into(),
+                        String::new(),
+                        Some(category_id),
+                    )
+                    .await
+            })
+        })
+        .await
+        .unwrap();
+
+        db.run(move |txn| {
+            let categories = categories.clone();
+            Box::pin(async move { categories.delete_meal_category(txn, category_id).await })
+        })
+        .await
+        .unwrap();
+
+        let fetched = db
+            .run(move |txn| {
+                let meals = meals.clone();
+                Box::pin(async move { meals.get_meal(txn, meal.id).await })
+            })
+            .await
+            .unwrap()
+            .unwrap();
+        assert_eq!(fetched.category_id, None);
+    }
+
     // ---- ItemRepository ----
 
     #[tokio::test]
@@ -1536,12 +1849,14 @@ mod tests {
                 quantity: "500g".into(),
                 note: String::new(),
                 category_id: None,
+                list_meal_id: None,
             },
             NewItem {
                 name: "Tomato".into(),
                 quantity: "2".into(),
                 note: String::new(),
                 category_id: None,
+                list_meal_id: None,
             },
         ];
         let revision = db
@@ -1813,7 +2128,7 @@ mod tests {
         let name = name.to_owned();
         db.run(move |txn| {
             let meals = meals.clone();
-            Box::pin(async move { meals.create_meal(txn, name, String::new()).await })
+            Box::pin(async move { meals.create_meal(txn, name, String::new(), None).await })
         })
         .await
         .unwrap()
@@ -1931,7 +2246,13 @@ mod tests {
             let meals = meals.clone();
             Box::pin(async move {
                 meals
-                    .update_meal(txn, meal.id, "Pasta al pomodoro".into(), "desc".into())
+                    .update_meal(
+                        txn,
+                        meal.id,
+                        "Pasta al pomodoro".into(),
+                        "desc".into(),
+                        None,
+                    )
                     .await
             })
         })
@@ -1958,7 +2279,7 @@ mod tests {
                 let meals = meals.clone();
                 Box::pin(async move {
                     meals
-                        .update_meal(txn, 9999, "X".into(), String::new())
+                        .update_meal(txn, 9999, "X".into(), String::new(), None)
                         .await
                 })
             })
@@ -2101,6 +2422,118 @@ mod tests {
         assert!(matches!(result, Err(DomainError::NotFound)));
     }
 
+    // ---- ListMealRepository ----
+
+    async fn add_meal_to_list(db: &SqliteDatabase, list_id: i64, meal: &Meal) -> ListMeal {
+        let list_meals = SqliteListMealRepository;
+        let name = meal.name.clone();
+        let meal_id = meal.id;
+        let id = db
+            .run(move |txn| {
+                let list_meals = list_meals.clone();
+                Box::pin(async move { list_meals.add_meal(txn, list_id, meal_id, name).await })
+            })
+            .await
+            .unwrap();
+        ListMeal {
+            id,
+            meal_id: Some(meal.id),
+            name: meal.name.clone(),
+            created_at: 0,
+        }
+    }
+
+    #[tokio::test]
+    async fn list_meals_returns_meals_added_to_a_list() {
+        let db = setup().await;
+        let list = create_list(&db, "Weekly shop").await;
+        let meal = create_meal(&db, "Pasta").await;
+        add_meal_to_list(&db, list.id, &meal).await;
+
+        let list_meals = SqliteListMealRepository;
+        let meals = db
+            .run(move |txn| {
+                let list_meals = list_meals.clone();
+                Box::pin(async move { list_meals.list_meals(txn, list.id).await })
+            })
+            .await
+            .unwrap();
+        assert_eq!(meals.len(), 1);
+        assert_eq!(meals[0].name, "Pasta");
+        assert_eq!(meals[0].meal_id, Some(meal.id));
+    }
+
+    #[tokio::test]
+    async fn removing_a_meal_deletes_its_items_and_bumps_revision() {
+        let db = setup().await;
+        let list = create_list(&db, "Weekly shop").await;
+        let meal = create_meal(&db, "Pasta").await;
+        add_ingredient(&db, meal.id, "Penne", None).await;
+        add_ingredient(&db, meal.id, "Tomato", None).await;
+        let list_meal = add_meal_to_list(&db, list.id, &meal).await;
+
+        let items = SqliteItemRepository;
+        let ingredients = SqliteMealIngredientRepository;
+        let ingredient_rows = db
+            .run(move |txn| {
+                let ingredients = ingredients.clone();
+                Box::pin(async move { ingredients.ingredients_for_meal(txn, meal.id).await })
+            })
+            .await
+            .unwrap();
+        let new_items = ingredient_rows
+            .into_iter()
+            .map(|ingredient| NewItem {
+                name: ingredient.name,
+                quantity: ingredient.quantity,
+                note: ingredient.note,
+                category_id: ingredient.category_id,
+                list_meal_id: Some(list_meal.id),
+            })
+            .collect();
+        db.run(move |txn| {
+            let items = items.clone();
+            Box::pin(async move { items.add_items_bulk(txn, list.id, new_items).await })
+        })
+        .await
+        .unwrap();
+        assert_eq!(get_items(&db, list.id).await.len(), 2);
+
+        let list_meals = SqliteListMealRepository;
+        let revision = db
+            .run(move |txn| {
+                let list_meals = list_meals.clone();
+                Box::pin(async move { list_meals.remove_meal(txn, list.id, list_meal.id).await })
+            })
+            .await
+            .unwrap();
+        assert_eq!(revision, 2);
+
+        let meals = db
+            .run(move |txn| {
+                let list_meals = list_meals.clone();
+                Box::pin(async move { list_meals.list_meals(txn, list.id).await })
+            })
+            .await
+            .unwrap();
+        assert!(meals.is_empty());
+        assert!(get_items(&db, list.id).await.is_empty());
+    }
+
+    #[tokio::test]
+    async fn removing_an_unknown_meal_from_a_list_fails() {
+        let db = setup().await;
+        let list = create_list(&db, "Weekly shop").await;
+        let list_meals = SqliteListMealRepository;
+        let result = db
+            .run(move |txn| {
+                let list_meals = list_meals.clone();
+                Box::pin(async move { list_meals.remove_meal(txn, list.id, 9999).await })
+            })
+            .await;
+        assert!(matches!(result, Err(DomainError::NotFound)));
+    }
+
     // ---- PasskeyRepository ----
 
     #[tokio::test]

src/views.rs

@@ -3,7 +3,9 @@ use pulldown_cmark::{Options, Parser, html as cmark_html};
 
 use crate::{
     domain::PresenceUser,
-    domain::{Category, GroceryList, Item, Meal, MealIngredient, Passkey, User},
+    domain::{
+        Category, GroceryList, Item, ListMeal, Meal, MealCategory, MealIngredient, Passkey, User,
+    },
 };
 
 pub fn login_page(error: Option<&str>, invite: Option<&str>) -> Markup {
@@ -25,13 +27,17 @@ pub fn login_page(error: Option<&str>, invite: Option<&str>) -> Markup {
                     label for="email" { "Email" }
                     input id="email" name="email" type="email" autocomplete="email" autofocus;
                     label for="password" { "Password" }
+                    div class="password-field" {
                         input id="password" name="password" type="password" autocomplete="current-password" required;
+                        button class="password-toggle" type="button" data-toggle-for="password" aria-label="Show password" { "Show" }
+                    }
                     button class="button button-primary" type="submit" { "Sign in" }
                 }
                 div class="auth-divider" { span { "or" } }
                 button id="passkey-login" class="button button-secondary" type="button" { "Sign in with a passkey" }
                 p class="auth-switch" { "Need an account? " a href="/register" { "Create one" } }
             }
+            script src="/static/password-toggle.js" {}
             script src="/static/passkey-login.js" {}
         },
     )
@@ -58,11 +64,15 @@ pub fn register_page(error: Option<&str>, invite: Option<&str>) -> Markup {
                     label for="email" { "Email" }
                     input id="email" name="email" type="email" autocomplete="email" required;
                     label for="password" { "Password" }
+                    div class="password-field" {
                         input id="password" name="password" type="password" autocomplete="new-password" required;
+                        button class="password-toggle" type="button" data-toggle-for="password" aria-label="Show password" { "Show" }
+                    }
                     button class="button button-primary" type="submit" { "Create account" }
                 }
                 p class="auth-switch" { "Already have an account? " a href="/login" { "Sign in" } }
             }
+            script src="/static/password-toggle.js" {}
         },
     )
 }
@@ -82,7 +92,13 @@ pub fn registration_closed_page() -> Markup {
     )
 }
 
-pub fn account_page(user: &User, passkeys: &[Passkey], csrf_token: &str) -> Markup {
+pub fn account_page(
+    user: &User,
+    passkeys: &[Passkey],
+    csrf_token: &str,
+    password_error: Option<&str>,
+    password_success: bool,
+) -> Markup {
     page(
         "Account",
         Some(user),
@@ -121,13 +137,45 @@ pub fn account_page(user: &User, passkeys: &[Passkey], csrf_token: &str) -> Mark
                     }
                     button id="add-passkey" class="button button-primary" type="button" data-csrf=(csrf_token) { "Add a passkey" }
                 }
+                section class="panel" {
+                    div class="panel-heading" {
+                        h2 { "Password" }
                     }
+                    p { "Set a new password for your account." }
+                    @if let Some(error) = password_error {
+                        div class="alert alert-error" role="alert" { (error) }
+                    }
+                    @if password_success {
+                        div class="alert alert-success" role="alert" { "Your password has been updated." }
+                    }
+                    form method="post" action="/account/password" class="stack" {
+                        input type="hidden" name="csrf" value=(csrf_token);
+                        label for="new-password" { "New password" }
+                        div class="password-field" {
+                            input id="new-password" name="new_password" type="password" autocomplete="new-password" required;
+                            button class="password-toggle" type="button" data-toggle-for="new-password" aria-label="Show password" { "Show" }
+                        }
+                        label for="confirm-password" { "Confirm new password" }
+                        div class="password-field" {
+                            input id="confirm-password" name="confirm_password" type="password" autocomplete="new-password" required;
+                            button class="password-toggle" type="button" data-toggle-for="confirm-password" aria-label="Show password" { "Show" }
+                        }
+                        button class="button button-primary" type="submit" { "Update password" }
+                    }
+                }
+            }
+            script src="/static/password-toggle.js" {}
             script src="/static/passkey-register.js" {}
         },
     )
 }
 
-pub fn lists_page(user: &User, lists: &[GroceryList], csrf_token: &str) -> Markup {
+pub fn lists_page(
+    user: &User,
+    lists: &[GroceryList],
+    categories: &[Category],
+    csrf_token: &str,
+) -> Markup {
     page(
         "Your lists",
         Some(user),
@@ -135,7 +183,7 @@ pub fn lists_page(user: &User, lists: &[GroceryList], csrf_token: &str) -> Marku
             div class="page-heading" {
                 div {
                     p class="eyebrow" { "SHARED LISTS" }
-                    h1 { "Grocery lists" }
+                    h1 class="page-title" { "Grocery lists" }
                     p class="lede" { "Everything you need, in one place." }
                 }
             }
@@ -174,6 +222,7 @@ pub fn lists_page(user: &User, lists: &[GroceryList], csrf_token: &str) -> Marku
                         button class="button button-primary" type="submit" { "Create list" }
                     }
                 }
+                (categories_panel(categories, csrf_token, false))
                 section id="sharing" class="panel sharing-panel" {
                     div class="panel-heading" { h2 { "Invite someone" } }
                     p { "Create a one-time invite link so a new person can join." }
@@ -193,7 +242,12 @@ pub fn lists_page(user: &User, lists: &[GroceryList], csrf_token: &str) -> Marku
     )
 }
 
-pub fn meals_page(user: &User, meals: &[Meal]) -> Markup {
+pub fn meals_page(
+    user: &User,
+    meals: &[Meal],
+    meal_categories: &[MealCategory],
+    csrf_token: &str,
+) -> Markup {
     page(
         "Meals",
         Some(user),
@@ -201,11 +255,18 @@ pub fn meals_page(user: &User, meals: &[Meal]) -> Markup {
             div class="page-heading" {
                 div {
                     p class="eyebrow" { "MEAL LIBRARY" }
-                    h1 { "Meals" }
+                    h1 class="page-title" { "Meals" }
                     p class="lede" { "Save a meal and add its ingredients to any list." }
                 }
                 a class="button button-primary" href="/meals/new" { "New meal" }
             }
+            @if meals.is_empty() {
+                div class="empty-state" {
+                    div class="empty-mark" { "🍽" }
+                    h3 { "No meals yet" }
+                    p { "Create a meal to reuse its ingredients across your lists." }
+                }
+            }
             div class="dashboard-grid" {
                 section class="panel" {
                     div class="panel-heading" {
@@ -213,14 +274,15 @@ pub fn meals_page(user: &User, meals: &[Meal]) -> Markup {
                         span class="count-badge" { (meals.len()) }
                     }
                     @if meals.is_empty() {
-                        div class="empty-state" {
-                            div class="empty-mark" { "🍽" }
-                            h3 { "No meals yet" }
-                            p { "Create a meal to reuse its ingredients across your lists." }
-                        }
+                        p class="muted" { "Create a meal to get started." }
                     } @else {
+                        @for (category_name, category_meals) in meal_groups(meals, meal_categories) {
+                            div class="category-group" {
+                                div class="category-heading" {
+                                    h3 { (category_name) " (" (category_meals.len()) ")" }
+                                }
                                 div class="list-cards" {
-                            @for meal in meals {
+                                    @for meal in category_meals {
                                         a class="list-card" href=(format!("/meals/{}", meal.id)) {
                                             span class="list-card-icon" { "🍽" }
                                             span class="list-card-copy" {
@@ -234,11 +296,81 @@ pub fn meals_page(user: &User, meals: &[Meal]) -> Markup {
                             }
                         }
                     }
+                }
+                aside class="side-column" {
+                    section class="panel categories-panel" {
+                        div class="panel-heading" {
+                            h2 { "Meal categories" }
+                        }
+                        p { "Organize meals by type." }
+                        form method="post" action="/meals/categories" class="category-form" {
+                            input type="hidden" name="csrf" value=(csrf_token);
+                            input name="name" type="text" maxlength="60" placeholder="New category" required;
+                            button class="button button-small button-secondary" type="submit" { "Add" }
+                        }
+                        @if meal_categories.is_empty() {
+                            p class="muted category-empty" { "No categories yet." }
+                        } @else {
+                            div class="meal-category-list" {
+                                @for category in meal_categories {
+                                    div class="meal-category-row" {
+                                        span class="meal-category-name" { (category.name) }
+                                        form method="post" action=(format!("/meals/categories/{}/delete", category.id)) {
+                                            input type="hidden" name="csrf" value=(csrf_token);
+                                            button class="meal-category-delete" type="submit" aria-label=(format!("Delete {}", category.name)) { "✕" }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         },
     )
 }
 
-pub fn meal_picker(meals: &[Meal], list_id: i64, csrf_token: &str) -> Markup {
+fn meal_groups<'a>(
+    meals: &'a [Meal],
+    meal_categories: &[MealCategory],
+) -> Vec<(String, Vec<&'a Meal>)> {
+    let mut groups = Vec::new();
+    for category in meal_categories {
+        let in_category = meals
+            .iter()
+            .filter(|meal| meal.category_id == Some(category.id))
+            .collect::<Vec<_>>();
+        if !in_category.is_empty() {
+            groups.push((category.name.clone(), in_category));
+        }
+    }
+
+    let uncategorized = meals
+        .iter()
+        .filter(|meal| meal.category_id.is_none())
+        .collect::<Vec<_>>();
+    if !uncategorized.is_empty() {
+        groups.push(("Uncategorized".into(), uncategorized));
+    }
+    groups
+}
+
+/// Returns the display name of a meal's category, if it has one.
+fn meal_category_name(meal: &Meal, meal_categories: &[MealCategory]) -> Option<String> {
+    meal.category_id.and_then(|id| {
+        meal_categories
+            .iter()
+            .find(|category| category.id == id)
+            .map(|category| category.name.clone())
+    })
+}
+
+pub fn meal_picker(
+    meals: &[Meal],
+    meal_categories: &[MealCategory],
+    list_id: i64,
+    csrf_token: &str,
+) -> Markup {
     html! {
         div class="meal-picker-backdrop" onclick="if (event.target === this) this.remove()" {
             div class="meal-picker-modal" role="dialog" aria-modal="true" aria-label="Add a meal" {
@@ -258,7 +390,12 @@ pub fn meal_picker(meals: &[Meal], list_id: i64, csrf_token: &str) -> Markup {
                     }
                 } @else {
                     div class="meal-picker-list" {
-                        @for meal in meals {
+                        @for (category_name, category_meals) in meal_groups(meals, meal_categories) {
+                            div class="category-group" {
+                                div class="category-heading" {
+                                    h3 { (category_name) }
+                                }
+                                @for meal in category_meals {
                                     form
                                         hx-post=(format!("/lists/{}/add-meal", list_id))
                                         hx-target="#list-items"
@@ -283,17 +420,31 @@ pub fn meal_picker(meals: &[Meal], list_id: i64, csrf_token: &str) -> Markup {
                     }
                 }
             }
+        }
+    }
 }
 
-pub fn meal_form_page(user: &User, meal: Option<&Meal>, csrf_token: &str) -> Markup {
-    let (title, action, name, description) = match meal {
+pub fn meal_form_page(
+    user: &User,
+    meal: Option<&Meal>,
+    meal_categories: &[MealCategory],
+    csrf_token: &str,
+) -> Markup {
+    let (title, action, name, description, category_id) = match meal {
         Some(meal) => (
             "Edit meal",
             format!("/meals/{}/edit", meal.id),
             meal.name.clone(),
             meal.description.clone(),
+            meal.category_id,
+        ),
+        None => (
+            "New meal",
+            "/meals".into(),
+            String::new(),
+            String::new(),
+            None,
         ),
-        None => ("New meal", "/meals".into(), String::new(), String::new()),
     };
     page(
         title,
@@ -308,6 +459,21 @@ pub fn meal_form_page(user: &User, meal: Option<&Meal>, csrf_token: &str) -> Mar
                     input type="hidden" name="csrf" value=(csrf_token);
                     label for="meal-name" { "Name" }
                     input id="meal-name" name="name" type="text" maxlength="120" value=(name) required;
+                    label for="meal-category" { "Category" }
+                    select id="meal-category" name="category_id" {
+                        @if category_id.is_none() {
+                            option value="" selected { "Uncategorized" }
+                        } @else {
+                            option value="" { "Uncategorized" }
+                        }
+                        @for category in meal_categories {
+                            @if category_id == Some(category.id) {
+                                option value=(category.id) selected { (category.name) }
+                            } @else {
+                                option value=(category.id) { (category.name) }
+                            }
+                        }
+                    }
                     label for="meal-description" { "Description (markdown)" }
                     textarea id="meal-description" name="description" rows="8" { (description) }
                     button class="button button-primary" type="submit" { "Save meal" }
@@ -320,7 +486,13 @@ pub fn meal_form_page(user: &User, meal: Option<&Meal>, csrf_token: &str) -> Mar
     )
 }
 
-pub fn meal_page(user: &User, meal: &Meal, categories: &[Category], csrf_token: &str) -> Markup {
+pub fn meal_page(
+    user: &User,
+    meal: &Meal,
+    categories: &[Category],
+    meal_categories: &[MealCategory],
+    csrf_token: &str,
+) -> Markup {
     page(
         &meal.name,
         Some(user),
@@ -345,6 +517,21 @@ pub fn meal_page(user: &User, meal: &Meal, categories: &[Category], csrf_token:
                         input type="hidden" name="csrf" value=(csrf_token);
                         label { "Name" }
                         input id="meal-edit-name" name="name" value=(meal.name) maxlength="120" required;
+                        label { "Category" }
+                        select id="meal-edit-category" name="category_id" {
+                            @if meal.category_id.is_none() {
+                                option value="" selected { "Uncategorized" }
+                            } @else {
+                                option value="" { "Uncategorized" }
+                            }
+                            @for category in meal_categories {
+                                @if meal.category_id == Some(category.id) {
+                                    option value=(category.id) selected { (category.name) }
+                                } @else {
+                                    option value=(category.id) { (category.name) }
+                                }
+                            }
+                        }
                         label { "Description (markdown)" }
                         textarea id="meal-edit-description" name="description" rows="8" { (meal.description) }
                         button id="meal-edit-save" class="button button-primary" type="submit" { "Save meal" }
@@ -356,7 +543,7 @@ pub fn meal_page(user: &User, meal: &Meal, categories: &[Category], csrf_token:
                     div class="list-heading" {
                         div {
                             p class="eyebrow" { "MEAL" }
-                            h1 { (meal.name) }
+                            h1 { (meal.name) @if let Some(category_name) = meal_category_name(meal, meal_categories) { span class="meal-category-label" { "(" (category_name) ")" } } }
                         }
                     }
                     @if meal.description.is_empty() {
@@ -364,7 +551,7 @@ pub fn meal_page(user: &User, meal: &Meal, categories: &[Category], csrf_token:
                     } @else {
                         div class="markdown" { (render_markdown(&meal.description)) }
                     }
-                    h2 class="category-heading" { "Ingredients" }
+                    hr class="ingredients-divider" {}
                     @if meal.ingredients.is_empty() {
                         p class="muted" { "No ingredients yet." }
                     } @else {
@@ -382,14 +569,14 @@ pub fn meal_page(user: &User, meal: &Meal, categories: &[Category], csrf_token:
                             input type="hidden" name="csrf" value=(csrf_token);
                             label { "Name" }
                             input id="ingredient-name" name="name" type="text" maxlength="120" required;
-                            label { "Quantity" }
-                            input id="ingredient-quantity" name="quantity" type="text" maxlength="40";
-                            label { "Note" }
-                            input id="ingredient-note" name="note" type="text" maxlength="120";
                             label { "Category" }
                             select id="ingredient-category" name="category_id" {
                                 (category_options(categories, None))
                             }
+                            label { "Quantity" }
+                            input id="ingredient-quantity" name="quantity" type="text" maxlength="40";
+                            label { "Note" }
+                            input id="ingredient-note" name="note" type="text" maxlength="120";
                             button id="add-ingredient-button" class="button button-primary" type="submit" { "Add ingredient" }
                         }
                     }
@@ -431,19 +618,19 @@ fn ingredient_row(
                     input type="hidden" name="csrf" value=(csrf_token);
                     label { "Name" }
                     input id=(format!("ingredient-edit-name-{}", ingredient.id)) name="name" value=(ingredient.name) maxlength="120" required;
-                    label { "Quantity" }
-                    input id=(format!("ingredient-edit-quantity-{}", ingredient.id)) name="quantity" value=(ingredient.quantity) maxlength="40";
-                    label { "Note" }
-                    input id=(format!("ingredient-edit-note-{}", ingredient.id)) name="note" value=(ingredient.note) maxlength="120";
                     label { "Category" }
                     select id=(format!("ingredient-edit-category-{}", ingredient.id)) name="category_id" {
                         (category_options(categories, ingredient.category_id))
                     }
+                    label { "Quantity" }
+                    input id=(format!("ingredient-edit-quantity-{}", ingredient.id)) name="quantity" value=(ingredient.quantity) maxlength="40";
+                    label { "Note" }
+                    input id=(format!("ingredient-edit-note-{}", ingredient.id)) name="note" value=(ingredient.note) maxlength="120";
                     button id=(format!("ingredient-edit-save-{}", ingredient.id)) class="button button-primary" type="submit" { "Save" }
                 }
                 form method="post" action=(format!("/meals/{}/ingredients/{}/delete", meal_id, ingredient.id)) {
                     input type="hidden" name="csrf" value=(csrf_token);
-                    button id=(format!("ingredient-edit-delete-{}", ingredient.id)) class="danger-link" type="submit" { "Remove" }
+                    button id=(format!("ingredient-edit-delete-{}", ingredient.id)) class="button button-danger" type="submit" { "Remove" }
                 }
             }
         }
@@ -532,6 +719,7 @@ pub fn list_page(
     list: &GroceryList,
     items: &[Item],
     categories: &[Category],
+    list_meals: &[ListMeal],
     presence: &[PresenceUser],
     csrf_token: &str,
 ) -> Markup {
@@ -543,7 +731,6 @@ pub fn list_page(
                 a class="back-link" href="/lists" { "← All lists" }
                 div class="list-topbar-actions" {
                     span class="live-pill" { span class="live-dot" {} "Live" }
-                    button class="button button-small add-meal-button" hx-get=(format!("/meals?picker={}", list.id)) hx-target="#meal-picker" hx-swap="innerHTML" { "+ Add meal" }
                 }
             }
             div id="meal-picker" class="meal-picker" {}
@@ -559,8 +746,8 @@ pub fn list_page(
                     (list_content_fragment(list, items, categories, csrf_token, false))
                 }
                 aside class="side-column" {
+                    (list_meals_panel(list_meals, list.id, csrf_token, false))
                     (presence_panel(presence, false))
-                    (categories_panel(categories, csrf_token, false))
                     section class="panel tip-panel" {
                         span class="tip-label" { "TIP" }
                         p { "Check items off as you go. Everyone viewing this list will see it instantly." }
@@ -612,10 +799,10 @@ fn list_content(
             input type="hidden" name="csrf" value=(csrf_token);
             label class="sr-only" for="item-name" { "Item name" }
             input id="item-name" name="name" type="text" maxlength="120" placeholder="Add an item..." autocomplete="off" required;
-            input id="item-quantity" name="quantity" type="text" maxlength="40" placeholder="Qty" aria-label="Quantity";
             select id="item-category" name="category_id" aria-label="Category" {
                 (category_options(categories, None))
             }
+            input id="item-quantity" name="quantity" type="text" maxlength="40" placeholder="Qty" aria-label="Quantity";
             button id="add-item-button" class="button button-primary add-button" type="submit" { "+ Add" }
         }
         (list_items_fragment(list, items, categories, csrf_token, false))
@@ -741,14 +928,14 @@ fn item_row(item: &Item, categories: &[Category], csrf_token: &str) -> Markup {
                         input type="hidden" name="csrf" value=(csrf_token);
                         label { "Name" }
                         input id=(format!("item-edit-name-{}", item.id)) name="name" value=(item.name) maxlength="120" required;
-                        label { "Quantity" }
-                        input id=(format!("item-edit-quantity-{}", item.id)) name="quantity" value=(item.quantity) maxlength="40";
-                        label { "Note" }
-                        input id=(format!("item-edit-note-{}", item.id)) name="note" value=(item.note) maxlength="120";
                         label { "Category" }
                         select id=(format!("item-edit-category-{}", item.id)) name="category_id" {
                             (category_options(categories, item.category_id))
                         }
+                        label { "Quantity" }
+                        input id=(format!("item-edit-quantity-{}", item.id)) name="quantity" value=(item.quantity) maxlength="40";
+                        label { "Note" }
+                        input id=(format!("item-edit-note-{}", item.id)) name="note" value=(item.note) maxlength="120";
                         button id=(format!("item-edit-save-{}", item.id)) class="button button-primary" type="submit" { "Save" }
                     }
                     form
@@ -757,7 +944,7 @@ fn item_row(item: &Item, categories: &[Category], csrf_token: &str) -> Markup {
                         hx-swap="outerHTML"
                     {
                         input type="hidden" name="csrf" value=(csrf_token);
-                        button id=(format!("item-edit-delete-{}", item.id)) class="danger-link" type="submit" { "Remove item" }
+                        button id=(format!("item-edit-delete-{}", item.id)) class="button button-danger" type="submit" { "Remove item" }
                     }
                 }
             }
@@ -827,11 +1014,58 @@ pub fn live_list_fragments(
     list: &GroceryList,
     items: &[Item],
     categories: &[Category],
+    list_meals: &[ListMeal],
     csrf_token: &str,
 ) -> Markup {
     html! {
         (list_content_fragment(list, items, categories, csrf_token, true))
-        (categories_panel(categories, csrf_token, true))
+        (list_meals_panel(list_meals, list.id, csrf_token, true))
+    }
+}
+
+pub fn list_meals_panel(
+    list_meals: &[ListMeal],
+    list_id: i64,
+    csrf_token: &str,
+    out_of_band: bool,
+) -> Markup {
+    let panel = html! {
+        div class="panel-heading" {
+            h2 { "Meals on this list" }
+            span class="count-badge" { (list_meals.len()) }
+        }
+        @if list_meals.is_empty() {
+            p class="muted" { "No meals added yet." }
+        } @else {
+            div class="list-meals" {
+                @for meal in list_meals {
+                    div class="list-meal-row" {
+                        span class="list-meal-icon" { "🍽" }
+                        span class="list-meal-name" { (meal.name) }
+                        form
+                            hx-post=(format!("/lists/{}/meals/{}/remove", list_id, meal.id))
+                            hx-target="#list-items"
+                            hx-swap="outerHTML"
+                            class="list-meal-remove"
+                        {
+                            input type="hidden" name="csrf" value=(csrf_token);
+                            button type="submit" class="list-meal-remove-button" aria-label=(format!("Remove {} from list", meal.name)) { "✕" }
+                        }
+                    }
+                }
+            }
+        }
+        button class="button button-small add-meal-button" hx-get=(format!("/meals?picker={}", list_id)) hx-target="#meal-picker" hx-swap="innerHTML" { "+ Add meal" }
+    };
+
+    if out_of_band {
+        html! {
+            section id="list-meals-panel" class="panel list-meals-panel" hx-swap-oob="outerHTML" { (panel) }
+        }
+    } else {
+        html! {
+            section id="list-meals-panel" class="panel list-meals-panel" { (panel) }
+        }
     }
 }
 

static/password-toggle.js

@@ -0,0 +1,16 @@
+// Toggle password visibility so users can check for typos, especially on mobile.
+document.querySelectorAll(".password-toggle").forEach(function (button) {
+  button.addEventListener("pointerdown", function (event) {
+    // Toggle on press (not click) for an instant response. preventScroll avoids
+    // a scroll-to-input animation that makes rapid toggling feel laggy, and
+    // keeping focus on the input keeps the mobile keyboard open.
+    event.preventDefault();
+    var input = document.getElementById(button.getAttribute("data-toggle-for"));
+    if (!input) return;
+    var showing = input.type === "text";
+    input.type = showing ? "password" : "text";
+    button.textContent = showing ? "Show" : "Hide";
+    button.setAttribute("aria-label", showing ? "Show password" : "Hide password");
+    input.focus({ preventScroll: true });
+  });
+});

static/style.css

@@ -67,6 +67,7 @@ h3 { margin-bottom: 6px; font-size: 1rem; }
 .muted { color: var(--muted); }
 
 .page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 34px; }
+.page-heading h1.page-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
 .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 22px; align-items: start; }
 .panel { padding: 26px; border: 1px solid rgba(221, 225, 210, .9); border-radius: 24px; background: rgba(255, 253, 248, .88); box-shadow: var(--shadow); }
 .panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
@@ -75,6 +76,14 @@ h3 { margin-bottom: 6px; font-size: 1rem; }
 .stack label { color: var(--muted); font-size: .82rem; font-weight: 700; }
 input { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: #fff; }
 input:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, 113, 93, .12); }
+.password-field { position: relative; }
+.password-field input { padding-right: 64px; }
+.password-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); min-height: 32px; padding: 5px 10px; border: 0; border-radius: 9px; cursor: pointer; color: var(--deep-sage); background: #e7f0e1; font-weight: 800; font-size: .78rem; }
+.password-toggle:hover { background: #dbe9d2; }
+select { width: 100%; min-height: 46px; padding: 10px 34px 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: #fff; font: inherit; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%2355715d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
+select:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, 113, 93, .12); }
+select option { color: var(--ink); background: #fff; }
+select option:checked { color: var(--deep-sage); font-weight: 700; }
 textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: #fff; font: inherit; resize: vertical; }
 textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, 113, 93, .12); }
 .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border: 0; border-radius: 12px; cursor: pointer; text-decoration: none; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
@@ -97,6 +106,7 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 
 .auth-card { width: min(100%, 480px); margin: 7vh auto 0; padding: clamp(27px, 6vw, 54px); border: 1px solid var(--line); border-radius: 28px; background: rgba(255, 253, 248, .9); box-shadow: var(--shadow); }
 .auth-card .button { margin-top: 11px; }
+#passkey-login { width: 100%; }
 .auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: var(--muted); font-size: .8rem; }
 .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
 .passkey-list { display: grid; gap: 8px; margin-bottom: 16px; }
@@ -107,6 +117,7 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .auth-switch a { color: var(--deep-sage); font-weight: 800; }
 .alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; font-size: .9rem; }
 .alert-error { color: #874d40; background: #fbe7e0; }
+.alert-success { color: #3d6b4f; background: #e4f2e6; }
 
 .list-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
 .back-link { color: var(--muted); font-size: .85rem; font-weight: 700; text-decoration: none; }
@@ -126,7 +137,8 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .list-heading { display: flex; justify-content: space-between; margin-bottom: 25px; }
 .list-heading h1 { max-width: 100%; margin-bottom: 5px; overflow-wrap: anywhere; font-size: clamp(1.45rem, 2.8vw, 2.05rem); }
 .list-meta { margin: 0; color: var(--muted); font-size: .85rem; }
-.add-item-form { display: grid; grid-template-columns: minmax(0, 1fr) 90px 145px auto; gap: 8px; margin-bottom: 19px; }
+.meal-category-label { margin-left: 10px; color: var(--muted); font-size: .8em; font-weight: 500; white-space: nowrap; }
+.add-item-form { display: grid; grid-template-columns: minmax(0, 1fr) 145px 90px auto; gap: 8px; margin-bottom: 19px; }
 .add-item-form input { min-height: 50px; }
 .add-item-form select { min-height: 50px; }
 .add-button { min-height: 50px; }
@@ -134,6 +146,7 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .item-list { display: grid; gap: 6px; }
 .category-group + .category-group { margin-top: 18px; }
 .category-heading { margin: 0 7px 4px; color: var(--deep-sage); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
+.ingredients-divider { margin: 26px 0 18px; border: 0; border-top: 1px solid var(--line); }
 .item-row { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 9px 7px 9px 10px; border-bottom: 1px solid #edf0e6; }
 .item-row:last-child { border-bottom: 0; }
 .check-form { flex: 0 0 auto; }
@@ -207,6 +220,8 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .edit-form { margin-bottom: 12px; }
 .edit-form input { min-height: 38px; padding: 7px 10px; font-size: .85rem; }
 .danger-link { padding: 0; border: 0; color: var(--coral); background: none; cursor: pointer; font-size: .8rem; font-weight: 800; }
+.button-danger { width: 100%; color: var(--coral); background: #fbeae4; }
+.button-danger:hover { background: #f7ddd4; }
 .empty-items { padding: 34px 10px 18px; color: var(--muted); text-align: center; }
 .empty-items-icon { display: block; margin-bottom: 7px; color: var(--yellow); font-size: 1.7rem; }
 .empty-items p { margin-bottom: 2px; color: var(--ink); font-weight: 800; }
@@ -217,12 +232,28 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .category-form input { min-height: 38px; padding: 7px 10px; font-size: .84rem; }
 .category-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
 .category-chip { padding: 5px 9px; border-radius: 99px; color: var(--deep-sage); background: #edf3e8; font-size: .72rem; font-weight: 800; }
+/* Meal categories side panel */
+.meal-category-list { display: grid; gap: 2px; margin-top: 14px; }
+.meal-category-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 4px; border-bottom: 1px solid #edf0e6; }
+.meal-category-row:last-child { border-bottom: 0; }
+.meal-category-name { font-size: .9rem; font-weight: 700; }
+.meal-category-delete { padding: 2px 6px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: .8rem; line-height: 1; }
+.meal-category-delete:hover { color: var(--coral); background: #fbeae4; }
 .category-empty { margin: 13px 0 0; font-size: .8rem; }
 .category-result { margin-top: 10px; }
 .category-success { margin: 0; color: var(--deep-sage); font-size: .76rem; font-weight: 800; }
 .presence-list { display: grid; gap: 12px; }
 .presence-person { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 700; }
 .avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: var(--deep-sage); background: #e6f0df; font-size: .7rem; font-weight: 900; }
+.list-meals { display: grid; gap: 8px; }
+.list-meal-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #edf0e6; }
+.list-meal-row:last-child { border-bottom: 0; }
+.list-meal-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; color: var(--deep-sage); background: #eef4e9; font-size: .95rem; }
+.list-meal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
+.list-meal-remove { margin: 0; flex: 0 0 auto; }
+.list-meal-remove-button { padding: 2px 7px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: .8rem; line-height: 1; }
+.list-meal-remove-button:hover { color: var(--coral); background: #fbeae4; }
+.list-meals-panel .add-meal-button { margin-top: 12px; width: 100%; }
 .sharing-panel p, .tip-panel p { color: var(--muted); font-size: .86rem; }
 .invite-result { margin-top: 15px; }
 .invite-link-result { padding: 11px; border-radius: 12px; background: #f1f5ec; }