Le menu empilait douze liens sous un seul intitulé, avec des carrés, ronds et
losanges qui ne portaient aucun sens. Sur téléphone, la barre latérale se
dépliait en ligne et devenait un pavé de boutons inutilisable.
Navigation
- Six rubriques au lieu d'une pile : Pilotage, Vie du réseau, Rencontres,
Communication, Configuration, Côté adhérent. Le quotidien est ainsi séparé de
ce qu'on ne touche qu'occasionnellement.
- Une icône par entrée (`BackendIcons.tsx`) à la place des formes génériques.
- Le menu devient une table de données filtrée par capacité, au lieu de douze
blocs JSX répétant les mêmes appels à `can()`.
Mobile
- Sous 1024px la barre latérale devient un tiroir : voile de fond, fermeture par
Échap, par clic hors zone et à la navigation, défilement de la page bloqué,
actions Voir le site / Déconnexion rapatriées dans le tiroir.
- `min-height: 0` sur la zone de navigation : sans lui l'enfant flex refusait de
rétrécir et la carte utilisateur recouvrait les derniers liens, interceptant
les clics.
- En-tête public repensé : logo toujours présent sur téléphone (seul retour à
l'accueil), accès adhérent sur la même ligne, navigation répartie en dessous
au lieu de se replier en escalier.
- Liste des adhérents : le tableau à cinq colonnes devient une fiche par
adhérent, sur deux lignes constantes, sans défilement horizontal.
- Compteurs du tableau de bord en deux colonnes plutôt qu'empilés.
Vérifié : aucun débordement horizontal sur les 23 pages en 320, 390 et 768 px ;
tiroir et cibles tactiles testés au doigt sur toutes les interactions.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QXNXRC4j5VLfKvpyyisrnb
Bloc « Informations pratiques » (fiche adhérent)
- Suppression des dégradés hors palette (radial doré de la section, dégradés
crème/bleu des deux sous-cartes) au profit du vocabulaire visuel du site :
carte blanche bordée, sous-cartes plates sur le fond de champ, variables CSS.
- La pastille « Préparer votre visite » devient une puce arrondie identique aux
badges du reste du site ; le chip d'ouverture reprend les teintes de statut.
- Les glyphes texte ◷ et ↗ sont remplacés par des icônes SVG cohérentes.
Suspension des promotions
- Nouveau statut `suspended` + colonnes `suspended_by` / `suspended_by_id` /
`suspended_at`.
- L'adhérent suspend et réactive ses propres promotions depuis Mon espace ;
l'association suspend et réactive n'importe laquelle depuis le backoffice.
- Une suspension décidée par l'association ne peut pas être levée par
l'adhérent : le motif est affiché dans son espace.
- Les lectures publiques filtrant déjà sur `live`, une promo suspendue quitte
immédiatement l'accueil, l'annuaire et la fiche.
Publication Facebook / LinkedIn
- `src/lib/social.ts` : publication d'une promo en ligne sur la page Facebook
(Graph API, upload multipart car les images sont en data-URI) et sur la page
LinkedIn (Posts API + Images API en trois étapes).
- Jetons d'accès exclusivement en variables d'environnement ; un réseau non
configuré masque son bouton.
- Table `social_posts` : chaque tentative est tracée, un échec est rattrapé et
affiché sur la carte de la promo sans interrompre le backoffice.
- Nouvelle capacité RBAC `publishSocial` (admin + modérateur).
Liens sociaux publics
- Réglages `association_facebook` / `association_linkedin` éditables dans
Paramètres, préremplis avec les pages de l'association.
- Section « Plein R sur les réseaux » sur l'accueil et icônes dans le pied de
page, masquées si le réglage est vide.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QXNXRC4j5VLfKvpyyisrnb
Quand un adhérent n'a pas de photo de couverture/vitrine, le logo était affiché
sur fond blanc brut. Il est désormais présenté dans une carte blanche encadrée
(bordure crème + ombre douce) sur fond crème dégradé — cohérent avec le thème.
S'applique à la fiche, l'annuaire et le carrousel.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XwfhYHzC9hQWPDnQ2p53GL
Replace cover-crop background with PromoImage component: sharp
contain image over a blurred cover copy. Whole image visible on
any aspect ratio, no flat letterbox bars. Applied to accueil,
adherent profile, backend promotions, member space preview +
upload dropzone.
Also retheme adherent logo frame (cream gradient + warm border)
instead of flat white.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Anti-debordement horizontal global (overflow-x hidden, img max-width)
- Container : padding reduit a 16px sous 640px
- En-tete/pied de page : padding horizontal fluide (clamp), en-tete wrap
- Titres principaux en clamp() (accueil hero/h2, annuaire, fiche) pour
ne plus deborder sur petit ecran
- Liste adherents du back-office : defilement horizontal (.table-scroll)
au lieu de colonnes ecrasees
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Avatar logo de la fiche adherent : <img> object-fit contain centre,
cadre a overflow hidden -> plus de debordement quel que soit le ratio
- ImageField : prop fit (cover|contain). Champs logo en contain (apercu
centre, non etire) dans l'edition fiche et l'espace adherent
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Quand un adherent n'a pas de photo de couverture mais un logo, le logo
n'est plus etire en plein cadre : il est centre et contenu (~80%) sur
fond blanc. Composant partage VitrineImage applique a l'annuaire, au
carrousel d'accueil et a la fiche adherent.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Retire le kill-switch prefers-reduced-motion (* { animation:none }) qui
coupait toutes les animations : etoiles, flottement du logo, apparitions
au defilement ne bougeaient pas. Animations desormais toujours actives.
- Nouveau StarField : champ d'etoiles qui scintillent ET derivent
(keyframe plr-drift via propriete translate, cumulee au scintillement),
place dans le hero. Contenu du hero passe au-dessus (z-index).
- Carrousel : fondu force (n'est plus desactive sous reduced-motion).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Remplace le defilement continu par 3 cartes fixes et propres. Toutes
les 20 s, les cartes disparaissent une a une (fondu decale) puis les
3 suivantes apparaissent une a une. Rotation equitable sur tous les
adherents actifs. Respecte prefers-reduced-motion (bascule sans fondu).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Hero : logo centre verticalement (alignItems center)
- Titre "A l'honneur ce mois-ci" -> "A l'honneur"
- Remplace les 3 fiches "mise en avant" par un carrousel auto-defilant
de tous les adherents actifs, en rotation equitable (l'ordre pivote
d'un cran par heure). Pause au survol, respecte prefers-reduced-motion.
- Retire la coche "Mettre a l'honneur" du back-office (edition adherent)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Champs upload image d'entete (coverUrl) et logo (logoUrl) dans le
formulaire d'edition d'un adherent (composant ImageField, fichier ->
data-URL via hidden input)
- updateMember persiste desormais coverUrl + logoUrl, et revalide la
fiche publique /adherents/[id]
- serverActions.bodySizeLimit a 4mb (les data-URL depassent la limite
par defaut de 1mb)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Logo en haut a gauche de la page Annuaire (prop logo sur SiteHeader)
- Modal "Devenir adherent" sur les CTA accueil + annuaire : cree une
demande d'adhesion (membership_requests) et alerte les admins via le
journal d'activite (compteur tableau de bord deja cable)
- Formulaire de contact (modal depuis le pied de page) : nouvelle table
contact_messages + alerte admin
- Composant Modal partage, server actions publiques (sans auth)
- Migration drizzle 0002
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Menu identique sur toutes les pages publiques (Accueil, Annuaire, Promotions,
L'association, Espace adhérent) via SiteHeader/SiteFooter : on peut toujours
revenir à l'accueil depuis l'annuaire et inversement (page courante en gras).
- Retire la section « Parcourir par métier » de la page d'accueil.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XwfhYHzC9hQWPDnQ2p53GL
Claude
Michael