From 39849c9c02a08ed4685cf7d6aebd971b9ca07743 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 14 Jan 2026 19:05:25 -0800
Subject: [PATCH] Simplify Svelte component structure in the window subfolder

---
 .../src/components/window/MainWindow.svelte   |   6 +-
 .../window/{workspace => }/Panel.svelte       |   0
 .../window/{status-bar => }/StatusBar.svelte  |   0
 .../src/components/window/TitleBar.svelte     | 139 ++++++++++++++++++
 .../window/{workspace => }/Workspace.svelte   |   2 +-
 .../window/title-bar/TitleBar.svelte          |  76 ----------
 .../title-bar/WindowButtonsLinux.svelte       |  43 ------
 .../window/title-bar/WindowButtonsWeb.svelte  |  48 ------
 .../title-bar/WindowButtonsWindows.svelte     |  46 ------
 9 files changed, 143 insertions(+), 217 deletions(-)
 rename frontend/src/components/window/{workspace => }/Panel.svelte (100%)
 rename frontend/src/components/window/{status-bar => }/StatusBar.svelte (100%)
 create mode 100644 frontend/src/components/window/TitleBar.svelte
 rename frontend/src/components/window/{workspace => }/Workspace.svelte (99%)
 delete mode 100644 frontend/src/components/window/title-bar/TitleBar.svelte
 delete mode 100644 frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
 delete mode 100644 frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
 delete mode 100644 frontend/src/components/window/title-bar/WindowButtonsWindows.svelte

diff --git a/frontend/src/components/window/MainWindow.svelte b/frontend/src/components/window/MainWindow.svelte
index fb33864d..c316909f 100644
--- a/frontend/src/components/window/MainWindow.svelte
+++ b/frontend/src/components/window/MainWindow.svelte
@@ -10,9 +10,9 @@
 	import Tooltip from "@graphite/components/floating-menus/Tooltip.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.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";
+	import StatusBar from "@graphite/components/window/StatusBar.svelte";
+	import TitleBar from "@graphite/components/window/TitleBar.svelte";
+	import Workspace from "@graphite/components/window/Workspace.svelte";
 
 	const dialog = getContext<DialogState>("dialog");
 	const tooltip = getContext<TooltipState>("tooltip");
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/Panel.svelte
similarity index 100%
rename from frontend/src/components/window/workspace/Panel.svelte
rename to frontend/src/components/window/Panel.svelte
diff --git a/frontend/src/components/window/status-bar/StatusBar.svelte b/frontend/src/components/window/StatusBar.svelte
similarity index 100%
rename from frontend/src/components/window/status-bar/StatusBar.svelte
rename to frontend/src/components/window/StatusBar.svelte
diff --git a/frontend/src/components/window/TitleBar.svelte b/frontend/src/components/window/TitleBar.svelte
new file mode 100644
index 00000000..24a1716f
--- /dev/null
+++ b/frontend/src/components/window/TitleBar.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { getContext, onMount } from "svelte";
+
+	import type { Editor } from "@graphite/editor";
+	import type { Layout } from "@graphite/messages";
+	import { patchLayout, UpdateMenuBarLayout } from "@graphite/messages";
+	import type { AppWindowState } from "@graphite/state-providers/app-window";
+	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
+	import type { TooltipState } from "@graphite/state-providers/tooltip";
+
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+
+	const appWindow = getContext<AppWindowState>("appWindow");
+	const editor = getContext<Editor>("editor");
+	const fullscreen = getContext<FullscreenState>("fullscreen");
+	const tooltip = getContext<TooltipState>("tooltip");
+
+	let menuBarLayout: Layout = [];
+
+	$: showFullscreenButton = $appWindow.platform === "Web" || $fullscreen.windowFullscreen;
+	// On Mac, the menu bar height needs to be scaled by the inverse of the UI scale to fit its native window buttons
+	$: height = $appWindow.platform === "Mac" ? 28 * (1 / $appWindow.uiScale) : 28;
+
+	onMount(() => {
+		editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (data) => {
+			patchLayout(menuBarLayout, data);
+			menuBarLayout = menuBarLayout;
+		});
+	});
+</script>
+
+<LayoutRow class="title-bar" styles={{ height: height + "px" }}>
+	<!-- Menu bar -->
+	<LayoutRow class="menu-bar">
+		{#if $appWindow.platform !== "Mac"}
+			<WidgetLayout layout={menuBarLayout} layoutTarget="MenuBar" />
+		{/if}
+	</LayoutRow>
+	<!-- Window frame -->
+	<LayoutRow class="window-frame" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
+	<!-- Window buttons -->
+	<LayoutRow class="window-buttons" classes={{ fullscreen: showFullscreenButton, windows: $appWindow.platform === "Windows", linux: $appWindow.platform === "Linux" }}>
+		{#if $appWindow.platform !== "Mac"}
+			{#if showFullscreenButton}
+				<LayoutRow
+					tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+					tooltipDescription={$appWindow.platform === "Web" && $fullscreen.keyboardLockApiSupported
+						? "While fullscreen, keyboard shortcuts normally reserved by the browser become available."
+						: undefined}
+					tooltipShortcut={$tooltip.f11Shortcut}
+					on:click={() => ($fullscreen.windowFullscreen ? fullscreen.exitFullscreen : fullscreen.enterFullscreen)()}
+				>
+					<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
+				</LayoutRow>
+			{:else}
+				<LayoutRow tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
+					<IconLabel icon="WindowButtonWinMinimize" />
+				</LayoutRow>
+				<LayoutRow tooltipLabel={$appWindow.maximized ? ($appWindow.platform === "Windows" ? "Restore Down" : "Unmaximize") : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
+					<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
+				</LayoutRow>
+				<LayoutRow tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
+					<IconLabel icon="WindowButtonWinClose" />
+				</LayoutRow>
+			{/if}
+		{/if}
+	</LayoutRow>
+</LayoutRow>
+
+<style lang="scss" global>
+	.title-bar {
+		flex: 0 0 auto;
+
+		> .layout-row {
+			flex: 0 0 auto;
+
+			> .widget-span {
+				--row-height: 28px;
+
+				> * {
+					--widget-height: 28px;
+				}
+			}
+
+			&.window-frame {
+				flex: 1 1 100%;
+			}
+
+			.text-button {
+				height: 100%;
+			}
+		}
+
+		.window-buttons {
+			> .layout-row {
+				flex: 0 0 auto;
+				align-items: center;
+
+				svg {
+					fill: var(--color-e-nearwhite);
+				}
+
+				&:hover {
+					background: var(--color-6-lowergray);
+
+					svg {
+						fill: var(--color-f-white);
+					}
+				}
+			}
+
+			&.fullscreen > .layout-row {
+				padding: 0 8px;
+			}
+
+			&.windows > .layout-row {
+				padding: 0 17px;
+
+				&:hover {
+					background: #2d2d2d;
+				}
+
+				&:last-of-type:hover {
+					background: #c42b1c;
+				}
+			}
+
+			&.linux > .layout-row {
+				padding: 0 12px;
+
+				&:hover {
+					border-radius: 2px;
+				}
+			}
+		}
+	}
+</style>
diff --git a/frontend/src/components/window/workspace/Workspace.svelte b/frontend/src/components/window/Workspace.svelte
similarity index 99%
rename from frontend/src/components/window/workspace/Workspace.svelte
rename to frontend/src/components/window/Workspace.svelte
index ab7938d5..baf3d86b 100644
--- a/frontend/src/components/window/workspace/Workspace.svelte
+++ b/frontend/src/components/window/Workspace.svelte
@@ -7,7 +7,7 @@
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import Panel from "@graphite/components/window/workspace/Panel.svelte";
+	import Panel from "@graphite/components/window/Panel.svelte";
 
 	const MIN_PANEL_SIZE = 100;
 	const PANEL_SIZES = {
diff --git a/frontend/src/components/window/title-bar/TitleBar.svelte b/frontend/src/components/window/title-bar/TitleBar.svelte
deleted file mode 100644
index 4dd01d07..00000000
--- a/frontend/src/components/window/title-bar/TitleBar.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-	import { getContext, onMount } from "svelte";
-
-	import type { Editor } from "@graphite/editor";
-	import type { Layout } from "@graphite/messages";
-	import { patchLayout, UpdateMenuBarLayout } from "@graphite/messages";
-	import type { AppWindowState } from "@graphite/state-providers/app-window";
-
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
-	import WindowButtonsLinux from "@graphite/components/window/title-bar/WindowButtonsLinux.svelte";
-	import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
-	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
-
-	const appWindow = getContext<AppWindowState>("appWindow");
-	const editor = getContext<Editor>("editor");
-
-	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, (data) => {
-			patchLayout(menuBarLayout, data);
-			menuBarLayout = menuBarLayout;
-		});
-	});
-</script>
-
-<LayoutRow class="title-bar" styles={{ height: height + "px" }}>
-	<!-- Menu bar -->
-	<LayoutRow>
-		{#if $appWindow.platform !== "Mac"}
-			<WidgetLayout layout={menuBarLayout} layoutTarget="MenuBar" />
-		{/if}
-	</LayoutRow>
-	<!-- Spacer -->
-	<LayoutRow class="spacer" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
-	<!-- Window buttons -->
-	<LayoutRow>
-		{#if $appWindow.platform === "Web"}
-			<WindowButtonsWeb />
-		{:else if $appWindow.platform === "Windows"}
-			<WindowButtonsWindows />
-		{:else if $appWindow.platform === "Linux"}
-			<WindowButtonsLinux />
-		{/if}
-	</LayoutRow>
-</LayoutRow>
-
-<style lang="scss" global>
-	.title-bar {
-		flex: 0 0 auto;
-
-		> .layout-row {
-			flex: 0 0 auto;
-
-			> .widget-span {
-				--row-height: 28px;
-
-				> * {
-					--widget-height: 28px;
-				}
-			}
-
-			&.spacer {
-				flex: 1 1 100%;
-			}
-
-			.text-button {
-				height: 100%;
-			}
-		}
-	}
-</style>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsLinux.svelte b/frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
deleted file mode 100644
index 520116d1..00000000
--- a/frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	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";
-
-	const appWindow = getContext<AppWindowState>("appWindow");
-	const editor = getContext<Editor>("editor");
-</script>
-
-<LayoutRow class="window-button linux" tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
-	<IconLabel icon="WindowButtonWinMinimize" />
-</LayoutRow>
-<LayoutRow class="window-button linux" tooltipLabel={$appWindow.maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
-	<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
-</LayoutRow>
-<LayoutRow class="window-button linux" tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
-	<IconLabel icon="WindowButtonWinClose" />
-</LayoutRow>
-
-<style lang="scss" global>
-	.window-button.linux {
-		flex: 0 0 auto;
-		align-items: center;
-		padding: 0 12px;
-
-		svg {
-			fill: var(--color-e-nearwhite);
-		}
-
-		&:hover {
-			background: var(--color-6-lowergray);
-			border-radius: 2px;
-
-			svg {
-				fill: var(--color-f-white);
-			}
-		}
-	}
-</style>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
deleted file mode 100644
index a87b41f6..00000000
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-	import { getContext } from "svelte";
-
-	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
-
-	import type { TooltipState } from "@graphite/state-providers/tooltip";
-
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-
-	const fullscreen = getContext<FullscreenState>("fullscreen");
-	const tooltip = getContext<TooltipState>("tooltip");
-
-	async function handleClick() {
-		if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
-		else fullscreen.enterFullscreen();
-	}
-</script>
-
-<LayoutRow
-	class="window-buttons-web"
-	on:click={handleClick}
-	tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
-	tooltipDescription={$fullscreen.keyboardLockApiSupported ? "While fullscreen, keyboard shortcuts normally reserved by the browser become available." : ""}
-	tooltipShortcut={$tooltip.f11Shortcut}
->
-	<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
-</LayoutRow>
-
-<style lang="scss" global>
-	.window-buttons-web {
-		flex: 0 0 auto;
-		align-items: center;
-		padding: 0 8px;
-
-		svg {
-			fill: var(--color-e-nearwhite);
-		}
-
-		&:hover {
-			background: var(--color-6-lowergray);
-
-			svg {
-				fill: var(--color-f-white);
-			}
-		}
-	}
-</style>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
deleted file mode 100644
index 72e305cf..00000000
--- a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-	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";
-
-	const appWindow = getContext<AppWindowState>("appWindow");
-	const editor = getContext<Editor>("editor");
-</script>
-
-<LayoutRow class="window-button windows" tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
-	<IconLabel icon="WindowButtonWinMinimize" />
-</LayoutRow>
-<LayoutRow class="window-button windows" tooltipLabel={$appWindow.maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
-	<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
-</LayoutRow>
-<LayoutRow class="window-button windows" tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
-	<IconLabel icon="WindowButtonWinClose" />
-</LayoutRow>
-
-<style lang="scss" global>
-	.window-button.windows {
-		flex: 0 0 auto;
-		align-items: center;
-		padding: 0 17px;
-
-		svg {
-			fill: var(--color-e-nearwhite);
-		}
-
-		&:hover {
-			background: #2d2d2d;
-
-			svg {
-				fill: var(--color-f-white);
-			}
-		}
-
-		&:last-of-type:hover {
-			background: #c42b1c;
-		}
-	}
-</style>