From f3fd75e2c73b6caf8105b529bbb55a7f38b3c482 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Tue, 14 Jan 2025 21:28:11 -0600
Subject: [PATCH] Even more TypeScript work.

---
 frontend/components/Account/EditForm.vue      | 10 ++--
 frontend/components/Admin/Backups.vue         |  2 +-
 .../Admin/Backups/ConfigureModal.vue          |  9 ++--
 .../Admin/Backups/RunBackupModal.vue          |  9 ++--
 .../Admin/Stations/Form/AdminForm.vue         | 25 +++++----
 .../Admin/Stations/Form/FrontendForm.vue      |  9 ++--
 .../Admin/Stations/Form/ProfileForm.vue       |  9 ++--
 .../components/Admin/Stations/StationForm.vue |  4 +-
 frontend/components/Admin/Users/Form.vue      |  9 ++--
 frontend/components/Common/BitrateOptions.vue | 10 ++--
 frontend/components/Common/SidebarMenu.vue    | 16 +++---
 frontend/components/Form/FormCheckbox.vue     | 11 ++--
 .../components/Form/FormGroupMultiCheck.vue   |  6 +--
 frontend/components/Form/FormGroupSelect.vue  |  4 +-
 frontend/components/Form/FormMultiCheck.vue   | 13 +++--
 frontend/components/Form/SelectOptions.vue    |  8 +--
 frontend/components/Form/useFormField.ts      | 36 ++++++++-----
 .../Stations/Podcasts/PodcastForm/Source.vue  |  3 +-
 frontend/components/Stations/menu.ts          |  4 +-
 frontend/functions/filterMenu.ts              | 54 +++++++++++--------
 frontend/functions/mergeExisting.ts           |  5 +-
 frontend/functions/objectToFormOptions.ts     | 39 +++++++++++---
 frontend/functions/useBaseEditModal.ts        | 16 +++---
 frontend/functions/useChart.ts                | 18 +++----
 frontend/functions/useVuelidateOnFormTab.ts   |  2 +-
 25 files changed, 181 insertions(+), 150 deletions(-)

diff --git a/frontend/components/Account/EditForm.vue b/frontend/components/Account/EditForm.vue
index 2fe5dcbdbfb..c613dabe433 100644
--- a/frontend/components/Account/EditForm.vue
+++ b/frontend/components/Account/EditForm.vue
@@ -44,11 +44,11 @@
 
 <script setup lang="ts">
 import FormGroupField from "~/components/Form/FormGroupField.vue";
-import objectToFormOptions, {FormOption} from "~/functions/objectToFormOptions";
-import {computed, toRef} from "vue";
+import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
 import {HasGenericFormProps} from "~/entities/Forms.ts";
+import {objectToSimpleFormOptions} from "~/functions/objectToFormOptions.ts";
 
 interface AccountEditFormProps extends HasGenericFormProps {
     supportedLocales: Record<string, string>
@@ -58,8 +58,8 @@ const props = defineProps<AccountEditFormProps>();
 
 const {$gettext} = useTranslate();
 
-const localeOptions = computed<FormOption[]>(() => {
-    const localeOptions = objectToFormOptions(toRef(props, 'supportedLocales')).value;
+const localeOptions = computed(() => {
+    const localeOptions = objectToSimpleFormOptions(props.supportedLocales).value;
 
     localeOptions.unshift({
         text: $gettext('Use Browser Default'),
@@ -69,7 +69,7 @@ const localeOptions = computed<FormOption[]>(() => {
     return localeOptions;
 });
 
-const show24hourOptions = computed<FormOption[]>(() => {
+const show24hourOptions = computed(() => {
     return [
         {
             text: $gettext('Prefer System Default'),
diff --git a/frontend/components/Admin/Backups.vue b/frontend/components/Admin/Backups.vue
index 15b216e7a54..6fffdbd47d8 100644
--- a/frontend/components/Admin/Backups.vue
+++ b/frontend/components/Admin/Backups.vue
@@ -171,7 +171,7 @@ import {DataTableTemplateRef} from "~/functions/useHasDatatable.ts";
 
 const props = withDefaults(
     defineProps<{
-        storageLocations: object, // TODO,
+        storageLocations: Record<number, string>,
         isDocker: boolean,
     }>(),
     {
diff --git a/frontend/components/Admin/Backups/ConfigureModal.vue b/frontend/components/Admin/Backups/ConfigureModal.vue
index 3236a3bfddd..6829d324147 100644
--- a/frontend/components/Admin/Backups/ConfigureModal.vue
+++ b/frontend/components/Admin/Backups/ConfigureModal.vue
@@ -61,7 +61,7 @@
                     class="col-md-6"
                     :field="v$.backup_storage_location"
                     :label="$gettext('Storage Location')"
-                    :options="storageLocationOptions"
+                    :options="storageLocations"
                 />
 
                 <form-group-multi-check
@@ -85,8 +85,7 @@ import FormFieldset from "~/components/Form/FormFieldset.vue";
 import mergeExisting from "~/functions/mergeExisting";
 import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
 import TimeCode from "~/components/Common/TimeCode.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
-import {computed, ref, toRef} from "vue";
+import {computed, ref} from "vue";
 import {useAxios} from "~/vendor/axios";
 import {useNotify} from "~/functions/useNotify";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
@@ -97,7 +96,7 @@ import {useHasModal} from "~/functions/useHasModal.ts";
 
 const props = defineProps<{
     settingsUrl: string,
-    storageLocations: object, // TODO
+    storageLocations: Record<number, string>,
 }>();
 
 const emit = defineEmits(['relist']);
@@ -123,8 +122,6 @@ const {form, resetForm, v$, ifValid} = useVuelidateOnForm(
     }
 );
 
-const storageLocationOptions = objectToFormOptions(toRef(props, 'storageLocations'));
-
 const formatOptions = computed(() => {
     return [
         {
diff --git a/frontend/components/Admin/Backups/RunBackupModal.vue b/frontend/components/Admin/Backups/RunBackupModal.vue
index 56957c2ac13..c402cdda685 100644
--- a/frontend/components/Admin/Backups/RunBackupModal.vue
+++ b/frontend/components/Admin/Backups/RunBackupModal.vue
@@ -26,7 +26,7 @@
                             id="edit_form_storage_location"
                             class="col-md-12"
                             :field="v$.storage_location"
-                            :options="storageLocationOptions"
+                            :options="storageLocations"
                             :label="$gettext('Storage Location')"
                         />
 
@@ -106,9 +106,8 @@ import FormFieldset from "~/components/Form/FormFieldset.vue";
 import FormGroupField from "~/components/Form/FormGroupField.vue";
 import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
 import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
 import StreamingLogView from "~/components/Common/StreamingLogView.vue";
-import {ref, toRef} from "vue";
+import {ref} from "vue";
 import {useAxios} from "~/vendor/axios";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 import Modal from "~/components/Common/Modal.vue";
@@ -117,13 +116,11 @@ import {ModalTemplateRef, useHasModal} from "~/functions/useHasModal.ts";
 
 const props = defineProps<{
     runBackupUrl: string,
-    storageLocations: object, // TODO
+    storageLocations: Record<number, string>,
 }>();
 
 const emit = defineEmits(['relist']);
 
-const storageLocationOptions = objectToFormOptions(toRef(props, 'storageLocations'));
-
 const logUrl = ref(null);
 const error = ref(null);
 
diff --git a/frontend/components/Admin/Stations/Form/AdminForm.vue b/frontend/components/Admin/Stations/Form/AdminForm.vue
index 0f5b18a19f6..860dda20b20 100644
--- a/frontend/components/Admin/Stations/Form/AdminForm.vue
+++ b/frontend/components/Admin/Stations/Form/AdminForm.vue
@@ -81,7 +81,6 @@
 
 <script setup lang="ts">
 import FormGroupField from "~/components/Form/FormGroupField.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
 import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
 import {computed, onMounted, reactive, ref} from "vue";
 import {useAxios} from "~/vendor/axios";
@@ -154,9 +153,9 @@ const {v$, tabClass} = useVuelidateOnFormTab(
 
 const storageLocationsLoading = ref(true);
 const storageLocationOptions = reactive({
-    media_storage_location: [],
-    recordings_storage_location: [],
-    podcasts_storage_location: []
+    media_storage_location: {},
+    recordings_storage_location: {},
+    podcasts_storage_location: {}
 });
 
 const filterLocations = (group) => {
@@ -177,15 +176,15 @@ const {axios} = useAxios();
 
 const loadLocations = () => {
     axios.get(storageLocationApiUrl.value).then((resp) => {
-        storageLocationOptions.media_storage_location = objectToFormOptions(
-            filterLocations(resp.data.media_storage_location)
-        ).value;
-        storageLocationOptions.recordings_storage_location = objectToFormOptions(
-            filterLocations(resp.data.recordings_storage_location)
-        ).value;
-        storageLocationOptions.podcasts_storage_location = objectToFormOptions(
-            filterLocations(resp.data.podcasts_storage_location)
-        ).value;
+        storageLocationOptions.media_storage_location = filterLocations(
+            resp.data.media_storage_location
+        );
+        storageLocationOptions.recordings_storage_location = filterLocations(
+            resp.data.recordings_storage_location
+        );
+        storageLocationOptions.podcasts_storage_location = filterLocations(
+            resp.data.podcasts_storage_location
+        );
     }).finally(() => {
         storageLocationsLoading.value = false;
     });
diff --git a/frontend/components/Admin/Stations/Form/FrontendForm.vue b/frontend/components/Admin/Stations/Form/FrontendForm.vue
index 61b82e7a85d..ee359a8291c 100644
--- a/frontend/components/Admin/Stations/Form/FrontendForm.vue
+++ b/frontend/components/Admin/Stations/Form/FrontendForm.vue
@@ -116,7 +116,7 @@
                         <form-group-select
                             id="edit_form_frontend_banned_countries"
                             :field="v$.frontend_config.banned_countries"
-                            :options="countryOptions"
+                            :options="countries"
                             multiple
                             :label="$gettext('Banned Countries')"
                             :description="$gettext('Select the countries that are not allowed to connect to the streams.')"
@@ -169,8 +169,7 @@
 import FormFieldset from "~/components/Form/FormFieldset.vue";
 import FormGroupField from "~/components/Form/FormGroupField.vue";
 import {FrontendAdapter} from "~/entities/RadioAdapters";
-import objectToFormOptions from "~/functions/objectToFormOptions";
-import {computed, toRef} from "vue";
+import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
 import FormGroupSelect from "~/components/Form/FormGroupSelect.vue";
@@ -182,7 +181,7 @@ import Tab from "~/components/Common/Tab.vue";
 interface StationFrontendFormProps extends FormTabProps {
     isRsasInstalled: boolean,
     isShoutcastInstalled: boolean,
-    countries: object, // TODO
+    countries: Record<string, string>,
 }
 
 const props = defineProps<StationFrontendFormProps>();
@@ -289,8 +288,6 @@ const frontendTypeOptions = computed(() => {
     return frontendOptions;
 });
 
-const countryOptions = objectToFormOptions(toRef(props, 'countries'));
-
 const isLocalFrontend = computed(() => {
     return form.value.frontend_type !== FrontendAdapter.Remote;
 });
diff --git a/frontend/components/Admin/Stations/Form/ProfileForm.vue b/frontend/components/Admin/Stations/Form/ProfileForm.vue
index 9c0b6b76ea5..620a3b36f0d 100644
--- a/frontend/components/Admin/Stations/Form/ProfileForm.vue
+++ b/frontend/components/Admin/Stations/Form/ProfileForm.vue
@@ -45,7 +45,7 @@
                 id="edit_form_timezone"
                 class="col-md-12"
                 :field="v$.timezone"
-                :options="timezoneOptions"
+                :options="timezones"
                 :label="$gettext('Time Zone')"
                 :description="$gettext('Scheduled playlists and other timed items will be controlled by this time zone.')"
             />
@@ -133,9 +133,8 @@
 <script setup lang="ts">
 import FormFieldset from "~/components/Form/FormFieldset.vue";
 import FormGroupField from "~/components/Form/FormGroupField.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
 import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
-import {computed, toRef} from "vue";
+import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import FormGroupSelect from "~/components/Form/FormGroupSelect.vue";
 import {FormTabEmits, FormTabProps, useVuelidateOnFormTab} from "~/functions/useVuelidateOnFormTab";
@@ -144,7 +143,7 @@ import {useAzuraCast} from "~/vendor/azuracast";
 import Tab from "~/components/Common/Tab.vue";
 
 interface StationProfileFormProps extends FormTabProps {
-    timezones: object, // TODO
+    timezones: Record<string, string>,
 }
 
 const props = defineProps<StationProfileFormProps>();
@@ -205,8 +204,6 @@ const {v$, tabClass} = useVuelidateOnFormTab(
     }
 );
 
-const timezoneOptions = objectToFormOptions(toRef(props, 'timezones'));
-
 const {$gettext} = useTranslate();
 
 const historyItemsOptions = computed(() => {
diff --git a/frontend/components/Admin/Stations/StationForm.vue b/frontend/components/Admin/Stations/StationForm.vue
index 5cb6d27a92a..1f6c748319c 100644
--- a/frontend/components/Admin/Stations/StationForm.vue
+++ b/frontend/components/Admin/Stations/StationForm.vue
@@ -72,12 +72,12 @@
 <script lang="ts">
 export interface StationFormParentProps {
     // Profile
-    timezones: object,
+    timezones: Record<string, string>,
     // Frontend
     isRsasInstalled?: boolean,
     isShoutcastInstalled?: boolean,
     isStereoToolInstalled?: boolean,
-    countries: object
+    countries: Record<string, string>
 }
 </script>
 
diff --git a/frontend/components/Admin/Users/Form.vue b/frontend/components/Admin/Users/Form.vue
index 419af393605..1a61563d45a 100644
--- a/frontend/components/Admin/Users/Form.vue
+++ b/frontend/components/Admin/Users/Form.vue
@@ -34,7 +34,7 @@
             id="edit_form_roles"
             class="col-md-12"
             :field="v$.roles"
-            :options="roleOptions"
+            :options="roles"
             :label="$gettext('Roles')"
         />
     </div>
@@ -42,15 +42,14 @@
 
 <script setup lang="ts">
 import FormGroupField from "~/components/Form/FormGroupField.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
-import {computed, toRef} from "vue";
+import {computed} from "vue";
 import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
 import {FormTabEmits, FormTabProps, useVuelidateOnFormTab} from "~/functions/useVuelidateOnFormTab";
 import {email, required} from "@vuelidate/validators";
 import validatePassword from "~/functions/validatePassword";
 
 interface AdminUsersFormProps extends FormTabProps {
-    roles: object,
+    roles: Record<number, string>,
     isEditMode: boolean,
 }
 
@@ -77,6 +76,4 @@ const {v$} = useVuelidateOnFormTab(
         roles: [],
     }
 );
-
-const roleOptions = objectToFormOptions(toRef(props, 'roles'));
 </script>
diff --git a/frontend/components/Common/BitrateOptions.vue b/frontend/components/Common/BitrateOptions.vue
index b87a51be416..1847fdc077d 100644
--- a/frontend/components/Common/BitrateOptions.vue
+++ b/frontend/components/Common/BitrateOptions.vue
@@ -72,10 +72,10 @@
 
 <script setup lang="ts">
 import {FormFieldProps, useFormField} from "~/components/Form/useFormField";
-import {computed, ComputedRef, useSlots} from "vue";
+import {computed, useSlots, WritableComputedRef} from "vue";
 import {includes, map} from "lodash";
 import useSlotsExcept from "~/functions/useSlotsExcept.ts";
-import FormMultiCheck, {FormMultiCheckOption} from "~/components/Form/FormMultiCheck.vue";
+import FormMultiCheck from "~/components/Form/FormMultiCheck.vue";
 import FormLabel, {FormLabelParentProps} from "~/components/Form/FormLabel.vue";
 import FormGroup from "~/components/Form/FormGroup.vue";
 
@@ -106,7 +106,7 @@ const radioBitrates = [
     32, 48, 64, 96, 128, 192, 256, 320
 ].filter((bitrate) => props.maxBitrate === 0 || bitrate <= props.maxBitrate);
 
-const customField: ComputedRef<number | null> = computed({
+const customField: WritableComputedRef<number | null> = computed({
     get() {
         return includes(radioBitrates, model.value)
             ? ''
@@ -117,7 +117,7 @@ const customField: ComputedRef<number | null> = computed({
     }
 });
 
-const radioField: ComputedRef<number | string | null> = computed({
+const radioField: WritableComputedRef<number | string | null> = computed({
     get() {
         return includes(radioBitrates, model.value)
             ? model.value
@@ -130,7 +130,7 @@ const radioField: ComputedRef<number | string | null> = computed({
     }
 });
 
-const bitrateOptions: FormMultiCheckOption[] = map(
+const bitrateOptions = map(
     radioBitrates,
     (val: number) => {
         return {
diff --git a/frontend/components/Common/SidebarMenu.vue b/frontend/components/Common/SidebarMenu.vue
index 610e897c22f..35fdf323229 100644
--- a/frontend/components/Common/SidebarMenu.vue
+++ b/frontend/components/Common/SidebarMenu.vue
@@ -85,40 +85,40 @@ import Icon from "~/components/Common/Icon.vue";
 import {useRoute} from "vue-router";
 import {some} from "lodash";
 import {IconOpenInNew} from "~/components/Common/icons.ts";
-import {MenuCategory} from "~/functions/filterMenu.ts";
+import {MenuCategory, MenuSubCategory, ReactiveMenu} from "~/functions/filterMenu.ts";
 
 const props = defineProps<{
-    menu: MenuCategory[]
+    menu: ReactiveMenu
 }>();
 
 const currentRoute = useRoute();
 
-const isRouteLink = (item) => {
+const isRouteLink = (item: MenuSubCategory) => {
     return (typeof (item.url) !== 'undefined')
         && (typeof (item.url) !== 'string');
 };
 
-const isActiveItem = (item) => {
-    if (item.items && some(item.items, isActiveItem)) {
+const isActiveItem = (item: MenuCategory | MenuSubCategory) => {
+    if ('items' in item && some(item.items, isActiveItem)) {
         return true;
     }
 
     return isRouteLink(item) && !('params' in item.url) && item.url.name === currentRoute.name;
 };
 
-const getLinkClass = (item) => {
+const getLinkClass = (item: MenuSubCategory) => {
     return [
         item.class ?? null,
         isActiveItem(item) ? 'active' : ''
     ];
 }
 
-const getCategoryLink = (item) => {
+const getCategoryLink = (item: MenuSubCategory) => {
     const linkAttrs: {
         [key: string]: any
     } = {};
 
-    if (item.items) {
+    if ('items' in item) {
         linkAttrs['data-bs-toggle'] = 'collapse';
         linkAttrs.href = '#sidebar-submenu-' + item.key;
     } else {
diff --git a/frontend/components/Form/FormCheckbox.vue b/frontend/components/Form/FormCheckbox.vue
index ebc8852c5d5..504fab1237b 100644
--- a/frontend/components/Form/FormCheckbox.vue
+++ b/frontend/components/Form/FormCheckbox.vue
@@ -10,9 +10,14 @@
 <script setup lang="ts">
 import {useVModel} from "@vueuse/core";
 
-const props = defineProps<{
-    modelValue: boolean | null
-}>();
+const props = withDefaults(
+    defineProps<{
+        modelValue?: boolean
+    }>(),
+    {
+        modelValue: false
+    }
+);
 
 const emit = defineEmits(['update:modelValue']);
 const checkboxValue = useVModel(props, 'modelValue', emit);
diff --git a/frontend/components/Form/FormGroupMultiCheck.vue b/frontend/components/Form/FormGroupMultiCheck.vue
index 51d66a8865e..518accae749 100644
--- a/frontend/components/Form/FormGroupMultiCheck.vue
+++ b/frontend/components/Form/FormGroupMultiCheck.vue
@@ -72,9 +72,9 @@ import FormLabel, {FormLabelParentProps} from "~/components/Form/FormLabel.vue";
 import FormGroup from "~/components/Form/FormGroup.vue";
 import FormMultiCheck from "~/components/Form/FormMultiCheck.vue";
 import useSlotsExcept from "~/functions/useSlotsExcept";
-import {FormFieldProps, useFormField} from "~/components/Form/useFormField";
+import {FormFieldEmits, FormFieldProps, useFormField} from "~/components/Form/useFormField";
 import {useSlots} from "vue";
-import {FormOption} from "~/functions/objectToFormOptions.ts";
+import {FormOption} from "~/functions/objectToNestedFormOptions.ts";
 
 interface FormGroupMultiCheckProps extends FormFieldProps, FormLabelParentProps {
     id: string,
@@ -99,7 +99,7 @@ const props = withDefaults(
 
 const slots = useSlots();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<FormFieldEmits>();
 
 const {model, isVuelidateField, isRequired} = useFormField(props, emit);
 </script>
diff --git a/frontend/components/Form/FormGroupSelect.vue b/frontend/components/Form/FormGroupSelect.vue
index e88a5078be0..3f99e81ae20 100644
--- a/frontend/components/Form/FormGroupSelect.vue
+++ b/frontend/components/Form/FormGroupSelect.vue
@@ -64,14 +64,14 @@ import FormGroup from "~/components/Form/FormGroup.vue";
 import {FormFieldProps, useFormField} from "~/components/Form/useFormField";
 import SelectOptions from "~/components/Form/SelectOptions.vue";
 import {useSlots} from "vue";
-import {FormOptionInput} from "~/functions/objectToFormOptions.ts";
+import {NestedFormOptionInput} from "~/functions/objectToNestedFormOptions.ts";
 
 interface FormGroupSelectProps extends FormFieldProps, FormLabelParentProps {
     id: string,
     name?: string,
     label?: string,
     description?: string,
-    options: FormOptionInput,
+    options: NestedFormOptionInput,
     multiple?: boolean,
 }
 
diff --git a/frontend/components/Form/FormMultiCheck.vue b/frontend/components/Form/FormMultiCheck.vue
index 85e48f878a3..ef256078e8f 100644
--- a/frontend/components/Form/FormMultiCheck.vue
+++ b/frontend/components/Form/FormMultiCheck.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div
-            v-for="option in options"
+            v-for="option in parsedOptions"
             :key="option.value"
             class="form-check"
             :class="!stacked ? 'form-check-inline' : ''"
@@ -36,19 +36,22 @@
 
 <script setup lang="ts">
 import {useVModel} from "@vueuse/core";
-import {FormOption} from "~/functions/objectToFormOptions.ts";
+import {objectToSimpleFormOptions, SimpleFormOptionInput} from "~/functions/objectToFormOptions.ts";
+import {ModelFormField} from "~/components/Form/useFormField.ts";
+import {toRef} from "vue";
 
 const props = withDefaults(
     defineProps<{
-        modelValue: string | number | boolean | Array<any>,
+        modelValue?: ModelFormField,
         id: string,
         name: string,
         fieldClass?: string,
-        options: FormOption[],
+        options: SimpleFormOptionInput,
         radio?: boolean,
         stacked?: boolean
     }>(),
     {
+        modelValue: null,
         name: (props) => props.id,
         fieldClass: null,
         radio: false,
@@ -59,4 +62,6 @@ const props = withDefaults(
 const emit = defineEmits(['update:modelValue']);
 
 const value = useVModel(props, 'modelValue', emit);
+
+const parsedOptions = objectToSimpleFormOptions(toRef(props, 'options'));
 </script>
diff --git a/frontend/components/Form/SelectOptions.vue b/frontend/components/Form/SelectOptions.vue
index 6b66d99f388..30b3f5b6080 100644
--- a/frontend/components/Form/SelectOptions.vue
+++ b/frontend/components/Form/SelectOptions.vue
@@ -4,7 +4,7 @@
         :key="index"
     >
         <optgroup
-            v-if="Array.isArray(option.options)"
+            v-if="'options' in option"
             :label="option.label"
         >
             <select-options :options="option.options" />
@@ -20,11 +20,11 @@
 
 <script setup lang="ts">
 import {toRef} from "vue";
-import objectToFormOptions, {FormOptionInput} from "~/functions/objectToFormOptions";
+import {NestedFormOptionInput, objectToNestedFormOptions} from "~/functions/objectToFormOptions.ts";
 
 const props = defineProps<{
-    options: FormOptionInput
+    options: NestedFormOptionInput
 }>();
 
-const parsedOptions = objectToFormOptions(toRef(props, 'options'));
+const parsedOptions = objectToNestedFormOptions(toRef(props, 'options'));
 </script>
diff --git a/frontend/components/Form/useFormField.ts b/frontend/components/Form/useFormField.ts
index ae1defdc3ff..62964b3f3c6 100644
--- a/frontend/components/Form/useFormField.ts
+++ b/frontend/components/Form/useFormField.ts
@@ -1,36 +1,46 @@
-import {computed} from "vue";
+import {computed, ComputedRef, WritableComputedRef} from "vue";
 import {has} from "lodash";
+import {VuelidateObject} from "~/functions/useVuelidateOnForm.ts";
 
-type ValidFormField = string | number | boolean | Array<any>
+export type ModelFormField = string | number | boolean | Array<any> | null
 
 export interface FormFieldProps {
-    field?: object,
-    modelValue?: ValidFormField,
+    field?: VuelidateObject,
+    modelValue?: ModelFormField,
     required?: boolean
 }
 
 export interface FormFieldEmits {
-    (e: 'update:modelValue', value: ValidFormField): void
+    (e: 'update:modelValue', value: ModelFormField): void
 }
 
-export function useFormField(initialProps: FormFieldProps, emit: FormFieldEmits) {
-    const props = {
+export function useFormField(
+    initialProps: FormFieldProps,
+    emit: FormFieldEmits
+): {
+    isVuelidateField: ComputedRef<boolean>,
+    model: WritableComputedRef<ModelFormField>,
+    fieldClass: ComputedRef<string | null>,
+    isRequired: ComputedRef<boolean>
+} {
+    const props: FormFieldProps = {
         required: false,
         ...initialProps
     };
 
-    const isVuelidateField = computed(() => {
-        return props.field !== undefined;
-    });
+    const isVuelidateField = computed(
+        () => props.field !== undefined
+    );
 
-    const model = computed({
+    const model: WritableComputedRef<ModelFormField> = computed({
         get() {
             return (isVuelidateField.value)
-                ? props.field.$model
+                ? props.field.$model as ModelFormField
                 : props.modelValue;
         },
-        set(newValue) {
+        set(newValue: ModelFormField) {
             if (isVuelidateField.value) {
+                // @ts-expect-error Vuelidate mistypes this.
                 props.field.$model = newValue;
             } else {
                 emit('update:modelValue', newValue);
diff --git a/frontend/components/Stations/Podcasts/PodcastForm/Source.vue b/frontend/components/Stations/Podcasts/PodcastForm/Source.vue
index c8e4552b5ca..084c1a82e86 100644
--- a/frontend/components/Stations/Podcasts/PodcastForm/Source.vue
+++ b/frontend/components/Stations/Podcasts/PodcastForm/Source.vue
@@ -66,7 +66,6 @@ import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
 import {useTranslate} from "~/vendor/gettext.ts";
 import {onMounted, ref, shallowRef} from "vue";
 import {useAxios} from "~/vendor/axios.ts";
-import objectToFormOptions from "~/functions/objectToFormOptions.ts";
 import {getStationApiUrl} from "~/router.ts";
 import Loading from "~/components/Common/Loading.vue";
 
@@ -111,7 +110,7 @@ const playlistsApiUrl = getStationApiUrl('/podcasts/playlists');
 
 const loadPlaylists = () => {
     axios.get(playlistsApiUrl.value).then((resp) => {
-        playlistOptions.value = objectToFormOptions(resp.data).value;
+        playlistOptions.value = resp.data;
     }).finally(() => {
         playlistsLoading.value = false;
     });
diff --git a/frontend/components/Stations/menu.ts b/frontend/components/Stations/menu.ts
index bedaf409507..754b0f60cb7 100644
--- a/frontend/components/Stations/menu.ts
+++ b/frontend/components/Stations/menu.ts
@@ -1,5 +1,5 @@
 import {useTranslate} from "~/vendor/gettext.ts";
-import filterMenu, {MenuCategory, ReactiveMenu} from "~/functions/filterMenu.ts";
+import filterMenu, {ReactiveMenu} from "~/functions/filterMenu.ts";
 import {StationPermission, userAllowedForStation} from "~/acl.ts";
 import {useAzuraCast, useAzuraCastStation} from "~/vendor/azuracast.ts";
 import {computed, reactive} from "vue";
@@ -25,7 +25,7 @@ export function useStationsMenu(): ReactiveMenu {
     // Reuse this variable to avoid multiple calls.
     const userCanManageMedia = userAllowedForStation(StationPermission.Media);
 
-    const menu: ReactiveMenu = reactive<Array<MenuCategory>>([
+    const menu: ReactiveMenu = reactive([
         {
             key: 'profile',
             label: computed(() => $gettext('Profile')),
diff --git a/frontend/functions/filterMenu.ts b/frontend/functions/filterMenu.ts
index 3f08ced0d5f..c529cc3f2b6 100644
--- a/frontend/functions/filterMenu.ts
+++ b/frontend/functions/filterMenu.ts
@@ -1,9 +1,10 @@
-import {filter, get, map} from "lodash";
-import { ComputedRef, UnwrapNestedRefs } from "vue";
-import { Icon } from "../components/Common/icons";
-import { RouteLocationRaw } from "vue-router";
+import {cloneDeep, filter, get, map} from "lodash";
+import {ComputedRef, Reactive} from "vue";
+import {Icon} from "../components/Common/icons";
+import {RouteLocationRaw} from "vue-router";
+import {reactiveComputed} from "@vueuse/core";
 
-export type ReactiveMenu = UnwrapNestedRefs<Array<MenuCategory>>;
+export type ReactiveMenu = Reactive<Array<MenuCategory>>;
 
 export interface MenuSubCategory {
     key: string,
@@ -12,6 +13,8 @@ export interface MenuSubCategory {
     icon?: Icon | null,
     visible?: boolean | null,
     external?: boolean | null,
+    title?: string,
+    class?: string,
 }
 
 export interface MenuCategory extends MenuSubCategory {
@@ -19,25 +22,30 @@ export interface MenuCategory extends MenuSubCategory {
 }
 
 export default function filterMenu(menuItems: ReactiveMenu): ReactiveMenu {
-    return filter(map(
-        menuItems,
-        (menuRow: MenuCategory) => {
-            const itemIsVisible: boolean = get(menuRow, 'visible', true);
-            if (!itemIsVisible) {
-                return null;
-            }
+    return reactiveComputed(
+        () => filter(
+            map(
+                cloneDeep(menuItems),
+                (menuRow: MenuCategory): MenuCategory | null => {
+                    const itemIsVisible: boolean = get(menuRow, 'visible', true);
+                    if (!itemIsVisible) {
+                        return null;
+                    }
 
-            if ('items' in menuRow) {
-                menuRow.items = filter(menuRow.items, (item) => {
-                    return get(item, 'visible', true);
-                });
+                    if ('items' in menuRow) {
+                        menuRow.items = filter(menuRow.items, (item) => {
+                            return get(item, 'visible', true);
+                        });
 
-                if (menuRow.items.length === 0) {
-                    return null;
-                }
-            }
+                        if (menuRow.items.length === 0) {
+                            return null;
+                        }
+                    }
 
-            return menuRow;
-        }
-    ));
+                    return menuRow;
+                }
+            ),
+            (row: MenuCategory | null) => null !== row
+        )
+    );
 }
diff --git a/frontend/functions/mergeExisting.ts b/frontend/functions/mergeExisting.ts
index a1b2074b3d1..8025fe119db 100644
--- a/frontend/functions/mergeExisting.ts
+++ b/frontend/functions/mergeExisting.ts
@@ -5,7 +5,10 @@ import {toRaw} from "vue";
  * A "deep" merge that only merges items from the source into the destination that already exist in the destination.
  * Useful for merging in form values with API returns.
  */
-export default function mergeExisting(destRaw, sourceRaw) {
+export default function mergeExisting<T extends object>(
+    destRaw: T,
+    sourceRaw: Partial<T>
+): T {
     const dest = toRaw(destRaw);
     const source = toRaw(sourceRaw);
 
diff --git a/frontend/functions/objectToFormOptions.ts b/frontend/functions/objectToFormOptions.ts
index 600c274d32c..c2c76deb00f 100644
--- a/frontend/functions/objectToFormOptions.ts
+++ b/frontend/functions/objectToFormOptions.ts
@@ -1,25 +1,48 @@
 import {map} from 'lodash';
-import {MaybeRefOrGetter, computed, ComputedRef, toValue} from "vue";
+import {computed, ComputedRef, MaybeRefOrGetter, toValue} from "vue";
 
 export interface FormOption {
-    value: any,
+    value: string | number,
     text: string,
     description?: string
 }
 
+type SimpleFormOptionObject = Record<(string | number), string>
+
+export type SimpleFormOptionInput = FormOption[] | SimpleFormOptionObject
+
+export function objectToSimpleFormOptions(
+    initial: MaybeRefOrGetter<SimpleFormOptionInput>,
+): ComputedRef<FormOption[]> {
+    return computed(() => {
+        const array = toValue(initial);
+
+        if (Array.isArray(array)) {
+            return array;
+        }
+
+        return map(array, (outerValue, outerKey) => ({
+            text: outerValue,
+            value: outerKey
+        }));
+    });
+}
+
 export interface FormOptionGroup {
     options: FormOption[],
     label: string,
 }
 
-export type FormOptionInput = (FormOption | FormOptionGroup)[] | Record<string, any>;
-export type FormOptionOutput = (FormOption | FormOptionGroup)[];
+type NestedFormOptionObject = SimpleFormOptionObject | Record<(string | number), SimpleFormOptionObject>
+
+export type NestedFormOptionInput = (FormOption | FormOptionGroup)[] | NestedFormOptionObject;
+export type NestedFormOptionOutput = (FormOption | FormOptionGroup)[];
 
-export default function objectToFormOptions(
-    initial: MaybeRefOrGetter<FormOptionInput>
-): ComputedRef<FormOptionOutput> {
+export function objectToNestedFormOptions(
+    initial: MaybeRefOrGetter<NestedFormOptionInput>
+): ComputedRef<NestedFormOptionOutput> {
     return computed(() => {
-        const array: FormOptionInput = toValue(initial);
+        const array = toValue(initial);
 
         if (Array.isArray(array)) {
             return array;
diff --git a/frontend/functions/useBaseEditModal.ts b/frontend/functions/useBaseEditModal.ts
index 12e8ac419ee..0bb3125cc32 100644
--- a/frontend/functions/useBaseEditModal.ts
+++ b/frontend/functions/useBaseEditModal.ts
@@ -18,14 +18,14 @@ export interface BaseEditModalEmits {
     (e: 'relist'): void
 }
 
-export interface BaseEditModalOptions extends GlobalConfig {
+export interface BaseEditModalOptions<T extends GenericForm = GenericForm> extends GlobalConfig {
     resetForm?(originalResetForm: () => void): void,
 
     clearContents?(resetForm: () => void): void,
 
-    populateForm?(data: Record<string, any>, form: Ref<GenericForm>): void,
+    populateForm?(data: Partial<T>, form: Ref<T>): void,
 
-    getSubmittableFormData?(form: Ref<GenericForm>, isEditMode: ComputedRef<boolean>): Record<string, any>,
+    getSubmittableFormData?(form: Ref<T>, isEditMode: ComputedRef<boolean>): Record<string, any>,
 
     buildSubmitRequest?(): AxiosRequestConfig,
 
@@ -38,15 +38,15 @@ export function useBaseEditModal<T extends GenericForm = GenericForm>(
     props: BaseEditModalProps,
     emit: BaseEditModalEmits,
     $modal: Ref<ModalFormTemplateRef>,
-    validations: VuelidateValidations<T> = {},
-    blankForm: T = {},
-    options: BaseEditModalOptions = {}
+    validations: VuelidateValidations<T>,
+    blankForm: T,
+    options: BaseEditModalOptions<T> = {}
 ): {
     loading: Ref<boolean>,
     error: Ref<any | null>,
     editUrl: Ref<string>,
     isEditMode: ComputedRef<boolean>,
-    form: Form,
+    form: Ref<T>,
     v$: VuelidateRef<T>,
     resetForm(): void,
     clearContents(): void,
@@ -107,7 +107,7 @@ export function useBaseEditModal<T extends GenericForm = GenericForm>(
         });
     };
 
-    const populateForm = (data: Record<string, any>): void => {
+    const populateForm = (data: Partial<T>): void => {
         if (typeof options.populateForm === 'function') {
             options.populateForm(data, form);
             return;
diff --git a/frontend/functions/useChart.ts b/frontend/functions/useChart.ts
index bc8c81a3cc9..0b70049c1db 100644
--- a/frontend/functions/useChart.ts
+++ b/frontend/functions/useChart.ts
@@ -1,4 +1,7 @@
-import {Chart, registerables} from "chart.js";
+import {Chart, registerables, ChartConfiguration,
+    ChartConfigurationCustomTypesPerDataset,
+    ChartType,
+    DefaultDataPoint} from "chart.js";
 import {defaultsDeep} from "lodash";
 import {computed, isRef, MaybeRef, onMounted, onUnmounted, Ref, toRef, toValue, watch} from "vue";
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -6,12 +9,6 @@ import chartjsColorSchemes from "~/vendor/chartjs_colorschemes.ts";
 
 import 'chartjs-adapter-luxon';
 import '~/vendor/luxon';
-import {
-    ChartConfiguration,
-    ChartConfigurationCustomTypesPerDataset,
-    ChartType,
-    DefaultDataPoint
-} from "chart.js/dist/types";
 
 Chart.register(...registerables);
 
@@ -36,16 +33,13 @@ export interface ChartProps<
     TData = DefaultDataPoint<TType>,
     TLabel = unknown
 > {
-    options?: ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>,
+    options?: Partial<ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>>,
     data?: any[],
     aspectRatio?: number,
     alt?: ChartAltData[],
     labels?: Array<any>
 }
 
-export const chartProps = {
-};
-
 export type ChartTemplateRef = HTMLCanvasElement | null;
 
 export default function useChart<
@@ -56,7 +50,7 @@ export default function useChart<
     initialProps: ChartProps,
     $canvas: Ref<ChartTemplateRef>,
     defaultOptions: MaybeRef<
-        ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>
+        Partial<ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>>
     >
 ): {
     $chart: Chart<TType, TData, TLabel> | null
diff --git a/frontend/functions/useVuelidateOnFormTab.ts b/frontend/functions/useVuelidateOnFormTab.ts
index a5807acbcfa..a797fa80d9c 100644
--- a/frontend/functions/useVuelidateOnFormTab.ts
+++ b/frontend/functions/useVuelidateOnFormTab.ts
@@ -44,7 +44,7 @@ export function useVuelidateOnFormTab<
     // Register event listener for blankForm building.
     const formEventBus = useEventBus('form_tabs');
 
-    formEventBus.on((addToForm) => {
+    formEventBus.on((addToForm: (blankForm: Partial<T>) => void) => {
         addToForm(blankForm);
     });