From 4a7b054de1f63bb3f57f7576e4c6ff6e4436ea2c Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Fri, 6 Feb 2026 10:53:42 +0000
Subject: [PATCH] feat(brews): pre-select bag when clicking Brew on homepage
 bag card

- Add initial-value attribute to searchable-select web component
- Update bag card Brew link to pass bag_id query parameter to add page
- Thread bag_id through route handler and template to pre-select the bag
---
 src/application/routes/app/add.rs         |  2 ++
 src/presentation/web/templates.rs         |  1 +
 static/js/components/searchable-select.js | 11 +++++++++++
 templates/pages/add.html                  |  2 +-
 templates/partials/bag_card.html          |  2 +-
 5 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/application/routes/app/add.rs b/src/application/routes/app/add.rs
index 32eb658..3f3f623 100644
--- a/src/application/routes/app/add.rs
+++ b/src/application/routes/app/add.rs
@@ -48,6 +48,7 @@ const ADD_TABS: &[Tab] = &[
 pub(crate) struct AddQuery {
     #[serde(rename = "type", default = "default_type")]
     entity_type: String,
+    bag_id: Option<String>,
 }
 
 fn default_type() -> String {
@@ -100,6 +101,7 @@ pub(crate) async fn add_page(
         cafe_options,
         defaults: brew_form.defaults,
         quick_note_options: brew_form.quick_note_options,
+        pre_select_bag_id: query.bag_id,
     };
 
     render_html(template).map(IntoResponse::into_response)
diff --git a/src/presentation/web/templates.rs b/src/presentation/web/templates.rs
index 6549ba1..73be525 100644
--- a/src/presentation/web/templates.rs
+++ b/src/presentation/web/templates.rs
@@ -172,6 +172,7 @@ pub struct AddTemplate {
     pub cafe_options: Vec<CafeOptionView>,
     pub defaults: BrewDefaultsView,
     pub quick_note_options: Vec<QuickNoteView>,
+    pub pre_select_bag_id: Option<String>,
 }
 
 pub fn render_template<T: Template>(template: T) -> Result<String, askama::Error> {
diff --git a/static/js/components/searchable-select.js b/static/js/components/searchable-select.js
index bbbedf6..d8ed7f7 100644
--- a/static/js/components/searchable-select.js
+++ b/static/js/components/searchable-select.js
@@ -47,6 +47,17 @@ customElements.define("searchable-select", class extends HTMLElement {
     this.appendChild(searchWrap);
     this.appendChild(selectedWrap);
 
+    const initialValue = this.getAttribute("initial-value");
+    if (initialValue) {
+      const match = buttons.find((btn) => btn.value === initialValue);
+      if (match) {
+        hidden.value = match.value;
+        display.textContent = match.dataset.display;
+        searchWrap.classList.add("hidden");
+        selectedWrap.classList.remove("hidden");
+      }
+    }
+
     search.addEventListener("input", () => {
       const q = search.value.toLowerCase();
       options.classList.toggle("hidden", !q);
diff --git a/templates/pages/add.html b/templates/pages/add.html
index 12a7534..88bcfac 100644
--- a/templates/pages/add.html
+++ b/templates/pages/add.html
@@ -257,7 +257,7 @@
         <div class="grid gap-4 sm:grid-cols-2">
           <div class="flex flex-col gap-1 text-sm">
             <span class="text-text">Bag *</span>
-            <searchable-select name="bag_id" placeholder="Type to search bags&hellip;">
+            <searchable-select name="bag_id" placeholder="Type to search bags&hellip;"{% if let Some(bag_id) = pre_select_bag_id %} initial-value="{{ bag_id }}"{% endif %}>
               {% for bag in bag_options %}
               <button type="button" value="{{ bag.id }}" data-display="{{ bag.roast_name }}"
                 class="w-full px-3 py-2 text-left text-sm hover:bg-surface-alt transition">
diff --git a/templates/partials/bag_card.html b/templates/partials/bag_card.html
index 7022ddf..8d0a2f9 100644
--- a/templates/partials/bag_card.html
+++ b/templates/partials/bag_card.html
@@ -11,7 +11,7 @@
   </p>
   {% if is_authenticated %}
   <div class="mt-3 pt-3 border-t flex gap-3">
-    <a href="/data?type=brews" class="inline-flex items-center gap-1 text-sm font-medium text-accent hover:text-accent-hover">
+    <a href="/add?type=brew&bag_id={{ bag.id }}" class="inline-flex items-center gap-1 text-sm font-medium text-accent hover:text-accent-hover">
       {% call icons::plus_circle("h-4 w-4") %}
       Brew
     </a>