fix(front): playlist description and header component

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,11 +134,12 @@ const deletePlaylist = async () => {
       v-if="isLoading"
       v-title="labels.playlist"
     />
-    <Layout
+    <Header
       v-if="!isLoading && playlist"
-      v-title="playlist.name"
+      :h1="playlist.name"
-      flex
+      page-heading
     >
+      <template #image>
         <div class="playlist-grid">
           <img
             v-for="(url, idx) in images"
@@ -146,12 +149,7 @@ const deletePlaylist = async () => {
             :style="{ backgroundColor: randomizedColors[idx % randomizedColors.length] }"
           >
         </div>
-      <Layout
+      </template>
-        stack
-        style="flex: 1; gap: 8px;"
-      >
-        <Spacer />
-        <h1>{{ playlist.name }}</h1>
       <div class="meta">
         {{ playlist.tracks_count }}
         {{ t('views.playlists.Detail.header.tracks') }}
@@ -175,8 +173,8 @@ const deletePlaylist = async () => {
         />
       </Layout>
       <RenderedDescription
-          :description="playlist.description"
+        :content="{ html: playlist.description }"
-          :max-length="200"
+        :truncate-length="200"
         :show-more="true"
       />
       <Layout
@@ -221,27 +219,7 @@ const deletePlaylist = async () => {
           @import="fetchData"
         />
       </Layout>
-      </Layout>
+    </Header>
-      <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>
 
     <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>