From fce8deac11ebce3f566398c0608f23699d700345 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 14 Apr 2025 13:36:13 +0200
Subject: [PATCH] fix(front): icon links and buttons in admin tables

---
 front/src/components/manage/ChannelsTable.vue | 21 ++++++++----
 .../components/manage/library/AlbumsTable.vue | 31 ++++++++++-------
 .../manage/library/ArtistsTable.vue           | 10 ++++--
 .../manage/library/LibrariesTable.vue         | 29 +++++++++-------
 .../components/manage/library/TracksTable.vue | 33 +++++++++++++------
 .../manage/library/UploadsTable.vue           | 21 +++++++-----
 6 files changed, 95 insertions(+), 50 deletions(-)

diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index 4cf867b56..1da9c18a8 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -20,6 +20,7 @@ import usePage from '~/composables/navigation/usePage'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
+import Link from '~/components/ui/Link.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
@@ -205,10 +206,14 @@ const labels = computed(() => ({
         </router-link>
       </td>
       <td>
-        <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.attributed_to.full_username }}">
-          <i class="wrench icon" />
+        <Link
+          icon="bi-wrench"
+          solid
+          square-small
+          :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.attributed_to.full_username }}"
+        >
           <span class="visually-hidden">{{ labels.openModeration }}</span>
-        </router-link>
+        </Link>
         <a
           href=""
           class="discrete link"
@@ -217,10 +222,14 @@ const labels = computed(() => ({
       </td>
       <td>
         <template v-if="!scope.obj.is_local">
-          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.attributed_to.domain }}">
-            <i class="wrench icon" />
+          <Link
+            icon="bi-wrench"
+            solid
+            square-small
+            :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.attributed_to.domain }}"
+          >
             <span class="visually-hidden">{{ labels.openModeration }}</span>
-          </router-link>
+          </Link>
           <a
             href=""
             class="discrete link"
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 93f6ddd2d..1d53e848d 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -20,6 +20,8 @@ import usePage from '~/composables/navigation/usePage'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
+import Link from '~/components/ui/Link.vue'
+import Button from '~/components/ui/Button.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
@@ -202,10 +204,14 @@ const labels = computed(() => ({
         </router-link>
       </td>
       <td>
-        <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist_credit[0].artist.id }}">
-          <i class="wrench icon" />
+        <Link
+          icon="bi-wrench"
+          solid
+          square-small
+          :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist_credit[0].artist.id }}"
+        >
           <span class="visually-hidden">{{ labels.openModeration }}</span>
-        </router-link>
+        </Link>
         <a
           href=""
           class="discrete link"
@@ -215,25 +221,28 @@ const labels = computed(() => ({
       </td>
       <td>
         <template v-if="!scope.obj.is_local">
-          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-            <i class="wrench icon" />
+          <Link
+            icon="bi-box-arrow-up-right"
+            solid
+            square-small
+            :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"
+          >
             <span class="visually-hidden">{{ labels.openModeration }}</span>
-          </router-link>
+          </Link>
           <a
             href=""
             class="discrete link"
             @click.prevent="addSearchToken('domain', scope.obj.domain)"
           >{{ scope.obj.domain }}</a>
         </template>
-        <a
+        <Button
           v-else
-          href=""
-          class="ui tiny accent icon link label"
+          icon="bi-house-fill"
+          square-small
           @click.prevent="addSearchToken('domain', scope.obj.domain)"
         >
-          <i class="home icon" />
           {{ t('components.manage.library.AlbumsTable.link.local') }}
-        </a>
+        </Button>
       </td>
       <td>
         {{ scope.obj.tracks_count }}
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index 42edc273d..27e314b8b 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -20,6 +20,7 @@ import usePage from '~/composables/navigation/usePage'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
+import Link from '~/components/ui/Link.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
@@ -217,9 +218,12 @@ const getUrl = (artist: { channel?: number; id: number }) => {
       </td>
       <td>
         <template v-if="!scope.obj.is_local">
-          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-            <i class="wrench icon" />
-          </router-link>
+          <Link
+            solid
+            square-small
+            icon="bi-wrench"
+            :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"
+          />
           <a
             href=""
             class="discrete link"
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index 1e30852e6..c6fed863f 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -20,6 +20,8 @@ import usePage from '~/composables/navigation/usePage'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
+import Link from '~/components/ui/Link.vue'
+import Button from '~/components/ui/Button.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
@@ -219,9 +221,12 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
         </router-link>
       </td>
       <td>
-        <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.actor.full_username }}">
-          <i class="wrench icon" />
-        </router-link>
+        <Link
+          solid
+          square-small
+          icon="bi-wrench"
+          :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.actor.full_username }}"
+        />
         <a
           href=""
           class="discrete link"
@@ -231,9 +236,12 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
       </td>
       <td>
         <template v-if="!scope.obj.is_local">
-          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-            <i class="wrench icon" />
-          </router-link>
+          <Link
+            solid
+            square-small
+            icon="bi-box-arrow-up-right"
+            :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"
+          />
           <a
             href=""
             class="discrete link"
@@ -241,15 +249,14 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             @click.prevent="addSearchToken('domain', scope.obj.domain)"
           >{{ scope.obj.domain }}</a>
         </template>
-        <a
+        <Button
           v-else
-          href=""
-          class="ui tiny accent icon link label"
+          square-small
+          icon="bi-house-fill"
           @click.prevent="addSearchToken('domain', scope.obj.domain)"
         >
-          <i class="home icon" />
           {{ t('components.manage.library.LibrariesTable.link.local') }}
-        </a>
+        </Button>
       </td>
       <td>
         <a
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index a32f59183..b17549fdc 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -20,6 +20,7 @@ import usePage from '~/composables/navigation/usePage'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
+import Link from '~/components/ui/Link.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
@@ -191,9 +192,13 @@ const labels = computed(() => ({
       </td>
       <td>
         <template v-if="scope.obj.album">
-          <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.album.id }}">
-            <i class="wrench icon" />
-          </router-link>
+          <Link
+            solid
+            ghost
+            square-small
+            icon="bi-wrench"
+            :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.album.id }}"
+          />
           <a
             href=""
             class="discrete link"
@@ -203,9 +208,13 @@ const labels = computed(() => ({
         </template>
       </td>
       <td>
-        <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist_credit[0].artist.id }}">
-          <i class="wrench icon" />
-        </router-link>
+        <Link
+          solid
+          ghost
+          square-small
+          icon="bi-wrench"
+          :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist_credit[0].artist.id }}"
+        />
         <a
           href=""
           class="discrete link"
@@ -215,9 +224,13 @@ const labels = computed(() => ({
       </td>
       <td>
         <template v-if="!scope.obj.is_local">
-          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-            <i class="wrench icon" />
-          </router-link>
+          <Link
+            solid
+            ghost
+            square-small
+            icon="bi-wrench"
+            :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"
+          />
           <a
             href=""
             class="discrete link"
@@ -231,7 +244,7 @@ const labels = computed(() => ({
           class="ui tiny accent icon link label"
           @click.prevent="addSearchToken('domain', scope.obj.domain)"
         >
-          <i class="home icon" />
+          <i class="bi bi-house-fill" />
           {{ t('components.manage.library.TracksTable.link.local') }}
         </a>
       </td>
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index d8becaadf..305d6ff26 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -23,6 +23,7 @@ import usePage from '~/composables/navigation/usePage'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
 import Input from '~/components/ui/Input.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
@@ -275,9 +276,12 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
         </router-link>
       </td>
       <td>
-        <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.library.uuid }}">
-          <i class="wrench icon" />
-        </router-link>
+        <Link
+          solid
+          square-small
+          icon="bi-wrench"
+          :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.library.uuid }}"
+        />
         <a
           href=""
           class="discrete link"
@@ -308,15 +312,14 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             @click.prevent="addSearchToken('domain', scope.obj.domain)"
           >{{ scope.obj.domain }}</a>
         </template>
-        <a
+        <Button
           v-else
-          href=""
-          class="ui tiny accent icon link label"
+          square-small
+          icon="bi-house-fill"
           @click.prevent="addSearchToken('domain', scope.obj.domain)"
         >
-          <i class="home icon" />
           {{ t('components.manage.library.UploadsTable.link.local') }}
-        </a>
+        </Button>
       </td>
       <td>
         <a
@@ -338,7 +341,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           {{ getImportStatusChoice(scope.obj.import_status).label }}
         </a>
         <Button
-          class="tiny"
+          square-small
           icon="bi-question-circle"
           :title="sharedLabels.fields.import_status.label"
           @click="detailedUpload = scope.obj; showUploadDetailModal = true"