feat(navigation): link app names on host detail to app detail with back button

- Host detail: application names are now clickable links to
  /applications/:id?back=/hosts/:host_id
- Application detail: back button reads the ?back query param and
  returns to the originating host page (label "← Host") or falls
  back to /applications ("← Applications")

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-16 22:38:39 +02:00
parent a8d98aeee2
commit 255f20cda4
2 changed files with 18 additions and 3 deletions

View File

@@ -7,7 +7,7 @@
// - Delete button : confirmation modal, then navigates back to /applications
use leptos::prelude::*;
use leptos_router::hooks::{use_navigate, use_params_map};
use leptos_router::hooks::{use_navigate, use_params_map, use_query_map};
use crate::api::applications::{
AddPortToApplication, DeleteApplication, RemovePortFromApplication,
@@ -66,6 +66,16 @@ pub fn ApplicationDetailPage() -> impl IntoView {
.unwrap_or(0)
};
let query = use_query_map();
let back_url = move || {
query.read().get("back")
.map(|s| s.to_string())
.unwrap_or_else(|| "/applications".to_string())
};
let back_label = move || {
if back_url().starts_with("/hosts/") { "← Host" } else { "← Applications" }
};
let update_action = ServerAction::<UpdateApplication>::new();
let add_port_action = ServerAction::<AddPortToApplication>::new();
let remove_port_action = ServerAction::<RemovePortFromApplication>::new();
@@ -182,7 +192,9 @@ pub fn ApplicationDetailPage() -> impl IntoView {
view! {
// ── Page header ───────────────────────────────────
<div class="page-header detail-page-header">
<a class="back-btn" href="/applications">"← Applications"</a>
<a class="back-btn" href=move || back_url()>
{move || back_label()}
</a>
<h1 class="detail-page-title">{move || name_sig.get()}</h1>
</div>

View File

@@ -385,7 +385,10 @@ pub fn HostDetailPage() -> impl IntoView {
let app_id = app.id;
view! {
<div class="app-row">
<span class="app-row__name">{app.name}</span>
<a class="table-link"
href=format!("/applications/{}?back=/hosts/{}", app_id, id)>
{app.name}
</a>
<button
class="btn-danger"
type="button"