From f6ef818e60875a1ac5d859480c1e0e53082c0858 Mon Sep 17 00:00:00 2001
From: MasutaYunikon <quentinmail974@gmail.com>
Date: Wed, 29 Apr 2026 18:59:01 +0200
Subject: [PATCH] =?UTF-8?q?fix(UI/UX):=20chevron=20pour=20ouvrir=20la=20de?=
 =?UTF-8?q?scription,=20bouton=20desimporter=20de=20la=20serie=20passer=20?=
 =?UTF-8?q?=C3=A0=20supprimer=20et=20affichage=20de=20toute=20la=20descrip?=
 =?UTF-8?q?tion=20de=20la=20serie=20lors=20d'un=20clique?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/serie/SerieHero.vue       |  9 ++++++++-
 src/components/serie/SerieSeasonCard.vue | 21 +++++++++++----------
 src/views/SerieView.vue                  |  8 ++++----
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/serie/SerieHero.vue b/src/components/serie/SerieHero.vue
index 377c650..61c00e6 100644
--- a/src/components/serie/SerieHero.vue
+++ b/src/components/serie/SerieHero.vue
@@ -39,7 +39,12 @@
           >{{ serie.status }}</span>
         </div>
 
-        <p v-if="serie.plot" class="text-sm text-secondary leading-relaxed max-w-2xl line-clamp-3">
+        <p
+            v-if="serie.plot"
+            @click="expanded = !expanded"
+            class="text-sm text-secondary leading-relaxed max-w-2xl cursor-pointer select-none transition-all"
+            :class="expanded ? '' : 'line-clamp-3'"
+        >
           {{ serie.plot }}
         </p>
       </div>
@@ -48,8 +53,10 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import { ArrowLeft, Tv } from 'lucide-vue-next'
 
 defineProps<{ serie: any }>()
+const expanded = ref(false)
 </script>
diff --git a/src/components/serie/SerieSeasonCard.vue b/src/components/serie/SerieSeasonCard.vue
index bc100ac..c3a1e9a 100644
--- a/src/components/serie/SerieSeasonCard.vue
+++ b/src/components/serie/SerieSeasonCard.vue
@@ -207,16 +207,6 @@
 
           <!-- Actions épisode importé -->
           <template v-if="ep.organized && organizedByEpisode[String(ep.id)]">
-            <!-- Bouton synopsis -->
-            <button
-                v-if="ep.plot"
-                @click.stop="togglePlot(ep.id)"
-                class="w-6 h-6 flex items-center justify-center rounded transition-colors"
-                :class="plotOpen === ep.id ? 'text-accent' : 'text-muted hover:text-primary'"
-                title="Voir le synopsis"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
-            </button>
             <!-- Badge rename cliquable -->
             <button
                 v-if="epNeedsRename(ep)"
@@ -235,6 +225,17 @@
               <Trash2 :size="12" />
             </button>
           </template>
+
+          <!-- Chevron synopsis (à droite, visible si l'épisode a un plot) -->
+          <button
+              v-if="ep.plot"
+              @click.stop="togglePlot(ep.id)"
+              class="w-6 h-6 flex items-center justify-center rounded transition-colors shrink-0"
+              :class="plotOpen === ep.id ? 'text-accent' : 'text-muted hover:text-primary'"
+              title="Voir le synopsis"
+          >
+            <ChevronUp :size="14" class="transition-transform duration-200" :class="plotOpen === ep.id ? '' : 'rotate-180'" />
+          </button>
         </div>
 
         <!-- Barre progression épisode -->
diff --git a/src/views/SerieView.vue b/src/views/SerieView.vue
index e5a2877..6ef65f3 100644
--- a/src/views/SerieView.vue
+++ b/src/views/SerieView.vue
@@ -35,7 +35,7 @@
             Import manuel
           </button>
 
-          <!-- Désimporter série -->
+          <!-- Supprimer série -->
           <button
               v-if="Object.keys(organizedByEpisode).length > 0"
               @click="openUnimportSerieModal"
@@ -44,7 +44,7 @@
             <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none">
               <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>
             </svg>
-            Désimporter
+            Supprimer
           </button>
         </div>
 
@@ -114,7 +114,7 @@
       <div v-if="unimportSerieModal" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 px-4" @click.self="unimportSerieModal = false">
         <div class="bg-card border border-border rounded-xl w-full max-w-sm p-6 flex flex-col gap-5">
           <div>
-            <p class="text-sm font-semibold text-primary">Désimporter la série</p>
+            <p class="text-sm font-semibold text-primary">Supprimer la série</p>
             <p class="text-xs text-muted mt-1 truncate">{{ data?.serie?.title }}</p>
           </div>
           <label class="flex items-center gap-3 cursor-pointer select-none">
@@ -124,7 +124,7 @@
           <div class="flex items-center justify-end gap-2">
             <button @click="unimportSerieModal = false" class="btn-secondary text-xs">Annuler</button>
             <button @click="confirmUnimportSerie" class="px-4 py-2 rounded-lg border border-red-500/30 text-red-400 bg-red-500/10 hover:bg-red-500/20 transition-colors text-xs font-medium">
-              {{ deleteSerieFiles ? 'Désimporter et supprimer' : 'Désimporter' }}
+              {{ deleteSerieFiles ? 'Supprimer les fichiers' : 'Supprimer' }}
             </button>
           </div>
         </div>