Make the welcome screen not include Alt in Ctrl+Alt+N on desktop

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

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);

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);
 

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";
 		}

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;
+	const appWindow = getContext<AppWindowState>("appWindow");
-	export let maximized: boolean;
-	export let viewportHolePunch: boolean;
 </script>
 
-<LayoutCol class="main-window" classes={{ "viewport-hole-punch": viewportHolePunch }}>
+<LayoutCol class="main-window" classes={{ "viewport-hole-punch": $appWindow.viewportHolePunch }}>
-	<TitleBar {platform} {maximized} />
+	<TitleBar />
 
 	<Workspace />
 

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 operatingSystem() === "Mac" && hint.keyGroupsMac ? hint.keyGroupsMac : hint.keyGroups;
-		return hint.keyGroups;
 	}
 
 	onMount(() => {

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 { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/messages";
-	import { platformIsMac } from "@graphite/utility-functions/platform";
+	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;
+	const appWindow = getContext<AppWindowState>("appWindow");
-	export let maximized: boolean;
-
 	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"}
+		{:else if $appWindow.platform === "Windows"}
-			<WindowButtonsWindows {maximized} />
+			<WindowButtonsWindows />
-		{:else if platform === "Linux"}
+		{:else if $appWindow.platform === "Linux"}
-			<WindowButtonsLinux {maximized} />
+			<WindowButtonsLinux />
 		{/if}
 	</LayoutRow>
 </LayoutRow>

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()}>
+<LayoutRow class="window-button linux" tooltip={$appWindow.maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
-	<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
+	<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
 </LayoutRow>
 <LayoutRow class="window-button linux" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
 	<IconLabel icon="WindowButtonWinClose" />

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()}>
+<LayoutRow class="window-button windows" tooltip={$appWindow.maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
-	<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
+	<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
 </LayoutRow>
 <LayoutRow class="window-button windows" tooltip="Close" on:click={() => editor.handle.appWindowClose()}>
 	<IconLabel icon="WindowButtonWinClose" />

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>

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;

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:

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 {
+export type OperatingSystem = "Windows" | "Mac" | "Linux" | "Unknown";
-	const osTableDetailed: Record<string, string> = {
+
-		"Windows NT 10": "Windows 10 or 11",
+export function operatingSystem(): OperatingSystem {
-		"Windows NT 6.3": "Windows 8.1",
+	const osTable: Record<string, OperatingSystem> = {
-		"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> = {
 		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}`;