Desktop: UI scale preference (#3475)

* ui scale preference

* cleanup

* add update ui scale message to SIDE_EFFECT_FREE_MESSAGES

* fix mac title bar height

* hide UI preference section on web

* set % as unit of ui scale

frontend/src/components/window/title-bar/TitleBar.svelte

@@ -17,6 +17,9 @@
 
 	let menuBarLayout: Layout = [];
 
+	// On mac menu bar needs to be scaled with inverse of UI scale to match native menu buttons.
+	$: height = $appWindow.platform === "Mac" ? 28 * (1 / $appWindow.uiScale) : 28;
+
 	onMount(() => {
 		editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (updateMenuBarLayout) => {
 			patchLayout(menuBarLayout, updateMenuBarLayout);
@@ -25,7 +28,7 @@
 	});
 </script>
 
-<LayoutRow class="title-bar">
+<LayoutRow class="title-bar" styles={{ height: height + "px" }}>
 	<!-- Menu bar -->
 	<LayoutRow>
 		{#if $appWindow.platform !== "Mac"}
@@ -48,7 +51,6 @@
 
 <style lang="scss" global>
 	.title-bar {
-		height: 28px;
 		flex: 0 0 auto;
 
 		> .layout-row {

frontend/src/messages.ts

@@ -319,6 +319,10 @@ export class UpdateViewportPhysicalBounds extends JsMessage {
 	readonly height!: number;
 }
 
+export class UpdateUIScale extends JsMessage {
+	readonly scale!: number;
+}
+
 // Rust enum `Key`
 export type KeyRaw = string;
 // Serde converts a Rust `Key` enum variant into this format with both the `Key` variant name (called `RawKey` in TS) and the localized `label` for the key
@@ -1766,6 +1770,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateToolShelfLayout,
 	UpdateViewportHolePunch,
 	UpdateViewportPhysicalBounds,
+	UpdateUIScale,
 	UpdateVisibleNodes,
 	UpdateWelcomeScreenButtonsLayout,
 	UpdateWirePathInProgress,

frontend/src/state-providers/app-window.ts

@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import { type AppWindowPlatform, UpdatePlatform, UpdateViewportHolePunch, UpdateMaximized, UpdateFullscreen } from "@graphite/messages";
+import { type AppWindowPlatform, UpdatePlatform, UpdateViewportHolePunch, UpdateMaximized, UpdateFullscreen, UpdateUIScale } from "@graphite/messages";
 
 export function createAppWindowState(editor: Editor) {
 	const { subscribe, update } = writable({
@@ -9,6 +9,7 @@ export function createAppWindowState(editor: Editor) {
 		maximized: false,
 		fullscreen: false,
 		viewportHolePunch: false,
+		uiScale: 1.0,
 	});
 
 	// Set up message subscriptions on creation
@@ -36,6 +37,12 @@ export function createAppWindowState(editor: Editor) {
 			return state;
 		});
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateUIScale, (uiScale) => {
+		update((state) => {
+			state.uiScale = uiScale.scale;
+			return state;
+		});
+	});
 
 	return {
 		subscribe,