Fix some vue compat warnings

front/src/components/Sidebar.vue

@@ -522,7 +522,7 @@ export default {
       languageSelection: this.$language.current
     }
   },
-  destroy () {
+  unmount () {
     if (this.fetchInterval) {
       clearInterval(this.fetchInterval)
     }

front/src/components/common/ActionFeedback.vue

@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import { refAutoReset, toRefs } from '@vueuse/core'
+import { watch } from 'vue'
+
+interface Props {
+  isLoading: boolean
+  size?: string
+}
+
+const { isLoading, size } = toRefs(withDefaults(
+  defineProps<Props>(),
+  { size: 'small' }
+))
+
+const isDone = refAutoReset(false, 2000)
+watch(isLoading, loading => {
+  isDone.value = !loading
+})
+</script>
+
 <template>
   <span
     v-if="isLoading || isDone"
@@ -13,40 +33,3 @@
     />
   </span>
 </template>
-
-<script>
-
-export default {
-  props: {
-    isLoading: { type: Boolean, required: true },
-    size: { type: String, default: 'small' }
-  },
-  data () {
-    return {
-      timer: null,
-      isDone: false
-    }
-  },
-  watch: {
-    isLoading (v) {
-      const self = this
-      if (v && this.timer) {
-        clearTimeout(this.timer)
-      }
-      if (v) {
-        this.isDone = false
-      } else {
-        this.isDone = true
-        this.timer = setTimeout(() => {
-          self.isDone = false
-        }, (2000))
-      }
-    }
-  },
-  destroyed () {
-    if (this.timer) {
-      clearTimeout(this.timer)
-    }
-  }
-}
-</script>

front/src/components/library/FileUpload.vue

@@ -500,7 +500,7 @@ export default {
     })
     window.onbeforeunload = e => this.onBeforeUnload(e)
   },
-  destroyed () {
+  unmounted () {
     this.$store.commit('ui/removeWebsocketEventHandler', {
       eventName: 'import.status_updated',
       id: 'fileUpload'

front/src/components/semantic/Modal.vue

@@ -54,7 +54,7 @@ export default {
   mounted () {
     this.focusTrap = createFocusTrap(this.$el)
   },
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.control) {
       $(this.$el).modal('hide')
     }

front/src/main.ts

@@ -1,6 +1,6 @@
 import router from '~/router'
 import store from '~/store'
-import { createApp } from 'vue'
+import { createApp, defineAsyncComponent } from 'vue'
 import useLogger from '~/composables/useLogger'
 import useTheme from '~/composables/useTheme'
 useTheme()
@@ -11,7 +11,7 @@ logger.debug('Environment variables:', import.meta.env)
 
 const app = createApp({
   components: {
-    App: () => import('~/App.vue')
+    App: defineAsyncComponent(() => import('~/App.vue'))
   },
   data: () => ({ isMounted: false }),
   async mounted () {

front/src/store/queue.js

@@ -150,17 +150,17 @@ export default {
         dispatch('radios/populateQueue', null, { root: true })
       }
     },
-    clean ({ dispatch, commit }) {
+    clean ({ dispatch, commit, state }) {
       dispatch('radios/stop', null, { root: true })
       dispatch('player/stop', null, { root: true })
-      commit('tracks', [])
+      state.tracks.length = 0
       dispatch('currentIndex', -1)
       // so we replay automatically on next track append
       commit('ended', true)
     },
-    async shuffle ({ dispatch, commit, state }, callback) {
+    async shuffle ({ dispatch, state }, callback) {
       const shuffled = shuffle(state.tracks)
-      commit('tracks', [])
+      state.tracks.length = 0
       const params = { tracks: shuffled }
       if (callback) {
         params.callback = callback

front/src/views/Notifications.vue

@@ -263,7 +263,7 @@ export default {
       handler: this.handleNewNotification
     })
   },
-  destroyed () {
+  unmounted () {
     this.$store.commit('ui/removeWebsocketEventHandler', {
       eventName: 'inbox.item_added',
       id: 'notificationPage'

front/src/views/channels/DetailOverview.vue

@@ -232,7 +232,7 @@ export default {
       })
     }
   },
-  destroyed () {
+  unmounted () {
     this.$store.commit('ui/removeWebsocketEventHandler', {
       eventName: 'import.status_updated',
       id: 'fileUploadChannel'