real-time list counts

src/views.rs

@@ -795,7 +795,7 @@ pub fn list_page(
                         div {
                             p class="eyebrow" { "SHARED LIST" }
                             h1 { (list.name) }
-                            p class="list-meta" { (items.iter().filter(|item| !item.checked).count()) " items to get" }
+                            (list_meta_fragment(items, false))
                         }
                         div class="list-topbar-actions" {
                             @if list.archived_at.is_some() {
@@ -1095,6 +1095,21 @@ pub fn categories_panel(categories: &[Category], csrf_token: &str, out_of_band:
     }
 }
 
+fn list_meta_fragment(items: &[Item], out_of_band: bool) -> Markup {
+    let left = items.iter().filter(|item| !item.checked).count();
+    let total = items.len();
+    let meta = html! {
+        p id="list-meta" class="list-meta" { (left) " items left out of " (total) }
+    };
+    if out_of_band {
+        html! {
+            p id="list-meta" class="list-meta" hx-swap-oob="outerHTML" { (left) " items left out of " (total) }
+        }
+    } else {
+        meta
+    }
+}
+
 pub fn live_list_fragments(
     list: &GroceryList,
     items: &[Item],
@@ -1104,6 +1119,7 @@ pub fn live_list_fragments(
 ) -> Markup {
     let editable = list.archived_at.is_none();
     html! {
+        (list_meta_fragment(items, true))
         (list_items_fragment(list, items, categories, csrf_token, true, editable))
         (list_meals_panel(list_meals, list.id, csrf_token, true, editable))
     }