Move JS script to the top of each Vue file

frontend/src/components/window/MainWindow.vue

@@ -1,21 +1,3 @@
-<template>
-	<LayoutCol class="main-window">
-		<TitleBar :platform="platform" :maximized="maximized" />
-
-		<Workspace />
-
-		<StatusBar />
-	</LayoutCol>
-</template>
-
-<style lang="scss">
-.main-window {
-	height: 100%;
-	overflow: auto;
-	touch-action: none;
-}
-</style>
-
 <script lang="ts">
 import { defineComponent } from "vue";
 
@@ -41,3 +23,21 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<LayoutCol class="main-window">
+		<TitleBar :platform="platform" :maximized="maximized" />
+
+		<Workspace />
+
+		<StatusBar />
+	</LayoutCol>
+</template>
+
+<style lang="scss">
+.main-window {
+	height: 100%;
+	overflow: auto;
+	touch-action: none;
+}
+</style>

frontend/src/components/window/status-bar/StatusBar.vue

@@ -1,3 +1,39 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { platformIsMac } from "@/utility-functions/platform";
+import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import Separator from "@/components/widgets/labels/Separator.vue";
+import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
+
+export default defineComponent({
+	inject: ["editor"],
+	data() {
+		return {
+			hintData: [] as HintData,
+		};
+	},
+	methods: {
+		inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
+			if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
+			return hint.keyGroups;
+		},
+	},
+	mounted() {
+		this.editor.subscriptions.subscribeJsMessage(UpdateInputHints, (updateInputHints) => {
+			this.hintData = updateInputHints.hintData;
+		});
+	},
+	components: {
+		LayoutRow,
+		Separator,
+		UserInputLabel,
+	},
+});
+</script>
+
 <template>
 	<LayoutRow class="status-bar">
 		<LayoutRow class="hint-groups">
@@ -44,39 +80,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import { platformIsMac } from "@/utility-functions/platform";
-import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
-
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import Separator from "@/components/widgets/labels/Separator.vue";
-import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
-
-export default defineComponent({
-	inject: ["editor"],
-	data() {
-		return {
-			hintData: [] as HintData,
-		};
-	},
-	methods: {
-		inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
-			if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
-			return hint.keyGroups;
-		},
-	},
-	mounted() {
-		this.editor.subscriptions.subscribeJsMessage(UpdateInputHints, (updateInputHints) => {
-			this.hintData = updateInputHints.hintData;
-		});
-	},
-	components: {
-		LayoutRow,
-		Separator,
-		UserInputLabel,
-	},
-});
-</script>

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

@@ -1,3 +1,40 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
+import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
+import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
+import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
+import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
+
+export type Platform = "Windows" | "Mac" | "Linux" | "Web";
+
+export default defineComponent({
+	inject: ["portfolio"],
+	props: {
+		platform: { type: String as PropType<Platform>, required: true },
+		maximized: { type: Boolean as PropType<boolean>, required: true },
+	},
+	computed: {
+		windowTitle(): string {
+			const activeDocumentIndex = this.portfolio.state.activeDocumentIndex;
+			const activeDocumentDisplayName = this.portfolio.state.documents[activeDocumentIndex]?.displayName || "";
+
+			return `${activeDocumentDisplayName}${activeDocumentDisplayName && " - "}Graphite`;
+		},
+	},
+	components: {
+		LayoutRow,
+		MenuBarInput,
+		WindowButtonsMac,
+		WindowButtonsWeb,
+		WindowButtonsWindows,
+		WindowTitle,
+	},
+});
+</script>
+
 <template>
 	<LayoutRow class="title-bar">
 		<LayoutRow class="header-part">
@@ -36,40 +73,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
-import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
-import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
-import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
-import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
-
-export type Platform = "Windows" | "Mac" | "Linux" | "Web";
-
-export default defineComponent({
-	inject: ["portfolio"],
-	props: {
-		platform: { type: String as PropType<Platform>, required: true },
-		maximized: { type: Boolean as PropType<boolean>, required: true },
-	},
-	computed: {
-		windowTitle(): string {
-			const activeDocumentIndex = this.portfolio.state.activeDocumentIndex;
-			const activeDocumentDisplayName = this.portfolio.state.documents[activeDocumentIndex]?.displayName || "";
-
-			return `${activeDocumentDisplayName}${activeDocumentDisplayName && " - "}Graphite`;
-		},
-	},
-	components: {
-		LayoutRow,
-		MenuBarInput,
-		WindowButtonsMac,
-		WindowButtonsWeb,
-		WindowButtonsWindows,
-		WindowTitle,
-	},
-});
-</script>

frontend/src/components/window/title-bar/WindowButtonsMac.vue

@@ -1,3 +1,16 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
+export default defineComponent({
+	props: {
+		maximized: { type: Boolean as PropType<boolean>, default: false },
+	},
+	components: { LayoutRow },
+});
+</script>
+
 <template>
 	<LayoutRow class="window-buttons mac">
 		<div class="close" title="Close"></div>
@@ -37,16 +50,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-
-export default defineComponent({
-	props: {
-		maximized: { type: Boolean as PropType<boolean>, default: false },
-	},
-	components: { LayoutRow },
-});
-</script>

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

@@ -1,3 +1,31 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+
+export default defineComponent({
+	inject: ["fullscreen"],
+	methods: {
+		async handleClick() {
+			if (this.fullscreen.state.windowFullscreen) this.fullscreen.exitFullscreen();
+			else this.fullscreen.enterFullscreen();
+		},
+	},
+	computed: {
+		requestFullscreenHotkeys() {
+			return this.fullscreen.keyboardLockApiSupported && !this.fullscreen.state.keyboardLocked;
+		},
+	},
+	components: {
+		IconLabel,
+		LayoutRow,
+		TextLabel,
+	},
+});
+</script>
+
 <template>
 	<LayoutRow class="window-buttons-web" @click="() => handleClick()" :title="(fullscreen.state.windowFullscreen ? 'Exit' : 'Enter') + ' Fullscreen (F11)'">
 		<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
@@ -29,31 +57,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-
-export default defineComponent({
-	inject: ["fullscreen"],
-	methods: {
-		async handleClick() {
-			if (this.fullscreen.state.windowFullscreen) this.fullscreen.exitFullscreen();
-			else this.fullscreen.enterFullscreen();
-		},
-	},
-	computed: {
-		requestFullscreenHotkeys() {
-			return this.fullscreen.keyboardLockApiSupported && !this.fullscreen.state.keyboardLocked;
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-		TextLabel,
-	},
-});
-</script>

frontend/src/components/window/title-bar/WindowButtonsWindows.vue

@@ -1,3 +1,20 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+
+export default defineComponent({
+	props: {
+		maximized: { type: Boolean as PropType<boolean>, default: false },
+	},
+	components: {
+		IconLabel,
+		LayoutRow,
+	},
+});
+</script>
+
 <template>
 	<LayoutRow class="window-button windows minimize" title="Minimize">
 		<IconLabel :icon="'WindowButtonWinMinimize'" />
@@ -36,20 +53,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-
-export default defineComponent({
-	props: {
-		maximized: { type: Boolean as PropType<boolean>, default: false },
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-	},
-});
-</script>

frontend/src/components/window/title-bar/WindowTitle.vue

@@ -1,18 +1,3 @@
-<template>
-	<LayoutRow class="window-title">
-		<TextLabel>{{ text }}</TextLabel>
-	</LayoutRow>
-</template>
-
-<style lang="scss">
-.window-title {
-	flex: 0 0 auto;
-	align-items: center;
-	white-space: nowrap;
-	padding: 0 8px;
-}
-</style>
-
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
@@ -29,3 +14,18 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<LayoutRow class="window-title">
+		<TextLabel>{{ text }}</TextLabel>
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.window-title {
+	flex: 0 0 auto;
+	align-items: center;
+	white-space: nowrap;
+	padding: 0 8px;
+}
+</style>

frontend/src/components/window/workspace/Panel.vue

@@ -1,3 +1,83 @@
+<script lang="ts">
+import { defineComponent, nextTick, type PropType } from "vue";
+
+import { platformIsMac } from "@/utility-functions/platform";
+
+import { type LayoutKeysGroup, type Key } from "@/wasm-communication/messages";
+
+import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import Document from "@/components/panels/Document.vue";
+import LayerTree from "@/components/panels/LayerTree.vue";
+import NodeGraph from "@/components/panels/NodeGraph.vue";
+import Properties from "@/components/panels/Properties.vue";
+import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
+import TextButton from "@/components/widgets/buttons/TextButton.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
+
+const PANEL_COMPONENTS = {
+	Document,
+	IconButton,
+	LayerTree,
+	NodeGraph,
+	PopoverButton,
+	Properties,
+	TextButton,
+};
+type PanelTypes = keyof typeof PANEL_COMPONENTS;
+
+export default defineComponent({
+	inject: ["editor"],
+	props: {
+		tabMinWidths: { type: Boolean as PropType<boolean>, default: false },
+		tabCloseButtons: { type: Boolean as PropType<boolean>, default: false },
+		tabLabels: { type: Array as PropType<{ name: string; tooltip?: string }[]>, required: true },
+		tabActiveIndex: { type: Number as PropType<number>, required: true },
+		panelType: { type: String as PropType<PanelTypes>, required: false },
+		clickAction: { type: Function as PropType<(index: number) => void>, required: false },
+		closeAction: { type: Function as PropType<(index: number) => void>, required: false },
+	},
+	methods: {
+		newDocument() {
+			this.editor.instance.newDocumentDialog();
+		},
+		openDocument() {
+			this.editor.instance.documentOpen();
+		},
+		platformModifiers(reservedKey: boolean): LayoutKeysGroup {
+			// TODO: Remove this by properly feeding these keys from a layout provided by the backend
+
+			const ALT: Key = { key: "Alt", label: "Alt" };
+			const COMMAND: Key = { key: "Command", label: "Command" };
+			const CONTROL: Key = { key: "Control", label: "Ctrl" };
+
+			if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
+			return reservedKey ? [CONTROL, ALT] : [CONTROL];
+		},
+		async scrollTabIntoView(newIndex: number) {
+			await nextTick();
+
+			const panel: HTMLDivElement | undefined = this.$el;
+			if (!panel) return;
+
+			const newActiveTab = panel.querySelectorAll("[data-tab]")[newIndex] as HTMLDivElement | undefined;
+			newActiveTab?.scrollIntoView();
+		},
+	},
+	components: {
+		IconLabel,
+		LayoutCol,
+		LayoutRow,
+		TextLabel,
+		UserInputLabel,
+		...PANEL_COMPONENTS,
+	},
+});
+</script>
+
 <template>
 	<LayoutCol class="panel">
 		<LayoutRow class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
@@ -207,83 +287,3 @@
 	}
 }
 </style>
-
-<script lang="ts">
-import { defineComponent, nextTick, type PropType } from "vue";
-
-import { platformIsMac } from "@/utility-functions/platform";
-
-import { type LayoutKeysGroup, type Key } from "@/wasm-communication/messages";
-
-import LayoutCol from "@/components/layout/LayoutCol.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import Document from "@/components/panels/Document.vue";
-import LayerTree from "@/components/panels/LayerTree.vue";
-import NodeGraph from "@/components/panels/NodeGraph.vue";
-import Properties from "@/components/panels/Properties.vue";
-import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
-import TextButton from "@/components/widgets/buttons/TextButton.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
-
-const PANEL_COMPONENTS = {
-	Document,
-	IconButton,
-	LayerTree,
-	NodeGraph,
-	PopoverButton,
-	Properties,
-	TextButton,
-};
-type PanelTypes = keyof typeof PANEL_COMPONENTS;
-
-export default defineComponent({
-	inject: ["editor"],
-	props: {
-		tabMinWidths: { type: Boolean as PropType<boolean>, default: false },
-		tabCloseButtons: { type: Boolean as PropType<boolean>, default: false },
-		tabLabels: { type: Array as PropType<{ name: string; tooltip?: string }[]>, required: true },
-		tabActiveIndex: { type: Number as PropType<number>, required: true },
-		panelType: { type: String as PropType<PanelTypes>, required: false },
-		clickAction: { type: Function as PropType<(index: number) => void>, required: false },
-		closeAction: { type: Function as PropType<(index: number) => void>, required: false },
-	},
-	methods: {
-		newDocument() {
-			this.editor.instance.newDocumentDialog();
-		},
-		openDocument() {
-			this.editor.instance.documentOpen();
-		},
-		platformModifiers(reservedKey: boolean): LayoutKeysGroup {
-			// TODO: Remove this by properly feeding these keys from a layout provided by the backend
-
-			const ALT: Key = { key: "Alt", label: "Alt" };
-			const COMMAND: Key = { key: "Command", label: "Command" };
-			const CONTROL: Key = { key: "Control", label: "Ctrl" };
-
-			if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
-			return reservedKey ? [CONTROL, ALT] : [CONTROL];
-		},
-		async scrollTabIntoView(newIndex: number) {
-			await nextTick();
-
-			const panel: HTMLDivElement | undefined = this.$el;
-			if (!panel) return;
-
-			const newActiveTab = panel.querySelectorAll("[data-tab]")[newIndex] as HTMLDivElement | undefined;
-			newActiveTab?.scrollIntoView();
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutCol,
-		LayoutRow,
-		TextLabel,
-		UserInputLabel,
-		...PANEL_COMPONENTS,
-	},
-});
-</script>

frontend/src/components/window/workspace/Workspace.vue

@@ -1,68 +1,3 @@
-<template>
-	<LayoutRow class="workspace" data-workspace>
-		<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['root'] }" data-subdivision-name="root">
-			<LayoutCol class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['content'] }" data-subdivision-name="content">
-				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['document'] }" data-subdivision-name="document">
-					<Panel
-						:panelType="portfolio.state.documents.length > 0 ? 'Document' : undefined"
-						:tabCloseButtons="true"
-						:tabMinWidths="true"
-						:tabLabels="documentTabLabels"
-						:clickAction="(tabIndex: number) => editor.instance.selectDocument(portfolio.state.documents[tabIndex].id)"
-						:closeAction="(tabIndex: number) => editor.instance.closeDocumentWithConfirmation(portfolio.state.documents[tabIndex].id)"
-						:tabActiveIndex="portfolio.state.activeDocumentIndex"
-						ref="documentPanel"
-					/>
-				</LayoutRow>
-				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical @pointerdown="(e: PointerEvent) => resizePanel(e)" v-if="nodeGraphVisible"></LayoutRow>
-				<LayoutRow class="workspace-grid-subdivision" v-if="nodeGraphVisible" :style="{ 'flex-grow': panelSizes['graph'] }" data-subdivision-name="graph">
-					<Panel :panelType="'NodeGraph'" :tabLabels="[{ name: 'Node Graph' }]" :tabActiveIndex="0" />
-				</LayoutRow>
-			</LayoutCol>
-			<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal @pointerdown="(e: PointerEvent) => resizePanel(e)"></LayoutCol>
-			<LayoutCol class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['details'] }" data-subdivision-name="details">
-				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['properties'] }" data-subdivision-name="properties">
-					<Panel :panelType="'Properties'" :tabLabels="[{ name: 'Properties' }]" :tabActiveIndex="0" />
-				</LayoutRow>
-				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical @pointerdown="(e: PointerEvent) => resizePanel(e)"></LayoutRow>
-				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['layers'] }" data-subdivision-name="layers">
-					<Panel :panelType="'LayerTree'" :tabLabels="[{ name: 'Layer Tree' }]" :tabActiveIndex="0" />
-				</LayoutRow>
-			</LayoutCol>
-		</LayoutRow>
-		<DialogModal v-if="dialog.state.visible" />
-	</LayoutRow>
-</template>
-
-<style lang="scss">
-.workspace {
-	position: relative;
-	flex: 1 1 100%;
-
-	.workspace-grid-subdivision {
-		min-height: 28px;
-		flex: 1 1 0;
-
-		&.folded {
-			flex-grow: 0;
-			height: 0;
-		}
-	}
-
-	.workspace-grid-resize-gutter {
-		flex: 0 0 4px;
-
-		&.layout-row {
-			cursor: ns-resize;
-		}
-
-		&.layout-col {
-			cursor: ew-resize;
-		}
-	}
-}
-</style>
-
 <script lang="ts">
 import { defineComponent } from "vue";
 
@@ -176,3 +111,68 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<LayoutRow class="workspace" data-workspace>
+		<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['root'] }" data-subdivision-name="root">
+			<LayoutCol class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['content'] }" data-subdivision-name="content">
+				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['document'] }" data-subdivision-name="document">
+					<Panel
+						:panelType="portfolio.state.documents.length > 0 ? 'Document' : undefined"
+						:tabCloseButtons="true"
+						:tabMinWidths="true"
+						:tabLabels="documentTabLabels"
+						:clickAction="(tabIndex: number) => editor.instance.selectDocument(portfolio.state.documents[tabIndex].id)"
+						:closeAction="(tabIndex: number) => editor.instance.closeDocumentWithConfirmation(portfolio.state.documents[tabIndex].id)"
+						:tabActiveIndex="portfolio.state.activeDocumentIndex"
+						ref="documentPanel"
+					/>
+				</LayoutRow>
+				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical @pointerdown="(e: PointerEvent) => resizePanel(e)" v-if="nodeGraphVisible"></LayoutRow>
+				<LayoutRow class="workspace-grid-subdivision" v-if="nodeGraphVisible" :style="{ 'flex-grow': panelSizes['graph'] }" data-subdivision-name="graph">
+					<Panel :panelType="'NodeGraph'" :tabLabels="[{ name: 'Node Graph' }]" :tabActiveIndex="0" />
+				</LayoutRow>
+			</LayoutCol>
+			<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal @pointerdown="(e: PointerEvent) => resizePanel(e)"></LayoutCol>
+			<LayoutCol class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['details'] }" data-subdivision-name="details">
+				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['properties'] }" data-subdivision-name="properties">
+					<Panel :panelType="'Properties'" :tabLabels="[{ name: 'Properties' }]" :tabActiveIndex="0" />
+				</LayoutRow>
+				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical @pointerdown="(e: PointerEvent) => resizePanel(e)"></LayoutRow>
+				<LayoutRow class="workspace-grid-subdivision" :style="{ 'flex-grow': panelSizes['layers'] }" data-subdivision-name="layers">
+					<Panel :panelType="'LayerTree'" :tabLabels="[{ name: 'Layer Tree' }]" :tabActiveIndex="0" />
+				</LayoutRow>
+			</LayoutCol>
+		</LayoutRow>
+		<DialogModal v-if="dialog.state.visible" />
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.workspace {
+	position: relative;
+	flex: 1 1 100%;
+
+	.workspace-grid-subdivision {
+		min-height: 28px;
+		flex: 1 1 0;
+
+		&.folded {
+			flex-grow: 0;
+			height: 0;
+		}
+	}
+
+	.workspace-grid-resize-gutter {
+		flex: 0 0 4px;
+
+		&.layout-row {
+			cursor: ns-resize;
+		}
+
+		&.layout-col {
+			cursor: ew-resize;
+		}
+	}
+}
+</style>