From 0b2e4570529ed76ab9c0cc1d597e936339dadfee Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 27 Mar 2025 00:10:30 +0100
Subject: [PATCH] fix(front): simplify tags component (tags are just links)

---
 front/src/components/ui/Nav.vue           | 93 +++++++++++++++++++++++
 front/src/views/admin/library/Base.vue    | 69 ++++++++---------
 front/src/views/admin/moderation/Base.vue | 58 +++++---------
 front/src/views/admin/users/Base.vue      | 28 +++----
 front/src/views/auth/ProfileBase.vue      | 54 +++++--------
 front/src/views/channels/DetailBase.vue   | 47 +++++-------
 front/src/views/library/LibraryBase.vue   | 74 ++++++++----------
 front/ui-docs/.vitepress/config.ts        |  1 +
 front/ui-docs/components/ui/nav.md        | 31 ++++++++
 9 files changed, 265 insertions(+), 190 deletions(-)
 create mode 100644 front/src/components/ui/Nav.vue
 create mode 100644 front/ui-docs/components/ui/nav.md

diff --git a/front/src/components/ui/Nav.vue b/front/src/components/ui/Nav.vue
new file mode 100644
index 000000000..9efb6dbde
--- /dev/null
+++ b/front/src/components/ui/Nav.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { type RouterLinkProps } from 'vue-router'
+
+import Link from '~/components/ui/Link.vue'
+import Layout from '~/components/ui/Layout.vue'
+
+type Tab = {
+    title: string,
+    to: RouterLinkProps['to'],
+    icon?: string,
+    badge?: string | number
+}
+
+const tabs = defineModel<Tab[]>({ required: true })
+</script>
+
+<template>
+  <Layout
+    nav
+    flex
+  >
+    <Link
+      v-for="tab in tabs"
+      :key="tab.title"
+      v-bind="tab"
+      ghost
+      min-content
+      :class="$style.tab"
+    >
+      <Layout
+        stack
+        no-gap
+      >
+        <span :class="$style.fakeTitle">{{ tab.title }}</span>
+        <span :class="$style.realTitle">{{ tab.title }}</span>
+        <span
+          v-if="tab.badge"
+          :class="$style.badge"
+        >
+          {{ tab.badge }}
+        </span>
+      </Layout>
+    </Link>
+  </Layout>
+</template>
+
+<style module>
+    .fakeTitle {
+        font-size: 16px;
+        font-weight: 900;
+        opacity: 0;
+        pointer-events: none;
+        max-height: 0;
+        overflow: hidden;
+    }
+    .realTitle {
+        font-size: 16px;
+        font-weight: 400;
+    }
+    .tab {
+        --hover-background-color: transparent;
+        --exact-active-background-color: transparent;
+    }
+    .tab:global(.router-link-exact-active) .realTitle {
+        font-weight: 900;
+    }
+    .badge {
+        display: block;
+        height: 16px;
+        background-color: var(--fw-secondary);
+        width: 16px;
+        position: absolute;
+        inset: -10px -14px auto auto;
+        border-radius: 100vh;
+        font-size: 10px;
+        font-weight: 900;
+        padding: 5px;
+        line-height: 5px;
+        color: black;
+    }
+    :is(.tab:global(.router-link-exact-active), .tab:hover) .realTitle:after {
+        content: '';
+        display: block;
+        height: 4px;
+        background-color: var(--fw-secondary);
+        margin: 0 auto;
+        width: calc(10% + 2rem);
+        position: absolute;
+        inset: auto 0 -14px 0;
+        border-radius: 100vh;
+    }
+
+</style>
diff --git a/front/src/views/admin/library/Base.vue b/front/src/views/admin/library/Base.vue
index 749de0f30..dca388e8c 100644
--- a/front/src/views/admin/library/Base.vue
+++ b/front/src/views/admin/library/Base.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 import Layout from '~/components/ui/Layout.vue'
-import Tabs from '~/components/ui/Tabs.vue'
-import Tab from '~/components/ui/Tab.vue'
+import Nav from '~/components/ui/Nav.vue'
 
 const { t } = useI18n()
 const labels = computed(() => ({
@@ -13,6 +12,34 @@ const labels = computed(() => ({
   secondaryMenu: t('views.admin.library.Base.menu.secondary')
 }))
 
+const tabs = ref([
+  {
+    title: t('views.admin.library.Base.link.edits'),
+    to: {name: 'manage.library.edits'}
+  }, {
+    title: t('views.admin.library.Base.link.channels'),
+    to: {name: 'manage.channels'}
+  }, {
+    title: t('views.admin.library.Base.link.artists'),
+    to: {name: 'manage.library.artists'}
+  }, {
+    title: t('views.admin.library.Base.link.albums'),
+    to: {name: 'manage.library.albums'}
+  }, {
+    title: t('views.admin.library.Base.link.tracks'),
+    to: {name: 'manage.library.tracks'}
+  }, {
+    title: t('views.admin.library.Base.link.libraries'),
+    to: {name: 'manage.library.libraries'}
+  }, {
+    title: t('views.admin.library.Base.link.uploads'),
+    to: {name: 'manage.library.uploads'}
+  }, {
+    title: t('views.admin.library.Base.link.tags'),
+    to: {name: 'manage.library.tags'}
+  }
+])
+
 const route = useRoute()
 </script>
 
@@ -23,40 +50,8 @@ const route = useRoute()
     stack
     class="page-admin-library"
   >
-    <Tabs>
-      <Tab
-        :title="t('views.admin.library.Base.link.edits')"
-        :to="{name: 'manage.library.edits'}"
-      />
-      <Tab
-        :title="t('views.admin.library.Base.link.channels')"
-        :to="{name: 'manage.channels'}"
-      />
-      <Tab
-        :title="t('views.admin.library.Base.link.artists')"
-        :to="{name: 'manage.library.artists'}"
-      />
-      <Tab
-        :title="t('views.admin.library.Base.link.albums')"
-        :to="{name: 'manage.library.albums'}"
-      />
-      <Tab
-        :title="t('views.admin.library.Base.link.tracks')"
-        :to="{name: 'manage.library.tracks'}"
-      />
-      <Tab
-        :title="t('views.admin.library.Base.link.libraries')"
-        :to="{name: 'manage.library.libraries'}"
-      />
-      <Tab
-        :title="t('views.admin.library.Base.link.uploads')"
-        :to="{name: 'manage.library.uploads'}"
-      />
-      <Tab
-        :title="t('views.admin.library.Base.link.tags')"
-        :to="{name: 'manage.library.tags'}"
-      />
-    </Tabs>
+    <Nav v-model="tabs" />
+
     <router-view :key="route.fullPath" />
   </Layout>
 </template>
diff --git a/front/src/views/admin/moderation/Base.vue b/front/src/views/admin/moderation/Base.vue
index 06b8bdd3c..93a97cfd3 100644
--- a/front/src/views/admin/moderation/Base.vue
+++ b/front/src/views/admin/moderation/Base.vue
@@ -8,8 +8,7 @@ import { useRoute } from 'vue-router'
 import axios from 'axios'
 
 import Layout from '~/components/ui/Layout.vue'
-import Tabs from '~/components/ui/Tabs.vue'
-import Tab from '~/components/ui/Tab.vue'
+import Nav from '~/components/ui/Nav.vue'
 
 
 const store = useStore()
@@ -22,6 +21,24 @@ const labels = computed(() => ({
   secondaryMenu: t('views.admin.moderation.Base.menu.secondary')
 }))
 
+const tabs = ref([{
+  title: t('views.admin.moderation.Base.link.reports'),
+  to: { name: 'manage.moderation.reports.list', query: { q: 'resolved:no' } },
+  badge: store.state.ui.notifications.pendingReviewReports > 0 ? store.state.ui.notifications.pendingReviewReports : undefined
+
+}, {
+  title: t('views.admin.moderation.Base.link.userRequests'),
+  to: { name: 'manage.moderation.requests.list', query: { q: 'status:pending' } },
+  badge: store.state.ui.notifications.pendingReviewRequests > 0 ? store.state.ui.notifications.pendingReviewRequests : undefined
+}, {
+  title: t('views.admin.moderation.Base.link.domains'),
+  to: { name: 'manage.moderation.domains.list' }
+}, {
+  title: t('views.admin.moderation.Base.link.accounts'),
+  to: { name: 'manage.moderation.accounts.list' }
+}
+])
+
 const fetchNodeInfo = async () => {
   const response = await axios.get('instance/nodeinfo/2.1/')
   allowListEnabled.value = get(response.data, 'metadata.allowList.enabled', false)
@@ -37,41 +54,8 @@ fetchNodeInfo()
     main
     no-gap
   >
-    <Tabs
-      role="navigation"
-      :aria-label="labels.secondaryMenu"
-    >
-      <Tab
-        :title="t('views.admin.moderation.Base.link.reports')"
-        :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
-      >
-        <div
-          v-if="store.state.ui.notifications.pendingReviewReports > 0"
-          :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
-        >
-          {{ store.state.ui.notifications.pendingReviewReports }}
-        </div>
-      </Tab>
-      <Tab
-        :title="t('views.admin.moderation.Base.link.userRequests')"
-        :to="{name: 'manage.moderation.requests.list', query: {q: 'status:pending'}}"
-      >
-        <div
-          v-if="store.state.ui.notifications.pendingReviewRequests > 0"
-          :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
-        >
-          {{ store.state.ui.notifications.pendingReviewRequests }}
-        </div>
-      </Tab>
-      <Tab
-        :title="t('views.admin.moderation.Base.link.domains')"
-        :to="{name: 'manage.moderation.domains.list'}"
-      />
-      <Tab
-        :title="t('views.admin.moderation.Base.link.accounts')"
-        :to="{name: 'manage.moderation.accounts.list'}"
-      />
-    </Tabs>
+    <Nav v-model="tabs" />
+
     <router-view
       :key="route.fullPath"
       :allow-list-enabled="allowListEnabled"
diff --git a/front/src/views/admin/users/Base.vue b/front/src/views/admin/users/Base.vue
index 06d7aab63..4f8bb6c10 100644
--- a/front/src/views/admin/users/Base.vue
+++ b/front/src/views/admin/users/Base.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 import Layout from '~/components/ui/Layout.vue'
-import Tabs from '~/components/ui/Tabs.vue'
-import Tab from '~/components/ui/Tab.vue'
+import Nav from '~/components/ui/Nav.vue'
 
 const { t } = useI18n()
 
@@ -12,6 +11,18 @@ const labels = computed(() => ({
   manageUsers: t('views.admin.users.Base.title'),
   secondaryMenu: t('views.admin.users.Base.menu.secondary')
 }))
+
+const tabs = ref([
+  {
+    title: t('views.admin.users.Base.link.users'),
+    to: { name: 'manage.users.users.list' }
+  },
+
+  {
+    title: t('views.admin.users.Base.link.invitations'),
+    to: { name: 'manage.users.invitations.list' }
+  }
+])
 </script>
 
 <template>
@@ -20,17 +31,8 @@ const labels = computed(() => ({
     main
     stack
   >
-    <Tabs>
-      <Tab
-        :title="t('views.admin.users.Base.link.users')"
-        :to="{name: 'manage.users.users.list'}"
-      />
+    <Nav v-model="tabs" />
 
-      <Tab
-        :title="t('views.admin.users.Base.link.invitations')"
-        :to="{name: 'manage.users.invitations.list'}"
-      />
-    </Tabs>
     <router-view :key="$route.fullPath" />
   </Layout>
 </template>
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index e0a1cfad0..8a1609cf6 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -16,8 +16,7 @@ import RenderedDescription from '~/components/common/RenderedDescription.vue'
 
 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 Nav from '~/components/ui/Nav.vue'
 
 interface Events {
   (e: 'updated', value: Actor): void
@@ -79,6 +78,21 @@ const fetchData = async () => {
 
 watch(props, fetchData, { immediate: true })
 const recentActivity = ref(0)
+
+const tabs = ref([{
+  title:  t('views.auth.ProfileBase.link.overview') ,
+  to:  { name: 'profile.overview', params: routerParams }
+}, {
+  title:  t('views.auth.ProfileBase.link.activity') ,
+  to:  { name: 'profile.activity', params: routerParams }
+}, ...(
+  store.state.auth.authenticated && object.value && object.value.full_username === store.state.auth.fullUsername
+    ? [{
+        title: t('views.auth.ProfileBase.link.manageUploads') ,
+        to: { name: 'profile.manageUploads', params: routerParams }
+      }]
+    : []
+)])
 </script>
 
 <template>
@@ -135,38 +149,12 @@ const recentActivity = ref(0)
         />
       </Section>
     </Layout>
-    <Tabs>
-      <Tab
-        :title="t('views.auth.ProfileBase.link.overview')"
-        :to="{name: 'profile.overview', params: routerParams}"
-      >
-        <router-view
-          :object="object"
-          @updated="fetchData"
-        />
-      </Tab>
+    <Nav v-model="tabs" />
 
-      <Tab
-        :title="t('views.auth.ProfileBase.link.activity')"
-        :to="{name: 'profile.activity', params: routerParams}"
-      >
-        <router-view
-          :object="object"
-          @updated="fetchData"
-        />
-      </Tab>
-
-      <Tab
-        v-if="store.state.auth.authenticated && object && object.full_username === store.state.auth.fullUsername"
-        :title="t('views.auth.ProfileBase.link.manageUploads')"
-        :to="{ name: 'profile.manageUploads', params: routerParams }"
-      >
-        <router-view
-          :object="object"
-          @updated="fetchData"
-        />
-      </Tab>
-    </Tabs>
+    <router-view
+      :object="object"
+      @updated="fetchData"
+    />
   </Layout>
 </template>
 
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index 4cd44d9ba..a3fa2482a 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -24,8 +24,7 @@ import RadioButton from '~/components/radios/Button.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
-import Tabs from '~/components/ui/Tabs.vue'
-import Tab from '~/components/ui/Tab.vue'
+import Nav from '~/components/ui/Nav.vue'
 import OptionsButton from '~/components/ui/button/Options.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
@@ -60,7 +59,6 @@ const showEditModal = ref(false)
 const showSubscribeModal = ref(false)
 
 const isOwner = computed(() => store.state.auth.authenticated && object.value?.attributed_to.full_username === store.state.auth.fullUsername)
-const isPodcast = computed(() => object.value?.artist?.content_category === 'podcast')
 const isPlayable = computed(() => totalTracks.value > 0)
 const externalDomain = computed(() => {
   const parser = document.createElement('a')
@@ -147,6 +145,18 @@ const updateSubscriptionCount = (delta: number) => {
     object.value.subscriptions_count += delta
   }
 }
+
+const tabs = ref([
+  {
+    title: t('views.channels.DetailBase.link.channelOverview'),
+    to: {name: 'channels.detail', params: { id: props.id }}
+
+  },
+  {
+    title: t('views.channels.DetailBase.link.channelEpisodes'),
+    to: {name: 'channels.detail.episodes', params: { id: props.id }}
+  }
+])
 </script>
 
 <template>
@@ -353,7 +363,7 @@ const updateSubscriptionCount = (delta: number) => {
                   <template v-if="store.state.auth.availablePermissions['library']">
                     <hr>
                     <PopoverItem
-                      :to="{name: 'manage.channels.detail', params: {id: object.uuid}}"
+                      :to="{ name: 'manage.channels.detail', params: { id: object.uuid } }"
                       icon="bi-wrench"
                     >
                       {{ t('views.channels.DetailBase.link.moderation') }}
@@ -482,28 +492,13 @@ const updateSubscriptionCount = (delta: number) => {
           :limit="5"
           :show-more="true"
         />
-        <Tabs>
-          <Tab
-            :title="t('views.channels.DetailBase.link.channelOverview')"
-            :to="{name: 'channels.detail', params: {id: id}}"
-          >
-            <router-view
-              v-if="object"
-              :object="object"
-              @tracks-loaded="totalTracks = $event"
-            />
-          </Tab>
-          <Tab
-            :title="t('views.channels.DetailBase.link.channelEpisodes')"
-            :to="{name: 'channels.detail.episodes', params: {id: id}}"
-          >
-            <router-view
-              v-if="object"
-              :object="object"
-              @tracks-loaded="totalTracks = $event"
-            />
-          </Tab>
-        </Tabs>
+        <Nav v-model="tabs" />
+
+        <router-view
+          v-if="object"
+          :object="object"
+          @tracks-loaded="totalTracks = $event"
+        />
       </section>
     </template>
   </Layout>
diff --git a/front/src/views/library/LibraryBase.vue b/front/src/views/library/LibraryBase.vue
index 2d6b4090a..e12d5f8bd 100644
--- a/front/src/views/library/LibraryBase.vue
+++ b/front/src/views/library/LibraryBase.vue
@@ -17,9 +17,7 @@ import OptionsButton from '~/components/ui/button/Options.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 import Header from '~/components/ui/Header.vue'
-import Tabs from '~/components/ui/Tabs.vue'
-import Tab from '~/components/ui/Tab.vue'
-import Button from '~/components/ui/Button.vue'
+import Nav from '~/components/ui/Nav.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 import useReport from '~/composables/moderation/useReport'
@@ -86,10 +84,22 @@ watchEffect(() => {
 })
 
 const updateUploads = (count: number) => {
-  if (object.value) {
-    object.value.uploads_count += count
-  }
+  object.value = object.value
+    ? { ...object.value, uploads_count: object.value.uploads_count + count }
+    : null
 }
+
+const tabs = ref([{
+  title: t('views.library.LibraryBase.link.artists'),
+  to: { name: 'library.detail' }
+}, {
+  title: t('views.library.LibraryBase.link.albums'),
+  to: { name: 'library.detail.albums' }
+}, {
+  title: t('views.library.LibraryBase.link.tracks'),
+  to: { name: 'library.detail.tracks' }
+}
+])
 </script>
 
 <template>
@@ -177,13 +187,16 @@ const updateUploads = (count: number) => {
         <i class="bi bi-globe" />
         {{ labels.visibility.everyone }}
       </span>
-      <span class="middledot icon">
+      <span
+        v-if="object"
+        class="middledot icon"
+      >
         <i class="bi bi-music-note-list" />
         {{ t('views.library.LibraryBase.meta.tracks', object.uploads_count) }}
       </span>
-      <span v-if="object?.size">
+      <span v-if="object && 'size' in object && object.size">
         <i class="bi bi-database-fill" />
-        {{ humanSize(object?.size) }}
+        {{ humanSize(object.size) }}
       </span>
     </Layout>
 
@@ -222,40 +235,13 @@ const updateUploads = (count: number) => {
         </p>
       </div>
     </Layout>
-    <Tabs>
-      <Tab
-        :title="t('views.library.LibraryBase.link.artists')"
-        :to="{name: 'library.detail'}"
-      >
-        <router-view
-          :is-owner="isOwner"
-          :object="object"
-          @updated="fetchData"
-          @uploads-finished="updateUploads"
-        />
-      </Tab>
-      <Tab
-        :title="t('views.library.LibraryBase.link.albums')"
-        :to="{name: 'library.detail.albums'}"
-      >
-        <router-view
-          :is-owner="isOwner"
-          :object="object"
-          @updated="fetchData"
-          @uploads-finished="updateUploads"
-        />
-      </Tab>
-      <Tab
-        :title="t('views.library.LibraryBase.link.tracks')"
-        :to="{name: 'library.detail.tracks'}"
-      >
-        <router-view
-          :is-owner="isOwner"
-          :object="object"
-          @updated="fetchData"
-          @uploads-finished="updateUploads"
-        />
-      </Tab>
-    </Tabs>
+    <Nav v-model="tabs" />
+
+    <router-view
+      :is-owner="isOwner"
+      :object="object"
+      @updated="fetchData"
+      @uploads-finished="updateUploads"
+    />
   </Layout>
 </template>
diff --git a/front/ui-docs/.vitepress/config.ts b/front/ui-docs/.vitepress/config.ts
index 0ce98c35f..84c2813a5 100644
--- a/front/ui-docs/.vitepress/config.ts
+++ b/front/ui-docs/.vitepress/config.ts
@@ -29,6 +29,7 @@ export default defineConfig({
               { text: 'Pagination', link: '/components/ui/pagination' },
               { text: 'Table of Contents', link: '/components/ui/toc' },
               { text: 'Tabs', link: '/components/ui/tabs' },
+              { text: 'Nav', link: '/components/ui/nav' },
             ],
           },
           {
diff --git a/front/ui-docs/components/ui/nav.md b/front/ui-docs/components/ui/nav.md
new file mode 100644
index 000000000..91af3a96f
--- /dev/null
+++ b/front/ui-docs/components/ui/nav.md
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import Nav from '~/components/ui/Nav.vue'
+
+const nav = ref([{ title: 'Go up', to: '../' }, { title: 'Home', to: './', badge: "2" }])
+</script>
+
+```ts
+import Nav from "~/components/ui/Nav.vue"
+```
+
+# Nav
+
+This is just a list of links, styled like tabs.
+
+You can add a `badge` or an `icon` to each tab link.
+
+<Link to="/">Hello</Link>
+
+```ts
+import { ref } from 'vue'
+
+const nav = ref([{ title: 'Go up', to: '../' }, { title: 'Home', to: './', badge: "2" }])
+```
+
+```vue-html
+<Nav v-model="nav" />
+```
+
+<Nav v-model="nav" />