From 7c20d4b318c59262bac60013ca3f0f61e45ec298 Mon Sep 17 00:00:00 2001
From: Mads Taanquist <hello@taaken.dk>
Date: Thu, 30 Jul 2026 21:33:55 +0200
Subject: [PATCH] Show Cmd and Option in shortcut hints on Apple platforms

The quick-note hint and the editor's TODO hint hardcoded Ctrl and Alt;
they now read the platform labels from the existing keys helper, which
gains altLabel beside modLabel. The shortcuts article's convention line
covers Option too.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/lib/components/QuickNote.svelte  |  8 +++++++-
 src/lib/docs/planning.md             |  2 +-
 src/lib/docs/shortcuts.md            |  3 ++-
 src/lib/keys.test.ts                 |  2 +-
 src/lib/keys.ts                      | 21 ++++++++++++++++-----
 src/routes/stories/[id]/+page.svelte | 12 +++++++++++-
 6 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/QuickNote.svelte b/src/lib/components/QuickNote.svelte
index 3dd7c12..7c672ab 100644
--- a/src/lib/components/QuickNote.svelte
+++ b/src/lib/components/QuickNote.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { invalidateAll } from '$app/navigation';
+	import { modLabel } from '$lib/keys';
 	import { quickNote, openQuickNote, closeQuickNote } from '$lib/quick-note.svelte';
 
 	// The quick-note jot: a small card floating over the editor, opened with
@@ -17,6 +19,10 @@
 		sceneId?: string | null;
 	} = $props();
 
+	// The platform's command modifier for the hint line; SSR says Ctrl.
+	let mod = $state<'Cmd' | 'Ctrl'>('Ctrl');
+	onMount(() => (mod = modLabel()));
+
 	let text = $state('');
 	let saving = $state(false);
 	let message = $state<string | null>(null);
@@ -115,7 +121,7 @@
 			<p class="qn-error" role="alert">{message}</p>
 		{/if}
 		<footer class="qn-foot">
-			<span class="qn-hint">Ctrl+Enter saves, Esc closes.</span>
+			<span class="qn-hint">{mod}+Enter saves, Esc closes.</span>
 			<button class="btn btn-sm btn-ghost" type="button" onclick={close}>Close</button>
 			<button
 				class="btn btn-sm btn-primary"
diff --git a/src/lib/docs/planning.md b/src/lib/docs/planning.md
index efc18f1..f405a80 100644
--- a/src/lib/docs/planning.md
+++ b/src/lib/docs/planning.md
@@ -82,7 +82,7 @@ If you run a campaign, a note per sitting works well: keep the running log in a
 
 A note can also be attached to one scene. In the editor, open the Notes panel on the right and select "New note on this scene": the note is made, attached, and opened in the Notes view for you to write. From then on it shows at the top of the Notes panel whenever the scene is open, and in the story's note list like any other note.
 
-To jot something down without leaving the editor, press Ctrl+Alt+N (Cmd+Alt+N on a Mac) or run "Quick note" from the command palette. A small card opens over the editor: write the thought, then Ctrl+Enter or "Save note" files it with the story's notes - attached to the open scene when there is one - and puts you back where you were. The first line becomes the note's title.
+To jot something down without leaving the editor, press Ctrl+Alt+N (Cmd+Option+N on a Mac) or run "Quick note" from the command palette. A small card opens over the editor: write the thought, then Ctrl+Enter or "Save note" files it with the story's notes - attached to the open scene when there is one - and puts you back where you were. The first line becomes the note's title.
 
 ## History
 
diff --git a/src/lib/docs/shortcuts.md b/src/lib/docs/shortcuts.md
index 5d85aa3..6359180 100644
--- a/src/lib/docs/shortcuts.md
+++ b/src/lib/docs/shortcuts.md
@@ -1,6 +1,7 @@
 # Keyboard shortcuts
 
-Codex keeps to a small set of shortcuts. On a Mac, use Cmd where Ctrl is shown.
+Codex keeps to a small set of shortcuts. On a Mac, use Cmd where Ctrl is shown
+and Option where Alt is shown.
 
 ## Anywhere
 
diff --git a/src/lib/keys.test.ts b/src/lib/keys.test.ts
index b029a17..ff1d95f 100644
--- a/src/lib/keys.test.ts
+++ b/src/lib/keys.test.ts
@@ -9,7 +9,7 @@ describe('isApplePlatform', () => {
 		expect(isApplePlatform('iPad')).toBe(true);
 	});
 
-	it('leaves everything else on Ctrl', () => {
+	it('leaves everything else on Ctrl and Alt', () => {
 		expect(isApplePlatform('Win32')).toBe(false);
 		expect(isApplePlatform('Windows')).toBe(false);
 		expect(isApplePlatform('Linux x86_64')).toBe(false);
diff --git a/src/lib/keys.ts b/src/lib/keys.ts
index 38a9628..14a3414 100644
--- a/src/lib/keys.ts
+++ b/src/lib/keys.ts
@@ -6,13 +6,24 @@ export function isApplePlatform(platform: string): boolean {
 	return /mac|iphone|ipad|ipod/i.test(platform);
 }
 
+function currentPlatform(): string {
+	return (
+		(navigator as { userAgentData?: { platform?: string } }).userAgentData?.platform ??
+		navigator.platform ??
+		''
+	);
+}
+
 // The label for the platform's command modifier. The server cannot know the
 // platform, so SSR says Ctrl; callers re-read this after mount to correct it.
 export function modLabel(): 'Cmd' | 'Ctrl' {
 	if (!browser) return 'Ctrl';
-	const platform =
-		(navigator as { userAgentData?: { platform?: string } }).userAgentData?.platform ??
-		navigator.platform ??
-		'';
-	return isApplePlatform(platform) ? 'Cmd' : 'Ctrl';
+	return isApplePlatform(currentPlatform()) ? 'Cmd' : 'Ctrl';
+}
+
+// The label for the platform's alternate modifier, which Apple keyboards call
+// Option. Same SSR caveat as modLabel.
+export function altLabel(): 'Option' | 'Alt' {
+	if (!browser) return 'Alt';
+	return isApplePlatform(currentPlatform()) ? 'Option' : 'Alt';
 }
diff --git a/src/routes/stories/[id]/+page.svelte b/src/routes/stories/[id]/+page.svelte
index ee8f2bf..81aef26 100644
--- a/src/routes/stories/[id]/+page.svelte
+++ b/src/routes/stories/[id]/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { beforeNavigate, goto, invalidateAll } from '$app/navigation';
+	import { altLabel, modLabel } from '$lib/keys';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { focusMode } from '$lib/focus-mode.svelte';
@@ -48,6 +50,14 @@
 
 	let { data }: { data: PageData } = $props();
 
+	// The platform's modifier labels for shortcut hints; SSR says Ctrl/Alt.
+	let mod = $state<'Cmd' | 'Ctrl'>('Ctrl');
+	let alt = $state<'Option' | 'Alt'>('Alt');
+	onMount(() => {
+		mod = modLabel();
+		alt = altLabel();
+	});
+
 	// The writing surface's typography as CSS variables: the font and line
 	// spacing come from the writer's editor-appearance preferences; the default
 	// alignment rides with page setup, since it travels into the export.
@@ -877,7 +887,7 @@
 											</div>
 										{/each}
 										<div class="todo-hint">
-											Write a line starting with TODO:, or select prose and press Ctrl+Alt+M.
+											Write a line starting with TODO:, or select prose and press {mod}+{alt}+M.
 										</div>
 									</div>
 								{/if}