feat(demo): « Créer mon arbre » en bouton noir de la barre, « Modifier » en clair

Dans la démo, l'inscription n'était que dans le menu du rond de profil et dans un
lien après une modification. Elle devient le bouton noir de la barre du bas ;
« Modifier » reste à côté en clair (crayon seul sur téléphone) et quitte le noir.
« Créer mon arbre » quitte le menu du rond pour ne pas apparaître deux fois.

Seulement sur l'instance qui invite à s'inscrire (SIGNUP_PROMPTS, inscription
ouverte), sans compte, et pas dans la démo intégrée à la landing (?embed).
Clic suivi : create_account_clicked, via=demo-barre.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
IliesAllaliandClaude Opus 5.5 committed 2026-11-03 16:48:17 +01:00
1 parent 7b7a589062
commit 0ef5d08fec
2 files changed
+21 -2

No files matched your search

@@ -55,6 +55,9 @@
@media (hover: hover) and (pointer: fine) { .nav-add:hover { background: #3a3530; } }
.nav-add.is-open,
.nav-add.is-editing { box-shadow: 0 0 0 4px var(--pz-a100); }
/* « Modifier » en clair dans la démo, quand « Créer mon arbre » prend le noir à côté */
.nav-add--soft { background: var(--pz-line-soft); color: var(--pz-ink); }
@media (hover: hover) and (pointer: fine) { .nav-add--soft:hover { background: #e9e3da; } }
/* Rond du compte */
.nav-dropdown-wrapper { position: static; }
@@ -230,6 +230,11 @@ function ContextualNavbar({
// La famille sans compte trouve « Faire le mien » en bas du menu qu'elle ouvre, le menu Ajouter, et la ligne quitte
// le menu du compte. Seulement si l'instance invite à créer son arbre (SIGNUP_PROMPTS).
const ownTreeInAddMenu = signupPrompts && canRegister && isFamily && !authenticated && !showMobileAnnot
// Démo sans compte : « Créer mon arbre » devient le bouton noir de la barre, « Modifier » passe en clair à côté
// (planche du 03/11, variante C). Il quitte alors le menu du rond, pour ne pas être proposé deux fois.
// Pas dans la démo intégrée à la landing (?embed) : l'inscription s'ouvrirait dans le cadre, la landing a ses boutons.
const isEmbed = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('embed')
const demoSignupInBar = signupPrompts && canRegister && isDemo && !isEmbed && !authenticated && !showMobileAnnot
if (ownTreeInAddMenu) {
addGroups.push({ label: t('Votre famille'), items: [{ key: 'own-tree', icon: <TreeDeciduous {...ICON} />, label: t('Faire le mien'), sub: t('un arbre pour votre famille, gratuit'), onSelect: () => handleCreateAccountClick('ajouter') }] })
}
@@ -371,7 +376,7 @@ function ContextualNavbar({
<button
type="button"
ref={addBtnRef}
className={`nav-add${isPhone ? '' : ' nav-add--label'}${openMenu === 'add' ? ' is-open' : ''}${editModeActive ? ' is-editing' : ''}`}
className={`nav-add${isPhone ? '' : ' nav-add--label'}${demoSignupInBar ? ' nav-add--soft' : ''}${openMenu === 'add' ? ' is-open' : ''}${editModeActive ? ' is-editing' : ''}`}
onClick={() => setOpenMenu((v) => (v === 'add' ? null : 'add'))}
aria-expanded={openMenu === 'add'}
aria-haspopup="menu"
@@ -386,6 +391,17 @@ function ContextualNavbar({
)}
{hasAddMenu && openMenu === 'add' && renderAddMenu()}
{demoSignupInBar && (
<button
type="button"
className="nav-add nav-add--label"
onClick={() => { closeMenus(); handleCreateAccountClick('demo-barre') }}
>
<TreeDeciduous size={18} strokeWidth={2.2} aria-hidden="true" />
<span className="nav-add-label">{t('Créer mon arbre')}</span>
</button>
)}
{/* Rond du compte : icône de profil hors connexion, initiale ou photo connecté */}
<div className="nav-dropdown-wrapper">
<button
@@ -431,7 +447,7 @@ function ContextualNavbar({
onCreateTree={onCreateTree}
onSettings={onSettingsClick}
onLogin={() => onProfileClick?.('login', 'compte')}
onRegister={canRegister && !ownTreeInAddMenu ? () => handleCreateAccountClick('compte') : undefined}
onRegister={canRegister && !ownTreeInAddMenu && !demoSignupInBar ? () => handleCreateAccountClick('compte') : undefined}
onLogout={onLogout}
/>
)}