From c8dbdf9053c2b20646a2c7f0b042df6d1c844c98 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Sun, 23 Oct 2022 19:52:07 +0200
Subject: [PATCH] chore: slotify album/artist cards (#1545)

---
 .../assets/js/components/album/AlbumCard.vue  |  76 ++++++------
 .../__snapshots__/AlbumCard.spec.ts.snap      |   7 +-
 .../js/components/artist/ArtistCard.vue       |  75 +++++-------
 .../__snapshots__/ArtistCard.spec.ts.snap     |   8 +-
 .../screens/AlbumListScreen.spec.ts           |  10 +-
 .../screens/ArtistListScreen.spec.ts          |  10 +-
 .../screens/home/MostPlayedAlbums.spec.ts     |   8 +-
 .../screens/home/MostPlayedArtists.spec.ts    |   8 +-
 .../screens/home/RecentlyAddedAlbums.spec.ts  |   8 +-
 .../js/components/ui/ArtistAlbumCard.vue      | 115 ++++++++++++++++++
 resources/assets/sass/partials/_mixins.scss   | 100 ---------------
 resources/assets/sass/partials/_shared.scss   |   8 ++
 12 files changed, 236 insertions(+), 197 deletions(-)
 create mode 100644 resources/assets/js/components/ui/ArtistAlbumCard.vue

diff --git a/resources/assets/js/components/album/AlbumCard.vue b/resources/assets/js/components/album/AlbumCard.vue
index 2ebd76d9..5d260601 100644
--- a/resources/assets/js/components/album/AlbumCard.vue
+++ b/resources/assets/js/components/album/AlbumCard.vue
@@ -1,47 +1,43 @@
 <template>
-  <article
+  <ArtistAlbumCard
     v-if="showing"
-    :class="layout"
+    :entity="album"
     :title="`${album.name} by ${album.artist_name}`"
-    class="item"
-    data-testid="album-card"
-    draggable="true"
-    tabindex="0"
+    :layout="layout"
+    @contextmenu="requestContextMenu"
     @dblclick="shuffle"
     @dragstart="onDragStart"
-    @contextmenu.prevent="requestContextMenu"
   >
-    <AlbumThumbnail :entity="album"/>
-
-    <footer>
-      <a :href="`#/album/${album.id}`" class="name" data-testid="name">{{ album.name }}</a>
-      <a v-if="isStandardArtist" :href="`#/artist/${album.artist_id}`" class="artist">{{ album.artist_name }}</a>
+    <template #name>
+      <a :href="`#/album/${album.id}`" class="text-normal" data-testid="name">{{ album.name }}</a>
+      <a v-if="isStandardArtist" :href="`#/artist/${album.artist_id}`">{{ album.artist_name }}</a>
       <span v-else class="text-secondary">{{ album.artist_name }}</span>
-      <p class="meta">
-        <a
-          :title="`Shuffle all songs in the album ${album.name}`"
-          class="shuffle-album"
-          data-testid="shuffle-album"
-          href
-          role="button"
-          @click.prevent="shuffle"
-        >
-          Shuffle
-        </a>
-        <a
-          v-if="allowDownload"
-          :title="`Download all songs in the album ${album.name}`"
-          class="download-album"
-          data-testid="download-album"
-          href
-          role="button"
-          @click.prevent="download"
-        >
-          Download
-        </a>
-      </p>
-    </footer>
-  </article>
+    </template>
+
+    <template #meta>
+      <a
+        :title="`Shuffle all songs in the album ${album.name}`"
+        class="shuffle-album"
+        data-testid="shuffle-album"
+        href
+        role="button"
+        @click.prevent="shuffle"
+      >
+        Shuffle
+      </a>
+      <a
+        v-if="allowDownload"
+        :title="`Download all songs in the album ${album.name}`"
+        class="download-album"
+        data-testid="download-album"
+        href
+        role="button"
+        @click.prevent="download"
+      >
+        Download
+      </a>
+    </template>
+  </ArtistAlbumCard>
 </template>
 
 <script lang="ts" setup>
@@ -52,7 +48,7 @@ import { downloadService, playbackService } from '@/services'
 import { useDraggable } from '@/composables'
 import { RouterKey } from '@/symbols'
 
-import AlbumThumbnail from '@/components/ui/AlbumArtistThumbnail.vue'
+import ArtistAlbumCard from '@/components/ui/ArtistAlbumCard.vue'
 
 const router = requireInjection(RouterKey)
 
@@ -76,7 +72,3 @@ const download = () => downloadService.fromAlbum(album.value)
 const onDragStart = (event: DragEvent) => startDragging(event, album.value)
 const requestContextMenu = (event: MouseEvent) => eventBus.emit('ALBUM_CONTEXT_MENU_REQUESTED', event, album.value)
 </script>
-
-<style lang="scss" scoped>
-@include artist-album-card();
-</style>
diff --git a/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap b/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
index 62e3cee9..81a94548 100644
--- a/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
+++ b/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
@@ -1,9 +1,10 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article class="full item" title="IV by Led Zeppelin" data-testid="album-card" draggable="true" tabindex="0" data-v-b204153b=""><span class="cover" data-testid="album-artist-thumbnail" data-v-e37470a2="" data-v-b204153b=""><a class="control control-play" href="" role="button" data-v-e37470a2=""><span class="hidden" data-v-e37470a2="">Play all songs in the album IV</span><span class="icon" data-v-e37470a2=""></span></a></span>
-  <footer data-v-b204153b=""><a href="#/album/42" class="name" data-testid="name" data-v-b204153b="">IV</a><a href="#/artist/17" class="artist" data-v-b204153b="">Led Zeppelin</a>
-    <p class="meta" data-v-b204153b=""><a title="Shuffle all songs in the album IV" class="shuffle-album" data-testid="shuffle-album" href="" role="button" data-v-b204153b=""> Shuffle </a><a title="Download all songs in the album IV" class="download-album" data-testid="download-album" href="" role="button" data-v-b204153b=""> Download </a></p>
+<article class="item full" draggable="true" tabindex="0" title="IV by Led Zeppelin" data-v-f01bdc56=""><span class="cover" data-testid="album-artist-thumbnail" data-v-e37470a2="" data-v-f01bdc56=""><a class="control control-play" href="" role="button" data-v-e37470a2=""><span class="hidden" data-v-e37470a2="">Play all songs in the album IV</span><span class="icon" data-v-e37470a2=""></span></a></span>
+  <footer data-v-f01bdc56="">
+    <div class="name" data-v-f01bdc56=""><a href="#/album/42" class="text-normal" data-testid="name">IV</a><a href="#/artist/17">Led Zeppelin</a></div>
+    <p class="meta" data-v-f01bdc56=""><a title="Shuffle all songs in the album IV" class="shuffle-album" data-testid="shuffle-album" href="" role="button"> Shuffle </a><a title="Download all songs in the album IV" class="download-album" data-testid="download-album" href="" role="button"> Download </a></p>
   </footer>
 </article>
 `;
diff --git a/resources/assets/js/components/artist/ArtistCard.vue b/resources/assets/js/components/artist/ArtistCard.vue
index adaf3a42..7ffbdf83 100644
--- a/resources/assets/js/components/artist/ArtistCard.vue
+++ b/resources/assets/js/components/artist/ArtistCard.vue
@@ -1,47 +1,40 @@
 <template>
-  <article
+  <ArtistAlbumCard
     v-if="showing"
-    :class="layout"
+    :entity="artist"
+    :layout="layout"
     :title="artist.name"
-    class="item"
-    data-testid="artist-card"
-    draggable="true"
-    tabindex="0"
+    @contextmenu="requestContextMenu"
     @dblclick="shuffle"
     @dragstart="onDragStart"
-    @contextmenu.prevent="requestContextMenu"
   >
-    <ArtistThumbnail :entity="artist"/>
-
-    <footer>
-      <div class="info">
-        <a :href="`#/artist/${artist.id}`" class="name" data-testid="name">{{ artist.name }}</a>
-      </div>
-      <p class="meta">
-        <a
-          :title="`Shuffle all songs by ${artist.name}`"
-          class="shuffle-artist"
-          data-testid="shuffle-artist"
-          href
-          role="button"
-          @click.prevent="shuffle"
-        >
-          Shuffle
-        </a>
-        <a
-          v-if="allowDownload"
-          :title="`Download all songs by ${artist.name}`"
-          class="download-artist"
-          data-testid="download-artist"
-          href
-          role="button"
-          @click.prevent="download"
-        >
-          Download
-        </a>
-      </p>
-    </footer>
-  </article>
+    <template #name>
+      <a :href="`#/artist/${artist.id}`" class="text-normal" data-testid="name">{{ artist.name }}</a>
+    </template>
+    <template #meta>
+      <a
+        :title="`Shuffle all songs by ${artist.name}`"
+        class="shuffle-artist"
+        data-testid="shuffle-artist"
+        href
+        role="button"
+        @click.prevent="shuffle"
+      >
+        Shuffle
+      </a>
+      <a
+        v-if="allowDownload"
+        :title="`Download all songs by ${artist.name}`"
+        class="download-artist"
+        data-testid="download-artist"
+        href
+        role="button"
+        @click.prevent="download"
+      >
+        Download
+      </a>
+    </template>
+  </ArtistAlbumCard>
 </template>
 
 <script lang="ts" setup>
@@ -52,7 +45,7 @@ import { downloadService, playbackService } from '@/services'
 import { useDraggable } from '@/composables'
 import { RouterKey } from '@/symbols'
 
-import ArtistThumbnail from '@/components/ui/AlbumArtistThumbnail.vue'
+import ArtistAlbumCard from '@/components/ui/ArtistAlbumCard.vue'
 
 const router = requireInjection(RouterKey)
 
@@ -74,7 +67,3 @@ const download = () => downloadService.fromArtist(artist.value)
 const onDragStart = (event: DragEvent) => startDragging(event, artist.value)
 const requestContextMenu = (event: MouseEvent) => eventBus.emit('ARTIST_CONTEXT_MENU_REQUESTED', event, artist.value)
 </script>
-
-<style lang="scss" scoped>
-@include artist-album-card();
-</style>
diff --git a/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap b/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
index 8a33d154..a13d098a 100644
--- a/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
+++ b/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article class="full item" title="Led Zeppelin" data-testid="artist-card" draggable="true" tabindex="0" data-v-85d5de45=""><span class="cover" data-testid="album-artist-thumbnail" data-v-e37470a2="" data-v-85d5de45=""><a class="control control-play" href="" role="button" data-v-e37470a2=""><span class="hidden" data-v-e37470a2="">Play all songs by Led Zeppelin</span><span class="icon" data-v-e37470a2=""></span></a></span>
-  <footer data-v-85d5de45="">
-    <div class="info" data-v-85d5de45=""><a href="#/artist/42" class="name" data-testid="name" data-v-85d5de45="">Led Zeppelin</a></div>
-    <p class="meta" data-v-85d5de45=""><a title="Shuffle all songs by Led Zeppelin" class="shuffle-artist" data-testid="shuffle-artist" href="" role="button" data-v-85d5de45=""> Shuffle </a><a title="Download all songs by Led Zeppelin" class="download-artist" data-testid="download-artist" href="" role="button" data-v-85d5de45=""> Download </a></p>
+<article class="item full" draggable="true" tabindex="0" title="Led Zeppelin" data-v-f01bdc56=""><span class="cover" data-testid="album-artist-thumbnail" data-v-e37470a2="" data-v-f01bdc56=""><a class="control control-play" href="" role="button" data-v-e37470a2=""><span class="hidden" data-v-e37470a2="">Play all songs by Led Zeppelin</span><span class="icon" data-v-e37470a2=""></span></a></span>
+  <footer data-v-f01bdc56="">
+    <div class="name" data-v-f01bdc56=""><a href="#/artist/42" class="text-normal" data-testid="name">Led Zeppelin</a></div>
+    <p class="meta" data-v-f01bdc56=""><a title="Shuffle all songs by Led Zeppelin" class="shuffle-artist" data-testid="shuffle-artist" href="" role="button"> Shuffle </a><a title="Download all songs by Led Zeppelin" class="download-artist" data-testid="download-artist" href="" role="button"> Download </a></p>
   </footer>
 </article>
 `;
diff --git a/resources/assets/js/components/screens/AlbumListScreen.spec.ts b/resources/assets/js/components/screens/AlbumListScreen.spec.ts
index 85bbc047..319c8f63 100644
--- a/resources/assets/js/components/screens/AlbumListScreen.spec.ts
+++ b/resources/assets/js/components/screens/AlbumListScreen.spec.ts
@@ -12,7 +12,15 @@ new class extends UnitTestCase {
 
   private async renderComponent () {
     albumStore.state.albums = factory<Album>('album', 9)
-    const rendered = this.render(AlbumListScreen)
+
+    const rendered = this.render(AlbumListScreen, {
+      global: {
+        stubs: {
+          AlbumCard: this.stub('album-card')
+        }
+      }
+    })
+
     await this.router.activateRoute({ path: 'albums', screen: 'Albums' })
     return rendered
   }
diff --git a/resources/assets/js/components/screens/ArtistListScreen.spec.ts b/resources/assets/js/components/screens/ArtistListScreen.spec.ts
index c0726ae9..c85bc774 100644
--- a/resources/assets/js/components/screens/ArtistListScreen.spec.ts
+++ b/resources/assets/js/components/screens/ArtistListScreen.spec.ts
@@ -12,7 +12,15 @@ new class extends UnitTestCase {
 
   private async renderComponent () {
     artistStore.state.artists = factory<Artist>('artist', 9)
-    const rendered = this.render(ArtistListScreen)
+
+    const rendered = this.render(ArtistListScreen, {
+      global: {
+        stubs: {
+          ArtistCard: this.stub('artist-card')
+        }
+      }
+    })
+
     await this.router.activateRoute({ path: 'artists', screen: 'Artists' })
     return rendered
   }
diff --git a/resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts b/resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts
index 4358fb12..9ec2de14 100644
--- a/resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts
+++ b/resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts
@@ -8,7 +8,13 @@ new class extends UnitTestCase {
   protected test () {
     it('displays the albums', () => {
       overviewStore.state.mostPlayedAlbums = factory<Album>('album', 6)
-      expect(this.render(MostPlayedAlbums).getAllByTestId('album-card')).toHaveLength(6)
+      expect(this.render(MostPlayedAlbums, {
+        global: {
+          stubs: {
+            AlbumCard: this.stub('album-card')
+          }
+        }
+      }).getAllByTestId('album-card')).toHaveLength(6)
     })
   }
 }
diff --git a/resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts b/resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts
index 9c0fc380..c1f8ae7a 100644
--- a/resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts
+++ b/resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts
@@ -8,7 +8,13 @@ new class extends UnitTestCase {
   protected test () {
     it('displays the artists', () => {
       overviewStore.state.mostPlayedArtists = factory<Artist>('artist', 6)
-      expect(this.render(MostPlayedArtists).getAllByTestId('artist-card')).toHaveLength(6)
+      expect(this.render(MostPlayedArtists, {
+        global: {
+          stubs: {
+            ArtistCard: this.stub('artist-card')
+          }
+        }
+      }).getAllByTestId('artist-card')).toHaveLength(6)
     })
   }
 }
diff --git a/resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts b/resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts
index 53ade630..18dee5a4 100644
--- a/resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts
+++ b/resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts
@@ -8,7 +8,13 @@ new class extends UnitTestCase {
   protected test () {
     it('displays the albums', () => {
       overviewStore.state.recentlyAddedAlbums = factory<Album>('album', 6)
-      expect(this.render(RecentlyAddedAlbums).getAllByTestId('album-card')).toHaveLength(6)
+      expect(this.render(RecentlyAddedAlbums, {
+        global: {
+          stubs: {
+            AlbumCard: this.stub('album-card')
+          }
+        }
+      }).getAllByTestId('album-card')).toHaveLength(6)
     })
   }
 }
diff --git a/resources/assets/js/components/ui/ArtistAlbumCard.vue b/resources/assets/js/components/ui/ArtistAlbumCard.vue
new file mode 100644
index 00000000..7f3dd954
--- /dev/null
+++ b/resources/assets/js/components/ui/ArtistAlbumCard.vue
@@ -0,0 +1,115 @@
+<template>
+  <article
+    class="item"
+    :class="layout"
+    draggable="true"
+    tabindex="0"
+    @dblclick="onDblClick"
+    @dragstart="onDragStart"
+    @contextmenu.prevent="onContextMenu"
+  >
+    <AlbumArtistThumbnail :entity="entity"/>
+    <footer>
+      <div class="name">
+        <slot name="name"/>
+      </div>
+      <p class="meta">
+        <slot name="meta"/>
+      </p>
+    </footer>
+  </article>
+</template>
+
+<script lang="ts" setup>
+import AlbumArtistThumbnail from '@/components/ui/AlbumArtistThumbnail.vue'
+
+const props = withDefaults(
+  defineProps<{ layout?: ArtistAlbumCardLayout, entity: Artist | Album }>(),
+  { layout: 'full' }
+)
+
+const emit = defineEmits(['dblclick', 'contextmenu', 'dragstart'])
+
+const onDblClick = () => emit('dblclick')
+const onDragStart = (e: DragEvent) => emit('dragstart', e)
+const onContextMenu = (e: MouseEvent) => emit('contextmenu', e)
+</script>
+
+<style lang="scss" scoped>
+.item {
+  position: relative;
+  max-width: 256px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-bg-secondary);
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  .name {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    white-space: nowrap;
+
+    ::v-deep(a:link) {
+      color: var(--color-text-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &:focus, &:focus-within {
+    box-shadow: 0 0 1px 1px var(--color-accent);
+  }
+
+  &.compact {
+    gap: 1rem;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+
+    .cover {
+      width: 80px;
+      border-radius: 5px;
+    }
+  }
+
+  footer {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: .4rem;
+  }
+
+  .meta {
+    font-size: .9rem;
+    display: flex;
+    gap: .3rem;
+    opacity: .7;
+
+    ::v-deep(a) {
+      & + a {
+        &::before {
+          content: '•';
+          margin-right: .2rem;
+          color: var(--color-text-secondary);
+          font-weight: unset;
+        }
+      }
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  @media only screen and (max-width: 768px) {
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/resources/assets/sass/partials/_mixins.scss b/resources/assets/sass/partials/_mixins.scss
index 9248a806..899e860e 100644
--- a/resources/assets/sass/partials/_mixins.scss
+++ b/resources/assets/sass/partials/_mixins.scss
@@ -24,106 +24,6 @@
   }
 }
 
-@mixin artist-album-card() {
-  .item {
-    position: relative;
-    max-width: 256px;
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-bg-secondary);
-    padding: 16px;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-
-    @media only screen and (max-width: 768px) {
-      max-width: 100%;
-    }
-
-    &:focus, &:focus-within {
-      box-shadow: 0 0 1px 1px var(--color-accent);
-    }
-
-    &:hover .right, &:focus-within .right {
-      display: flex !important;
-    }
-
-    &.compact {
-      gap: 1rem;
-      flex-direction: row;
-      align-items: center;
-      max-width: 100%;
-      padding: 10px;
-      border-radius: 5px;
-
-      .cover {
-        width: 80px;
-        border-radius: 5px;
-      }
-    }
-
-    footer {
-      flex: 1;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      gap: .4rem;
-    }
-
-    .name {
-      font-weight: var(--font-weight-normal);
-    }
-
-    .meta {
-      color: var(--color-text-secondary);
-      font-size: .9rem;
-      display: flex;
-      gap: .3rem;
-      opacity: .7;
-
-      a {
-        border-radius: 3px;
-
-        & + a {
-          &::before {
-            content: '•';
-            margin-right: .2rem;
-            color: var(--color-text-secondary);
-            font-weight: unset;
-          }
-        }
-      }
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    a.name, a.artist {
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &:link, &:visited {
-        color: var(--color-text-primary);
-      }
-
-      &:focus, &:hover {
-        color: var(--color-accent);
-      }
-    }
-
-    .info {
-      .compact & {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-}
-
 @mixin artist-album-info-wrapper() {
   .loading {
     @include vertical-center();
diff --git a/resources/assets/sass/partials/_shared.scss b/resources/assets/sass/partials/_shared.scss
index 7f5a74f1..1189a881 100644
--- a/resources/assets/sass/partials/_shared.scss
+++ b/resources/assets/sass/partials/_shared.scss
@@ -241,6 +241,14 @@ label {
     font-weight: var(--font-weight-thin) !important;
   }
 
+  &normal {
+    font-weight: var(--font-weight-normal) !important;
+  }
+
+  &light {
+    font-weight: var(--font-weight-light) !important;
+  }
+
   &bold {
     font-weight: var(--font-weight-bold) !important;
   }