Tabs.svelte: the about panel's strip, shared with long reading pages

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

template/src/lib/components/About.svelte

@@ -1,12 +1,8 @@
 <script lang="ts" module>
-	import type { Snippet } from 'svelte';
+	import type { Tab } from './Tabs.svelte';
 
 	/** One section of the about panel: a tab and what it shows. */
-	export interface AboutTab {
-		id: string;
-		label: string;
-		body: Snippet;
-	}
+	export type AboutTab = Tab;
 </script>
 
 <script lang="ts">
@@ -14,28 +10,15 @@
 	// at a time rather than one long page. Opened from the hall's "about this
 	// game" link (and #about); closes with its button, a click outside it, or
 	// Escape. The tab last read is the one it reopens on.
-	import { tick } from 'svelte';
+	import Tabs from './Tabs.svelte';
 
 	let { open = $bindable(false), tabs, title }: { open?: boolean; tabs: AboutTab[]; title: string } = $props();
 
 	let current = $state('');
-	const shown = $derived(tabs.find((t) => t.id === current) ?? tabs[0]);
-	let tabButtons: HTMLButtonElement[] = $state([]);
 
 	function onKey(e: KeyboardEvent) {
 		if (open && e.key === 'Escape') open = false;
 	}
-
-	/** Arrow keys walk the tabs, as a tab list should; Home and End go to the ends. */
-	async function onTabKey(e: KeyboardEvent, i: number) {
-		const to = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? tabs.length - 1 : null;
-		if (to === null) return;
-		e.preventDefault();
-		const next = (to + tabs.length) % tabs.length;
-		current = tabs[next].id;
-		await tick();
-		tabButtons[next]?.focus();
-	}
 </script>
 
 <svelte:window onkeydown={onKey} />
@@ -47,24 +30,8 @@
 				<h2 id="about-title">{title}</h2>
 				<button type="button" class="close" aria-label="Close" onclick={() => (open = false)}>×</button>
 			</header>
-			<div class="tabs" role="tablist" aria-label="About this game">
-				{#each tabs as t, i (t.id)}
-					<button
-						type="button"
-						role="tab"
-						id="about-tab-{t.id}"
-						aria-controls="about-panel"
-						aria-selected={shown.id === t.id}
-						tabindex={shown.id === t.id ? 0 : -1}
-						class:on={shown.id === t.id}
-						bind:this={tabButtons[i]}
-						onclick={() => (current = t.id)}
-						onkeydown={(e) => onTabKey(e, i)}>{t.label}</button
-					>
-				{/each}
-			</div>
-			<div class="body" id="about-panel" role="tabpanel" aria-labelledby="about-tab-{shown.id}" tabindex="0">
-				{@render shown.body()}
+			<div class="body">
+				<Tabs {tabs} label="About this game" bind:current />
 			</div>
 		</div>
 	</div>
@@ -110,39 +77,15 @@
 		cursor: pointer;
 		padding: 0.2rem 0.4rem;
 	}
-	.tabs {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.2rem 0.4rem;
-		border-bottom: 1px solid var(--rule-strong);
-		margin-bottom: 0.8rem;
-	}
-	.tabs button {
-		background: none;
-		border: none;
-		border-bottom: 3px solid transparent;
-		color: inherit;
-		opacity: 0.75;
-		font: inherit;
-		padding: 0.35rem 0.5rem 0.4rem;
-		cursor: pointer;
-	}
-	.tabs button.on {
-		opacity: 1;
-		border-bottom-color: currentColor;
-	}
 	.body {
 		overflow: auto;
 		min-height: 12rem;
 	}
-	.body :global(p + p) {
-		margin-top: 0.7rem;
-	}
-	.body :global(h3) {
-		font-size: 1.05rem;
-		margin: 1rem 0 0.4rem;
-	}
-	.body :global(h3:first-child) {
-		margin-top: 0;
+	/* The tab strip stays in view while a long tab scrolls beneath it. */
+	.body :global([role='tablist']) {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		background: var(--slate);
 	}
 </style>