{eyebrow}
- {title}
+ {title}
{subtitle}
{children}
diff --git a/web/src/components/FeedAvatar.tsx b/web/src/components/FeedAvatar.tsx
new file mode 100644
index 0000000..68d8a5e
--- /dev/null
+++ b/web/src/components/FeedAvatar.tsx
@@ -0,0 +1,36 @@
+// Every swatch keeps white initials above 4.5:1.
+const SWATCHES = ['#A4532E', '#5B4BA6', '#2E5E9E', '#2F6F4E', '#2B7A78', '#8A5A0E', '#4B5563', '#9C3D54'];
+
+function swatchFor(key: string) {
+ let h = 0;
+ for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) | 0;
+ return SWATCHES[Math.abs(h) % SWATCHES.length];
+}
+
+interface FeedAvatarProps {
+ /** Stable key for the color (the feed id). */
+ id: string;
+ title?: string;
+ size?: number;
+ className?: string;
+}
+
+/** Colored initial standing in for a feed's icon (no third-party favicon request). */
+export function FeedAvatar({ id, title, size = 20, className = '' }: FeedAvatarProps) {
+ const initial = (title || '?').trim().charAt(0).toUpperCase();
+ return (
+
+ {initial}
+
+ );
+}
diff --git a/web/src/components/Icon.tsx b/web/src/components/Icon.tsx
new file mode 100644
index 0000000..e6b4f62
--- /dev/null
+++ b/web/src/components/Icon.tsx
@@ -0,0 +1,80 @@
+/**
+ * Stroke icons shared by the whole app (24×24 grid, currentColor).
+ * Decorative by default; pass `label` when the icon is the only content.
+ */
+const PATHS = {
+ search: <>
,
+ inbox: <>
,
+ star:
,
+ bolt:
,
+ plus:
,
+ check:
,
+ checkAll: <>
,
+ refresh: <>
,
+ share: <>
,
+ external: <>
,
+ chevronLeft:
,
+ chevronRight:
,
+ chevronUp:
,
+ chevronDown:
,
+ arrowRight:
,
+ arrowUp:
,
+ close:
,
+ sparkle: <>
,
+ clock: <>
,
+ undo: <>
,
+ book: <>
,
+ list: <>
,
+ grid: <>
,
+ sliders: <>
,
+ rss: <>
,
+ moon:
,
+ sun: <>
,
+ alert: <>
,
+ menu:
,
+ eye: <>
,
+ eyeOff: <>
,
+ lock: <>
,
+} as const;
+
+export type IconName = keyof typeof PATHS | 'more';
+
+interface IconProps {
+ name: IconName;
+ size?: number;
+ strokeWidth?: number;
+ /** Filled shape (e.g. an active star). */
+ filled?: boolean;
+ className?: string;
+ /** Accessible name when the icon carries meaning on its own. */
+ label?: string;
+}
+
+export function Icon({ name, size = 20, strokeWidth = 1.8, filled = false, className, label }: IconProps) {
+ const a11y = label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true as const };
+ if (name === 'more') {
+ return (
+
+ );
+ }
+ return (
+
+ );
+}
diff --git a/web/src/components/MobileTabBar.tsx b/web/src/components/MobileTabBar.tsx
new file mode 100644
index 0000000..18a0a0d
--- /dev/null
+++ b/web/src/components/MobileTabBar.tsx
@@ -0,0 +1,54 @@
+import { useUI } from '../stores/uiStore';
+import { useTotalUnread } from '../hooks/useFeeds';
+import { Icon, type IconName } from './Icon';
+
+/** Bottom tab bar (phones): everything within thumb reach. */
+export function MobileTabBar() {
+ const scope = useUI((s) => s.scope);
+ const tab = useUI((s) => s.tab);
+ const setScope = useUI((s) => s.setScope);
+ const setTab = useUI((s) => s.setTab);
+ const setFocusOpen = useUI((s) => s.setFocusOpen);
+ const unread = useTotalUnread();
+
+ const tabs: { id: string; label: string; icon: IconName; current: boolean; onClick: () => void; badge?: string }[] = [
+ {
+ id: 'list',
+ label: 'À lire',
+ icon: 'inbox',
+ current: tab === 'list' && scope !== 'favorites',
+ onClick: () => setScope(scope === 'favorites' ? null : scope),
+ badge: unread > 0 ? (unread > 99 ? '99+' : String(unread)) : undefined,
+ },
+ { id: 'focus', label: 'Focus', icon: 'bolt', current: false, onClick: () => setFocusOpen(true) },
+ { id: 'fav', label: 'Favoris', icon: 'star', current: tab === 'list' && scope === 'favorites', onClick: () => setScope('favorites') },
+ { id: 'feeds', label: 'Flux', icon: 'rss', current: tab === 'feeds', onClick: () => setTab('feeds') },
+ ];
+
+ return (
+
+ );
+}
diff --git a/web/src/components/SearchPanel.tsx b/web/src/components/SearchPanel.tsx
new file mode 100644
index 0000000..3965221
--- /dev/null
+++ b/web/src/components/SearchPanel.tsx
@@ -0,0 +1,258 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useSearchParams } from 'react-router-dom';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { articlesApi, type Article } from '../api/articles';
+import { useUI } from '../stores/uiStore';
+import { formatRelative } from '../lib/format';
+import { FeedAvatar } from './FeedAvatar';
+import { Icon } from './Icon';
+import { summaryText } from '../lib/summary';
+
+const RECENT_KEY = 'flowreader-recent-searches';
+
+function loadRecent(): string[] {
+ try {
+ const v = JSON.parse(localStorage.getItem(RECENT_KEY) || '[]');
+ return Array.isArray(v) ? v.filter((x) => typeof x === 'string').slice(0, 5) : [];
+ } catch {
+ return [];
+ }
+}
+
+function saveRecent(q: string) {
+ try {
+ const next = [q, ...loadRecent().filter((x) => x.toLowerCase() !== q.toLowerCase())].slice(0, 5);
+ localStorage.setItem(RECENT_KEY, JSON.stringify(next));
+ } catch {
+ /* storage unavailable (private mode) */
+ }
+}
+
+/** Wraps the first occurrence of `q` in
. */
+function Highlight({ text, q }: { text: string; q: string }) {
+ const i = q ? text.toLowerCase().indexOf(q.toLowerCase()) : -1;
+ if (i < 0) return <>{text};
+ return (
+ <>
+ {text.slice(0, i)}
+ {text.slice(i, i + q.length)}
+ {text.slice(i + q.length)}
+
+ );
+}
+
+/** A short excerpt centred on the match, so the hit is visible. */
+function around(text: string, q: string) {
+ const i = text.toLowerCase().indexOf(q.toLowerCase());
+ if (i < 0) return text.slice(0, 140);
+ const start = Math.max(0, i - 50);
+ const end = Math.min(text.length, i + q.length + 90);
+ return (start > 0 ? '…' : '') + text.slice(start, end) + (end < text.length ? '…' : '');
+}
+
+/**
+ * Full-text search over the user's articles. A centred palette on desktop
+ * (⌘K, /), a full screen on phones.
+ */
+export function SearchPanel() {
+ const setSearchOpen = useUI((s) => s.setSearchOpen);
+ const setTab = useUI((s) => s.setTab);
+ const [, setParams] = useSearchParams();
+ const [input, setInput] = useState('');
+ const [q, setQ] = useState('');
+ const [recent, setRecent] = useState(loadRecent);
+ const [active, setActive] = useState(0);
+ const inputRef = useRef(null);
+ const listRef = useRef(null);
+ const close = () => setSearchOpen(false);
+
+ // Debounce typing: one request per pause, not per keystroke.
+ useEffect(() => {
+ const t = window.setTimeout(() => {
+ setQ(input.trim());
+ setActive(0);
+ }, 250);
+ return () => window.clearTimeout(t);
+ }, [input]);
+
+ // Keyed under 'articles' so read / favorite updates are patched in.
+ const { data: results, isFetching, isError } = useQuery({
+ queryKey: ['articles', 'search', q],
+ queryFn: () => articlesApi.search(q, 30),
+ enabled: q.length >= 2,
+ placeholderData: keepPreviousData,
+ staleTime: 30 * 1000,
+ });
+ const hits = q.length >= 2 ? (results ?? []) : [];
+
+ // Layout effect: its cleanup must run before a reader opened from a result
+ // makes #root inert in turn.
+ useLayoutEffect(() => {
+ const previous = document.activeElement as HTMLElement | null;
+ inputRef.current?.focus();
+ const root = document.getElementById('root');
+ root?.setAttribute('inert', '');
+ return () => {
+ root?.removeAttribute('inert');
+ previous?.focus?.();
+ };
+ }, []);
+
+ const open = (a: Article) => {
+ if (q) {
+ saveRecent(q);
+ setRecent(loadRecent());
+ }
+ setTab('list');
+ setParams(
+ (p) => {
+ const n = new URLSearchParams(p);
+ n.set('a', a.id);
+ return n;
+ },
+ { state: { reader: true } },
+ );
+ close();
+ };
+
+ const onKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ close();
+ } else if (e.key === 'ArrowDown' && hits.length) {
+ e.preventDefault();
+ setActive((i) => Math.min(hits.length - 1, i + 1));
+ } else if (e.key === 'ArrowUp' && hits.length) {
+ e.preventDefault();
+ setActive((i) => Math.max(0, i - 1));
+ } else if (e.key === 'Enter' && hits[active]) {
+ e.preventDefault();
+ open(hits[active]);
+ }
+ };
+
+ useEffect(() => {
+ listRef.current?.querySelector(`[data-i="${active}"]`)?.scrollIntoView({ block: 'nearest' });
+ }, [active]);
+
+ // Portalled out of #root, which is made inert while the panel is open.
+ return createPortal(
+ {
+ if (e.target === e.currentTarget) close();
+ }}
+ >
+
+
+
+
+
+ setInput(e.target.value)}
+ placeholder="Rechercher dans vos articles"
+ aria-controls="search-results"
+ aria-activedescendant={hits[active] ? `search-hit-${active}` : undefined}
+ className="w-full min-h-11 pl-10 pr-3 rounded-xl border-2 border-nature bg-carbon-light text-paper-white placeholder:text-paper-muted outline-none [&::-webkit-search-cancel-button]:cursor-pointer"
+ />
+
+
+
Échap
+
+
+
+ {q.length < 2 ? (
+ recent.length > 0 ? (
+
+
Recherches récentes
+
+ {recent.map((r) => (
+ -
+
+
+ ))}
+
+
+ ) : (
+
Cherchez un mot dans les titres et le texte de vos articles.
+ )
+ ) : isError ? (
+
+ {navigator.onLine ? 'La recherche a échoué. Réessayez.' : 'La recherche demande une connexion.'}
+
+ ) : hits.length === 0 ? (
+
+ {isFetching ? (
+
+ ) : (
+ <>
+
Aucun article trouvé
+
Essayez un autre mot.
+
+ )}
+
+ ) : (
+ <>
+
+ {hits.length}
+ {hits.length >= 30 ? '+' : ''} résultat{hits.length > 1 ? 's' : ''}
+
+
+ {hits.map((a, i) => {
+ const date = a.published_at || a.created_at;
+ return (
+ - open(a)}
+ onMouseMove={() => setActive(i)}
+ className={`flex flex-col gap-1 px-5 py-3 border-b border-line cursor-pointer ${i === active ? 'bg-select' : ''}`}
+ >
+
+
+ {a.feed_title}
+ ·
+
+
+
+
+
+ {(a.excerpt || a.ai_summary) && (
+
+
+
+ )}
+
+ );
+ })}
+
+
+ )}
+
+
+
{items.map((it) => (
))}
-
+
diff --git a/web/src/components/ShortcutsHelp.tsx b/web/src/components/ShortcutsHelp.tsx
index 3cda949..81b3f08 100644
--- a/web/src/components/ShortcutsHelp.tsx
+++ b/web/src/components/ShortcutsHelp.tsx
@@ -11,6 +11,7 @@ const GROUPS: { title: string; keys: [string, string][] }[] = [
['v', 'Ouvrir l’original'],
['u', 'Basculer Non lus / Tous'],
['r', 'Actualiser les flux'],
+ ['/ · ⌘K', 'Rechercher'],
],
},
{
@@ -50,7 +51,7 @@ export function ShortcutsHelp({ onClose }: { onClose: () => void }) {
className="surface-card w-full max-w-lg p-7 outline-none animate-rise"
onClick={(e) => e.stopPropagation()}
>
-
Raccourcis clavier
+
Raccourcis clavier
{GROUPS.map((g) => (
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
new file mode 100644
index 0000000..156b2de
--- /dev/null
+++ b/web/src/components/Sidebar.tsx
@@ -0,0 +1,164 @@
+import { useRef, useState } from 'react';
+import { useAuthStore } from '../stores/authStore';
+import { usePrefs } from '../stores/prefsStore';
+import { useUI } from '../stores/uiStore';
+import { useFeeds, useTotalUnread } from '../hooks/useFeeds';
+import { useLogout } from '../hooks/useLogout';
+import { onMenuKeyDown, useDismiss } from '../hooks/useDismiss';
+import { Icon } from './Icon';
+import { FeedAvatar } from './FeedAvatar';
+
+function isDarkNow(theme: string) {
+ return theme === 'dark' || (theme === 'system' && document.documentElement.classList.contains('dark'));
+}
+
+/**
+ * Feed navigation: always visible on desktop, a drawer on tablets.
+ * Mobile uses the "Flux" tab instead (FeedsPage).
+ */
+export function Sidebar() {
+ const { data: feeds } = useFeeds();
+ const totalUnread = useTotalUnread();
+ const scope = useUI((s) => s.scope);
+ const setScope = useUI((s) => s.setScope);
+ const setFocusOpen = useUI((s) => s.setFocusOpen);
+ const setSearchOpen = useUI((s) => s.setSearchOpen);
+ const openDialog = useUI((s) => s.openDialog);
+ const user = useAuthStore((s) => s.user);
+ const theme = usePrefs((s) => s.theme);
+ const setTheme = usePrefs((s) => s.setTheme);
+ const logout = useLogout();
+
+ const [menuOpen, setMenuOpen] = useState(false);
+ const menuBtn = useRef(null);
+ const menuPanel = useRef(null);
+ const closeMenu = () => {
+ setMenuOpen(false);
+ menuBtn.current?.focus();
+ };
+ useDismiss(menuOpen, closeMenu, [menuBtn, menuPanel]);
+
+ const dark = isDarkNow(theme);
+ const menuItem = 'w-full text-left flex items-center px-3 min-h-11 rounded-lg text-sm text-paper-white hover:bg-carbon-dark focus-visible:bg-carbon-dark outline-none';
+
+ return (
+
+ );
+}
diff --git a/web/src/components/ThemeToggle.tsx b/web/src/components/ThemeToggle.tsx
deleted file mode 100644
index 6bc6631..0000000
--- a/web/src/components/ThemeToggle.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-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 (
-
- );
-}
diff --git a/web/src/components/TopBar.tsx b/web/src/components/TopBar.tsx
deleted file mode 100644
index f328674..0000000
--- a/web/src/components/TopBar.tsx
+++ /dev/null
@@ -1,357 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { feedsApi } from '../api/feeds';
-import { authApi } from '../api/auth';
-import { useAuthStore, clearUserData } from '../stores/authStore';
-import { usePrefs } from '../stores/prefsStore';
-import { useIsMobile } from '../hooks/useIsMobile';
-import { AddFeedModal } from './AddFeedModal';
-import { ManageFeedsModal } from './ManageFeedsModal';
-import { ShortcutsHelp } from './ShortcutsHelp';
-
-interface TopBarProps {
- onSelectFeed: (feedId: string | null) => void;
- selectedFeedId: string | null;
- onEnterFocus: () => void;
-}
-
-interface ScopeItem {
- id: string | null;
- label: string;
- unread: number;
- error?: boolean;
-}
-
-/** Closes a popover on outside pointer down or Escape, returning focus to its trigger. */
-function useDismiss(open: boolean, close: () => void, refs: React.RefObject[]) {
- useEffect(() => {
- if (!open) return;
- const onDown = (e: PointerEvent) => {
- if (!refs.some((r) => r.current?.contains(e.target as Node))) close();
- };
- const onKey = (e: KeyboardEvent) => {
- if (e.key === 'Escape') {
- e.stopPropagation();
- close();
- }
- };
- document.addEventListener('pointerdown', onDown);
- window.addEventListener('keydown', onKey);
- return () => {
- document.removeEventListener('pointerdown', onDown);
- window.removeEventListener('keydown', onKey);
- };
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [open, close]);
-}
-
-/** Arrow-key navigation between the menu's items. */
-function onMenuKeyDown(e: React.KeyboardEvent) {
- if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return;
- const items = Array.from(e.currentTarget.querySelectorAll('[role="menuitemradio"],[role="menuitem"]'));
- if (items.length === 0) return;
- const i = items.indexOf(document.activeElement as HTMLElement);
- const next =
- e.key === 'Home' ? 0 : e.key === 'End' ? items.length - 1 : e.key === 'ArrowDown' ? (i + 1) % items.length : (i - 1 + items.length) % items.length;
- items[next].focus();
- e.preventDefault();
-}
-
-const Check = () => (
-
-);
-
-/**
- * Navigation bar. The page title is the feed selector: one place says what
- * you are looking at and lets you change it.
- */
-export function TopBar({ onSelectFeed, selectedFeedId, onEnterFocus }: TopBarProps) {
- const qc = useQueryClient();
- const isMobile = useIsMobile();
- const [scopeOpen, setScopeOpen] = useState(false);
- const [menuOpen, setMenuOpen] = useState(false);
- const [addOpen, setAddOpen] = useState(false);
- const [manageOpen, setManageOpen] = useState(false);
- const [helpOpen, setHelpOpen] = useState(false);
-
- const scopeBtn = useRef(null);
- const scopePanel = useRef(null);
- const menuBtn = useRef(null);
- const menuPanel = useRef(null);
-
- const user = useAuthStore((s) => s.user);
- const logoutStore = useAuthStore((s) => s.logout);
- const theme = usePrefs((s) => s.theme);
- const setTheme = usePrefs((s) => s.setTheme);
- const { data: feeds } = useQuery({ queryKey: ['feeds'], queryFn: () => feedsApi.list() });
-
- const logout = useMutation({
- mutationFn: () => authApi.logout(),
- onSettled: async () => {
- logoutStore();
- qc.clear();
- await clearUserData();
- window.location.href = '/login';
- },
- });
-
- const closeScope = () => {
- setScopeOpen(false);
- scopeBtn.current?.focus();
- };
- const closeMenu = () => {
- setMenuOpen(false);
- menuBtn.current?.focus();
- };
- useDismiss(scopeOpen, closeScope, [scopeBtn, scopePanel]);
- useDismiss(menuOpen, closeMenu, [menuBtn, menuPanel]);
-
- // Focus the selected entry when the feed menu opens.
- useEffect(() => {
- if (!scopeOpen) return;
- const el = scopePanel.current?.querySelector('[aria-checked="true"]') ?? scopePanel.current?.querySelector('[role="menuitemradio"]');
- el?.focus();
- }, [scopeOpen]);
- useEffect(() => {
- if (menuOpen) menuPanel.current?.querySelector('[role="menuitem"]')?.focus();
- }, [menuOpen]);
-
- const totalUnread = (feeds ?? []).reduce((n, f) => n + (f.unread_count ?? 0), 0);
- const main: ScopeItem[] = [
- { id: null, label: 'Tous les articles', unread: totalUnread },
- { id: 'favorites', label: 'Favoris', unread: 0 },
- ];
- const feedItems: ScopeItem[] = (feeds ?? []).map((f) => ({
- id: f.id,
- label: f.title,
- unread: f.unread_count ?? 0,
- error: !!f.fetch_error,
- }));
- const current = [...main, ...feedItems].find((i) => i.id === selectedFeedId) ?? main[0];
- const isDark = theme === 'dark' || (theme === 'system' && document.documentElement.classList.contains('dark'));
-
- const choose = (id: string | null) => {
- onSelectFeed(id);
- setScopeOpen(false);
- scopeBtn.current?.focus();
- };
-
- const renderItem = (item: ScopeItem) => {
- const active = item.id === selectedFeedId;
- return (
-
- );
- };
-
- const scopeList = (
-
- {isMobile &&
}
- {main.map(renderItem)}
- {feedItems.length > 0 && (
- <>
-
-
Flux
- {feedItems.map(renderItem)}
-
- )}
-
-
-
-
+
{article.image_url ? (
(e.currentTarget.style.display = 'none')}
/>
) : (
-
-
{article.feed_title}
+
+ {article.feed_title}
)}
@@ -43,19 +44,19 @@ export function FocusCard({ article, isTop = false }: FocusCardProps) {
-
+
{article.title}
{(article.ai_summary || article.excerpt) && (
-
- {article.ai_summary || article.excerpt}
+
+ {article.ai_summary ? summaryText(article.ai_summary) : article.excerpt}
)}
{isTop && (
-
- ← Garder · Lu → · Entrée pour lire
+
+ ← Plus tard · Lu → · Entrée pour lire
)}
diff --git a/web/src/components/focus/FocusCardStack.tsx b/web/src/components/focus/FocusCardStack.tsx
index 03d154c..939aa5c 100644
--- a/web/src/components/focus/FocusCardStack.tsx
+++ b/web/src/components/focus/FocusCardStack.tsx
@@ -4,6 +4,7 @@ import type { Article } from '../../api/articles';
import { useArticleActions } from '../../hooks/useArticleActions';
import { FocusCard } from './FocusCard';
import { Reader } from '../reader/Reader';
+import { Icon } from '../Icon';
interface FocusCardStackProps {
articles: Article[];
@@ -59,7 +60,7 @@ function SwipeableCard({ article, index, isTop, onAction }: SwipeableCardProps)
- Garder
+ Plus tard
@@ -141,15 +142,24 @@ export function FocusCardStack({ articles, onEmpty, onExit }: FocusCardStackProp
if (!top) return null;
return (
-
+
{announce}
-
- {articles.length - currentIndex} restant{articles.length - currentIndex > 1 ? 's' : ''}
-
+ {/* Progress through the deck */}
+
+
+ {currentIndex + 1} sur {articles.length}
+
+
+
{/* Stack */}
-
+
{visible.map((article, i) => (
@@ -157,44 +167,48 @@ export function FocusCardStack({ articles, onEmpty, onExit }: FocusCardStackProp
- {/* Controls (every gesture has a button equivalent) */}
-
+ {/* Controls (every gesture has a labelled button equivalent) */}
+
-
-
-
@@ -204,6 +218,7 @@ export function FocusCardStack({ articles, onEmpty, onExit }: FocusCardStackProp
article={top}
next={articles[currentIndex + 1]}
hasPrev={false}
+ backLabel="Mode Focus"
onClose={() => setReading(false)}
onNext={() => {
act('read');
diff --git a/web/src/components/focus/FocusEmptyState.tsx b/web/src/components/focus/FocusEmptyState.tsx
index a0f38bf..6e6f1cb 100644
--- a/web/src/components/focus/FocusEmptyState.tsx
+++ b/web/src/components/focus/FocusEmptyState.tsx
@@ -1,25 +1,20 @@
+import { Icon } from '../Icon';
+
interface FocusEmptyStateProps {
onBack: () => void;
}
export function FocusEmptyState({ onBack }: FocusEmptyStateProps) {
return (
-
-
-
-
-
C'est tout pour le moment !
+
+
+
+
+
+
Tout est trié
Vous êtes à jour sur vos lectures.
-
-
+
);
}
diff --git a/web/src/components/reader/AiSummary.tsx b/web/src/components/reader/AiSummary.tsx
new file mode 100644
index 0000000..1a0016c
--- /dev/null
+++ b/web/src/components/reader/AiSummary.tsx
@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { articlesApi } from '../../api/articles';
+import { patchArticle } from '../../hooks/useArticleActions';
+import { usePrefs } from '../../stores/prefsStore';
+import { Icon } from '../Icon';
+import { toPoints } from '../../lib/summary';
+
+interface AiSummaryProps {
+ articleId: string;
+ summary?: string;
+}
+
+/** "Résumé IA" block at the top of the reader; offers to generate one when missing. */
+export function AiSummary({ articleId, summary }: AiSummaryProps) {
+ const qc = useQueryClient();
+ const open = usePrefs((s) => s.summaryOpen);
+ const setOpen = usePrefs((s) => s.setSummaryOpen);
+ const [pending, setPending] = useState(false);
+ const [error, setError] = useState('');
+
+ const summarize = async () => {
+ setPending(true);
+ setError('');
+ try {
+ const res = await articlesApi.summarize(articleId);
+ patchArticle(qc, articleId, { ai_summary: res.summary });
+ setOpen(true);
+ } catch {
+ setError('Le résumé n’a pas pu être généré. Réessayez plus tard.');
+ } finally {
+ setPending(false);
+ }
+ };
+
+ if (!summary) {
+ return (
+
+
+ {error &&
{error}
}
+
+ );
+ }
+
+ const points = toPoints(summary);
+ return (
+
+
+
+
Résumé IA
+
+
+ {open && (
+
+ {points ? (
+
+ {points.map((p, i) => (
+ - {p}
+ ))}
+
+ ) : (
+
{summary}
+ )}
+
+ );
+}
diff --git a/web/src/components/reader/Reader.tsx b/web/src/components/reader/Reader.tsx
index 66cd3d2..49c3bf5 100644
--- a/web/src/components/reader/Reader.tsx
+++ b/web/src/components/reader/Reader.tsx
@@ -3,18 +3,30 @@ import { createPortal } from 'react-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useSwipeable } from 'react-swipeable';
import { articlesApi, type Article } from '../../api/articles';
-import { patchArticle, useArticleActions } from '../../hooks/useArticleActions';
+import { useArticleActions } from '../../hooks/useArticleActions';
import { usePrefs } from '../../stores/prefsStore';
import { formatLong, readingTimeLabel } from '../../lib/format';
import { prepareArticleHtml } from '../../lib/html';
import { ShareButton } from '../ShareButton';
+import { FeedAvatar } from '../FeedAvatar';
+import { Icon } from '../Icon';
import { ReaderSettings } from './ReaderSettings';
+import { AiSummary } from './AiSummary';
interface ReaderProps {
/** The list item being read (title, image… shown instantly while the body loads). */
article: Article;
next?: Article;
hasPrev?: boolean;
+ /**
+ * 'pane': the right-hand column of the desktop layout.
+ * 'overlay': full screen on phones, a card above the dimmed page on larger screens.
+ */
+ variant?: 'pane' | 'overlay';
+ /** Where the mobile back button returns to. */
+ backLabel?: string;
+ /** "3 sur 128" shown in the toolbar. */
+ position?: string;
onClose: () => void;
onNext?: () => void;
onPrev?: () => void;
@@ -32,18 +44,22 @@ function isTypingTarget(t: EventTarget | null) {
return !!el && (el.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName));
}
-const Chevron = ({ dir }: { dir: 'left' | 'right' }) => (
-
-);
-
/**
- * Article opened as a large card above the (dimmed) grid.
- * Close: ✕, Escape or a click beside the card. Previous / next: side arrows
- * on desktop, bottom bar on mobile, j/k or ←/→ on the keyboard.
+ * The article reader. Close: ✕, Escape, back (or a click beside the card in
+ * overlay mode). Previous / next: toolbar arrows on desktop, "Suivant" in the
+ * bottom bar on phones, j/k or ←/→ on the keyboard, a horizontal swipe on touch.
*/
-export function Reader({ article: listArticle, next, hasPrev, onClose, onNext, onPrev }: ReaderProps) {
+export function Reader({
+ article: listArticle,
+ next,
+ hasPrev,
+ variant = 'overlay',
+ backLabel = 'Retour',
+ position,
+ onClose,
+ onNext,
+ onPrev,
+}: ReaderProps) {
const qc = useQueryClient();
const { toggleRead, toggleFavorite } = useArticleActions();
const fontSize = usePrefs((s) => s.fontSize);
@@ -51,13 +67,13 @@ export function Reader({ article: listArticle, next, hasPrev, onClose, onNext, o
const width = usePrefs((s) => s.width);
const font = usePrefs((s) => s.font);
const setFontSize = usePrefs((s) => s.setFontSize);
+ const overlay = variant === 'overlay';
- const overlayRef = useRef
(null);
+ const scrollRef = useRef(null);
const progressRef = useRef(null);
const titleRef = useRef(null);
const [settingsOpen, setSettingsOpen] = useState(false);
- const [summarizing, setSummarizing] = useState(false);
- const [summaryError, setSummaryError] = useState('');
+ const [imgFailed, setImgFailed] = useState(false);
const { data: detail, isError, refetch } = useQuery({
queryKey: ['article', listArticle.id],
@@ -82,25 +98,25 @@ export function Reader({ article: listArticle, next, hasPrev, onClose, onNext, o
return () => window.clearTimeout(t);
}, [next, qc]);
- // Modal behaviour: the app behind is inert and doesn't scroll; focus
- // moves to the title and returns to the card that opened the article.
+ // Focus moves to the title. In overlay mode the app behind is inert and
+ // doesn't scroll, and focus returns to the row that opened the article.
useLayoutEffect(() => {
- const root = document.getElementById('root');
const previous = document.activeElement as HTMLElement | null;
+ const root = overlay ? document.getElementById('root') : null;
root?.setAttribute('inert', '');
- document.body.style.overflow = 'hidden';
- overlayRef.current?.scrollTo({ top: 0 });
+ if (overlay) document.body.style.overflow = 'hidden';
+ scrollRef.current?.scrollTo({ top: 0 });
titleRef.current?.focus({ preventScroll: true });
return () => {
root?.removeAttribute('inert');
- document.body.style.overflow = '';
- previous?.focus?.({ preventScroll: true });
+ if (overlay) document.body.style.overflow = '';
+ if (overlay) previous?.focus?.({ preventScroll: true });
};
- }, []);
+ }, [overlay]);
// Reading progress without React re-renders.
useEffect(() => {
- const el = overlayRef.current;
+ const el = scrollRef.current;
if (!el) return;
let frame = 0;
const update = () => {
@@ -127,7 +143,7 @@ export function Reader({ article: listArticle, next, hasPrev, onClose, onNext, o
useEffect(() => {
const onKey = (e: KeyboardEvent) => {
if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || isTypingTarget(e.target)) return;
- const el = overlayRef.current;
+ const el = scrollRef.current;
switch (e.key) {
case 'Escape':
onClose();
@@ -174,7 +190,7 @@ export function Reader({ article: listArticle, next, hasPrev, onClose, onNext, o
return () => window.removeEventListener('keydown', onKey);
}, [onClose, onNext, onPrev, hasPrev, toggleFavorite, toggleRead, listArticle, openOriginal, fontSize, setFontSize]);
- // Optional touch shortcut on phones; the buttons below do the same.
+ // Optional touch shortcut on phones; the buttons do the same.
const swipe = useSwipeable({
onSwipedLeft: (ev) => {
if (!(ev.event.target as Element).closest('pre,table') && onNext) onNext();
@@ -188,19 +204,6 @@ export function Reader({ article: listArticle, next, hasPrev, onClose, onNext, o
preventScrollOnSwipe: false,
});
- const summarize = async () => {
- setSummarizing(true);
- setSummaryError('');
- try {
- const res = await articlesApi.summarize(listArticle.id);
- patchArticle(qc, listArticle.id, { ai_summary: res.summary });
- } catch {
- setSummaryError('Le résumé n’a pas pu être généré. Réessayez plus tard.');
- } finally {
- setSummarizing(false);
- }
- };
-
const style = {
'--reader-size': `${fontSize}px`,
'--reader-leading': String(lineHeight),
@@ -209,162 +212,160 @@ export function Reader({ article: listArticle, next, hasPrev, onClose, onNext, o
} as React.CSSProperties;
const date = listArticle.published_at || listArticle.created_at;
+ const fav = !!article.is_favorite;
+ const showImage = !!listArticle.image_url && !imgFailed;
+
+ const favButton = (cls: string, size: number) => (
+
+ );
const body = (
{
// Click beside the card closes it.
- if (e.target === e.currentTarget) onClose();
+ if (overlay && e.target === e.currentTarget) onClose();
}}
>
- {/* Side arrows (desktop) */}
- {hasPrev && onPrev && (
-
- )}
- {onNext && (
-
- )}
-
- {/* Card header: source on the left, actions and close on the right */}
-
-
-
-
{listArticle.feed_title || 'Article'}
-
- · {readingTimeLabel(listArticle.reading_time)} de lecture
-
-
+ {/* Toolbar */}
+
+
-
+
+
+
+
+
{position}
+
{settingsOpen && setSettingsOpen(false)} />}
-
+
-
- {listArticle.image_url && (
-
(e.currentTarget.style.display = 'none')}
- />
- )}
-
-
);
- return createPortal(body, document.body);
+ return overlay ? createPortal(body, document.body) : body;
}
diff --git a/web/src/components/reader/ReaderSettings.tsx b/web/src/components/reader/ReaderSettings.tsx
index da0cbdd..8c1208c 100644
--- a/web/src/components/reader/ReaderSettings.tsx
+++ b/web/src/components/reader/ReaderSettings.tsx
@@ -1,4 +1,5 @@
import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
import {
usePrefs,
FONT_SIZE_MAX,
@@ -7,6 +8,7 @@ import {
type ReaderWidth,
type ThemePref,
} from '../../stores/prefsStore';
+import { useIsMobile } from '../../hooks/useIsMobile';
interface ReaderSettingsProps {
onClose: () => void;
@@ -14,9 +16,9 @@ interface ReaderSettingsProps {
const THEMES: { value: ThemePref; label: string; swatch: string }[] = [
{ value: 'light', label: 'Clair', swatch: '#FFFFFF' },
- { value: 'sepia', label: 'Sépia', swatch: '#F4ECD8' },
- { value: 'dark', label: 'Sombre', swatch: '#161D17' },
- { value: 'system', label: 'Auto', swatch: 'linear-gradient(135deg,#fff 50%,#161D17 50%)' },
+ { value: 'sepia', label: 'Sépia', swatch: '#F1E7D0' },
+ { value: 'dark', label: 'Sombre', swatch: '#161B18' },
+ { value: 'system', label: 'Auto', swatch: 'linear-gradient(135deg,#fff 50%,#161B18 50%)' },
];
const FONTS: { value: ReaderFont; label: string; family: string }[] = [
@@ -37,10 +39,14 @@ const LEADINGS = [
{ value: 1.85, label: 'Aéré' },
];
-/** "Aa" popover: theme, font, size, line height and line length. */
+/**
+ * "Aa" panel: theme, font, size, line height and line length. A popover on
+ * larger screens, a bottom sheet on phones; the text behind updates live.
+ */
export function ReaderSettings({ onClose }: ReaderSettingsProps) {
const prefs = usePrefs();
const panelRef = useRef
(null);
+ const isMobile = useIsMobile();
useEffect(() => {
panelRef.current?.focus();
@@ -54,7 +60,9 @@ export function ReaderSettings({ onClose }: ReaderSettingsProps) {
return () => window.removeEventListener('keydown', onKey, true);
}, [onClose]);
- return (
+ // The sheet is portalled: the reader toolbar's backdrop blur would
+ // otherwise become the containing block of its fixed position.
+ const panel = (
<>
+ {isMobile && (
+ <>
+
+
+
Affichage
+
+
+
+ )}