feat(cups): add web views, templates, and navigation

- Add CupView, CafeOptionView, RoastOptionView view models
- Add CupsTemplate (full page) and CupListTemplate (fragment)
- Create cups.html with form and cup_list.html with responsive table
- Add Cups link to desktop and mobile navigation
- Add cup timeline event link and label support

src/presentation/web/templates.rs

@@ -1,13 +1,14 @@
 use askama::Template;
 
 use super::views::{
-    BagOptionView, BagView, BrewDefaultsView, BrewView, CafeView, GearOptionView, GearView,
-    ListNavigator, Paginated, RoastView, RoasterOptionView, RoasterView, TimelineEventView,
-    TimelineMonthView,
+    BagOptionView, BagView, BrewDefaultsView, BrewView, CafeOptionView, CafeView, CupView,
+    GearOptionView, GearView, ListNavigator, Paginated, RoastOptionView, RoastView,
+    RoasterOptionView, RoasterView, TimelineEventView, TimelineMonthView,
 };
 use crate::domain::bags::BagSortKey;
 use crate::domain::brews::BrewSortKey;
 use crate::domain::cafes::CafeSortKey;
+use crate::domain::cups::CupSortKey;
 use crate::domain::gear::GearSortKey;
 use crate::domain::roasters::RoasterSortKey;
 use crate::domain::roasts::{RoastSortKey, RoastWithRoaster};
@@ -175,6 +176,25 @@ pub struct CafeDetailTemplate {
     pub cafe: CafeView,
 }
 
+#[derive(Template)]
+#[template(path = "cups.html")]
+pub struct CupsTemplate {
+    pub nav_active: &'static str,
+    pub is_authenticated: bool,
+    pub cups: Paginated<CupView>,
+    pub roast_options: Vec<RoastOptionView>,
+    pub cafe_options: Vec<CafeOptionView>,
+    pub navigator: ListNavigator<CupSortKey>,
+}
+
+#[derive(Template)]
+#[template(path = "partials/cup_list.html")]
+pub struct CupListTemplate {
+    pub is_authenticated: bool,
+    pub cups: Paginated<CupView>,
+    pub navigator: ListNavigator<CupSortKey>,
+}
+
 pub fn render_template<T: Template>(template: T) -> Result<String, askama::Error> {
     template.render()
 }

src/presentation/web/views.rs

@@ -1,6 +1,7 @@
 use crate::domain::bags::BagWithRoast;
 use crate::domain::brews::{Brew, BrewWithDetails};
 use crate::domain::cafes::Cafe;
+use crate::domain::cups::CupWithDetails;
 use crate::domain::gear::Gear;
 use crate::domain::listing::{DEFAULT_PAGE_SIZE, ListRequest, Page, PageSize, SortKey};
 use crate::domain::roasters::Roaster;
@@ -522,16 +523,18 @@ impl TimelineEventView {
             ("gear", "added") => "Gear Added",
             ("brew", "brewed") => "Brewed",
             ("cafe", "added") => "Cafe Added",
+            ("cup", "added") => "Cup",
             _ => "Event",
         };
 
         let link = match (entity_type.as_str(), slug, roaster_slug) {
             ("roaster", Some(slug), _) => format!("/roasters/{slug}"),
-            // Roasts, bags, and brews link to the roast page when we have slug info
-            ("roast" | "bag" | "brew", Some(slug), Some(roaster_slug)) => {
+            // Roasts, bags, brews, and cups link to the roast page when we have slug info
+            ("roast" | "bag" | "brew" | "cup", Some(slug), Some(roaster_slug)) => {
                 format!("/roasters/{roaster_slug}/roasts/{slug}")
             }
             ("cafe", Some(slug), _) => format!("/cafes/{slug}"),
+            ("cup", _, _) => "/cups".to_string(),
             ("gear", _, _) => "/gear".to_string(),
             ("brew", _, _) => "/brews".to_string(),
             ("roaster", None, _) => format!("/roasters/{entity_id}"),
@@ -879,3 +882,74 @@ impl From<Cafe> for CafeView {
         }
     }
 }
+
+pub struct CafeOptionView {
+    pub id: String,
+    pub label: String,
+}
+
+impl From<Cafe> for CafeOptionView {
+    fn from(cafe: Cafe) -> Self {
+        Self {
+            id: cafe.id.to_string(),
+            label: format!("{} ({})", cafe.name, cafe.city),
+        }
+    }
+}
+
+pub struct RoastOptionView {
+    pub id: String,
+    pub label: String,
+}
+
+impl From<RoastWithRoaster> for RoastOptionView {
+    fn from(roast: RoastWithRoaster) -> Self {
+        Self {
+            id: roast.roast.id.to_string(),
+            label: format!("{} - {}", roast.roaster_name, roast.roast.name),
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct CupView {
+    pub id: String,
+    pub roast_name: String,
+    pub roaster_name: String,
+    pub roast_slug: String,
+    pub roaster_slug: String,
+    pub cafe_name: String,
+    pub cafe_slug: String,
+    pub notes: String,
+    pub has_notes: bool,
+    pub rating: String,
+    pub has_rating: bool,
+    pub created_at: String,
+}
+
+impl CupView {
+    pub fn from_domain(cup: CupWithDetails) -> Self {
+        let notes = cup.cup.notes.clone().unwrap_or_default();
+        let has_notes = !notes.is_empty();
+        let rating = cup
+            .cup
+            .rating
+            .map_or_else(|| "—".to_string(), |r| format!("{r}/5"));
+        let has_rating = cup.cup.rating.is_some();
+
+        Self {
+            id: cup.cup.id.to_string(),
+            roast_name: cup.roast_name,
+            roaster_name: cup.roaster_name,
+            roast_slug: cup.roast_slug,
+            roaster_slug: cup.roaster_slug,
+            cafe_name: cup.cafe_name,
+            cafe_slug: cup.cafe_slug,
+            notes,
+            has_notes,
+            rating,
+            has_rating,
+            created_at: cup.cup.created_at.format("%Y-%m-%d %H:%M").to_string(),
+        }
+    }
+}

templates/cups.html

@@ -0,0 +1,103 @@
+{% extends "base.html" %} {% block title %}Brewlog · Cups{% endblock %}
+
+{% block content %}
+<section data-signals:_show-form="false">
+  <header class="flex flex-wrap items-start justify-between gap-4">
+    <div class="flex flex-col gap-2">
+      <h1 class="text-3xl font-semibold">Cups</h1>
+      <p class="max-w-2xl text-sm text-stone-600">Track coffees you've enjoyed at cafes.</p>
+    </div>
+    {% if is_authenticated %}
+    <button
+      type="button"
+      class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
+      data-class:hidden="$_showForm"
+      data-on:click="$_showForm = true"
+      aria-label="Add new cup"
+    >
+      <span aria-hidden="true">+</span>
+    </button>
+    {% endif %}
+  </header>
+
+  {% if is_authenticated %}
+  <div
+    class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
+    data-show="$_showForm"
+    style="display: none"
+  >
+    <div>
+      <h2 class="text-lg font-semibold text-amber-700">New Cup</h2>
+      <p class="mt-1 text-sm text-stone-600">
+        Record a coffee you had at a cafe.
+      </p>
+    </div>
+    <form
+      method="post"
+      action="/api/v1/cups"
+      class="mt-4 flex flex-col gap-4"
+      data-on:submit="@post('/api/v1/cups?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#cup-list', mode: 'replace'}})"
+      data-ref="_form"
+      data-on:datastar-fetch="evt.detail.type === 'finished' && ($_showForm = false, $_form && $_form.reset())"
+    >
+      <div class="grid gap-4 sm:grid-cols-2">
+        <label class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Coffee *</span>
+          <select name="roast_id" required class="input-field">
+            <option value="">Select a roast...</option>
+            {% for roast in roast_options %}
+            <option value="{{ roast.id }}">{{ roast.label }}</option>
+            {% endfor %}
+          </select>
+        </label>
+        <label class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Cafe *</span>
+          <select name="cafe_id" required class="input-field">
+            <option value="">Select a cafe...</option>
+            {% for cafe in cafe_options %}
+            <option value="{{ cafe.id }}">{{ cafe.label }}</option>
+            {% endfor %}
+          </select>
+        </label>
+        <label class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Rating</span>
+          <select name="rating" class="input-field">
+            <option value="">No rating</option>
+            <option value="5">5 - Exceptional</option>
+            <option value="4">4 - Great</option>
+            <option value="3">3 - Good</option>
+            <option value="2">2 - Fair</option>
+            <option value="1">1 - Poor</option>
+          </select>
+        </label>
+        <label class="sm:col-span-2 flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Notes</span>
+          <textarea
+            name="notes"
+            rows="2"
+            class="input-field"
+            placeholder="Tasting impressions, preparation style..."
+          ></textarea>
+        </label>
+      </div>
+      <div class="flex items-center justify-end gap-2">
+        <button
+          type="button"
+          class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800"
+          data-on:click="($_showForm = false, $_form && $_form.reset())"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          class="rounded-md bg-amber-600 px-4 py-2 text-sm font-semibold text-amber-50 transition hover:bg-amber-500"
+        >
+          Save Cup
+        </button>
+      </div>
+    </form>
+  </div>
+  {% endif %}
+</section>
+
+{% include "partials/cup_list.html" %} {% endblock %}

templates/nav.html

@@ -8,6 +8,7 @@
             <a class="border-b-2 pb-1 transition {% if nav_active == "bags" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/bags">Bags</a>
             <a class="border-b-2 pb-1 transition {% if nav_active == "brews" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/brews">Brews</a>
             <a class="border-b-2 pb-1 transition {% if nav_active == "cafes" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/cafes">Cafes</a>
+            <a class="border-b-2 pb-1 transition {% if nav_active == "cups" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/cups">Cups</a>
             <a class="border-b-2 pb-1 transition {% if nav_active == "gear" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/gear">Gear</a>
             <a class="border-b-2 pb-1 transition {% if nav_active == "timeline" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/timeline">Timeline</a>
             {% if is_authenticated %}
@@ -35,6 +36,7 @@
         <a class="py-1 transition {% if nav_active == "bags" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/bags">Bags</a>
         <a class="py-1 transition {% if nav_active == "brews" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/brews">Brews</a>
         <a class="py-1 transition {% if nav_active == "cafes" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/cafes">Cafes</a>
+        <a class="py-1 transition {% if nav_active == "cups" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/cups">Cups</a>
         <a class="py-1 transition {% if nav_active == "gear" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/gear">Gear</a>
         <a class="py-1 transition {% if nav_active == "timeline" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/timeline">Timeline</a>
         {% if is_authenticated %}

templates/partials/cup_list.html

@@ -0,0 +1,93 @@
+{% import "partials/table.html" as table %}
+
+<div id="cup-list" class="mt-6" data-star-scope="cups">
+  {% if cups.items.is_empty() && !navigator.has_search() %}
+  <div
+    class="rounded-lg border border-dashed border-amber-300 bg-amber-100/40 px-4 py-6 text-sm text-stone-600"
+  >
+    <p class="text-center">
+      No cups recorded yet. Use the form above to add your first cup.
+    </p>
+  </div>
+  {% else %}
+  <section class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm"
+    {% if cups.has_next() %}data-infinite-scroll data-next-url="{{ navigator.fragment_page_href(cups.next_page().unwrap())|safe }}" data-target="#cup-list"{% endif %}
+  >
+    {% call table::search_header(navigator, "#cup-list") %}
+    <div class="overflow-x-auto">
+      <table class="responsive-table min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
+        <thead class="bg-amber-200/60 text-xs font-semibold tracking-wide text-amber-900">
+          <tr>
+            {% call table::sortable_header("Added", "created-at", navigator, "#cup-list") %}
+            {% call table::sortable_header("Coffee", "roast", navigator, "#cup-list") %}
+            {% call table::sortable_header("Cafe", "cafe", navigator, "#cup-list") %}
+            {% call table::sortable_header("Rating", "rating", navigator, "#cup-list") %}
+            <th scope="col" class="mobile-hidden px-4 py-3">Notes</th>
+            <th scope="col" class="px-4 py-3 text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-amber-200/70">
+          {% for cup in cups.items %}
+          <tr
+            data-star-key="{{ cup.id }}"
+            class="bg-amber-50/40 transition hover:bg-amber-50"
+          >
+            <td data-label="Added" class="whitespace-nowrap px-4 py-3 text-xs font-medium text-stone-600">
+              {{ cup.created_at }}
+            </td>
+            <td data-label="Coffee" class="px-4 py-3 whitespace-nowrap">
+              <a
+                href="/roasters/{{ cup.roaster_slug }}/roasts/{{ cup.roast_slug }}"
+                class="font-semibold text-amber-800 hover:text-amber-600"
+                >{{ cup.roast_name }}</a
+              >
+              <div class="hidden md:block text-xs text-stone-500">{{ cup.roaster_name }}</div>
+            </td>
+            <td data-label="Roaster" class="px-4 py-3 whitespace-nowrap md:hidden">{{ cup.roaster_name }}</td>
+            <td data-label="Cafe" class="px-4 py-3 whitespace-nowrap">
+              <a
+                href="/cafes/{{ cup.cafe_slug }}"
+                class="text-amber-800 hover:text-amber-600"
+                >{{ cup.cafe_name }}</a
+              >
+            </td>
+            <td data-label="Rating" class="px-4 py-3 whitespace-nowrap">{{ cup.rating }}</td>
+            <td data-label="Notes" class="mobile-hidden px-4 py-3 text-sm text-stone-600">
+              {% if cup.has_notes %}{{ cup.notes }}{% else %}&mdash;{% endif %}
+            </td>
+            <td data-label="" class="px-4 py-3 text-right">
+              {% if is_authenticated %}
+              <div class="inline-flex items-center gap-1">
+                <button
+                  type="button"
+                  class="inline-flex h-8 w-8 items-center justify-center rounded-md text-stone-500 transition hover:text-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
+                  title="Delete cup"
+                  data-on:click="confirm('Delete this cup?') && @delete('/api/v1/cups/{{ cup.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#cup-list', mode: 'replace'}})"
+                >
+                  <span class="sr-only">Delete</span>
+                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path
+                      fill-rule="evenodd"
+                      d="M7.5 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H15a1 1 0 1 1 0 2h-.4l-.74 10.36A2 2 0 0 1 11.87 17H8.13a2 2 0 0 1-1.99-1.64L5.4 5H5a1 1 0 1 1 0-2h2.5Zm.9 4.5a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Zm3.4 0a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% if cups.items.is_empty() %}
+    <div class="p-8 text-center text-stone-500">No cups match your search.</div>
+    {% endif %}
+    {% call table::pagination_header(cups, navigator, "#cup-list") %}
+    {% if cups.has_next() %}
+    <div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
+    {% endif %}
+  </section>
+  {% endif %}
+</div>