Redface 2 · phase Vue Topic · maquettes

Lire un sujet, et y répondre

Trois écrans à refondre pour la prochaine phase : le chargement d'un sujet, la lecture des posts, et l'interface de postage. Material 3, des pistes plus expressives quand ça sert — pour trancher avant de coder.

Direction cadrée avec Codex (gpt-5.5)
Chaque maquette est badgée Stable (réalisable tel quel en Compose Material 3) ou Aspiration M3E (esprit Expressive à réimplémenter à la main — l'API M3 Expressive est internal dans la BOM actuelle). Cibles d'implémentation recommandées : Chargement → Skeleton, Lecture → Cartes épurées + header dissous, Postage → Plein écran + composer dense.
Stable Aspiration M3E

① Chargement du sujet

Le sujet doit s'afficher tout de suite (fini le titre « Sujet » générique), un loader centré, et jamais de compteur page X/N tant que la page n'est pas parsée (sinon on rejoue le bug #622). La variante progressive déterminée a été écartée par Codex pour cette raison.

9:41◰ ▾ ▮
${BACK}
[VDS] Redface 2 — l'app HFR
Chargement…
${SEARCH}
Chargement de la page demandée
A · SkeletonStable
Titre réel immédiat, loader centré M3, squelettes de posts en dessous. État principal « titre connu, posts inconnus » — pas un fallback.
#622 compteurtitre tardif#477 flash
9:41◰ ▾ ▮
${BACK}
[VDS] Redface 2 — l'app HFR
Chargement…
${SEARCH}
Chargement de la page demandée
B · Loader morphantAspiration M3E
Même structure que A, mais l'indicateur central est la forme morphante du M3 Expressive Loading Indicator — non disponible en stable, à dessiner main.
loader vivantréimpl. manuelle

② Lecture d'un sujet

Tuer le TopicHeaderCard (« top card ») : titre et navigation passent dans une top app bar + pilule de page. Pseudo neutre + rôle en puce discrète (fini le rouge/or criard), citations apaisées et cliquables (« aller au post »), repère dernier-lu traversant, sondage présent (#697), un seul contrôle flottant.

9:41◰ ▾ ▮
${BACK}
[VDS] Redface 2 — l'app HFR
12 / 87
${MORE}
k
kaloskagatos
14:25
#2 781 895
clads92 a écrit
Drap pour la V2 (faut la feature couleur du logo !) ${LINKICO} aller au post
Bon courage pour le projet :) faut faire une version Claude Code :D
${QUOTEICO} Citer
${PLUSICO}
${MOREDOT}
Dernier message lu
X
XaTriX
15:36
#2 781 907
Objectif livraison de bêta demain soir. Au pire lundi.
${IMGICO}
${QUOTEICO} Citer
${EDITICO} Modifier
${MOREDOT}
${POLLICO} Couleur du favori ?
A — Lime vif
34 %
D — Ambre #FFB300
58 %
${REPLYICO} Répondre
A · Cartes épurées + header dissousStable
La base recommandée. Plus de top card : app bar + pilule page. Headers compacts, rôle en puce, citations calmes & cliquables, repère dernier-lu net, FAB unique.
top card#599 FABs#600 dernier-lu#699 citation#697 sondage
9:41◰ ▾ ▮
${BACK}
[VDS] Redface 2 — l'app HFR
12 / 87
${MORE}
n
nicko13:12#2 789 665
Ouais sympa cette petite transparence là ! :)
t
thibw15:08#2 789 685
${CHEVICO} citation de XaTriX — repliée
Lel, tu lui laisses un peu trop de liberté. Intègre l'animation aussi dans les topics !
X
XaTriX15:29#2 789 686
Sans déc :o
${REPLYICO}
B · Lecture continueStable
Direction dense, sans cartes : séparateurs fins, priorité lisibilité (interlignes #280), citations repliables. Idéale pour les longs sujets & le HFRien compact.
#280 interlignesdensitélongues sessions
9:41◰ ▾ ▮
${BACK}
12 / 87
${MORE}
Redface 2 — l'app HFR
VDS · 87 pages · 2 580 réponses
M
MisterDams
13:28
#2 789 671
Tu devrais essayer Redface 2 et son moteur de recherche :D
${QUOTEICO} Citer
${MOREDOT}
S
Shinseiki
18:04
#2 789 699
Même si j'adore le principe, elle est dégueu ta redface mon cher Claude :o
Page suivante${NEXTICO}
Aller à une page${JUMPICO}
${REPLYICO}
C · ExpressiveAspiration M3E
Large top app bar qui se réduit au scroll, conteneurs tonaux très arrondis, FAB menu qui regroupe page suivante + aller-à-la-page + répondre. App bar large et FAB menu = à réimplémenter (non stable).
#599 FABs unifiésesprit M3E

③ Postage — éditeur

Répondre aux vraies douleurs : upload sous le formulaire (plus épinglé), aperçu replié par défaut (fini le 50/50), carrousel de smileys natifs inline, texte cité grisé, curseur toujours visible (autoscroll), barre d'envoi au-dessus du clavier.

9:41◰ ▾ ▮
${CLOSE}
Répondre
${EYEICO} Aperçu
↩ XaTriX×
↩ nicko×
XaTriX a écrit : Objectif livraison de bêta demain soir. Hâte de tester le nouveau loader
${SMYSET}perso ›
BIUS
${UPLOADICO} Joindre une image
diberie · super-h
Options
Smileys
${SENDICO} Envoyer
B · Plein écran + composer denseStable
La base recommandée. Champ dominant, citations en pills supprimables, texte cité grisé, smileys natifs inline, upload sous le champ, aperçu en chip (replié).
upload sous formaperçu replié#250 smileystexte cité#447 autoscroll
9:41◰ ▾ ▮
${BACK}
[VDS] Redface 2
87 / 87
n
nicko
19:17
Mais avec ou sans svg, c'est clownesque
Réponse rapide
BI🖼
${SENDICO}
A · Bottom sheet rapideStable
Pour une réponse courte sans quitter le sujet. À réserver à ce cas : mauvais pour citations longues, aperçu, multi-quote et autoscroll (hauteur instable avec le clavier).
réponse courtecontexte gardé
9:41◰ ▾ ▮
${CLOSE}
Répondre
${EYEICO} Aperçu
↩ XaTriX×
XaTriX a écrit : …Réponse
${SMYSET}GIF · perso ›
BIUS
${UPLOADICO} Image
+ GIF · biblio
Options
${SENDICO} Envoyer
C · Toolbar expressiveAspiration M3E
Barre d'outils en button groups segmentés expressifs + onglets GIF/bibliothèque (#190). Le button group expressif n'existe pas en stable — à recréer.
#190 médiasbutton group M3E
Maquettes HTML interactives (thème clair/sombre, contenu HFR réel), pour arbitrage avant implémentation — ne sont pas l'app. Schéma couleur = tokens M3 réels de Redface 2 (primary #8E1D24 / #FFB3B1, tertiary or). Direction cadrée avec Codex gpt-5.5. Phase « Vue Topic » : umbrella #604, jalons Vue · Topic 1 & Vue · Éditeur 1.