From 12453d2e61bc725d92063bedfd2cfeda6d456c84 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Mon, 17 Nov 2025 14:27:15 -0800
Subject: [PATCH] Make the welcome screen not include Alt in Ctrl+Alt+N on
 desktop

---
 frontend/src/components/Editor.svelte         |  2 +-
 frontend/src/components/panels/Layers.svelte  |  6 ++---
 .../widgets/inputs/FieldInput.svelte          |  4 ++--
 .../widgets/labels/UserInputLabel.svelte      |  6 ++---
 .../src/components/window/MainWindow.svelte   | 12 +++++-----
 .../window/status-bar/StatusBar.svelte        |  5 ++--
 .../window/title-bar/TitleBar.svelte          | 23 +++++++++---------
 .../title-bar/WindowButtonsLinux.svelte       |  8 +++----
 .../title-bar/WindowButtonsWindows.svelte     |  8 +++----
 .../components/window/workspace/Panel.svelte  | 16 +++++++++----
 frontend/src/io-managers/input.ts             |  4 ++--
 frontend/src/io-managers/panic.ts             |  2 +-
 frontend/src/utility-functions/platform.ts    | 24 ++++---------------
 13 files changed, 54 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index 9a965338..22799dd1 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -61,7 +61,7 @@
 	});
 </script>
 
-<MainWindow platform={$appWindow.platform} maximized={$appWindow.maximized} viewportHolePunch={$appWindow.viewportHolePunch} />
+<MainWindow />
 
 <style lang="scss" global>
 	// Disable the spinning loading indicator
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 82c8a5f0..bc9af924 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -14,7 +14,7 @@
 	} from "@graphite/messages";
 	import type { DataBuffer, LayerPanelEntry } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
-	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import { operatingSystem } from "@graphite/utility-functions/platform";
 	import { extractPixelData } from "@graphite/utility-functions/rasterization";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -177,7 +177,7 @@
 	}
 
 	function handleExpandArrowClickWithModifiers(e: MouseEvent, id: bigint) {
-		const accel = platformIsMac() ? e.metaKey : e.ctrlKey;
+		const accel = operatingSystem() === "Mac" ? e.metaKey : e.ctrlKey;
 		const collapseRecursive = e.altKey || accel;
 		editor.handle.toggleLayerExpansion(id, collapseRecursive);
 		e.stopPropagation();
@@ -226,7 +226,7 @@
 		// Get the pressed state of the modifier keys
 		const [ctrl, meta, shift, alt] = [e.ctrlKey, e.metaKey, e.shiftKey, e.altKey];
 		// Get the state of the platform's accel key and its opposite platform's accel key
-		const [accel, oppositeAccel] = platformIsMac() ? [meta, ctrl] : [ctrl, meta];
+		const [accel, oppositeAccel] = operatingSystem() === "Mac" ? [meta, ctrl] : [ctrl, meta];
 
 		// Alt-clicking to make a clipping mask
 		if (layerToClipAltKeyPressed && layerToClipUponClick && layerToClipUponClick.entry.clippable) clipLayer(layerToClipUponClick);
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index 37c2fa0b..0af9b10f 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import { operatingSystem } from "@graphite/utility-functions/platform";
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -31,7 +31,7 @@
 
 	let inputOrTextarea: HTMLInputElement | HTMLTextAreaElement | undefined;
 	let id = String(Math.random()).substring(2);
-	let macKeyboardLayout = platformIsMac();
+	let macKeyboardLayout = operatingSystem() === "Mac";
 
 	$: dispatch("value", value);
 
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.svelte b/frontend/src/components/widgets/labels/UserInputLabel.svelte
index 83e3d0c3..030b6021 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.svelte
+++ b/frontend/src/components/widgets/labels/UserInputLabel.svelte
@@ -4,7 +4,7 @@
 	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/messages";
 	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 	import type { IconName } from "@graphite/utility-functions/icons";
-	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import { operatingSystem } from "@graphite/utility-functions/platform";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -29,7 +29,7 @@
 		Enter: 2,
 		Tab: 2,
 		Space: 3,
-		...(platformIsMac() ? ICON_WIDTHS_MAC : {}),
+		...(operatingSystem() === "Mac" ? ICON_WIDTHS_MAC : {}),
 	};
 
 	const fullscreen = getContext<FullscreenState>("fullscreen");
@@ -65,7 +65,7 @@
 		const label = keyWithLabel.label;
 
 		// Replace Alt and Accel keys with their Mac-specific equivalents
-		if (platformIsMac()) {
+		if (operatingSystem() === "Mac") {
 			if (key === "Alt") key = "Option";
 			if (key === "Accel") key = "Command";
 		}
diff --git a/frontend/src/components/window/MainWindow.svelte b/frontend/src/components/window/MainWindow.svelte
index 6e95fdfd..ab82046d 100644
--- a/frontend/src/components/window/MainWindow.svelte
+++ b/frontend/src/components/window/MainWindow.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import type { AppWindowPlatform } from "@graphite/messages";
+	import { getContext } from "svelte";
+
+	import type { AppWindowState } from "@graphite/state-providers/app-window";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import StatusBar from "@graphite/components/window/status-bar/StatusBar.svelte";
 	import TitleBar from "@graphite/components/window/title-bar/TitleBar.svelte";
 	import Workspace from "@graphite/components/window/workspace/Workspace.svelte";
 
-	export let platform: AppWindowPlatform;
-	export let maximized: boolean;
-	export let viewportHolePunch: boolean;
+	const appWindow = getContext<AppWindowState>("appWindow");
 </script>
 
-<LayoutCol class="main-window" classes={{ "viewport-hole-punch": viewportHolePunch }}>
-	<TitleBar {platform} {maximized} />
+<LayoutCol class="main-window" classes={{ "viewport-hole-punch": $appWindow.viewportHolePunch }}>
+	<TitleBar />
 
 	<Workspace />
 
diff --git a/frontend/src/components/window/status-bar/StatusBar.svelte b/frontend/src/components/window/status-bar/StatusBar.svelte
index 4bfc082b..82ef898a 100644
--- a/frontend/src/components/window/status-bar/StatusBar.svelte
+++ b/frontend/src/components/window/status-bar/StatusBar.svelte
@@ -3,7 +3,7 @@
 
 	import type { Editor } from "@graphite/editor";
 	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages";
-	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import { operatingSystem } from "@graphite/utility-functions/platform";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
@@ -14,8 +14,7 @@
 	let hintData: HintData = [];
 
 	function inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
-		if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
-		return hint.keyGroups;
+		return operatingSystem() === "Mac" && hint.keyGroupsMac ? hint.keyGroupsMac : hint.keyGroups;
 	}
 
 	onMount(() => {
diff --git a/frontend/src/components/window/title-bar/TitleBar.svelte b/frontend/src/components/window/title-bar/TitleBar.svelte
index 3843ae46..6aec3db6 100644
--- a/frontend/src/components/window/title-bar/TitleBar.svelte
+++ b/frontend/src/components/window/title-bar/TitleBar.svelte
@@ -2,8 +2,9 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, type AppWindowPlatform, UpdateMenuBarLayout } from "@graphite/messages";
-	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/messages";
+	import type { AppWindowState } from "@graphite/state-providers/app-window";
+	import { operatingSystem } from "@graphite/utility-functions/platform";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
@@ -11,13 +12,11 @@
 	import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
 	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
 
-	export let platform: AppWindowPlatform;
-	export let maximized: boolean;
-
+	const appWindow = getContext<AppWindowState>("appWindow");
 	const editor = getContext<Editor>("editor");
 
 	// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
-	const ACCEL_KEY = platformIsMac() ? "Command" : "Control";
+	const ACCEL_KEY = operatingSystem() === "Mac" ? "Command" : "Control";
 	const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
 		[ACCEL_KEY, "KeyW"],
 		[ACCEL_KEY, "KeyN"],
@@ -61,7 +60,7 @@
 <LayoutRow class="title-bar">
 	<!-- Menu bar -->
 	<LayoutRow>
-		{#if platform !== "Mac"}
+		{#if $appWindow.platform !== "Mac"}
 			{#each entries as entry}
 				<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} flush={true} />
 			{/each}
@@ -71,12 +70,12 @@
 	<LayoutRow class="spacer" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
 	<!-- Window buttons -->
 	<LayoutRow>
-		{#if platform === "Web"}
+		{#if $appWindow.platform === "Web"}
 			<WindowButtonsWeb />
-		{:else if platform === "Windows"}
-			<WindowButtonsWindows {maximized} />
-		{:else if platform === "Linux"}
-			<WindowButtonsLinux {maximized} />
+		{:else if $appWindow.platform === "Windows"}
+			<WindowButtonsWindows />
+		{:else if $appWindow.platform === "Linux"}
+			<WindowButtonsLinux />
 		{/if}
 	</LayoutRow>
 </LayoutRow>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsLinux.svelte b/frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
index bc6a43c6..19fba0fc 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
@@ -2,20 +2,20 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
+	import type { AppWindowState } from "@graphite/state-providers/app-window";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
-	export let maximized;
-
+	const appWindow = getContext<AppWindowState>("appWindow");
 	const editor = getContext<Editor>("editor");
 </script>
 
 <LayoutRow class="window-button linux" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
 	<IconLabel icon="WindowButtonWinMinimize" />
 </LayoutRow>
-<LayoutRow class="window-button linux" tooltip={maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
-	<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
+<LayoutRow class="window-button linux" tooltip={$appWindow.maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
+	<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
 </LayoutRow>
 <LayoutRow class="window-button linux" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
 	<IconLabel icon="WindowButtonWinClose" />
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
index b457d5c7..d14a70a3 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
@@ -2,20 +2,20 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
+	import type { AppWindowState } from "@graphite/state-providers/app-window";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
-	export let maximized;
-
+	const appWindow = getContext<AppWindowState>("appWindow");
 	const editor = getContext<Editor>("editor");
 </script>
 
 <LayoutRow class="window-button windows" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
 	<IconLabel icon="WindowButtonWinMinimize" />
 </LayoutRow>
-<LayoutRow class="window-button windows" tooltip={maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
-	<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
+<LayoutRow class="window-button windows" tooltip={$appWindow.maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
+	<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
 </LayoutRow>
 <LayoutRow class="window-button windows" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
 	<IconLabel icon="WindowButtonWinClose" />
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/workspace/Panel.svelte
index eb35d3e1..4fa86e8e 100644
--- a/frontend/src/components/window/workspace/Panel.svelte
+++ b/frontend/src/components/window/workspace/Panel.svelte
@@ -18,7 +18,8 @@
 
 	import type { Editor } from "@graphite/editor";
 	import { type LayoutKeysGroup, type Key } from "@graphite/messages";
-	import { platformIsMac, isEventSupported } from "@graphite/utility-functions/platform";
+	import type { AppWindowState } from "@graphite/state-providers/app-window";
+	import { operatingSystem, isEventSupported } from "@graphite/utility-functions/platform";
 	import { extractPixelData } from "@graphite/utility-functions/rasterization";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -32,6 +33,7 @@
 	const BUTTON_LEFT = 0;
 	const BUTTON_MIDDLE = 1;
 
+	const appWindow = getContext<AppWindowState>("appWindow");
 	const editor = getContext<Editor>("editor");
 
 	export let tabMinWidths = false;
@@ -52,14 +54,18 @@
 
 	let tabElements: (LayoutRow | undefined)[] = [];
 
-	function platformModifiers(reservedKey: boolean): LayoutKeysGroup {
+	function platformModifiedAccelKey(browserReservedKey: boolean): LayoutKeysGroup {
 		// TODO: Remove this by properly feeding these keys from a layout provided by the backend
 
 		const ALT: Key = { key: "Alt", label: "Alt" };
 		const COMMAND: Key = { key: "Command", label: "Command" };
 		const CONTROL: Key = { key: "Control", label: "Ctrl" };
 
-		if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
+		// Only consider the browser reserved key on web platforms
+		const reservedKey = $appWindow.platform === "Web" ? browserReservedKey : false;
+
+		// Return either Command (Mac) or Control (Windows/Linux), with Alt added if the browser reserves the shortcut
+		if (operatingSystem() === "Mac") return reservedKey ? [ALT, COMMAND] : [COMMAND];
 		return reservedKey ? [CONTROL, ALT] : [CONTROL];
 	}
 
@@ -179,7 +185,7 @@
 											<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
 										</td>
 										<td>
-											<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
+											<UserInputLabel keysWithLabelsGroups={[[...platformModifiedAccelKey(true), { key: "KeyN", label: "N" }]]} />
 										</td>
 									</tr>
 									<tr>
@@ -187,7 +193,7 @@
 											<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
 										</td>
 										<td>
-											<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
+											<UserInputLabel keysWithLabelsGroups={[[...platformModifiedAccelKey(false), { key: "KeyO", label: "O" }]]} />
 										</td>
 									</tr>
 									<tr>
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index a54cecd4..eaf79bb2 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -7,7 +7,7 @@ import { type DocumentState } from "@graphite/state-providers/document";
 import { type FullscreenState } from "@graphite/state-providers/fullscreen";
 import { type PortfolioState } from "@graphite/state-providers/portfolio";
 import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@graphite/utility-functions/keyboard-entry";
-import { platformIsMac } from "@graphite/utility-functions/platform";
+import { operatingSystem } from "@graphite/utility-functions/platform";
 import { extractPixelData } from "@graphite/utility-functions/rasterization";
 import { stripIndents } from "@graphite/utility-functions/strip-indents";
 import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
@@ -82,7 +82,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 		const key = await getLocalizedScanCode(e);
 
 		// TODO: Switch to a system where everything is sent to the backend, then the input preprocessor makes decisions and kicks some inputs back to the frontend
-		const accelKey = platformIsMac() ? e.metaKey : e.ctrlKey;
+		const accelKey = operatingSystem() === "Mac" ? e.metaKey : e.ctrlKey;
 
 		// Don't redirect user input from text entry into HTML elements
 		if (targetIsTextField(e.target || undefined) && key !== "Escape" && !(accelKey && ["Enter", "NumpadEnter"].includes(key))) return false;
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/io-managers/panic.ts
index da05842b..1a00f42c 100644
--- a/frontend/src/io-managers/panic.ts
+++ b/frontend/src/io-managers/panic.ts
@@ -40,7 +40,7 @@ export function githubUrl(panicDetails: string): string {
 			Provide any further information or context that you think would be helpful in fixing the issue. Screenshots or video can be linked or attached to this issue.
 
 			**Browser and OS**
-			${browserVersion()}, ${operatingSystem(true).replace("Unknown", "YOUR OPERATING SYSTEM")}
+			${browserVersion()}, ${operatingSystem().replace("Unknown", "YOUR OPERATING SYSTEM")}
 
 			**Stack Trace**
 			Copied from the crash dialog in the Graphite editor:
diff --git a/frontend/src/utility-functions/platform.ts b/frontend/src/utility-functions/platform.ts
index 3121d383..4c16c5b7 100644
--- a/frontend/src/utility-functions/platform.ts
+++ b/frontend/src/utility-functions/platform.ts
@@ -23,36 +23,20 @@ export function browserVersion(): string {
 	return `${match[0]} ${match[1]}`;
 }
 
-export function operatingSystem(detailed = false): string {
-	const osTableDetailed: Record<string, string> = {
-		"Windows NT 10": "Windows 10 or 11",
-		"Windows NT 6.3": "Windows 8.1",
-		"Windows NT 6.2": "Windows 8",
-		"Windows NT 6.1": "Windows 7",
-		"Windows NT 6.0": "Windows Vista",
-		"Windows NT 5.1": "Windows XP",
-		"Windows NT 5.0": "Windows 2000",
-		Mac: "Mac",
-		X11: "Unix",
-		Linux: "Linux",
-		Unknown: "Unknown",
-	};
-	const osTableSimple: Record<string, string> = {
+export type OperatingSystem = "Windows" | "Mac" | "Linux" | "Unknown";
+
+export function operatingSystem(): OperatingSystem {
+	const osTable: Record<string, OperatingSystem> = {
 		Windows: "Windows",
 		Mac: "Mac",
 		Linux: "Linux",
 		Unknown: "Unknown",
 	};
-	const osTable = detailed ? osTableDetailed : osTableSimple;
 
 	const userAgentOS = Object.keys(osTable).find((key) => window.navigator.userAgent.includes(key));
 	return osTable[userAgentOS || "Unknown"];
 }
 
-export function platformIsMac(): boolean {
-	return operatingSystem() === "Mac";
-}
-
 export function isEventSupported(eventName: string) {
 	const onEventName = `on${eventName}`;