Split the Guide page into tabs, matching the Settings/Event Manager pattern

The page had grown to ~20 stacked panels on one very long scroll - the same problem
already fixed twice this session for Settings and Event Manager. Grouped into 5 tabs
(Getting started, Create a race, Run a race, Training & results, Video guides) using
the same activeGuideTab-as-module-state approach so the selection survives an in-place
re-render (e.g. a language switch). The always-visible overview cards at the top are
unchanged.

Also investigated a "feels slow" concern raised alongside this: measured the page's
actual render cost in a real browser (median 0.6ms, on par with or faster than Settings/
Timing) and confirmed the periodic tickClock/updateSyncStatus intervals never re-render
an idle Guide page. No performance issue found - the perceived slowness was the page's
length, which this change addresses directly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

tests/browser_guide_tabs.js

@@ -0,0 +1,51 @@
+import assert from "node:assert/strict";
+
+// Regression coverage for splitting the Guide page into tabs (previously ~20 stacked
+// panels on one very long page - "Getting started", "Create a race", "Run a race",
+// "Training & results", "Video guides"). Tabs must show exactly one group of panels at a
+// time, default to "Getting started" on first load, and - the actual bug class this
+// guards against - keep the selection when the page re-renders in place (a language
+// switch calls renderView() without navigating away), not silently reset. activeGuideTab
+// is a module-level variable specifically so it survives that re-render.
+export async function runGuideTabsSmoke({ evaluate, navigate }) {
+  await navigate("guide", "guideOverview");
+
+  const activeTab = () => evaluate(`document.querySelector(".guide-tab.active")?.dataset.guideTab`);
+  const panelVisibility = () => evaluate(`
+    Object.fromEntries(Array.from(document.querySelectorAll("[data-guide-panel]"))
+      .map((panel) => [panel.dataset.guidePanel, !panel.hidden]))
+  `);
+
+  assert.equal(await activeTab(), "start", "Getting started is the default tab on first load");
+  let visible = await panelVisibility();
+  assert.equal(visible.start, true, "start panel visible by default");
+  assert.equal(visible.create, false, "create panel hidden by default");
+  assert.equal(visible.run, false, "run panel hidden by default");
+  assert.equal(visible.training, false, "training panel hidden by default");
+  assert.equal(visible.videos, false, "videos panel hidden by default");
+  console.log("PASS guide defaults to the Getting started tab with only that panel visible");
+
+  for (const tab of ["create", "run", "training", "videos", "start"]) {
+    await evaluate(`document.querySelector('[data-guide-tab="${tab}"]').click()`);
+    assert.equal(await activeTab(), tab, `clicking the ${tab} tab activates it`);
+    visible = await panelVisibility();
+    for (const [panelId, isVisible] of Object.entries(visible)) {
+      assert.equal(isVisible, panelId === tab, `after switching to ${tab}, panel ${panelId} should be ${panelId === tab ? "visible" : "hidden"}`);
+    }
+  }
+  console.log("PASS clicking each guide tab shows only its own panel and hides the rest");
+
+  const videoLinkCount = await evaluate(`document.querySelectorAll('[data-guide-panel="videos"] a[href^="/docs/videos/"]').length`);
+  assert.equal(videoLinkCount, 7, "all 7 video guide links live under the Video guides tab");
+
+  await evaluate(`document.querySelector('[data-guide-tab="run"]').click()`);
+  assert.equal(await activeTab(), "run");
+  // Switching language calls renderView() in place (no navigation) - exactly the path
+  // that would silently reset the tab if activeGuideTab weren't module-scoped state.
+  await evaluate(`(() => { const select = document.getElementById("languageSelect"); select.value = select.value === "en" ? "sv" : "en"; select.onchange(); })()`);
+  assert.equal(await activeTab(), "run", "the selected tab survives a language-switch re-render, instead of resetting to Getting started");
+  visible = await panelVisibility();
+  assert.equal(visible.run, true);
+  assert.equal(visible.start, false);
+  console.log("PASS the active guide tab is preserved across a language-switch re-render");
+}

tests/browser_smoke.js

@@ -6,6 +6,7 @@ import { runTeamMembershipSmoke } from "./browser_team_membership.js";
 import { runEventManagerTabsSmoke } from "./browser_event_manager_tabs.js";
 import { runEventScheduleSmoke } from "./browser_event_schedule.js";
 import { runSettingsTabsSmoke } from "./browser_settings_tabs.js";
+import { runGuideTabsSmoke } from "./browser_guide_tabs.js";
 import { runObsPopupSmoke } from "./browser_obs_popup.js";
 import { runDecoderReconnectSmoke } from "./browser_decoder_reconnect.js";
 import assert from "node:assert/strict";
@@ -142,6 +143,7 @@ try {
   await runEventManagerTabsSmoke({ evaluate, navigate, savedState, waitFor, base });
   await runEventScheduleSmoke({ evaluate, navigate, fill, savedState, waitFor, base });
   await runSettingsTabsSmoke({ evaluate, navigate });
+  await runGuideTabsSmoke({ evaluate, navigate });
   await runRaceDaySmoke({ evaluate, navigate, fill, savedState, waitFor, pause, base, dialogs });
   await runRaceDayStartSequencesSmoke({ evaluate, navigate, waitFor, pause, base, dialogs });
   await runObsPopupSmoke({ evaluate, navigate, fill, savedState, waitFor, pause, base, debugPort, dialogs, realClick });