Fix a bunch of typescript errors

front/src/App.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Track } from '~/types'
+
 import AudioPlayer from '~/components/audio/Player.vue'
 import Queue from '~/components/Queue.vue'
 import PlaylistModal from '~/components/playlists/PlaylistModal.vue'
@@ -12,7 +14,6 @@ import ReportModal from '~/components/moderation/ReportModal.vue'
 import { useIntervalFn, useToggle, useWindowSize } from '@vueuse/core'
 
 import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
-import { Track } from '~/types'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import useQueue from '~/composables/audio/useQueue'
 import { useStore } from '~/store'

front/src/components/admin/SignupFormBuilder.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { Form } from '~/types'
+
 import SignupForm from '~/components/auth/SignupForm.vue'
 import { useVModel } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { Form } from '~/types'
 import { arrayMove } from '~/utils'
 
 interface Props {

front/src/components/audio/PlayButton.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+
 import { ref, computed, watch, nextTick } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import usePlayOptions, { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useReport from '~/composables/moderation/useReport'
 import { useCurrentElement } from '@vueuse/core'
 import jQuery from 'jquery'

front/src/components/audio/album/Card.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Album } from '~/types'
+import type { Album } from '~/types'
+
 import PlayButton from '~/components/audio/PlayButton.vue'
 import { momentFormat } from '~/utils/filters'
 import { computed } from 'vue'

front/src/components/audio/podcast/MobileRow.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
-// import { Track } from '~/types'
+import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+// import type { Track } from '~/types'
+
 import { ref, computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackModal from '~/components/audio/track/Modal.vue'
-import usePlayOptions, { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useQueue from '~/composables/audio/useQueue'
 import usePlayer from '~/composables/audio/usePlayer'
 

front/src/components/audio/podcast/Modal.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
-// import { Track } from '~/types'
+import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+// import type { Track } from '~/types'
+
 import { useStore } from '~/store'
 import { useGettext } from 'vue3-gettext'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref } from 'vue'
-import usePlayOptions, { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useReport from '~/composables/moderation/useReport'
 import { useVModel } from '@vueuse/core'
 

front/src/components/audio/podcast/Row.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
-import { /* Track, */ Cover } from '~/types'
+import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+import type { /* Track, */ Cover } from '~/types'
+
 import axios from 'axios'
 import PlayButton from '~/components/audio/PlayButton.vue'
-import usePlayOptions, { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+import usePlayOptions from '~/composables/audio/usePlayOptions'
 import { ref } from 'vue'
 import useQueue from '~/composables/audio/useQueue'
 

front/src/components/audio/track/MobileRow.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
-// import { Track } from '~/types'
+import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+// import type { Track } from '~/types'
+
 import { ref, computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackModal from '~/components/audio/track/Modal.vue'
-import usePlayOptions, { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useQueue from '~/composables/audio/useQueue'
 import usePlayer from '~/composables/audio/usePlayer'
 

front/src/components/audio/track/Modal.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
-// import { Track } from '~/types'
+import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+// import type { Track } from '~/types'
+
 import { useStore } from '~/store'
 import { useGettext } from 'vue3-gettext'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import { computed, ref } from 'vue'
-import usePlayOptions, { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useReport from '~/composables/moderation/useReport'
 import { useVModel } from '@vueuse/core'
 

front/src/components/audio/track/Row.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
-// import { Track } from '~/types'
+import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+// import type { Track } from '~/types'
+
 import PlayIndicator from '~/components/audio/track/PlayIndicator.vue'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
-import usePlayOptions, { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
+import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useQueue from '~/composables/audio/useQueue'
 import usePlayer from '~/composables/audio/usePlayer'
 import { ref } from 'vue'

front/src/components/channels/AlbumSelect.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
+import type { Album, Channel } from '~/types'
+
 import axios from 'axios'
 import { useVModel } from '@vueuse/core'
 import { reactive, ref, watch } from 'vue'
-import { Album, Channel } from '~/types'
 
 interface Props {
   modelValue: number
-  channel?: Channel
+  channel: Channel | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  channel: () => ({ id: '' })
+  channel: null
 })
 
 const emit = defineEmits(['update:modelValue'])

front/src/components/channels/LicenseSelect.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { License } from '~/types'
+
+import { computed, reactive, ref } from 'vue'
 import axios from 'axios'
 import { useVModel } from '@vueuse/core'
-import { computed, reactive, ref } from 'vue'
-import { License } from '~/types'
 
 interface Props {
   modelValue: string
@@ -74,7 +75,7 @@ fetchLicenses()
     >
       <a
         v-if="value"
-        :href="currentLicense.url"
+        :href="currentLicense?.url"
         target="_blank"
         rel="noreferrer noopener"
       >

front/src/components/channels/UploadForm.vue

@@ -319,7 +319,7 @@ export default {
       const self = this
       return this.availableChannels.results.filter((c) => {
         return c.uuid === self.values.channel
-      })[0]
+      })[0] ?? null
     },
     selectedUpload () {
       const self = this

front/src/components/channels/UploadModal.vue

@@ -15,6 +15,8 @@ const update = (value: boolean) => store.commit('channels/showUploadModal', { sh
 
 const { $npgettext, $gettext } = useGettext()
 
+const uploadForm = ref()
+
 const statusData = ref()
 const statusInfo = computed(() => {
   if (!statusData.value) {
@@ -112,7 +114,7 @@ const isLoading = ref(false)
       <button
         v-else-if="step < 3"
         class="ui basic button"
-        @click.stop.prevent="$refs.uploadForm.step -= 1"
+        @click.stop.prevent="uploadForm.step -= 1"
       >
         <translate translate-context="*/*/Button.Label/Verb">
           Previous step
@@ -121,7 +123,7 @@ const isLoading = ref(false)
       <button
         v-else-if="step === 3"
         class="ui basic button"
-        @click.stop.prevent="$refs.uploadForm.step -= 1"
+        @click.stop.prevent="uploadForm.step -= 1"
       >
         <translate translate-context="*/*/Button.Label/Verb">
           Update
@@ -130,7 +132,7 @@ const isLoading = ref(false)
       <button
         v-if="step === 1"
         class="ui primary button"
-        @click.stop.prevent="$refs.uploadForm.step += 1"
+        @click.stop.prevent="uploadForm.step += 1"
       >
         <translate translate-context="*/*/Button.Label">
           Next step
@@ -144,7 +146,7 @@ const isLoading = ref(false)
           :class="['ui', 'primary button', {loading: isLoading}]"
           type="submit"
           :disabled="!statusData?.canSubmit || undefined"
-          @click.prevent.stop="$refs.uploadForm.publish"
+          @click.prevent.stop="uploadForm.publish"
         >
           <translate translate-context="*/Channels/Button.Label">
             Publish

front/src/components/common/ActorLink.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { Actor } from '~/types'
+
 import { toRefs } from '@vueuse/core'
 import { computed } from 'vue'
 import { truncate } from '~/utils/filters'
-import { Actor } from '~/types'
 
 interface Props {
   actor: Actor

front/src/components/common/AttachmentInput.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { BackendError } from '~/types'
+
 import axios from 'axios'
 import { useVModel } from '@vueuse/core'
 import { reactive, ref, watch } from 'vue'
-import { BackendError } from '~/types'
 import { useStore } from '~/store'
 import useFormData from '~/composables/useFormData'
 
@@ -26,7 +27,7 @@ const value = useVModel(props, 'modelValue', emit)
 
 const attachment = ref()
 const isLoading = ref(false)
-const errors = reactive([] as Error[])
+const errors = reactive([] as string[])
 const attachmentId = Math.random().toString(36).substring(7)
 
 const input = ref()

front/src/components/favorites/List.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences } from '~/store/ui'
+import type { Track } from '~/types'
+import type { OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+
 import axios from 'axios'
 import $ from 'jquery'
 import RadioButton from '~/components/radios/Button.vue'
@@ -8,13 +12,11 @@ import { checkRedirectToLogin } from '~/utils'
 import TrackTable from '~/components/audio/track/Table.vue'
 import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useStore } from '~/store'
-import { Track } from '~/types'
 import { useGettext } from 'vue3-gettext'
-import { OrderingField } from '~/store/ui'
 
 interface Props extends OrderingProps {
   defaultPage?: number

front/src/components/library/AlbumBase.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Track, Album, Artist, Library } from '~/types'
+import type { Track, Album, Artist, Library } from '~/types'
+
 import axios from 'axios'
 import { sum } from 'lodash-es'
 import { useGettext } from 'vue3-gettext'

front/src/components/library/AlbumDropdown.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Album, Artist, Library } from '~/types'
+import type { Album, Artist, Library } from '~/types'
+
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import Modal from '~/components/semantic/Modal.vue'
 import useReport from '~/composables/moderation/useReport'

front/src/components/library/ArtistBase.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Track, Album, Artist, Library } from '~/types'
+import type { Track, Album, Artist, Library } from '~/types'
+
 import { useGettext } from 'vue3-gettext'
 import axios from 'axios'
 import PlayButton from '~/components/audio/PlayButton.vue'

front/src/components/library/FsBrowser.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import type { FileSystem, FSEntry } from '~/types'
+
 import { useVModel } from '@vueuse/core'
-import { FileSystem, FSEntry } from '~/types'
 
 interface Props {
   data: FileSystem

front/src/components/library/FsLogs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FSLogs } from '~/types'
+import type { FSLogs } from '~/types'
 
 interface Props {
   data: FSLogs

front/src/components/library/TrackBase.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Track, Artist, Library } from '~/types'
+import type { Track, Artist, Library } from '~/types'
+
 import { useGettext } from 'vue3-gettext'
 import axios from 'axios'
 import PlayButton from '~/components/audio/PlayButton.vue'

front/src/components/manage/library/LibrariesTable.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { PrivacyLevel } from '~/types'
+import type { PrivacyLevel } from '~/types'
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences } from '~/store/ui'
+import type { OrderingField } from '~/store/ui'
+import type { SmartSearchProps } from '~/composables/useSmartSearch'
+import type { OrderingProps } from '~/composables/useOrdering'
+
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
+import useSmartSearch from '~/composables/useSmartSearch'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
-import { OrderingField } from '~/store/ui'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 

front/src/components/manage/library/UploadsTable.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { ImportStatus, PrivacyLevel } from '~/types'
+import type { ImportStatus, PrivacyLevel } from '~/types'
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences } from '~/store/ui'
+import type { OrderingField } from '~/store/ui'
+import type { Upload } from '~/types'
+import type { OrderingProps } from '~/composables/useOrdering'
+import type { SmartSearchProps } from '~/composables/useSmartSearch'
+
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
@@ -9,10 +14,8 @@ import { humanSize, truncate } from '~/utils/filters'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
+import useSmartSearch from '~/composables/useSmartSearch'
-import { OrderingField } from '~/store/ui'
-import { Upload } from '~/types'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type

front/src/components/playlists/PlaylistModal.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { filter, sortBy, flow } from 'lodash-es'
+import type { BackendError, Playlist, APIErrorResponse } from '~/types'
 
+import { filter, sortBy, flow } from 'lodash-es'
 import axios from 'axios'
 import { useGettext } from 'vue3-gettext'
-
 import Modal from '~/components/semantic/Modal.vue'
 import PlaylistForm from '~/components/playlists/Form.vue'
 import useLogger from '~/composables/useLogger'
 import { useStore } from '~/store'
 import { ref, computed, watch } from 'vue'
-import { BackendError, Playlist, APIErrorResponse } from '~/types'
 import { useRouter } from 'vue-router'
 
 const logger = useLogger()
@@ -90,7 +89,7 @@ const addToPlaylist = async (playlistId: number, allowDuplicates: boolean) => {
             Add to playlist
           </translate>
           <div
-            v-translate="{artist: track.artist.name, title: track.title}"
+            v-translate="{artist: track.artist?.name, title: track.title}"
             class="ui sub header"
             translate-context="Popup/Playlist/Paragraph"
             :translate-params="{artist: track.artist.name, title: track.title}"

front/src/composables/audio/usePlayOptions.ts

@@ -1,9 +1,10 @@
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { ContentFilter } from '~/store/moderation'
+
 import { useStore } from '~/store'
 import { useGettext } from 'vue3-gettext'
 import { computed, ref } from "vue"
 import axios from 'axios'
-import { ContentFilter } from '~/store/moderation'
 import usePlayer from '~/composables/audio/usePlayer'
 import useQueue from '~/composables/audio/useQueue'
 import { useCurrentElement } from '@vueuse/core'

front/src/composables/audio/usePlayer.ts

@@ -1,4 +1,5 @@
-import { Track } from '~/types'
+import type { Track } from '~/types'
+
 import { computed, watchEffect, ref, watch } from 'vue'
 import { Howler } from 'howler'
 import { useIntervalFn, useTimeoutFn } from '@vueuse/core'

front/src/composables/audio/useQueue.ts

@@ -1,8 +1,9 @@
+import type { Track } from "~/types"
+
 import { useTimeoutFn, useThrottleFn, useTimeAgo, useNow, whenever } from '@vueuse/core'
 import { Howler } from 'howler'
 import { gettext } from '~/init/locale'
 import { ref, computed } from "vue"
-import { Track } from "~/types"
 import { sum } from 'lodash-es'
 import store from "~/store"
 

front/src/composables/audio/useSound.ts

@@ -1,5 +1,6 @@
+import type { Track } from '~/types'
+
 import { ref, computed } from "vue"
-import { Track } from '~/types'
 import { Howl } from 'howler'
 import useTrackSources from '~/composables/audio/useTrackSources'
 import useSoundCache from '~/composables/audio/useSoundCache'

front/src/composables/audio/useSoundCache.ts

@@ -1,4 +1,5 @@
-import { Howl } from "howler"
+import type { Howl } from "howler"
+
 import { sortBy } from "lodash-es"
 import { reactive, watchEffect, ref } from "vue"
 

front/src/composables/audio/useTrackSources.ts

@@ -1,4 +1,5 @@
-import { Track } from "~/types"
+import type { Track } from "~/types"
+
 import store from '~/store'
 import updateQueryString from '~/composables/updateQueryString'
 

front/src/composables/locale/useSharedLabels.ts

@@ -1,5 +1,6 @@
+import type { PrivacyLevel, ImportStatus } from '~/types'
+
 import { gettext } from '~/init/locale'
-import { PrivacyLevel, ImportStatus } from '~/types'
 
 const { $pgettext } = gettext
 

front/src/composables/moderation/useEditConfigs.ts

@@ -1,5 +1,6 @@
+import type { Album, Artist, Content, Track } from '~/types'
+
 import { gettext } from '~/init/locale'
-import { Album, Artist, Content, Track } from '~/types'
 
 interface ConfigField {
   id: string

front/src/composables/moderation/useReport.ts

@@ -1,4 +1,5 @@
-import { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+
 import { gettext } from '~/init/locale'
 import store from '~/store'
 const { $pgettext } = gettext

front/src/composables/moderation/useReportConfigs.ts

@@ -1,5 +1,6 @@
+import type { RouteLocationRaw } from 'vue-router'
+
 import { gettext } from '~/init/locale'
-import { RouteLocationRaw } from 'vue-router'
 
 interface ModeratedField {
   id: string

front/src/composables/useLogger.ts

@@ -1,4 +1,5 @@
 import Logger from 'js-logger'
+
 Logger.useDefaults({
   defaultLevel: import.meta.env.DEV
     ? Logger.DEBUG

front/src/composables/useOrdering.ts

@@ -1,8 +1,10 @@
-import { MaybeRef, reactiveComputed, toRefs } from '@vueuse/core'
+import type { OrderingDirection, OrderingField, RouteWithPreferences } from '~/store/ui'
+import type { MaybeRef } from '@vueuse/core'
+
+import { reactiveComputed, toRefs } from '@vueuse/core'
 import { computed, unref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from '~/store'
-import { OrderingDirection, OrderingField, RouteWithPreferences } from '~/store/ui'
 
 export interface OrderingProps {
   orderingConfigName: RouteWithPreferences | null

front/src/composables/useSmartSearch.ts

@@ -1,7 +1,10 @@
-import { MaybeRef, refWithControl } from '@vueuse/core'
+import type { MaybeRef } from '@vueuse/core'
+import type { Token } from '~/utils/search'
+
+import { refWithControl } from '@vueuse/core'
 import { computed, ref, unref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { compileTokens, normalizeQuery, parseTokens, Token } from '~/utils/search'
+import { compileTokens, normalizeQuery, parseTokens } from '~/utils/search'
 
 export interface SmartSearchProps {
   defaultQuery?: string

front/src/composables/useThemeList.ts

@@ -1,4 +1,5 @@
 import type { ThemeEntry } from '~/types'
+
 import { gettext } from '~/init/locale'
 
 const { $pgettext } = gettext

front/src/composables/useWebSocketHandler.ts

@@ -1,7 +1,8 @@
+import type { WebSocketEvent } from '~/types'
+import type { WebSocketEventName } from '~/store/ui'
+
 import store from '~/store'
 import { tryOnScopeDispose } from '@vueuse/core'
-import { WebSocketEvent } from '~/types'
-import { WebSocketEventName } from '~/store/ui'
 
 export default (eventName: WebSocketEventName, handler: (event: WebSocketEvent) => void) => {
   const id = `${+new Date() + Math.random()}`

front/src/init/axios.ts

@@ -1,4 +1,4 @@
-import { APIErrorResponse, BackendError, InitModule, RateLimitStatus } from '~/types'
+import type { APIErrorResponse, BackendError, InitModule, RateLimitStatus } from '~/types'
 
 import createAuthRefreshInterceptor from 'axios-auth-refresh'
 import axios, { AxiosError } from 'axios'

front/src/init/directives.ts

@@ -1,4 +1,5 @@
-import { InitModule } from '~/types'
+import type { InitModule } from '~/types'
+
 import jQuery from '~/jquery'
 
 export const install: InitModule = ({ app, store }) => {

front/src/init/globalComponents.ts

@@ -1,4 +1,4 @@
-import { InitModule } from '~/types'
+import type { InitModule } from '~/types'
 
 import HumanDate from '~/components/common/HumanDate.vue'
 import HumanDuration from '~/components/common/HumanDuration.vue'

front/src/init/instance.ts

@@ -1,4 +1,5 @@
-import { InitModule } from '~/types'
+import type { InitModule } from '~/types'
+
 import { watch } from 'vue'
 import axios from 'axios'
 

front/src/init/internalLinks.ts

@@ -1,10 +1,10 @@
-import { InitModule } from '~/types'
+import type { InitModule } from '~/types'
 
 // slight hack to allow use to have internal links in <translate> tags
 // while preserving router behaviour
 export const install: InitModule = ({ router }) => {
   document.documentElement.addEventListener('click', async (event) => {
-    const target = <HTMLAnchorElement> event.target
+    const target = event.target as HTMLAnchorElement
     if (!target.matches('a.internal')) return
 
     event.preventDefault()

front/src/init/lazyLoad.ts

@@ -1,4 +1,5 @@
-import { InitModule } from '~/types'
+import type { InitModule } from '~/types'
+
 import VueLazyload from 'vue3-lazyload'
 
 export const install: InitModule = ({ app }) => {

front/src/init/locale.ts

@@ -1,8 +1,9 @@
+import type { InitModule } from '~/types'
+
 import { watch } from 'vue'
 import locales from '~/locales.json'
 import { usePreferredLanguages } from '@vueuse/core'
 import { createGettext } from 'vue3-gettext'
-import { InitModule } from '~/types'
 import store from '~/store'
 
 const defaultLanguage = store.state.ui.currentLanguage ?? 'en_US'

front/src/init/mediaSession.ts

@@ -1,4 +1,5 @@
-import { InitModule } from '~/types'
+import type { InitModule } from '~/types'
+
 import { whenever } from '@vueuse/core'
 import useQueue from '~/composables/audio/useQueue'
 import usePlayer from '~/composables/audio/usePlayer'

front/src/init/serviceWorker.ts

@@ -1,4 +1,5 @@
-import { InitModule } from '~/types'
+import type { InitModule } from '~/types'
+
 import { registerSW } from 'virtual:pwa-register'
 import useLogger from '~/composables/useLogger'
 import { gettext } from '~/init/locale'

front/src/init/webSocket.ts

@@ -1,10 +1,5 @@
-import {
+import type { InitModule, ListenWSEvent, PendingReviewEditsWSEvent, PendingReviewReportsWSEvent, PendingReviewRequestsWSEvent } from '~/types'
-  InitModule,
+
-  ListenWSEvent,
-  PendingReviewEditsWSEvent,
-  PendingReviewReportsWSEvent,
-  PendingReviewRequestsWSEvent,
-} from '~/types'
 import { watchEffect, watch } from 'vue'
 import { useWebSocket, whenever } from '@vueuse/core'
 import useWebSocketHandler from '~/composables/useWebSocketHandler'

front/src/init/window.ts

@@ -1,4 +1,5 @@
-import { InitModule } from '~/types'
+import type { InitModule } from '~/types'
+
 import { useWindowSize } from '@vueuse/core'
 import { watchEffect } from 'vue'
 

front/src/router/guards.ts

@@ -1,6 +1,7 @@
 
-import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
-import { Permission } from '~/store/auth'
+import type { Permission } from '~/store/auth'
+
 import store from '~/store'
 
 export const hasPermissions = (permission: Permission) => (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {

front/src/router/routes/auth.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 
 export default [
   {

front/src/router/routes/content.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 
 export default [
   {

front/src/router/routes/index.ts

@@ -1,4 +1,5 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
 import settings from './settings'
 import library from './library'
 import content from './content'

front/src/router/routes/library.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 
 export default [
   {

front/src/router/routes/manage.ts

@@ -1,4 +1,5 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
 import { hasPermissions } from '~/router/guards'
 
 export default [

front/src/router/routes/settings.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 
 export default [
   {

front/src/router/routes/user.ts

@@ -1,4 +1,5 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
 import store from '~/store'
 
 export default [

front/src/store/auth.ts

@@ -1,7 +1,8 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+
 import axios from 'axios'
 import useLogger from '~/composables/useLogger'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
 import useFormData from '~/composables/useFormData'
 
 export type Permission = 'settings' | 'library' | 'moderation'

front/src/store/channels.ts

@@ -1,7 +1,8 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+
 import axios from 'axios'
 import useLogger from '~/composables/useLogger'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
 
 export interface State {
   subscriptions: string[]

front/src/store/favorites.ts

@@ -1,7 +1,8 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+
 import axios from 'axios'
 import useLogger from '~/composables/useLogger'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
 
 export interface State {
   tracks: string[]

front/src/store/index.ts

@@ -1,18 +1,29 @@
+import type { InjectionKey } from 'vue'
+import type { State as FavoritesState } from './favorites'
+import type { State as ChannelsState } from './channels'
+import type { State as LibrariesState } from './libraries'
+import type { State as AuthState } from './auth'
+import type { State as InstanceState } from './instance'
+import type { State as ModerationState } from './moderation'
+import type { State as QueueState } from './queue'
+import type { State as RadiosState } from './radios'
+import type { State as PlayerState } from './player'
+import type { State as PlaylistsState } from './playlists'
+import type { State as UiState } from './ui'
+
 import { createStore, Store, useStore as baseUseStore } from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
-
+import favorites from './favorites'
-import favorites, { State as FavoritesState } from './favorites'
+import channels from './channels'
-import channels, { State as ChannelsState } from './channels'
+import libraries from './libraries'
-import libraries, { State as LibrariesState } from './libraries'
+import auth from './auth'
-import auth, { State as AuthState } from './auth'
+import instance from './instance'
-import instance, { State as InstanceState } from './instance'
+import moderation from './moderation'
-import moderation, { State as ModerationState } from './moderation'
+import queue from './queue'
-import queue, { State as QueueState } from './queue'
+import radios from './radios'
-import radios, { State as RadiosState } from './radios'
+import player from './player'
-import player, { State as PlayerState } from './player'
+import playlists from './playlists'
-import playlists, { State as PlaylistsState } from './playlists'
+import ui from './ui'
-import ui, { State as UiState } from './ui'
-import { InjectionKey } from 'vue'
 
 export interface RootState {
   ui: UiState

front/src/store/instance.ts

@@ -1,8 +1,9 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+
 import axios from 'axios'
 import { merge } from 'lodash-es'
 import useLogger from '~/composables/useLogger'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
 
 export interface State {
   frontSettings: FrontendSettings

front/src/store/libraries.ts

@@ -1,7 +1,8 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+
 import axios from 'axios'
 import useLogger from '~/composables/useLogger'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
 
 export interface State {
   followsByLibrary: {

front/src/store/moderation.ts

@@ -1,8 +1,9 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+
 import axios from 'axios'
 import { sortBy } from 'lodash-es'
 import useLogger from '~/composables/useLogger'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
 
 export interface State {
   filters: ContentFilter[],

front/src/store/player.ts

@@ -1,8 +1,9 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+
 import axios from 'axios'
 import time from '~/utils/time'
 import useLogger from '~/composables/useLogger'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
 
 export interface State {
   maxConsecutiveErrors: number

front/src/store/playlists.ts

@@ -1,7 +1,8 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+import type { Playlist, Track } from '~/types'
+
 import axios from 'axios'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
-import { Playlist, Track } from '~/types'
 
 export interface State {
   playlists: Playlist[]

front/src/store/queue.ts

@@ -1,8 +1,9 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+import type { Track } from '~/types'
+
 import { shuffle } from 'lodash-es'
 import useLogger from '~/composables/useLogger'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
-import { Track } from '~/types'
 
 export interface State {
   tracks: Track[]

front/src/store/radios.ts

@@ -1,8 +1,9 @@
+import type { Dispatch, Module } from 'vuex'
+import type { RootState } from '~/store/index'
+
 import axios from 'axios'
 import { CLIENT_RADIOS } from '~/utils/clientRadios'
 import useLogger from '~/composables/useLogger'
-import { Dispatch, Module } from 'vuex'
-import { RootState } from '~/store/index'
 
 export interface State {
   current: null | CurrentRadio

front/src/store/ui.ts

@@ -1,8 +1,9 @@
+import type { Module } from 'vuex'
+import type { RootState } from '~/store/index'
+import type { availableLanguages } from '~/init/locale'
+
 import axios from 'axios'
 import moment from 'moment'
-import { Module } from 'vuex'
-import { RootState } from '~/store/index'
-import { availableLanguages } from '~/init/locale'
 
 type SupportedExtension = 'flac' | 'ogg' | 'mp3' | 'opus' | 'aac' | 'm4a' | 'aiff' | 'aif'
 

front/src/utils/clientRadios.ts

@@ -1,9 +1,10 @@
+import type { ListenWSEvent } from '~/types'
+import type { RootState } from '~/store'
+import type { Store } from 'vuex'
+import type { CurrentRadio, PopulateQueuePayload } from '~/store/radios'
+
 import axios from 'axios'
 import useLogger from '~/composables/useLogger'
-import { ListenWSEvent } from '~/types'
-import { RootState } from '~/store'
-import { Store } from 'vuex'
-import { CurrentRadio, PopulateQueuePayload } from '~/store/radios'
 
 const logger = useLogger()
 

front/src/utils/index.ts

@@ -1,8 +1,8 @@
 import { startCase } from 'lodash-es'
-import { Store } from 'vuex'
+import type { Store } from 'vuex'
-import { Router } from 'vue-router'
+import type { Router } from 'vue-router'
-import { APIErrorResponse } from '~/types'
+import type { APIErrorResponse } from '~/types'
-import { RootState } from '~/store'
+import type { RootState } from '~/store'
 
 export function setUpdate (obj: object, statuses: Record<string, unknown>, value: unknown) {
   for (const key of Object.keys(obj)) {

front/src/views/Search.vue

@@ -289,7 +289,8 @@ const radioConfig = computed(() => {
               v-if="results[t.id]"
               class="ui circular mini right floated label"
             >
-              {{ results[t.id].count }}</span>
+              {{ results[t.id]?.count ?? 0 }}
+            </span>
           </a>
         </div>
         <div v-if="isLoading">

front/src/views/auth/ProfileBase.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Actor } from '~/types'
+import type { Actor } from '~/types'
+
 import axios from 'axios'
 import useReport from '~/composables/moderation/useReport'
 import { onBeforeRouteUpdate } from 'vue-router'

front/src/views/channels/DetailBase.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Channel } from '~/types'
+import type { Channel } from '~/types'
+
 import axios from 'axios'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
@@ -445,7 +446,7 @@ const updateSubscriptionCount = (delta: number) => {
                 <div class="scrolling content">
                   <div class="description">
                     <embed-wizard
-                      :id="object.artist?.id"
+                      :id="object.artist!.id"
                       type="artist"
                     />
                   </div>

front/src/views/content/libraries/FilesTable.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { ImportStatus } from '~/types'
+import type { ImportStatus } from '~/types'
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences } from '~/store/ui'
+import type { OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+import type { SmartSearchProps } from '~/composables/useSmartSearch'
+
 import axios from 'axios'
 import time from '~/utils/time'
 import Pagination from '~/components/vui/Pagination.vue'
@@ -10,9 +14,8 @@ import { humanSize, truncate } from '~/utils/filters'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
+import useSmartSearch from '~/composables/useSmartSearch'
-import { OrderingField } from '~/store/ui'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type

front/src/views/content/remote/Card.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Library } from '~/types'
+import type { Library } from '~/types'
+
 import axios from 'axios'
 import RadioButton from '~/components/radios/Button.vue'
 import useReport from '~/composables/moderation/useReport'

front/src/views/library/DetailBase.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // TODO (wvffle): Rename to LibraryBase
-import { Library } from '~/types'
+import type { Library } from '~/types'
+
 import axios from 'axios'
 import LibraryFollowButton from '~/components/audio/LibraryFollowButton.vue'
 import RadioButton from '~/components/radios/Button.vue'

front/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
   "compilerOptions": {
+    "lib": ["webworker"],
     "baseUrl": ".",
     "sourceMap": true,
     "allowJs": true,

front/vite.config.ts

@@ -1,4 +1,6 @@
-import { defineConfig, HmrOptions } from 'vite'
+import type { HmrOptions } from 'vite'
+
+import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import { VitePWA } from 'vite-plugin-pwa'
 import { resolve } from 'path'