style(front): Section components on explore

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,9 +73,9 @@ watch(
 </script>
 
 <template>
+  <div class="album-widget">
     <h2
       v-if="!!$slots.title"
-    class="ui header"
     >
       <slot name="title" />
       <span
@@ -88,9 +89,9 @@ watch(
       v-model="query"
       @search="performSearch"
     />
-  <template v-if="!isLoading && albums.length >= 0">
-    <Layout flex>
     <Loader v-if="isLoading" />
+    <template v-if="!isLoading && albums.length > 0">
+      <Layout flex>
         <album-card
           v-for="album in albums"
           :key="album.id"
@@ -117,4 +118,5 @@ watch(
         {{ t('components.audio.album.Widget.button.more') }}
       </Button>
     </template>
+  </div>
 </template>

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" />

front/src/components/audio/track/Widget.vue

@@ -109,6 +109,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
 
 <template>
 <!-- TODO: Use activity.vue -->
+  <div class="track-widget">
     <h2 v-if="!!$slots.title">
       <slot name="title" />
       <span
@@ -116,6 +117,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         class="ui tiny circular label"
       >{{ count }}</span>
     </h2>
+    <Spacer :size="8" />
     <Alert
       v-if="count === 0"
       blue
@@ -125,9 +127,10 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       {{ t('components.audio.track.Widget.empty.noResults') }}
       <Loader v-if="isLoading" />
     </Alert>
-  <template
+    <Section
       v-if="count > 0"
       medium-items
+      alignLeft
     >
       <div class="funkwhale activity"
         v-for="object in objects"
@@ -209,10 +212,10 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
           square-small
         />
       </div>
-  </template>
+    </Section>
     <Loader v-if="isLoading" />
     <template v-if="nextPage">
-    <Spacer :size="16"/>
+      <Spacer />
       <Button
         primary
         @click="fetchData(nextPage as string)"
@@ -220,6 +223,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         {{ t('components.audio.track.Widget.button.more') }}
       </Button>
     </template>
+  </div>
 </template>
 
 

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')"
   >
+    <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']"
-    />
-  </Section>
-  <Section
-    alignLeft
-    :h2="t('components.library.Home.header.recentlyFavorited')"
   >
+    <template #title>
+      {{ t('components.library.Home.header.recentlyListened') }}
+    </template>
+  </track-widget>
+
   <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.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>

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>