From 0ef5d08fec5c51840adad29c682a241c9585818a Mon Sep 17 00:00:00 2001
From: IliesAllali <pro.allali.ilies@gmail.com>
Date: Tue, 3 Nov 2026 16:48:17 +0100
Subject: [PATCH] =?UTF-8?q?feat(demo):=20=C2=AB=20Cr=C3=A9er=20mon=20arbre?=
 =?UTF-8?q?=20=C2=BB=20en=20bouton=20noir=20de=20la=20barre,=20=C2=AB=20Mo?=
 =?UTF-8?q?difier=20=C2=BB=20en=20clair?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/navbar/ContextualNavbar.css    |  3 +++
 .../components/navbar/ContextualNavbar.jsx    | 20 +++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/navbar/ContextualNavbar.css b/frontend/src/components/navbar/ContextualNavbar.css
index 908c1cb..96bb973 100644
--- a/frontend/src/components/navbar/ContextualNavbar.css
+++ b/frontend/src/components/navbar/ContextualNavbar.css
@@ -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; }
diff --git a/frontend/src/components/navbar/ContextualNavbar.jsx b/frontend/src/components/navbar/ContextualNavbar.jsx
index d2538a5..ef41024 100644
--- a/frontend/src/components/navbar/ContextualNavbar.jsx
+++ b/frontend/src/components/navbar/ContextualNavbar.jsx
@@ -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}
                 />
               )}