From 16c74b4078da9b99e536ed62f5219d56ce1888c7 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 5 Feb 2025 13:05:20 +0100
Subject: [PATCH] style(front): Section components on explore

---
 front/src/components/album/Widget.vue         |  90 ++++----
 front/src/components/audio/ChannelsWidget.vue |   7 +-
 front/src/components/audio/track/Widget.vue   | 208 +++++++++---------
 front/src/components/library/Home.vue         |  59 ++---
 front/src/components/playlists/Widget.vue     |   7 +-
 5 files changed, 192 insertions(+), 179 deletions(-)

diff --git a/front/src/components/album/Widget.vue b/front/src/components/album/Widget.vue
index 9636702ec..89442369f 100644
--- a/front/src/components/album/Widget.vue
+++ b/front/src/components/album/Widget.vue
@@ -10,6 +10,7 @@ import axios from 'axios'
 
 import AlbumCard from '~/components/album/Card.vue'
 import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
 
@@ -72,49 +73,50 @@ watch(
 </script>
 
 <template>
-  <h2
-    v-if="!!$slots.title"
-    class="ui header"
-  >
-    <slot name="title" />
-    <span
-      v-if="showCount"
-      class="ui tiny circular label"
-    >{{ count }}</span>
-  </h2>
-  <slot />
-  <inline-search-bar
-    v-if="search"
-    v-model="query"
-    @search="performSearch"
-  />
-  <template v-if="!isLoading && albums.length >= 0">
-    <Layout flex>
-      <Loader v-if="isLoading" />
-      <album-card
-        v-for="album in albums"
-        :key="album.id"
-        :album="album"
-      />
-    </Layout>
-  </template>
-  <slot
-    v-if="!isLoading && albums.length === 0"
-    name="empty-state"
-  >
-    <empty-state
-      :refresh="true"
-      @refresh="fetchData"
-    />
-  </slot>
-  <template v-if="nextPage">
-    <Spacer />
-    <Button
-      v-if="nextPage"
-      primary
-      @click="fetchData(nextPage)"
+  <div class="album-widget">
+    <h2
+      v-if="!!$slots.title"
     >
-      {{ t('components.audio.album.Widget.button.more') }}
-    </Button>
-  </template>
+      <slot name="title" />
+      <span
+        v-if="showCount"
+        class="ui tiny circular label"
+      >{{ count }}</span>
+    </h2>
+    <slot />
+    <inline-search-bar
+      v-if="search"
+      v-model="query"
+      @search="performSearch"
+    />
+    <Loader v-if="isLoading" />
+    <template v-if="!isLoading && albums.length > 0">
+      <Layout flex>
+        <album-card
+          v-for="album in albums"
+          :key="album.id"
+          :album="album"
+        />
+      </Layout>
+    </template>
+    <slot
+      v-if="!isLoading && albums.length === 0"
+      name="empty-state"
+    >
+      <empty-state
+        :refresh="true"
+        @refresh="fetchData"
+      />
+    </slot>
+    <template v-if="nextPage">
+      <Spacer />
+      <Button
+        v-if="nextPage"
+        primary
+        @click="fetchData(nextPage)"
+      >
+        {{ t('components.audio.album.Widget.button.more') }}
+      </Button>
+    </template>
+  </div>
 </template>
diff --git a/front/src/components/audio/ChannelsWidget.vue b/front/src/components/audio/ChannelsWidget.vue
index 6a94e10df..248785f36 100644
--- a/front/src/components/audio/ChannelsWidget.vue
+++ b/front/src/components/audio/ChannelsWidget.vue
@@ -61,7 +61,12 @@ fetchData()
 </script>
 
 <template>
-  <div>
+  <div class="channel-widget">
+    <h2
+      v-if="!!$slots.title"
+    >
+      <slot name="title" />
+    </h2>
     <slot />
     <Layout flex>
       <Loader v-if="isLoading" />
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index ed89902af..83e0b167a 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -109,117 +109,121 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
 
 <template>
 <!-- TODO: Use activity.vue -->
-  <h2 v-if="!!$slots.title">
-    <slot name="title" />
-    <span
-      v-if="showCount"
-      class="ui tiny circular label"
-    >{{ count }}</span>
-  </h2>
-  <Alert
-    v-if="count === 0"
-    blue
-    style="text-align: center;"
-  >
-    <i class="bi bi-music-note-list" />
-    {{ t('components.audio.track.Widget.empty.noResults') }}
-    <Loader v-if="isLoading" />
-  </Alert>
-  <template
-    v-if="count > 0"
-    medium-items
-  >
-    <div class="funkwhale activity"
-      v-for="object in objects"
-      :key="object.id"
-      :class="['item', itemClasses]"
+  <div class="track-widget">
+    <h2 v-if="!!$slots.title">
+      <slot name="title" />
+      <span
+        v-if="showCount"
+        class="ui tiny circular label"
+      >{{ count }}</span>
+    </h2>
+    <Spacer :size="8" />
+    <Alert
+      v-if="count === 0"
+      blue
+      style="text-align: center;"
     >
-      <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)"
-          alt=""
-        >
-        <img
-          v-else-if="object.track.cover"
-          v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
-          alt=""
-        >
-        <img
-          v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
-          v-lazy="getArtistCoverUrl(object.track.artist_credit)"
-          alt=""
-        >
-        <i
-          v-else
-          class="bi bi-vinyl-fill"
-        />
-        <!-- TODO: Add Playbutton overlay -->
-      </div>
-      <div class="activity-content">
-          <router-link
-            class="funkwhale link artist"
-            :to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
+      <i class="bi bi-music-note-list" />
+      {{ t('components.audio.track.Widget.empty.noResults') }}
+      <Loader v-if="isLoading" />
+    </Alert>
+    <Section
+      v-if="count > 0"
+      medium-items
+      alignLeft
+    >
+      <div class="funkwhale activity"
+        v-for="object in objects"
+        :key="object.id"
+        :class="['item', itemClasses]"
+      >
+        <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)"
+            alt=""
           >
-            <Heading :h3="object.track.title" title />
-          </router-link>
-          <Spacer :size="2"/>
-        <div
-          v-if="object.track.artist_credit"
-          class="funkwhale link artist"
-        >
-          <span
-            v-for="ac in object.track.artist_credit"
-            :key="ac.artist.id"
+          <img
+            v-else-if="object.track.cover"
+            v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
+            alt=""
+          >
+          <img
+            v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
+            v-lazy="getArtistCoverUrl(object.track.artist_credit)"
+            alt=""
+          >
+          <i
+            v-else
+            class="bi bi-vinyl-fill"
+          />
+          <!-- TODO: Add Playbutton overlay -->
+        </div>
+        <div class="activity-content">
+            <router-link
+              class="funkwhale link artist"
+              :to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
+            >
+              <Heading :h3="object.track.title" title />
+            </router-link>
+            <Spacer :size="2"/>
+          <div
+            v-if="object.track.artist_credit"
+            class="funkwhale link artist"
+          >
+            <span
+              v-for="ac in object.track.artist_credit"
+              :key="ac.artist.id"
+            >
+              <router-link
+                class="discrete link"
+                :to="{ name: 'library.artists.detail', params: { id: ac.artist.id } }"
+              >
+                {{ ac.credit }}
+              </router-link>
+              <span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
+            </span>
+          </div>
+          <TagsList
+            label-classes="tiny"
+            :truncate-size="20"
+            :limit="2"
+            :show-more="false"
+            :tags="object.track.tags"
+          />
+          <Spacer :size="4"/>
+          <div
+            v-if="isActivity"
+            class="extra"
           >
             <router-link
-              class="discrete link"
-              :to="{ name: 'library.artists.detail', params: { id: ac.artist.id } }"
+              class="funkwhale link user"
+              :to="{name: 'profile.overview', params: {username: object.actor.name}}"
             >
-              {{ ac.credit }}
+              <span class="at symbol" />{{ object.actor.name }}
             </router-link>
-            <span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
-          </span>
+            <span class="right floated"><human-date :date="object.creation_date" /></span>
+          </div>
         </div>
-        <TagsList
-          label-classes="tiny"
-          :truncate-size="20"
-          :limit="2"
-          :show-more="false"
-          :tags="object.track.tags"
+        <play-button
+          :account="object.actor"
+          :dropdown-only="true"
+          :track="object.track"
+          square-small
         />
-        <Spacer :size="4"/>
-        <div
-          v-if="isActivity"
-          class="extra"
-        >
-          <router-link
-            class="funkwhale link user"
-            :to="{name: 'profile.overview', params: {username: object.actor.name}}"
-          >
-            <span class="at symbol" />{{ object.actor.name }}
-          </router-link>
-          <span class="right floated"><human-date :date="object.creation_date" /></span>
-        </div>
       </div>
-      <play-button
-        :account="object.actor"
-        :dropdown-only="true"
-        :track="object.track"
-        square-small
-      />
-    </div>
-  </template>
-  <Loader v-if="isLoading" />
-  <template v-if="nextPage">
-    <Spacer :size="16"/>
-    <Button
-      primary
-      @click="fetchData(nextPage as string)"
-    >
-      {{ t('components.audio.track.Widget.button.more') }}
-    </Button>
-  </template>
+    </Section>
+    <Loader v-if="isLoading" />
+    <template v-if="nextPage">
+      <Spacer />
+      <Button
+        primary
+        @click="fetchData(nextPage as string)"
+      >
+        {{ t('components.audio.track.Widget.button.more') }}
+      </Button>
+    </template>
+  </div>
 </template>
 
 
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index af8245b69..a8252b271 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -63,7 +63,7 @@ fetchData()
 </script>
 
 <template>
-  <Layout main stack gap-64
+  <Layout main stack
     :key="route?.name ?? undefined"
     v-title="labels.title"
   >
@@ -77,39 +77,40 @@ fetchData()
     </template>
   </playlist-widget>
 
-  <Section
-    v-if="scope === 'all'"
-    alignLeft
-    :h2="t('components.library.Home.header.newChannels')"
-  />
   <channels-widget
+    v-if="scope === 'all'"
     :show-modification-date="true"
     :limit="12"
     :filters="{ordering: '-creation_date', external: 'true'}"
-  />
-  <Section
-    alignLeft
-    :h2="t('components.library.Home.header.recentlyListened')"
   >
-    <track-widget
-      :url="'history/listenings/'"
-      :filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
-      :websocket-handlers="['Listen']"
-    />
-  </Section>
-  <Section
-    alignLeft
-    :h2="t('components.library.Home.header.recentlyFavorited')"
+    <template #title>
+      {{ t('components.library.Home.header.newChannels') }}
+    </template>
+  </channels-widget>
+
+  <track-widget
+    :url="'history/listenings/'"
+    :filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
+    :websocket-handlers="['Listen']"
   >
-    <track-widget
-      :url="'favorites/tracks/'"
-      :filters="{scope: scope, ordering: '-creation_date'}"
-    />
-  </Section>
-  <Section
-    alignLeft
-    :h2="t('components.library.Home.header.recentlyAdded')"
-  />
-    <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}"/>
+    <template #title>
+      {{ t('components.library.Home.header.recentlyListened') }}
+    </template>
+  </track-widget>
+
+  <track-widget
+    :url="'favorites/tracks/'"
+    :filters="{scope: scope, ordering: '-creation_date'}"
+  >
+    <template #title>
+      {{ t('components.library.Home.header.recentlyFavorited') }}
+    </template>
+  </track-widget>
+
+  <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
+    <template #title>
+      {{ t('components.library.Home.header.recentlyAdded') }}
+    </template>
+  </album-widget>
   </Layout>
 </template>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index 55f4bb40a..4e2920f7b 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -58,7 +58,7 @@ watch(
 </script>
 
 <template>
-  <Layout stack>
+  <div class="playlist-widget">
     <h2 v-if="!!$slots.title">
       <slot name="title" />
     </h2>
@@ -68,7 +68,7 @@ watch(
     <Layout
       v-else-if="objects.length > 0"
       flex
-      style="gap: 16px; flex-wrap: wrap;"
+      gap-16
     >
       <PlaylistCard
         v-for="playlist in objects"
@@ -97,6 +97,7 @@ watch(
     </Alert>
 
     <template v-if="nextPage">
+      <Spacer />
       <Button
         v-if="nextPage"
         primary
@@ -105,5 +106,5 @@ watch(
         {{ t('components.playlists.Widget.button.more') }}
       </Button>
     </template>
-  </Layout>
+  </div>
 </template>