From 44b26a3cacdbc19356c64a9c089929cffae091bb Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 29 Jan 2025 17:30:57 +0100
Subject: [PATCH] refactor(front): use header component on all toplevel pages

---
 front/src/components/favorites/List.vue       | 20 ++++++++--------
 front/src/components/library/Albums.vue       | 21 +++++++++++------
 front/src/components/library/Artists.vue      | 20 +++++++++-------
 front/src/components/library/Podcasts.vue     |  5 +++-
 front/src/components/library/Radios.vue       | 16 ++++++++-----
 front/src/components/ui/Header.vue            |  3 +++
 .../src/views/channels/SubscriptionsList.vue  | 23 ++++++++++---------
 front/src/views/playlists/List.vue            |  5 ++++
 8 files changed, 70 insertions(+), 43 deletions(-)

diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index b63775d96..ce37e2634 100644
--- a/front/src/components/favorites/List.vue
+++ b/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/>
-    <Layout flex v-if="results">
-      <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>
+    <Header :h1="labels.title">
+      <template #action>
+        <RadioButton
+          v-if="store.state.favorites.count > 0"
+          type="favorites"
+        />
+      </template>
+    </Header>
+
     <Loader v-if="isLoading"/>
     <Layout
       v-if="store.state.favorites.count > 0"
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 455c54a30..e8e239b8e 100644
--- a/front/src/components/library/Albums.vue
+++ b/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;"
@@ -226,10 +233,10 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         </Card>
       </Layout>
       <Spacer grow />
-        <Pagination
-          v-if="result && result.count > paginateBy"
-          v-model:page="page"
-          :pages="Math.ceil((result.count || 0)/paginateBy)"
-        />
+      <Pagination
+        v-if="result && result.count > paginateBy"
+        v-model:page="page"
+        :pages="Math.ceil((result.count || 0)/paginateBy)"
+      />
     </Layout>
 </template>
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index ef9a6c673..7ca60c4bf 100644
--- a/front/src/components/library/Artists.vue
+++ b/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>
-      {{ t('components.library.Artists.header.browse') }}
-    </h1>
+    <Header :h1="t('components.library.Artists.header.browse')" />
     <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;"
@@ -234,10 +238,10 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       </Card>
     </Layout>
     <Spacer grow />
-      <Pagination
-        v-if="result && result.count > paginateBy"
-        v-model:page="page"
-        :pages="Math.ceil(result.count / paginateBy)"
-      />
+    <Pagination
+      v-if="result && result.count > paginateBy"
+      v-model:page="page"
+      :pages="Math.ceil(result.count / paginateBy)"
+    />
   </Layout>
 </template>
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index 21c94b120..08d8afc07 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/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"
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index e2d268430..7f5c09414 100644
--- a/front/src/components/library/Radios.vue
+++ b/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"
         />
+        <Pagination
+          v-if="result && result.count > paginateBy"
+          v-model:page="page"
+          :pages="Math.ceil(result.count / paginateBy)"
+        />
       </div>
-      <Pagination
-        v-if="result && result.count > paginateBy"
-        v-model:page="page"
-        :pages="Math.ceil(result.count / paginateBy)"
-      />
   </Layout>
 </template>
diff --git a/front/src/components/ui/Header.vue b/front/src/components/ui/Header.vue
index b3c382229..9b2d44629 100644
--- a/front/src/components/ui/Header.vue
+++ b/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>
diff --git a/front/src/views/channels/SubscriptionsList.vue b/front/src/views/channels/SubscriptionsList.vue
index af135de4e..e2f588443 100644
--- a/front/src/views/channels/SubscriptionsList.vue
+++ b/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">
-      {{ labels.title }}
-      <div class="actions">
-        <a @click.stop.prevent="showSubscribeModal = true">
-          <i class="bi bi-plus" />
-          {{ t('views.channels.SubscriptionsList.link.addNew') }}
-        </a>
-      </div>
-    </h1>
+    <Header
+      :h1="labels.title"
+      :action="{
+        text: t('views.channels.SubscriptionsList.link.addNew'),
+        onClick: ()=> showSubscribeModal = true
+      }"
+      icon="bi-plus"
+      primary
+    />
     <Modal
       v-model="showSubscribeModal"
       :title="t('views.channels.SubscriptionsList.modal.subscription.header')"
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index ac10d9bc9..a70d80324 100644
--- a/front/src/views/playlists/List.vue
+++ b/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"