Major frontend code cleanup (#452)

Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed

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

@@ -1,14 +1,14 @@
 <template>
 	<div class="header-third">
-		<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
-		<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
+		<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
+		<MenuBarInput v-if="platform !== 'Mac'" />
 	</div>
 	<div class="header-third">
 		<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
 	</div>
 	<div class="header-third">
-		<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />
-		<WindowButtonsWeb :maximized="maximized" v-if="platform === ApplicationPlatform.Web" />
+		<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
+		<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
 	</div>
 </template>
 
@@ -32,25 +32,21 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
-import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.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 MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
-import { ApplicationPlatform } from "@/components/window/MainWindow.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: ["documents"],
 	props: {
-		platform: { type: String, required: true },
-		maximized: { type: Boolean, required: true },
-	},
-	data() {
-		return {
-			ApplicationPlatform,
-		};
+		platform: { type: String as PropType<Platform>, required: true },
+		maximized: { type: Boolean as PropType<boolean>, required: true },
 	},
 	computed: {
 		activeDocumentDisplayName() {

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

@@ -35,11 +35,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
 	props: {
-		maximized: { type: Boolean, default: false },
+		maximized: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="window-buttons-web" @click="handleClick" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
+	<div class="window-buttons-web" @click="(e) => handleClick(e)" :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>

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

@@ -38,14 +38,14 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	components: { IconLabel },
 	props: {
-		maximized: { type: Boolean, default: false },
+		maximized: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>

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

@@ -14,11 +14,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
 	props: {
-		title: { type: String, required: true },
+		title: { type: String as PropType<string>, required: true },
 	},
 });
 </script>