refonte complète du WebUI (Éditorial Botanique)

Refonte de toutes les vues en conservant l'identité magazine/vert nature,
avec un système de design cohérent et accessible.

- index.css : tokens sémantiques, échelle radius/ombres, classes réutilisables
  (btn-*, chip, surface-card, magazine-content), :focus-visible,
  prefers-reduced-motion, grain papier affiné
- nouveaux composants AuthShell (auth split-screen) et MobileTopBar
  (navigation mobile, auparavant absente)
- framer-motion sur toutes les vues ; AddFeedModal expose l'import OPML ;
  Sidebar ajoute déconnexion + identité utilisateur
- corrections : text-gold cassé -> nature, arithmétique Date -> getTime(),
  suppression de App.css mort, ProtectedRoute en Tailwind,
  snapshot du deck Focus conforme aux règles React

Frontend : npm run lint + build OK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/pages/FocusPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { articlesApi } from '../api/articles';
+import { articlesApi, type Article } from '../api/articles';
 import { FocusCardStack } from '../components/focus/FocusCardStack';
 import { FocusEmptyState } from '../components/focus/FocusEmptyState';
 
@@ -12,102 +12,68 @@ export function FocusPage({ onExit }: FocusPageProps) {
     const queryClient = useQueryClient();
     const [isComplete, setIsComplete] = useState(false);
 
-    // Fetch ONLY unread articles
     const { data: articles, isLoading } = useQuery({
         queryKey: ['articles', 'focus-mode'],
-        queryFn: () => articlesApi.list({ unread: true, limit: 100 }), // Cap at 100 for performance
-        staleTime: 0, // Always fresh for focus mode
+        queryFn: () => articlesApi.list({ unread: true, limit: 100 }),
+        staleTime: 0,
     });
 
-    // Stable deck state to prevent UI jumping when articles are marked read
-    const [deck, setDeck] = useState<typeof articles>([]);
-
-    // Initialize/Append deck when data arrives
-    if (articles && (!deck || deck.length === 0)) {
+    // Snapshot the unread set once into a stable deck for the whole session,
+    // so marking articles read mid-session never reshuffles the stack. This is
+    // the React-endorsed "adjust state during render" pattern (guarded to run
+    // exactly once), not an effect.
+    const [deck, setDeck] = useState<Article[]>([]);
+    const [seeded, setSeeded] = useState(false);
+    if (!seeded && articles && articles.length > 0) {
         setDeck(articles);
+        setSeeded(true);
     }
-    // Note: A more robust implementation would append new unique items if we implemented pagination/infinite scroll,
-    // but for now, snapshotting the initial load is sufficient for the "Focus Session" concept.
 
-    // Mutation to mark read
-    const markReadMutation = useMutation({
-        mutationFn: (id: string) => articlesApi.markRead(id),
-        onSuccess: () => {
-            // Invalidate main lists to sync up sidebar, but our local 'deck' state won't change
-            queryClient.invalidateQueries({ queryKey: ['articles'] });
-            queryClient.invalidateQueries({ queryKey: ['feeds'] });
-        },
-    });
-
-    // Mutation to toggle favorite
-    const toggleFavoriteMutation = useMutation({
-        mutationFn: (id: string) => articlesApi.toggleFavorite(id),
-        onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: ['articles'] });
-            queryClient.invalidateQueries({ queryKey: ['feeds'] });
-        },
-    });
-
-    const handleMarkRead = (id: string) => {
-        markReadMutation.mutate(id);
+    const invalidate = () => {
+        queryClient.invalidateQueries({ queryKey: ['articles'] });
+        queryClient.invalidateQueries({ queryKey: ['feeds'] });
     };
 
-    const handleToggleFavorite = (id: string) => {
-        toggleFavoriteMutation.mutate(id);
-    };
+    const markReadMutation = useMutation({ mutationFn: (id: string) => articlesApi.markRead(id), onSuccess: invalidate });
+    const toggleFavoriteMutation = useMutation({ mutationFn: (id: string) => articlesApi.toggleFavorite(id), onSuccess: invalidate });
 
-    const handleKeep = (id: string) => {
-        // Do nothing api-wise, just skip. 
-        console.log('Skipped:', id);
-    };
-
-    if (isLoading && (!deck || deck.length === 0)) {
+    if (isLoading && deck.length === 0) {
         return (
-            <div className="flex items-center justify-center h-full bg-carbon/50 backdrop-blur-xl">
-                <div className="w-16 h-16 border-4 border-nature border-t-transparent rounded-full animate-spin" />
+            <div className="flex items-center justify-center h-full bg-carbon/60 backdrop-blur-xl">
+                <div className="w-14 h-14 border-2 border-nature/20 border-t-nature rounded-full animate-spin" />
             </div>
         );
     }
 
-    // Filter out locally read? No, we handle that in stack index.
-    // If deck is empty
-    if (!deck || deck.length === 0) {
-        return <FocusEmptyState onBack={onExit} />;
-    }
-
-    if (isComplete) {
-        return <FocusEmptyState onBack={onExit} />;
+    if (deck.length === 0 || isComplete) {
+        return (
+            <div className="fixed inset-0 z-50 bg-carbon/95 backdrop-blur-2xl flex items-center justify-center">
+                <FocusEmptyState onBack={onExit} />
+            </div>
+        );
     }
 
     return (
-        <div className="fixed inset-0 z-50 bg-carbon/95 backdrop-blur-3xl flex flex-col">
-            {/* Header */}
+        <div className="fixed inset-0 z-50 bg-carbon/95 backdrop-blur-2xl flex flex-col">
             <header className="absolute top-0 left-0 right-0 p-6 flex justify-between items-center z-50">
-                <div className="flex items-center space-x-2">
-                    <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
-                    <span className="text-xs font-bold uppercase tracking-widest text-paper-white">Mode Focus</span>
+                <div className="flex items-center gap-2">
+                    <span className="w-2 h-2 rounded-full bg-earth animate-pulse" />
+                    <span className="eyebrow text-paper-white">Mode Focus</span>
                 </div>
-                <button
-                    onClick={onExit}
-                    className="flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-nature/10 text-nature-dark shadow-lg hover:bg-nature hover:text-white hover:border-nature hover:scale-105 transition-all duration-300 group"
-                    title="Quitter le mode Focus"
-                >
-                    <span className="text-[10px] font-bold uppercase tracking-widest hidden sm:inline-block">
-                        Retour au Dashboard
-                    </span>
-                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button onClick={onExit} className="btn-secondary" title="Quitter le mode Focus">
+                    <span className="hidden sm:inline">Tableau de bord</span>
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                     </svg>
                 </button>
             </header>
 
-            {/* Main Deck Area */}
             <main className="flex-1 flex items-center justify-center p-4">
                 <FocusCardStack
                     articles={deck}
-                    onMarkRead={handleMarkRead}
-                    onKeep={handleKeep}
-                    onToggleFavorite={handleToggleFavorite}
+                    onMarkRead={(id) => markReadMutation.mutate(id)}
+                    onKeep={() => { /* skip — no API action */ }}
+                    onToggleFavorite={(id) => toggleFavoriteMutation.mutate(id)}
                     onEmpty={() => setIsComplete(true)}
                 />
             </main>