Navbar renders with stale dark-section tone on /blog/ (invisible against paper)

[yigitdot]

Summary

When navigating from the home page (while scrolled into a dark-toned section like #compare or #faq) to /blog/ via the nav "Blog" link, the navbar stays painted in its dark-section styling — white wordmark and links on the paper-toned blog page — so it reads as "appears then disappears." Same issue applies to /blog/[slug]/.

Repro

1. Open /.
2. Scroll until #compare or #faq is under the nav (navbar should flip to white-on-dark).
3. Click the "Blog" link in the nav.
4. On /blog/, the wordmark and nav links are effectively invisible — only the underline accents are faintly visible. Reloading /blog/ directly renders correctly (active resets to "intro").

Cause

components/site/Chrome.tsx lives in the root layout and is not remounted across client-side navigations. The IO effect (Chrome.tsx:60-118) re-runs on pathname change but early-returns when none of SECTION_IDS = ["intro", "compare", "method", "faq", "contact"] exist in the DOM:

const nodes = SECTION_IDS.map((id) => document.getElementById(id)).filter(
  (n): n is HTMLElement => n !== null,
);
if (nodes.length === 0) return;

On /blog/ (which only renders <Frame id="blog">) the effect bails before resetting active, so active retains its last home-page value. If that value is in DARK_SECTIONS ("compare" or "faq"), onDark stays true and the nav renders with text-paper over a paper-toned page.

Suggested fix

When the effect finds no observable sections, reset state to a known-light default before returning — e.g.:

if (nodes.length === 0) {
  setActive("intro");
  return;
}

Or, more explicitly, derive the off-home tone from pathname instead of letting active carry across routes.

[github-actions]

🎯 Agentic Issue Triage

Bug confirmed. Chrome.tsx's active state retains a stale dark-section value ("compare" or "faq") when the user client-side navigates to /blog/ or /blog/[slug]/, because the IO effect early-returns when no SECTION_IDS nodes are found in the DOM — without resetting active first. This causes the navbar to render with white text on a paper-toned page, making it nearly invisible.

---

📋 Root Cause

In components/site/Chrome.tsx (lines ~60–118), the useEffect keyed on pathname runs on route change, but the early-return guard fires before any state reset:

const nodes = SECTION_IDS.map((id) => document.getElementById(id)).filter(
  (n): n is HTMLElement => n !== null,
);
if (nodes.length === 0) return; // ← exits without resetting `active`

On /blog/*, no home-page section IDs exist in the DOM, so active stays frozen at its last value (e.g. "faq"). Since "faq" is in DARK_SECTIONS, onDark remains true and the nav renders with text-paper on a paper background.

Works correctly on direct load because the initial useState("intro") kicks in before the IO effect.

🔧 Suggested Fix

The issue author already identified the minimal fix — reset active before the early-return:

if (nodes.length === 0) {
  setActive("intro"); // reset to known-light default
  return;
}

Alternatively, derive tone directly from pathname for non-home routes:

// At the top of the component, before the IO effect
const isHomePage = pathname === "/";

// Then in render:
const onDark = isHomePage && DARK_SECTIONS.has(active);

This second approach is more defensive: it explicitly scopes dark-tone logic to the home page, so any future route that lacks section IDs won't accidentally inherit stale state.

🧪 Reproduction Steps

1. Open / in the browser.
2. Scroll down until the #compare or #faq section is under the navbar (navbar flips to white-on-dark).
3. Click the Blog link in the nav.
4. Observe the navbar on /blog/ — wordmark and links appear invisible against the paper background.
5. Reload /blog/ — navbar renders correctly (resets to "intro").

✅ Sub-task Checklist

• Add setActive("intro") before the return in the nodes.length === 0 guard (or use the pathname-based approach)
• Verify fix on /blog/ and /blog/[slug]/ after navigating from a dark section
• Verify direct-load behavior is unchanged
• Run pnpm lint && pnpm exec tsc --noEmit && pnpm test && pnpm build

🔗 Relevant Code & Resources

• components/site/Chrome.tsx — IO effect + DARK_SECTIONS logic
• [React useEffect cleanup & deps]((react.dev/redacted) — why keying on pathname doesn't remount the component
• [IntersectionObserver MDN]((developer.mozilla.org/redacted) — for context on why the observer fires no entries on non-home routes

Generated by Agentic Triage for issue #112 · ● 1.7M · ◷

To install this agentic workflow, run

gh aw add githubnext/agentics/workflows/issue-triage.md@c7d030cd6d4607b90d9ac3ffc8b24aff4f251632