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

CONVENTIONS.md

@@ -13,7 +13,9 @@ README.
   is and unread talk), *your reports to the keeper*, and *about this game —
   a labor of love*, which opens the about panel: a dialog of tabs (The
   game, The tally, More games, Send word; a game may add its own, as Dip's
-  Playing here), `About.svelte`, with each game's words in its hall.
+  Playing here), `About.svelte`, with each game's words in its hall. Its
+  strip is `Tabs.svelte`, which also serves a long reading page such as the
+  guide or the rules, where `address` lets a #fragment open a tab.
 - **A table** is a room. Its code is four letters or digits from an alphabet
   with no look-alikes, and its link is `/join/CODE`. The masthead button
   reads *invite friends · room CODE* and copies the link. Whoever opened

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 {
+	export type AboutTab = Tab;
-		id: string;
-		label: string;
-		body: Snippet;
-	}
 </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">
+			<div class="body">
-				{#each tabs as t, i (t.id)}
+				<Tabs {tabs} label="About this game" bind:current />
-					<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>
 		</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) {
+	/* The tab strip stays in view while a long tab scrolls beneath it. */
-		margin-top: 0.7rem;
+	.body :global([role='tablist']) {
-	}
+		position: sticky;
-	.body :global(h3) {
+		top: 0;
-		font-size: 1.05rem;
+		z-index: 1;
-		margin: 1rem 0 0.4rem;
+		background: var(--slate);
-	}
-	.body :global(h3:first-child) {
-		margin-top: 0;
 	}
 </style>

template/src/lib/components/Tabs.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	/** One tab and what it shows. */
+	export interface Tab {
+		id: string;
+		label: string;
+		body: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	// A strip of tabs over one panel, for a page or a dialog that would
+	// otherwise be one long read. Arrow keys walk the tabs, Home and End go to
+	// the ends. With `address`, the page's #fragment names the open tab, so a
+	// link to /rules#syntax opens that tab and choosing a tab can be linked to.
+	import { tick } from 'svelte';
+
+	let { tabs, label, current = $bindable(''), address = false }: { tabs: Tab[]; label: string; current?: string; address?: boolean } = $props();
+
+	const uid = $props.id();
+	const shown = $derived(tabs.find((t) => t.id === current) ?? tabs[0]);
+	let tabButtons: HTMLButtonElement[] = $state([]);
+
+	$effect(() => {
+		if (!address) return;
+		const fromHash = () => {
+			const id = location.hash.slice(1);
+			if (tabs.some((t) => t.id === id)) current = id;
+		};
+		fromHash();
+		window.addEventListener('hashchange', fromHash);
+		return () => window.removeEventListener('hashchange', fromHash);
+	});
+
+	function choose(id: string) {
+		current = id;
+		if (address) history.replaceState(history.state, '', `${location.pathname}${location.search}#${id}`);
+	}
+
+	async function onKey(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;
+		choose(tabs[next].id);
+		await tick();
+		tabButtons[next]?.focus();
+	}
+</script>
+
+<div class="tabs" role="tablist" aria-label={label}>
+	{#each tabs as t, i (t.id)}
+		<button
+			type="button"
+			role="tab"
+			id="{uid}-{t.id}"
+			aria-controls="{uid}-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={() => choose(t.id)}
+			onkeydown={(e) => onKey(e, i)}>{t.label}</button
+		>
+	{/each}
+</div>
+<div class="panel" id="{uid}-panel" role="tabpanel" aria-labelledby="{uid}-{shown.id}" tabindex="0">
+	{@render shown.body()}
+</div>
+
+<style>
+	.tabs {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.2rem 0.4rem;
+		border-bottom: 1px solid var(--rule-strong);
+		margin: 0.6rem 0 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;
+	}
+	.panel :global(p + p) {
+		margin-top: 0.7rem;
+	}
+	.panel :global(h3) {
+		font-size: 1.05rem;
+		margin: 1rem 0 0.4rem;
+	}
+	.panel :global(h3:first-child) {
+		margin-top: 0;
+	}
+</style>