fix(front): [WIP] use generated types to make the CI (`lint:tsc`) happy

front/src/components/Queue.vue

@@ -18,7 +18,6 @@ import { useI18n } from 'vue-i18n'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import PlayerControls from '~/components/audio/PlayerControls.vue'
-import ActorLink from '~/components/audio/ArtistCreditLabel.vue'
 
 import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
@@ -27,7 +26,6 @@ import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
 import Button from '~/components/ui/Button.vue'
-import Pill from '~/components/ui/Pill.vue'
 import ArtistCreditLabel from '~/components/audio/ArtistCreditLabel.vue'
 
 const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue'))
@@ -299,7 +297,8 @@ if (!isWebGLSupported) {
           </h2>
           <span>
             <ArtistCreditLabel
-              :artist-credit="currentTrack.artistCredit || undefined"
+              v-if="currentTrack.artistCredit"
+              :artist-credit="currentTrack.artistCredit"
             />
           </span>
           <div

front/src/components/channels/UploadMetadataForm.vue

@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   values: null
 })
 
+// TODO: check if `position: 0` is a good default
 const newValues = reactive<Values>({
   position: 0,
   description: '',

front/src/components/common/ContentForm.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import axios from 'axios'
+import { useVModel, useTextareaAutosize, syncRef } from '@vueuse/core'
-import { useVModel, watchDebounced, useTextareaAutosize, syncRef } from '@vueuse/core'
+import { computed } from 'vue'
-import { ref, computed, watchEffect, onMounted, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import useLogger from '~/composables/useLogger'
-
 import Textarea from '~/components/ui/Textarea.vue'
 
 interface Events {
@@ -30,17 +27,11 @@ const props = withDefaults(defineProps<Props>(), {
   required: false
 })
 
-const logger = useLogger()
-
 const { t } = useI18n()
 const { textarea, input } = useTextareaAutosize()
 const value = useVModel(props, 'modelValue', emit)
 syncRef(value, input)
 
-const isPreviewing = ref(false)
-const preview = ref()
-const isLoadingPreview = ref(false)
-
 const labels = computed(() => ({
   placeholder: props.placeholder ?? t('components.common.ContentForm.placeholder.input')
 }))

front/src/components/common/InlineSearchBar.vue

@@ -28,11 +28,6 @@ const labels = computed(() => ({
   searchPlaceholder: t('components.common.InlineSearchBar.placeholder.search'),
   clear: t('components.common.InlineSearchBar.button.clear')
 }))
-
-const search = () => {
-  value.value = ''
-  emit('search', value.value)
-}
 </script>
 
 <template>

front/src/components/forms/PasswordInput.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useClipboard, useVModel } from '@vueuse/core'
 import { useStore } from '~/store'
 
-import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 
 interface Events {

front/src/components/library/AlbumBase.vue

@@ -68,7 +68,6 @@ const labels = computed(() => ({
 }))
 
 const {
-  isShuffled,
   shuffle
 } = useQueue()
 
@@ -221,7 +220,7 @@ const remove = async () => {
               :is-playable="object.is_playable"
             />
             <Button
-              v-if="object.tracks.length > 2"
+              v-if="object?.tracks?.length && object?.tracks?.length > 2"
               primary
               icon="bi-shuffle"
               :aria-label="labels.shuffle"
@@ -232,8 +231,11 @@ const remove = async () => {
             <DangerousButton
               v-if="artistCredit[0] &&
                 store.state.auth.authenticated &&
-                artistCredit[0].artist.channel &&
+                artistCredit[0].artist.channel
-                artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
+                /* attributed_to is a number
+                   TODO: Re-implement the intention behind
+                   && artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername
+                */"
               :is-loading="isLoading"
               icon="bi-trash"
               @confirm="remove()"

front/src/components/library/AlbumDetail.vue

@@ -34,22 +34,20 @@ const { t } = useI18n()
 const getDiscKey = (disc: Track[]) => disc?.map(track => track.id).join('|') ?? ''
 const page = ref(1)
 
-const discCount = computed(() => props.object.tracks.reduce((acc, track) => {
+const discCount = computed(() => props.object?.tracks?.reduce((acc, track) => {
   acc.add(track.disc_number)
   return acc
 }, new Set()).size)
 
-const discs = computed(() => props.object.tracks
+const discs = computed(() => props.object?.tracks?.reduce((acc: Track[][], track: Track) => {
-  .reduce((acc: Track[][], track: Track) => {
+  const discNumber = track.disc_number - (props.object?.tracks?.[0]?.disc_number ?? 1)
-    const discNumber = track.disc_number - (props.object.tracks[0]?.disc_number ?? 1)
+  acc[discNumber].push(track)
-    acc[discNumber].push(track)
+  return acc
-    return acc
+}, Array(discCount.value).fill(undefined).map(() => [])))
-  }, Array(discCount.value).fill(undefined).map(() => []))
-)
 
-const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy * (page.value - 1), props.paginateBy * page.value)
+const paginatedDiscs = computed(() => props.object?.tracks?.slice(props.paginateBy * (page.value - 1), props.paginateBy * page.value)
   .reduce((acc: Track[][], track: Track) => {
-    const discNumber = track.disc_number - (props.object.tracks[0]?.disc_number ?? 1)
+    const discNumber = track.disc_number - (props.object?.tracks?.[0]?.disc_number ?? 1)
     acc[discNumber].push(track)
     return acc
   }, Array(discCount.value).fill(undefined).map(() => []))
@@ -72,9 +70,10 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
 
     <channel-entries
       v-if="artistCredit && artistCredit[0].artist.channel && isSerie"
+      :default-cover="null"
       :is-podcast="isSerie"
       :limit="50"
-      :filters="{channel: artistCredit[0].artist.channel.uuid, album: object.id, ordering: '-creation_date'}"
+      :filters="{channel: artistCredit[0].artist.channel, album: object.id, ordering: '-creation_date'}"
     />
 
     <Loader v-if="isLoadingTracks" />
@@ -85,7 +84,7 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
         style="margin-top: -16px;"
         :tags="object.tags"
       />
-      <template v-if="discCount > 1">
+      <template v-if="(discCount || 0) > 1">
         <div
           v-for="tracks, index in paginatedDiscs"
           :key="index + getDiscKey(tracks)"
@@ -94,10 +93,10 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
             <div class="ui hidden divider" />
             <PlayButton
               class="right floated mini inverted vibrant"
-              :tracks="discs[index]"
+              :tracks="discs ? discs[index] : []"
             />
             <h3>
-              {{ t('components.library.AlbumDetail.meta.volume', {number: tracks[0].disc_number}) }}
+              {{ t('components.library.AlbumDetail.meta.volume', { number: tracks[0].disc_number }) }}
             </h3>
             <track-table
               :is-album="true"
@@ -111,7 +110,7 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
           </template>
         </div>
       </template>
-      <template v-else>
+      <template v-else-if="object.tracks">
         <track-table
           :is-album="true"
           :tracks="object.tracks"

front/src/components/library/AlbumDropdown.vue

@@ -132,8 +132,14 @@ const open = ref(false)
         <PopoverItem
           v-if="artistCredit[0] &&
             store.state.auth.authenticated &&
-            artistCredit[0].artist.channel &&
+            artistCredit[0].artist.channel
-            artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
+            /*
+
+            TODO: Re-implement what was the intention behind the following line:
+
+            && artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername
+
+            */"
         >
           <DangerousButton
             :is-loading="isLoading"
@@ -148,8 +154,14 @@ const open = ref(false)
 
         <PopoverItem
           v-for="obj in getReportableObjects({
-            album: object,
+            album: object
-            channel: artistCredit[0]?.artist.channel
+            /*
+
+            TODO: The type of the following field has changed to number.
+            Find out if we want to load the corresponding channel instead.
+
+            , channel: artistCredit[0]?.artist.channel
+            */
           })"
           :key="obj.target.type + obj.target.id"
           icon="bi-flag"

front/src/components/library/Albums.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import type { OrderingProps } from '~/composables/navigation/useOrdering'
-import type { Album, PaginatedAlbumList } from '~/types'
+import type { PaginatedAlbumList } from '~/types'
-import { type operations } from '~/generated/types.ts'
+import type { operations } from '~/generated/types.ts'
 import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
 
-import { computed, ref, watch, onMounted } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
 import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
 import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
 import { useModal } from '~/ui/composables/useModal.ts'
-import { useTags } from '~/ui/composables/useTags.ts'
 
 import axios from 'axios'
 
-import TagsSelector from '~/components/library/TagsSelector.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Card from '~/components/ui/Card.vue'
 import AlbumCard from '~/components/album/Card.vue'

front/src/components/library/ArtistBase.vue

@@ -49,17 +49,21 @@ const router = useRouter()
 const route = useRoute()
 
 const domain = computed(() => getDomain(object.value?.fid ?? ''))
-const isPlayable = computed(() => !!object.value?.albums.some(album => album.is_playable))
+
+// TODO: Re-implement `!!object.value?.albums.some(album => album.is_playable)` instead of `true`
+const isPlayable = computed(() => true)
 const wikipediaUrl = computed(() => `https://en.wikipedia.org/w/index.php?search=${encodeURI(object.value?.name ?? '')}`)
 const musicbrainzUrl = computed(() => object.value?.mbid ? `https://musicbrainz.org/artist/${object.value.mbid}` : null)
 const discogsUrl = computed(() => `https://discogs.com/search/?type=artist&title=${encodeURI(object.value?.name ?? '')}`)
 const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
 
+// TODO: This is cover logic. We use it a lot. Should all go into a single, smart, parametrised function.
+// Something like `useCover.ts`!
 const cover = computed(() => {
-  const artistCover: Cover | undefined = object.value?.cover
+  const artistCover = object.value?.cover
 
-  const albumCover: Cover | undefined = object.value?.albums
+  // const albumCover: Cover | null = object.value?.albums
-    .find(album => album.cover?.urls.large_square_crop)?.cover
+  //   .find(album => album.cover?.urls.large_square_crop)?.cover
 
   const trackCover = tracks.value?.find(
     (track: Track) => track.cover
@@ -67,15 +71,19 @@ const cover = computed(() => {
 
   const fallback : Cover = {
     uuid: '',
+    mimetype: 'jpeg',
+    creation_date: '',
+    size: 0,
     urls: {
       original: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
+      small_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
       medium_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
       large_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
     }
   }
 
   return artistCover
-  || albumCover
+  // || albumCover
   || trackCover
   || fallback
 })
@@ -182,7 +190,7 @@ watch(() => props.id, fetchData, { immediate: true })
 
               <template #items>
                 <PopoverItem
-                  v-if="domain != store.getters['instance/domain']"
+                  v-if="object.fid && domain != store.getters['instance/domain']"
                   :to="object.fid"
                   target="_blank"
                   icon="bi-box-arrow-up-right"

front/src/components/library/ArtistDetail.vue

@@ -100,11 +100,9 @@ const loadMoreAlbums = async () => {
     <Loader v-if="isLoadingAlbums" />
     <template v-else-if="albums && albums.length > 0">
       <Heading
-        h2
+        :h2="t('components.library.ArtistDetail.header.album')"
         section-heading
-      >
+      />
-        {{ t('components.library.ArtistDetail.header.album') }}
-      </Heading>
       <Layout flex>
         <album-card
           v-for="album in allAlbums"
@@ -127,11 +125,9 @@ const loadMoreAlbums = async () => {
     </template>
     <template v-if="tracks.length > 0">
       <Heading
-        h2
+        :h2="t('components.library.ArtistDetail.header.track')"
         section-heading
-      >
+      />
-        {{ t('components.library.ArtistDetail.header.track') }}
-      </Heading>
       <TrackTable
         :is-artist="true"
         :show-position="false"
@@ -140,11 +136,9 @@ const loadMoreAlbums = async () => {
       />
     </template>
     <Heading
-      h2
+      :h2="t('components.library.ArtistDetail.header.library')"
       section-heading
-    >
+    />
-      {{ t('components.library.ArtistDetail.header.library') }}
-    </Heading>
     <LibraryWidget
       :url="'artists/' + object.id + '/libraries/'"
       @loaded="emit('libraries-loaded', $event)"

front/src/components/library/ArtistEdit.vue

@@ -41,10 +41,11 @@ const canEdit = store.state.auth.availablePermissions.library
     >
       {{ t('components.library.ArtistEdit.message.remote') }}
     </Alert>
+    <!-- TODO: Check if we need to load the corresponding Actor (field: `attributed_to`) -->
     <edit-form
       v-else
       :object-type="objectType"
-      :object="object"
+      :object="{ ...object, attributed_to: undefined }"
     />
   </Layout>
 </template>

front/src/components/library/EditCard.vue

@@ -160,10 +160,10 @@ const approve = async (approved: boolean) => {
 
 const alertProps = computed(() => {
   return {
-    green: props.obj.is_approved && props.obj.is_applied,
+    green: props.obj.is_approved && props.obj.is_applied || undefined,
-    red: props.obj.is_approved === false,
+    red: props.obj.is_approved === false || undefined,
-    yellow: props.obj.is_applied === false
+    yellow: props.obj.is_applied === false || undefined
-  }
+  } as const
 })
 </script>
 
@@ -177,8 +177,8 @@ const alertProps = computed(() => {
       <div class="meta">
         <router-link
           v-if="obj.target && obj.target.type === 'track'"
-          :to="{name: 'library.tracks.detail', params: {id: obj.target.id }}"
+          :to="{ name: 'library.tracks.detail', params: { id: obj.target.id } }"
-          :class="isInteractive"
+          :class="/* TODO: find out: what is isInteractive? */ undefined"
         >
           <i class="bi bi-file-music-fill" />
           {{ t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}

front/src/components/library/FileUpload.vue

@@ -47,7 +47,6 @@ const { t } = useI18n()
 const store = useStore()
 
 const upload = ref()
-const currentTab = ref('uploads')
 const supportedExtensions = computed(() => store.state.ui.supportedExtensions)
 
 const labels = computed(() => ({
@@ -82,7 +81,7 @@ const options = {
   everyone: sharedLabels.fields.privacy_level.choices.everyone
 } as const satisfies Record<PrivacyLevel, string>
 
-const privacyLevel = defineModel<keyof typeof options>({ required: true })
+const privacyLevel = defineModel<PrivacyLevel | undefined>({ required: true })
 
 const library = ref<Library>()
 
@@ -105,12 +104,12 @@ watch(privacyLevel, async (newValue) => {
   try {
     const response = await axios.get<paths['/api/v2/libraries/']['get']['responses']['200']['content']['application/json']>('libraries/', {
       params: {
-        privacy_level: privacyLevel.value,
+        privacy_level: newValue,
         scope: 'me'
       }
     })
 
-    library.value = response.data.results.find(({ name }) => name === privacyLevel.value)
+    library.value = response.data.results.find(({ name }) => name === newValue)
   } catch (error) {
     useErrorHandler(error as Error)
   }

front/src/components/library/ImportStatusModal.vue

@@ -4,7 +4,6 @@ import { useVModel } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
 import Modal from '~/components/ui/Modal.vue'
-import Button from '~/components/ui/Button.vue'
 
 interface ErrorEntry {
   key: string

front/src/components/library/Podcasts.vue

@@ -24,7 +24,6 @@ import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 import useLogger from '~/composables/useLogger'
 import { useRouter } from 'vue-router'
-import { useTags } from '~/ui/composables/useTags.ts'
 
 
 import Layout from '~/components/ui/Layout.vue'
@@ -140,7 +139,7 @@ const labels = computed(() => ({
 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
 
 const { isOpen: subscribeIsOpen, to: subscribe } = useModal('subscribe')
-const { isOpen: channelIsOpen, to: channel } = useModal('channel')
+const { isOpen: channelIsOpen } = useModal('channel')
 const { to: upload } = useModal('upload')
 </script>
 

front/src/components/library/TagsSelector.vue

@@ -25,14 +25,20 @@ const store = useStore()
 const dropdown = ref()
 
 watch(() => props.modelValue, (value) => {
+  // TODO: root out jquery and all its malevolent offspring!
+  // @ts-expect-error drop up and down and up again
   const current = $(dropdown.value).dropdown('get value').split(',').sort()
 
   if (!isEqual([...value].sort(), current)) {
+    // TODO: root out jquery and all its malevolent offspring!
+    // @ts-expect-error drop up and down and up again
     $(dropdown.value).dropdown('set exactly', value)
   }
 })
 
 const handleUpdate = () => {
+  // TODO: root out jquery and all its malevolent offspring!
+  // @ts-expect-error drop up and down and up again
   const value = $(dropdown.value).dropdown('get value').split(',')
   emit('update:modelValue', value)
   return value
@@ -41,6 +47,8 @@ const handleUpdate = () => {
 onMounted(async () => {
   await nextTick()
 
+  // TODO: root out jquery and all its malevolent offspring!
+  // @ts-expect-error drop up and down and up again
   $(dropdown.value).dropdown({
     keys: { delimiter: 32 },
     forceSelection: false,
@@ -49,12 +57,14 @@ onMounted(async () => {
     preserveHTML: false,
     apiSettings: {
       url: store.getters['instance/absoluteUrl']('/api/v1/tags/?name__startswith={query}&ordering=length&page_size=5'),
+      // @ts-expect-error I'm not curious to research what xhr is but I'm sure it served its purpose well
       beforeXHR: function (xhrObject) {
         if (store.state.auth.oauth.accessToken) {
           xhrObject.setRequestHeader('Authorization', store.getters['auth/header'])
         }
         return xhrObject
       },
+      // @ts-expect-error yes, semantic-ui has a large API.
       onResponse (response) {
         response = { results: [], ...response }
 
@@ -85,6 +95,8 @@ onMounted(async () => {
     onChange: handleUpdate
   })
 
+  // TODO: root out jquery and all its malevolent offspring!
+  // @ts-expect-error drop up and down and up again
   $(dropdown.value).dropdown('set exactly', props.modelValue)
 })
 </script>

front/src/components/library/TrackBase.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Track, Artist, Library } from '~/types'
+import type { Track, Library } from '~/types'
-import type { Operations } from '~/generated/types'
+import type { operations, components } from '~/generated/types'
 
 import { momentFormat } from '~/utils/filters'
 import { computed, ref, watch } from 'vue'
@@ -47,7 +47,7 @@ const props = defineProps<Props>()
 const { report, getReportableObjects } = useReport()
 
 const track = ref<Track | null>(null)
-const artist = ref<Artist | null>(null)
+const artist = ref<components['schemas']['ArtistWithAlbums'] | null>(null)
 const showEmbedModal = ref(false)
 const showDeleteModal = ref(false)
 const libraries = ref([] as Library[])
@@ -58,8 +58,15 @@ const route = useRoute()
 const store = useStore()
 
 const domain = computed(() => getDomain(track.value?.fid ?? ''))
-const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
+
-const isEmbedable = computed(() => artist.value?.channel?.actor || publicLibraries.value.length)
+// TODO: Why is nobody using the public libraries?
+// const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
+
+// TODO: Make it make sense:
+// const isEmbedable = computed(() => artist.value?.channel?.actor || publicLibraries.value.length)
+
+const isEmbedable = computed(() => false)
+
 const upload = computed(() => track.value?.uploads?.[0] ?? null)
 const wikipediaUrl = computed(() => `https://en.wikipedia.org/w/index.php?search=${encodeURI(`${track.value?.title ?? ''} ${track.value?.artist_credit?.[0].artist?.name ?? ''}`)}`)
 const discogsUrl = computed(() => `https://discogs.com/search/?type=release&title=${encodeURI(track.value?.album?.title ?? '')}&artist=${encodeURI(track.value?.artist_credit?.[0].artist?.name ?? '')}&title=${encodeURI(track.value?.title ?? '')}`)
@@ -70,15 +77,17 @@ const downloadUrl = computed(() => {
     : url
 })
 
-const attributedToUrl = computed(() => router.resolve({
+// TODO: Still needed?:
-  name: 'profile.full.overview',
-  params: {
-    username: track.value?.attributed_to?.preferred_username,
-    domain: track.value?.attributed_to?.domain
-  }
-})?.href)
 
-const artistCredit = track.value?.artist_credit
+// const attributedToUrl = computed(() => router.resolve({
+//   name: 'profile.full.overview',
+//   params: {
+//     username: track.value?.attributed_to?.preferred_username,
+//     domain: track.value?.attributed_to?.domain
+//   }
+// })?.href)
+
+// const artistCredit = track.value?.artist_credit
 
 const totalDuration = computed(() => track.value?.uploads?.[0]?.duration ?? 0)
 
@@ -89,15 +98,17 @@ const labels = computed(() => ({
   more: t('components.library.TrackBase.button.more')
 }))
 
-type TrackResponse = Operations['get_tracks_2']['responses']['200']['content']['application/json']
+// Note: Mind the singular!
-type TrackParams = Operations['get_tracks_2']['parameters']['query']
 
-type ArtistResponse = Operations['get_artists_2']['responses']['200']['content']['application/json']
+type TrackResponse = operations['get_track_2']['responses']['200']['content']['application/json']
+type ArtistResponse = operations['get_artist_2']['responses']['200']['content']['application/json']
 
+/* Too bad the following is just wrong now:
 const params: TrackParams = {
   refresh: 'true'
   // TypeScript will now show all available parameters with their types
 }
+  */
 
 const isLoading = ref(false)
 const fetchData = async () => {
@@ -287,7 +298,7 @@ watch(showDeleteModal, (newValue) => {
                   v-if="artist &&
                     store.state.auth.authenticated &&
                     artist.channel &&
-                    artist.attributed_to.full_username === store.state.auth.fullUsername"
+                    artist.attributed_to?.full_username === store.state.auth.fullUsername"
                   icon="bi-trash"
                   @click="showDeleteModal = true"
                 >

front/src/components/library/TrackDetail.vue

@@ -4,7 +4,6 @@ import type { Track, Library } from '~/types'
 import { humanSize, momentFormat } from '~/utils/filters'
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '~/store'
 
 import time from '~/utils/time'
 import axios from 'axios'

front/src/components/library/radios/Builder.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, reactive, watch, onMounted } from 'vue'
+import { computed, ref, reactive, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 

front/src/components/library/radios/Filter.vue

@@ -55,8 +55,11 @@ const el = useCurrentElement()
 
 onMounted(() => {
   for (const field of data.value.filter.fields) {
+    // @ts-expect-error We threw out Semantic UI types
     const settings: SemanticUI.DropdownSettings = {
+      // @ts-expect-error value? any!
       onChange (value) {
+        // @ts-expect-error dropdown? any!
         value = $(this).dropdown('get value').split(',')
 
         if (field.type === 'list' && field.subtype === 'number') {
@@ -75,11 +78,11 @@ onMounted(() => {
     if (field.autocomplete) {
       selector += '.autocomplete'
 
-      // @ts-expect-error Semantic UI types are incomplete
       settings.fields = field.autocomplete_fields
       settings.minCharacters = 1
       settings.apiSettings = {
         url: store.getters['instance/absoluteUrl'](`${field.autocomplete}?${field.autocomplete_qs}`),
+        // @ts-expect-error xhr? any!
         beforeXHR (xhrObject) {
           if (store.state.auth.oauth.accessToken) {
             xhrObject.setRequestHeader('Authorization', store.getters['auth/header'])
@@ -87,6 +90,7 @@ onMounted(() => {
 
           return xhrObject
         },
+        // @ts-expect-error initialResponse? any!
         onResponse (initialResponse) {
           return !settings.fields?.remoteValues
             ? { results: initialResponse.results }
@@ -95,6 +99,7 @@ onMounted(() => {
       }
     }
 
+    // @ts-expect-error jquery lives!
     $(el.value).find(selector).dropdown(settings)
   }
 })

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

@@ -56,7 +56,15 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 
 const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
-const actions = computed(() => [
+const actions = computed<{
+  name: string
+  label: string
+  isDangerous?: boolean
+  allowAll?: boolean
+  confirmColor?: 'success' | 'danger'
+  confirmationMessage?: string
+  filterChackable?: (item: any) => boolean
+}[]>(() => [
   {
     name: 'delete',
     label: t('components.manage.library.AlbumsTable.action.delete.label'),

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

@@ -54,16 +54,14 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 ]
 
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
-const actions = computed(() => [
+const actions = computed(() => [{
-  {
     name: 'delete',
     label: t('components.manage.library.ArtistsTable.action.delete.label'),
     confirmationMessage: t('components.manage.library.ArtistsTable.action.delete.warning'),
     isDangerous: true,
     allowAll: false,
     confirmColor: 'danger'
-  }
+} as const])
-])
 
 const isLoading = ref(false)
 const fetchData = async () => {

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

@@ -56,16 +56,14 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 
 const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
-const actions = computed(() => [
+const actions = computed(() => [{
-  {
+  name: 'delete',
-    name: 'delete',
+  label: t('components.manage.library.LibrariesTable.action.delete.label'),
-    label: t('components.manage.library.LibrariesTable.action.delete.label'),
+  confirmationMessage: t('components.manage.library.LibrariesTable.action.delete.warning'),
-    confirmationMessage: t('components.manage.library.LibrariesTable.action.delete.warning'),
+  isDangerous: true,
-    isDangerous: true,
+  allowAll: false,
-    allowAll: false,
+  confirmColor: 'danger'
-    confirmColor: 'danger'
+} as const ])
-  }
-])
 
 const isLoading = ref(false)
 const fetchData = async () => {

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

@@ -59,16 +59,14 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 
 const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
-const actions = computed(() => [
+const actions = computed(() => [{
-  {
+  name: 'delete',
-    name: 'delete',
+  label: t('components.manage.library.TagsTable.action.delete.label'),
-    label: t('components.manage.library.TagsTable.action.delete.label'),
+  confirmationMessage: t('components.manage.library.TagsTable.action.delete.warning'),
-    confirmationMessage: t('components.manage.library.TagsTable.action.delete.warning'),
+  isDangerous: true,
-    isDangerous: true,
+  allowAll: false,
-    allowAll: false,
+  confirmColor: 'danger'
-    confirmColor: 'danger'
+} as const ])
-  }
-])
 
 const isLoading = ref(false)
 const fetchData = async () => {

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

@@ -54,16 +54,14 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
 
 const { t } = useI18n()
 const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
-const actions = computed(() => [
+const actions = computed(() => [{
-  {
+  name: 'delete',
-    name: 'delete',
+  label: t('components.manage.library.TracksTable.action.delete.label'),
-    label: t('components.manage.library.TracksTable.action.delete.label'),
+  confirmationMessage: t('components.manage.library.TracksTable.action.delete.warning'),
-    confirmationMessage: t('components.manage.library.TracksTable.action.delete.warning'),
+  isDangerous: true,
-    isDangerous: true,
+  allowAll: false,
-    allowAll: false,
+  confirmColor: 'danger'
-    confirmColor: 'danger'
+} as const ])
-  }
-])
 
 const isLoading = ref(false)
 const fetchData = async () => {

front/src/components/manage/moderation/AccountsTable.vue

@@ -232,8 +232,9 @@ const labels = computed(() => ({
   <div>
     <Pagination
       v-if="result && result.count > paginateBy"
-      v-model:current="page"
+      v-model:page="page"
       :paginate-by="paginateBy"
+      :pages="result.count"
     />
 
     <span v-if="result && result.results.length > 0">

front/src/components/manage/moderation/DomainsTable.vue

@@ -263,7 +263,8 @@ const labels = computed(() => ({
   <div>
     <pagination
       v-if="result && result.count > paginateBy"
-      v-model:current="page"
+      v-model:page="page"
+      v-model:pages="result.count"
       :compact="true"
       :paginate-by="paginateBy"
       :total="result.count"

front/src/components/manage/users/InvitationsTable.vue

@@ -231,7 +231,8 @@ const labels = computed(() => ({
   <div>
     <Pagination
       v-if="result && result.count > paginateBy"
-      v-model:current="page"
+      v-model:page="page"
+      v-model:pages="result.count"
       :paginate-by="paginateBy"
     />
 

front/src/components/manage/users/UsersTable.vue

@@ -269,7 +269,8 @@ const labels = computed(() => ({
     <div>
       <Pagination
         v-if="result && result.count > paginateBy"
-        v-model:current="page"
+        v-model:page="page"
+        v-model:pages="result.count"
         :paginate-by="paginateBy"
       />
 

front/src/components/playlist/Card.vue

@@ -10,7 +10,9 @@ import type { Playlist } from '~/types'
 
 const { t } = useI18n()
 
-const play = defineEmit<[playlist: Playlist]>()
+// TODO: Check if the following emit is ever caught anywhere
+// const play = defineEmit<[playlist: Playlist]>()
+
 const { playlist } = defineProps<{playlist: Playlist}>()
 
 const covers = computed(() => playlist.album_covers

front/src/components/playlists/Card.vue

@@ -4,7 +4,7 @@ import type { Playlist } from '~/types'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import defaultCover from '~/assets/audio/default-cover.png'
 import { momentFormat } from '~/utils/filters'
-import { ref, computed, reactive } from 'vue'
+import { ref, computed } from 'vue'
 import { useStore } from '~/store'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -54,9 +54,10 @@ function shuffleArray (array: string[]): string[] {
 
 const randomizedColors = computed(() => shuffleArray(bgcolors.value))
 
-const goToPlaylist = () => {
+// TODO: Chseck if the following function has a use
-  router.push({ name: 'library.playlists.detail', params: { id: props.playlist.id } })
+// const goToPlaylist = () => {
-}
+//   router.push({ name: 'library.playlists.detail', params: { id: props.playlist.id } })
+// }
 
 const updatedTitle = computed(() => {
   const date = momentFormat(new Date(props.playlist.modification_date ?? '1970-01-01'))

front/src/components/playlists/CardList.vue

@@ -2,7 +2,6 @@
 import type { Playlist } from '~/types'
 
 import PlaylistsCard from '~/components/playlists/Card.vue'
-import Layout from '~/components/ui/Layout.vue'
 
 interface Props {
   playlists: Playlist[]

front/src/components/playlists/Form.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { Playlist, PrivacyLevel, BackendError } from '~/types'
+import type { Playlist, BackendError } from '~/types'
+import type { components } from '~/generated/types'
 
-import { useVModels, useCurrentElement } from '@vueuse/core'
+import { useVModels } from '@vueuse/core'
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
@@ -16,7 +17,6 @@ import Alert from '~/components/ui/Alert.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Slider from '~/components/ui/Slider.vue'
-import Textarea from '~/components/ui/Textarea.vue'
 
 interface Events {
   (e: 'update:playlist', value: Playlist): void
@@ -56,10 +56,9 @@ const sharedLabels = useSharedLabels()
 const privacyLevelChoices = {
   me: sharedLabels.fields.privacy_level.choices.me,
   instance: sharedLabels.fields.privacy_level.choices.instance,
+  followers: sharedLabels.fields.privacy_level.choices.followers,
   everyone: sharedLabels.fields.privacy_level.choices.everyone
-} as const satisfies Record<PrivacyLevel, string>
+} as const satisfies Record<components['schemas']['PrivacyLevelEnum'], string>
-
-const el = useCurrentElement()
 
 const isLoading = ref(false)
 const submit = async () => {

front/src/components/playlists/PlaylistModal.vue

@@ -15,7 +15,6 @@ import { generateTrackCreditString } from '~/utils/utils'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Input from '~/components/ui/Input.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 
 const logger = useLogger()

front/src/components/podcast/Card.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
-import { useRouter } from 'vue-router'
 import type { Channel } from '~/types'
 
 import OptionsButton from '~/components/ui/button/Options.vue'
@@ -13,17 +12,12 @@ const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Dat
 
 <template>
   <Card
-    :title="podcast.uuid"
+    :title="podcast.uuid || '' /* TODO: This is probably not what we want as a title? */"
     :image="podcast.artist?.cover?.urls.original"
     class="podcast-card"
-    @click="navigate"
+    :to="/* TODO: where should it link? */ ''"
   >
-    <a
+    {{ podcast.artist?.name }}
-      class="funkwhale link"
-      @click.stop="navigate"
-    >
-      {{ podcast.artist?.name }}
-    </a>
 
     <template #footer>
       {{ timeAgo }}

front/src/components/radio/Card.vue

@@ -1,30 +1,27 @@
 <script setup lang="ts">
-import { usePastel } from '~/composables/color'
+import type { ComponentProps } from 'vue-component-type-helpers'
-import { FwCard, FwPlayButton } from '~/components'
+import type { Radio } from '~/types'
-import { useRouter } from 'vue-router'
+
 import { useI18n } from 'vue-i18n'
-import type { PastelProps } from '~/types/common-props'
+
-import type { Radio } from '~/types/models'
+import Card from '~/components/ui/Card.vue'
+import PlayButton from '~/components/audio/PlayButton.vue'
 
 const { t } = useI18n()
 
-interface Props {
+const play = defineEmit<[radio: Radio]>()
+const { radio, small, ...cardProps } = defineProps<{
   radio: Radio
   small?: boolean
-}
+} & ComponentProps<typeof Card>>()
-
-const play = defineEmit<[radio: Radio]>()
-const props = defineProps<Props & PastelProps>()
-
-const pastel = usePastel(() => props.color)
 </script>
 
 <template>
-  <fw-card
+  <Card
+    v-bind="cardProps"
     :title="radio.name"
-    :class="pastel"
     class="radio-card"
-    @click="navigate"
+    :to="/* TODO: get correct route here */ ''"
   >
     <template #image>
       <div class="cover-name">
@@ -32,7 +29,7 @@ const pastel = usePastel(() => props.color)
       </div>
     </template>
 
-    <fw-play-button @play="play(props.radio)" />
+    <PlayButton @play="play(radio)" />
 
     <div
       v-if="!small"
@@ -40,7 +37,7 @@ const pastel = usePastel(() => props.color)
     >
       {{ radio.description }}
     </div>
-  </fw-card>
+  </Card>
 </template>
 
 <style lang="scss">

front/src/components/ui/Activity.vue

@@ -16,15 +16,10 @@ const { track, user } = defineProps<{ track: Track, user: User }>()
 
 const router = useRouter()
 
-const navigate = (to: 'track' | 'artist' | 'user') =>
+const navigate = (to: 'track' | 'user') =>
   to === 'track'
     ? router.push({ name: 'library.tracks.detail', params: { id: track.id } })
-    : to === 'artist'
+    : router.push({ name: 'profile.full', params: profileParams.value })
-      ? router.push({ name: 'library.artists.detail', params: { id: track.artist.id } })
-      : router.push({ name: 'profile.full', params: profileParams.value })
-
-const artistCredit = track.artist_credit || []
-const firstArtist = artistCredit.length > 0 ? artistCredit[0].artist : null
 
 const profileParams = computed(() => {
   const [username, domain] = user.full_username.split('@')
@@ -50,10 +45,15 @@ const profileParams = computed(() => {
         {{ track.title }}
       </div>
       <a
+        v-for="{ artist } in track.artist_credit"
+        :key="artist.id"
         class="funkwhale link artist"
-        @click.stop="navigate('artist')"
+        @click.stop="router.push({
+          name: 'library.artists.detail',
+          params: { id: artist.id }
+        })"
       >
-        {{ firstArtist?.name /* TODO: Multi-Artist! */ }}
+        {{ artist.name }}
       </a>
       <a
         class="funkwhale link user"

front/src/components/ui/Link.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, useSlots } from 'vue'
 
-import { type RouterLinkProps, RouterLink, useLink } from 'vue-router'
+import { type RouterLinkProps, RouterLink } from 'vue-router'
 import { type ColorProps, type DefaultProps, type VariantProps, color, isNoColors } from '~/composables/color'
 import { type WidthProps, width } from '~/composables/width'
 import { type AlignmentProps, align } from '~/composables/alignment'

front/src/components/ui/Markdown.vue

@@ -6,7 +6,7 @@ import showdown from 'showdown'
 import SanitizedHtml from './SanitizedHtml.vue'
 
 interface Props {
-  md: string | null
+  md: string
 }
 
 const props = defineProps<Props>()

front/src/components/ui/Section.vue

@@ -62,6 +62,8 @@ const props = defineProps<{
             @click="() => expand ? expand() : collapse ? collapse() : (() => { return })()"
           >
             <slot name="topleft" />
+
+            <!-- @vue-ignore -->
             <Heading v-bind="props" />
           </Button>
           <i

front/src/components/ui/Slider.vue

@@ -163,9 +163,6 @@ onMounted(() => {
     pointer-events: none;
     opacity: var(--slider-opacity);
   }
-  input:focus~.range {
-    // focused style
-  }
   input[type=range]::-moz-range-thumb {
     background-color: var(--fw-primary);
     transition: all .1s;

front/src/components/ui/button/Options.vue

@@ -1,15 +1,10 @@
 <script setup lang="ts">
 import Button from '../Button.vue'
 
-interface Props {
+defineProps<{
   isSquare?: boolean
   isGhost?: boolean
-}
+}>()
-
-const props = withDefaults(defineProps<Props>(), {
-  isSquare: false,
-  isGhost: false
-})
 </script>
 
 <template>

front/src/composables/locale/useSharedLabels.ts

@@ -1,4 +1,5 @@
-import type { PrivacyLevel, ImportStatus } from '~/types'
+import type { ImportStatus } from '~/types'
+import type { components } from '~/generated/types'
 import type { ScopeId } from '~/composables/auth/useScopes'
 
 import { i18n } from '~/init/locale'
@@ -13,13 +14,15 @@ export default () => ({
       choices: {
         me: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.private'),
         instance: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.instance'),
+        followers: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.followers'),
         everyone: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.public')
-      } as Record<PrivacyLevel, string>,
+      } satisfies Record<components['schemas']['PrivacyLevelEnum'], string>,
       shortChoices: {
         me: t('composables.locale.useSharedLabels.fields.privacyLevel.shortChoices.private'),
         instance: t('composables.locale.useSharedLabels.fields.privacyLevel.shortChoices.instance'),
+        followers: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.followers'),
         everyone: t('composables.locale.useSharedLabels.fields.privacyLevel.shortChoices.public')
-      } as Record<PrivacyLevel, string>
+      } satisfies Record<components['schemas']['PrivacyLevelEnum'], string>
     },
     import_status: {
       label: t('composables.locale.useSharedLabels.fields.importStatus.label'),

front/src/composables/moderation/useEditConfigs.ts

@@ -16,7 +16,7 @@ export interface EditableConfigField extends ConfigField {
   id: EditObjectType
 }
 
-export type EditObject = (Partial<Artist> | Partial<Album> | Partial<Track>) & { attributed_to: Actor }
+export type EditObject = (Partial<Artist> | Partial<Album> | Partial<Track>) & { attributed_to?: Actor }
 export type EditObjectType = 'artist' | 'album' | 'track'
 type Configs = Record<EditObjectType, { fields: (EditableConfigField|ConfigField)[] }>
 

front/src/composables/width.ts

@@ -42,13 +42,15 @@ const styles = {
   ...widths, ...sizes
 } as const satisfies Record<Key, string | ((w: string) => string)>
 
-const getStyle = (props: Partial<WidthProps>) => (key: Key) =>
+const getStyle = (props: Partial<WidthProps>) => (key: Key):string =>
-  typeof styles[key] === 'function' && key in props
+  key in props
-    ? styles[key](
+    ? typeof styles[key] === 'function'
-      // @ts-expect-error Typescript is hard. Make the typescript compiler understand `key in props`
+      ? styles[key](
-      props[key]
+        // @ts-expect-error Typescript is hard. Make the typescript compiler understand `key in props`
-    )
+        props[key]
-    : styles[key]
+      )
+      : styles[key] as string
+    : ''
 
 // All keys are exclusive
 const conflicts: Set<Key>[] = [

front/src/init/axios.ts

@@ -5,7 +5,6 @@ import { parseAPIErrors } from '~/utils'
 import { i18n } from './locale'
 
 import createAuthRefreshInterceptor from 'axios-auth-refresh'
-import moment from 'moment'
 import axios from 'axios'
 
 import useLogger from '~/composables/useLogger'
@@ -61,23 +60,31 @@ export const install: InitModule = ({ store, router }) => {
         break
 
       case 429: {
-        let message
+        let message = ''
+
+        // TODO: Find out if the following fields are still relevant
         const rateLimitStatus: RateLimitStatus = {
           limit: error.response?.headers['x-ratelimit-limit'],
-          scope: error.response?.headers['x-ratelimit-scope'],
+          // scope: error.response?.headers['x-ratelimit-scope'],
           remaining: error.response?.headers['x-ratelimit-remaining'],
           duration: error.response?.headers['x-ratelimit-duration'],
-          availableSeconds: parseInt(error.response?.headers['retry-after'] ?? '60'),
+          // availableSeconds: parseInt(error.response?.headers['retry-after'] ?? '60'),
           reset: error.response?.headers['x-ratelimit-reset'],
-          resetSeconds: error.response?.headers['x-ratelimit-resetseconds']
+          // resetSeconds: error.response?.headers['x-ratelimit-resetseconds']
+          // The following fields were missing:
+          id: '',
+          rate: '',
+          description: '',
+          available: 0,
+          available_seconds: 0,
+          reset_seconds: 0
         }
 
-        if (rateLimitStatus.availableSeconds) {
+        message = t('init.axios.rateLimitLater')
-          const tryAgain = moment().add(rateLimitStatus.availableSeconds, 's').toNow(true)
+        // if (rateLimitStatus.availableSeconds) {
-          message = t('init.axios.rateLimitDelay', { delay: tryAgain })
+        //   const tryAgain = moment().add(rateLimitStatus.availableSeconds, 's').toNow(true)
-        } else {
+        //   message = t('init.axios.rateLimitDelay', { delay: tryAgain })
-          message = t('init.axios.rateLimitLater')
+        // }
-        }
 
         error.backendErrors.push(message)
         error.isHandled = true

front/src/locales/en_US.json

@@ -3017,6 +3017,7 @@
           "privacyLevel": {
             "choices": {
               "instance": "Everyone on this instance",
+              "followers": "My followers",
               "private": "Nobody except me",
               "public": "Everyone, across all instances"
             },
@@ -3024,7 +3025,8 @@
             "label": "Activity visibility",
             "shortChoices": {
               "instance": "Instance",
-              "private": "Private",
+              "followers": "Followers",
+              "private": "Nobody except me",
               "public": "Everyone"
             }
           },

front/src/ui/modals/Search.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { paths, components } from '~/generated/types.ts'
+import type { paths } from '~/generated/types.ts'
 import type { RadioConfig } from '~/store/radios'
 import axios from 'axios'
 import { ref, watch, computed } from 'vue'

front/src/ui/modals/Upload.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
-import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import { useModal } from '~/ui/composables/useModal.ts'
 
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
-import Alert from '~/components/ui/Alert.vue'
 import Card from '~/components/ui/Card.vue'
 
-import type { Actor, Channel, PrivacyLevel } from '~/types'
+import type { Channel, PrivacyLevel } from '~/types'
-import type { paths } from '~/generated/types'
-import axios from 'axios'
-import FileUploadWidget from '~/components/library/FileUploadWidget.vue'
-import type { VueUploadItem } from 'vue-upload-component'
 import ChannelUpload from '~/components/channels/UploadForm.vue'
 import LibraryUpload from '~/components/library/FileUpload.vue'
-import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 
 const { t } = useI18n()
 const store = useStore()

front/src/utils/utils.ts

@@ -1,4 +1,5 @@
-import type { Track, SimpleArtist, Album, ArtistCredit, QueueItemSource } from '~/types'
+import type { Track, Album, ArtistCredit, QueueItemSource } from '~/types'
+import type { components } from '~/generated/types'
 import { useStore } from '~/store'
 import type { QueueTrack } from '~/composables/audio/queue'
 
@@ -39,7 +40,7 @@ export function getArtistCoverUrl (artistCredits: ArtistCredit[]): string | unde
   return undefined
 }
 
-const getSimpleArtistCover = (artist: SimpleArtist) =>
+const getSimpleArtistCover = (artist: components['schemas']['SimpleChannelArtist'] | components['schemas']['Artist'] | components['schemas']['ArtistWithAlbums']) =>
   (field: 'original' | 'small_square_crop' | 'medium_square_crop' | 'large_square_crop') =>
     artist.cover
       ? (field in artist.cover ? artist.cover.urls[field] : null)
@@ -50,5 +51,5 @@ const getSimpleArtistCover = (artist: SimpleArtist) =>
  * @param artist: a simple artist
  * @param field: the size you want
 */
-export const getSimpleArtistCoverUrl = (artist: SimpleArtist, field: 'original' | 'small_square_crop' | 'medium_square_crop' | 'large_square_crop') =>
+export const getSimpleArtistCoverUrl = (artist: components['schemas']['SimpleChannelArtist'] | components['schemas']['Artist'] | components['schemas']['ArtistWithAlbums'], field: 'original' | 'small_square_crop' | 'medium_square_crop' | 'large_square_crop') =>
   store.getters['instance/absoluteUrl'](getSimpleArtistCover(artist)(field))

front/src/views/auth/Callback.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
 import { onMounted } from 'vue'
 
 interface Props {
@@ -12,6 +13,7 @@ const props = defineProps<Props>()
 
 const router = useRouter()
 const store = useStore()
+const { t } = useI18n()
 
 onMounted(async () => {
   await store.dispatch('auth/handleOauthCallback', props.code)

front/src/views/channels/DetailOverview.vue

@@ -57,7 +57,7 @@ const isOver = computed(() => pendingUploads.length === processedUploads.value.l
 const isSuccessfull = computed(() => pendingUploads.length === finishedUploads.value.length)
 
 watch(() => store.state.channels.latestPublication, (value) => {
-  if (value?.channel.uuid === props.object.uuid && value.uploads.length > 0) {
+  if (value?.channel.uuid === props.object.uuid && value?.uploads && value?.uploads.length > 0) {
     pendingUploads.push(...value.uploads)
   }
 })

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Library, PrivacyLevel } from '~/types'
 
-import { humanSize } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
@@ -24,7 +23,8 @@ const { t } = useI18n()
 
 const sharedLabels = useSharedLabels()
 
-const sizeLabel = computed(() => t('views.content.libraries.Card.label.size'))
+// TODO: Check if this is still needed:
+// const sizeLabel = computed(() => t('views.content.libraries.Card.label.size'))
 
 const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fields.privacy_level.choices[level].toLowerCase()}`
 </script>
@@ -59,10 +59,12 @@ const privacyTooltips = (level: PrivacyLevel) => `Visibility: ${sharedLabels.fie
         </span>
       </h4>
 
-      <div class="description">
+      <!-- TODO: Does library have a description? Its schema has not. -->
+      <!-- <div class="description">
         {{ library.description }}
         <div class="ui hidden divider" />
-      </div>
+      </div> -->
+
       <div class="content">
         <i class="music icon" />
         {{ t('views.content.libraries.Card.meta.tracks', library.uploads_count) }}

front/src/views/content/upload/Home.vue

@@ -1,20 +1,17 @@
 <script setup lang="ts">
 import { humanSize } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
-import { computed, ref, type Ref, defineAsyncComponent } from 'vue'
+import { computed, ref, type Ref } from 'vue'
 import { useStore } from '~/store'
 
 // LIBRARIES BEGIN
 
 import type { Library, Channel } from '~/types'
-import { useRouter } from 'vue-router'
 
 import axios from 'axios'
 
-import LibraryForm from '../libraries/Form.vue'
 import LibraryCard from '../libraries/CardUpload.vue'
 import ChannelCard from '../channels/CardUpload.vue'
-import Quota from '../libraries/Quota.vue'
 import Upload from '~/ui/pages/upload.vue'
 // import UploadModal from '~/ui/pages/upload.vue'
 // const ChannelUploadModal = defineAsyncComponent(() => import('~/components/channels/UploadModal.vue'))
@@ -25,8 +22,6 @@ import useErrorHandler from '~/composables/useErrorHandler'
 
 const { t } = useI18n()
 
-const router = useRouter()
-
 const libraries = ref([] as Library[])
 const channels = ref([] as Channel[])
 
@@ -69,9 +64,10 @@ const fetchChannels = async () => {
 fetchLibraries()
 fetchChannels()
 
-const libraryCreated = (library: Library) => {
+// TODO: Check if this is needed:
-  router.push({ name: 'library.detail', params: { id: library.uuid } })
+// const libraryCreated = (library: Library) => {
-}
+//   router.push({ name: 'library.detail', params: { id: library.uuid } })
+// }
 
 // LIBRARIES END
 
@@ -122,9 +118,11 @@ const openModal = (object_: Library | Channel) => {
         :title="'New Library'"
       />
 
+      <!-- TODO: Check what value `new` should be -->
       <library-card
         v-for="library in libraries"
         :key="library.uuid"
+        :new="false"
         :library="library"
       />
 

front/src/views/library/Upload.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Library } from '~/types'
 
 import { onBeforeRouteLeave } from 'vue-router'
@@ -15,8 +16,10 @@ interface Props {
   defaultImportReference?: string
 }
 
+const privacyLevel= computed(() => props.object.privacy_level)
+
 const emit = defineEmits<Events>()
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   defaultImportReference: ''
 })
 
@@ -39,6 +42,7 @@ onBeforeRouteLeave((to, from, next) => {
   <section>
     <file-upload
       ref="fileupload"
+      v-model="privacyLevel"
       :default-import-reference="defaultImportReference"
       :library="object"
       @uploads-finished="emit('uploads-finished', $event)"

front/src/views/playlists/Detail.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import type { PlaylistTrack, Playlist, Library } from '~/types'
+import type { PlaylistTrack, Playlist, Track } from '~/types'
 
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
 import { ref, computed } from 'vue'
 import { useStore } from '~/store'
-import { momentFormat } from '~/utils/filters'
 
 import axios from 'axios'
 
@@ -28,9 +26,10 @@ import PlaylistDropdown from '~/components/playlists/PlaylistDropdown.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
-interface Events {
+// TODO: Is this event ever caught somewhere?
-  (e: 'libraries-loaded', libraries: Library[]): void
+// interface Events {
-}
+//   (e: 'libraries-loaded', libraries: Library[]): void
+// }
 
 interface Props {
   id: number
@@ -42,7 +41,6 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const store = useStore()
-const router = useRouter()
 
 const edit = ref(props.defaultEdit)
 const playlist = ref<Playlist | null>(null)
@@ -50,7 +48,13 @@ const playlistTracks = ref<PlaylistTrack[]>([])
 
 const showEmbedModal = ref(false)
 
-const tracks = computed(() => playlistTracks.value.map(({ track }, index) => ({ ...track, position: index + 1 })))
+// TODO: Compute `tracks` with `track`. In the new types, `track` is just a string.
+// We probably have to load each track before loading it into `tracks`.
+// Original line: const tracks = computed(() => playlistTracks.value.map(({ track }, index) => ({ ...track, position: index + 1 })))
+const tracks = computed(() => playlistTracks.value.map(({ track }, index) => (
+  // @i-would-expect-ts-to-error because this typecasting is evil
+  { position: index + 1 } as Track
+)))
 
 const { t } = useI18n()
 const labels = computed(() => ({
@@ -108,20 +112,25 @@ function shuffleArray (array: string[]): string[] {
 
 const randomizedColors = computed(() => shuffleArray(bgcolors.value))
 
-const updatedTitle = computed(() => {
+// TODO: Check if this ref is still needed
-  const date = momentFormat(new Date(playlist.value.modification_date ?? '1970-01-01'))
+// const updatedTitle = computed(() => {
-  return t('components.audio.ChannelCard.title', { date })
+//   const date = momentFormat(new Date(playlist.value?.modification_date ?? '1970-01-01'))
-})
+//   return t('components.audio.ChannelCard.title', { date })
+// })
 
-const deletePlaylist = async () => {
+// TODO: Check if this function is still needed
-  try {
+// const deletePlaylist = async () => {
-    await axios.delete(`playlists/${props.id}/`)
+//   try {
-    store.dispatch('playlists/fetchOwn')
+//     await axios.delete(`playlists/${props.id}/`)
-    return router.push({ path: '/library' })
+//     store.dispatch('playlists/fetchOwn')
-  } catch (error) {
+//     return router.push({ path: '/library' })
-    useErrorHandler(error as Error)
+//   } catch (error) {
-  }
+//     useErrorHandler(error as Error)
-}
+//   }
+// }
+
+// TODO: Implement shuffle
+const shuffle = () => {}
 </script>
 
 <template>

front/vite.config.ts

@@ -12,8 +12,13 @@ import VueMacros from 'unplugin-vue-macros/vite'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
+
+// We don't use port but, magically, it is necessary to set it here.
 const port = +(process.env.VUE_PORT ?? 8080)
 
+// To prevent a linter warning, here is a partial Haiku:
+export const exPort = port
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
   envPrefix: ['VUE_', 'TAURI_', 'FUNKWHALE_SENTRY_'],