mirror of
https://github.com/R0m1k3/FlowReader.git
synced 2026-10-11 17:28:05 +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>
44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
import { forwardRef, useEffect, useState } from 'react';
|
|
|
|
interface SearchBoxProps {
|
|
onSearch: (query: string) => void;
|
|
}
|
|
|
|
/**
|
|
* Owns the raw input value so typing only re-renders this box; the list
|
|
* receives the debounced query.
|
|
*/
|
|
export const SearchBox = forwardRef<HTMLInputElement, SearchBoxProps>(function SearchBox({ onSearch }, ref) {
|
|
const [value, setValue] = useState('');
|
|
|
|
useEffect(() => {
|
|
const t = window.setTimeout(() => onSearch(value.trim()), 350);
|
|
return () => window.clearTimeout(t);
|
|
}, [value, onSearch]);
|
|
|
|
return (
|
|
<div className="relative group">
|
|
<span className="absolute inset-y-0 left-3 flex items-center pointer-events-none text-paper-muted group-focus-within:text-nature transition-colors">
|
|
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</span>
|
|
<input
|
|
ref={ref}
|
|
type="search"
|
|
aria-label="Rechercher dans vos articles"
|
|
placeholder="Rechercher… /"
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Escape') {
|
|
setValue('');
|
|
e.currentTarget.blur();
|
|
}
|
|
}}
|
|
className="input-field !py-2.5 pl-10 pr-4 !rounded-full w-full sm:w-56 sm:focus:w-72 transition-[width] text-sm"
|
|
/>
|
|
</div>
|
|
);
|
|
});
|