feat(brews): add web views and templates

- Add BrewView, BagOptionView, GearOptionView
- Add brews page with form and +/- adjustment buttons
- Add brew list partial with sortable columns
- Add Brews link to navigation

src/presentation/web/templates.rs

@@ -1,10 +1,11 @@
 use askama::Template;
 
 use super::views::{
-    BagView, GearView, ListNavigator, Paginated, RoastView, RoasterOptionView, RoasterView,
-    TimelineEventView, TimelineMonthView,
+    BagOptionView, BagView, BrewView, GearOptionView, GearView, ListNavigator, Paginated,
+    RoastView, RoasterOptionView, RoasterView, TimelineEventView, TimelineMonthView,
 };
 use crate::domain::bags::BagSortKey;
+use crate::domain::brews::BrewSortKey;
 use crate::domain::gear::GearSortKey;
 use crate::domain::roasters::RoasterSortKey;
 use crate::domain::roasts::{RoastSortKey, RoastWithRoaster};
@@ -124,6 +125,26 @@ pub struct RoastOptionsTemplate {
     pub roasts: Vec<RoastWithRoaster>,
 }
 
+#[derive(Template)]
+#[template(path = "brews.html")]
+pub struct BrewsTemplate {
+    pub nav_active: &'static str,
+    pub is_authenticated: bool,
+    pub brews: Paginated<BrewView>,
+    pub bag_options: Vec<BagOptionView>,
+    pub grinder_options: Vec<GearOptionView>,
+    pub brewer_options: Vec<GearOptionView>,
+    pub navigator: ListNavigator<BrewSortKey>,
+}
+
+#[derive(Template)]
+#[template(path = "partials/brew_list.html")]
+pub struct BrewListTemplate {
+    pub is_authenticated: bool,
+    pub brews: Paginated<BrewView>,
+    pub navigator: ListNavigator<BrewSortKey>,
+}
+
 pub fn render_template<T: Template>(template: T) -> Result<String, askama::Error> {
     template.render()
 }

src/presentation/web/views.rs

@@ -1,4 +1,6 @@
 use crate::domain::bags::BagWithRoast;
+use crate::domain::brews::BrewWithDetails;
+use crate::domain::gear::Gear;
 use crate::domain::listing::{DEFAULT_PAGE_SIZE, ListRequest, Page, PageSize, SortKey};
 use crate::domain::roasters::Roaster;
 use crate::domain::roasts::{Roast, RoastWithRoaster};
@@ -454,16 +456,18 @@ impl TimelineEventView {
             ("bag", "added") => "Bag Added",
             ("bag", "finished") => "Bag Finished",
             ("gear", "added") => "Gear Added",
+            ("brew", "brewed") => "Brewed",
             _ => "Event",
         };
 
         let link = match (entity_type.as_str(), slug, roaster_slug) {
             ("roaster", Some(slug), _) => format!("/roasters/{slug}"),
-            // Both roasts and bags link to the roast page
-            ("roast" | "bag", Some(slug), Some(roaster_slug)) => {
+            // Roasts, bags, and brews link to the roast page when we have slug info
+            ("roast" | "bag" | "brew", Some(slug), Some(roaster_slug)) => {
                 format!("/roasters/{roaster_slug}/roasts/{slug}")
             }
             ("gear", _, _) => "/gear".to_string(),
+            ("brew", _, _) => "/brews".to_string(),
             ("roaster", None, _) => format!("/roasters/{entity_id}"),
             ("roast", None, _) => format!("/roasts/{entity_id}"),
             _ => String::from("#"),
@@ -577,3 +581,84 @@ impl GearView {
         }
     }
 }
+
+#[derive(Clone)]
+pub struct BrewView {
+    pub id: String,
+    pub bag_id: String,
+    pub roast_name: String,
+    pub roaster_name: String,
+    pub roast_slug: String,
+    pub roaster_slug: String,
+    pub coffee_weight: String,
+    pub grinder_name: String,
+    pub grind_setting: String,
+    pub brewer_name: String,
+    pub water_volume: String,
+    pub water_temp: String,
+    pub ratio: String,
+    pub created_at: String,
+}
+
+impl BrewView {
+    pub fn from_domain(brew: BrewWithDetails) -> Self {
+        let ratio = if brew.brew.coffee_weight > 0.0 {
+            format!(
+                "1:{:.1}",
+                f64::from(brew.brew.water_volume) / brew.brew.coffee_weight
+            )
+        } else {
+            "\u{2014}".to_string()
+        };
+
+        Self {
+            id: brew.brew.id.to_string(),
+            bag_id: brew.brew.bag_id.to_string(),
+            roast_name: brew.roast_name,
+            roaster_name: brew.roaster_name,
+            roast_slug: brew.roast_slug,
+            roaster_slug: brew.roaster_slug,
+            coffee_weight: format!("{:.1}g", brew.brew.coffee_weight),
+            grinder_name: brew.grinder_name,
+            grind_setting: format!("{:.1}", brew.brew.grind_setting),
+            brewer_name: brew.brewer_name,
+            water_volume: format!("{}ml", brew.brew.water_volume),
+            water_temp: format!("{:.1}\u{00B0}C", brew.brew.water_temp),
+            ratio,
+            created_at: brew.brew.created_at.format("%Y-%m-%d %H:%M").to_string(),
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct BagOptionView {
+    pub id: String,
+    pub label: String,
+}
+
+impl From<BagWithRoast> for BagOptionView {
+    fn from(bag: BagWithRoast) -> Self {
+        Self {
+            id: bag.bag.id.to_string(),
+            label: format!(
+                "{} - {} ({:.0}g remaining)",
+                bag.roaster_name, bag.roast_name, bag.bag.remaining
+            ),
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct GearOptionView {
+    pub id: String,
+    pub label: String,
+}
+
+impl From<Gear> for GearOptionView {
+    fn from(gear: Gear) -> Self {
+        Self {
+            id: gear.id.to_string(),
+            label: format!("{} {}", gear.make, gear.model),
+        }
+    }
+}

templates/brews.html

@@ -0,0 +1,153 @@
+{% extends "base.html" %} {% block title %}Brewlog · Brews{% endblock %} {% block content %}
+<section data-signals:show-form="false" data-signals:is-submitting="false" data-signals:temp="91.0" data-signals:grind="6.0" data-signals:volume="250" data-signals:weight="15.0">
+  <header class="flex flex-wrap items-start justify-between gap-4">
+    <div class="flex flex-col gap-2">
+      <h1 class="text-3xl font-semibold">Brews</h1>
+      <p class="max-w-2xl text-sm text-stone-600">Log your coffee brews.</p>
+    </div>
+    {% if is_authenticated && !bag_options.is_empty() && !grinder_options.is_empty() && !brewer_options.is_empty() %}
+    <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 brew"
+    >
+      <span aria-hidden="true">+</span>
+    </button>
+    {% endif %}
+  </header>
+
+  {% if is_authenticated %}
+  {% if bag_options.is_empty() %}
+  <div class="mt-6 rounded-lg border border-dashed border-amber-300 bg-amber-100/60 p-5 text-sm text-stone-600">
+    <h2 class="text-lg font-semibold text-amber-700">Open a bag first</h2>
+    <p class="mt-2">
+      Brews need an open bag of coffee.
+      <a class="text-amber-700 hover:text-amber-600 underline" href="/bags">Add a bag</a>
+      to enable this form.
+    </p>
+  </div>
+  {% else if grinder_options.is_empty() || brewer_options.is_empty() %}
+  <div class="mt-6 rounded-lg border border-dashed border-amber-300 bg-amber-100/60 p-5 text-sm text-stone-600">
+    <h2 class="text-lg font-semibold text-amber-700">Add your gear first</h2>
+    <p class="mt-2">
+      Brews need a grinder and brewer.
+      <a class="text-amber-700 hover:text-amber-600 underline" href="/gear">Add your gear</a>
+      to enable this form.
+    </p>
+  </div>
+  {% else %}
+  <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 Brew</h2>
+      <p class="mt-1 text-sm text-stone-600">Log a cup of coffee.</p>
+    </div>
+    <form
+      method="post"
+      action="/api/v1/brews"
+      class="mt-4 flex flex-col gap-4"
+      data-on:submit="$isSubmitting = true; @post('/api/v1/brews?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#brew-list', mode: 'replace'}})"
+      data-ref="form"
+      data-on:datastar-fetch="evt.detail.type === 'finished' && $isSubmitting && ($showForm = false, $form && $form.reset(), $temp = 91.0, $grind = 6.0, $volume = 250, $weight = 15.0, $isSubmitting = false)"
+    >
+      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <!-- Bag selector -->
+        <label class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Bag *</span>
+          <select name="bag_id" required class="input-field">
+            <option value="">Select a bag</option>
+            {% for bag in bag_options %}
+            <option value="{{ bag.id }}">{{ bag.label }}</option>
+            {% endfor %}
+          </select>
+        </label>
+
+        <!-- Grinder selector -->
+        <label class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Grinder *</span>
+          <select name="grinder_id" required class="input-field">
+            {% for grinder in grinder_options %}
+            <option value="{{ grinder.id }}">{{ grinder.label }}</option>
+            {% endfor %}
+          </select>
+        </label>
+
+        <!-- Brewer selector -->
+        <label class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Brewer *</span>
+          <select name="brewer_id" required class="input-field">
+            {% for brewer in brewer_options %}
+            <option value="{{ brewer.id }}">{{ brewer.label }}</option>
+            {% endfor %}
+          </select>
+        </label>
+
+        <!-- Coffee Weight with +/- buttons -->
+        <div class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Coffee (g) *</span>
+          <div class="flex items-center gap-2">
+            <button type="button" class="btn-adjust" data-on:click="$weight = Math.max(1, $weight - 1)">-</button>
+            <input type="number" name="coffee_weight" step="0.5" min="1" required class="input-field flex-1 text-center" data-bind:value="$weight" />
+            <button type="button" class="btn-adjust" data-on:click="$weight = $weight + 1">+</button>
+          </div>
+        </div>
+
+        <!-- Grind Setting with +/- buttons -->
+        <div class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Grind Setting *</span>
+          <div class="flex items-center gap-2">
+            <button type="button" class="btn-adjust" data-on:click="$grind = Math.max(0, $grind - 0.5)">-</button>
+            <input type="number" name="grind_setting" step="0.5" min="0" required class="input-field flex-1 text-center" data-bind:value="$grind" />
+            <button type="button" class="btn-adjust" data-on:click="$grind = $grind + 0.5">+</button>
+          </div>
+        </div>
+
+        <!-- Water Volume with +/- buttons -->
+        <div class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Water (ml) *</span>
+          <div class="flex items-center gap-2">
+            <button type="button" class="btn-adjust" data-on:click="$volume = Math.max(10, $volume - 10)">-</button>
+            <input type="number" name="water_volume" step="10" min="10" required class="input-field flex-1 text-center" data-bind:value="$volume" />
+            <button type="button" class="btn-adjust" data-on:click="$volume = $volume + 10">+</button>
+          </div>
+        </div>
+
+        <!-- Water Temperature with +/- buttons -->
+        <div class="flex flex-col gap-1 text-sm">
+          <span class="text-stone-700">Temp (C) *</span>
+          <div class="flex items-center gap-2">
+            <button type="button" class="btn-adjust" data-on:click="$temp = Math.max(0, $temp - 0.5)">-</button>
+            <input type="number" name="water_temp" step="0.5" min="0" max="100" required class="input-field flex-1 text-center" data-bind:value="$temp" />
+            <button type="button" class="btn-adjust" data-on:click="$temp = Math.min(100, $temp + 0.5)">+</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-3">
+        <button
+          type="button"
+          class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50"
+          data-on:click="$showForm = false"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          class="rounded-md bg-amber-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
+        >
+          Log Brew
+        </button>
+      </div>
+    </form>
+  </div>
+  {% endif %}
+  {% endif %}
+
+  <div class="mt-8">{% include "partials/brew_list.html" %}</div>
+</section>
+{% endblock %}

templates/nav.html

@@ -4,6 +4,7 @@
         <a class="border-b-2 pb-1 transition {% if nav_active == "roasters" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/roasters">Roasters</a>
         <a class="border-b-2 pb-1 transition {% if nav_active == "roasts" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/roasts">Roasts</a>
         <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 == "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 %}

templates/partials/brew_list.html

@@ -0,0 +1,71 @@
+{% import "partials/table.html" as table %}
+
+<div id="brew-list" class="space-y-4" data-star-scope="brews">
+  <div class="rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm">
+    {% call table::pagination_header(brews, navigator, "#brew-list") %}
+
+    <div class="overflow-x-auto">
+      <table class="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>
+            <th scope="col" class="px-4 py-3">Coffee</th>
+            {% call table::sortable_header("Weight", "coffee-weight", navigator, "#brew-list") %}
+            <th scope="col" class="px-4 py-3">Grind</th>
+            <th scope="col" class="px-4 py-3">Brewer</th>
+            {% call table::sortable_header("Water", "water-volume", navigator, "#brew-list") %}
+            <th scope="col" class="px-4 py-3">Temp</th>
+            <th scope="col" class="px-4 py-3">Ratio</th>
+            {% call table::sortable_header("Date", "created-at", navigator, "#brew-list") %}
+            {% if is_authenticated %}
+            <th scope="col" class="px-4 py-3 w-12"></th>
+            {% endif %}
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-amber-200/70">
+          {% for brew in brews.items %}
+          <tr class="bg-amber-50/40 transition hover:bg-amber-50">
+            <td class="px-4 py-3 whitespace-nowrap">
+              <div class="font-medium text-stone-800">
+                <a href="/roasters/{{ brew.roaster_slug }}/roasts/{{ brew.roast_slug }}" class="hover:text-amber-700 hover:underline">
+                  {{ brew.roast_name }}
+                </a>
+              </div>
+              <div class="text-xs text-stone-500">
+                <a href="/roasters/{{ brew.roaster_slug }}" class="hover:text-amber-700 hover:underline">
+                  {{ brew.roaster_name }}
+                </a>
+              </div>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap">{{ brew.coffee_weight }}</td>
+            <td class="px-4 py-3 whitespace-nowrap">
+              <div>{{ brew.grind_setting }}</div>
+              <div class="text-xs text-stone-500">{{ brew.grinder_name }}</div>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap">{{ brew.brewer_name }}</td>
+            <td class="px-4 py-3 whitespace-nowrap">{{ brew.water_volume }}</td>
+            <td class="px-4 py-3 whitespace-nowrap">{{ brew.water_temp }}</td>
+            <td class="px-4 py-3 whitespace-nowrap font-mono text-xs">{{ brew.ratio }}</td>
+            <td class="px-4 py-3 whitespace-nowrap text-stone-500">{{ brew.created_at }}</td>
+            {% if is_authenticated %}
+            <td class="px-4 py-3 whitespace-nowrap text-right">
+              <button
+                class="text-red-600 hover:text-red-800 text-xs"
+                data-on:click="confirm('Delete this brew?') && @delete('/api/v1/brews/{{ brew.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#brew-list', mode: 'replace'}})"
+              >
+                Delete
+              </button>
+            </td>
+            {% endif %}
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+
+    {% if brews.items.is_empty() %}
+    <div class="p-8 text-center text-stone-500">
+      No brews logged yet. Start by logging your first cup!
+    </div>
+    {% endif %}
+  </div>
+</div>

templates/styles.css

@@ -24,3 +24,21 @@ a {
   border-color: rgba(180, 83, 9, 0.6);
   box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.2);
 }
+
+.btn-adjust {
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border: 1px solid rgba(120, 113, 108, 0.3);
+  background-color: white;
+  color: rgba(87, 83, 78, 1);
+  font-weight: 700;
+  transition: background-color 150ms ease;
+}
+
+.btn-adjust:hover {
+  background-color: rgba(245, 245, 244, 1);
+}