Add app shell with left nav; split dashboard into top-level pages

Introduce a Layout shell with a collapsible left sidebar (state persisted
to localStorage) that becomes a hamburger drawer under md. Break the single
Dashboard into routed pages — Overview (summary tiles + node bar), Services,
Scheduled, Programs, Gateway, Mesh — nested under the shared Layout via an
Outlet. Centralize useEventStream in Layout (drop the per-page duplicates),
repoint detail-page back links at their section pages, and remove the now-dead
SectionHeader component / SECTION_HEADERS map (each page owns its header).
This commit is contained in:
2026-06-30 22:52:28 -07:00
parent 49e9e5adcc
commit bc915d23fb
17 changed files with 470 additions and 161 deletions

View File

@@ -1,6 +1,6 @@
import { useParams, Link } from "react-router-dom"
import { Server, ExternalLink, Terminal } from "lucide-react"
import { useService, useStatus, useEventStream, useCaddyfile } from "@/services/api/hooks"
import { useService, useStatus, useCaddyfile } from "@/services/api/hooks"
import { runnerLabel, subdomainUrl } from "@/lib/labels"
import { HealthBadge } from "@/components/HealthBadge"
import { LogViewer } from "@/components/LogViewer"
@@ -10,7 +10,6 @@ import { SystemdPanel } from "@/components/detail/SystemdPanel"
import { ConfigPanel } from "@/components/detail/ConfigPanel"
export function ServiceDetailPage() {
useEventStream()
const { name } = useParams<{ name: string }>()
const { data: deployment, isLoading, error, refetch } = useService(name ?? "")
const { data: statusResp } = useStatus()
@@ -36,7 +35,7 @@ export function ServiceDetailPage() {
return (
<div className="max-w-3xl mx-auto px-6 py-8">
<DetailHeader
backTo="/"
backTo="/services"
backLabel="Back to Services"
name={deployment.id}
behavior="daemon"