Desktop: Add the transparent viewport hole punch and hook up window button plumbing (#2949)

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

@@ -0,0 +1,40 @@
+/* eslint-disable max-classes-per-file */
+
+import { writable } from "svelte/store";
+
+import { type Editor } from "@graphite/editor";
+import { type AppWindowPlatform, UpdatePlatform, UpdateMaximized, UpdateViewportHolePunch } from "@graphite/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createAppWindowState(editor: Editor) {
+	const { subscribe, update } = writable({
+		platform: "Web" as AppWindowPlatform,
+		maximized: false,
+		viewportHolePunch: false,
+	});
+
+	// Set up message subscriptions on creation
+	editor.subscriptions.subscribeJsMessage(UpdatePlatform, (updatePlatform) => {
+		update((state) => {
+			state.platform = updatePlatform.platform;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateMaximized, (maximized) => {
+		update((state) => {
+			state.maximized = maximized.maximized;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateViewportHolePunch, (viewportHolePunch) => {
+		update((state) => {
+			state.viewportHolePunch = viewportHolePunch.active;
+			return state;
+		});
+	});
+
+	return {
+		subscribe,
+	};
+}
+export type AppWindowState = ReturnType<typeof createAppWindowState>;

frontend/src/state-providers/portfolio.ts

@@ -103,7 +103,6 @@ export function createPortfolioState(editor: Editor) {
 			// Fail silently if there's an error rasterizing the SVG, such as a zero-sized image
 		}
 	});
-
 	editor.subscriptions.subscribeJsMessage(UpdateSpreadsheetState, async (updateSpreadsheetState) => {
 		update((state) => {
 			state.spreadsheetOpen = updateSpreadsheetState.open;
@@ -111,7 +110,6 @@ export function createPortfolioState(editor: Editor) {
 			return state;
 		});
 	});
-
 	editor.subscriptions.subscribeJsMessage(UpdateSpreadsheetLayout, (updateSpreadsheetLayout) => {
 		update((state) => {
 			patchWidgetLayout(state.spreadsheetWidgets, updateSpreadsheetLayout);