Michael/FlowReader
1
0 Fork 0
mirror of https://github.com/R0m1k3/FlowReader.git synced 2026-10-11 17:28:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): compact dashboard widget and improve focus exit button

Browse Source
This commit is contained in:
Michael committed 2026-02-12 12:52:42 +01:00
1 parent a79731b563
commit 5f149c8e64
2 files changed
+21 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/pages/DashboardPage.tsx
+12 -12
View File
@@ -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>
web/src/pages/FocusPage.tsx
+9 -4
View File
@@ -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>