From 5518384ec142d916d2d5733be73c603c49a4d029 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 2 Jan 2022 20:02:35 -0800
Subject: [PATCH] Vue/TS bug and bad typing fixes

---
 frontend/src/components/panels/Document.vue   |  37 ++--
 frontend/src/components/panels/LayerTree.vue  |   4 +-
 .../components/widgets/buttons/IconButton.vue |   4 +-
 .../widgets/floating-menus/DialogModal.vue    |   2 +-
 .../widgets/floating-menus/FloatingMenu.vue   |   4 +-
 .../widgets/floating-menus/MenuList.vue       |   6 +-
 .../widgets/inputs/CheckboxInput.vue          |   6 +-
 .../widgets/inputs/DropdownInput.vue          |   6 +-
 .../widgets/inputs/MenuBarInput.vue           |   4 +-
 .../widgets/inputs/OptionalInput.vue          |   5 +-
 .../components/widgets/inputs/RadioInput.vue  |   4 +-
 .../widgets/inputs/ShelfItemInput.vue         |   3 +-
 .../components/widgets/labels/IconLabel.vue   | 199 +-----------------
 .../widgets/labels/UserInputLabel.vue         |  21 +-
 .../widgets/options/ToolOptions.vue           |  28 ++-
 .../window/title-bar/WindowButtonsWeb.vue     |   2 +-
 frontend/src/components/workspace/Panel.vue   |   6 +-
 frontend/src/dispatcher/js-messages.ts        |  25 ++-
 frontend/src/state/dialog.ts                  |   5 +-
 frontend/src/utilities/icons.ts               | 199 ++++++++++++++++++
 20 files changed, 319 insertions(+), 251 deletions(-)
 create mode 100644 frontend/src/utilities/icons.ts

diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index bef8f4c8..7ec283b3 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -46,9 +46,9 @@
 
 				<Separator :type="'Section'" />
 
-				<IconButton :action="() => this.$refs.zoom.onIncrement('Increase')" :icon="'ZoomIn'" :size="24" title="Zoom In" />
-				<IconButton :action="() => this.$refs.zoom.onIncrement('Decrease')" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
-				<IconButton :action="() => this.$refs.zoom.updateValue(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
+				<IconButton :action="increaseCanvasZoom" :icon="'ZoomIn'" :size="24" title="Zoom In" />
+				<IconButton :action="decreaseCanvasZoom" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
+				<IconButton :action="() => setCanvasZoom(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
 
 				<Separator :type="'Related'" />
 
@@ -70,31 +70,36 @@
 			<LayoutCol :class="'shelf'">
 				<div class="tools scrollable-y">
 					<ShelfItemInput icon="LayoutSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" />
-					<ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => dialog.comingSoon(289) && selectTool('Crop')" />
+					<ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => (dialog.comingSoon(289), false) && selectTool('Crop')" />
 					<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" />
 					<ShelfItemInput icon="LayoutEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
 
 					<Separator :type="'Section'" :direction="'Vertical'" />
 
-					<ShelfItemInput icon="ParametricTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => dialog.comingSoon(153) && selectTool('Text')" />
+					<ShelfItemInput icon="ParametricTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => (dialog.comingSoon(153), false) && selectTool('Text')" />
 					<ShelfItemInput icon="ParametricFillTool" title="Fill Tool (F)" :active="activeTool === 'Fill'" :action="() => selectTool('Fill')" />
-					<ShelfItemInput icon="ParametricGradientTool" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" :action="() => dialog.comingSoon() && selectTool('Gradient')" />
+					<ShelfItemInput
+						icon="ParametricGradientTool"
+						title="Gradient Tool (H)"
+						:active="activeTool === 'Gradient'"
+						:action="() => (dialog.comingSoon(), false) && selectTool('Gradient')"
+					/>
 
 					<Separator :type="'Section'" :direction="'Vertical'" />
 
-					<ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => dialog.comingSoon() && selectTool('Brush')" />
-					<ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => dialog.comingSoon() && selectTool('Heal')" />
-					<ShelfItemInput icon="RasterCloneTool" title="Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => dialog.comingSoon() && selectTool('Clone')" />
-					<ShelfItemInput icon="RasterPatchTool" title="Patch Tool" :active="activeTool === 'Patch'" :action="() => dialog.comingSoon() && selectTool('Patch')" />
-					<ShelfItemInput icon="RasterBlurSharpenTool" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" :action="() => dialog.comingSoon() && selectTool('BlurSharpen')" />
-					<ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => dialog.comingSoon() && selectTool('Relight')" />
+					<ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => (dialog.comingSoon(), false) && selectTool('Brush')" />
+					<ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => (dialog.comingSoon(), false) && selectTool('Heal')" />
+					<ShelfItemInput icon="RasterCloneTool" title="Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => (dialog.comingSoon(), false) && selectTool('Clone')" />
+					<ShelfItemInput icon="RasterPatchTool" title="Patch Tool" :active="activeTool === 'Patch'" :action="() => (dialog.comingSoon(), false) && selectTool('Patch')" />
+					<ShelfItemInput icon="RasterDetailTool" title="Detail Tool (D)" :active="activeTool === 'Detail'" :action="() => (dialog.comingSoon(), false) && selectTool('Detail')" />
+					<ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => (dialog.comingSoon(), false) && selectTool('Relight')" />
 
 					<Separator :type="'Section'" :direction="'Vertical'" />
 
 					<ShelfItemInput icon="VectorPathTool" title="Path Tool (A)" :active="activeTool === 'Path'" :action="() => selectTool('Path')" />
 					<ShelfItemInput icon="VectorPenTool" title="Pen Tool (P)" :active="activeTool === 'Pen'" :action="() => selectTool('Pen')" />
-					<ShelfItemInput icon="VectorFreehandTool" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" :action="() => dialog.comingSoon() && selectTool('Freehand')" />
-					<ShelfItemInput icon="VectorSplineTool" title="Spline Tool" :active="activeTool === 'Spline'" :action="() => dialog.comingSoon() && selectTool('Spline')" />
+					<ShelfItemInput icon="VectorFreehandTool" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" :action="() => (dialog.comingSoon(), false) && selectTool('Freehand')" />
+					<ShelfItemInput icon="VectorSplineTool" title="Spline Tool" :active="activeTool === 'Spline'" :action="() => (dialog.comingSoon(), false) && selectTool('Spline')" />
 					<ShelfItemInput icon="VectorLineTool" title="Line Tool (L)" :active="activeTool === 'Line'" :action="() => selectTool('Line')" />
 					<ShelfItemInput icon="VectorRectangleTool" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" :action="() => selectTool('Rectangle')" />
 					<ShelfItemInput icon="VectorEllipseTool" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" :action="() => selectTool('Ellipse')" />
@@ -246,7 +251,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/dispatcher/js-messages";
+import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation, ToolName } from "@/dispatcher/js-messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -381,7 +386,7 @@ export default defineComponent({
 			overlaysSvg: "",
 			canvasSvgWidth: "100%",
 			canvasSvgHeight: "100%",
-			activeTool: "Select",
+			activeTool: "Select" as ToolName,
 			activeToolOptions: {},
 			documentModeEntries,
 			viewModeEntries,
diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue
index 7f08c007..35cc846a 100644
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -30,10 +30,10 @@
 		</LayoutRow>
 		<LayoutRow :class="'layer-tree scrollable-y'">
 			<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateLine($event)" @dragend="drop()">
-				<div class="layer-row" v-for="(layer, index) in layers" :key="layer.path">
+				<div class="layer-row" v-for="(layer, index) in layers" :key="String(layer.path.slice(-1))">
 					<div class="layer-visibility">
 						<IconButton
-							:action="(e) => (toggleLayerVisibility(layer.path), e.stopPropagation())"
+							:action="(e) => (toggleLayerVisibility(layer.path), e && e.stopPropagation())"
 							:icon="layer.visible ? 'EyeVisible' : 'EyeHidden'"
 							:size="24"
 							:title="layer.visible ? 'Visible' : 'Hidden'"
diff --git a/frontend/src/components/widgets/buttons/IconButton.vue b/frontend/src/components/widgets/buttons/IconButton.vue
index 4a0eec3f..d3a8f37a 100644
--- a/frontend/src/components/widgets/buttons/IconButton.vue
+++ b/frontend/src/components/widgets/buttons/IconButton.vue
@@ -59,7 +59,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import IconLabel, { IconName, IconSize } from "@/components/widgets/labels/IconLabel.vue";
+import { IconName, IconSize } from "@/utilities/icons";
+
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
diff --git a/frontend/src/components/widgets/floating-menus/DialogModal.vue b/frontend/src/components/widgets/floating-menus/DialogModal.vue
index 61281ee9..3624ad4c 100644
--- a/frontend/src/components/widgets/floating-menus/DialogModal.vue
+++ b/frontend/src/components/widgets/floating-menus/DialogModal.vue
@@ -10,7 +10,7 @@
 					<TextLabel :bold="true" :class="'heading'">{{ dialog.state.heading }}</TextLabel>
 					<TextLabel :class="'details'">{{ dialog.state.details }}</TextLabel>
 					<LayoutRow :class="'buttons-row'" v-if="dialog.state.buttons.length > 0">
-						<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="button.callback" v-bind="button.props" />
+						<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback && button.callback()" v-bind="button.props" />
 					</LayoutRow>
 				</LayoutCol>
 			</LayoutRow>
diff --git a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue b/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
index 67166d49..9c203830 100644
--- a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
+++ b/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
@@ -177,7 +177,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, StyleValue } from "vue";
 
 export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center";
 export type MenuType = "Popover" | "Dropdown" | "Dialog";
@@ -401,7 +401,7 @@ export default defineComponent({
 		},
 	},
 	computed: {
-		floatingMenuContentStyle(): Partial<CSSStyleDeclaration> {
+		floatingMenuContentStyle(): StyleValue {
 			return {
 				minWidth: this.minWidth > 0 ? `${this.minWidth}px` : "",
 			};
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index ecf567bb..74061b4d 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -14,7 +14,7 @@
 			>
 				<CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" :class="'entry-checkbox'" />
 				<IconLabel v-else-if="entry.icon && drawIcon" :icon="entry.icon" :class="'entry-icon'" />
-				<div v-else-if="drawIcon" class="no-icon" />
+				<div v-else-if="drawIcon" class="no-icon"></div>
 
 				<span class="entry-label">{{ entry.label }}</span>
 
@@ -132,6 +132,8 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { IconName } from "@/utilities/icons";
+
 import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -144,7 +146,7 @@ export type SectionsOfMenuListEntries<Value = string> = MenuListEntries<Value>[]
 interface MenuListEntryData<Value = string> {
 	value?: Value;
 	label?: string;
-	icon?: string;
+	icon?: IconName;
 	checkbox?: boolean;
 	shortcut?: string[];
 	shortcutRequiresLock?: boolean;
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.vue b/frontend/src/components/widgets/inputs/CheckboxInput.vue
index 9d7c0b1a..26fdefe7 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.vue
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
-		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" />
+		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
 		<label :for="`checkbox-input-${id}`">
 			<div class="checkbox-box">
 				<IconLabel :icon="icon" />
@@ -82,7 +82,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import IconLabel, { IconName } from "@/components/widgets/labels/IconLabel.vue";
+import { IconName } from "@/utilities/icons";
+
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	data() {
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index eee69e47..6cec1cac 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="dropdown-input">
-		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
+		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
 			<IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
 		</div>
 		<MenuList
 			v-model:activeEntry="activeEntry"
-			@update:activeEntry="(newActiveEntry) => activeEntryChanged(newActiveEntry)"
-			@widthChanged="(newWidth) => onWidthChanged(newWidth)"
+			@update:activeEntry="(newActiveEntry: typeof MenuListEntry) => activeEntryChanged(newActiveEntry)"
+			@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
 			:menuEntries="menuEntries"
 			:direction="'Bottom'"
 			:drawIcon="drawIcon"
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index 1f2e9263..32edf172 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -5,12 +5,12 @@
 				<IconLabel :icon="'GraphiteLogo'" />
 			</div>
 		</div>
-		<div class="entry-container" v-for="entry in menuEntries" :key="entry">
+		<div class="entry-container" v-for="(entry, index) in menuEntries" :key="index">
 			<div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
 				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
-			<MenuList :menuEntries="entry.children" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
+			<MenuList :menuEntries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
 		</div>
 	</div>
 </template>
diff --git a/frontend/src/components/widgets/inputs/OptionalInput.vue b/frontend/src/components/widgets/inputs/OptionalInput.vue
index c9f9bb6d..3c9b7602 100644
--- a/frontend/src/components/widgets/inputs/OptionalInput.vue
+++ b/frontend/src/components/widgets/inputs/OptionalInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="optional-input">
-		<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" :icon="icon" />
+		<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" />
 	</div>
 </template>
 
@@ -36,8 +36,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { IconName } from "@/utilities/icons";
+
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
-import { IconName } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
diff --git a/frontend/src/components/widgets/inputs/RadioInput.vue b/frontend/src/components/widgets/inputs/RadioInput.vue
index e78b7f7a..3b26cebf 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.vue
+++ b/frontend/src/components/widgets/inputs/RadioInput.vue
@@ -69,13 +69,15 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { IconName } from "@/utilities/icons";
+
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export interface RadioEntryData {
 	value?: string;
 	label?: string;
-	icon?: string;
+	icon?: IconName;
 	tooltip?: string;
 	action?: () => void;
 }
diff --git a/frontend/src/components/widgets/inputs/ShelfItemInput.vue b/frontend/src/components/widgets/inputs/ShelfItemInput.vue
index 57a34d0d..1dfde148 100644
--- a/frontend/src/components/widgets/inputs/ShelfItemInput.vue
+++ b/frontend/src/components/widgets/inputs/ShelfItemInput.vue
@@ -31,8 +31,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { IconName } from "@/utilities/icons";
+
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import { IconName } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	components: { IconButton },
diff --git a/frontend/src/components/widgets/labels/IconLabel.vue b/frontend/src/components/widgets/labels/IconLabel.vue
index 37284575..7f1844d8 100644
--- a/frontend/src/components/widgets/labels/IconLabel.vue
+++ b/frontend/src/components/widgets/labels/IconLabel.vue
@@ -30,205 +30,8 @@
 <script lang="ts">
 import { DefineComponent, defineComponent, PropType } from "vue";
 
-import Checkmark from "@/../assets/12px-solid/checkmark.svg";
-import CloseX from "@/../assets/12px-solid/close-x.svg";
-import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
-import FullscreenEnter from "@/../assets/12px-solid/fullscreen-enter.svg";
-import FullscreenExit from "@/../assets/12px-solid/fullscreen-exit.svg";
-import Grid from "@/../assets/12px-solid/grid.svg";
-import Info from "@/../assets/12px-solid/info.svg";
-import KeyboardArrowDown from "@/../assets/12px-solid/keyboard-arrow-down.svg";
-import KeyboardArrowLeft from "@/../assets/12px-solid/keyboard-arrow-left.svg";
-import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
-import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
-import KeyboardBackspace from "@/../assets/12px-solid/keyboard-backspace.svg";
-import KeyboardCommand from "@/../assets/12px-solid/keyboard-command.svg";
-import KeyboardEnter from "@/../assets/12px-solid/keyboard-enter.svg";
-import KeyboardOption from "@/../assets/12px-solid/keyboard-option.svg";
-import KeyboardShift from "@/../assets/12px-solid/keyboard-shift.svg";
-import KeyboardSpace from "@/../assets/12px-solid/keyboard-space.svg";
-import KeyboardTab from "@/../assets/12px-solid/keyboard-tab.svg";
-import Link from "@/../assets/12px-solid/link.svg";
-import Overlays from "@/../assets/12px-solid/overlays.svg";
-import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
-import Snapping from "@/../assets/12px-solid/snapping.svg";
-import Swap from "@/../assets/12px-solid/swap.svg";
-import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.svg";
-import Warning from "@/../assets/12px-solid/warning.svg";
-import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
-import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
-import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
-import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
+import { IconName, IconSize, ICON_LIST } from "@/utilities/icons";
 
-import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
-import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
-import AlignLeft from "@/../assets/16px-solid/align-left.svg";
-import AlignRight from "@/../assets/16px-solid/align-right.svg";
-import AlignTop from "@/../assets/16px-solid/align-top.svg";
-import AlignVerticalCenter from "@/../assets/16px-solid/align-vertical-center.svg";
-import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
-import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
-import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
-import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
-import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
-import Copy from "@/../assets/16px-solid/copy.svg";
-import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
-import EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
-import File from "@/../assets/16px-solid/file.svg";
-import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
-import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
-import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
-import Paste from "@/../assets/16px-solid/paste.svg";
-import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
-import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
-import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
-import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
-import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
-import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
-import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
-import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
-import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
-
-import MouseHintDrag from "@/../assets/16px-two-tone/mouse-hint-drag.svg";
-import MouseHintLmbDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
-import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
-import MouseHintMmbDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
-import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
-import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
-import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
-import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
-import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
-import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
-
-import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
-import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
-
-import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
-import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
-import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
-import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
-import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
-import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
-import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
-import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
-import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
-import RasterBlurSharpenTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
-import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
-import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
-import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-tool.svg";
-import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
-import VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
-import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
-import VectorPathTool from "@/../assets/24px-two-tone/vector-path-tool.svg";
-import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
-import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
-import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
-import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
-
-export type IconName = keyof typeof ICON_LIST;
-export type IconSize = 12 | 16 | 24 | 32;
-
-const size12: IconSize = 12;
-const size16: IconSize = 16;
-const size24: IconSize = 24;
-// const size32: IconSize = 32;
-
-const ICON_LIST = {
-	Checkmark: { component: Checkmark, size: size12 },
-	CloseX: { component: CloseX, size: size12 },
-	DropdownArrow: { component: DropdownArrow, size: size12 },
-	FullscreenEnter: { component: FullscreenEnter, size: size12 },
-	FullscreenExit: { component: FullscreenExit, size: size12 },
-	Grid: { component: Grid, size: size12 },
-	Info: { component: Info, size: size12 },
-	KeyboardArrowDown: { component: KeyboardArrowDown, size: size12 },
-	KeyboardArrowLeft: { component: KeyboardArrowLeft, size: size12 },
-	KeyboardArrowRight: { component: KeyboardArrowRight, size: size12 },
-	KeyboardArrowUp: { component: KeyboardArrowUp, size: size12 },
-	KeyboardBackspace: { component: KeyboardBackspace, size: size12 },
-	KeyboardCommand: { component: KeyboardCommand, size: size12 },
-	KeyboardEnter: { component: KeyboardEnter, size: size12 },
-	KeyboardOption: { component: KeyboardOption, size: size12 },
-	KeyboardShift: { component: KeyboardShift, size: size12 },
-	KeyboardSpace: { component: KeyboardSpace, size: size12 },
-	KeyboardTab: { component: KeyboardTab, size: size12 },
-	Link: { component: Link, size: size12 },
-	Overlays: { component: Overlays, size: size12 },
-	ResetColors: { component: ResetColors, size: size12 },
-	Snapping: { component: Snapping, size: size12 },
-	Swap: { component: Swap, size: size12 },
-	VerticalEllipsis: { component: VerticalEllipsis, size: size12 },
-	Warning: { component: Warning, size: size12 },
-	WindowButtonWinClose: { component: WindowButtonWinClose, size: size12 },
-	WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: size12 },
-	WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: size12 },
-	WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: size12 },
-
-	AlignBottom: { component: AlignBottom, size: size16 },
-	AlignHorizontalCenter: { component: AlignHorizontalCenter, size: size16 },
-	AlignLeft: { component: AlignLeft, size: size16 },
-	AlignRight: { component: AlignRight, size: size16 },
-	AlignTop: { component: AlignTop, size: size16 },
-	AlignVerticalCenter: { component: AlignVerticalCenter, size: size16 },
-	BooleanDifference: { component: BooleanDifference, size: size16 },
-	BooleanIntersect: { component: BooleanIntersect, size: size16 },
-	BooleanSubtractBack: { component: BooleanSubtractBack, size: size16 },
-	BooleanSubtractFront: { component: BooleanSubtractFront, size: size16 },
-	BooleanUnion: { component: BooleanUnion, size: size16 },
-	Copy: { component: Copy, size: size16 },
-	EyeHidden: { component: EyeHidden, size: size16 },
-	EyeVisible: { component: EyeVisible, size: size16 },
-	File: { component: File, size: size16 },
-	FlipHorizontal: { component: FlipHorizontal, size: size16 },
-	FlipVertical: { component: FlipVertical, size: size16 },
-	GraphiteLogo: { component: GraphiteLogo, size: size16 },
-	Paste: { component: Paste, size: size16 },
-	ViewModeNormal: { component: ViewModeNormal, size: size16 },
-	ViewModeOutline: { component: ViewModeOutline, size: size16 },
-	ViewModePixels: { component: ViewModePixels, size: size16 },
-	ViewportDesignMode: { component: ViewportDesignMode, size: size16 },
-	ViewportGuideMode: { component: ViewportGuideMode, size: size16 },
-	ViewportSelectMode: { component: ViewportSelectMode, size: size16 },
-	ZoomIn: { component: ZoomIn, size: size16 },
-	ZoomOut: { component: ZoomOut, size: size16 },
-	ZoomReset: { component: ZoomReset, size: size16 },
-
-	MouseHintDrag: { component: MouseHintDrag, size: size16 },
-	MouseHintLmbDrag: { component: MouseHintLmbDrag, size: size16 },
-	MouseHintLmb: { component: MouseHintLmb, size: size16 },
-	MouseHintMmbDrag: { component: MouseHintMmbDrag, size: size16 },
-	MouseHintMmb: { component: MouseHintMmb, size: size16 },
-	MouseHintNone: { component: MouseHintNone, size: size16 },
-	MouseHintRmbDrag: { component: MouseHintRmbDrag, size: size16 },
-	MouseHintRmb: { component: MouseHintRmb, size: size16 },
-	MouseHintScrollDown: { component: MouseHintScrollDown, size: size16 },
-	MouseHintScrollUp: { component: MouseHintScrollUp, size: size16 },
-
-	NodeTypeFolder: { component: NodeTypeFolder, size: size24 },
-	NodeTypePath: { component: NodeTypePath, size: size24 },
-
-	LayoutCropTool: { component: LayoutCropTool, size: size24 },
-	LayoutEyedropperTool: { component: LayoutEyedropperTool, size: size24 },
-	LayoutNavigateTool: { component: LayoutNavigateTool, size: size24 },
-	LayoutSelectTool: { component: LayoutSelectTool, size: size24 },
-	ParametricFillTool: { component: ParametricFillTool, size: size24 },
-	ParametricGradientTool: { component: ParametricGradientTool, size: size24 },
-	ParametricTextTool: { component: ParametricTextTool, size: size24 },
-	RasterBrushTool: { component: RasterBrushTool, size: size24 },
-	RasterCloneTool: { component: RasterCloneTool, size: size24 },
-	RasterBlurSharpenTool: { component: RasterBlurSharpenTool, size: size24 },
-	RasterHealTool: { component: RasterHealTool, size: size24 },
-	RasterPatchTool: { component: RasterPatchTool, size: size24 },
-	RasterRelightTool: { component: RasterRelightTool, size: size24 },
-	VectorEllipseTool: { component: VectorEllipseTool, size: size24 },
-	VectorFreehandTool: { component: VectorFreehandTool, size: size24 },
-	VectorLineTool: { component: VectorLineTool, size: size24 },
-	VectorPathTool: { component: VectorPathTool, size: size24 },
-	VectorPenTool: { component: VectorPenTool, size: size24 },
-	VectorRectangleTool: { component: VectorRectangleTool, size: size24 },
-	VectorShapeTool: { component: VectorShapeTool, size: size24 },
-	VectorSplineTool: { component: VectorSplineTool, size: size24 },
-};
 const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST;
 
 export default defineComponent({
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.vue b/frontend/src/components/widgets/labels/UserInputLabel.vue
index fb2b674e..b6034b9c 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.vue
+++ b/frontend/src/components/widgets/labels/UserInputLabel.vue
@@ -2,7 +2,7 @@
 	<div class="user-input-label">
 		<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
 			<span class="group-gap" v-if="keyGroupIndex > 0"></span>
-			<template v-for="inputKey in keyGroup" :key="((keyInfo = keyTextOrIcon(inputKey)), inputKey)">
+			<template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index">
 				<span class="input-key" :class="keyInfo.width">
 					<IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" />
 					<template v-else>{{ keyInfo.text }}</template>
@@ -10,7 +10,7 @@
 			</template>
 		</template>
 		<span class="input-mouse" v-if="inputMouse">
-			<IconLabel :icon="`MouseHint${inputMouse}`" />
+			<IconLabel :icon="mouseHintIcon(inputMouse)" />
 		</span>
 		<span class="hint-text" v-if="hasSlotContent">
 			<slot></slot>
@@ -97,7 +97,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { HintInfo } from "@/dispatcher/js-messages";
+import { HintInfo, KeysGroup } from "@/dispatcher/js-messages";
+
+import { IconName } from "@/utilities/icons";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
@@ -113,7 +115,10 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		keyTextOrIcon(keyText: string): { text: string | null; icon: string | null; width: string } {
+		keyTextOrIconList(keyGroup: KeysGroup): { text: string | null; icon: IconName | null; width: string }[] {
+			return keyGroup.map((inputKey) => this.keyTextOrIcon(inputKey));
+		},
+		keyTextOrIcon(keyText: string): { text: string | null; icon: IconName | null; width: string } {
 			// Definitions
 			const textMap: Record<string, string> = {
 				Control: "Ctrl",
@@ -153,7 +158,7 @@ export default defineComponent({
 			if (text in iconsAndWidths) {
 				return {
 					text: null,
-					icon: `Keyboard${text}`,
+					icon: this.keyboardHintIcon(text),
 					width: `width-${iconsAndWidths[text] * 8 + 8}`,
 				};
 			}
@@ -170,6 +175,12 @@ export default defineComponent({
 
 			return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
 		},
+		mouseHintIcon(input: HintInfo["mouse"]): IconName {
+			return `MouseHint${input}` as IconName;
+		},
+		keyboardHintIcon(input: HintInfo["key_groups"][0][0]): IconName {
+			return `Keyboard${input}` as IconName;
+		},
 	},
 });
 </script>
diff --git a/frontend/src/components/widgets/options/ToolOptions.vue b/frontend/src/components/widgets/options/ToolOptions.vue
index 0c8ee88d..e90ed3a5 100644
--- a/frontend/src/components/widgets/options/ToolOptions.vue
+++ b/frontend/src/components/widgets/options/ToolOptions.vue
@@ -31,6 +31,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { ToolName } from "@/dispatcher/js-messages";
 import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
 
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
@@ -38,13 +39,11 @@ import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 import Separator from "@/components/widgets/separators/Separator.vue";
 
-export type ToolName = "Select" | "Shape" | "Line" | "Pen";
-
 export default defineComponent({
 	inject: ["editor", "dialog"],
 	props: {
-		activeTool: { type: String as PropType<ToolName> },
-		activeToolOptions: { type: Object as PropType<Record<string, object>> },
+		activeTool: { type: String as PropType<ToolName>, required: true },
+		activeToolOptions: { type: Object as PropType<Record<string, object>>, required: true },
 	},
 	methods: {
 		async updateToolOptions(path: string[], newValue: number) {
@@ -152,9 +151,26 @@ export default defineComponent({
 					props: {},
 				},
 			],
-			Shape: [{ kind: "NumberInput", optionPath: ["shape_type", "Polygon", "vertices"], props: { min: 3, isInteger: true, label: "Sides" } }],
-			Line: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
+			Crop: [],
+			Navigate: [],
+			Eyedropper: [],
+			Text: [],
+			Fill: [],
+			Gradient: [],
+			Brush: [],
+			Heal: [],
+			Clone: [],
+			Patch: [],
+			Detail: [],
+			Relight: [],
+			Path: [],
 			Pen: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
+			Freehand: [],
+			Spline: [],
+			Line: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
+			Rectangle: [],
+			Ellipse: [],
+			Shape: [{ kind: "NumberInput", optionPath: ["shape_type", "Polygon", "vertices"], props: { min: 3, isInteger: true, label: "Sides" } }],
 		};
 
 		return {
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.vue b/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
index 2c5334c8..b65c63bc 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
+++ b/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="window-buttons-web" @click="(e) => handleClick(e)" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
+	<div class="window-buttons-web" @click="() => handleClick()" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
 		<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
 		<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
 	</div>
diff --git a/frontend/src/components/workspace/Panel.vue b/frontend/src/components/workspace/Panel.vue
index d53c7002..04fcfa0c 100644
--- a/frontend/src/components/workspace/Panel.vue
+++ b/frontend/src/components/workspace/Panel.vue
@@ -7,11 +7,11 @@
 					:class="{ active: tabIndex === tabActiveIndex }"
 					v-for="(tabLabel, tabIndex) in tabLabels"
 					:key="tabIndex"
-					@click="(e) => e.stopPropagation() || (clickAction && clickAction(tabIndex))"
-					@click.middle="(e) => e.stopPropagation() || (closeAction && closeAction(tabIndex))"
+					@click="(e) => (e && e.stopPropagation(), clickAction && clickAction(tabIndex))"
+					@click.middle="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))"
 				>
 					<span>{{ tabLabel }}</span>
-					<IconButton :action="(e) => e.stopPropagation() || (closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
+					<IconButton :action="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
 				</div>
 			</div>
 			<PopoverButton :icon="'VerticalEllipsis'">
diff --git a/frontend/src/dispatcher/js-messages.ts b/frontend/src/dispatcher/js-messages.ts
index 95534db6..dc0d166e 100644
--- a/frontend/src/dispatcher/js-messages.ts
+++ b/frontend/src/dispatcher/js-messages.ts
@@ -112,8 +112,31 @@ export class UpdateWorkingColors extends JsMessage {
 	readonly secondary!: Color;
 }
 
+export type ToolName =
+	| "Select"
+	| "Crop"
+	| "Navigate"
+	| "Eyedropper"
+	| "Text"
+	| "Fill"
+	| "Gradient"
+	| "Brush"
+	| "Heal"
+	| "Clone"
+	| "Patch"
+	| "Detail"
+	| "Relight"
+	| "Path"
+	| "Pen"
+	| "Freehand"
+	| "Spline"
+	| "Line"
+	| "Rectangle"
+	| "Ellipse"
+	| "Shape";
+
 export class SetActiveTool extends JsMessage {
-	readonly tool_name!: string;
+	readonly tool_name!: ToolName;
 
 	readonly tool_options!: object;
 }
diff --git a/frontend/src/state/dialog.ts b/frontend/src/state/dialog.ts
index 34fbad03..896f928d 100644
--- a/frontend/src/state/dialog.ts
+++ b/frontend/src/state/dialog.ts
@@ -2,6 +2,7 @@ import { reactive, readonly } from "vue";
 
 import { DisplayAboutGraphiteDialog } from "@/dispatcher/js-messages";
 import { EditorState } from "@/state/wasm-loader";
+import { IconName } from "@/utilities/icons";
 import { stripIndents } from "@/utilities/strip-indents";
 import { TextButtonWidget } from "@/utilities/widgets";
 
@@ -9,13 +10,13 @@ import { TextButtonWidget } from "@/utilities/widgets";
 export function createDialogState(editor: EditorState) {
 	const state = reactive({
 		visible: false,
-		icon: "",
+		icon: "" as IconName,
 		heading: "",
 		details: "",
 		buttons: [] as TextButtonWidget[],
 	});
 
-	const createDialog = (icon: string, heading: string, details: string, buttons: TextButtonWidget[]): void => {
+	const createDialog = (icon: IconName, heading: string, details: string, buttons: TextButtonWidget[]): void => {
 		state.visible = true;
 		state.icon = icon;
 		state.heading = heading;
diff --git a/frontend/src/utilities/icons.ts b/frontend/src/utilities/icons.ts
new file mode 100644
index 00000000..3033b742
--- /dev/null
+++ b/frontend/src/utilities/icons.ts
@@ -0,0 +1,199 @@
+import Checkmark from "@/../assets/12px-solid/checkmark.svg";
+import CloseX from "@/../assets/12px-solid/close-x.svg";
+import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
+import FullscreenEnter from "@/../assets/12px-solid/fullscreen-enter.svg";
+import FullscreenExit from "@/../assets/12px-solid/fullscreen-exit.svg";
+import Grid from "@/../assets/12px-solid/grid.svg";
+import Info from "@/../assets/12px-solid/info.svg";
+import KeyboardArrowDown from "@/../assets/12px-solid/keyboard-arrow-down.svg";
+import KeyboardArrowLeft from "@/../assets/12px-solid/keyboard-arrow-left.svg";
+import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
+import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
+import KeyboardBackspace from "@/../assets/12px-solid/keyboard-backspace.svg";
+import KeyboardCommand from "@/../assets/12px-solid/keyboard-command.svg";
+import KeyboardEnter from "@/../assets/12px-solid/keyboard-enter.svg";
+import KeyboardOption from "@/../assets/12px-solid/keyboard-option.svg";
+import KeyboardShift from "@/../assets/12px-solid/keyboard-shift.svg";
+import KeyboardSpace from "@/../assets/12px-solid/keyboard-space.svg";
+import KeyboardTab from "@/../assets/12px-solid/keyboard-tab.svg";
+import Link from "@/../assets/12px-solid/link.svg";
+import Overlays from "@/../assets/12px-solid/overlays.svg";
+import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
+import Snapping from "@/../assets/12px-solid/snapping.svg";
+import Swap from "@/../assets/12px-solid/swap.svg";
+import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.svg";
+import Warning from "@/../assets/12px-solid/warning.svg";
+import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
+import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
+import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
+import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
+
+import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
+import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
+import AlignLeft from "@/../assets/16px-solid/align-left.svg";
+import AlignRight from "@/../assets/16px-solid/align-right.svg";
+import AlignTop from "@/../assets/16px-solid/align-top.svg";
+import AlignVerticalCenter from "@/../assets/16px-solid/align-vertical-center.svg";
+import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
+import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
+import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
+import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
+import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
+import Copy from "@/../assets/16px-solid/copy.svg";
+import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
+import EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
+import File from "@/../assets/16px-solid/file.svg";
+import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
+import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
+import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
+import Paste from "@/../assets/16px-solid/paste.svg";
+import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
+import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
+import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
+import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
+import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
+import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
+import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
+import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
+import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
+
+import MouseHintDrag from "@/../assets/16px-two-tone/mouse-hint-drag.svg";
+import MouseHintLmbDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
+import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
+import MouseHintMmbDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
+import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
+import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
+import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
+import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
+import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
+import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
+
+import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
+import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
+
+import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
+import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
+import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
+import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
+import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
+import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
+import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
+import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
+import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
+import RasterDetailTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
+import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
+import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
+import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-tool.svg";
+import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
+import VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
+import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
+import VectorPathTool from "@/../assets/24px-two-tone/vector-path-tool.svg";
+import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
+import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
+import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
+import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
+
+export type IconName = keyof typeof ICON_LIST;
+export type IconSize = 12 | 16 | 24 | 32;
+
+const size12: IconSize = 12;
+const size16: IconSize = 16;
+const size24: IconSize = 24;
+// const size32: IconSize = 32;
+
+export const ICON_LIST = {
+	Checkmark: { component: Checkmark, size: size12 },
+	CloseX: { component: CloseX, size: size12 },
+	DropdownArrow: { component: DropdownArrow, size: size12 },
+	FullscreenEnter: { component: FullscreenEnter, size: size12 },
+	FullscreenExit: { component: FullscreenExit, size: size12 },
+	Grid: { component: Grid, size: size12 },
+	Info: { component: Info, size: size12 },
+	KeyboardArrowDown: { component: KeyboardArrowDown, size: size12 },
+	KeyboardArrowLeft: { component: KeyboardArrowLeft, size: size12 },
+	KeyboardArrowRight: { component: KeyboardArrowRight, size: size12 },
+	KeyboardArrowUp: { component: KeyboardArrowUp, size: size12 },
+	KeyboardBackspace: { component: KeyboardBackspace, size: size12 },
+	KeyboardCommand: { component: KeyboardCommand, size: size12 },
+	KeyboardEnter: { component: KeyboardEnter, size: size12 },
+	KeyboardOption: { component: KeyboardOption, size: size12 },
+	KeyboardShift: { component: KeyboardShift, size: size12 },
+	KeyboardSpace: { component: KeyboardSpace, size: size12 },
+	KeyboardTab: { component: KeyboardTab, size: size12 },
+	Link: { component: Link, size: size12 },
+	Overlays: { component: Overlays, size: size12 },
+	ResetColors: { component: ResetColors, size: size12 },
+	Snapping: { component: Snapping, size: size12 },
+	Swap: { component: Swap, size: size12 },
+	VerticalEllipsis: { component: VerticalEllipsis, size: size12 },
+	Warning: { component: Warning, size: size12 },
+	WindowButtonWinClose: { component: WindowButtonWinClose, size: size12 },
+	WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: size12 },
+	WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: size12 },
+	WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: size12 },
+
+	AlignBottom: { component: AlignBottom, size: size16 },
+	AlignHorizontalCenter: { component: AlignHorizontalCenter, size: size16 },
+	AlignLeft: { component: AlignLeft, size: size16 },
+	AlignRight: { component: AlignRight, size: size16 },
+	AlignTop: { component: AlignTop, size: size16 },
+	AlignVerticalCenter: { component: AlignVerticalCenter, size: size16 },
+	BooleanDifference: { component: BooleanDifference, size: size16 },
+	BooleanIntersect: { component: BooleanIntersect, size: size16 },
+	BooleanSubtractBack: { component: BooleanSubtractBack, size: size16 },
+	BooleanSubtractFront: { component: BooleanSubtractFront, size: size16 },
+	BooleanUnion: { component: BooleanUnion, size: size16 },
+	Copy: { component: Copy, size: size16 },
+	EyeHidden: { component: EyeHidden, size: size16 },
+	EyeVisible: { component: EyeVisible, size: size16 },
+	File: { component: File, size: size16 },
+	FlipHorizontal: { component: FlipHorizontal, size: size16 },
+	FlipVertical: { component: FlipVertical, size: size16 },
+	GraphiteLogo: { component: GraphiteLogo, size: size16 },
+	Paste: { component: Paste, size: size16 },
+	ViewModeNormal: { component: ViewModeNormal, size: size16 },
+	ViewModeOutline: { component: ViewModeOutline, size: size16 },
+	ViewModePixels: { component: ViewModePixels, size: size16 },
+	ViewportDesignMode: { component: ViewportDesignMode, size: size16 },
+	ViewportGuideMode: { component: ViewportGuideMode, size: size16 },
+	ViewportSelectMode: { component: ViewportSelectMode, size: size16 },
+	ZoomIn: { component: ZoomIn, size: size16 },
+	ZoomOut: { component: ZoomOut, size: size16 },
+	ZoomReset: { component: ZoomReset, size: size16 },
+
+	MouseHintDrag: { component: MouseHintDrag, size: size16 },
+	MouseHintLmbDrag: { component: MouseHintLmbDrag, size: size16 },
+	MouseHintLmb: { component: MouseHintLmb, size: size16 },
+	MouseHintMmbDrag: { component: MouseHintMmbDrag, size: size16 },
+	MouseHintMmb: { component: MouseHintMmb, size: size16 },
+	MouseHintNone: { component: MouseHintNone, size: size16 },
+	MouseHintRmbDrag: { component: MouseHintRmbDrag, size: size16 },
+	MouseHintRmb: { component: MouseHintRmb, size: size16 },
+	MouseHintScrollDown: { component: MouseHintScrollDown, size: size16 },
+	MouseHintScrollUp: { component: MouseHintScrollUp, size: size16 },
+
+	NodeTypeFolder: { component: NodeTypeFolder, size: size24 },
+	NodeTypePath: { component: NodeTypePath, size: size24 },
+
+	LayoutCropTool: { component: LayoutCropTool, size: size24 },
+	LayoutEyedropperTool: { component: LayoutEyedropperTool, size: size24 },
+	LayoutNavigateTool: { component: LayoutNavigateTool, size: size24 },
+	LayoutSelectTool: { component: LayoutSelectTool, size: size24 },
+	ParametricFillTool: { component: ParametricFillTool, size: size24 },
+	ParametricGradientTool: { component: ParametricGradientTool, size: size24 },
+	ParametricTextTool: { component: ParametricTextTool, size: size24 },
+	RasterBrushTool: { component: RasterBrushTool, size: size24 },
+	RasterCloneTool: { component: RasterCloneTool, size: size24 },
+	RasterDetailTool: { component: RasterDetailTool, size: size24 },
+	RasterHealTool: { component: RasterHealTool, size: size24 },
+	RasterPatchTool: { component: RasterPatchTool, size: size24 },
+	RasterRelightTool: { component: RasterRelightTool, size: size24 },
+	VectorEllipseTool: { component: VectorEllipseTool, size: size24 },
+	VectorFreehandTool: { component: VectorFreehandTool, size: size24 },
+	VectorLineTool: { component: VectorLineTool, size: size24 },
+	VectorPathTool: { component: VectorPathTool, size: size24 },
+	VectorPenTool: { component: VectorPenTool, size: size24 },
+	VectorRectangleTool: { component: VectorRectangleTool, size: size24 },
+	VectorShapeTool: { component: VectorShapeTool, size: size24 },
+	VectorSplineTool: { component: VectorSplineTool, size: size24 },
+};