chore(front): profile activity layout

front/src/views/auth/ProfileActivity.vue

@@ -10,7 +10,8 @@ import TrackWidget from '~/components/audio/track/Widget.vue'
 import AlbumWidget from '~/components/album/Widget.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Header from '~/components/ui/Header.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Heading from '~/components/ui/Header.vue'
 
 interface Props {
   object?: Actor
@@ -29,13 +30,13 @@ const { t } = useI18n()
 <template>
   <Layout
     stack
-    gap-64
   >
-    <Header
+    <Heading
       align-left
       page-heading
       :columns-per-item="4"
       :h1="t('views.auth.ProfileBase.link.overview')"
+      no-items
     >
       <template #action>
         <radio-button
@@ -46,7 +47,7 @@ const { t } = useI18n()
           :client-only="true"
         />
       </template>
-    </Header>
+    </Heading>
 
     <track-widget
       :url="'history/listenings/'"
@@ -55,18 +56,19 @@ const { t } = useI18n()
       :title="t('components.library.Home.header.recentlyListened')"
       @count="recentActivity = $event"
     />
+    <Spacer :size="64" />
     <track-widget
       :url="'favorites/tracks/'"
       :filters="{scope: `actor:${object?.full_username}`, ordering: '-creation_date'}"
       :title="t('components.library.Home.header.recentlyFavorited')"
     />
-
+    <Spacer />
     <playlist-widget
       :url="'playlists/'"
       :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-modification_date'}"
       :title="t('views.auth.ProfileActivity.header.playlists')"
     />
-
+    <Spacer />
     <album-widget
       :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}"
       :title="t('components.library.Home.header.recentlyAdded')"