From 5f149c8e64f478f02c5128fe3b4c27cdec1fe3d6 Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Thu, 12 Feb 2026 12:52:42 +0100
Subject: [PATCH] feat(ui): compact dashboard widget and improve focus exit
 button

---
 web/src/pages/DashboardPage.tsx | 24 ++++++++++++------------
 web/src/pages/FocusPage.tsx     | 13 +++++++++----
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/web/src/pages/DashboardPage.tsx b/web/src/pages/DashboardPage.tsx
index 9695979..126597f 100644
--- a/web/src/pages/DashboardPage.tsx
+++ b/web/src/pages/DashboardPage.tsx
@@ -241,34 +241,34 @@ export function DashboardPage({ selectedFeedId, onEnterFocus }: DashboardPagePro
                     </div>
                 </header>
 
-                {/* Focus Mode CTA Widget */}
+                {/* Focus Mode CTA Widget - Compact Version */}
                 {!selectedFeedId && articles && articles.length > 0 && (
-                    <div className="mb-16 relative overflow-hidden rounded-2xl bg-gradient-to-r from-nature to-nature-light shadow-2xl items-center flex flex-col md:flex-row p-8 md:p-12 hover:scale-[1.01] transition-transform cursor-pointer group" onClick={onEnterFocus}>
+                    <div className="mb-12 relative overflow-hidden rounded-xl bg-gradient-to-r from-nature to-nature-light shadow-xl items-center flex flex-col md:flex-row p-6 hover:scale-[1.01] transition-transform cursor-pointer group" onClick={onEnterFocus}>
                         {/* decorative circles */}
-                        <div className="absolute -top-24 -right-24 w-64 h-64 bg-white/10 rounded-full blur-3xl group-hover:bg-white/20 transition-colors pointer-events-none"></div>
-                        <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-black/10 rounded-full blur-3xl pointer-events-none"></div>
+                        <div className="absolute -top-12 -right-12 w-48 h-48 bg-white/10 rounded-full blur-2xl group-hover:bg-white/20 transition-colors pointer-events-none"></div>
+                        <div className="absolute -bottom-12 -left-12 w-48 h-48 bg-black/10 rounded-full blur-2xl pointer-events-none"></div>
 
-                        <div className="flex-1 z-10 text-center md:text-left mb-6 md:mb-0">
-                            <div className="flex items-center justify-center md:justify-start space-x-2 mb-2">
-                                <span className="bg-white/20 text-white text-[10px] font-bold px-2 py-1 rounded uppercase tracking-widest backdrop-blur-sm">
+                        <div className="flex-1 z-10 text-center md:text-left mb-4 md:mb-0">
+                            <div className="flex items-center justify-center md:justify-start space-x-2 mb-1">
+                                <span className="bg-white/20 text-white text-[9px] font-bold px-1.5 py-0.5 rounded uppercase tracking-widest backdrop-blur-sm">
                                     Nouveauté
                                 </span>
                             </div>
-                            <h2 className="text-3xl md:text-4xl font-serif italic text-white mb-2 text-shadow-sm">
+                            <h2 className="text-2xl font-serif italic text-white mb-1 text-shadow-sm">
                                 Votre session de lecture
                             </h2>
-                            <p className="text-white/80 font-medium text-sm md:text-base max-w-xl">
-                                {articles.filter(a => !a.is_read).length} articles non lus vous attendent. Passez en mode Focus pour une lecture fluide et sans distraction.
+                            <p className="text-white/80 font-medium text-xs max-w-lg">
+                                {articles.filter(a => !a.is_read).length} articles non lus. Passez en mode Focus.
                             </p>
                         </div>
 
                         <div className="z-10">
                             <button
                                 onClick={(e) => { e.stopPropagation(); onEnterFocus(); }}
-                                className="bg-white text-nature font-bold text-sm uppercase tracking-widest px-8 py-4 rounded-full shadow-lg hover:bg-gray-50 hover:shadow-xl hover:scale-105 transition-all flex items-center"
+                                className="bg-white text-nature font-bold text-xs uppercase tracking-widest px-6 py-3 rounded-full shadow-lg hover:bg-gray-50 hover:shadow-xl hover:scale-105 transition-all flex items-center"
                             >
                                 Lancer le Mode Focus
-                                <svg className="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <svg className="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                 </svg>
                             </button>
diff --git a/web/src/pages/FocusPage.tsx b/web/src/pages/FocusPage.tsx
index 0762beb..d257177 100644
--- a/web/src/pages/FocusPage.tsx
+++ b/web/src/pages/FocusPage.tsx
@@ -76,12 +76,17 @@ export function FocusPage({ onExit }: FocusPageProps) {
                 </div>
                 <button
                     onClick={onExit}
-                    className="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all text-paper-white"
+                    className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 transition-all text-paper-white group"
                     title="Quitter le mode Focus"
                 >
-                    <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
+                    <span className="text-[10px] font-bold uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity hidden sm:inline-block">
+                        Retour au Dashboard
+                    </span>
+                    <div className="w-8 h-8 flex items-center justify-center rounded-full bg-white/10 group-hover:bg-white/20">
+                        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </div>
                 </button>
             </header>