refactor(ui): roll back of activity component, use iterated arrays for track details

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

@@ -131,17 +131,16 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         v-for="object in objects"
         :key="object.id"
         :class="['item', itemClasses]"
-        @click="navigate('track')"
       >
         <div class="activity-image">
           <img
             v-if="object.track.album && object.track.album.cover"
-            v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
+            v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
             alt=""
           >
           <img
             v-else-if="object.track.cover"
-            v-lazy="$store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
+            v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
             alt=""
           >
           <img
@@ -228,13 +227,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
   &.activity {
     padding: 12px 0;
     border-top: 1px solid;
+
     @include light-theme {
       border-color: var(--fw-gray-300);
     }
     @include dark-theme {
       border-color: var(--fw-gray-800);
     }
-    cursor: pointer;
     display: grid;
     grid-template-columns: auto 1fr auto;
     gap: 12px;
@@ -285,6 +284,10 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       a {
         text-decoration: none;
         color: var(--color);
+
+        &:hover {
+          text-decoration: underline;
+        }
       }
 
       > .track-title {

front/src/components/library/TrackDetail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Track, Library } from '~/types'
 
-import { humanSize, momentFormat, truncate } from '~/utils/filters'
+import { humanSize, momentFormat } from '~/utils/filters'
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
@@ -12,8 +12,10 @@ 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 Section from '~/components/ui/Section.vue'
+import Link from '~/components/ui/Link.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -56,6 +58,81 @@ watchEffect(() => {
     fetchLicense(props.track.license)
   }
 })
+
+const release_details: {
+  label: string;
+  release_value: string;
+  link?: { name: string; params: { id: number } };
+}[] = [
+  {
+    label: t('components.library.TrackDetail.table.release.artist'),
+    release_value: props.track.artist_credit.map(ac => ac.credit).join(', '),
+    link: props.track.artist_credit.length > 0
+      ? {
+          name: 'library.artists.detail',
+          params: { id: props.track.artist_credit[0].artist.id }
+        }
+      : undefined
+  },
+  {
+    label:
+      props.track.album?.artist_credit?.[0].artist.content_category === 'music'
+        ? t('components.library.TrackDetail.table.release.album')
+        : t('components.library.TrackDetail.table.release.series'),
+    release_value: props.track.album?.title || t('components.library.TrackDetail.notApplicable'),
+    link: props.track.album
+      ? {
+          name: 'library.albums.detail',
+          params: { id: props.track.album.id }
+        }
+      : undefined
+  },
+  {
+    label: t('components.library.TrackDetail.table.release.year'),
+    release_value: props.track.album?.release_date
+      ? momentFormat(new Date(props.track.album.release_date), 'Y')
+      : t('components.library.TrackDetail.notApplicable')
+  },
+  {
+    label: t('components.library.TrackDetail.table.release.copyright'),
+    release_value: props.track.copyright || t('components.library.TrackDetail.notApplicable')
+  },
+  {
+    label: t('components.library.TrackDetail.table.release.license'),
+    release_value: license?.name || t('components.library.TrackDetail.notApplicable'),
+  }
+]
+
+const track_details: {
+  label: string;
+  track_value: string | number;
+  link?: { name: string; params: { id: number } };
+}[] = [
+  {
+    label: t('components.library.TrackDetail.table.track.duration'),
+    track_value: upload?.value.duration ? time.parse(upload.duration) : t('components.library.TrackDetail.notApplicable')
+  },
+  {
+    label:
+    t('components.library.TrackDetail.table.track.size'),
+    track_value: upload?.value.size ? humanSize(upload.size) : t('components.library.TrackDetail.notApplicable')
+  },
+  {
+    label: t('components.library.TrackDetail.table.track.codec'),
+    track_value: upload?.value.extension || t('components.library.TrackDetail.notApplicable')
+  },
+  {
+    label:
+    t('components.library.TrackDetail.table.track.bitrate.label'),
+    track_value: upload?.value.bitrate
+      ? t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)})
+      : t('components.library.TrackDetail.notApplicable')
+  },
+  {
+    label: t('components.library.TrackDetail.table.track.downloads'),
+    track_value: props.track.downloads_count
+  }
+]
 </script>
 
 <template>
@@ -66,73 +143,38 @@ watchEffect(() => {
 
     <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"
+        <Section
+          alignLeft
+          h2="Release Details"
+          :action="{
+            text:'View on MusicBrainz',
+            to: musicbrainzUrl
+          }"
+          icon="bi-box-arrow-up-right"
         />
+        <Layout flex class="details" v-for="item in release_details" key="label"
+          style="min-width: 120px;"
+        >
+          <span class="label">{{ item.label }}</span>
+          <Spacer h grow />
+          <Link v-if="item.link" class="value" :to="item.link">{{ item.release_value }}</Link>
+          <span v-else class="value">{{ item.release_value }}</span>
+        </Layout>
       </Layout>
 
       <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"
+        <Section
+          alignLeft
+          h2="Track Details"
         />
+        <Layout flex class="details" v-for="item in track_details" key="label"
+          style="min-width: 120px;"
+        >
+          <span class="label">{{ item.label }}</span>
+          <Spacer h grow />
+          <Link v-if="item.link" class="value" :to="item.link">{{ item.track_value }}</Link>
+          <span v-else class="value">{{ item.track_value }}</span>
+        </Layout>
       </Layout>
     </Layout>
 
@@ -152,10 +194,45 @@ watchEffect(() => {
   </Layout>
 </template>
 
-<style scoped>
+<style lang="scss">
 .channel-image {
   width: 300px;
   height: 300px;
   border: none;
 }
+
+.details {
+  padding: 0 16px;
+  height: 72px;
+  align-items: center;
+  border-top: 1px solid;
+
+  @include light-theme {
+    border-color: var(--fw-gray-300);
+  }
+  @include dark-theme {
+    border-color: var(--fw-gray-800);
+  }
+
+  .label {
+    font-weight: 800;
+
+    @include light-theme {
+      color: var(--fw-gray-600);
+    }
+
+    @include dark-theme {
+      color: var(--fw-gray-500);
+    }
+  }
+
+  a.value {
+    text-decoration: underline;
+  }
+
+  &:last-child {
+    border-bottom: 1px solid;
+  }
+}
+
 </style>

front/src/components/ui/Activity.vue

@@ -1,93 +1,59 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
-import Link from '~/components/ui/Link.vue'
-import Layout from '~/components/ui/Layout.vue'
 
-interface Props {
-  label?: string
-  value?: string | number
-  link?: {
-    name: string
-    params: Record<string, string | number>
-  }
-  truncate?: number
-  isFirst?: boolean
-  isLast?: boolean
-  pointer?: boolean
-  customContent?: boolean
-  columns?: number
+import { type Track, type User } from '~/types'
+
+import OptionsButton from '~/components/ui/button/Options.vue'
+import PlayButton from '~/components/ui/button/Play.vue'
+
+
+const { t } = useI18n()
+
+const emit = defineEmits<{ play: [track: Track] }>()
+
+const { track, user } = defineProps<{ track: Track, user: User }>()
+
+const artist_credit = track.artist_credit || []
+const firstArtist = artist_credit.length > 0 ? artist_credit[0].artist : null
+
+const profileParams = computed(() => {
+  const [username, domain] = user.full_username.split('@')
+  return { username, domain }
+})
+
+let navigate = (to: 'track' | 'artist' | 'user') => { }
+
+if (import.meta.env.PROD) {
+  const router = useRouter()
+  navigate = (to: 'track' | 'artist' | 'user') => to === 'track'
+    ? router.push({ name: 'library.tracks.detail', params: { id: track.id } })
+    : to === 'artist'
+      ? router.push({ name: 'library.artists.detail', params: { id: firstArtist?.id } /* TODO: Multi-Artist! */ })
+      : router.push({ name: 'profile.full', params: profileParams.value })
 }
-
-const props = withDefaults(defineProps<Props>(), {
-  truncate: 0,
-  isFirst: false,
-  isLast: false,
-  link: () => undefined,
-  pointer: false,
-  customContent: false,
-  label: '',
-  value: '',
-  columns: 1
-})
-
-const displayValue = computed(() => {
-  const val = String(props.value)
-  return props.truncate && val.length > props.truncate
-    ? val.slice(0, props.truncate) + '...'
-    : val
-})
 </script>
 
 <template>
-  <Layout
-    v-for="columnIndex in columns"
-    :key="columnIndex"
-    stack
-    style="flex: 1;"
-    class="activity-column"
-  >
-    <div
-      class="funkwhale activity"
-      :class="{
-        'first-item': isFirst,
-        'last-item': isLast,
-        'with-pointer': pointer
-      }"
-    >
-      <div class="activity-content">
-        <!-- Default content -->
-        <template v-if="!customContent">
-          <div class="detail-row">
-            <div
-              v-if="label"
-              class="detail-label"
-            >
-              {{ label }}
-            </div>
-            <div class="detail-value">
-              <template v-if="link">
-                <Link
-                  :to="link"
-                  force-underline
-                >
-                  {{ displayValue }}
-                </Link>
-              </template>
-              <template v-else>
-                {{ displayValue }}
-              </template>
-            </div>
-          </div>
-        </template>
-
-        <!-- Custom content slot -->
-        <slot
-          v-else
-          :columnIndex="columnIndex - 1"
-        />
-      </div>
+  <div class="funkwhale activity" @click="navigate('track')">
+    <div class="activity-image">
+      <img :src="track.cover?.urls.original" />
+      <PlayButton @play="emit('play', track)" :round="false" :shadow="false" />
     </div>
-  </Layout>
+    <div class="activity-content">
+      <div class="track-title">{{ track.title }}</div>
+      <a @click.stop="navigate('artist')" class="funkwhale link artist">
+        {{ firstArtist?.name /* TODO: Multi-Artist! */ }}
+      </a>
+      <a @click.stop="navigate('user')" class="funkwhale link user">
+        {{ t('vui.by-user', { username: user.username }) }}
+      </a>
+    </div>
+    <div>
+      <OptionsButton />
+    </div>
+  </div>
 </template>
 
 <style lang="scss">

front/src/components/ui/activity.scss

@@ -5,83 +5,123 @@
     display: flex;
     align-items: center;
     border-top: 1px solid;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 12px;
+    grid-column: span 4;
 
     &.clickable {
       cursor: pointer;
     }
 
     @include light-theme {
-      border-color: var(--fw-gray-300);
+      color: var(--fw-gray-500);
+
+      + .funkwhale.activity {
+        border-top: 1px solid var(--fw-gray-300);
+      }
+
+      > .activity-content {
+        > .track-title {
+          color: var(--fw-gray-900);
+        }
+
+        > .artist {
+          --fw-link-color: var(--fw-gray-900);
+        }
+
+        > .user {
+          --fw-link-color: var(--fw-gray-500);
+        }
+      }
+
+      .play-button {
+        background: rgba(255, 255, 255, .5);
+
+        &:hover {
+          --fw-text-color: var(--fw-gray-800) !important;
+        }
+      }
     }
     @include dark-theme {
-      border-color: var(--fw-gray-800);
+      + .funkwhale.activity {
+        border-top: 1px solid var(--fw-gray-800);
+      }
+
+      > .activity-content {
+        > .track-title {
+          color: var(--fw-gray-300);
+        }
+
+        > .artist {
+          --fw-link-color: var(--fw-gray-300);
+        }
+
+        > .user {
+          --fw-link-color: var(--fw-gray-500);
+        }
+      }
+
+      .play-button {
+        background: rgba(0, 0, 0, .2);
+
+        &:hover {
+          background: rgba(0, 0, 0, .8);
+          --fw-text-color: var(--fw-gray-200) !important;
+        }
+      }
+    }
+    > .activity-image {
+      position: relative;
+      width: 40px;
+      aspect-ratio: 1;
+      overflow: hidden;
+      border-radius: var(--fw-border-radius);
+
+      > img {
+        width: 100%;
+        aspect-ratio: 1;
+        object-fit: cover;
+      }
+
+      > .play-button {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 0 !important;
+        width: 100%;
+        aspect-ratio: 1;
+        margin: 0;
+        border: 0 !important;
+        opacity: 0;
+      }
+    }
+    &:hover {
+      .play-button {
+        opacity: 1;
+      }
     }
 
     > .activity-content {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      height: 100%;
+      flex-direction: column;
+      align-items: flex-start;
 
-      > .activity-image {
-        width: 40px;
-        aspect-ratio: 1;
-        overflow: hidden;
-        border-radius: var(--fw-border-radius);
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
+      > .track-title {
+        font-weight: 700;
+        line-height: 1.5em;
       }
 
-      .detail-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
+      > .artist {
+        line-height: 1.5em;
+        font-size: 0.857rem;
+      }
 
-        .detail-label {
-          font-weight: 800;
-          line-height: 1.5em;
-
-          @include light-theme {
-            color: var(--fw-gray-600);
-          }
-
-          @include dark-theme {
-            color: var(--fw-gray-500);
-          }
-
-          margin-right: 16px;
-        }
-
-        .detail-value {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-
-          a {
-            text-decoration: none;
-            color: var(--color);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            &:hover {
-              text-decoration: underline;
-            }
-          }
-        }
+      > .user {
+        line-height: 1.5em;
+        font-size: 0.8125rem;
       }
     }
   }
-  .last-item {
-    border-bottom: 1px solid;
-  }
 }