feat(web): redesign — three-pane desktop, mobile tab bar, search

Implements the approved design proposal across every screen.

- Layout: feeds · list · reader panes on desktop (≥1280px), list + reader
  with the feeds in a drawer on tablets, one column with a bottom tab bar
  (À lire, Focus, Favoris, Flux) on phones.
- List: dense rows with an unread dot, feed initial and square thumbnail
  instead of large cards; touch swipe reveals the action (→ lu, ← favori).
  The magazine grid stays available as a view toggle.
- Reader: inline pane on desktop, full screen on phones with a bottom
  action bar (favori, partager, original, Suivant); collapsible "Résumé IA"
  block; "Aa" settings become a bottom sheet on phones.
- Search: the existing /articles/search endpoint gets a UI — ⌘K / "/"
  palette on desktop, full screen on phones, with recent searches.
- Mobile "Mes flux" screen: views, subscriptions with errors, theme,
  OPML import/export, logout.
- Focus mode: progress bar, counter and labelled buttons.
- Tokens: new paper / deep-forest palette (all text ≥4.5:1), Newsreader +
  Inter replace Playfair + Lora (two families instead of four), shared
  Icon and FeedAvatar components.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UPyU2LbJ2rTrsgZqQKhH3j
This commit is contained in:
Claude committed 2026-10-20 09:03:47 +00:00
1 parent eb308d0701
commit c9e8e5c747
38 files changed
+2019 -963

No files matched your search

+4 -14
View File
@@ -9,8 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@fontsource-variable/inter": "^5.3.0",
"@fontsource-variable/lora": "^5.3.0",
"@fontsource-variable/playfair-display": "^5.3.0",
"@fontsource-variable/newsreader": "^5.3.0",
"@fontsource/atkinson-hyperlegible": "^5.3.0",
"@tanstack/react-query": "^5.90.20",
"framer-motion": "^12.34.0",
@@ -2257,19 +2256,10 @@
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource-variable/lora": {
"node_modules/@fontsource-variable/newsreader": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@fontsource-variable/lora/-/lora-5.3.0.tgz",
"integrity": "sha512-2ph8KiZ8Bn141hWuC3ErtpJ+Ui8p2MJQn8TJNRSRmLmnCIOCtHfiBM9R7WLRPeUG/q6hXyHOxWQ8DvRSX+ixvQ==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource-variable/playfair-display": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@fontsource-variable/playfair-display/-/playfair-display-5.3.0.tgz",
"integrity": "sha512-IHdzTvE8eGIXHteZql7KXoqdc3Gfm+Zs1u4XlSC3MeplkwviT3sx/P6gI0tLwg/xIYLF4ZJYveZ5V+bl9cnDwA==",
"resolved": "https://registry.npmjs.org/@fontsource-variable/newsreader/-/newsreader-5.3.0.tgz",
"integrity": "sha512-rrzYi43qMpbzwuFtf9OkWH8sxAPVPcQQQEwXpPtwaKYeJ8yVg5aLs5kawmo1f2Q1t1M38TLmEKCkGVDsYwgdFw==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"