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;">
-    <div
-      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>
+  <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"

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=""
           >
@@ -163,52 +165,51 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
               {{ object.track.title }}
             </router-link>
           </div>
-              <div
-                v-if="object.track.artist_credit"
-                class="funkwhale link artist"
+          <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 } }"
               >
-                <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"
-              />
+                {{ 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"
+          />
 
-              <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"
-            />
+          <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"
+        />
       </div>
+    </Section>
     <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'">
-    <h2>{{ t('components.library.Home.header.newChannels') }}</h2>
-    <channels-widget
-      :show-modification-date="true"
-      :limit="12"
-      :filters="{ordering: '-creation_date', external: 'true'}"
+  <Section
+    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'}"
+  />
+  <Section
+    alignLeft
+    :h2="t('components.library.Home.header.recentlyListened')"
+  />
+    <track-widget
+      :url="'history/listenings/'"
+      :filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
+      :websocket-handlers="['Listen']"
     />
-  </template>
-
-    <Section alignLeft>
-      <track-widget
-        :url="'history/listenings/'"
-        :filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
-        :websocket-handlers="['Listen']"
-      >
-        <template #title>
-          {{ t('components.library.Home.header.recentlyListened') }}
-        </template>
-      </track-widget>
-    </Section>
-    <Section>
-      <track-widget
-        :url="'favorites/tracks/'"
-        :filters="{scope: scope, ordering: '-creation_date'}"
-      >
-        <template #title>
-          {{ t('components.library.Home.header.recentlyFavorited') }}
-        </template>
-      </track-widget>
-    </Section>
-    <Section>
-      <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
-        <template #title>
-          {{ t('components.library.Home.header.recentlyAdded') }}
-        </template>
-      </album-widget>
-    </Section>
+  <Section
+    alignLeft
+    :h2="t('components.library.Home.header.recentlyFavorited')"
+  />
+    <track-widget
+      :url="'favorites/tracks/'"
+      :filters="{scope: scope, ordering: '-creation_date'}"
+    />
+  <Section
+    alignLeft
+    :h2="t('components.library.Home.header.recentlyAdded')"
+  />
+    <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}"/>
   </Layout>
 </template>