From 1f0ebb33678c9bcb8b825bb86dfa816637d14518 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Tue, 21 Jan 2025 21:14:10 +0100
Subject: [PATCH] feat(ui): refactor activity component to be used flexibly in
 different views

---
 front/src/components/ui/Activity.vue  | 126 +++++++++++-------
 front/src/components/ui/activity.scss | 176 ++++++++++----------------
 2 files changed, 149 insertions(+), 153 deletions(-)

diff --git a/front/src/components/ui/Activity.vue b/front/src/components/ui/Activity.vue
index fdfa1ba7c..e6e1996ab 100644
--- a/front/src/components/ui/Activity.vue
+++ b/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'
-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 }
+const props = withDefaults(defineProps<Props>(), {
+  truncate: 0,
+  isFirst: false,
+  isLast: false,
+  link: () => undefined,
+  pointer: false,
+  customContent: false,
+  label: '',
+  value: '',
+  columns: 1
 })
 
-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 displayValue = computed(() => {
+  const val = String(props.value)
+  return props.truncate && val.length > props.truncate
+    ? val.slice(0, props.truncate) + '...'
+    : val
+})
 </script>
 
 <template>
-  <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" />
+  <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>
-    <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>
+  </Layout>
 </template>
 
 <style lang="scss">
diff --git a/front/src/components/ui/activity.scss b/front/src/components/ui/activity.scss
index 253d7fe3a..69b2dcbd2 100644
--- a/front/src/components/ui/activity.scss
+++ b/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);
-
-      + .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;
-        }
-      }
+      border-color: var(--fw-gray-300);
     }
-
     @include dark-theme {
-      + .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;
-        }
-      }
-    }
-
-    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 {
-        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;
-      }
+      border-color: var(--fw-gray-800);
     }
 
     > .activity-content {
       display: flex;
-      flex-direction: column;
-      align-items: flex-start;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 100%;
 
-      > .track-title {
-        font-weight: 700;
-        line-height: 1.5em;
+      > .activity-image {
+        width: 40px;
+        aspect-ratio: 1;
+        overflow: hidden;
+        border-radius: var(--fw-border-radius);
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
       }
 
-      > .artist {
-        line-height: 1.5em;
-        font-size: 0.857rem;
-      }
+      .detail-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
 
-      > .user {
-        line-height: 1.5em;
-        font-size: 0.8125rem;
+        .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;
+            }
+          }
+        }
       }
     }
   }
+  .last-item {
+    border-bottom: 1px solid;
+  }
 }