mirror of
https://github.com/R0m1k3/FlowReader.git
synced 2026-10-19 13:18: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>
36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import { usePrefs } from '../stores/prefsStore';
|
|
|
|
function isDarkNow() {
|
|
return document.documentElement.classList.contains('dark');
|
|
}
|
|
|
|
/** Quick light/dark switch. Sepia and "system" live in the reader settings. */
|
|
export function ThemeToggle() {
|
|
const theme = usePrefs((s) => s.theme);
|
|
const setTheme = usePrefs((s) => s.setTheme);
|
|
const isDark = theme === 'dark' || (theme === 'system' && isDarkNow());
|
|
|
|
return (
|
|
<button
|
|
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
|
className="icon-btn"
|
|
role="switch"
|
|
aria-checked={isDark}
|
|
aria-label="Mode sombre"
|
|
title={isDark ? 'Activer le mode clair' : 'Activer le mode sombre'}
|
|
>
|
|
<span key={isDark ? 'd' : 'l'} className="flex animate-fade-in">
|
|
{isDark ? (
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
)}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|