fix(front): use new modal composable

front/src/components/library/Albums.vue

@@ -11,6 +11,7 @@ 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 axios from 'axios'
 
@@ -235,8 +236,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           small
           primary
           style="text-align: center;"
-          @click="store.commit('ui/toggleModal', 'upload')"
-          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefined"
+          :to="useModal('upload').to"
         >
           <template #image>
             <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />

front/src/components/library/Artists.vue

@@ -10,6 +10,7 @@ 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 axios from 'axios'
 
@@ -242,8 +243,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         small
         primary
         style="text-align: center;"
-        @click="store.commit('ui/toggleModal', 'upload')"
-        :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefined"
+        :to="useModal('upload').to"
       >
         <template #image>
           <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />

front/src/components/library/Podcasts.vue

@@ -10,6 +10,7 @@ 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 axios from 'axios'
 
@@ -127,16 +128,8 @@ const labels = computed(() => ({
 
 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
 
-const modalName = 'subscribe'
-
-const isOpen = computed({
-  get() {
-    return store.state.ui.modalsOpen.has(modalName);
-  },
-  set(value) {
-    store.commit('ui/setModal', [modalName, value]);
-  }
-})
+const { isOpen:subscribeIsOpen, to:subscribe } = useModal('subscribe')
+const { to:upload } = useModal('upload')
 </script>
 
 <template>
@@ -242,8 +235,7 @@ const isOpen = computed({
           small
           primary
           style="text-align: center;"
-          @click="store.commit('ui/toggleModal', 'subscribe')"
-          :aria-pressed="store.state.ui.modalsOpen.has('subscribe') || undefined"
+          :to="subscribe"
         >
           <template #image>
             <i class="bi bi-plus" style="font-size: 100px; position: relative; top: 50px;" />
@@ -256,8 +248,7 @@ const isOpen = computed({
           small
           primary
           style="text-align: center;"
-          @click="store.commit('ui/toggleModal', 'upload')"
-          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefined"
+          :to="upload"
         >
           <template #image>
             <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
@@ -272,8 +263,9 @@ const isOpen = computed({
       :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
     />
   <Modal
-    v-model="isOpen"
+    v-model="subscribeIsOpen"
     :title="t('components.library.Podcasts.modal.subscription.header')"
+    :cancel="t('components.library.Podcasts.button.cancel')"
   >
     <div
       ref="modalContent"
@@ -284,16 +276,10 @@ const isOpen = computed({
         :show-submit="false"
         :standalone="false"
         :redirect="true"
-        @subscribed="isOpen = false; fetchData()"
+        @subscribed="subscribeIsOpen = false; fetchData()"
       />
     </div>
     <template #actions>
-      <Button
-        secondary
-        @click="isOpen = false"
-      >
-        {{ t('components.library.Podcasts.button.cancel') }}
-      </Button>
       <Button
         primary
         form="remote-search"

front/src/views/auth/ProfileBase.vue

@@ -10,6 +10,7 @@ import { hashCode, intToRGB } from '~/utils/color'
 import UserFollowButton from '~/components/federation/UserFollowButton.vue'
 import axios from 'axios'
 
+import { useModal } from '~/ui/composables/useModal.ts'
 import useErrorHandler from '~/composables/useErrorHandler'
 import useReport from '~/composables/moderation/useReport'
 import RenderedDescription from '~/components/common/RenderedDescription.vue'
@@ -18,6 +19,7 @@ import Layout from '~/components/ui/Layout.vue'
 import Section from '~/components/ui/Section.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Tab from '~/components/ui/Tab.vue'
+import Link from '~/components/ui/Link.vue'
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 
@@ -129,7 +131,6 @@ const recentActivity = ref(0)
         />
       </Section>
     </Layout>
-    <!-- TODO: Make routerlinks work for tabs -->
     <Tabs>
       <Tab :title="t('views.auth.ProfileBase.link.overview')" :to="{name: 'profile.overview', params: routerParams}">
         <h2>{{ t('views.auth.ProfileBase.link.overview') }}</h2>
@@ -162,13 +163,12 @@ const recentActivity = ref(0)
             v-if="store.state.auth.authenticated && object?.full_username === store.state.auth.fullUsername"
             class="actions"
           >
-            <a
-              href=""
-              @click.stop.prevent="/*showUploadModal = true*/"
+            <Link
+              :to="useModal('upload').to"
+              icon="bi-plus"
             >
-              <i class="bi bi-plus" />
               {{ t('views.auth.ProfileOverview.link.addNew') }}
-            </a>
+            </Link>
           </div>
         </h2>
         <channels-widget :filters="{scope: `actor:${object?.full_username}`}" />