fix(ui): [WIP] import TagsList explicitly

front/src/components/album/Card.vue

@@ -2,6 +2,10 @@
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import PlayButton from '~/components/ui/button/Play.vue'
+import OptionsButton from '~/components/ui/button/Options.vue'
+import Card from '~/components/ui/Card.vue'
+import TagsList from '~/components/tags/List.vue'
 
 import type { Album } from '~/types'
 
@@ -19,21 +23,24 @@ const { album } = props
 
 let navigate = (to: 'artist' | 'album') => {}
 
+const artist_credit = album.artist_credit || []
+const firstArtist = artist_credit.length > 0 ? artist_credit[0].artist : null
+
 if (import.meta.env.PROD) {
   const router = useRouter()
   navigate = (to: 'artist' | 'album') => to === 'album'
     ? router.push({ name: 'library.albums.detail', params: { id: album.id } })
-    : router.push({ name: 'library.artists.detail', params: { id: album.artist_credit.artist.id } })
+    : router.push({ name: 'library.artists.detail', params: { id: firstArtist?.id } })
 }
 </script>
 
 <template>
-  <fw-card
+  <Card
     :title="album.title"
     :image="album.cover?.urls.original"
     class="album-card"
   >
-    <fw-play-button @play="play(album)" />
+    <PlayButton @play="play(album)" />
 
     <a
       v-for="ac in album.artist_credit"
@@ -45,7 +52,7 @@ if (import.meta.env.PROD) {
       {{ ac.joinphrase }}
     </a>
 
-    <tags-list
+    <TagsList
       label-classes="tiny"
       :truncate-size="20"
       :limit="2"
@@ -62,23 +69,23 @@ if (import.meta.env.PROD) {
 
     <template #footer>
       {{ t('components.audio.album.Card.meta.tracks', album.tracks?.length || 0) }}
-      <fw-options-button />
+      <OptionsButton />
     </template>
-  </fw-card>
+  </Card>
 </template>
 
 <style scoped>
 .funkwhale {
   &.card.album-card {
     --fw-border-radius: 12px;
-    --fw-card-width: 208px;
+    --Card-width: 208px;
-    --fw-card-image-width: var(--fw-card-width);
+    --Card-image-width: var(--Card-width);
-    --fw-card-padding: 16px;
+    --Card-padding: 16px;
 
     > .card-image {
       border-radius: 0 !important;
-      width: var(--fw-card-image-width);
+      width: var(--Card-image-width);
-      margin: calc(-1 * var(--fw-card-padding)) calc(-1 * var(--fw-card-padding)) 0;
+      margin: calc(-1 * var(--Card-padding)) calc(-1 * var(--Card-padding)) 0;
     }
 
     > .card-title {

front/src/components/artist/Card.vue

@@ -4,6 +4,7 @@ import { computed } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
+import TagsList from '~/components/tags/List.vue'
 
 import type { Artist } from '~/types'
 
@@ -50,7 +51,7 @@ const imageUrl = computed(() => cover.value?.urls.original
   >
     <fw-play-button @play="play(artist)" />
 
-    <tags-list
+    <TagsList
       label-classes="tiny"
       :truncate-size="20"
       :limit="2"

front/src/components/audio/ChannelCard.vue

@@ -75,7 +75,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
         <span v-else>
           {{ t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
         </span>
-        <tags-list
+        <TagsList
           label-classes="tiny"
           :truncate-size="20"
           :limit="2"

front/src/components/audio/artist/Card.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { Artist } from '~/types'
 
-import PlayButton from '~/components/audio/PlayButton.vue'
-import TagsList from '~/components/tags/List.vue'
 import { computed } from 'vue'
 import { useStore } from '~/store'
 import { truncate } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 
+import PlayButton from '~/components/audio/PlayButton.vue'
+import TagsList from '~/components/tags/List.vue'
+
 interface Props {
   artist: Artist
 }
@@ -56,7 +57,7 @@ const imageUrl = computed(() => cover.value?.urls.original
         </router-link>
       </strong>
 
-      <tags-list
+      <TagsList
         label-classes="tiny"
         :truncate-size="20"
         :limit="2"

front/src/components/audio/track/Widget.vue

@@ -162,7 +162,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
                   <span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
                 </span>
               </div>
-              <tags-list
+              <TagsList
                 label-classes="tiny"
                 :truncate-size="20"
                 :limit="2"

front/src/components/library/AlbumBase.vue

@@ -186,7 +186,7 @@ const remove = async () => {
                   </div>
                 </div>
                 <div class="ui column right aligned">
-                  <tags-list
+                  <TagsList
                     v-if="object.tags && object.tags.length > 0"
                     :tags="object.tags"
                   />
@@ -309,7 +309,7 @@ const remove = async () => {
                 <div class="ui divider" />
                 <div class="ui small hidden divider" />
                 <template v-if="object.tags && object.tags.length > 0">
-                  <tags-list :tags="object.tags" />
+                  <TagsList :tags="object.tags" />
                   <div class="ui small hidden divider" />
                 </template>
                 <rendered-description

front/src/components/library/ArtistBase.vue

@@ -8,17 +8,17 @@ import { getDomain } from '~/utils'
 import { useStore } from '~/store'
 
 import axios from 'axios'
+import useReport from '~/composables/moderation/useReport'
+import useLogger from '~/composables/useLogger'
 
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import SemanticModal from '~/components/semantic/Modal.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import RadioButton from '~/components/radios/Button.vue'
-import TagsList from '~/components/tags/List.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
+import TagsList from '~/components/tags/List.vue'
 
-import useReport from '~/composables/moderation/useReport'
-import useLogger from '~/composables/useLogger'
 
 interface Props {
   id: number
@@ -123,7 +123,7 @@ watch(() => props.id, fetchData, { immediate: true })
               </div>
             </div>
           </h2>
-          <tags-list
+          <TagsList
             v-if="object.tags && object.tags.length > 0"
             :tags="object.tags"
           />

front/src/components/library/TrackDetail.vue

@@ -156,7 +156,7 @@ watchEffect(() => {
         </div>
         <div class="ten wide column">
           <template v-if="track.tags && track.tags.length > 0">
-            <tags-list :tags="track.tags" />
+            <TagsList :tags="track.tags" />
             <div class="ui hidden divider" />
           </template>
 

front/src/components/podcast/Card.vue

@@ -1,25 +1,28 @@
 <script setup lang="ts">
-import { FwCard, FwOptionsButton } from '~/components'
 import { useTimeAgo } from '@vueuse/core'
 import { useRouter } from 'vue-router'
-import type { Podcast } from '~/types/models'
+import type { Channel } from '~/types'
 
-const podcast = defineProp<Podcast>('podcast', { required: true })
+import OptionsButton from '~/components/ui/button/Options.vue'
+import Card from '~/components/ui/Card.vue'
 
-const timeAgo = useTimeAgo(new Date(podcast.value.artist.modification_date))
+const { podcast } = defineProps<{ podcast: Channel }>()
+
+const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Date()))
 
 let navigate = () => {}
 
 if (import.meta.env.PROD) {
   const router = useRouter()
-  navigate = () => router.push({ name: 'library.artists.detail', params: { id: podcast.value.artist.id } })
+  navigate = () => router.push({ name: 'library.artists.detail', params: { id: podcast.artist?.id } })
 }
+
 </script>
 
 <template>
-  <fw-card
+  <Card
-    :title="podcast.name"
+    :title="podcast.uuid"
-    :image="podcast.artist.cover.urls.original"
+    :image="podcast.artist?.cover?.urls.original"
     @click="navigate"
     class="podcast-card"
   >
@@ -27,14 +30,14 @@ if (import.meta.env.PROD) {
       @click.stop="navigate"
       class="funkwhale link"
     >
-      {{ podcast.artist.name }}
+      {{ podcast.artist?.name }}
     </a>
 
     <template #footer>
       {{ timeAgo }}
-      <fw-options-button />
+      <OptionsButton />
     </template>
-  </fw-card>
+  </Card>
 </template>
 
 <style lang="scss">

front/src/components/semantic/Modal.vue

@@ -37,7 +37,8 @@ const classes = computed(() => [
 </script>
 
 <template>
-  <Modal
+  <!-- TODO: Replace this file with `components/ui/Modal` -->
+  <!-- <Modal
     :model-value="show"
     @update:model-value="(value) => emit('update:show', value)"
     :class="classes"
@@ -45,7 +46,8 @@ const classes = computed(() => [
     @deny="emit('deny')"
     @show="emit('show')"
     @hide="emit('hide')"
+
   >
     <slot />
-  </Modal>
+  </Modal> -->
 </template>

front/src/components/tags/List.vue

@@ -3,6 +3,8 @@ import { truncate } from '~/utils/filters'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import TagsList from '~/components/tags/List.vue'
+
 interface Props {
   tags: string[]
   showMore?: boolean

front/src/views/Search.vue

@@ -352,7 +352,7 @@ const radioConfig = computed(() => {
             :custom-radio="radio"
           />
         </div>
-        <tags-list
+        <TagsList
           v-else-if="type === 'tags'"
           :truncate-size="200"
           :limit="paginateBy"

front/src/views/admin/ChannelDetail.vue

@@ -116,7 +116,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 </div>
               </h2>
               <template v-if="object.artist.tags && object.artist.tags.length > 0">
-                <tags-list
+                <TagsList
                   :limit="5"
                   detail-route="manage.library.tags.detail"
                   :tags="object.artist.tags"

front/src/views/admin/library/AlbumDetail.vue

@@ -117,7 +117,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               </h2>
 
               <template v-if="object.tags && object.tags.length > 0">
-                <tags-list
+                <TagsList
                   :limit="5"
                   detail-route="manage.library.tags.detail"
                   :tags="object.tags"

front/src/views/admin/library/ArtistDetail.vue

@@ -116,7 +116,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 </div>
               </h2>
               <template v-if="object.tags && object.tags.length > 0">
-                <tags-list
+                <TagsList
                   :limit="5"
                   detail-route="manage.library.tags.detail"
                   :tags="object.tags"

front/src/views/admin/library/TrackDetail.vue

@@ -117,7 +117,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
               </h2>
 
               <template v-if="track.tags && track.tags.length > 0">
-                <tags-list
+                <TagsList
                   :limit="5"
                   detail-route="manage.library.tags.detail"
                   :tags="track.tags"

front/src/views/channels/DetailBase.vue

@@ -159,7 +159,7 @@ const updateSubscriptionCount = (delta: number) => {
                 />
               </div>
               <div class="ui column right aligned">
-                <tags-list
+                <TagsList
                   v-if="object.artist?.tags && object.artist?.tags.length > 0"
                   :tags="object.artist.tags"
                 />

front/src/views/content/channels/CardUpload.vue

@@ -57,7 +57,7 @@ const updatedAgo = computed(() => moment(props.channel.artist?.modification_date
         >
           {{ t('components.audio.ChannelCard.meta.tracks', channel.artist?.tracks_count ?? 0) }}
         </span>
-        <tags-list
+        <TagsList
           style="pointer-events:none;"
           label-classes="tiny"
           :truncate-size="20"