Michael/FlowReader
1
0 Fork 0
mirror of https://github.com/R0m1k3/FlowReader.git synced 2026-10-22 06:38:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: finalize UI/UX for AI Summary (rename to Résumé), fix generation button, and mark cleanup task done

Browse Source
This commit is contained in:
Michael committed 2026-02-09 13:03:23 +01:00
1 parent c4cc7eaf87
commit 4200926d7b
2 files changed
+21 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/components/ArticleCard.tsx
+1 -1
View File
@@ -152,7 +152,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
{article.ai_summary ? ( {article.ai_summary ? (
<div className="flex items-center space-x-2 text-nature/80"> <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="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> </span>
</div> </div>
) : article.summary && ( ) : article.summary && (
web/src/components/ReaderView.tsx
+20 -8
View File
@@ -1,3 +1,4 @@
import { useState } from 'react';
import { type Article, articlesApi } from '../api/articles'; import { type Article, articlesApi } from '../api/articles';
interface ReaderViewProps { interface ReaderViewProps {
@@ -7,6 +8,9 @@ interface ReaderViewProps {
} }
export function ReaderView({ article, onClose, onToggleFavorite }: 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 // 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>'; 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> </h1>
{/* Smart Digest Section */} {/* 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"> <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"> <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> </h3>
<p className="text-paper-white text-lg leading-relaxed font-reading italic"> <p className="text-paper-white text-lg leading-relaxed font-reading italic">
{article.ai_summary} {aiSummary}
</p> </p>
</div> </div>
) : ( ) : (
@@ -78,17 +82,25 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
<button <button
onClick={async (e) => { onClick={async (e) => {
e.stopPropagation(); e.stopPropagation();
setIsSummarizing(true);
try { try {
await articlesApi.summarize(article.id); const res = await articlesApi.summarize(article.id);
// The WS hub will trigger an update, but we could also show a loading state here setAiSummary(res.summary);
} catch (err) { } catch (err) {
console.error("Failed to summarize:", 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-xl transition-transform ${isSummarizing ? 'animate-spin' : 'group-hover:rotate-12'}`}>
<span className="text-[10px] uppercase tracking-[0.2em] font-black">Générer le Smart Digest</span> {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> </button>
</div> </div>
)} )}