Add album card

docs/.vitepress/config.ts

@@ -23,6 +23,7 @@ export default defineConfig({
             { text: "Basic Card", link: "/components/card/basic" },
             { text: "Radio Card", link: "/components/card/radio" },
             { text: "Artist Card", link: "/components/card/artist" },
+            { text: "Album Card", link: "/components/card/album" },
           ] },
         ]
       }

docs/components/card/album.md

+<script setup lang="ts">
+const album = {
+  name: 'Relatively Long Album Name',
+  artist: {
+    name: 'Artist Name'
+  },
+  tracks: [{}, {}, {}, {}],
+  cover: {
+    urls: {
+      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
+    }
+  }
+}
+</script>
+
+# Album card
+## Normal card
+```html
+<fw-album-card :album="album" />
+```
+<fw-album-card :album="album" />

src/components/card/album/Card.vue

+<script setup lang="ts">
+import { FwCard, FwPlayButton, FwOptionsButton } from '~/components'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+interface Album {
+  id: number
+  name: string
+  artist: {
+    id: number
+    name: string
+  }
+  tracks: object[]
+  cover: {
+    urls: {
+      original: string
+    }
+  }
+}
+
+interface Events {
+  (e: 'play', album: Album): void
+}
+
+interface Props {
+  album: Album
+}
+
+const emit = defineEmits<Events>()
+const props = defineProps<Props>()
+
+let navigate = (to: 'artist' | 'album') => {}
+
+if (import.meta.env.PROD) {
+  const router = useRouter()
+  navigate = (to: 'artist' | 'album') => to === 'album'
+    ? router.push({ name: 'library.albums.detail', params: { id: props.album.id } })
+    : router.push({ name: 'library.artists.detail', params: { id: props.album.artist.id } })
+}
+</script>
+
+<template>
+  <fw-card
+    :title="album.name"
+    :image="album.cover.urls.original"
+    @click="navigate('album')"
+    class="album-card"
+  >
+    <fw-play-button @play="emit('play', album)" />
+
+    <a
+      @click.stop="navigate('artist')"
+      class="funkwhale link artist-link"
+    >
+      {{ album.artist.name }}
+    </a>
+
+    <div class="card-footer">
+      {{ t('vui.tracks', album.tracks.length) }}
+      <fw-options-button />
+    </div>
+  </fw-card>
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/card/album/style.scss

+.funkwhale {
+  &.card.album-card {
+    --fw-card-width: 208px;
+
+    position: relative;
+    width: var(--fw-card-width);
+    padding-bottom: 14px;
+
+    &:hover {
+      .play-button {
+        opacity: 1 !important;
+        transform: translateX(6px) !important;
+      }
+
+      .options-button {
+        opacity: 1 !important;
+        transform: translate(12px) !important;
+      }
+    }
+
+    .play-button,
+    .options-button {
+      opacity: 0;
+    }
+
+    .options-button {
+      transform: translateX(6px) !important;
+      transition-delay: .1s;
+    }
+
+    --fw-image-width: var(--fw-card-width);
+    > .card-image {
+      border-radius: 0 !important;
+      height: var(--fw-image-width);
+      width: var(--fw-image-width);
+      max-width: var(--fw-image-width);
+      margin: -24px -24px 0;
+    }
+
+    > .card-title {
+      font-size: 1rem;
+      text-align: left !important;
+      padding-top: 16px !important;
+    }
+
+    > .card-content {
+      padding-top: 0 !important;
+      text-align: left !important;
+
+      > .artist-link {
+        font-size: 0.875rem;
+        --fw-link-color: var(--fw-text-color);
+      }
+
+      > .play-button {
+        position: absolute;
+        right: 8px;
+        top: calc(var(--fw-image-width) - 8px - 44px);
+      }
+
+      > .card-footer {
+        display: flex;
+        align-items: center;
+        color: var(--fw-grey-700);
+        font-size: 0.8125rem;
+        padding-top: 6px;
+
+        > .options-button {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}

src/components/card/artist/style.scss

 .funkwhale {
   &.card.artist-card {
+    --fw-card-width: 208px;
+
     position: relative;
-    width: 208px;
+    width: var(--fw-card-width);
     padding-bottom: 14px;
 
     &:hover {
@@ -26,11 +28,12 @@
       transition-delay: .1s;
     }
 
+    --fw-image-width: calc(var(--fw-card-width) - 16px);
     > .card-image {
       border-radius: 50%;
-      height: 192px;
-      width: 192px;
-      max-width: 192px;
+      height: var(--fw-image-width);
+      width: var(--fw-image-width);
+      max-width: var(--fw-image-width);
       margin: -16px -16px 0;
     }
 
@@ -42,8 +45,6 @@
     > .card-content {
       padding-top: 6px !important;
       text-align: left !important;
-      color: var(--fw-grey-700);
-      font-size: 0.8125rem;
 
       > .card-tags {
         font-size: 0.875rem;
@@ -55,12 +56,14 @@
       > .play-button {
         position: absolute;
         right: 8px;
-        top: 8px + 192px - 44px;
+        top: calc(8px + var(--fw-image-width) - 44px);
       }
 
       > .card-footer {
         display: flex;
         align-items: center;
+        color: var(--fw-grey-700);
+        font-size: 0.8125rem;
 
         > .options-button {
           margin-left: auto;

src/components/card/style.scss

@@ -30,6 +30,10 @@
       font-size: 1.125em;
       font-weight: bold;
 
+      text-overflow: ellipsis;
+      white-space: pre;
+      overflow: hidden;
+
       + .card-content {
         padding-top: 16px;
       }

src/components/index.ts

@@ -3,6 +3,7 @@ export { default as FwPlayButton } from './button/play/Button.vue'
 export { default as FwButton } from './button/Button.vue'
 
 export { default as FwArtistCard } from './card/artist/Card.vue'
+export { default as FwAlbumCard } from './card/album/Card.vue'
 export { default as FwRadioCard } from './card/radio/Card.vue'
 export { default as FwCard } from './card/Card.vue'
 

src/locales/en.yaml

 vui:
   radio: Radio
   albums: '{n} album | {n} albums'
+  tracks: '{n} track | {n} tracks'

src/styles/base/generic.scss

 // Links
+.funkwhale.link,
 a {
-  color: var(--fw-blue-500);
-  text-decoration: underline;
+  --fw-link-color: var(--fw-blue-500);
 
-  &:hover,
-  &.is-hovered {
-    color: var(--fw-blue-600);
-  }
+  &:not(.VPLink):not(.vp-doc .header-anchor):not(.VPDocAsideOutline .outline-link):not(.VPNavBarTitle .title) {
+    color: var(--fw-link-color);
+
+    &:hover,
+    &.is-hovered {
+      --fw-link-color: var(--fw-blue-600);
+      text-decoration: underline;
+    }
 
-  &:visited {
-    color: var(--fw-blue-700);
+    &:visited {
+      --fw-link-color: var(--fw-blue-700);
+    }
   }
 }