From 20f3171947cb6c966d3bf8fa31a36e6e74ca53da Mon Sep 17 00:00:00 2001
From: Mao Nakamoto <41178744+maonakamoto@users.noreply.github.com>
Date: Mon, 31 Aug 2026 09:58:24 +0200
Subject: [PATCH] refactor(nav): the footer promised what only the nav could
 keep
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

NAV_ITEMS says "only routes that actually exist belong here — a nav link to a
404 is a lie". The footer carried the same sentence about itself, and then
restated six of those routes as its own literal <Link>s. Nothing tied the two
lists together, so removing a page from the nav left the footer pointing at it
with no way to notice. Both files promised the same thing and only one of them
could keep it.

FOOTER_SECTIONS now names hrefs instead of repeating them, and the footer
renders from that. A rename in NAV_ITEMS reaches the footer for free.

Where the footer deliberately says something shorter than the nav — "Voting",
not "How voting works"; "API", not "Integration" — that is now an explicit
`label` override rather than an independently typed second copy. The
difference is recorded as a choice instead of looking like drift.

The sibling pillars and the source-code link already came from their own SSOTs
(ECOSYSTEM_PILLARS, SOLON_GITHUB_URL) and still do.

Six tests, mutation-proven: deleting /security from NAV_ITEMS alone — exactly
the regression this prevents — fails the suite and names the orphaned footer
link. Verify green (lint, typecheck, design:check, 82 tests).

Found by a fleet-wide navigation audit across 20 repos.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XeELB8b3N4JrT2asYL9WvE
---
 src/components/ui/footer.tsx          | 131 +++++++++-----------------
 src/lib/__tests__/site-config.test.ts |  79 ++++++++++++++++
 src/lib/site-config.ts                |  62 ++++++++++++
 3 files changed, 185 insertions(+), 87 deletions(-)
 create mode 100644 src/lib/__tests__/site-config.test.ts

diff --git a/src/components/ui/footer.tsx b/src/components/ui/footer.tsx
index e8f0184..0698bda 100644
--- a/src/components/ui/footer.tsx
+++ b/src/components/ui/footer.tsx
@@ -1,7 +1,10 @@
 import Link from "next/link";
 import { ECOSYSTEM_PILLARS, SOLON_GITHUB_URL } from "@/lib/config/ecosystem";
+import { FOOTER_SECTIONS, footerLinkLabel } from "@/lib/site-config";
 
 // Only routes that actually exist belong here — a footer link to a 404 is a lie.
+// That is now structural rather than a promise: every destination below comes
+// from NAV_ITEMS, so a page removed from the nav cannot survive in the footer.
 export default function Footer() {
   const siblings = ECOSYSTEM_PILLARS.filter((p) => p.key !== "solon");
 
@@ -9,93 +12,47 @@ export default function Footer() {
     <footer className="border-t border-subtle bg-surface-public">
       <div className="section-shell py-14">
         <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
-          <div>
-            <div className="text-xs font-medium uppercase tracking-caps text-fg-tertiary">Platform</div>
-            <ul className="mt-4 space-y-2.5 text-sm text-fg-secondary">
-              <li>
-                <Link href="/features" className="transition-colors hover:text-fg-primary">
-                  Features
-                </Link>
-              </li>
-              <li>
-                <Link href="/security" className="transition-colors hover:text-fg-primary">
-                  Security
-                </Link>
-              </li>
-              <li>
-                <Link href="/integration" className="transition-colors hover:text-fg-primary">
-                  Integration
-                </Link>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <div className="text-xs font-medium uppercase tracking-caps text-fg-tertiary">Governance</div>
-            <ul className="mt-4 space-y-2.5 text-sm text-fg-secondary">
-              <li>
-                <Link href="/governance/voting" className="transition-colors hover:text-fg-primary">
-                  Voting
-                </Link>
-              </li>
-              <li>
-                <Link href="/governance/audit" className="transition-colors hover:text-fg-primary">
-                  Audit Trail
-                </Link>
-              </li>
-              <li>
-                <Link href="/treasury/bitcoin" className="transition-colors hover:text-fg-primary">
-                  Bitcoin Treasury
-                </Link>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <div className="text-xs font-medium uppercase tracking-caps text-fg-tertiary">Ecosystem</div>
-            <ul className="mt-4 space-y-2.5 text-sm text-fg-secondary">
-              <li>
-                <Link href="/ecosystem" className="transition-colors hover:text-fg-primary">
-                  Three Pillars
-                </Link>
-              </li>
-              {siblings.map((p) => (
-                <li key={p.key}>
-                  <a
-                    href={p.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="transition-colors hover:text-fg-primary"
-                  >
-                    {p.name} — {p.role}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div>
-            <div className="text-xs font-medium uppercase tracking-caps text-fg-tertiary">Resources</div>
-            <ul className="mt-4 space-y-2.5 text-sm text-fg-secondary">
-              <li>
-                <Link href="/about" className="transition-colors hover:text-fg-primary">
-                  About
-                </Link>
-              </li>
-              <li>
-                <Link href="/integration" className="transition-colors hover:text-fg-primary">
-                  API
-                </Link>
-              </li>
-              <li>
-                <a
-                  href={SOLON_GITHUB_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="transition-colors hover:text-fg-primary"
-                >
-                  Source Code
-                </a>
-              </li>
-            </ul>
-          </div>
+          {FOOTER_SECTIONS.map((section) => (
+            <div key={section.title}>
+              <div className="text-xs font-medium uppercase tracking-caps text-fg-tertiary">
+                {section.title}
+              </div>
+              <ul className="mt-4 space-y-2.5 text-sm text-fg-secondary">
+                {section.links.map((link) => (
+                  <li key={`${section.title}:${link.href}`}>
+                    <Link href={link.href} className="transition-colors hover:text-fg-primary">
+                      {footerLinkLabel(link)}
+                    </Link>
+                  </li>
+                ))}
+                {section.title === "Ecosystem" &&
+                  siblings.map((p) => (
+                    <li key={p.key}>
+                      <a
+                        href={p.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="transition-colors hover:text-fg-primary"
+                      >
+                        {p.name} — {p.role}
+                      </a>
+                    </li>
+                  ))}
+                {section.title === "Resources" && (
+                  <li>
+                    <a
+                      href={SOLON_GITHUB_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="transition-colors hover:text-fg-primary"
+                    >
+                      Source Code
+                    </a>
+                  </li>
+                )}
+              </ul>
+            </div>
+          ))}
         </div>
 
         <div className="mt-12 flex flex-col items-center justify-between gap-3 border-t border-subtle pt-6 sm:flex-row">
diff --git a/src/lib/__tests__/site-config.test.ts b/src/lib/__tests__/site-config.test.ts
new file mode 100644
index 0000000..4ecd83a
--- /dev/null
+++ b/src/lib/__tests__/site-config.test.ts
@@ -0,0 +1,79 @@
+/**
+ * The footer may only point at routes the nav says exist.
+ *
+ * `NAV_ITEMS` carries the comment "only routes that actually exist belong here
+ * — a nav link to a 404 is a lie", and the footer carried the same sentence
+ * about itself. But the footer restated six of those routes as its own literal
+ * `<Link>`s, and nothing tied the two lists together: removing a page from the
+ * nav left the footer pointing at it, with no way to notice. Both files
+ * promised the same thing and only one could keep it.
+ *
+ * `FOOTER_SECTIONS` now names hrefs instead of repeating them, and this test is
+ * what makes that structural rather than a convention.
+ */
+import { describe, it, expect } from "vitest";
+import {
+  NAV_ITEMS,
+  NAV_CHILDREN,
+  FOOTER_SECTIONS,
+  footerLinkLabel,
+} from "@/lib/site-config";
+
+const internal = (href: string) => href.startsWith("/");
+
+describe("FOOTER_SECTIONS", () => {
+  it("only points at routes NAV_ITEMS declares", () => {
+    const known = new Set(NAV_CHILDREN.filter((c) => internal(c.href)).map((c) => c.href));
+    const unknown = FOOTER_SECTIONS.flatMap((s) =>
+      s.links.filter((l) => !known.has(l.href)).map((l) => `${s.title} → ${l.href}`),
+    );
+    expect(unknown, `not in NAV_ITEMS:\n${unknown.join("\n")}`).toEqual([]);
+  });
+
+  it("inherits the nav's wording unless it deliberately overrides it", () => {
+    // /features carries no label, so it must read exactly as the nav does. If
+    // someone renames it in NAV_ITEMS, the footer follows without an edit.
+    const navFeatures = NAV_CHILDREN.find((c) => c.href === "/features");
+    const footFeatures = FOOTER_SECTIONS.flatMap((s) => s.links).find(
+      (l) => l.href === "/features" && !l.label,
+    );
+    expect(navFeatures).toBeDefined();
+    expect(footFeatures).toBeDefined();
+    expect(footerLinkLabel(footFeatures!)).toBe(navFeatures!.title);
+  });
+
+  it("keeps the deliberate short labels", () => {
+    // The footer says "Voting" where the nav says "How voting works". That is a
+    // choice, not drift — so it is written down as an override rather than as a
+    // second copy of the route.
+    const voting = FOOTER_SECTIONS.flatMap((s) => s.links).find(
+      (l) => l.href === "/governance/voting",
+    );
+    expect(voting?.label).toBe("Voting");
+    expect(footerLinkLabel(voting!)).toBe("Voting");
+  });
+
+  it("has no duplicate href within one footer section", () => {
+    for (const section of FOOTER_SECTIONS) {
+      const hrefs = section.links.map((l) => l.href);
+      expect(new Set(hrefs).size, `duplicate in ${section.title}`).toBe(hrefs.length);
+    }
+  });
+});
+
+describe("NAV_ITEMS", () => {
+  it("declares no duplicate internal href", () => {
+    const hrefs = NAV_CHILDREN.filter((c) => internal(c.href)).map((c) => c.href);
+    // /integration is deliberately reachable as both "Integration" and "API",
+    // so compare the (href,title) pair rather than the href alone.
+    const pairs = NAV_CHILDREN.filter((c) => internal(c.href)).map((c) => `${c.href}|${c.title}`);
+    expect(new Set(pairs).size).toBe(pairs.length);
+    expect(hrefs.length).toBeGreaterThan(0);
+  });
+
+  it("gives every section a title", () => {
+    for (const section of NAV_ITEMS) {
+      expect(section.title.trim()).not.toBe("");
+    }
+  });
+});
diff --git a/src/lib/site-config.ts b/src/lib/site-config.ts
index 8ecdf5e..fca0f37 100644
--- a/src/lib/site-config.ts
+++ b/src/lib/site-config.ts
@@ -66,3 +66,65 @@ export const HERO_CTAS = {
   primary: { href: '/dashboard/voting', labelKey: 'cta_primary' },
   secondary: { href: '/treasury/bitcoin', labelKey: 'cta_secondary' },
 } as const;
+
+/** Every internal nav destination, flattened — the set of routes that exist. */
+export const NAV_CHILDREN: NavChildItem[] = NAV_ITEMS.flatMap((s) => s.children ?? []);
+
+/**
+ * The footer, derived from NAV_ITEMS rather than hand-written beside it.
+ *
+ * The footer used to restate six of these routes as its own literal <Link>s.
+ * Nothing tied the two lists together, so removing a page from the nav left the
+ * footer pointing at it — the exact "a footer link to a 404 is a lie" the
+ * footer's own comment warns about, with no way to notice.
+ *
+ * A footer entry names an href that must already exist in NAV_ITEMS. `label`
+ * is optional and only for the places the footer deliberately says something
+ * shorter than the nav does ("Voting", not "How voting works"). Everything
+ * else inherits, so a rename in NAV_ITEMS reaches the footer for free.
+ *
+ * Enforced by src/lib/__tests__/site-config.test.ts: an href here that is not
+ * in NAV_ITEMS fails the suite.
+ */
+export interface FooterLink {
+  href: string;
+  /** Only when the footer deliberately differs from the nav's wording. */
+  label?: string;
+}
+
+export interface FooterSection {
+  title: string;
+  links: FooterLink[];
+}
+
+export const FOOTER_SECTIONS: FooterSection[] = [
+  {
+    title: 'Platform',
+    links: [{ href: '/features' }, { href: '/security' }, { href: '/integration' }],
+  },
+  {
+    title: 'Governance',
+    links: [
+      { href: '/governance/voting', label: 'Voting' },
+      { href: '/governance/audit' },
+      { href: '/treasury/bitcoin' },
+    ],
+  },
+  {
+    title: 'Ecosystem',
+    // The sibling products come from ECOSYSTEM_PILLARS in the component — one
+    // pillar SSOT, not restated here.
+    links: [{ href: '/ecosystem' }],
+  },
+  {
+    title: 'Resources',
+    links: [{ href: '/about' }, { href: '/integration', label: 'API' }],
+  },
+];
+
+/** The label a footer link shows: its override, else the nav's own title. */
+export function footerLinkLabel(link: FooterLink): string {
+  if (link.label) return link.label;
+  const item = NAV_CHILDREN.find((c) => c.href === link.href);
+  return item?.title ?? link.href;
+}