From f48d894ecabc7d9102869ef56bfe4c84b774c826 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Fri, 20 Mar 2026 13:11:05 +0100
Subject: [PATCH] feat: add show more/less toggle for series description

Allow users to expand long series descriptions with a "Show more" button
and scroll through the full text, instead of being limited to 3 lines.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/series/SeriesHeader.tsx | 17 +++++++++++++----
 src/i18n/messages/en/common.json       |  2 ++
 src/i18n/messages/fr/common.json       |  4 +++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index 8aa3636..57e3835 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -24,6 +24,7 @@ interface SeriesHeaderProps {
 export const SeriesHeader = ({ series, refreshSeries, initialIsFavorite }: SeriesHeaderProps) => {
   const { toast } = useToast();
   const [isFavorite, setIsFavorite] = useState(initialIsFavorite);
+  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
   const { t } = useTranslate();
 
   useEffect(() => {
@@ -105,7 +106,7 @@ export const SeriesHeader = ({ series, refreshSeries, initialIsFavorite }: Serie
     : null;
 
   return (
-    <div className="relative min-h-[300px] md:h-[300px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden">
+    <div className="relative min-h-[300px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden">
       {/* Image de fond */}
       <div className="absolute inset-0">
         <SeriesCover
@@ -138,9 +139,17 @@ export const SeriesHeader = ({ series, refreshSeries, initialIsFavorite }: Serie
               </p>
             )}
             {series.summary && (
-              <p className="text-white/80 line-clamp-3 text-sm md:text-base">
-                {series.summary}
-              </p>
+              <div>
+                <p className={`text-white/80 text-sm md:text-base ${isDescriptionExpanded ? "max-h-[200px] overflow-y-auto" : "line-clamp-3"}`}>
+                  {series.summary}
+                </p>
+                <button
+                  onClick={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
+                  className="text-white/60 hover:text-white/90 text-xs mt-1 transition-colors"
+                >
+                  {t(isDescriptionExpanded ? "series.header.showLess" : "series.header.showMore")}
+                </button>
+              </div>
             )}
             <div className="flex items-center gap-4 mt-4 justify-center md:justify-start flex-wrap">
               <StatusBadge status={statusInfo.status} icon={statusInfo.icon}>
diff --git a/src/i18n/messages/en/common.json b/src/i18n/messages/en/common.json
index 9441d19..3ba0969 100644
--- a/src/i18n/messages/en/common.json
+++ b/src/i18n/messages/en/common.json
@@ -261,6 +261,8 @@
         "add": "Added to favorites",
         "remove": "Removed from favorites"
       },
+      "showMore": "Show more",
+      "showLess": "Show less",
       "toggleSidebar": "Toggle sidebar",
       "toggleTheme": "Toggle theme"
     }
diff --git a/src/i18n/messages/fr/common.json b/src/i18n/messages/fr/common.json
index 0ea1731..9d531c1 100644
--- a/src/i18n/messages/fr/common.json
+++ b/src/i18n/messages/fr/common.json
@@ -260,7 +260,9 @@
       "favorite": {
         "add": "Ajouté aux favoris",
         "remove": "Retiré des favoris"
-      }
+      },
+      "showMore": "Voir plus",
+      "showLess": "Voir moins"
     }
   },
   "books": {