From 647da0dddf63244d621d7de52da733cf1e106d3a Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sun, 19 Apr 2026 17:03:27 -0400
Subject: [PATCH] feat(app-shell): promote Settings to a top-level nav item

Previously Settings was reachable only via direct URL or logout menu.
Add it to the nav (visible in both demo and real modes) and drop the
now-redundant in-page title so the shell header supplies the heading
instead.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/layouts/app-shell.test.tsx |  2 ++
 apps/fabro-web/app/layouts/app-shell.tsx      |  2 ++
 apps/fabro-web/app/routes/settings.tsx        | 15 ++++-----------
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/apps/fabro-web/app/layouts/app-shell.test.tsx b/apps/fabro-web/app/layouts/app-shell.test.tsx
index ee75d543f..8cffba752 100644
--- a/apps/fabro-web/app/layouts/app-shell.test.tsx
+++ b/apps/fabro-web/app/layouts/app-shell.test.tsx
@@ -8,6 +8,7 @@ describe("getVisibleNavigation", () => {
     expect(names).toContain("Workflows");
     expect(names).toContain("Runs");
     expect(names).toContain("Insights");
+    expect(names).toContain("Settings");
   });
 
   test("hides Workflows and Insights in production mode", () => {
@@ -16,5 +17,6 @@ describe("getVisibleNavigation", () => {
     expect(names).not.toContain("Workflows");
     expect(names).not.toContain("Insights");
     expect(names).toContain("Runs");
+    expect(names).toContain("Settings");
   });
 });
diff --git a/apps/fabro-web/app/layouts/app-shell.tsx b/apps/fabro-web/app/layouts/app-shell.tsx
index 8c9e74070..896808750 100644
--- a/apps/fabro-web/app/layouts/app-shell.tsx
+++ b/apps/fabro-web/app/layouts/app-shell.tsx
@@ -11,6 +11,7 @@ import {
   Bars3Icon,
   BeakerIcon,
   ChartBarIcon,
+  Cog6ToothIcon,
   MoonIcon,
   PlayIcon,
   RectangleStackIcon,
@@ -30,6 +31,7 @@ const allNavigation = [
   { name: "Workflows", href: "/workflows", icon: RectangleStackIcon, demoOnly: true },
   { name: "Runs", href: "/runs", icon: PlayIcon, demoOnly: false },
   { name: "Insights", href: "/insights", icon: ChartBarIcon, demoOnly: true },
+  { name: "Settings", href: "/settings", icon: Cog6ToothIcon, demoOnly: false },
 ];
 
 export function getVisibleNavigation(demoMode: boolean) {
diff --git a/apps/fabro-web/app/routes/settings.tsx b/apps/fabro-web/app/routes/settings.tsx
index 3a0c805d7..43556597a 100644
--- a/apps/fabro-web/app/routes/settings.tsx
+++ b/apps/fabro-web/app/routes/settings.tsx
@@ -12,8 +12,6 @@ export function meta({}: any) {
   return [{ title: "Settings — Fabro" }];
 }
 
-export const handle = { hideHeader: true };
-
 export async function loader({ request }: any) {
   const settings = await apiJson<ServerSettings>("/settings", { request });
   return { settings };
@@ -24,15 +22,10 @@ export default function Settings({ loaderData }: any) {
 
   return (
     <div className="mx-auto max-w-4xl">
-      <header className="mb-6">
-        <h1 className="text-2xl font-semibold tracking-tight text-fg">
-          Settings
-        </h1>
-        <p className="mt-2 max-w-[60ch] text-sm/6 text-fg-3 text-pretty">
-          Redacted snapshot of the server configuration. Edit values with the
-          Fabro CLI; changes take effect on the next server restart.
-        </p>
-      </header>
+      <p className="mb-6 max-w-[60ch] text-sm/6 text-fg-3 text-pretty">
+        Redacted snapshot of the server configuration. Edit values with the
+        Fabro CLI; changes take effect on the next server restart.
+      </p>
       <CollapsibleFile
         file={{ name: "server.json", contents: JSON.stringify(settings, null, 2), lang: "json" }}
       />