fix(front): icon links and buttons in admin tables

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"

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 }}

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"

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

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>

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"