From c57b47bdd3686fd4d888ac8a09a3819c0c766aeb Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Tue, 21 Jan 2025 21:21:15 +0100
Subject: [PATCH] chore(front): Update track detail views with new components

---
 front/src/components/album/Widget.vue        |  93 ++--
 front/src/components/audio/track/Widget.vue  |   7 +-
 front/src/components/library/TrackBase.vue   | 448 ++++++++++---------
 front/src/components/library/TrackDetail.vue | 333 ++++----------
 front/src/components/playlists/Card.vue      | 113 +++--
 front/src/components/playlists/Widget.vue    |  50 ++-
 6 files changed, 492 insertions(+), 552 deletions(-)

diff --git a/front/src/components/album/Widget.vue b/front/src/components/album/Widget.vue
index bf1d87b81..73236e20e 100644
--- a/front/src/components/album/Widget.vue
+++ b/front/src/components/album/Widget.vue
@@ -10,6 +10,7 @@ import axios from 'axios'
 
 import AlbumCard from '~/components/album/Card.vue'
 import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -70,54 +71,52 @@ watch(
 </script>
 
 <template>
-  <div class="wrapper">
-  front/src/components/album/Widget.vue
-    <h3
-      v-if="!!$slots.title"
-      class="ui header"
+  <h3
+    v-if="!!$slots.title"
+    class="ui header"
+  >
+    <slot name="title" />
+    <span
+      v-if="showCount"
+      class="ui tiny circular label"
+    >{{ count }}</span>
+  </h3>
+  <slot />
+  <inline-search-bar
+    v-if="search"
+    v-model="query"
+    @search="performSearch"
+  />
+  <div style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;">
+    <div
+      v-if="isLoading"
+      class="ui inverted active dimmer"
     >
-      <slot name="title" />
-      <span
-        v-if="showCount"
-        class="ui tiny circular label"
-      >{{ count }}</span>
-    </h3>
-    <slot />
-    <inline-search-bar
-      v-if="search"
-      v-model="query"
-      @search="performSearch"
-    />
-    <div style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;">
-      <div
-        v-if="isLoading"
-        class="ui inverted active dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <album-card
-        v-for="album in albums"
-        :key="album.id"
-        :album="album"
-      />
+      <div class="ui loader" />
     </div>
-    <slot
-      v-if="!isLoading && albums.length === 0"
-      name="empty-state"
-    >
-      <empty-state
-        :refresh="true"
-        @refresh="fetchData"
-      />
-    </slot>
-    <template v-if="nextPage">
-      <div class="ui hidden divider" />
-      <Button
-        v-if="nextPage"
-        @click="fetchData(nextPage)"
-      >
-        {{ t('components.audio.album.Widget.button.more') }}
-      </Button>
-    </template>
+    <album-card
+      v-for="album in albums"
+      :key="album.id"
+      :album="album"
+    />
   </div>
+  <slot
+    v-if="!isLoading && albums.length === 0"
+    name="empty-state"
+  >
+    <empty-state
+      :refresh="true"
+      @refresh="fetchData"
+    />
+  </slot>
+  <template v-if="nextPage">
+    <Spacer />
+    <Button
+      v-if="nextPage"
+      primary
+      @click="fetchData(nextPage)"
+    >
+      {{ t('components.audio.album.Widget.button.more') }}
+    </Button>
+  </template>
 </template>
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index f765dfc37..1ecd5bb71 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -130,6 +130,7 @@ watch(
 </script>
 
 <template>
+<!-- TODO: Use activity.vue -->
   <div class="component-track-widget">
     <h3 v-if="!!$slots.title">
       <slot name="title" />
@@ -164,11 +165,7 @@ watch(
             v-else
             class="bi bi-vinyl-fill"
           />
-          <PlayButton
-            class="play-overlay"
-            :icon-only="true"
-            :track="object.track"
-          />
+          <!-- TODO: Add Playbutton overlay -->
         </div>
         <div class="activity-content">
           <div class="track-title">
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index d5606c082..c4170b7cf 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -13,11 +13,17 @@ import axios from 'axios'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Modal from '~/components/ui/Modal.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
+import OptionsButton from '~/components/ui/button/Options.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import updateQueryString from '~/composables/updateQueryString'
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -40,6 +46,7 @@ const { report, getReportableObjects } = useReport()
 const track = ref<Track | null>(null)
 const artist = ref<Artist | null>(null)
 const showEmbedModal = ref(false)
+const showDeleteModal = ref(false)
 const libraries = ref([] as Library[])
 
 const logger = useLogger()
@@ -106,215 +113,252 @@ const remove = async () => {
 }
 
 const open = ref(false)
+
+watch(showDeleteModal, (newValue) => {
+  if (newValue) {
+    // NOTE: Explicitly close the popover when delete modal opens
+    open.value = false
+  }
+})
 </script>
 
 <template>
-  <main>
-    <div
-      v-if="isLoading"
-      v-title="labels.title"
-      class="ui vertical segment"
-    >
-      <div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
-    </div>
-    <template v-if="track">
-      <section
-        v-title="track.title"
-        :class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']"
+<Layout stack main>
+  <Loader
+    v-if="isLoading"
+    v-title="labels.title"
+  />
+  <template v-if="track">
+    <Layout flex>
+      <img
+        v-if="track.album && track.album.cover"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        alt=""
+        class="channel-image"
+      >
+      <img
+        v-else
+        alt=""
+        class="channel-image"
+        src="../../assets/audio/default-cover.png"
       >
-        <div class="ui basic padded segment">
-          <div class="ui stackable grid row container">
-            <div class="eight wide left aligned column">
-              <h1 class="ui header">
-                {{ track.title }}
-              </h1>
-              <span class="ui header">
-                <i18n-t
-                  v-if="track.attributed_to"
-                  keypath="components.library.TrackBase.subtitle.with-uploader"
-                >
-                  <a
-                    class="internal"
-                    :href="attributedToUrl"
-                  >
-                    <span class="symbol at" />{{ track.attributed_to.full_username }}
-                  </a>
-                  <time
-                    :title="track.creation_date"
-                    :datetime="track.creation_date"
-                  >
-                    {{ momentFormat(new Date(track.creation_date), 'LL') }}
-                  </time>
-                </i18n-t>
-                <i18n-t
-                  v-else
-                  keypath="components.library.TrackBase.subtitle.without-uploader"
-                >
-                  <time
-                    :title="track.creation_date"
-                    :datetime="track.creation_date"
-                  >
-                    {{ momentFormat(new Date(track.creation_date), 'LL') }}
-                  </time>
-                </i18n-t>
-              </span>
-            </div>
-            <div class="eight wide right aligned column button-group">
-              <PlayButton :track="track" />
-              <TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
-              <TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
 
-              <a
-                v-if="upload"
-                role="button"
-                :aria-label="labels.download"
-                :href="downloadUrl"
-                target="_blank"
-                class="ui basic circular icon button"
-                :title="labels.download"
-              >
-                <i class="download icon" />
-              </a>
-              <semantic-modal
-                v-if="isEmbedable"
-                v-model:show="showEmbedModal"
-              >
-                <h4 class="header">
-                  {{ t('components.library.TrackBase.modal.embed.header') }}
-                </h4>
-                <div class="scrolling content">
-                  <div class="description">
-                    <embed-wizard
-                      :id="track.id"
-                      type="track"
-                    />
-                  </div>
-                </div>
-                <div class="actions">
-                  <Button color="secondary">
-                    {{ t('components.library.TrackBase.button.cancel') }}
-                  </Button>
-                </div>
-              </semantic-modal>
+      <Layout stack style="flex: 1; gap: 8px;">
+        <Layout flex no-gap style="align-items: baseline; margin-bottom: 24px;">
+          <h1>{{ track.title }}</h1>
+          <Spacer grow />
+          <Button
+            v-if="upload"
+            :aria-label="labels.download"
+            :to="downloadUrl"
+            target="_blank"
+            primary
+            icon="bi-download"
+            :title="labels.download"
+          >
+            {{ labels.download }}
+          </Button>
+        </Layout>
+        <div class="meta">
+          <template v-if="track.attributed_to">
+            <Link
+              :to="attributedToUrl"
+            >
+              <i class="bi bi-at" />
+              {{ track.attributed_to.full_username }}
+            </Link>
+            <i class="bi bi-dot" />
+          </template>
 
-              <Popover v-model:open="open">
-                <template #default="{ toggleOpen }">
-                  <OptionsButton @click="toggleOpen" />
-                </template>
-                <template #items>
-                  <PopoverItem>
-                    <Button v-if="domain != store.getters['instance/domain']" :href="track.fid" target="_blank" variant="outline" icon="bi-external-link">
-                      {{ t('components.library.TrackBase.link.domain', {domain: domain}) }}
-                    </Button>
-                  </PopoverItem>
-                  <PopoverItem>
-                    <Button v-if="isEmbedable" @click="showEmbedModal = !showEmbedModal" variant="outline" icon="bi-code">
-                      {{ t('components.library.TrackBase.button.embed') }}
-                    </Button>
-                  </PopoverItem>
-                  <PopoverItem>
-                    <Button
-                      :href="wikipediaUrl"
-                      target="_blank"
-                      rel="noreferrer noopener"
-                      variant="outline"
-                      icon="bi-wikipedia"
-                    >
-                      {{ t('components.library.TrackBase.link.wikipedia') }}
-                    </Button>
-                  </PopoverItem>
-                  <PopoverItem>
-                    <Button v-if="discogsUrl"
-                      :href="discogsUrl"
-                      target="_blank"
-                      rel="noreferrer noopener"
-                      variant="outline"
-                      icon="bi-box-arrow-up-right"
-                    >
-                      {{ t('components.library.TrackBase.link.discogs') }}
-                    </Button>
-                  </PopoverItem>
+          <time
+            :title="track.creation_date"
+            :datetime="track.creation_date"
+          >
+            {{ momentFormat(new Date(track.creation_date), 'LL') }}
+          </time>
 
-                  <PopoverItem>
-                    <RouterLink
-                    v-if="track.is_local"
-                    :to="{name: 'library.tracks.edit', params: {id: track.id }}"
-                    class="basic item"
-                    >
-                      <Button v-if="track.is_local" :to="{ name: 'library.tracks.edit', params: { id: track.id } }" tag="router-link" variant="outline" icon="bi-pencil">
-                        {{ t('components.library.TrackBase.button.edit') }}
-                      </Button>
-                    </RouterLink>
-                  </PopoverItem>
-                  <!-- TODO: Make  the following button dangerous. Btw, it's actually a modal triggered by a button! -->
-                  <Button
-                    v-if="artist && store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === store.state.auth.fullUsername"
-                    :class="['ui', {loading: isLoading}, 'item']"
-                    @confirm="remove()"
-                  >
-                    <i class="ui trash icon" />
-                    {{ t('components.library.TrackBase.button.delete') }}
-                    <template #modal-header>
-                      <p>
-                        {{ t('components.library.TrackBase.modal.delete.header') }}
-                      </p>
-                    </template>
-                    <template #modal-content>
-                      <div>
-                        <p>
-                          {{ t('components.library.TrackBase.modal.delete.content.warning') }}
-                        </p>
-                      </div>
-                    </template>
-                    <template #modal-confirm>
-                      <p>
-                        {{ t('components.library.TrackBase.button.delete') }}
-                      </p>
-                    </template>
-                  </Button>
-                  <div class="divider" />
-                  <div
-                    v-for="obj in getReportableObjects({track})"
-                    :key="obj.target.type + obj.target.id"
-                    role="button"
-                    class="basic item"
-                    @click.stop.prevent="report(obj)"
-                  >
-                    <i class="share icon" /> {{ obj.label }}
-                  </div>
-                  <div class="divider" />
-                  <router-link
-                    v-if="store.state.auth.availablePermissions['library']"
-                    class="basic item"
-                    :to="{name: 'manage.library.tracks.detail', params: {id: track.id}}"
-                  >
-                    <i class="wrench icon" />
-                    {{ t('components.library.TrackBase.link.moderation') }}
-                  </router-link>
-                  <a
-                    v-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
-                    class="basic item"
-                    :href="store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <i class="wrench icon" />
-                    {{ t('components.library.TrackBase.link.django') }}
-                  </a>
-                </template>
-              </Popover>
-            </div>
-          </div>
+          <template v-if="track.album">
+            <i class="bi bi-dot" />
+            <span>{{ track.album.title }}</span>
+          </template>
         </div>
-      </section>
-      <router-view
-        v-if="track"
-        :key="route.fullPath"
-        :track="track"
-        :object="track"
-        object-type="track"
-        @libraries-loaded="libraries = $event"
+
+        <Layout flex>
+          <PlayButton
+            class="vibrant"
+            split
+            :track="track"
+          />
+
+          <Spacer h grow />
+
+          <TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
+          <TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
+          <Popover v-model:open="open">
+            <template #default="{ toggleOpen }">
+              <OptionsButton @click="toggleOpen" />
+            </template>
+            <template #items>
+              <PopoverItem
+                v-if="domain != store.getters['instance/domain']"
+                :to="track.fid"
+                target="_blank"
+                icon="bi-box-arrow-up-right"
+              >
+                {{ t('components.library.TrackBase.link.domain', { domain }) }}
+              </PopoverItem>
+
+              <PopoverItem
+                v-if="isEmbedable"
+                @click="showEmbedModal = !showEmbedModal"
+                icon="bi-code"
+              >
+                {{ t('components.library.TrackBase.button.embed') }}
+              </PopoverItem>
+
+              <PopoverItem
+                :to="wikipediaUrl"
+                target="_blank"
+                rel="noreferrer noopener"
+                icon="bi-wikipedia"
+              >
+                {{ t('components.library.TrackBase.link.wikipedia') }}
+              </PopoverItem>
+
+              <PopoverItem
+                v-if="discogsUrl"
+                :to="discogsUrl"
+                target="_blank"
+                rel="noreferrer noopener"
+                icon="bi-box-arrow-up-right"
+              >
+                {{ t('components.library.TrackBase.link.discogs') }}
+              </PopoverItem>
+
+              <PopoverItem
+                v-if="track.is_local"
+                icon="bi-pencil-fill"
+                :to="{ name: 'library.tracks.edit', params: { id: track.id } }"
+              >
+                {{ t('components.library.TrackBase.button.edit') }}
+              </PopoverItem>
+
+              <PopoverItem
+                v-if="artist &&
+                        store.state.auth.authenticated &&
+                        artist.channel &&
+                        artist.attributed_to.full_username === store.state.auth.fullUsername"
+                @click="showDeleteModal = true"
+                icon="bi-trash"
+              >
+                {{ t('components.library.TrackBase.button.delete') }}
+              </PopoverItem>
+
+              <hr>
+
+              <PopoverItem
+                v-for="obj in getReportableObjects({ track })"
+                :key="obj.target.type + obj.target.id"
+                @click="report(obj)"
+                icon="bi-flag"
+              >
+                {{ obj.label }}
+              </PopoverItem>
+
+              <hr>
+
+              <PopoverItem
+                v-if="store.state.auth.availablePermissions['library']"
+                :to="{
+                  name: 'manage.library.tracks.detail',
+                  params: { id: track.id }
+                }"
+                icon="bi-wrench"
+              >
+                {{ t('components.library.TrackBase.link.moderation') }}
+              </PopoverItem>
+
+              <PopoverItem
+                v-if="store.state.auth.profile?.is_superuser"
+                :to="store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
+                target="_blank"
+                rel="noopener noreferrer"
+                icon="bi-wrench"
+              >
+                {{ t('components.library.TrackBase.link.django') }}
+              </PopoverItem>
+            </template>
+          </Popover>
+        </Layout>
+      </Layout>
+    </Layout>
+
+    <Modal
+      v-if="isEmbedable"
+      v-model="showEmbedModal"
+      :title="t('components.library.TrackBase.modal.embed.header')"
+    >
+      <embed-wizard
+        :id="track.id"
+        type="track"
       />
+
+      <template #actions>
+        <Button
+          secondary
+          @click="showEmbedModal = false"
+        >
+          {{ t('components.library.TrackBase.button.cancel') }}
+        </Button>
+      </template>
+    </Modal>
+    <router-view
+      v-if="track"
+      :key="route.fullPath"
+      :track="track"
+      :object="track"
+      object-type="track"
+      @libraries-loaded="libraries = $event"
+    />
     </template>
-  </main>
+
+    <Modal
+      v-model="showDeleteModal"
+      :title="t('components.library.TrackBase.modal.delete.header')"
+      destructive
+    >
+      <template #alert>
+        <Alert red>
+          {{ t('components.library.TrackBase.modal.delete.content.warning') }}
+        </Alert>
+      </template>
+
+      <template #actions>
+        <Button
+          secondary
+          @click="showDeleteModal = false"
+        >
+          {{ t('components.library.TrackBase.button.cancel') }}
+        </Button>
+        <Button
+          destructive
+          :is-loading="isLoading"
+          @click="remove()"
+        >
+          {{ t('components.library.TrackBase.button.delete') }}
+        </Button>
+      </template>
+    </Modal>
+  </Layout>
 </template>
+
+<style scoped>
+.channel-image {
+  width: 300px;
+  height: 300px;
+  border: none;
+}
+.meta {
+  line-height: 48px;
+}
+</style>
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 9156ab62f..33e62968d 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -12,6 +12,8 @@ import axios from 'axios'
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import PlaylistWidget from '~/components/playlists/Widget.vue'
 import TagsList from '~/components/tags/List.vue'
+import Activity from '~/components/ui/Activity.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -57,240 +59,103 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-if="track">
-    <section class="ui vertical stripe segment">
-      <div class="ui stackable grid row container">
-        <div class="six wide column">
-          <template v-if="upload">
-            <img
-              v-if="track.cover && track.cover.urls.large_square_crop"
-              v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
-              alt="Cover Image"
-              class="ui fluid image track-cover-image"
-            >
-            <img
-              v-else-if="track.album && track.album.cover && track.album.cover.urls.large_square_crop"
-              v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
-              alt="Cover Image"
-              class="ui fluid image track-cover-image"
-            >
-            <img
-              v-else
-              src="../../assets/audio/default-cover.png"
-              alt="Cover Image"
-              class="ui fluid image track-cover-image"
-            >
-            <h3 class="ui header">
-              <span v-if="track.artist_credit?.[0].artist?.content_category === 'music'">
-                {{ t('components.library.TrackDetail.header.track') }}
-              </span>
-              <span v-else>
-                {{ t('components.library.TrackDetail.header.episode') }}
-              </span>
-            </h3>
-            <table class="ui basic table">
-              <tbody>
-                <tr>
-                  <td>
-                    {{ t('components.library.TrackDetail.table.track.duration') }}
-                  </td>
-                  <td class="right aligned">
-                    <template v-if="upload.duration">
-                      {{ time.parse(upload.duration) }}
-                    </template>
-                    <span v-else>
-                      {{ t('components.library.TrackDetail.notApplicable') }}
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('components.library.TrackDetail.table.track.size') }}
-                  </td>
-                  <td class="right aligned">
-                    <template v-if="upload.size">
-                      {{ humanSize(upload.size) }}
-                    </template>
-                    <span v-else>
-                      {{ t('components.library.TrackDetail.notApplicable') }}
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('components.library.TrackDetail.table.track.codec') }}
-                  </td>
-                  <td class="right aligned">
-                    <template v-if="upload.extension">
-                      {{ upload.extension }}
-                    </template>
-                    <span v-else>
-                      {{ t('components.library.TrackDetail.notApplicable') }}
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('components.library.TrackDetail.table.track.bitrate.label') }}
-                  </td>
-                  <td class="right aligned">
-                    <template v-if="upload.bitrate">
-                      {{ t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}
-                    </template>
-                    <span v-else>
-                      {{ t('components.library.TrackDetail.notApplicable') }}
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('components.library.TrackDetail.table.track.downloads') }}
-                  </td>
-                  <td class="right aligned">
-                    {{ track.downloads_count }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </template>
-        </div>
-        <div class="ten wide column">
-          <template v-if="track.tags && track.tags.length > 0">
-            <TagsList :tags="track.tags" />
-            <div class="ui hidden divider" />
-          </template>
+  <Layout stack v-if="track">
+    <template v-if="track.tags && track.tags.length > 0">
+      <TagsList :tags="track.tags" />
+    </template>
 
-          <rendered-description
-            :content="track.description"
-            :can-update="false"
-          />
-          <h2 class="ui header">
-            {{ t('components.library.TrackDetail.header.release') }}
-          </h2>
-          <table class="ui basic table ellipsis-rows">
-            <tbody>
-              <tr>
-                <td>
-                  {{ t('components.library.TrackDetail.table.release.artist') }}
-                </td>
-                <td class="right aligned">
-                  <template
-                    v-for="ac in track.artist_credit"
-                    :key="ac.artist.id"
-                  >
-                    <router-link
-                      class="discrete link"
-                      :to="{ name: 'library.artists.detail', params: { id: ac.artist.id }}"
-                      style="display: inline;"
-                    >
-                      {{ ac.credit }}
-                    </router-link>
-                    <span style="display: inline;">{{ ac.joinphrase }}</span>
-                  </template>
-                </td>
-              </tr>
-              <tr v-if="track.album">
-                <td>
-                  <span v-if="track.album.artist_credit?.[0].artist.content_category === 'music'">
-                    {{ t('components.library.TrackDetail.table.release.album') }}
-                  </span>
-                  <span v-else>
-                    {{ t('components.library.TrackDetail.table.release.series') }}
-                  </span>
-                </td>
-                <td class="right aligned">
-                  <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}">
-                    {{ track.album.title }}
-                  </router-link>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  {{ t('components.library.TrackDetail.table.release.year') }}
-                </td>
-                <td class="right aligned">
-                  <template v-if="track.album && track.album.release_date">
-                    {{ momentFormat(new Date(track.album.release_date), 'Y') }}
-                  </template>
-                  <template v-else>
-                    {{ t('components.library.TrackDetail.notApplicable') }}
-                  </template>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  {{ t('components.library.TrackDetail.table.release.copyright') }}
-                </td>
-                <td class="right aligned">
-                  <span
-                    v-if="track.copyright"
-                    :title="track.copyright"
-                  >{{ truncate(track.copyright, 50) }}</span>
-                  <template v-else>
-                    {{ t('components.library.TrackDetail.notApplicable') }}
-                  </template>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  {{ t('components.library.TrackDetail.table.release.license') }}
-                </td>
-                <td class="right aligned">
-                  <a
-                    v-if="license"
-                    :href="license.url"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >{{ license.name }}</a>
-                  <span v-else>
-                    {{ t('components.library.TrackDetail.notApplicable') }}
-                  </span>
-                </td>
-              </tr>
-              <tr v-if="!track.is_local">
-                <td>
-                  {{ t('components.library.TrackDetail.table.release.url') }}
-                </td>
-                <td :title="track.fid">
-                  <a
-                    :href="track.fid"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {{ truncate(track.fid, 65) }}
-                  </a>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <a
-            v-if="musicbrainzUrl"
-            :href="musicbrainzUrl"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            <i class="external icon" />
-            {{ t('components.library.TrackDetail.link.musicbrainz') }}
-          </a>
-          <h2 class="ui header">
-            {{ t('components.library.TrackDetail.header.playlists') }}
-          </h2>
-          <playlist-widget
-            :url="'playlists/'"
-            :filters="{track: track.id, playable: true, ordering: '-modification_date'}"
-          />
+    <Layout flex style="gap: 24px;">
+      <Layout stack style="flex: 1; gap: 0;">
+        <h2>Release Details</h2>
+        <Activity
+          :label="t('components.library.TrackDetail.table.release.artist')"
+          :value="track.artist_credit.map(ac => ac.credit).join(', ')"
+          :link="track.artist_credit.length > 0
+            ? {
+                name: 'library.artists.detail',
+                params: { id: track.artist_credit[0].artist.id }
+              }
+            : undefined"
+          :is-first="true"
+        />
+        <Activity
+          :label="track.album?.artist_credit?.[0].artist.content_category === 'music'
+            ? t('components.library.TrackDetail.table.release.album')
+            : t('components.library.TrackDetail.table.release.series')"
+          :value="track.album?.title || t('components.library.TrackDetail.notApplicable')"
+          :link="track.album
+            ? {
+                name: 'library.albums.detail',
+                params: { id: track.album.id }
+              }
+            : undefined"
+        />
+        <Activity
+          :label="t('components.library.TrackDetail.table.release.year')"
+          :value="track.album?.release_date
+            ? momentFormat(new Date(track.album.release_date), 'Y')
+            : t('components.library.TrackDetail.notApplicable')"
+        />
+        <Activity
+          :label="t('components.library.TrackDetail.table.release.copyright')"
+          :value="track.copyright || t('components.library.TrackDetail.notApplicable')"
+        />
+        <Activity
+          :label="t('components.library.TrackDetail.table.release.license')"
+          :value="license?.name || t('components.library.TrackDetail.notApplicable')"
+          :is-last="true"
+        />
+      </Layout>
 
-          <h2 class="ui header">
-            {{ t('components.library.TrackDetail.header.library') }}
-          </h2>
-          <library-widget
-            :url="`tracks/${track.id}/libraries/`"
-            @loaded="emit('libraries-loaded', $event)"
-          >
-            {{ t('components.library.TrackDetail.description.library') }}
-          </library-widget>
-        </div>
-      </div>
-    </section>
-  </div>
+      <Layout stack style="flex: 1; gap: 0;">
+        <h2>Track Details</h2>
+        <Activity
+          :label="t('components.library.TrackDetail.table.track.duration')"
+          :value="upload?.duration ? time.parse(upload.duration) : t('components.library.TrackDetail.notApplicable')"
+          :is-first="true"
+        />
+        <Activity
+          :label="t('components.library.TrackDetail.table.track.size')"
+          :value="upload?.size ? humanSize(upload.size) : t('components.library.TrackDetail.notApplicable')"
+        />
+        <Activity
+          :label="t('components.library.TrackDetail.table.track.codec')"
+          :value="upload?.extension || t('components.library.TrackDetail.notApplicable')"
+        />
+        <Activity
+          :label="t('components.library.TrackDetail.table.track.bitrate.label')"
+          :value="upload?.bitrate
+            ? t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)})
+            : t('components.library.TrackDetail.notApplicable')"
+        />
+        <Activity
+          :label="t('components.library.TrackDetail.table.track.downloads')"
+          :value="track.downloads_count"
+          :is-last="true"
+        />
+      </Layout>
+    </Layout>
+
+    <h2>{{ t('components.library.TrackDetail.header.playlists') }}</h2>
+    <playlist-widget
+      :url="'playlists/'"
+      :filters="{track: track.id, playable: true, ordering: '-modification_date'}"
+    />
+
+    <h2>{{ t('components.library.TrackDetail.header.library') }}</h2>
+    <library-widget
+      :url="`tracks/${track.id}/libraries/`"
+      @loaded="emit('libraries-loaded', $event)"
+    >
+      {{ t('components.library.TrackDetail.description.library') }}
+    </library-widget>
+  </Layout>
 </template>
+
+<style scoped>
+.channel-image {
+  width: 300px;
+  height: 300px;
+  border: none;
+}
+</style>
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 82c592693..aad3e34e6 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -7,6 +7,8 @@ import { computed } from 'vue'
 import { useStore } from '~/store'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import Card from '~/components/ui/Card.vue'
+import ActorLink from '~/components/common/ActorLink.vue'
 
 interface Props {
   playlist: Playlist
@@ -26,53 +28,82 @@ const images = computed(() => {
 
   return urls
 })
+
+const goToPlaylist = () => {
+  router.push({name: 'library.playlists.detail', params: {id: props.playlist.id}})
+}
 </script>
 
 <template>
-  <div class="ui app-card card">
-    <div
-      :class="['ui', 'head-image', 'squares']"
-      @click="router.push({name: 'library.playlists.detail', params: {id: playlist.id }})"
-    >
-      <img
-        v-for="(url, idx) in images"
-        :key="idx"
-        v-lazy="url"
-        alt=""
-      >
-      <play-button
-        :icon-only="true"
-        :is-playable="playlist.is_playable"
-        :button-classes="['ui', 'circular', 'large', 'vibrant', 'icon', 'button']"
-        :playlist="playlist"
-      />
-    </div>
-    <div class="content">
-      <strong>
-        <router-link
-          class="discrete link"
-          :to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
-        >
-          {{ playlist.name }}
-        </router-link>
-      </strong>
-      <div class="description">
-        <actor-link
-          :actor="playlist.actor"
-          :avatar="false"
-          class="left floated"
+  <Card
+    :title="playlist.name"
+    :to="{ name: 'library.playlists.detail', params: { id: playlist.id } }"
+  >
+    <template #image>
+      <div class="playlist-grid">
+        <img
+          v-for="(url, idx) in images"
+          :key="idx"
+          v-lazy="url"
+          alt=""
         />
       </div>
-    </div>
-    <div class="extra content">
-      {{ t('components.playlists.Card.meta.tracks', playlist.tracks_count) }}
-      <play-button
-        class="right floated basic icon"
-        :dropdown-only="true"
+    </template>
+
+    <template #topright>
+      <PlayButton
+        iconOnly
         :is-playable="playlist.is_playable"
-        :dropdown-icon-classes="['ellipsis', 'horizontal', 'large really discrete']"
         :playlist="playlist"
       />
-    </div>
-  </div>
+    </template>
+
+    <template #default>
+      <div class="playlist-meta">
+        <ActorLink
+          :actor="playlist.actor"
+          :avatar="false"
+        />
+      </div>
+    </template>
+
+    <template #action>
+      <div class="playlist-action">
+        <span>{{ t('components.playlists.Card.meta.tracks', playlist.tracks_count) }}</span>
+        <PlayButton
+          dropdown-only
+          :is-playable="playlist.is_playable"
+          :playlist="playlist"
+        />
+      </div>
+    </template>
+  </Card>
 </template>
+
+<style scoped>
+.playlist-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 2px;
+}
+
+.playlist-grid img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.playlist-meta {
+  display: flex;
+  align-items: center;
+}
+
+.playlist-action {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0 8px;
+}
+</style>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index 772268cb0..52f533b0c 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -12,6 +12,10 @@ import useErrorHandler from '~/composables/useErrorHandler'
 
 import PlaylistCard from '~/components/playlists/Card.vue'
 import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Loader from '~/components/ui/Loader.vue'
 
 interface Props {
   filters: Record<string, unknown>
@@ -54,53 +58,53 @@ watch(
 </script>
 
 <template>
-  <div>
-    <h3
-      v-if="!!$slots.title"
-      class="ui header"
-    >
+  <Layout stack>
+    <h3 v-if="!!$slots.title">
       <slot name="title" />
     </h3>
-    <div
-      v-if="isLoading"
-      class="ui inverted active dimmer"
+
+    <Loader v-if="isLoading"/>
+
+    <Layout
+      v-else-if="objects.length > 0"
+      flex
+      style="gap: 16px; flex-wrap: wrap;"
     >
-      <div class="ui loader" />
-    </div>
-    <div
-      v-if="objects.length > 0"
-      class="ui cards app-cards"
-    >
-      <playlist-card
+      <PlaylistCard
         v-for="playlist in objects"
         :key="playlist.id"
         :playlist="playlist"
       />
-    </div>
-    <div
+    </Layout>
+
+    <Alert
       v-else
-      class="ui placeholder segment"
+      blue
     >
-      <div class="ui icon header">
-        <i class="list icon" />
+      <div>
+        <i class="bi bi-list" />
         {{ t('components.playlists.Widget.placeholder.noPlaylists') }}
       </div>
+      <Spacer />
       <Button
         v-if="store.state.auth.authenticated"
         icon="bi-card-list"
+        primary
         @click="store.commit('playlists/chooseTrack', null)"
       >
         {{ t('components.playlists.Widget.button.create') }}
       </Button>
-    </div>
+    </Alert>
+
     <template v-if="nextPage">
-      <div class="ui hidden divider" />
+      <Spacer v grow/>
       <Button
         v-if="nextPage"
+        primary
         @click="fetchData(nextPage)"
       >
         {{ t('components.playlists.Widget.button.more') }}
       </Button>
     </template>
-  </div>
+  </Layout>
 </template>