refactor(front): Use section on explore

front/src/components/album/Widget.vue

@@ -11,6 +11,7 @@ import axios from 'axios'
 import AlbumCard from '~/components/album/Card.vue'
 import Button from '~/components/ui/Button.vue'
 import Spacer from '~/components/ui/Spacer.vue'
+import Loader from '~/components/ui/Loader.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -71,7 +72,7 @@ watch(
 </script>
 
 <template>
-  <h3
+  <h2
     v-if="!!$slots.title"
     class="ui header"
   >
@@ -80,26 +81,23 @@ watch(
       v-if="showCount"
       class="ui tiny circular label"
     >{{ count }}</span>
-  </h3>
+  </h2>
   <slot />
   <inline-search-bar
     v-if="search"
     v-model="query"
     @search="performSearch"
   />
-  <div style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;">
+  <template v-if="!isLoading && albums.length >= 0">
-    <div
+    <Layout flex>
-      v-if="isLoading"
+      <Loader v-if="isLoading" />
-      class="ui inverted active dimmer"
-    >
-      <div class="ui loader" />
-    </div>
       <album-card
         v-for="album in albums"
         :key="album.id"
         :album="album"
       />
-  </div>
+    </Layout>
+  </template>
   <slot
     v-if="!isLoading && albums.length === 0"
     name="empty-state"

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

@@ -13,6 +13,7 @@ import useWebSocketHandler from '~/composables/useWebSocketHandler'
 import Button from '~/components/ui/Button.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
+import Section from '~/components/ui/Section.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
@@ -38,7 +39,7 @@ const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   isActivity: true,
   showCount: false,
-  limit: 5,
+  limit: 9,
   itemClasses: '',
   websocketHandlers: () => []
 })
@@ -108,13 +109,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
 <template>
 <!-- TODO: Use activity.vue -->
   <div class="component-track-widget">
-    <h3 v-if="!!$slots.title">
+    <h2 v-if="!!$slots.title">
       <slot name="title" />
       <span
         v-if="showCount"
         class="ui tiny circular label"
       >{{ count }}</span>
-    </h3>
+    </h2>
     <Alert
       v-if="count === 0"
       blue
@@ -124,8 +125,9 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       {{ t('components.audio.track.Widget.empty.noResults') }}
       <Loader v-if="isLoading" />
     </Alert>
-    <div
+    <Section
       v-if="count > 0"
+      medium-items
     >
       <div class="funkwhale activity"
         v-for="object in objects"
@@ -144,7 +146,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
             alt=""
           >
           <img
-            v-else-if="object.track.artist_credit && object.track.artist_credit.length > 0"
+            v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
             v-lazy="getArtistCoverUrl(object.track.artist_credit)"
             alt=""
           >
@@ -207,8 +209,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
           :track="object.track"
         />
       </div>
-        </div>
+    </Section>
-      </div>
     <Loader v-if="isLoading" />
     <template v-if="nextPage">
       <Spacer :size="16"/>
@@ -219,6 +220,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         {{ t('components.audio.track.Widget.button.more') }}
       </Button>
     </template>
+  </div>
 </template>
 
 

front/src/components/library/Home.vue

@@ -10,8 +10,9 @@ import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import PlaylistWidget from '~/components/playlists/Widget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
 import AlbumWidget from '~/components/album/Widget.vue'
-import Layout from '~/components/ui/Layout.vue'
 import Header from '~/components/ui/Header.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/Section.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
@@ -62,7 +63,7 @@ fetchData()
 </script>
 
 <template>
-  <Layout main stack noGap
+  <Layout main stack gap-64
     :key="route?.name ?? undefined"
     v-title="labels.title"
   >
@@ -76,42 +77,37 @@ fetchData()
     </template>
   </playlist-widget>
 
-  <template v-if="scope === 'all'">
+  <Section
-    <h2>{{ t('components.library.Home.header.newChannels') }}</h2>
+    v-if="scope === 'all'"
+    alignLeft
+    :h2="t('components.library.Home.header.newChannels')"
+  />
   <channels-widget
     :show-modification-date="true"
     :limit="12"
     :filters="{ordering: '-creation_date', external: 'true'}"
   />
-  </template>
+  <Section
-
+    alignLeft
-    <Section alignLeft>
+    :h2="t('components.library.Home.header.recentlyListened')"
+  />
     <track-widget
       :url="'history/listenings/'"
       :filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
       :websocket-handlers="['Listen']"
-      >
+    />
-        <template #title>
+  <Section
-          {{ t('components.library.Home.header.recentlyListened') }}
+    alignLeft
-        </template>
+    :h2="t('components.library.Home.header.recentlyFavorited')"
-      </track-widget>
+  />
-    </Section>
-    <Section>
     <track-widget
       :url="'favorites/tracks/'"
       :filters="{scope: scope, ordering: '-creation_date'}"
-      >
+    />
-        <template #title>
+  <Section
-          {{ t('components.library.Home.header.recentlyFavorited') }}
+    alignLeft
-        </template>
+    :h2="t('components.library.Home.header.recentlyAdded')"
-      </track-widget>
+  />
-    </Section>
+    <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}"/>
-    <Section>
-      <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
-        <template #title>
-          {{ t('components.library.Home.header.recentlyAdded') }}
-        </template>
-      </album-widget>
-    </Section>
   </Layout>
 </template>