refactor(front): use header component on all toplevel pages

front/src/components/favorites/List.vue

@@ -14,7 +14,7 @@ import axios from 'axios'
 import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Section from '~/components/ui/Section.vue'
+import Header from '~/components/ui/Header.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
 import Alert from '~/components/ui/Alert.vue'
@@ -110,15 +110,15 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
   <Layout main stack no-gap align-left
     v-title="labels.title"
   >
-    <Spacer/>
+    <Header :h1="labels.title">
-    <Layout flex v-if="results">
+      <template #action>
-      <h1>{{ t('components.favorites.List.title', store.state.favorites.count) }}</h1>
-      <Spacer h grow />
         <RadioButton
           v-if="store.state.favorites.count > 0"
           type="favorites"
         />
-    </Layout>
+      </template>
+    </Header>
+
     <Loader v-if="isLoading"/>
     <Layout
       v-if="store.state.favorites.count > 0"

front/src/components/library/Albums.vue

@@ -19,6 +19,7 @@ import Pagination from '~/components/ui/Pagination.vue'
 import Card from '~/components/ui/Card.vue'
 import AlbumCard from '~/components/album/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
@@ -130,7 +131,9 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
 
 <template>
     <Layout stack main v-title="labels.title">
-      <h1>{{ t('components.library.Albums.header.browse') }}</h1>
+      <Header
+        :h1="t('components.library.Albums.header.browse')"
+      />
       <Layout form flex
         :class="['ui', {'loading': isLoading}, 'form']"
         @submit.prevent="search"
@@ -192,7 +195,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         </select>
       </Layout>
       <Loader v-if="isLoading"/>
-      <Spacer />
+      <Pagination
+        v-if="result && result.count > paginateBy"
+        v-model:page="page"
+        :pages="Math.ceil((result.count || 0)/paginateBy)"
+      />
       <Layout grid
         v-if="result && result.results.length > 0"
         style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"

front/src/components/library/Artists.vue

@@ -17,6 +17,7 @@ import ArtistCard from '~/components/artist/Card.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
 import Input from '~/components/ui/Input.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Alert from '~/components/ui/Alert.vue'
@@ -129,9 +130,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
 
 <template>
   <Layout stack main v-title="labels.title">
-    <h1>
+    <Header :h1="t('components.library.Artists.header.browse')" />
-      {{ t('components.library.Artists.header.browse') }}
-    </h1>
     <Layout form flex
       :class="['ui', {'loading': isLoading}, 'form']"
       @submit.prevent="search"
@@ -201,6 +200,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       />
     </Layout>
     <Loader v-if="isLoading"/>
+    <Pagination
+      v-if="result && result.count > paginateBy"
+      v-model:page="page"
+      :pages="Math.ceil(result.count / paginateBy)"
+    />
     <Layout grid
       v-if="result && result.results.length > 0"
       style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"

front/src/components/library/Podcasts.vue

@@ -19,6 +19,7 @@ import Card from '~/components/ui/Card.vue'
 import ArtistCard from '~/components/artist/Card.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
@@ -143,7 +144,9 @@ const isOpen = computed({
 
 <template>
   <Layout stack main>
-    <h1>{{ t('components.library.Podcasts.header.browse') }}</h1>
+    <Header
+      :h1="t('components.library.Podcasts.header.browse')"
+    />
     <Layout form flex
       :class="['ui', {'loading': isLoading}, 'form']"
       @submit.prevent="search"

front/src/components/library/Radios.vue

@@ -200,7 +200,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </option>
         </select>
       </Layout>
-      <div class="ui hidden divider" />
       <Alert
         blue
         style="align-items: center;"
@@ -224,17 +223,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         v-if="result && result.results.length > 0"
         class="ui cards"
       >
+        <Pagination
+          v-if="result && result.count > paginateBy"
+          v-model:page="page"
+          :pages="Math.ceil(result.count / paginateBy)"
+        />
         <radio-card
           v-for="radio in result.results"
           :key="radio.id"
           type="custom"
           :custom-radio="radio"
         />
-      </div>
         <Pagination
           v-if="result && result.count > paginateBy"
           v-model:page="page"
           :pages="Math.ceil(result.count / paginateBy)"
         />
+      </div>
   </Layout>
 </template>

front/src/components/ui/Header.vue

@@ -48,6 +48,9 @@ const { style, ...fallthroughProps } = useAttrs()
         >
           {{ action?.text }}
         </component>
+        <div v-if="$slots.action" style="align-self: center;">
+          <slot name="action" />
+        </div>
       </Layout>
       <slot />
     </Layout>

front/src/views/channels/SubscriptionsList.vue

@@ -8,9 +8,10 @@ import axios from 'axios'
 
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
-import Modal from '~/components/ui/Modal.vue'
-import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
+import Button from '~/components/ui/Button.vue'
+import Modal from '~/components/ui/Modal.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -61,15 +62,15 @@ const showSubscribeModal = ref(false)
   <Layout stack main
     v-title="labels.title"
   >
-    <h1 class="ui with-actions header">
+    <Header
-      {{ labels.title }}
+      :h1="labels.title"
-      <div class="actions">
+      :action="{
-        <a @click.stop.prevent="showSubscribeModal = true">
+        text: t('views.channels.SubscriptionsList.link.addNew'),
-          <i class="bi bi-plus" />
+        onClick: ()=> showSubscribeModal = true
-          {{ t('views.channels.SubscriptionsList.link.addNew') }}
+      }"
-        </a>
+      icon="bi-plus"
-      </div>
+      primary
-    </h1>
+    />
     <Modal
       v-model="showSubscribeModal"
       :title="t('views.channels.SubscriptionsList.modal.subscription.header')"

front/src/views/playlists/List.vue

@@ -181,6 +181,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
     >
       <Loader v-if="isLoading"/>
+      <Pagination
+        v-if="result && result.count > paginateBy"
+        v-model:page="page"
+        :pages="Math.ceil(result.count/paginateBy)"
+      />
       <playlist-card-list
         v-if="result && result.results.length > 0"
         :playlists="result.results"