mirror of
https://github.com/R0m1k3/FlowReader.git
synced 2026-10-20 05:38:06 +02:00
Antigravity AgentandClaude Opus 5.5
360f3cf012
- New Reader (desktop + mobile): loads full content on open, prefetches the next article, reading progress and time, "Aa" settings (light / sepia / dark / auto theme, serif / sans / Atkinson Hyperlegible font, size, line height, measure), Space-to-next, keyboard shortcuts, focus management, inert background, URL-driven (?a=) so Back closes it. - Dashboard: cursor pagination, unread/all filter, CSS grid (no masonry), no re-sorting under the reader, optimistic cache patches instead of refetch storms, "new articles" banner, error/offline states, j/k/o/m/s/v shortcuts and help dialog. - Cards: keyboard-openable, lazy <img>, memoized, touch-only swipe. - Focus mode: framer drag (drop @use-gesture), Read button, undo restores unread state, arrow keys. - WebSocket: single connection, backoff, cache patching, no console logs. - Contrast fixes (on-nature tokens), 44px targets, lang="fr", reduced motion, self-hosted fonts, theme applied before first paint. - Code splitting + vendor chunk, prompt-based PWA updates, smaller precache, offline cache for opened articles and images, caches cleared on logout; upgrade react-router (CVE), drop unused deps and assets. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import { lazy, Suspense, useState } from 'react';
|
|
import { Sidebar } from '../components/Sidebar';
|
|
import { MobileTopBar } from '../components/MobileTopBar';
|
|
import { DashboardPage } from '../pages/DashboardPage';
|
|
import { useWebsocket } from '../hooks/useWebsocket';
|
|
|
|
// Focus mode carries the gesture/animation code: load it only when used.
|
|
const FocusPage = lazy(() => import('../pages/FocusPage').then((m) => ({ default: m.FocusPage })));
|
|
|
|
export function RootLayout() {
|
|
const [selectedFeedId, setSelectedFeedId] = useState<string | null>(null);
|
|
const [isFocusMode, setIsFocusMode] = useState(false);
|
|
|
|
// One socket for the whole session (not per page mount).
|
|
useWebsocket();
|
|
|
|
return (
|
|
<div className="flex h-dvh bg-carbon overflow-hidden">
|
|
<a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[80] btn-primary">
|
|
Aller au contenu
|
|
</a>
|
|
<Sidebar
|
|
onSelectFeed={setSelectedFeedId}
|
|
selectedFeedId={selectedFeedId}
|
|
onEnterFocus={() => setIsFocusMode(true)}
|
|
isFocusMode={isFocusMode}
|
|
/>
|
|
|
|
<div id="main-content" className="flex-1 flex flex-col min-w-0">
|
|
{!isFocusMode && (
|
|
<MobileTopBar
|
|
onSelectFeed={setSelectedFeedId}
|
|
selectedFeedId={selectedFeedId}
|
|
onEnterFocus={() => setIsFocusMode(true)}
|
|
/>
|
|
)}
|
|
{/* Kept mounted in focus mode so the list keeps its scroll position. */}
|
|
<DashboardPage selectedFeedId={selectedFeedId} onEnterFocus={() => setIsFocusMode(true)} hidden={isFocusMode} />
|
|
</div>
|
|
|
|
{isFocusMode && (
|
|
<Suspense
|
|
fallback={
|
|
<div className="fixed inset-0 z-50 bg-carbon flex items-center justify-center" role="status" aria-label="Chargement">
|
|
<div className="w-12 h-12 border-2 border-nature/20 border-t-nature rounded-full animate-spin" />
|
|
</div>
|
|
}
|
|
>
|
|
<FocusPage onExit={() => setIsFocusMode(false)} />
|
|
</Suspense>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|