test(html-examples): reconcile keyed search rows

Make the active-search example use a safer keyed reconciliation path for filtered rows: remove filtered-out keys, replace retained keys, and append newly visible keys.

req: list/006

req: htmx_equivalents/001

req: examples/001

examples/html_examples/README.md

@@ -38,7 +38,7 @@ Status legend:
 | `lazy-load` | implemented | `data-hemx-revealed` dispatches a generated form once when visible; the server swaps a generated lazy panel. | `gallery.heml`, `gallery_handlers::lazy_load`, `LazyPanel` |
 | `inline-validation` | implemented | A generated form reports field failure with `validate_email_form.error(...)`, focuses the field, and updates status text. | `templates/gallery.heml`, `gallery_handlers::validate_email` |
 | `infinite-scroll` | implemented | A revealed sentinel form posts to the same server-owned loading model and replaces generated keyed rows. | `gallery_handlers::infinite_scroll`, `data-hemx-revealed`, `infinite_row` |
-| `active-search` | implemented | The search form posts a query; the server derives result rows and replaces generated `search_result` keyed partials. | `gallery_handlers::search`, `SearchResult` |
+| `active-search` | implemented | The search form posts a query; the server derives result rows and reconciles generated keyed partials by removing filtered-out keys, replacing retained keys, and appending newly visible keys. | `gallery_handlers::search`, `keyed_filter_effects`, `SearchResult` |
 | `progress-bar` | implemented | `data-hemx-interval` ticks a server-owned progress value and replaces a generated progress partial. | `gallery_handlers::tick_progress`, `ProgressMeter` |
 | `value-select` | implemented | The first select posts a generated form; the server derives and replaces generated option rows for the second select. | `gallery_handlers::choose_category`, `ValueOption` |
 | `animations` | integration-owned | CSS transitions are presentation policy around generated replacements; hemx should only preserve stable DOM boundaries. | Use keyed partials and app CSS; no core animation framework. |

examples/html_examples/src/main.rs

@@ -458,6 +458,47 @@ fn search_results_for(query: &str) -> Vec<SearchResult> {
         .collect()
 }
 
+// Keep filtered keyed collections stable: remove filtered-out rows, replace retained
+// rows, and append newly visible rows instead of clearing the whole list. req: list/006
+fn keyed_filter_effects<T, K>(
+    previous: impl IntoIterator<Item = T>,
+    current: impl IntoIterator<Item = T>,
+    key: impl Fn(&T) -> K,
+    append: impl Fn(T) -> hemx::advanced::Effect,
+    replace: impl Fn(T) -> hemx::advanced::Effect,
+    remove: impl Fn(String) -> hemx::advanced::Effect,
+) -> Vec<hemx::advanced::Effect>
+where
+    K: ToString,
+{
+    let previous_keys = previous
+        .into_iter()
+        .map(|item| key(&item).to_string())
+        .collect::<std::collections::BTreeSet<_>>();
+    let current = current
+        .into_iter()
+        .map(|item| (key(&item).to_string(), item))
+        .collect::<Vec<_>>();
+    let current_keys = current
+        .iter()
+        .map(|(key, _)| key.clone())
+        .collect::<std::collections::BTreeSet<_>>();
+
+    let mut effects = previous_keys
+        .difference(&current_keys)
+        .cloned()
+        .map(remove)
+        .collect::<Vec<_>>();
+    effects.extend(current.into_iter().map(|(item_key, item)| {
+        if previous_keys.contains(&item_key) {
+            replace(item)
+        } else {
+            append(item)
+        }
+    }));
+    effects
+}
+
 #[hemx::component("gallery")]
 mod gallery_handlers {
     use super::*;
@@ -599,15 +640,13 @@ mod gallery_handlers {
             *stored_query = query.clone();
             previous_query
         };
-        let previous_results = search_results_for(&previous_query);
-        let mut effects = previous_results
-            .into_iter()
-            .map(|result| gallery::search_result.remove(result.id.to_string()))
-            .collect::<Vec<_>>();
-        effects.extend(
-            search_results_for(&query)
-                .into_iter()
-                .map(|result| gallery::search_result.append(result)),
+        let mut effects = keyed_filter_effects(
+            search_results_for(&previous_query),
+            search_results_for(&query),
+            |result| result.id,
+            |result| gallery::search_result.append(result),
+            |result| gallery::search_result.replace(result),
+            |key| gallery::search_result.remove(key),
         );
         effects.push(gallery::search_status.set(if query.is_empty() {
             "Showing all results".into()
@@ -944,7 +983,25 @@ mod tests {
                 .batch,
         );
         assert!(search.removes_key(gallery::search_result, "1"));
-        assert!(search.inserts_html_containing(gallery::search_result, "3", "Gamma"));
+        assert!(search.removes_key(gallery::search_result, "2"));
+        assert!(search.removes_key(gallery::search_result, "4"));
+        assert!(search.replaces_keyed_html_containing(gallery::search_result, "3", "Gamma"));
+
+        let broader_search = inspect_batch(
+            InteractionRequest::from(form(gallery::search, &[("query", "a")]))
+                .dispatch_async(handlers(state.clone()))
+                .await
+                .unwrap()
+                .batch,
+        );
+        assert!(broader_search.inserts_html_containing(gallery::search_result, "1", "Alpha"));
+        assert!(broader_search.inserts_html_containing(gallery::search_result, "2", "Beta"));
+        assert!(broader_search.replaces_keyed_html_containing(
+            gallery::search_result,
+            "3",
+            "Gamma"
+        ));
+        assert!(broader_search.inserts_html_containing(gallery::search_result, "4", "Delta"));
 
         let row_save = inspect_batch(
             InteractionRequest::from(form(