From 0caee2181dfb4f9e6498068b73d722db22aeb951 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 11 Feb 2025 10:08:33 +0100
Subject: [PATCH] refactor(ui): [WIP] tabs with links are activated when name
 matches in Url

---
 front/src/components/ui/Tabs.vue     | 3 ++-
 front/src/views/auth/ProfileBase.vue | 2 +-
 front/ui-docs/components/ui/tabs.md  | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/front/src/components/ui/Tabs.vue b/front/src/components/ui/Tabs.vue
index 9ee7af29b..3b2beb700 100644
--- a/front/src/components/ui/Tabs.vue
+++ b/front/src/components/ui/Tabs.vue
@@ -17,8 +17,9 @@ provide(TABS_INJECTION_KEY, {
   tabs: tabs,
 })
 
+/* Note that this only compares the name. Make sure to add a `name` field to identify paths in your router config! */
 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
+  tabs.find(({ to })=> to && typeof to !== 'string' && 'name' in to && currentRoute.name === to?.name)?.title
   || currentTitle.value)
 
 const currentIndex = computed(() =>
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index a65e5b4fc..88868fcc9 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -164,7 +164,7 @@ const recentActivity = ref(0)
           >
             <a
               href=""
-              @click.stop.prevent="showUploadModal = true"
+              @click.stop.prevent="/*showUploadModal = true*/"
             >
               <i class="bi bi-plus" />
               {{ t('views.auth.ProfileOverview.link.addNew') }}
diff --git a/front/ui-docs/components/ui/tabs.md b/front/ui-docs/components/ui/tabs.md
index 9dd691603..fb88ba2c0 100644
--- a/front/ui-docs/components/ui/tabs.md
+++ b/front/ui-docs/components/ui/tabs.md
@@ -85,3 +85,5 @@ You can add a template to the right side of the tabs using the `#tabs-right` dir
 If the tab content covers most of the page, users will expect that they can navigate to the previous tab with the "back" button of the browser ([See Navigation](./navigation.md)).
 
 In this case, add the `:to` prop to each tab, and place a `RouterView` with the intended props of the route's component into its default slot.
+
+Note that this only compares the name. Make sure to add a `name` field to identify paths in your router config!