feat(ui) [WIP] explore page

front/src/components/library/Home.vue

@@ -10,6 +10,7 @@ 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 useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
@@ -60,10 +61,30 @@ fetchData()
 </script>
 
 <template>
-  <main
+  <Layout main stack noGap
     :key="route?.name ?? undefined"
     v-title="labels.title"
   >
+  <h1>{{ t('components.Sidebar.header.explore') }}</h1>
+
+  <playlist-widget
+    :url="'playlists/'"
+    :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
+  >
+    <template #title>
+      {{ t('components.library.Home.header.playlists') }}
+    </template>
+  </playlist-widget>
+
+  <template v-if="scope === 'all'">
+    <h3>{{ t('components.library.Home.header.newChannels') }}</h3>
+    <channels-widget
+      :show-modification-date="true"
+      :limit="12"
+      :filters="{ordering: '-creation_date', external: 'false'}"
+    />
+  </template>
+
     <section class="ui vertical stripe segment">
       <div class="ui stackable three column grid">
         <div class="column">
@@ -87,17 +108,6 @@ fetchData()
             </template>
           </track-widget>
         </div>
-        <div class="column">
-        PLAYLIST WIDGET
-          <playlist-widget
-            :url="'playlists/'"
-            :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
-          >
-            <template #title>
-              {{ t('components.library.Home.header.playlists') }}
-            </template>
-          </playlist-widget>
-        </div>
       </div>
       <div class="ui section hidden divider" />
       <div class="ui stackable one column grid">
@@ -109,16 +119,6 @@ fetchData()
           </album-widget>
         </div>
       </div>
-      <template v-if="scope === 'all'">
-        <h3 class="ui header">
-          {{ t('components.library.Home.header.newChannels') }}
-        </h3>
-        <channels-widget
-          :show-modification-date="true"
-          :limit="12"
-          :filters="{ordering: '-creation_date', external: 'false'}"
-        />
-      </template>
     </section>
-  </main>
+  </Layout>
 </template>