From d0819c9ffaf64fd52fb32316a55a7633443d4e93 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Tue, 1 Apr 2025 11:42:31 +0200
Subject: [PATCH] fix(front): playable playlists with description

---
 .../src/components/common/RenderedDescription.vue  |  6 +++---
 front/src/components/playlists/Form.vue            | 10 ++++++++++
 front/src/views/playlists/Detail.vue               | 14 ++++++++++----
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index 1bf562a33..14eb0f898 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
   canUpdate: true,
   fetchHtml: false,
   permissive: false,
-  truncateLength: 150
+  truncateLength: 200
 })
 
 const preview = ref('')
@@ -100,7 +100,7 @@ const submit = async () => {
       <a
         v-if="showMore === false"
         class="more"
-        style="float: right; margin-top: -32px; color: var(--fw-primary);"
+        style="align-self:end; color: var(--fw-primary);"
         href=""
         @click.stop.prevent="showMore = true"
       >
@@ -109,7 +109,7 @@ const submit = async () => {
       <a
         v-else
         class="more"
-        style="float: right; margin-top: -32px; color: var(--fw-primary);"
+        style="align-self:end; color: var(--fw-primary);"
         href=""
         @click.stop.prevent="showMore = false"
       >
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 9a3217b25..bb99b8f25 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -152,6 +152,16 @@ const submit = async () => {
         :label="t('components.playlists.Form.label.visibility')"
       />
     </div>
+    <!-- TODO: Add description to model and types -->
+    <div class="field">
+      <Textarea
+        v-model="playlist?.description"
+        :label="t('components.playlists.Form.label.description')"
+        :placeholder="t('components.playlists.Form.placeholder.description')"
+        :rows="3"
+        :max-length="500"
+        />
+    </div>
     <div class="field">
       <span id="updatePlaylistLabel" />
       <Button
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 51366d5a3..df4993ccc 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -147,9 +147,10 @@ const deletePlaylist = async () => {
         >
       </div>
       <Layout
-        stack
-        style="flex: 1; gap: 8px;"
+      stack
+      style="flex: 1; gap: 8px;"
       >
+        <Spacer />
         <h1>{{ playlist.name }}</h1>
         <div class="meta">
           {{ playlist.tracks_count }}
@@ -157,7 +158,7 @@ const deletePlaylist = async () => {
           <i class="bi bi-dot" />
           <Duration :seconds="playlist.duration" />
         </div>
-        <div class="meta">
+        <Layout flex gap-8>
           <!-- TODO: Translations -->
           by
           <ActorLink
@@ -170,7 +171,12 @@ const deletePlaylist = async () => {
           <HumanDate
             :date="playlist.modification_date"
           />
-        </div>
+        </Layout>
+        <RenderedDescription
+          :description="playlist.description"
+          :max-length="200"
+          :show-more="true"
+        />
         <Layout
           flex
           class="header-buttons"