feat(ui): refactor activity component to be used flexibly in different views

front/src/components/ui/Activity.vue

@@ -1,59 +1,93 @@
 <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'
 
-import { type Track, type User } from '~/types'
+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 OptionsButton from '~/components/ui/button/Options.vue'
+const props = withDefaults(defineProps<Props>(), {
-import PlayButton from '~/components/ui/button/Play.vue'
+  truncate: 0,
-
+  isFirst: false,
-
+  isLast: false,
-const { t } = useI18n()
+  link: () => undefined,
-
+  pointer: false,
-const emit = defineEmits<{ play: [track: Track] }>()
+  customContent: false,
-
+  label: '',
-const { track, user } = defineProps<{ track: Track, user: User }>()
+  value: '',
-
+  columns: 1
-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') => { }
+const displayValue = computed(() => {
-
+  const val = String(props.value)
-if (import.meta.env.PROD) {
+  return props.truncate && val.length > props.truncate
-  const router = useRouter()
+    ? val.slice(0, props.truncate) + '...'
-  navigate = (to: 'track' | 'artist' | 'user') => to === 'track'
+    : val
-    ? 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 })
-}
 </script>
 
 <template>
-  <div class="funkwhale activity" @click="navigate('track')">
+  <Layout
-    <div class="activity-image">
+    v-for="columnIndex in columns"
-      <img :src="track.cover?.urls.original" />
+    :key="columnIndex"
-      <PlayButton @play="emit('play', track)" :round="false" :shadow="false" />
+    stack
-    </div>
+    style="flex: 1;"
+    class="activity-column"
+  >
+    <div
+      class="funkwhale activity"
+      :class="{
+        'first-item': isFirst,
+        'last-item': isLast,
+        'with-pointer': pointer
+      }"
+    >
       <div class="activity-content">
-      <div class="track-title">{{ track.title }}</div>
+        <!-- Default content -->
-      <a @click.stop="navigate('artist')" class="funkwhale link artist">
+        <template v-if="!customContent">
-        {{ firstArtist?.name /* TODO: Multi-Artist! */ }}
+          <div class="detail-row">
-      </a>
+            <div
-      <a @click.stop="navigate('user')" class="funkwhale link user">
+              v-if="label"
-        {{ t('vui.by-user', { username: user.username }) }}
+              class="detail-label"
-      </a>
+            >
+              {{ label }}
             </div>
-    <div>
+            <div class="detail-value">
-      <OptionsButton />
+              <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>
+  </Layout>
 </template>
 
 <style lang="scss">

front/src/components/ui/activity.scss

@@ -1,125 +1,87 @@
 .funkwhale {
   &.activity {
-    padding: 12px 0;
+    padding: 0 16px;
+    height: 72px;
+    display: flex;
+    align-items: center;
+    border-top: 1px solid;
+
+    &.clickable {
+      cursor: pointer;
+    }
 
     @include light-theme {
-      color: var(--fw-gray-500);
+      border-color: var(--fw-gray-300);
-
-      + .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 {
-      + .funkwhale.activity {
+      border-color: var(--fw-gray-800);
-        border-top: 1px solid var(--fw-gray-800);
     }
 
     > .activity-content {
-        > .track-title {
+      display: flex;
-          color: var(--fw-gray-300);
+      justify-content: space-between;
-        }
+      align-items: center;
-
+      width: 100%;
-        > .artist {
+      height: 100%;
-          --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;
-        }
-      }
-    }
-
-    cursor: pointer;
-
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 12px;
-
-    grid-column: span 4;
 
       > .activity-image {
-      position: relative;
         width: 40px;
         aspect-ratio: 1;
         overflow: hidden;
         border-radius: var(--fw-border-radius);
 
-      > img {
+        img {
           width: 100%;
-        aspect-ratio: 1;
+          height: 100%;
           object-fit: cover;
         }
+      }
 
-      > .play-button {
+      .detail-row {
-        position: absolute;
+        display: flex;
-        top: 0;
+        justify-content: space-between;
-        left: 0;
+        align-items: center;
-        padding: 0 !important;
         width: 100%;
-        aspect-ratio: 1;
+
-        margin: 0;
+        .detail-label {
-        border: 0 !important;
+          font-weight: 800;
-        opacity: 0;
+          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 {
-      .play-button {
+              text-decoration: underline;
-        opacity: 1;
             }
           }
-
-    > .activity-content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-
-      > .track-title {
-        font-weight: 700;
-        line-height: 1.5em;
-      }
-
-      > .artist {
-        line-height: 1.5em;
-        font-size: 0.857rem;
-      }
-
-      > .user {
-        line-height: 1.5em;
-        font-size: 0.8125rem;
         }
       }
     }
+  }
+  .last-item {
+    border-bottom: 1px solid;
+  }
 }