Desktop: Add window control buttons for Linux (#3081)

* Add window buttons for linux

* Code and design review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

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

@@ -8,6 +8,7 @@
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
+	import WindowButtonsLinux from "@graphite/components/window/title-bar/WindowButtonsLinux.svelte";
 	import WindowButtonsMac from "@graphite/components/window/title-bar/WindowButtonsMac.svelte";
 	import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
 	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
@@ -82,8 +83,10 @@
 	</LayoutRow>
 	<!-- Window buttons (except on Mac) -->
 	<LayoutRow class="right">
-		{#if platform === "Windows" || platform === "Linux"}
+		{#if platform === "Windows"}
 			<WindowButtonsWindows {maximized} />
+		{:else if platform === "Linux"}
+			<WindowButtonsLinux {maximized} />
 		{:else if platform === "Web"}
 			<WindowButtonsWeb />
 		{/if}

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+
+	import type { Editor } from "@graphite/editor";
+
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+
+	export let maximized;
+
+	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()}>
+	<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
+</LayoutRow>
+<LayoutRow class="window-button linux" tooltip="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>

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

@@ -1,26 +1,17 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 
-	import type { Editor } from "@graphite/editor";
 	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	const editor = getContext<Editor>("editor");
 	const fullscreen = getContext<FullscreenState>("fullscreen");
 
 	$: requestFullscreenHotkeys = fullscreen.keyboardLockApiSupported && !$fullscreen.keyboardLocked;
 
-	async function handleClick(e: MouseEvent) {
+	async function handleClick() {
-		// TODO: Remove this debugging option to switch from web to desktop window buttons
-		if (e.ctrlKey && e.shiftKey && e.altKey) {
-			editor.handle.appWindowMinimize();
-			editor.handle.appWindowMinimize();
-			return;
-		}
-
 		if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
 		else fullscreen.enterFullscreen();
 	}