fix(front): Upload modal is activated through a link

front/src/components/ui/Tabs.vue

@@ -6,17 +6,23 @@ import { type Props as TabProps } from '~/components/ui/Tab.vue'
 
 import Button from "~/components/ui/Button.vue";
 import Link from "~/components/ui/Link.vue";
+import { useRoute } from 'vue-router'
 
 const currentTitle = ref<TabProps['title']>('')
 const tabs = reactive<TabProps[]>([])
+const currentRoute = useRoute()
 
 provide(TABS_INJECTION_KEY, {
   currentTitle: currentTitle,
   tabs: tabs,
 })
 
+const actualCurrentTitle = computed(() =>
+  tabs.find(({ to })=>currentRoute.matched.some(route => typeof to === 'string' ? route.path === to : to && 'path' in to && route.path === to.path))?.title
+  || currentTitle.value)
+
 const currentIndex = computed(() =>
-  tabs.findIndex(({title}) => title === currentTitle.value)
+  tabs.findIndex(({title}) => title === actualCurrentTitle.value)
 )
 
 watch(() => tabs.length, (_, from) => {

front/src/ui/components/Sidebar.vue

@@ -55,14 +55,13 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
           ghost
         />
 
-        <Button
+        <Link
           v-if="store.state.auth.authenticated"
           round
           square-small
           icon="bi-upload"
           ghost
-          @click="store.commit('ui/toggleModal', 'upload')"
+          :to="useModal('upload').to"
-          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefined"
         >
           <Transition>
             <div
@@ -76,7 +75,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
               />
             </div>
           </Transition>
-        </Button>
+        </Link>
 
         <UserMenu/>
 

front/src/ui/composables/useModal.ts

@@ -49,8 +49,7 @@ export const useModal = <T> (
       return flag in query.value && assignment.isOn(query.value[flag]);
     },
     set(newValue: boolean) {
-      router
+      router.push({
-        .push({
           query: {
             ...query.value,
             [flag]: newValue ? assignment.on(null) : undefined,
@@ -75,8 +74,7 @@ export const useModal = <T> (
       return typeof flagValue === 'string' ? flagValue : flagValue === null ? '' : flagValue.join(' ');
     },
     set(newValue: string) {
-      router
+      router.push({
-        .push({
           query: {
             ...query.value,
             [flag]: newValue,

front/src/ui/modals/Upload.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { computed, reactive, ref } 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'
@@ -23,7 +22,6 @@ import LibraryUpload from '~/components/library/FileUpload.vue';
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 
 const { t } = useI18n()
-const store = useStore()
 
 onKeyboardShortcut('u', () => useModal('upload').toggle())