From 2b3831d4d329d2e8096c7852eb3d1a4d730dba3b Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 3 Apr 2025 16:21:29 +0200
Subject: [PATCH] fix(front): playlist description and header component

---
 front/src/views/playlists/Detail.vue | 202 +++++++++++++--------------
 1 file changed, 100 insertions(+), 102 deletions(-)

diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index f3fc007fb..648e64d1d 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -17,6 +17,7 @@ import HumanDate from '~/components/common/HumanDate.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Button from '~/components/ui/Button.vue'
@@ -125,6 +126,7 @@ const deletePlaylist = async () => {
 
 <template>
   <Layout
+    v-title="playlist?.name"
     stack
     main
   >
@@ -132,116 +134,92 @@ const deletePlaylist = async () => {
       v-if="isLoading"
       v-title="labels.playlist"
     />
-    <Layout
+    <Header
       v-if="!isLoading && playlist"
-      v-title="playlist.name"
-      flex
+      :h1="playlist.name"
+      page-heading
     >
-      <div class="playlist-grid">
-        <img
-          v-for="(url, idx) in images"
-          :key="idx"
-          v-lazy="url"
-          :alt="playlist.name"
-          :style="{ backgroundColor: randomizedColors[idx % randomizedColors.length] }"
-        >
+      <template #image>
+        <div class="playlist-grid">
+          <img
+            v-for="(url, idx) in images"
+            :key="idx"
+            v-lazy="url"
+            :alt="playlist.name"
+            :style="{ backgroundColor: randomizedColors[idx % randomizedColors.length] }"
+          >
+        </div>
+      </template>
+      <div class="meta">
+        {{ playlist.tracks_count }}
+        {{ t('views.playlists.Detail.header.tracks') }}
+        <i class="bi bi-dot" />
+        <Duration :seconds="playlist.duration" />
       </div>
       <Layout
-        stack
-        style="flex: 1; gap: 8px;"
+        flex
+        gap-8
       >
-        <Spacer />
-        <h1>{{ playlist.name }}</h1>
-        <div class="meta">
-          {{ playlist.tracks_count }}
-          {{ t('views.playlists.Detail.header.tracks') }}
-          <i class="bi bi-dot" />
-          <Duration :seconds="playlist.duration" />
-        </div>
-        <Layout
-          flex
-          gap-8
-        >
-          {{ t('views.playlists.Detail.meta.attribution') }}
-          <ActorLink
-            :actor="playlist.actor"
-            :avatar="false"
-            :discrete="true"
-          />
-          <i class="bi bi-dot" />
-          {{ t('views.playlists.Detail.meta.updated') }}
-          <HumanDate
-            :date="playlist.modification_date"
-          />
-        </Layout>
-        <RenderedDescription
-          :description="playlist.description"
-          :max-length="200"
-          :show-more="true"
+        {{ t('views.playlists.Detail.meta.attribution') }}
+        <ActorLink
+          :actor="playlist.actor"
+          :avatar="false"
+          :discrete="true"
+        />
+        <i class="bi bi-dot" />
+        {{ t('views.playlists.Detail.meta.updated') }}
+        <HumanDate
+          :date="playlist.modification_date"
         />
-        <Layout
-          flex
-          class="header-buttons"
-        >
-          <PlayButton
-            split
-            :is-playable="playlist.is_playable"
-            :tracks="tracks"
-          >
-            {{ t('views.playlists.Detail.button.playAll') }}
-          </PlayButton>
-          <Button
-            v-if="playlist.tracks_count > 1"
-            primary
-            icon="bi-shuffle"
-            :aria-label="t('components.audio.Player.label.shuffleQueue')"
-            @click.prevent.stop="shuffle()"
-          >
-            {{ t('components.audio.Player.label.shuffleQueue') }}
-          </Button>
-          <Button
-            v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
-            secondary
-            icon="bi-pencil"
-            @click="edit = !edit"
-          >
-            <template v-if="edit">
-              {{ t('views.playlists.Detail.button.stopEdit') }}
-            </template>
-            <template v-else>
-              {{ t('views.playlists.Detail.button.edit') }}
-            </template>
-          </Button>
-          <Spacer
-            h
-            grow
-          />
-          <playlist-dropdown
-            :playlist="playlist"
-            @import="fetchData"
-          />
-        </Layout>
       </Layout>
-      <Modal
-        v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
-        v-model="showEmbedModal"
-        title="t('views.playlists.Detail.modal.embed.header')"
+      <RenderedDescription
+        :content="{ html: playlist.description }"
+        :truncate-length="200"
+        :show-more="true"
+      />
+      <Layout
+        flex
+        class="header-buttons"
       >
-        <div class="scrolling content">
-          <div class="description">
-            <embed-wizard
-              :id="playlist.id"
-              type="playlist"
-            />
-          </div>
-        </div>
-        <template #actions>
-          <Button variant="outline">
-            {{ t('views.playlists.Detail.button.cancel') }}
-          </Button>
-        </template>
-      </Modal>
-    </Layout>
+        <PlayButton
+          split
+          :is-playable="playlist.is_playable"
+          :tracks="tracks"
+        >
+          {{ t('views.playlists.Detail.button.playAll') }}
+        </PlayButton>
+        <Button
+          v-if="playlist.tracks_count > 1"
+          primary
+          icon="bi-shuffle"
+          :aria-label="t('components.audio.Player.label.shuffleQueue')"
+          @click.prevent.stop="shuffle()"
+        >
+          {{ t('components.audio.Player.label.shuffleQueue') }}
+        </Button>
+        <Button
+          v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
+          secondary
+          icon="bi-pencil"
+          @click="edit = !edit"
+        >
+          <template v-if="edit">
+            {{ t('views.playlists.Detail.button.stopEdit') }}
+          </template>
+          <template v-else>
+            {{ t('views.playlists.Detail.button.edit') }}
+          </template>
+        </Button>
+        <Spacer
+          h
+          grow
+        />
+        <playlist-dropdown
+          :playlist="playlist"
+          @import="fetchData"
+        />
+      </Layout>
+    </Header>
 
     <Layout stack>
       <template v-if="edit">
@@ -280,6 +258,26 @@ const deletePlaylist = async () => {
         </Button>
       </Alert>
     </Layout>
+
+    <Modal
+      v-if="playlist?.privacy_level === 'everyone' && playlist?.is_playable"
+      v-model="showEmbedModal"
+      title="t('views.playlists.Detail.modal.embed.header')"
+    >
+      <div class="scrolling content">
+        <div class="description">
+          <embed-wizard
+            :id="playlist.id"
+            type="playlist"
+          />
+        </div>
+      </div>
+      <template #actions>
+        <Button variant="outline">
+          {{ t('views.playlists.Detail.button.cancel') }}
+        </Button>
+      </template>
+    </Modal>
   </Layout>
 </template>