From 4200926d7b922de9b764dcf1725f832d90c8b1a0 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Mon, 9 Feb 2026 13:03:23 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20finalize=20UI/UX=20for=20AI=20Summary?=
 =?UTF-8?q?=20(rename=20to=20R=C3=A9sum=C3=A9),=20fix=20generation=20butto?=
 =?UTF-8?q?n,=20and=20mark=20cleanup=20task=20done?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ArticleCard.tsx |  2 +-
 web/src/components/ReaderView.tsx  | 28 ++++++++++++++++++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/web/src/components/ArticleCard.tsx b/web/src/components/ArticleCard.tsx
index cf96d18..bae063e 100644
--- a/web/src/components/ArticleCard.tsx
+++ b/web/src/components/ArticleCard.tsx
@@ -152,7 +152,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
                     {article.ai_summary ? (
                         <div className="flex items-center space-x-2 text-nature/80">
                             <span className="text-sm px-2 py-0.5 bg-nature/10 rounded-full font-medium flex items-center">
-                                <span className="mr-1">✨</span> Smart Digest prêt
+                                <span className="mr-1">✨</span> Résumé
                             </span>
                         </div>
                     ) : article.summary && (
diff --git a/web/src/components/ReaderView.tsx b/web/src/components/ReaderView.tsx
index 5970cc9..0c5b8a8 100644
--- a/web/src/components/ReaderView.tsx
+++ b/web/src/components/ReaderView.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { type Article, articlesApi } from '../api/articles';
 
 interface ReaderViewProps {
@@ -7,6 +8,9 @@ interface ReaderViewProps {
 }
 
 export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewProps) {
+    const [aiSummary, setAiSummary] = useState(article.ai_summary);
+    const [isSummarizing, setIsSummarizing] = useState(false);
+
     // Determine content to show: full content > summary > default message
     let displayContent = article.content || article.summary || '<p class="italic text-paper-muted">Aucun contenu disponible pour cet article.</p>';
 
@@ -64,13 +68,13 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
                         </h1>
 
                         {/* Smart Digest Section */}
-                        {article.ai_summary ? (
+                        {aiSummary ? (
                             <div className="bg-nature/5 border-l-4 border-nature p-6 rounded-r-2xl mb-12 animate-fade-in shadow-sm">
                                 <h3 className="text-nature font-black text-[10px] uppercase tracking-[0.2em] mb-4 flex items-center">
-                                    <span className="mr-2 text-base">✨</span> Smart Digest
+                                    <span className="mr-2 text-base">✨</span> Résumé
                                 </h3>
                                 <p className="text-paper-white text-lg leading-relaxed font-reading italic">
-                                    {article.ai_summary}
+                                    {aiSummary}
                                 </p>
                             </div>
                         ) : (
@@ -78,17 +82,25 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
                                 <button
                                     onClick={async (e) => {
                                         e.stopPropagation();
+                                        setIsSummarizing(true);
                                         try {
-                                            await articlesApi.summarize(article.id);
-                                            // The WS hub will trigger an update, but we could also show a loading state here
+                                            const res = await articlesApi.summarize(article.id);
+                                            setAiSummary(res.summary);
                                         } catch (err) {
                                             console.error("Failed to summarize:", err);
+                                        } finally {
+                                            setIsSummarizing(false);
                                         }
                                     }}
-                                    className="group flex items-center space-x-3 bg-nature/5 hover:bg-nature text-nature hover:text-white border border-nature/20 px-6 py-3 rounded-full transition-all duration-500"
+                                    disabled={isSummarizing}
+                                    className={`group flex items-center space-x-3 bg-nature/5 hover:bg-nature text-nature hover:text-white border border-nature/20 px-6 py-3 rounded-full transition-all duration-500 ${isSummarizing ? 'opacity-50 cursor-wait' : ''}`}
                                 >
-                                    <span className="text-xl group-hover:rotate-12 transition-transform">✨</span>
-                                    <span className="text-[10px] uppercase tracking-[0.2em] font-black">Générer le Smart Digest</span>
+                                    <span className={`text-xl transition-transform ${isSummarizing ? 'animate-spin' : 'group-hover:rotate-12'}`}>
+                                        {isSummarizing ? '⏳' : '✨'}
+                                    </span>
+                                    <span className="text-[10px] uppercase tracking-[0.2em] font-black">
+                                        {isSummarizing ? 'Génération en cours...' : 'Générer le résumé'}
+                                    </span>
                                 </button>
                             </div>
                         )}