morphing to fix scroll reset issues

src/assets.rs

@@ -66,6 +66,7 @@ pub static STORE: LazyLock<StaticAssetStore> = LazyLock::new(|| {
         "passkey-register.js" => "../static/passkey-register.js",
         "password-toggle.js" => "../static/password-toggle.js",
         "htmx.min.js" => "../static/htmx.min.js",
+        "idiomorph-ext.min.js" => "../static/idiomorph-ext.min.js",
         "htmx-ws.min.js" => "../static/htmx-ws.min.js",
         "favicon.ico" => "../static/favicon.ico",
         "favicon-32x32.png" => "../static/favicon-32x32.png",

src/views.rs

@@ -444,7 +444,7 @@ pub fn meal_picker(
                                     form
                                         hx-post=(format!("/lists/{}/add-meal", list_id))
                                         hx-target="#list-items"
-                                        hx-swap="outerHTML"
+                                        hx-swap="morph:outerHTML"
                                         hx-on::after-request="if (event.detail.successful) this.closest('.meal-picker-backdrop').remove()"
                                         class="meal-picker-row"
                                     {
@@ -864,7 +864,7 @@ fn list_content(
                 class="add-item-form"
                 hx-post=(format!("/lists/{}/items", list.id))
                 hx-target="#list-items"
-                hx-swap="outerHTML"
+                hx-swap="morph:outerHTML"
                 hx-on::after-request="if (event.detail.successful) this.reset()"
             {
                 input type="hidden" name="csrf" value=(csrf_token);
@@ -891,7 +891,7 @@ pub fn list_items_fragment(
 ) -> Markup {
     if out_of_band {
         html! {
-            div id="list-items" class="items" data-revision=(list.revision) hx-swap-oob="outerHTML" {
+            div id="list-items" class="items" data-revision=(list.revision) hx-swap-oob="morph" {
                 (list_items_content(items, categories, csrf_token, editable))
             }
         }
@@ -975,7 +975,7 @@ fn item_row(item: &Item, categories: &[Category], csrf_token: &str, editable: bo
                     class="check-form"
                     hx-post=(format!("/lists/{}/items/{}/check", item.list_id, item.id))
                     hx-target="#list-items"
-                    hx-swap="outerHTML"
+                    hx-swap="morph:outerHTML"
                 {
                     input type="hidden" name="csrf" value=(csrf_token);
                     input type="hidden" name="checked" value=(next_checked);
@@ -1006,7 +1006,7 @@ fn item_row(item: &Item, categories: &[Category], csrf_token: &str, editable: bo
                         form
                             hx-post=(format!("/lists/{}/items/{}/edit", item.list_id, item.id))
                             hx-target="#list-items"
-                            hx-swap="outerHTML"
+                            hx-swap="morph:outerHTML"
                             class="stack"
                         {
                             input type="hidden" name="csrf" value=(csrf_token);
@@ -1025,7 +1025,7 @@ fn item_row(item: &Item, categories: &[Category], csrf_token: &str, editable: bo
                         form
                             hx-post=(format!("/lists/{}/items/{}/delete", item.list_id, item.id))
                             hx-target="#list-items"
-                            hx-swap="outerHTML"
+                            hx-swap="morph:outerHTML"
                         {
                             input type="hidden" name="csrf" value=(csrf_token);
                             button id=(format!("item-edit-delete-{}", item.id)) class="button button-danger" type="submit" { "Remove item" }
@@ -1149,7 +1149,7 @@ pub fn list_meals_panel(
                             form
                                 hx-post=(format!("/lists/{}/meals/{}/remove", list_id, meal.id))
                                 hx-target="#list-items"
-                                hx-swap="outerHTML"
+                                hx-swap="morph:outerHTML"
                                 class="list-meal-remove"
                             {
                                 input type="hidden" name="csrf" value=(csrf_token);
@@ -1313,9 +1313,10 @@ fn page(title: &str, user: Option<&User>, content: Markup) -> Markup {
                 link rel="apple-touch-icon" href=(crate::assets::url("apple-touch-icon.png"));
                 link rel="stylesheet" href=(crate::assets::url("style.css"));
                 script src=(crate::assets::url("htmx.min.js")) {}
+                script src=(crate::assets::url("idiomorph-ext.min.js")) {}
                 script src=(crate::assets::url("htmx-ws.min.js")) {}
             }
-            body hx-boost="true" {
+            body hx-boost="true" hx-ext="morph" {
                 header class="site-header" {
                     a class="brand" href="/lists" { img class="brand-mark" src=(crate::assets::url("logo.svg")) alt="Sustenance logo"; "Sustenance" }
                     @if let Some(user) = user {