From 557e485166edfe5c371521e2692ebd5f93524cfb Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 27 Jan 2025 13:51:24 +0100
Subject: [PATCH] feat(front): Implement header component in playlists list

---
 front/src/components/ui/Header.vue |  5 ++---
 front/src/views/playlists/List.vue | 21 +++++++--------------
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/front/src/components/ui/Header.vue b/front/src/components/ui/Header.vue
index 84be1ae82..5eb50c5e9 100644
--- a/front/src/components/ui/Header.vue
+++ b/front/src/components/ui/Header.vue
@@ -31,7 +31,7 @@ const { style, ...fallthroughProps } = useAttrs()
     </div>
     <Layout stack no-gap style="flex-grow: 1;">
       <Layout flex no-gap
-        style="align-self: baseline;"
+        style="align-self: stretch;"
       >
         <!-- Set distance between baseline and previous row -->
         <Spacer v
@@ -42,8 +42,7 @@ const { style, ...fallthroughProps } = useAttrs()
         <Spacer grow />
         <!-- Action! You can either specify `to` or `onClick`. -->
         <component v-if="action" :is="'onClick' in action ? actionComponents.Button : actionComponents.Link"
-          ghost force-underline thin-font min-content align-self="baseline"
-          :style="`margin-right: ${('primary' in props || 'secondary' in props || 'destructive' in props) ? '0px' : '-16px'}`"
+          force-underline thin-font min-content align-self="baseline"
           v-bind="{...fallthroughProps, ...action}"
         >
           {{ action?.text }}
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 763419f8b..66a1659df 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -20,6 +20,7 @@ import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
+import Header from '~/components/ui/Header.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -111,20 +112,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
 
 <template>
   <Layout stack main>
-    <Layout
-      flex
-      style="justify-content: space-between;"
-      v-if="store.state.auth.authenticated"
-    >
-    <h1>{{ t('views.playlists.List.header.browse') }}</h1>
-      <Button
-        primary
-        icon="bi-music-note-list"
-        @click="store.commit('playlists/showModal', true)"
-      >
-        {{ t('views.playlists.List.button.manage') }}
-      </Button>
-    </Layout>
+    <Header
+      :h1="t('views.playlists.List.header.browse')"
+      :action="{ onClick: () => store.commit('playlists/showModal', true), text: t('views.playlists.List.button.manage') }"
+      icon="bi-music-note-list"
+      primary
+    />
     <template >
 
     </template>