feat(host-detail): replace checkboxes with pick list + selected tags in add-app modal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/client/host_detail.rs

@@ -20,9 +20,15 @@ use crate::models::Application;
 
 // ─── Add applications modal ───────────────────────────────────────────────────
 
-// Multi-select modal: shows every application not yet linked to the host.
+// Scrollable pick list + selected tags:
-// The auto-close Effect lives in the PARENT so that reopening the modal
+//   - Top: scrollable list of available apps; clicking one moves it to the
-// after a previous success does not immediately dismiss it again.
+//     selected section and removes it from the list.
+//   - Bottom: selected apps shown as removable tags; clicking × puts the app
+//     back in the list.
+//
+// The auto-close Effect lives in the PARENT to avoid the re-trigger bug
+// (an Effect inside a conditionally-rendered component fires on mount and
+// would immediately close the modal if the action already held a past Ok value).
 #[component]
 fn AddAppModal(
     host_id: i64,
@@ -30,8 +36,8 @@ fn AddAppModal(
     add_action: ServerAction<AddHostApplications>,
     show_modal: RwSignal<bool>,
 ) -> impl IntoView {
-    // Tracks which application IDs the user has checked.
+    // Full Application structs so names are available in the selected tag list.
-    let selected: RwSignal<Vec<i64>> = RwSignal::new(vec![]);
+    let selected: RwSignal<Vec<Application>> = RwSignal::new(vec![]);
 
     view! {
         <div class="modal-backdrop" on:click=move |_| show_modal.set(false)>
@@ -45,47 +51,96 @@ fn AddAppModal(
                 </div>
 
                 <div class="modal__body">
-                    {move || available_apps_res.get().map(|res| match (*res).clone() {
+
+                    // ── Scrollable pick list ──────────────────────────────────
+                    {move || match available_apps_res.get() {
+                        None => view! { <p class="empty">"Loading…"</p> }.into_any(),
+                        Some(r) => match (*r).clone() {
                             Err(e) => view! {
-                            <p class="error">"Could not load applications: " {e.to_string()}</p>
+                                <p class="error">
+                                    "Could not load applications: " {e.to_string()}
+                                </p>
                             }.into_any(),
+                            Ok(apps) => {
+                                // Exclude already-selected apps from the displayed list.
+                                let sel_ids: Vec<i64> = selected.get()
+                                    .iter().map(|a| a.id).collect();
+                                let displayed: Vec<Application> = apps.into_iter()
+                                    .filter(|a| !sel_ids.contains(&a.id))
+                                    .collect();
 
-                        Ok(apps) if apps.is_empty() => view! {
+                                if displayed.is_empty() && sel_ids.is_empty() {
-                            <p class="empty">"All applications are already linked to this host."</p>
-                        }.into_any(),
-
-                        Ok(apps) => view! {
-                            <div class="app-select-list">
-                                {apps.into_iter().map(|app| {
-                                    let app_id = app.id;
                                     view! {
-                                        <label class="app-select-item">
+                                        <p class="empty">
-                                            <input
+                                            "All applications are already linked to this host."
-                                                type="checkbox"
+                                        </p>
-                                                on:change=move |e| {
+                                    }.into_any()
-                                                    let checked = event_target_checked(&e);
+                                } else if displayed.is_empty() {
-                                                    selected.update(|v| {
+                                    view! {
-                                                        if checked {
+                                        <p class="empty">
-                                                            if !v.contains(&app_id) { v.push(app_id); }
+                                            "All available applications have been selected."
+                                        </p>
+                                    }.into_any()
                                 } else {
-                                                            v.retain(|&x| x != app_id);
+                                    view! {
-                                                        }
+                                        <ul class="app-pick-list">
+                                            {displayed.into_iter().map(|app| {
+                                                let app_clone = app.clone();
+                                                view! {
+                                                    <li class="app-pick-item"
+                                                        on:click=move |_| {
+                                                            selected.update(|v| {
+                                                                v.push(app_clone.clone());
                                                             });
                                                         }
-                                            />
+                                                    >
+                                                        <span>{app.name}</span>
+                                                        <span class="app-pick-item__add">"+"</span>
+                                                    </li>
+                                                }
+                                            }).collect_view()}
+                                        </ul>
+                                    }.into_any()
+                                }
+                            }
+                        }
+                    }}
+
+                    // ── Selected tags (shown once at least one app is chosen) ─
+                    {move || (!selected.get().is_empty()).then(|| {
+                        let sel = selected.get();
+                        view! {
+                            <div class="app-selected-section">
+                                <span class="app-selected-label">"Selected:"</span>
+                                <div class="app-selected-list">
+                                    {sel.into_iter().map(|app| {
+                                        let app_id = app.id;
+                                        view! {
+                                            <span class="app-selected-tag">
                                                 {app.name}
-                                        </label>
+                                                <button
+                                                    class="app-selected-tag__remove"
+                                                    type="button"
+                                                    aria-label="Remove"
+                                                    on:click=move |_| {
+                                                        selected.update(|v| {
+                                                            v.retain(|x| x.id != app_id);
+                                                        });
+                                                    }
+                                                >"×"</button>
+                                            </span>
                                         }
                                     }).collect_view()}
                                 </div>
-                        }.into_any(),
-                    })}
                             </div>
+                        }
+                    })}
 
                     {move || add_action.value().get()
                         .and_then(|r| r.err())
                         .map(|e| view! { <p class="error">{e.to_string()}</p> })
                     }
+                </div>
 
                 <div class="modal__actions">
                     <button class="btn-secondary" type="button"
@@ -99,7 +154,7 @@ fn AddAppModal(
                         on:click=move |_| {
                             let ids_str = selected.get_untracked()
                                 .iter()
-                                .map(|id| id.to_string())
+                                .map(|a| a.id.to_string())
                                 .collect::<Vec<_>>()
                                 .join(",");
                             if !ids_str.is_empty() {

style/rust-ipam.css

@@ -1249,33 +1249,99 @@ td.col-actions {
   font-size: var(--font-sm);
 }
 
-/* Checkbox list inside the "Add applications" modal */
+/* ── Pick list (scrollable, click to select) ── */
-.app-select-list {
+.app-pick-list {
-  display: flex;
+  list-style: none;
-  flex-direction: column;
+  margin: 0 0 var(--size-sm);
-  gap: 0.25rem;
+  padding: 0;
-  max-height: 320px;
+  max-height: 220px;
   overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 6px;
 }
 
-.app-select-item {
+.app-pick-item {
   display: flex;
   align-items: center;
-  gap: var(--size-sm);
+  justify-content: space-between;
-  padding: var(--size-sm) var(--size-xs);
+  padding: var(--size-sm) var(--size-md);
-  border-radius: 4px;
   cursor: pointer;
   font-size: var(--font-sm);
+  border-bottom: 1px solid var(--border);
+  transition: background 0.1s;
 }
 
-.app-select-item:hover {
+.app-pick-item:last-child {
-  background: var(--bg-surface);
+  border-bottom: none;
 }
 
-.app-select-item input[type="checkbox"] {
+.app-pick-item:hover {
-  width: 16px;
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
-  height: 16px;
+  color: var(--accent);
-  flex-shrink: 0;
+}
+
+.app-pick-item__add {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--accent);
+  opacity: 0.7;
+}
+
+.app-pick-item:hover .app-pick-item__add {
+  opacity: 1;
+}
+
+/* ── Selected tags (shown below the pick list) ── */
+.app-selected-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-xs);
+  padding-top: var(--size-sm);
+  border-top: 1px solid var(--border);
+  margin-top: var(--size-xs);
+}
+
+.app-selected-label {
+  font-size: var(--font-xs, 0.75rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+.app-selected-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-xs);
+}
+
+.app-selected-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px 2px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
+  color: var(--accent);
+  font-size: var(--font-sm);
+  font-weight: 500;
+}
+
+.app-selected-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0 2px;
   cursor: pointer;
-  accent-color: var(--accent);
+  font-size: 0.9rem;
+  color: var(--accent);
+  opacity: 0.7;
+  line-height: 1;
+}
+
+.app-selected-tag__remove:hover {
+  opacity: 1;
 }