feat(ui): add horizontal scrolling open bags on homepage

- Load all open bags instead of limiting to 3
- Replace grid layout with horizontal scroll container using snap
- Redesign bag cards as portrait layout with icon actions
- Add scrollbar-hide CSS utility and x_mark icon

src/application/routes/app/home.rs

@@ -63,7 +63,7 @@ async fn load_home_content(state: &AppState) -> Result<HomeContent, AppError> {
     );
     let open_bags_req = ListRequest::new(
         1,
-        PageSize::limited(3),
+        PageSize::All,
         BagSortKey::UpdatedAt,
         SortDirection::Desc,
     );

static/css/input.css

@@ -88,6 +88,16 @@ a {
   text-decoration: none;
 }
 
+/* ── Scrollbar hide ───────────────────────────────────────────── */
+
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 /* ── Form controls ─────────────────────────────────────────────── */
 
 .input-field {

templates/pages/home.html

@@ -159,7 +159,7 @@
       >View all bags &rarr;</a
     >
   </div>
-  <div id="open-bags-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+  <div id="open-bags-grid" class="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-hide">
     {% for bag in open_bags %} {{ bag_card::card(bag, is_authenticated) }} {% endfor %}
   </div>
 </section>

templates/partials/bag_card.html

@@ -1,29 +1,36 @@
 {% import "partials/icons.html" as icons %}
 {% macro card(bag, is_authenticated) %}
-<div id="bag-card-{{ bag.id }}" class="rounded-lg border bg-surface p-4">
+<div id="bag-card-{{ bag.id }}" class="relative w-[45vw] md:w-[200px] h-[280px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
-  <div class="min-w-0">
-    <span class="block truncate font-semibold text-text">{{ bag.roast_name }}</span>
-    <p class="truncate text-sm text-text-muted">{{ bag.roaster_name }}</p>
-  </div>
-  <div class="mt-2 h-1.5 rounded-full bg-surface-alt overflow-hidden">
-    <div class="h-full rounded-full bg-accent" style="width: {{ bag.used_percent }}%"></div>
-  </div>
-  <p class="mt-1 truncate text-text-muted" style="font-variant: small-caps; font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</p>
   {% if is_authenticated %}
-  <div class="mt-3 pt-3 border-t flex gap-3">
+  <button
-    <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">
+    type="button"
-      {{ icons::plus_circle("h-4 w-4") }}
+    class="absolute top-4 right-3 inline-flex h-6 w-6 items-center justify-center rounded-md text-text-muted transition hover:text-red-600 hover:bg-surface-alt"
+    title="Close Bag"
+    onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
+  >
+    {{ icons::x_mark("h-4.5 w-4.5") }}
+  </button>
+  {% endif %}
+  <div class="flex-1 pr-5">
+    <span class="block font-semibold text-text">{{ bag.roast_name }}</span>
+    <p class="mt-1 text-sm text-text-muted">{{ bag.roaster_name }}</p>
+  </div>
+  {% if is_authenticated %}
+  <div class="mb-4 flex items-center">
+    <a href="/add?type=brew&bag_id={{ bag.id }}"
+      class="inline-flex h-8 items-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
+      {{ icons::cup("h-4 w-4") }}
       Brew
     </a>
-    <button
-      type="button"
-      class="inline-flex items-center gap-1 text-sm font-medium text-text-muted hover:text-text"
-      onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
-    >
-      {{ icons::x_circle("h-4 w-4") }}
-      Close
-    </button>
   </div>
   {% endif %}
+  <div class="flex flex-col items-center">
+    <div class="w-full">
+      <div class="h-2 rounded-full bg-surface-alt overflow-hidden">
+        <div class="h-full rounded-full bg-accent" style="width: {{ bag.used_percent }}%"></div>
+      </div>
+      <p class="mt-1 text-text-muted" style="font-variant: small-caps; font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</p>
+    </div>
+  </div>
 </div>
 {% endmacro %}

templates/partials/icons.html

@@ -157,3 +157,9 @@
   <path fill-rule="evenodd" d="M8 7a5 5 0 1 1 3.61 4.804l-1.903 1.903A1 1 0 0 1 9 14H8v1a1 1 0 0 1-1 1H6v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2a1 1 0 0 1 .293-.707L8.196 8.39A5.002 5.002 0 0 1 8 7Zm5-3a.75.75 0 0 0 0 1.5A1.5 1.5 0 0 1 14.5 7 .75.75 0 0 0 16 7a3 3 0 0 0-3-3Z" clip-rule="evenodd" />
 </svg>
 {% endmacro %}
+
+{% macro x_mark(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
+</svg>
+{% endmacro %}