feat(fleet): §16 orchestrator tab foundation (Deployments, Federation, Secrets) (#856)

Reserves three navigable but non-functional tab slots on the Fleet page so each future orchestrator surface can land as a tab content swap rather than a navigation redesign. Each tab opens a coming-soon placeholder card listing the planned actions for that surface.
2026-08-25 09:46:47 +00:00 · 2026-05-01 00:10:56 -04:00
parent a25acbec7c
commit b8437e8780
2 changed files with 115 additions and 0 deletions
@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+
+export function SoonBadge() {
+  return (
+    <span className="ml-1.5 font-mono text-[9px] uppercase tracking-[0.2em] text-brand">
+      SOON
+    </span>
+  );
+}
+
+interface FleetSoonPlaceholderProps {
+  icon: ReactNode;
+  kicker: string;
+  title: string;
+  description: string;
+  plannedActions: string[];
+}
+
+export function FleetSoonPlaceholder({
+  icon,
+  kicker,
+  title,
+  description,
+  plannedActions,
+}: FleetSoonPlaceholderProps) {
+  return (
+    <div className="mx-auto max-w-3xl rounded-xl border border-card-border border-t-card-border-top bg-card shadow-card-bevel">
+      <div className="flex flex-col gap-5 p-8">
+        <div className="flex items-center justify-between gap-3">
+          <div className="inline-flex items-center gap-2 text-brand">
+            <span className="inline-flex h-4 w-4 items-center justify-center" aria-hidden>
+              {icon}
+            </span>
+            <span className="font-mono text-[10px] uppercase tracking-[0.2em]">{kicker}</span>
+          </div>
+          <span className="rounded border border-brand/20 bg-brand/10 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-[0.2em] text-brand">
+            Coming soon
+          </span>
+        </div>
+
+        <h3 className="font-serif text-2xl italic leading-tight tracking-[-0.01em] text-stat-value">
+          {title}
+        </h3>
+
+        <p className="font-sans text-sm leading-relaxed text-stat-subtitle">
+          {description}
+        </p>
+
+        <div className="flex flex-col gap-2 border-t border-border pt-4">
+          <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-stat-icon">
+            Planned actions
+          </span>
+          <div className="flex flex-wrap gap-1.5">
+            {plannedActions.map((action) => (
+              <span
+                key={action}
+                className="rounded border border-border bg-muted/40 px-2 py-1 font-mono text-[9px] uppercase tracking-[0.14em] text-stat-subtitle"
+              >
+                {action}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}