(refactor): replaced album cards

front/src/components/Home.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { get } from 'lodash-es'
-import AlbumWidget from '~/components/audio/album/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import LoginForm from '~/components/auth/LoginForm.vue'
 import SignupForm from '~/components/auth/SignupForm.vue'

front/src/components/album/Card.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { FwCard, FwPlayButton, FwOptionsButton } from '~/components'
 import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 
-import type { Album } from '~/types/models'
+import type { Album } from '~/types'
-
-const { t } = useI18n()
 
 const play = defineEmit<[album: Album]>()
-const album = defineProp<Album>('album', { required: true })
+
+interface Props {
+  album: Album;
+}
+
+const props = defineProps<Props>()
+
+const { album } = props
 
 let navigate = (to: 'artist' | 'album') => {}
 
@@ -22,30 +25,68 @@ if (import.meta.env.PROD) {
 
 <template>
   <fw-card
-    :title="album.name"
+    :title="album.title"
-    :image="album.cover.urls.original"
+    :image="album.cover?.urls.original"
-    @click="navigate('album')"
     class="album-card"
   >
     <fw-play-button @play="play(album)" />
 
     <a
-    v-for="ac in album.artistCredit"
+      v-for="ac in album.artist_credit"
       :key="ac.artist.id"
-    @click.stop="navigate('artist')"
       class="funkwhale link"
+      @click.stop="navigate('artist')"
     >
-    {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
+      {{ ac.credit ?? $t('components.Queue.meta.unknownArtist') }}
-    <!-- {{ ac.joinphrase }} -->
+      {{ ac.joinphrase }}
     </a>
 
+    <tags-list
+      label-classes="tiny"
+      :truncate-size="20"
+      :limit="2"
+      :show-more="false"
+      :tags="album.tags"
+    />
+
+    <router-link
+      class="discrete link"
+      :to="{name: 'library.albums.detail', params: {id: album.id}}"
+    >
+      Go to album
+    </router-link>
+
     <template #footer>
-      {{ t('vui.tracks', album.tracks.length) }}
+      {{ $t('components.audio.album.Card.meta.tracks', album.tracks?.length || 0) }}
       <fw-options-button />
     </template>
   </fw-card>
 </template>
 
-<style lang="scss">
+<style scoped>
-@import './style.scss'
+.funkwhale {
+  &.card.album-card {
+    --fw-border-radius: 12px;
+    --fw-card-width: 208px;
+    --fw-card-image-width: var(--fw-card-width);
+    --fw-card-padding: 16px;
+
+    > .card-image {
+      border-radius: 0 !important;
+      width: var(--fw-card-image-width);
+      margin: calc(-1 * var(--fw-card-padding)) calc(-1 * var(--fw-card-padding)) 0;
+    }
+
+    > .card-title {
+      font-size: 1rem;
+      text-align: left !important;
+      padding-top: 16px !important;
+    }
+
+    > .card-content {
+      padding-top: 0 !important;
+      text-align: left !important;
+    }
+  }
+}
 </style>

front/src/components/album/Widget.vue

@@ -6,7 +6,7 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -66,6 +66,7 @@ watch(
 
 <template>
   <div class="wrapper">
+  front/src/components/album/Widget.vue
     <h3
       v-if="!!$slots.title"
       class="ui header"

front/src/components/album/style.scss

@@ -1,25 +0,0 @@
-.funkwhale {
-  &.card.album-card {
-    --fw-border-radius: 12px;
-    --fw-card-width: 208px;
-    --fw-card-image-width: var(--fw-card-width);
-    --fw-card-padding: 16px;
-
-    > .card-image {
-      border-radius: 0 !important;
-      width: var(--fw-card-image-width);
-      margin: calc(-1 * var(--fw-card-padding)) calc(-1 * var(--fw-card-padding)) 0;
-    }
-
-    > .card-title {
-      font-size: 1rem;
-      text-align: left !important;
-      padding-top: 16px !important;
-    }
-
-    > .card-content {
-      padding-top: 0 !important;
-      text-align: left !important;
-    }
-  }
-}

front/src/components/audio/ChannelSeries.vue

@@ -6,7 +6,7 @@ import { ref, reactive } from 'vue'
 
 import axios from 'axios'
 import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 
 interface Props {
   filters: object

front/src/components/audio/Search.vue

@@ -6,7 +6,7 @@ import { ref, computed, reactive, watch, onMounted } from 'vue'
 import { refDebounced } from '@vueuse/core'
 
 import axios from 'axios'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'

front/src/components/library/Albums.vue

@@ -15,7 +15,7 @@ import axios from 'axios'
 import $ from 'jquery'
 
 import TagsSelector from '~/components/library/TagsSelector.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -203,7 +203,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </div>
         </div>
       </form>
-      <div class="ui hidden divider" />
       <div
         v-if="result"
         transition-duration="0"
@@ -214,7 +213,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div
           v-if="result.results.length > 0"
-          class="ui app-cards cards"
+          style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
         >
           <album-card
             v-for="album in result.results"

front/src/components/library/ArtistDetail.vue

@@ -9,7 +9,7 @@ import axios from 'axios'
 
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 

front/src/components/library/Home.vue

@@ -8,7 +8,7 @@ import axios from 'axios'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import PlaylistWidget from '~/components/playlists/Widget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
-import AlbumWidget from '~/components/audio/album/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'

front/src/components/library/TagDetail.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
-import AlbumWidget from '~/components/audio/album/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 import ArtistWidget from '~/components/audio/artist/Widget.vue'
 import RadioButton from '~/components/radios/Button.vue'
 

front/src/views/Search.vue

@@ -12,7 +12,7 @@ import PlaylistCardList from '~/components/playlists/CardList.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import RadioCard from '~/components/radios/Card.vue'

front/src/views/library/DetailAlbums.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Library } from '~/types'
 
-import AlbumWidget from '~/components/audio/album/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 
 interface Props {
   object: Library