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

feat(ui): premium refinement UX Luxe + Add Feed functionality

Browse Source
This commit is contained in:
Michael committed 2026-02-04 16:36:21 +01:00
1 parent 502b76c5d6
commit 1263a12ca2
7 files changed
+343 -272
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/components/Sidebar.tsx
+63 -58
View File
@@ -1,5 +1,7 @@
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { feedsApi } from '../api/feeds';
import { AddFeedModal } from './AddFeedModal';
interface SidebarProps {
onSelectFeed: (feedId: string | null) => void;
@@ -7,77 +9,80 @@ interface SidebarProps {
}
export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
const { data: feeds } = useQuery({
queryKey: ['feeds'],
queryFn: () => feedsApi.list(),
});
return (
<aside className="w-64 bg-carbon-light border-r border-carbon-dark h-screen flex flex-col transition-all duration-300 shrink-0">
<div className="p-6">
<h1 className="text-gold text-2xl font-serif tracking-tight">FlowReader</h1>
<p className="text-paper-muted text-[10px] mt-1 uppercase tracking-[0.2em] font-sans">Magazine Instantané</p>
</div>
<nav className="flex-1 overflow-y-auto px-4 py-2 space-y-2">
<button
onClick={() => onSelectFeed(null)}
className={`w-full text-left px-4 py-3 rounded-md transition-all duration-200 flex items-center space-x-3 group ${selectedFeedId === null
? 'bg-gold/10 text-gold border-l-4 border-gold'
: 'text-paper-white hover:bg-carbon-dark'
}`}
>
<span className="text-lg group-hover:scale-110 transition-transform">📰</span>
<span className="font-medium">Nouveautés</span>
</button>
<button
onClick={() => onSelectFeed('favorites')}
className={`w-full text-left px-4 py-3 rounded-md transition-all duration-200 flex items-center space-x-3 group ${selectedFeedId === 'favorites'
? 'bg-gold/10 text-gold border-l-4 border-gold'
: 'text-paper-white hover:bg-carbon-dark'
}`}
>
<span className="text-lg group-hover:scale-110 transition-transform">⭐</span>
<span className="font-medium">Favoris</span>
</button>
<div className="pt-8 pb-2 px-4">
<span className="text-paper-muted text-[10px] uppercase tracking-[0.3em] font-bold">Mes Flux</span>
</div>
<div className="space-y-1">
{feeds?.map((feed) => (
<>
<aside className="w-72 bg-carbon-dark/50 backdrop-blur-xl border-r border-white/5 h-screen flex flex-col z-20">
<div className="p-8 pb-4">
<div className="flex items-center justify-between mb-8">
<h1 className="text-gold text-2xl font-serif italic tracking-tight">FlowReader</h1>
<button
key={feed.id}
onClick={() => onSelectFeed(feed.id)}
className={`w-full text-left px-4 py-2 rounded-md transition-all duration-200 truncate group flex justify-between items-center ${selectedFeedId === feed.id
? 'bg-gold/5 text-gold'
: 'text-paper-muted hover:text-paper-white hover:bg-carbon-dark'
onClick={() => setIsAddModalOpen(true)}
className="w-8 h-8 flex items-center justify-center rounded-full border border-gold/20 text-gold hover:bg-gold hover:text-carbon transition-all duration-300 shadow-sm"
title="Ajouter un flux"
>
<span className="text-xl leading-none">+</span>
</button>
</div>
<nav className="space-y-1">
<button
onClick={() => onSelectFeed(null)}
className={`w-full group flex items-center justify-between px-4 py-3 rounded-lg transition-all duration-300 ${selectedFeedId === null
? 'bg-gold/10 text-gold-bright shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]'
: 'text-paper-muted hover:text-white hover:bg-white/5'
}`}
>
<span className="truncate">
<span className="mr-2 opacity-30 group-hover:opacity-100 transition-opacity">#</span>
{feed.title}
</span>
{(feed.unread_count ?? 0) > 0 && (
<span className="bg-gold/20 text-gold text-[10px] px-1.5 py-0.5 rounded-full min-w-[1.2rem] text-center">
{feed.unread_count}
</span>
)}
<span className="text-xs uppercase tracking-[0.2em] font-bold">Tout voir</span>
</button>
))}
</nav>
</div>
</nav>
<div className="p-6 border-t border-carbon-dark bg-carbon-dark/20">
<div className="flex items-center space-x-3 text-paper-muted hover:text-gold cursor-pointer transition-all duration-300 group">
<div className="w-8 h-8 rounded-full bg-carbon border border-carbon-light flex items-center justify-center group-hover:border-gold group-hover: gold-glow transition-all">
<span className="text-sm">⚙️</span>
<div className="flex-1 overflow-y-auto px-4 py-4 space-y-6">
<div>
<h3 className="px-4 text-[10px] uppercase tracking-[0.3em] font-black text-paper-muted/30 mb-4">Bibliothèque</h3>
<div className="space-y-1">
{feeds?.map((feed) => (
<button
key={feed.id}
onClick={() => onSelectFeed(feed.id)}
className={`w-full group flex items-center justify-between px-4 py-2.5 rounded-lg transition-all duration-300 text-left ${selectedFeedId === feed.id
? 'bg-gold/10 text-gold-bright'
: 'text-paper-muted hover:text-white hover:bg-white/5'
}`}
>
<span className="text-sm font-medium truncate flex items-center">
<span className="w-1.5 h-1.5 rounded-full bg-gold/40 mr-3 opacity-0 group-hover:opacity-100 transition-opacity"></span>
{feed.title}
</span>
{(feed.unread_count ?? 0) > 0 && (
<span className="bg-gold/20 text-gold text-[10px] px-1.5 py-0.5 rounded-full min-w-[1.2rem] text-center font-bold">
{feed.unread_count}
</span>
)}
</button>
))}
</div>
</div>
<span className="text-sm font-medium">Paramètres</span>
</div>
</div>
</aside>
<div className="p-6 border-t border-white/5">
<div className="p-4 rounded-xl bg-gold/5 border border-gold/10">
<p className="text-[10px] text-gold/60 uppercase tracking-widest font-bold mb-1">Mode Zen</p>
<p className="text-[9px] text-paper-muted leading-relaxed italic">"Le silence est le bruit des esprits."</p>
</div>
</div>
</aside>
<AddFeedModal
isOpen={isAddModalOpen}
onClose={() => setIsAddModalOpen(false)}
/>
</>
);
}