Dashboard: kind filters on Programs, tools off Services page, in-app confirm modals

- /services was returning every non-job deployment (tools, statics, remotes);
  filter it to kind==service so the Services page shows only services.
- Programs page gains kind-filter chips (All / Service / Job / Tool / Static /
  Reference) with per-kind counts, colored to match KindBadge.
- Replace window.confirm with a reusable ConfirmModal (styled, danger variant,
  Esc/Enter, preserves bulleted bodies); FormFooter's delete uses it, so program/
  service/job deletion now confirms in-app with the enumerated cascade list.

castle-api 58 passed; /services live drops from 37 to 15 (services only).
This commit is contained in:
2026-07-01 11:59:14 -07:00
parent 38074806c1
commit 876b424722
7 changed files with 200 additions and 22 deletions

View File

@@ -1,6 +1,7 @@
import { useMemo, useState } from "react"
import { Trash2 } from "lucide-react"
import { SecretsEditor } from "@/components/SecretsEditor"
import { ConfirmModal } from "@/components/ConfirmModal"
const INPUT =
"bg-black/30 border border-[var(--border)] rounded px-3 py-1.5 text-sm focus:outline-none focus:border-[var(--primary)]"
@@ -185,15 +186,14 @@ export function FormFooter({
/** When set, removal is disallowed and this reason is shown instead of the button. */
deleteBlocked?: string
}) {
const [confirmOpen, setConfirmOpen] = useState(false)
return (
<div className="flex items-center justify-between pt-3 border-t border-[var(--border)]">
{deleteBlocked ? (
<span className="text-xs text-amber-400">{deleteBlocked}</span>
) : onDelete ? (
<button
onClick={() => {
if (window.confirm(confirmMessage ?? `${deleteLabel}?`)) onDelete()
}}
onClick={() => setConfirmOpen(true)}
className="flex items-center gap-1.5 text-xs text-red-400 hover:text-red-300"
>
<Trash2 size={12} /> {deleteLabel}
@@ -208,6 +208,20 @@ export function FormFooter({
>
{saving ? "Saving…" : saved ? "Saved" : "Save"}
</button>
{onDelete && (
<ConfirmModal
open={confirmOpen}
title={deleteLabel}
body={confirmMessage}
confirmLabel={deleteLabel}
danger
onConfirm={() => {
setConfirmOpen(false)
onDelete()
}}
onCancel={() => setConfirmOpen(false)}
/>
)}
</div>
)
}