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

feat(web): overhaul frontend Paper Dark, migration Tailwind v4 et composants magazine

Browse Source
This commit is contained in:
Michael committed 2026-02-04 16:22:59 +01:00
1 parent 8777d3b970
commit 8ed1782de6
16 files changed
+1998 -238
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/components/Sidebar.tsx
+53 -36
View File
@@ -1,6 +1,5 @@
import { useQuery } from '@tanstack/react-query';
import { feedsApi } from '../api/feeds';
import type { Feed } from '../api/feeds';
interface SidebarProps {
onSelectFeed: (feedId: string | null) => void;
@@ -8,58 +7,76 @@ interface SidebarProps {
}
export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
const { data: feeds, isLoading } = useQuery({
const { data: feeds } = useQuery({
queryKey: ['feeds'],
queryFn: feedsApi.list,
queryFn: () => feedsApi.list(),
});
return (
<aside className="sidebar">
<nav className="sidebar-nav">
<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
className={`nav-item ${selectedFeedId === null ? 'active' : ''}`}
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="icon">📥</span>
<span className="label">Tous les flux</span>
<span className="text-lg group-hover:scale-110 transition-transform">📰</span>
<span className="font-medium">Nouveautés</span>
</button>
<button
className={`nav-item ${selectedFeedId === 'favorites' ? 'active' : ''}`}
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="icon">★</span>
<span className="label">Favoris</span>
<span className="text-lg group-hover:scale-110 transition-transform">⭐</span>
<span className="font-medium">Favoris</span>
</button>
<div className="sidebar-section">
<h3>Flux</h3>
{isLoading ? (
<div className="sidebar-loading">Chargement...</div>
) : (
<div className="feed-list">
{feeds?.map((feed: Feed) => (
<button
key={feed.id}
className={`nav-item ${selectedFeedId === feed.id ? 'active' : ''}`}
onClick={() => onSelectFeed(feed.id)}
>
<span className="icon">📄</span>
<span className="label">{feed.title}</span>
{feed.unread_count ? (
<span className="badge">{feed.unread_count}</span>
) : null}
</button>
))}
</div>
)}
<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) => (
<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'
}`}
>
<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>
)}
</button>
))}
</div>
</nav>
<div className="sidebar-footer">
<button className="add-feed-btn" onClick={() => {/* TODO: Add feed modal */ }}>
+ Ajouter un flux
</button>
<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>
<span className="text-sm font-medium">Paramètres</span>
</div>
</div>
</aside>
);