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/widgets/separators/Separator.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
-		<div v-if="[SeparatorType.Section, SeparatorType.List].includes(type)"></div>
+		<div v-if="['Section', 'List'].includes(type)"></div>
 	</div>
 </template>
 
@@ -69,21 +69,14 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
+import { SeparatorDirection, SeparatorType } from "@/utilities/widgets";
 
 export default defineComponent({
-	components: {},
 	props: {
-		direction: { type: String, default: SeparatorDirection.Horizontal },
-		type: { type: String, default: SeparatorType.Unrelated },
-	},
-	data() {
-		return {
-			SeparatorDirection,
-			SeparatorType,
-		};
+		direction: { type: String as PropType<SeparatorDirection>, default: "Horizontal" },
+		type: { type: String as PropType<SeparatorType>, default: "Unrelated" },
 	},
 });
 </script>