From eff50f25ea272176c1a3be95a6ea612cdaa7fb95 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 5 Feb 2025 13:07:49 +0100
Subject: [PATCH] style(front): Section components on profile activity

---
 front/src/views/auth/ProfileBase.vue | 62 +++++++++++++++++-----------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 0b1215dfb..f4700eacc 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -22,6 +22,7 @@ import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import AlbumWidget from '~/components/album/Widget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
+import PlaylistWidget from '~/components/playlists/Widget.vue'
 
 interface Events {
   (e: 'updated', value: Actor): void
@@ -132,6 +133,10 @@ const recentActivity = ref(0)
     <Tabs>
       <Tab :title="t('views.auth.ProfileBase.link.overview')" :to="{name: 'profile.overview', params: routerParams}">
         <h2>{{ t('views.auth.ProfileBase.link.overview') }}</h2>
+        <!-- <router-view
+          :object="object"
+          @updated="fetchData"
+        /> -->
       </Tab>
 
       <Tab :title="t('views.auth.ProfileOverview.header.libraries')">
@@ -170,33 +175,42 @@ const recentActivity = ref(0)
       </Tab>
 
       <Tab :title="t('views.auth.ProfileBase.link.activity')" :to="{name: 'profile.activity', params: routerParams}">
+        <Layout stack>
+          <track-widget
+            :url="'history/listenings/'"
+            :filters="{ scope: `actor:${object?.full_username}`, ordering: '-creation_date', ...qualityFilters}"
+            :websocket-handlers="['Listen']"
+            @count="recentActivity = $event"
+          >
+            <template #title>
+              {{ t('components.library.Home.header.recentlyListened') }}
+            </template>
+          </track-widget>
 
-        <track-widget
-          :url="'history/listenings/'"
-          :filters="{ scope: `actor:${object?.full_username}`, ordering: '-creation_date', ...qualityFilters}"
-          :websocket-handlers="['Listen']"
-          @count="recentActivity = $event"
-        >
-          <template #title>
-            {{ t('components.library.Home.header.recentlyListened') }}
-          </template>
-        </track-widget>
+          <track-widget
+            :url="'favorites/tracks/'"
+            :filters="{scope: 'actor:${object.full_username}', ordering: '-creation_date'}"
+          >
+            <template #title>
+              {{ t('components.library.Home.header.recentlyFavorited') }}
+            </template>
+          </track-widget>
 
-        <track-widget
-          :url="'favorites/tracks/'"
-          :filters="{scope: 'actor:${object.full_username}', ordering: '-creation_date'}"
-        >
-          <template #title>
-            {{ t('components.library.Home.header.recentlyFavorited') }}
-          </template>
-        </track-widget>
-
-        <album-widget :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}">
-          <template #title>
-            {{ t('components.library.Home.header.recentlyAdded') }}
-          </template>
-        </album-widget>
+          <playlist-widget
+            :url="'playlists/'"
+            :filters="{scope: `actor:${object.full_username}`, playable: true, ordering: '-modification_date'}"
+          >
+            <template #title>
+              {{ t('views.auth.ProfileActivity.header.playlists') }}
+            </template>
+          </playlist-widget>
 
+          <album-widget :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}">
+            <template #title>
+              {{ t('components.library.Home.header.recentlyAdded') }}
+            </template>
+          </album-widget>
+        </Layout>
       </Tab>
     </Tabs>
   </Layout>