refactor(front): use header and section components on explore

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

@@ -230,7 +230,7 @@ watch(
     <template v-if="nextPage">
       <Spacer :size="16"/>
       <Button
-        secondary
+        primary
         @click="fetchData(nextPage as string)"
       >
         {{ t('components.audio.track.Widget.button.more') }}

front/src/components/library/Albums.vue

@@ -131,9 +131,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
 
 <template>
     <Layout stack main v-title="labels.title">
-      <Header
-        :h1="t('components.library.Albums.header.browse')"
-      />
+      <Header :h1="t('components.library.Albums.header.browse')" />
       <Layout form flex
         :class="['ui', {'loading': isLoading}, 'form']"
         @submit.prevent="search"

front/src/components/library/Home.vue

@@ -11,6 +11,7 @@ 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 useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
@@ -65,8 +66,7 @@ fetchData()
     :key="route?.name ?? undefined"
     v-title="labels.title"
   >
-  <h1>{{ t('components.Sidebar.header.explore') }}</h1>
-
+  <Header :h1="t('components.Sidebar.header.explore')" />
   <playlist-widget
     :url="'playlists/'"
     :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
@@ -77,7 +77,7 @@ fetchData()
   </playlist-widget>
 
   <template v-if="scope === 'all'">
-    <h3>{{ t('components.library.Home.header.newChannels') }}</h3>
+    <h2>{{ t('components.library.Home.header.newChannels') }}</h2>
     <channels-widget
       :show-modification-date="true"
       :limit="12"
@@ -85,40 +85,33 @@ fetchData()
     />
   </template>
 
-    <section class="ui vertical stripe segment">
-      <div class="ui stackable three column grid">
-        <div class="column">
-          <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>
-        </div>
-        <div class="column">
-          <track-widget
-            :url="'favorites/tracks/'"
-            :filters="{scope: scope, ordering: '-creation_date'}"
-          >
-            <template #title>
-              {{ t('components.library.Home.header.recentlyFavorited') }}
-            </template>
-          </track-widget>
-        </div>
-      </div>
-      <div class="ui section hidden divider" />
-      <div class="ui stackable one column grid">
-        <div class="column">
-          <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
-            <template #title>
-              {{ t('components.library.Home.header.recentlyAdded') }}
-            </template>
-          </album-widget>
-        </div>
-      </div>
-    </section>
+    <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>
   </Layout>
 </template>

front/src/components/playlists/Widget.vue

@@ -59,9 +59,9 @@ watch(
 
 <template>
   <Layout stack>
-    <h3 v-if="!!$slots.title">
+    <h2 v-if="!!$slots.title">
       <slot name="title" />
-    </h3>
+    </h2>
 
     <Loader v-if="isLoading"/>
 
@@ -97,7 +97,6 @@ watch(
     </Alert>
 
     <template v-if="nextPage">
-      <Spacer v grow/>
       <Button
         v-if="nextPage"
         primary