From 3e468d8885f514bd661ba86103654a8330bdefbc Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Fri, 6 Feb 2026 15:28:24 +0100
Subject: [PATCH] style(web): improve ArticleCard UX and add Back to Top button

---
 web/src/components/ArticleCard.tsx |  4 ++--
 web/src/pages/DashboardPage.tsx    | 33 +++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/web/src/components/ArticleCard.tsx b/web/src/components/ArticleCard.tsx
index 32ff22e..1553754 100644
--- a/web/src/components/ArticleCard.tsx
+++ b/web/src/components/ArticleCard.tsx
@@ -49,10 +49,10 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
 
                 {/* Meta on top of image */}
                 <div className="absolute bottom-4 left-4 right-4 z-20 flex justify-between items-end">
-                    <span className="bg-nature/10 px-2 py-1 rounded text-[10px] text-nature font-black uppercase tracking-[.25em] drop-shadow-sm">
+                    <span className="bg-white px-2 py-1 rounded shadow-sm border border-nature/5 text-[10px] text-nature font-black uppercase tracking-[.25em] drop-shadow-sm">
                         {article.feed_title || 'Journal'}
                     </span>
-                    <span className="text-[10px] text-nature/80 font-bold uppercase tracking-widest">
+                    <span className="bg-white px-2 py-1 rounded shadow-sm border border-nature/5 text-[10px] text-nature/80 font-black uppercase tracking-widest px-2 py-1 rounded shadow-sm border border-nature/5 drop-shadow-sm">
                         {timeToRead} min
                     </span>
                 </div>
diff --git a/web/src/pages/DashboardPage.tsx b/web/src/pages/DashboardPage.tsx
index 9c0fca8..39e5aa3 100644
--- a/web/src/pages/DashboardPage.tsx
+++ b/web/src/pages/DashboardPage.tsx
@@ -125,6 +125,26 @@ export function DashboardPage({ selectedFeedId }: DashboardPageProps) {
         onSuccess: () => queryClient.invalidateQueries({ queryKey: ['articles'] }),
     });
 
+    const [showScrollTop, setShowScrollTop] = useState(false);
+    const mainRef = useRef<HTMLElement>(null);
+
+    // Visibility logic for "Back to Top" button
+    useEffect(() => {
+        const handleScroll = (e: Event) => {
+            const target = e.target as HTMLElement;
+            setShowScrollTop(target.scrollTop > 1000);
+        };
+        const mainElement = mainRef.current;
+        if (mainElement) {
+            mainElement.addEventListener('scroll', handleScroll);
+        }
+        return () => mainElement?.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const scrollToTop = () => {
+        mainRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
     if (isLoading) {
         return (
             <div className="flex-1 flex flex-col items-center justify-center bg-carbon space-y-4">
@@ -135,7 +155,18 @@ export function DashboardPage({ selectedFeedId }: DashboardPageProps) {
     }
 
     return (
-        <main className="flex-1 overflow-y-auto bg-carbon scroll-smooth">
+        <main ref={mainRef} className="flex-1 overflow-y-auto bg-carbon scroll-smooth relative">
+            {/* Back to Top Button */}
+            <button
+                onClick={scrollToTop}
+                className={`fixed bottom-8 right-12 z-40 p-4 rounded-full bg-white border border-nature/10 text-nature shadow-2xl transition-all duration-500 hover:scale-110 active:scale-95 ${showScrollTop ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0 pointer-events-none'}`}
+                title="Retour en haut"
+            >
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                </svg>
+            </button>
+
             <div className="max-w-[1400px] mx-auto px-12 py-16">
                 {/* Header */}
                 <header className="mb-20 space-y-4 border-b border-white/5 pb-10">