From de4f445e9b50d3bcfbed83742f58cbc8aae07cf9 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Sun, 10 Jul 2022 23:16:41 +0000
Subject: [PATCH] Fix up some tsc errors

---
 front/package.json                            |  26 +-
 front/src/components/RemoteSearchForm.vue     | 337 +++++++++---------
 front/src/components/audio/track/Modal.vue    |  90 +----
 front/src/components/channels/UploadModal.vue |   2 +-
 front/src/components/library/Albums.vue       |   8 +-
 front/src/components/library/Artists.vue      |   7 +-
 front/src/components/library/EditDetail.vue   |   4 +-
 .../components/library/FileUploadWidget.vue   |   4 +-
 front/src/components/library/Podcasts.vue     |   7 +-
 front/src/components/library/Radios.vue       |   8 +-
 front/src/components/manage/ChannelsTable.vue |  10 +-
 .../components/manage/library/AlbumsTable.vue |  10 +-
 .../manage/library/ArtistsTable.vue           |  10 +-
 .../manage/library/EditsCardList.vue          |  13 +-
 .../components/manage/library/TagsTable.vue   |  11 +-
 .../components/manage/library/TracksTable.vue |  10 +-
 .../manage/moderation/AccountsTable.vue       |  10 +-
 .../manage/moderation/DomainsTable.vue        |   7 +-
 .../manage/users/InvitationsTable.vue         |   7 +-
 .../components/manage/users/UsersTable.vue    |   7 +-
 .../components/playlists/PlaylistModal.vue    |   2 +-
 .../views/admin/moderation/ReportsList.vue    |  10 +-
 .../views/admin/moderation/RequestsList.vue   |  10 +-
 .../src/views/channels/SubscriptionsList.vue  | 113 +++---
 front/src/views/playlists/List.vue            |   7 +-
 front/src/views/radios/Detail.vue             |   2 +-
 front/yarn.lock                               | 254 ++++++-------
 27 files changed, 475 insertions(+), 511 deletions(-)

diff --git a/front/package.json b/front/package.json
index 400f93cd3..35b619b30 100644
--- a/front/package.json
+++ b/front/package.json
@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@vue/runtime-core": "^3.2.37",
-    "@vueuse/core": "8.7.5",
-    "@vueuse/integrations": "8.7.5",
+    "@vueuse/core": "8.9.1",
+    "@vueuse/integrations": "8.9.1",
     "axios": "0.27.2",
     "axios-auth-refresh": "3.3.1",
     "diff": "5.1.0",
@@ -30,7 +30,7 @@
     "howler": "2.2.3",
     "js-logger": "1.6.1",
     "lodash-es": "4.17.21",
-    "moment": "2.29.3",
+    "moment": "2.29.4",
     "pinia": "^2.0.13",
     "qs": "6.11.0",
     "register-service-worker": "1.7.2",
@@ -41,11 +41,11 @@
     "vue": "3.2.37",
     "vue-gettext": "2.1.12",
     "vue-plyr": "7.0.0",
-    "vue-router": "4.0.16",
-    "vue-tsc": "0.38.2",
+    "vue-router": "4.1.1",
+    "vue-tsc": "0.38.3",
     "vue-upload-component": "3.1.2",
     "vue3-gettext": "2.3.0",
-    "vue3-lazyload": "0.3.4",
+    "vue3-lazyload": "0.3.5",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "vuex-persistedstate": "4.1.0",
@@ -54,34 +54,34 @@
   "devDependencies": {
     "@types/dompurify": "^2.3.3",
     "@types/howler": "^2.2.7",
-    "@types/jest": "28.1.3",
+    "@types/jest": "28.1.4",
     "@types/jquery": "3.5.14",
     "@types/lodash-es": "4.17.6",
     "@types/qs": "6.9.7",
     "@types/showdown": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "5.30.0",
+    "@typescript-eslint/eslint-plugin": "5.30.5",
     "@vitejs/plugin-vue": "2.3.3",
     "@vue/compiler-sfc": "3.2.37",
     "@vue/eslint-config-standard": "7.0.0",
     "@vue/eslint-config-typescript": "11.0.0",
-    "@vue/test-utils": "2.0.0",
+    "@vue/test-utils": "2.0.2",
     "@vue/tsconfig": "^0.1.3",
     "chai": "4.3.6",
     "easygettext": "2.17.0",
-    "eslint": "8.18.0",
+    "eslint": "8.19.0",
     "eslint-config-standard": "17.0.0",
     "eslint-plugin-html": "6.2.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "6.0.0",
-    "eslint-plugin-vue": "9.1.1",
+    "eslint-plugin-vue": "9.2.0",
     "jest-cli": "28.1.2",
     "moxios": "0.4.0",
     "sinon": "14.0.0",
     "ts-jest": "28.0.5",
     "typescript": "4.7.4",
-    "vite": "2.9.13",
-    "vite-plugin-pwa": "0.12.0",
+    "vite": "2.9.14",
+    "vite-plugin-pwa": "0.12.3",
     "vue-jest": "3.0.7",
     "workbox-core": "6.5.3",
     "workbox-precaching": "6.5.3",
diff --git a/front/src/components/RemoteSearchForm.vue b/front/src/components/RemoteSearchForm.vue
index b0a2f3139..7847ca934 100644
--- a/front/src/components/RemoteSearchForm.vue
+++ b/front/src/components/RemoteSearchForm.vue
@@ -1,11 +1,171 @@
+<script setup lang="ts">
+import type { BackendError } from '~/types'
+
+import axios from 'axios'
+import { useStore } from '~/store'
+import { ref, computed, watch, watchEffect } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGettext } from 'vue3-gettext'
+
+type Type = 'rss' | 'artists' | 'both'
+
+interface Props {
+  initialId?: string
+  initialType?: Type
+  redirect?: boolean
+  showSubmit?: boolean
+  standalone?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialId: '',
+  initialType: 'artists',
+  redirect: true,
+  showSubmit: true,
+  standalone: true
+})
+
+const type = ref(props.initialType)
+const id = ref(props.initialId)
+const errors = ref([] as string[])
+
+
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  title: type.value === 'rss' 
+    ? $pgettext('Head/Fetch/Title', 'Subscribe to a podcast RSS feed')
+    : $pgettext('Head/Fetch/Title', 'Subscribe to a podcast hosted on the Fediverse'),
+  fieldLabel: type.value === 'rss' 
+    ? $pgettext('*/*/*', 'RSS feed location')
+    : $pgettext('*/*/*', 'Fediverse object'),
+  fieldPlaceholder: type.value === 'rss' 
+    ? $pgettext('Head/Fetch/Field.Placeholder', 'https://website.example.com/rss.xml')
+    : $pgettext('Head/Fetch/Field.Placeholder', '@username@example.com')
+}))
+
+const obj = ref()
+const objInfo = computed(() => obj.value?.status === 'finished' ? obj.value.object : null)
+const redirectRoute = computed(() => {
+  if (!objInfo.value) {
+    return null
+  }
+
+  switch (objInfo.value.type) {
+    case 'account': {
+      const [username, domain] = objInfo.value.full_username.split('@')
+      return { name: 'profile.full', params: { username, domain } }
+    }
+
+    case 'library':
+      return { name: 'library.detail', params: { id: objInfo.value.uuid } }
+
+    case 'artist':
+      return { name: 'library.artists.detail', params: { id: objInfo.value.id } }
+
+    case 'album':
+      return { name: 'library.albums.detail', params: { id: objInfo.value.id } }
+
+    case 'track':
+      return { name: 'library.tracks.detail', params: { id: objInfo.value.id } }
+
+    case 'upload':
+      return { name: 'library.uploads.detail', params: { id: objInfo.value.uuid } }
+
+    case 'channel':
+      return { name: 'channels.detail', params: { id: objInfo.value.uuid } }
+  }
+
+  return null
+})
+
+const router = useRouter()
+watch(redirectRoute, () => {
+  if (props.redirect && redirectRoute.value) {
+    return router.push(redirectRoute.value)
+  }
+})
+
+const submit = () => {
+  if (type.value === 'rss') {
+    return rssSubscribe()
+  }
+
+  return createFetch()
+}
+
+const isLoading = ref(false)
+const createFetch = async () => {
+  if (!id.value) return
+  if (props.standalone) {
+    // TODO (wvffle): Check if this needs to be handled
+    return router.replace({ name: 'search', query: { id: id.value } })
+  }
+
+  obj.value = undefined
+  errors.value = []
+  isLoading.value = true
+
+  try {
+    const response = await axios.post('federation/fetches/', { object: id.value })
+    obj.value = response.data
+
+    if (response.data.status === 'errored' || response.data.status === 'skipped') {
+      errors.value.push($pgettext('Content/*/Error message.Title', 'This object cannot be retrieved'))
+    }
+  } catch (error) {
+    errors.value = (error as BackendError).backendErrors
+  }
+
+  isLoading.value = false
+}
+
+const emit = defineEmits(['subscribed'])
+const store = useStore()
+
+const rssSubscribe = async () => {
+  if (!id.value) return
+  if (props.standalone) {
+    // TODO (wvffle): Check if this needs to be handled
+    return router.replace({ name: 'search', query: { id: id.value, type: 'rss' } })
+  }
+
+  obj.value = undefined
+  errors.value = []
+  isLoading.value = true
+
+  try {
+    const response = await axios.post('channels/rss-subscribe/', { url: id.value })
+    store.commit('channels/subscriptions', { uuid: response.data.channel.uuid, value: true })
+    emit('subscribed', response.data)
+
+    if (props.redirect) {
+      return router.push({ name: 'channels.detail', params: { id: response.data.channel.uuid } })
+    }
+  } catch (error) {
+    errors.value = (error as BackendError).backendErrors
+  }
+
+  isLoading.value = false
+}
+
+watchEffect(() => {
+  id.value = props.initialId
+  // createFetch()
+
+  if (id.value) {
+    submit()
+  }
+})
+</script>
+
 <template>
   <div
-    v-if="type === 'both' || type === undefined"
+    v-if="type === 'both'"
     class="two ui buttons"
   >
     <button
       class="ui left floated labeled icon button"
-      @click.prevent="changeType('rss')"
+      @click.prevent="type = 'rss'"
     >
       <i class="feed icon" />
       <translate translate-context="Content/Search/Input.Label/Noun">
@@ -15,7 +175,7 @@
     <div class="or" />
     <button
       class="ui right floated right labeled icon button"
-      @click.prevent="changeType('artists')"
+      @click.prevent="type = 'artists'"
     >
       <i class="globe icon" />
       <translate translate-context="Content/Search/Input.Label/Noun">
@@ -75,7 +235,7 @@
         v-if="showSubmit"
         type="submit"
         :class="['ui', 'primary', {loading: isLoading}, 'button']"
-        :disabled="isLoading || !id || id.length === 0 || null"
+        :disabled="isLoading || !id || id.length === 0"
       >
         <translate translate-context="Content/Search/Input.Label/Noun">
           Search
@@ -83,7 +243,7 @@
       </button>
     </form>
     <div
-      v-if="!isLoading && fetch && fetch.status === 'finished' && !redirectRoute"
+      v-if="!isLoading && obj?.status === 'finished' && !redirectRoute"
       role="alert"
       class="ui warning message"
     >
@@ -95,170 +255,3 @@
     </div>
   </div>
 </template>
-<script>
-import axios from 'axios'
-
-export default {
-  props: {
-    initialId: { type: String, required: false, default: '' },
-    initialType: { type: String, required: false, default: '' },
-    redirect: { type: Boolean, default: true },
-    showSubmit: { type: Boolean, default: true },
-    standalone: { type: Boolean, default: true }
-  },
-
-  data () {
-    return {
-      type: this.initialType,
-      id: this.initialId,
-      fetch: null,
-      obj: null,
-      isLoading: false,
-      errors: []
-    }
-  },
-  computed: {
-    labels () {
-      let title = ''
-      let fieldLabel = ''
-      let fieldPlaceholder = ''
-      if (this.type === 'rss') {
-        title = this.$pgettext('Head/Fetch/Title', 'Subscribe to a podcast RSS feed')
-        fieldLabel = this.$pgettext('*/*/*', 'RSS feed location')
-        fieldPlaceholder = this.$pgettext('Head/Fetch/Field.Placeholder', 'https://website.example.com/rss.xml')
-      } else if (this.type === 'artists') {
-        title = this.$pgettext('Head/Fetch/Title', 'Subscribe to a podcast hosted on the Fediverse')
-        fieldLabel = this.$pgettext('*/*/*', 'Fediverse object')
-        fieldPlaceholder = this.$pgettext('Head/Fetch/Field.Placeholder', '@username@example.com')
-      }
-      return {
-        title,
-        fieldLabel,
-        fieldPlaceholder
-      }
-    },
-    objInfo () {
-      if (this.fetch && this.fetch.status === 'finished') {
-        return this.fetch.object
-      }
-      return null
-    },
-    redirectRoute () {
-      if (!this.objInfo) {
-        return
-      }
-      switch (this.objInfo.type) {
-        case 'account': {
-          const [username, domain] = this.objInfo.full_username.split('@')
-          return { name: 'profile.full', params: { username, domain } }
-        }
-        case 'library':
-          return { name: 'library.detail', params: { id: this.objInfo.uuid } }
-        case 'artist':
-          return { name: 'library.artists.detail', params: { id: this.objInfo.id } }
-        case 'album':
-          return { name: 'library.albums.detail', params: { id: this.objInfo.id } }
-        case 'track':
-          return { name: 'library.tracks.detail', params: { id: this.objInfo.id } }
-        case 'upload':
-          return { name: 'library.uploads.detail', params: { id: this.objInfo.uuid } }
-        case 'channel':
-          return { name: 'channels.detail', params: { id: this.objInfo.uuid } }
-
-        default:
-          break
-      }
-      return null
-    }
-  },
-
-  watch: {
-    initialId (v) {
-      this.id = v
-      this.createFetch()
-    },
-    redirectRoute (v) {
-      if (v && this.redirect) {
-        this.$router.push(v)
-      }
-    }
-  },
-  created () {
-    if (this.id) {
-      if (this.type === 'rss') {
-        this.rssSubscribe()
-      } else if (this.type === 'artists') {
-        this.createFetch()
-      }
-    }
-  },
-
-  methods: {
-    changeType (newType) {
-      this.type = newType
-    },
-    submit () {
-      if (this.type === 'rss') {
-        return this.rssSubscribe()
-      } else {
-        return this.createFetch()
-      }
-    },
-    createFetch () {
-      if (!this.id) {
-        return
-      }
-      if (this.standalone) {
-        this.$router.replace({ name: 'search', query: { id: this.id } })
-      }
-      this.fetch = null
-      const self = this
-      self.errors = []
-      self.isLoading = true
-      const payload = {
-        object: this.id
-      }
-
-      axios.post('federation/fetches/', payload).then((response) => {
-        self.isLoading = false
-        self.fetch = response.data
-        if (self.fetch.status === 'errored' || self.fetch.status === 'skipped') {
-          self.errors.push(
-            self.$pgettext('Content/*/Error message.Title', 'This object cannot be retrieved')
-          )
-        }
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    },
-    rssSubscribe () {
-      if (!this.id) {
-        return
-      }
-      if (this.standalone) {
-        this.$router.replace({ name: 'search', query: { id: this.id, type: 'rss' } })
-      }
-      this.fetch = null
-      const self = this
-      self.errors = []
-      self.isLoading = true
-      const payload = {
-        url: this.id
-      }
-
-      axios.post('channels/rss-subscribe/', payload).then((response) => {
-        self.isLoading = false
-        self.$store.commit('channels/subscriptions', { uuid: response.data.channel.uuid, value: true })
-        self.$emit('subscribed', response.data)
-        if (self.redirect) {
-          self.$router.push({ name: 'channels.detail', params: { id: response.data.channel.uuid } })
-        }
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    }
-  }
-}
-</script>
diff --git a/front/src/components/audio/track/Modal.vue b/front/src/components/audio/track/Modal.vue
index af23d6460..aba30d08c 100644
--- a/front/src/components/audio/track/Modal.vue
+++ b/front/src/components/audio/track/Modal.vue
@@ -86,24 +86,14 @@ const labels = computed(() => ({
     <div class="header">
       <div class="ui large centered rounded image">
         <img
-          v-if="
-            track.album && track.album.cover && track.album.cover.urls.original
-          "
-          v-lazy="
-            $store.getters['instance/absoluteUrl'](
-              track.album.cover.urls.medium_square_crop
-            )
-          "
+          v-if="track.album?.cover?.urls.original"
+          v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
           alt=""
           class="ui centered image"
         >
         <img
           v-else-if="track.cover"
-          v-lazy="
-            $store.getters['instance/absoluteUrl'](
-              track.cover.urls.medium_square_crop
-            )
-          "
+          v-lazy="$store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
           alt=""
           class="ui centered image"
         >
@@ -141,17 +131,7 @@ const labels = computed(() => ({
             :aria-label="favoriteButton"
             @click.stop="$store.dispatch('favorites/toggle', track.id)"
           >
-            <i
-              :class="[
-                'heart',
-                'favorite-icon',
-                { favorited: isFavorite },
-                { pink: isFavorite },
-                'icon',
-                'track-modal',
-                'list-icon',
-              ]"
-            />
+            <i :class="[ 'heart', 'favorite-icon', { favorited: isFavorite, pink: isFavorite }, 'icon', 'track-modal', 'list-icon' ]" />
             <span class="track-modal list-item">{{ favoriteButton }}</span>
           </div>
         </div>
@@ -160,10 +140,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.addToQueue"
-            @click.stop.prevent="
-              enqueue();
-              modal.closeModal();
-            "
+            @click.stop.prevent="enqueue(); modal.closeModal()"
           >
             <i class="plus icon track-modal list-icon" />
             <span class="track-modal list-item">{{ labels.addToQueue }}</span>
@@ -174,10 +151,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.playNext"
-            @click.stop.prevent="
-              enqueueNext(true);
-              modal.closeModal();
-            "
+            @click.stop.prevent="enqueueNext(true);modal.closeModal()"
           >
             <i class="step forward icon track-modal list-icon" />
             <span class="track-modal list-item">{{ labels.playNext }}</span>
@@ -188,13 +162,7 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="labels.startRadio"
-            @click.stop.prevent="
-              $store.dispatch('radios/start', {
-                type: 'similar',
-                objectId: track.id,
-              });
-              modal.closeModal();
-            "
+            @click.stop.prevent="() => { $store.dispatch('radios/start', { type: 'similar', objectId: track.id }); modal.closeModal() }"
           >
             <i class="rss icon track-modal list-icon" />
             <span class="track-modal list-item">{{ labels.startRadio }}</span>
@@ -208,9 +176,9 @@ const labels = computed(() => ({
             @click.stop="$store.commit('playlists/chooseTrack', track)"
           >
             <i class="list icon track-modal list-icon" />
-            <span class="track-modal list-item">{{
-              labels.addToPlaylist
-            }}</span>
+            <span class="track-modal list-item">
+              {{ labels.addToPlaylist }}
+            </span>
           </div>
         </div>
         <div class="ui divider" />
@@ -222,17 +190,10 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="albumDetailsButton"
-            @click.prevent.exact="
-              $router.push({
-                name: 'library.albums.detail',
-                params: { id: track.album?.id },
-              })
-            "
+            @click.prevent.exact="$router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
           >
             <i class="compact disc icon track-modal list-icon" />
-            <span class="track-modal list-item">{{
-              albumDetailsButton
-            }}</span>
+            <span class="track-modal list-item">{{ albumDetailsButton }}</span>
           </div>
         </div>
         <div
@@ -243,17 +204,10 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="artistDetailsButton"
-            @click.prevent.exact="
-              $router.push({
-                name: 'library.artists.detail',
-                params: { id: track.artist?.id },
-              })
-            "
+            @click.prevent.exact="$router.push({ name: 'library.artists.detail', params: { id: track.artist?.id } })"
           >
             <i class="user icon track-modal list-icon" />
-            <span class="track-modal list-item">{{
-              artistDetailsButton
-            }}</span>
+            <span class="track-modal list-item">{{ artistDetailsButton }}</span>
           </div>
         </div>
         <div class="row">
@@ -261,17 +215,10 @@ const labels = computed(() => ({
             class="column"
             role="button"
             :aria-label="trackDetailsButton"
-            @click.prevent.exact="
-              $router.push({
-                name: 'library.tracks.detail',
-                params: { id: track.id },
-              })
-            "
+            @click.prevent.exact="$router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
           >
             <i class="info icon track-modal list-icon" />
-            <span class="track-modal list-item">{{
-              trackDetailsButton
-            }}</span>
+            <span class="track-modal list-item">{{ trackDetailsButton }}</span>
           </div>
         </div>
         <div class="ui divider" />
@@ -284,9 +231,8 @@ const labels = computed(() => ({
           @click.stop.prevent="report(obj)"
         >
           <div class="column">
-            <i class="share icon track-modal list-icon" /><span
-              class="track-modal list-item"
-            >{{ obj.label }}</span>
+            <i class="share icon track-modal list-icon" />
+            <span class="track-modal list-item">{{ obj.label }}</span>
           </div>
         </div>
       </div>
diff --git a/front/src/components/channels/UploadModal.vue b/front/src/components/channels/UploadModal.vue
index 5c7ff5b64..0a0cfcc8c 100644
--- a/front/src/components/channels/UploadModal.vue
+++ b/front/src/components/channels/UploadModal.vue
@@ -99,7 +99,7 @@ const isLoading = ref(false)
           <translate translate-context="Content/Library/Paragraph">
             Remaining storage space:
           </translate>
-          {{ (statusData.quotaStatus.remaining * 1000 * 1000) - humanSize(statusData.uploadedSize) }}
+          {{ humanSize((statusData.quotaStatus.remaining - statusData.uploadedSize) * 1000 * 1000) }}
         </template>
       </div>
       <div class="ui hidden clearing divider mobile-only" />
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 6a2e784d7..21643e481 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+
 import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { OrderingField } from '~/store/ui'
-
 import AlbumCard from '~/components/audio/album/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
 import { useStore } from '~/store'
 
 interface Props extends OrderingProps {
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index a89768f8c..f00f66e2e 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+
 import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
@@ -9,11 +11,10 @@ import Pagination from '~/components/vui/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import { OrderingField } from '~/store/ui'
 import { computed, reactive, ref, watch, onMounted } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
 
 interface Props extends OrderingProps {
diff --git a/front/src/components/library/EditDetail.vue b/front/src/components/library/EditDetail.vue
index 83d8e8bb7..1618e2737 100644
--- a/front/src/components/library/EditDetail.vue
+++ b/front/src/components/library/EditDetail.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { EditObject, EditObjectType } from '~/composables/moderation/useEditConfigs'
+
 import axios from 'axios'
-import useEditConfigs, { EditObject, EditObjectType } from '~/composables/moderation/useEditConfigs'
+import useEditConfigs from '~/composables/moderation/useEditConfigs'
 import EditCard from '~/components/library/EditCard.vue'
 import { computed, ref } from 'vue'
 
diff --git a/front/src/components/library/FileUploadWidget.vue b/front/src/components/library/FileUploadWidget.vue
index 44ba86b48..a8e5d279b 100644
--- a/front/src/components/library/FileUploadWidget.vue
+++ b/front/src/components/library/FileUploadWidget.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import FileUpload, { VueUploadItem } from 'vue-upload-component'
+import type { VueUploadItem } from 'vue-upload-component'
+
+import FileUpload from 'vue-upload-component'
 import { getCookie } from '~/utils'
 import { computed, getCurrentInstance } from 'vue'
 import { useStore } from '~/store'
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index a556966f7..0e1ca5ff7 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+
 import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
@@ -11,9 +13,8 @@ import Modal from '~/components/semantic/Modal.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import { OrderingField } from '~/store/ui'
 import { computed, reactive, ref, watch, onMounted } from 'vue'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index e3519ca65..c378ed025 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+
 import axios from 'axios'
 import $ from 'jquery'
-
 import RadioCard from '~/components/radios/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import useLogger from '~/composables/useLogger'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import { OrderingField } from '~/store/ui'
 import { computed, ref, watch, onMounted } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends OrderingProps {
   defaultPage?: number
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index 0d470b49a..824d0a131 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, 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 { OrderingField } from '~/store/ui'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 81bec6fc7..8cda94936 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, 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 useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import { OrderingField } from '~/store/ui'
+import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index ace92cbd3..fa6de0935 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+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'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
-import { OrderingField } from '~/store/ui'
+import useOrdering from '~/composables/useOrdering'
+import useSmartSearch from '~/composables/useSmartSearch'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index ce7722945..604483953 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/front/src/components/manage/library/EditsCardList.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+import type { SmartSearchProps } from '~/composables/useSmartSearch'
+import type { EditObjectType } from '~/composables/moderation/useEditConfigs'
+
 import axios from 'axios'
 import { uniq } from 'lodash-es'
 import Pagination from '~/components/vui/Pagination.vue'
 import EditCard from '~/components/library/EditCard.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, reactive, watch, computed } from 'vue'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
-import { OrderingField } from '~/store/ui'
-import useEditConfigs, { EditObjectType } from '~/composables/moderation/useEditConfigs'
+import useOrdering from '~/composables/useOrdering'
+import useSmartSearch from '~/composables/useSmartSearch'
+import useEditConfigs from '~/composables/moderation/useEditConfigs'
 import { useGettext } from 'vue3-gettext'
 
 interface Props extends SmartSearchProps, OrderingProps {
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index 79f4dadeb..a3dedd64d 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-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 ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import { truncate } from '~/utils/filters'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import { OrderingField } from '~/store/ui'
+import useSmartSearch from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 073453f34..e1207b358 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+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'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
-import { OrderingField } from '~/store/ui'
+import useOrdering from '~/composables/useOrdering'
+import useSmartSearch from '~/composables/useSmartSearch'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 52ac265c9..b3f6ac5e7 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+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'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { ref, computed, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
-import { OrderingField } from '~/store/ui'
+import useOrdering from '~/composables/useOrdering'
+import useSmartSearch from '~/composables/useSmartSearch'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find object type
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index 4b9a9bc43..e496442f7 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/front/src/components/manage/moderation/DomainsTable.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+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 useOrdering, { OrderingProps } from '~/composables/useOrdering'
+import useOrdering from '~/composables/useOrdering'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { OrderingField } from '~/store/ui'
 import { watchDebounced } from '@vueuse/core'
 
 interface Props extends OrderingProps {
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index 9f367fcce..6c901cee6 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/front/src/components/manage/users/InvitationsTable.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+
 import axios from 'axios'
 import moment from 'moment'
 import Pagination from '~/components/vui/Pagination.vue'
@@ -8,8 +10,7 @@ import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { computed, ref, watch } from 'vue'
 import { watchDebounced } from '@vueuse/core'
 import { useGettext } from 'vue3-gettext'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import { OrderingField } from '~/store/ui'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends OrderingProps {
   // TODO (wvffle): find object type
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index 0a335c7b2..0191f927b 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/front/src/components/manage/users/UsersTable.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+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 { computed, ref, watch } from 'vue'
 import { watchDebounced } from '@vueuse/core'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import { OrderingField } from '~/store/ui'
+import useOrdering from '~/composables/useOrdering'
 import { useGettext } from 'vue3-gettext'
 
 interface Props extends OrderingProps {
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 76f7813e1..27c0b6ab9 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -92,7 +92,7 @@ const addToPlaylist = async (playlistId: number, allowDuplicates: boolean) => {
             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}"
+            :translate-params="{artist: track.artist?.name, title: track.title}"
           >
             "%{ title }", by %{ artist }
           </div>
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index 35fe62da2..526860ba8 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/front/src/views/admin/moderation/ReportsList.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+import type { SmartSearchProps } from '~/composables/useSmartSearch'
+
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import ReportCard from '~/components/manage/moderation/ReportCard.vue'
@@ -8,9 +11,8 @@ import useSharedLabels from '~/composables/locale/useSharedLabels'
 import { useStore } from '~/store'
 import { computed, ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
-import { OrderingField } from '~/store/ui'
+import useOrdering from '~/composables/useOrdering'
+import useSmartSearch from '~/composables/useSmartSearch'
 
 interface Props extends SmartSearchProps, OrderingProps {
   // TODO (wvffle): find more types
diff --git a/front/src/views/admin/moderation/RequestsList.vue b/front/src/views/admin/moderation/RequestsList.vue
index 0afb1aa73..07eb2c088 100644
--- a/front/src/views/admin/moderation/RequestsList.vue
+++ b/front/src/views/admin/moderation/RequestsList.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+import type { SmartSearchProps } from '~/composables/useSmartSearch'
+
 import axios from 'axios'
 import Pagination from '~/components/vui/Pagination.vue'
 import UserRequestCard from '~/components/manage/moderation/UserRequestCard.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import useSmartSearch, { SmartSearchProps } from '~/composables/useSmartSearch'
+import useOrdering from '~/composables/useOrdering'
+import useSmartSearch from '~/composables/useSmartSearch'
 import { ref, computed, watch } from 'vue'
-import { OrderingField } from '~/store/ui'
 import { useGettext } from 'vue3-gettext'
 import { useStore } from '~/store'
 
diff --git a/front/src/views/channels/SubscriptionsList.vue b/front/src/views/channels/SubscriptionsList.vue
index ebbf2b135..f114731bb 100644
--- a/front/src/views/channels/SubscriptionsList.vue
+++ b/front/src/views/channels/SubscriptionsList.vue
@@ -1,3 +1,55 @@
+<script setup lang="ts">
+import type { Channel } from '~/types'
+import axios from 'axios'
+import SemanticModal from '~/components/semantic/Modal.vue'
+import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
+import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
+import { ref, computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+interface Props {
+  defaultQuery?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultQuery: ''
+})
+
+const query = ref(props.defaultQuery)
+const widgetKey = ref(new Date().toLocaleString())
+
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  title: $pgettext('Content/Subscriptions/Header', 'Subscribed Channels'),
+  searchPlaceholder: $pgettext('Content/Subscriptions/Form.Placeholder', 'Filter by name…')
+}))
+
+const previousPage = ref()
+const nextPage = ref()
+const channels = ref([] as Channel[])
+const count = ref(0)
+const isLoading = ref(false)
+const fetchData = async () => {
+  isLoading.value = true
+
+  try {
+    const response = await axios.get('channels/', { params: { subscribed: 'true', q: query.value } })
+    previousPage.value = response.data.previous
+    nextPage.value = response.data.next
+    channels.value.push(...response.data.results)
+    count.value = response.data.count
+  } catch (error) {
+    // TODO (wvffle): Handle error
+  }
+
+  isLoading.value = false
+}
+fetchData()
+
+const reloadWidget = () => (widgetKey.value = new Date().toLocaleString())
+const showSubscribeModal = ref(false)
+</script>
+
 <template>
   <main
     v-title="labels.title"
@@ -13,7 +65,7 @@
           </a>
         </div>
       </h1>
-      <modal
+      <semantic-modal
         v-model:show="showSubscribeModal"
         class="tiny"
         :fullscreen="false"
@@ -52,7 +104,7 @@
             </translate>
           </button>
         </div>
-      </modal>
+      </semantic-modal>
 
       <inline-search-bar
         v-model="query"
@@ -68,60 +120,3 @@
     </section>
   </main>
 </template>
-
-<script>
-import axios from 'axios'
-import Modal from '~/components/semantic/Modal.vue'
-
-import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
-import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
-
-export default {
-  components: {
-    ChannelsWidget,
-    RemoteSearchForm,
-    Modal
-  },
-  props: { defaultQuery: { type: String, required: false, default: '' } },
-  data () {
-    return {
-      query: this.defaultQuery || '',
-      channels: [],
-      count: 0,
-      isLoading: false,
-      errors: null,
-      previousPage: null,
-      nextPage: null,
-      widgetKey: String(new Date()),
-      showSubscribeModal: false
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        title: this.$pgettext('Content/Subscriptions/Header', 'Subscribed Channels'),
-        searchPlaceholder: this.$pgettext('Content/Subscriptions/Form.Placeholder', 'Filter by name…')
-      }
-    }
-  },
-  created () {
-    this.fetchData()
-  },
-  methods: {
-    fetchData () {
-      const self = this
-      this.isLoading = true
-      axios.get('channels/', { params: { subscribed: 'true', q: this.query } }).then(response => {
-        self.previousPage = response.data.previous
-        self.nextPage = response.data.next
-        self.isLoading = false
-        self.channels = [...self.channels, ...response.data.results]
-        self.count = response.data.count
-      })
-    },
-    reloadWidget () {
-      this.widgetKey = String(new Date())
-    }
-  }
-}
-</script>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 5c0a47f9a..2657a8060 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { RouteWithPreferences } from '~/store/ui'
+import type { RouteWithPreferences, OrderingField } from '~/store/ui'
+import type { OrderingProps } from '~/composables/useOrdering'
+
 import axios from 'axios'
 import $ from 'jquery'
 import { computed, ref, watch, onMounted } from 'vue'
@@ -10,8 +12,7 @@ import PlaylistCardList from '~/components/playlists/CardList.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useLogger from '~/composables/useLogger'
-import useOrdering, { OrderingProps } from '~/composables/useOrdering'
-import { OrderingField } from '~/store/ui'
+import useOrdering from '~/composables/useOrdering'
 
 interface Props extends OrderingProps {
   defaultPage?: number
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 97bb16e90..f6732f373 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -148,7 +148,7 @@ const deleteRadio = async () => {
       </div>
     </section>
     <div
-      v-else-if="!isLoading && !totalTracks > 0"
+      v-else-if="!isLoading && totalTracks === 0"
       class="ui placeholder segment"
     >
       <div class="ui icon header">
diff --git a/front/yarn.lock b/front/yarn.lock
index 1edb9d9a7..1b3f9174e 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1414,10 +1414,10 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.3.tgz#52f3f3e50ce59191ff5fbb1084896cc0cf30c9ce"
-  integrity sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==
+"@types/jest@28.1.4":
+  version "28.1.4"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.4.tgz#a11ee6c8fd0b52c19c9c18138b78bbcc201dad5a"
+  integrity sha512-telv6G5N7zRJiLcI3Rs3o+ipZ28EnE+7EvF0pSrt2pZOMnAVI/f+6/LucDxOvcBcTeTL3JMF744BbVQAVBUQRA==
   dependencies:
     jest-matcher-utils "^28.0.0"
     pretty-format "^28.0.0"
@@ -1535,14 +1535,14 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.0.tgz#524a11e15c09701733033c96943ecf33f55d9ca1"
-  integrity sha512-lvhRJ2pGe2V9MEU46ELTdiHgiAFZPKtLhiU5wlnaYpMc2+c1R8fh8i80ZAa665drvjHKUJyRRGg3gEm1If54ow==
+"@typescript-eslint/eslint-plugin@5.30.5":
+  version "5.30.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.5.tgz#e9a0afd6eb3b1d663db91cf1e7bc7584d394503d"
+  integrity sha512-lftkqRoBvc28VFXEoRgyZuztyVUQ04JvUnATSPtIRFAccbXTWL6DEtXGYMcbg998kXw1NLUJm7rTQ9eUt+q6Ig==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.30.0"
-    "@typescript-eslint/type-utils" "5.30.0"
-    "@typescript-eslint/utils" "5.30.0"
+    "@typescript-eslint/scope-manager" "5.30.5"
+    "@typescript-eslint/type-utils" "5.30.5"
+    "@typescript-eslint/utils" "5.30.5"
     debug "^4.3.4"
     functional-red-black-tree "^1.0.1"
     ignore "^5.2.0"
@@ -1575,13 +1575,13 @@
     "@typescript-eslint/typescript-estree" "5.36.2"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.0.tgz#bf585ee801ab4ad84db2f840174e171a6bb002c7"
-  integrity sha512-3TZxvlQcK5fhTBw5solQucWSJvonXf5yua5nx8OqK94hxdrT7/6W3/CS42MLd/f1BmlmmbGEgQcTHHCktUX5bQ==
+"@typescript-eslint/scope-manager@5.30.5":
+  version "5.30.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz#7f90b9d6800552c856a5f3644f5e55dd1469d964"
+  integrity sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==
   dependencies:
-    "@typescript-eslint/types" "5.30.0"
-    "@typescript-eslint/visitor-keys" "5.30.0"
+    "@typescript-eslint/types" "5.30.5"
+    "@typescript-eslint/visitor-keys" "5.30.5"
 
 "@typescript-eslint/scope-manager@5.36.2":
   version "5.36.2"
@@ -1591,12 +1591,12 @@
     "@typescript-eslint/types" "5.36.2"
     "@typescript-eslint/visitor-keys" "5.36.2"
 
-"@typescript-eslint/type-utils@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.30.0.tgz#98f3af926a5099153f092d4dad87148df21fbaae"
-  integrity sha512-GF8JZbZqSS+azehzlv/lmQQ3EU3VfWYzCczdZjJRxSEeXDQkqFhCBgFhallLDbPwQOEQ4MHpiPfkjKk7zlmeNg==
+"@typescript-eslint/type-utils@5.30.5":
+  version "5.30.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.30.5.tgz#7a9656f360b4b1daea635c4621dab053d08bf8a9"
+  integrity sha512-k9+ejlv1GgwN1nN7XjVtyCgE0BTzhzT1YsQF0rv4Vfj2U9xnslBgMYYvcEYAFVdvhuEscELJsB7lDkN7WusErw==
   dependencies:
-    "@typescript-eslint/utils" "5.30.0"
+    "@typescript-eslint/utils" "5.30.5"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
@@ -1610,23 +1610,23 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.0.tgz#db7d81d585a3da3801432a9c1d2fafbff125e110"
-  integrity sha512-vfqcBrsRNWw/LBXyncMF/KrUTYYzzygCSsVqlZ1qGu1QtGs6vMkt3US0VNSQ05grXi5Yadp3qv5XZdYLjpp8ag==
+"@typescript-eslint/types@5.30.5":
+  version "5.30.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.5.tgz#36a0c05a72af3623cdf9ee8b81ea743b7de75a98"
+  integrity sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==
 
 "@typescript-eslint/types@5.36.2":
   version "5.36.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.2.tgz#a5066e500ebcfcee36694186ccc57b955c05faf9"
   integrity sha512-9OJSvvwuF1L5eS2EQgFUbECb99F0mwq501w0H0EkYULkhFa19Qq7WFbycdw1PexAc929asupbZcgjVIe6OK/XQ==
 
-"@typescript-eslint/typescript-estree@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.0.tgz#4565ee8a6d2ac368996e20b2344ea0eab1a8f0bb"
-  integrity sha512-hDEawogreZB4n1zoqcrrtg/wPyyiCxmhPLpZ6kmWfKF5M5G0clRLaEexpuWr31fZ42F96SlD/5xCt1bT5Qm4Nw==
+"@typescript-eslint/typescript-estree@5.30.5":
+  version "5.30.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz#c520e4eba20551c4ec76af8d344a42eb6c9767bb"
+  integrity sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==
   dependencies:
-    "@typescript-eslint/types" "5.30.0"
-    "@typescript-eslint/visitor-keys" "5.30.0"
+    "@typescript-eslint/types" "5.30.5"
+    "@typescript-eslint/visitor-keys" "5.30.5"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -1646,15 +1646,15 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.0.tgz#1dac771fead5eab40d31860716de219356f5f754"
-  integrity sha512-0bIgOgZflLKIcZsWvfklsaQTM3ZUbmtH0rJ1hKyV3raoUYyeZwcjQ8ZUJTzS7KnhNcsVT1Rxs7zeeMHEhGlltw==
+"@typescript-eslint/utils@5.30.5":
+  version "5.30.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.5.tgz#3999cbd06baad31b9e60d084f20714d1b2776765"
+  integrity sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.30.0"
-    "@typescript-eslint/types" "5.30.0"
-    "@typescript-eslint/typescript-estree" "5.30.0"
+    "@typescript-eslint/scope-manager" "5.30.5"
+    "@typescript-eslint/types" "5.30.5"
+    "@typescript-eslint/typescript-estree" "5.30.5"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
@@ -1670,12 +1670,12 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/visitor-keys@5.30.0":
-  version "5.30.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.0.tgz#07721d23daca2ec4c2da7f1e660d41cd78bacac3"
-  integrity sha512-6WcIeRk2DQ3pHKxU1Ni0qMXJkjO/zLjBymlYBy/53qxe7yjEFSvzKLDToJjURUhSl2Fzhkl4SMXQoETauF74cw==
+"@typescript-eslint/visitor-keys@5.30.5":
+  version "5.30.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz#d4bb969202019d5d5d849a0aaedc7370cc044b14"
+  integrity sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==
   dependencies:
-    "@typescript-eslint/types" "5.30.0"
+    "@typescript-eslint/types" "5.30.5"
     eslint-visitor-keys "^3.3.0"
 
 "@typescript-eslint/visitor-keys@5.36.2":
@@ -1691,37 +1691,37 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz#fbf80cc039b82ac21a1acb0f0478de8f61fbf600"
   integrity sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==
 
-"@volar/code-gen@0.38.2":
-  version "0.38.2"
-  resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.38.2.tgz#1eedaba3a12b9d1954dd99d6745f3f2ede0aca58"
-  integrity sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==
+"@volar/code-gen@0.38.3":
+  version "0.38.3"
+  resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.38.3.tgz#185bcc18c403ec924f30ba73f898a3c2686e3c8c"
+  integrity sha512-0yCkDtaxffyfC9e2dSLGXJmG3b0rCfTa6vqxjr70ZFTtcf/VytmMBwboFicnm+Zoen9EI8wUNfw4upw9Slz5RQ==
   dependencies:
-    "@volar/source-map" "0.38.2"
+    "@volar/source-map" "0.38.3"
 
-"@volar/source-map@0.38.2":
-  version "0.38.2"
-  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-0.38.2.tgz#72ccaaa224646da69097abe8360391acd7f042b9"
-  integrity sha512-DWcYbYt9SPwk0r4VmXk1F0v4X5+hCqH1JRkAWSeJymQyXCQ2OQDEbY2PF12a7y2qn4FUBD2gOba2TynAqI8ZFQ==
+"@volar/source-map@0.38.3":
+  version "0.38.3"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-0.38.3.tgz#c6e7e3303de4a85f6e3c2e716e5b72b763628f7d"
+  integrity sha512-8aVM+r4lsHnLjhvnjQ6kn4J++3I6VXtJblcGzWuIOn9M8pJmRGW6Si/eOVjayLWfvPCxXUM7e3sg4Nm2tufTmg==
 
-"@volar/vue-code-gen@0.38.2":
-  version "0.38.2"
-  resolved "https://registry.yarnpkg.com/@volar/vue-code-gen/-/vue-code-gen-0.38.2.tgz#10b467936cb79edb21e6f91ed25ec3fbe055a4cd"
-  integrity sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==
+"@volar/vue-code-gen@0.38.3":
+  version "0.38.3"
+  resolved "https://registry.yarnpkg.com/@volar/vue-code-gen/-/vue-code-gen-0.38.3.tgz#e0b1e67a47d209dd0452b7134e8265b0d899065b"
+  integrity sha512-euVuKtwV/KurRSVwNz5bZbCBJLwVOE56+Uh2PhsHcAM5Wzlt82cwLj07FbFagCftoC3IC/bsn43yuLc2I+ZjAQ==
   dependencies:
-    "@volar/code-gen" "0.38.2"
-    "@volar/source-map" "0.38.2"
+    "@volar/code-gen" "0.38.3"
+    "@volar/source-map" "0.38.3"
     "@vue/compiler-core" "^3.2.37"
     "@vue/compiler-dom" "^3.2.37"
     "@vue/shared" "^3.2.37"
 
-"@volar/vue-typescript@0.38.2":
-  version "0.38.2"
-  resolved "https://registry.yarnpkg.com/@volar/vue-typescript/-/vue-typescript-0.38.2.tgz#e9bf7d178755fe2619f43dda499ab1e2a6240a5b"
-  integrity sha512-5IKvSK2m5yUmH6iu/tNScVlvJGuiHawTfSmjxaMs+/tod25WeK37LEdf+pdKtlJ30bYTQmmkAuEfG01QvvBRGQ==
+"@volar/vue-typescript@0.38.3":
+  version "0.38.3"
+  resolved "https://registry.yarnpkg.com/@volar/vue-typescript/-/vue-typescript-0.38.3.tgz#3ad546e87e4cd36e3cc6201ea38e77a2b4243874"
+  integrity sha512-rXh4RQBZrNfkiSnpBYbHrsxg7vBbZeYsGFgE/n8FVLcZfGlelsdXFIINsr/aZGUCJre9I15wQ44eEmXnc4+qww==
   dependencies:
-    "@volar/code-gen" "0.38.2"
-    "@volar/source-map" "0.38.2"
-    "@volar/vue-code-gen" "0.38.2"
+    "@volar/code-gen" "0.38.3"
+    "@volar/source-map" "0.38.3"
+    "@volar/vue-code-gen" "0.38.3"
     "@vue/compiler-sfc" "^3.2.37"
     "@vue/reactivity" "^3.2.37"
 
@@ -1818,7 +1818,7 @@
     "@vue/compiler-dom" "3.2.38"
     "@vue/shared" "3.2.38"
 
-"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.2.1":
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.1.4", "@vue/devtools-api@^6.2.1":
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
   integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
@@ -1920,44 +1920,44 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.38.tgz#e823f0cb2e85b6bf43430c0d6811b1441c300f3c"
   integrity sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==
 
-"@vue/test-utils@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0.tgz#06455934091d237d71d81bac6617485de38b1c58"
-  integrity sha512-zL5kygNq7hONrO1CzaUGprEAklAX+pH8J1MPMCU3Rd2xtSYkZ+PmKU3oEDRg8VAGdL5lNJHzDgrud5amFPtirw==
+"@vue/test-utils@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.2.tgz#0b5edd683366153d5bc5a91edc62f292118710eb"
+  integrity sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g==
 
 "@vue/tsconfig@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.1.3.tgz#4a61dbd29783d01ddab504276dcf0c2b6988654f"
   integrity sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==
 
-"@vueuse/core@8.7.5":
-  version "8.7.5"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.7.5.tgz#e74a888251ea11a9d432068ce18cbdfc4f810251"
-  integrity sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==
+"@vueuse/core@8.9.1":
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.9.1.tgz#9e986c9847ec41996321709494176ad54810b9c9"
+  integrity sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==
   dependencies:
     "@types/web-bluetooth" "^0.0.14"
-    "@vueuse/metadata" "8.7.5"
-    "@vueuse/shared" "8.7.5"
+    "@vueuse/metadata" "8.9.1"
+    "@vueuse/shared" "8.9.1"
     vue-demi "*"
 
-"@vueuse/integrations@8.7.5":
-  version "8.7.5"
-  resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-8.7.5.tgz#a47f78d964939c3ac4070088e67883fb3c8ca77a"
-  integrity sha512-1vCOriEXhthpU9zczTqtG4a+YJFgkyUbK/Cc91Ey0VOdL6saMNjLsrGX7cae6troFyDCbF61eL6Y8epsNc3TXw==
+"@vueuse/integrations@8.9.1":
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-8.9.1.tgz#74bf22347698723bf656ab7ee793ca7b2e768ea1"
+  integrity sha512-xeApqTnMBUzlrpJacCdaFqUfTEf7NZUgHKJTsK9I41ISf2+pywgwpfjVk6KVSKk+GuE2MB1c945lul5jA5IcwA==
   dependencies:
-    "@vueuse/core" "8.7.5"
-    "@vueuse/shared" "8.7.5"
+    "@vueuse/core" "8.9.1"
+    "@vueuse/shared" "8.9.1"
     vue-demi "*"
 
-"@vueuse/metadata@8.7.5":
-  version "8.7.5"
-  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.7.5.tgz#c7f2b21d873d1604a8860ed9c5728d8f3295f00a"
-  integrity sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==
+"@vueuse/metadata@8.9.1":
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.9.1.tgz#5699e7d9a67894b8490cfb61c37beb0428e6fe07"
+  integrity sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA==
 
-"@vueuse/shared@8.7.5":
-  version "8.7.5"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.7.5.tgz#06fb08f6f8fc9e90be9d1e033fa443de927172b0"
-  integrity sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==
+"@vueuse/shared@8.9.1":
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.9.1.tgz#1b48414c06d1e3d14fe3f32bf72f5fab35451a3d"
+  integrity sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==
   dependencies:
     vue-demi "*"
 
@@ -3320,10 +3320,10 @@ eslint-plugin-promise@6.0.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.0.0.tgz#017652c07c9816413a41e11c30adc42c3d55ff18"
   integrity sha512-7GPezalm5Bfi/E22PnQxDWH2iW9GTvAlUNTztemeHb6c1BniSyoeTrM87JkC0wYdi6aQrZX9p2qEiAno8aTcbw==
 
-eslint-plugin-vue@9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz#341f7533cb041958455138834341d5be01f9f327"
-  integrity sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==
+eslint-plugin-vue@9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.2.0.tgz#b7ca02b2ce8218b7586346440fc61c2655db353a"
+  integrity sha512-W2hc+NUXoce8sZtWgZ45miQTy6jNyuSdub5aZ1IBune4JDeAyzucYX0TzkrQ1jMO52sNUDYlCIHDoaNePe0p5g==
   dependencies:
     eslint-utils "^3.0.0"
     natural-compare "^1.4.0"
@@ -3378,10 +3378,10 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@8.18.0:
-  version "8.18.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.18.0.tgz#78d565d16c993d0b73968c523c0446b13da784fd"
-  integrity sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==
+eslint@8.19.0:
+  version "8.19.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.19.0.tgz#7342a3cbc4fbc5c106a1eefe0fd0b50b6b1a7d28"
+  integrity sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==
   dependencies:
     "@eslint/eslintrc" "^1.3.0"
     "@humanwhocodes/config-array" "^0.9.2"
@@ -4899,10 +4899,10 @@ minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
-moment@2.29.3:
-  version "2.29.3"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
-  integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==
+moment@2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
 moxios@0.4.0:
   version "0.4.0"
@@ -5585,7 +5585,7 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup@^2.43.1, rollup@^2.59.0, rollup@^2.70.2:
+rollup@^2.43.1, rollup@^2.59.0, rollup@^2.75.7:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.0.tgz#9177992c9f09eb58c5e56cbfa641607a12b57ce2"
   integrity sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==
@@ -6224,22 +6224,22 @@ v8-to-istanbul@^9.0.1:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
 
-vite-plugin-pwa@0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.12.0.tgz#c0be71cf42452055bafca777b6c110f46d0feac7"
-  integrity sha512-KYD+cnS5ExLF3T28NkfzBLZ53ehHlp+qMhHGFNh0zlVGpFHrJkL2v9wd4AMi7ZkBTffgeNatIFiv8rhCsMSxBQ==
+vite-plugin-pwa@0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.12.3.tgz#acf2913ae85a4d39c13ae4b948307f3dd5506fa8"
+  integrity sha512-gmYdIVXpmBuNjzbJFPZFzxWYrX4lHqwMAlOtjmXBbxApiHjx9QPXKQPJjSpeTeosLKvVbNcKSAAhfxMda0QVNQ==
   dependencies:
     debug "^4.3.4"
     fast-glob "^3.2.11"
     pretty-bytes "^6.0.0"
-    rollup "^2.70.2"
+    rollup "^2.75.7"
     workbox-build "^6.5.3"
     workbox-window "^6.5.3"
 
-vite@2.9.13:
-  version "2.9.13"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.13.tgz#859cb5d4c316c0d8c6ec9866045c0f7858ca6abc"
-  integrity sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==
+vite@2.9.14:
+  version "2.9.14"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.14.tgz#c438324c6594afd1050df3777da981dee988bb1b"
+  integrity sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==
   dependencies:
     esbuild "^0.14.27"
     postcss "^8.4.13"
@@ -6311,24 +6311,24 @@ vue-plyr@7.0.0:
     plyr "github:sampotts/plyr#develop"
     vue "^2.6.12"
 
-vue-router@4.0.16:
-  version "4.0.16"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.16.tgz#9477beeeef36e80e04d041a1738801a55e6e862e"
-  integrity sha512-JcO7cb8QJLBWE+DfxGUL3xUDOae/8nhM1KVdnudadTAORbuxIC/xAydC5Zr/VLHUDQi1ppuTF5/rjBGzgzrJNA==
+vue-router@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.1.tgz#90cc533efafdcf90d157bdc20a376760cdb59c10"
+  integrity sha512-Wp1mEf2xCwT0ez7o9JvgpfBp9JGnVb+dPERzXDbugTatzJAJ60VWOhJKifQty85k+jOreoFHER4r5fu062PhPw==
   dependencies:
-    "@vue/devtools-api" "^6.0.0"
+    "@vue/devtools-api" "^6.1.4"
 
 vue-template-es2015-compiler@^1.6.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-tsc@0.38.2:
-  version "0.38.2"
-  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.38.2.tgz#89175a6bb9a8b5724e84ab5d63dc5113041c5bfa"
-  integrity sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==
+vue-tsc@0.38.3:
+  version "0.38.3"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.38.3.tgz#6a104f43ec1be27fe6888b3d400263357110636f"
+  integrity sha512-mWlneSF+PG2kXYGJI12N4XEAG4ljAkae7IcB93fspqSkEt/oKwDbWy3DzcPSgUm0LsXqOUprTMaZkwDVSRBIvw==
   dependencies:
-    "@volar/vue-typescript" "0.38.2"
+    "@volar/vue-typescript" "0.38.3"
 
 vue-upload-component@3.1.2:
   version "3.1.2"
@@ -6350,10 +6350,10 @@ vue3-gettext@2.3.0:
     pofile "^1.1.3"
     tslib "^2.3.1"
 
-vue3-lazyload@0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/vue3-lazyload/-/vue3-lazyload-0.3.4.tgz#2b67454fec2446fdd5652390669ec405781428ad"
-  integrity sha512-hRZJMM8w4LZM106Km6b9t7OFcIKZnwcSAHl0/ltfuKbFdCi0unmrGfw4T0cD/epoX1RkyLnskT0lk/cuC7P2Kg==
+vue3-lazyload@0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/vue3-lazyload/-/vue3-lazyload-0.3.5.tgz#066f1f1209c6bd40bc9b7abc1e2d7fc795acfdcf"
+  integrity sha512-fIcqdFMWBtQ5OekXkBEBH0vctSjtSBmNixjbCIFJyAzydrnMOWM8QTMVaS2KDSslh7BodiAA/46LE8eRxqhZWg==
   dependencies:
     vue-demi "^0.12.5"