Refactor and migration of TFMS, other changes

Author: jivebiscuit

README.md

@@ -2,8 +2,8 @@
 
 Unified front-end shell for Houston ARTCC controller utilities.
 
-Current tools are registered in a single data file and rendered as searchable cards:
-- TFMS Viewer
+Current tools are registered in a single data file and rendered as launch cards:
+- TFMS
 - Alias Guide (migrated internal route)
 - ADAR Routes
 - Route Validator
@@ -24,7 +24,7 @@ Then open [http://localhost:3000](http://localhost:3000).
 
 - `data/tools.json`: tool registry (add/edit tools here)
 - `app/page.js`: homepage entry
-- `components/toolkit-home.js`: searchable tool grid UI
+- `components/toolkit-home.js`: tool launcher grid UI
 - `app/tools/[id]/page.js`: per-tool detail pages
 - `app/tools/alias-guide/page.js`: migrated Alias Guide tool
 - `components/alias-guide-page.js`: refactored Alias UI (sidebar nav, search, cards)
@@ -111,6 +111,13 @@ Route Validator renders from `data/zhu-routing-rules.json` and compares filed ro
 - If live traffic fetch fails, static samples are used automatically.
 - D-ATIS remains live unless that feed fails.
 
+## TFMS Notes
+
+- TFMS currently shows:
+  - Specialty Summary
+  - Online Positions (enroute + TRACON status)
+- Split Summary is intentionally hidden for now and can be re-enabled later.
+
 ### Route Validator Statuses
 
 Current status labels:
@@ -159,7 +166,7 @@ npm run build
 
 ## Theme Modes
 
-The app now supports `Light`, `Dark`, and `System` mode via a global top-right selector.
+The app supports `Light`, `Dark`, and `System` mode via `Auto / ☀ / ☾` controls placed in tool/page headers.
 Preference is saved in `localStorage` (`theme-mode`).
 
 ## GitHub Pages Deployment

app/globals.css

@@ -1,14 +1,14 @@
 @import "tailwindcss";
 
 :root {
-  --background: #f8fafc;
-  --foreground: #0f172a;
-  --surface: #ffffff;
-  --surface-soft: #f1f5f9;
-  --surface-border: #cbd5e1;
-  --muted: #475569;
-  --accent: #0369a1;
-  --accent-strong: #075985;
+  --background: #eff4fa;
+  --foreground: #152335;
+  --surface: #f8fbff;
+  --surface-soft: #eaf0f7;
+  --surface-border: #bfcbdb;
+  --muted: #4b5f78;
+  --accent: #0b6da8;
+  --accent-strong: #0a5f93;
   --on-accent: #ffffff;
   --card-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
 }
@@ -45,8 +45,8 @@ body {
   inset: 0;
   pointer-events: none;
   background:
-    radial-gradient(circle at 10% -6%, rgba(14, 165, 233, 0.06), transparent 42%),
-    radial-gradient(circle at 90% -10%, rgba(56, 189, 248, 0.05), transparent 40%);
+    radial-gradient(circle at 10% -6%, rgba(14, 165, 233, 0.045), transparent 42%),
+    radial-gradient(circle at 90% -10%, rgba(56, 189, 248, 0.04), transparent 40%);
 }
 
 :root[data-theme="dark"] .ambient-bg {
@@ -66,36 +66,36 @@ body {
 }
 
 .theme-switcher {
-  position: fixed;
-  top: 0.9rem;
-  right: 0.9rem;
-  z-index: 60;
   display: flex;
   align-items: center;
-  gap: 0.45rem;
-  background: color-mix(in srgb, var(--surface) 92%, transparent);
-  border: 1px solid var(--surface-border);
-  border-radius: 0.7rem;
-  padding: 0.35rem 0.45rem;
-  box-shadow: var(--card-shadow);
+  gap: 0.2rem;
+  border-radius: 0.65rem;
+  padding: 0.1rem;
 }
 
-.theme-label {
+.theme-mode-button {
+  border: 1px solid var(--surface-border);
+  border-radius: 0.55rem;
+  background: transparent;
+  color: var(--muted);
   font-size: 0.72rem;
   font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--muted);
+  letter-spacing: 0.06em;
+  line-height: 1;
+  padding: 0.33rem 0.6rem;
+  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
 }
 
-.theme-select {
-  border: 1px solid var(--surface-border);
-  border-radius: 0.5rem;
-  background: var(--surface);
+.theme-mode-button:hover {
   color: var(--foreground);
-  font-size: 0.78rem;
-  font-weight: 600;
-  padding: 0.2rem 0.35rem;
+  background: var(--surface-soft);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+}
+
+.theme-mode-button-active {
+  color: var(--foreground);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
 }
 
 .hero-panel {
@@ -124,6 +124,26 @@ body {
   padding: 1rem;
 }
 
+.tool-launcher-card {
+  transition:
+    box-shadow 160ms ease,
+    border-color 160ms ease,
+    background-color 160ms ease;
+}
+
+.tool-launcher-card:hover {
+  transform: none;
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border));
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent);
+  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
+}
+
+.tool-launcher-card .button-primary:hover,
+.tool-launcher-card .button-secondary:hover {
+  transform: none;
+  filter: none;
+}
+
 .badge {
   border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
   border-radius: 9999px;
@@ -342,6 +362,10 @@ body {
   animation: feed-pulse 2.8s ease-in-out infinite;
 }
 
+.feed-indicator-static {
+  animation: none;
+}
+
 .feed-indicator-green {
   background: #22c55e;
   color: #22c55e;
@@ -357,6 +381,18 @@ body {
   color: #ef4444;
 }
 
+.feed-indicator-gray {
+  background: #94a3b8;
+  color: #94a3b8;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35);
+}
+
+:root[data-theme="light"] .feed-indicator-gray {
+  background: #475569;
+  color: #475569;
+  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.45);
+}
+
 @keyframes feed-pulse {
   0%,
   100% {

app/layout.js

@@ -1,5 +1,4 @@
 import { Rajdhani, Source_Sans_3 } from "next/font/google";
-import ThemeSwitcher from "@/components/theme-switcher";
 import "./globals.css";
 
 const headingFont = Rajdhani({
@@ -35,7 +34,6 @@ export default function RootLayout({ children }) {
     <html lang="en" suppressHydrationWarning>
       <body className={`${headingFont.variable} ${bodyFont.variable} antialiased`}>
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
-        <ThemeSwitcher />
         {children}
       </body>
     </html>

app/page.js

@@ -1,9 +1,8 @@
 import ToolkitHome from "@/components/toolkit-home";
-import { getToolCategories, getTools } from "@/lib/tools";
+import { getTools } from "@/lib/tools";
 
 export default function Home() {
   const tools = getTools();
-  const categories = getToolCategories();
 
-  return <ToolkitHome tools={tools} categories={categories} />;
+  return <ToolkitHome tools={tools} />;
 }

app/tools/[id]/page.js

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import ThemeSwitcher from "@/components/theme-switcher";
 import { getToolById, getTools } from "@/lib/tools";
 
 export function generateStaticParams() {
@@ -34,9 +35,17 @@ export default function ToolDetailsPage({ params }) {
       <div className="ambient-bg" />
       <div className="mx-auto max-w-4xl">
         <article className="panel">
-          <p className="text-accent mb-2 text-sm font-semibold uppercase tracking-[0.24em]">
-            {tool.category}
-          </p>
+          <div className="mb-2 flex flex-wrap items-start justify-between gap-3">
+            <p className="text-accent text-sm font-semibold uppercase tracking-[0.24em]">
+              {tool.category}
+            </p>
+            <div className="flex flex-col items-end gap-2">
+              <ThemeSwitcher />
+              <Link className="button-secondary text-sm" href="/">
+                Back to Toolkit
+              </Link>
+            </div>
+          </div>
           <h1 className="font-heading text-main text-5xl font-bold tracking-wide md:text-6xl">
             {tool.name}
           </h1>
@@ -81,9 +90,6 @@ export default function ToolDetailsPage({ params }) {
             >
               View Source Repository
             </a>
-            <Link className="button-secondary" href="/">
-              Back to Toolkit
-            </Link>
           </div>
         </article>
       </div>

app/tools/tfms/page.js

@@ -0,0 +1,12 @@
+import TfmsViewerPage from "@/components/tfms-viewer-page";
+import "./styles.css";
+
+export const metadata = {
+  title: "TFMS | ZHU Controller Toolkit",
+  description:
+    "Live ZHU traffic flow summaries with specialty and split projections from VATSIM data.",
+};
+
+export default function TfmsToolPage() {
+  return <TfmsViewerPage />;
+}