Desktop: Hide menu bar in fullscreen mode on Mac (#3464)

hide menu bar in fullscreen mode on mac

frontend/src/components/window/MainWindow.svelte

@@ -18,7 +18,9 @@
 </script>
 
 <LayoutCol class="main-window" classes={{ "viewport-hole-punch": $appWindow.viewportHolePunch }}>
-	<TitleBar />
+	{#if !($appWindow.platform == "Mac" && $appWindow.fullscreen)}
+		<TitleBar />
+	{/if}
 	<Workspace />
 	<StatusBar />
 	{#if $dialog.visible}

frontend/src/messages.ts

@@ -302,6 +302,10 @@ export class UpdateMaximized extends JsMessage {
 	readonly maximized!: boolean;
 }
 
+export class UpdateFullscreen extends JsMessage {
+	readonly fullscreen!: boolean;
+}
+
 export class CloseWindow extends JsMessage {}
 
 export class UpdateViewportHolePunch extends JsMessage {
@@ -1742,7 +1746,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateLayersPanelControlBarRightLayout,
 	UpdateLayersPanelState,
 	UpdateLayerWidths,
-	UpdateMaximized,
 	UpdateMenuBarLayout,
 	UpdateMouseCursor,
 	UpdateNodeGraphControlBarLayout,
@@ -1754,6 +1757,8 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateNodeThumbnail,
 	UpdateOpenDocumentsList,
 	UpdatePlatform,
+	UpdateMaximized,
+	UpdateFullscreen,
 	UpdatePropertiesPanelLayout,
 	UpdatePropertiesPanelState,
 	UpdateStatusBarHintsLayout,

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

@@ -1,12 +1,13 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import { type AppWindowPlatform, UpdatePlatform, UpdateViewportHolePunch, UpdateMaximized as UpdateMaximized } from "@graphite/messages";
+import { type AppWindowPlatform, UpdatePlatform, UpdateViewportHolePunch, UpdateMaximized, UpdateFullscreen } from "@graphite/messages";
 
 export function createAppWindowState(editor: Editor) {
 	const { subscribe, update } = writable({
 		platform: "Web" as AppWindowPlatform,
 		maximized: false,
+		fullscreen: false,
 		viewportHolePunch: false,
 	});
 
@@ -23,6 +24,12 @@ export function createAppWindowState(editor: Editor) {
 			return state;
 		});
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateFullscreen, (updateFullscreen) => {
+		update((state) => {
+			state.fullscreen = updateFullscreen.fullscreen;
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateViewportHolePunch, (viewportHolePunch) => {
 		update((state) => {
 			state.viewportHolePunch = viewportHolePunch.active;