Merge pull request #96 from IliesAllali/feat/crayon-invite

Crayon pour les invités : proposer des changements

frontend/src/components/EditModeOverlay.css

@@ -48,14 +48,20 @@
 .edit-mode-submit { flex: none; }
 .edit-mode-toast-close { width: 36px; min-height: 36px; flex: none; }
 
+/* Invité : la phrase complète sur ordinateur, « Vous proposez » sur téléphone, toujours sur une ligne */
+.edit-mode-toast-short { display: none; }
+
 @media (max-width: 768px) {
   .edit-mode-toast { top: 68px; max-width: calc(100vw - 24px); }
   .edit-mode-toast-text { font-size: 13px; }
+  .edit-mode-toast--contrib .edit-mode-toast-long { display: none; }
+  .edit-mode-toast--contrib .edit-mode-toast-short { display: inline; }
 }
 
-/* Téléphone : le texte se coupait en « Vous modifi… » à côté du bouton, qui suffit à lui seul */
+/* Téléphone : le texte de l'éditeur se coupait en « Vous modifi… » à côté du bouton, qui suffit à lui seul.
+   L'invité garde son texte court, qui tient sur une ligne. */
 @media (max-width: 480px) {
-  .edit-mode-toast--with-submit .edit-mode-toast-text { display: none; }
+  .edit-mode-toast--with-submit:not(.edit-mode-toast--contrib) .edit-mode-toast-text { display: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {

frontend/src/components/EditSessionBar.jsx

@@ -11,8 +11,9 @@ function EditSessionBar({ active, hasDraft, role = 'contributor', onDeactivate,
   ), [isAdmin])
 
   // Libellés courts : ils doivent tenir sur un téléphone à côté du bouton
-  const toastLabel = isAdmin ? t("Vous modifiez l'arbre") : t('Vos propositions')
-  const submitLabel = isAdmin ? t("Mettre à jour l'arbre") : t('Envoyer mes ajouts')
+  // Invité : « Vous proposez » sur téléphone (une seule ligne), la phrase complète sur ordinateur
+  const toastLabel = isAdmin ? t("Vous modifiez l'arbre") : null
+  const submitLabel = isAdmin ? t("Mettre à jour l'arbre") : t('Envoyer')
   // La famille ne voit le bouton d'envoi que lorsqu'il y a quelque chose à envoyer
   const showSubmit = Boolean(onSubmit) && (isAdmin || hasDraft)
 
@@ -22,9 +23,16 @@ function EditSessionBar({ active, hasDraft, role = 'contributor', onDeactivate,
     <>
       <div className={borderClass} aria-hidden="true" />
 
-      <div className={`edit-mode-toast${isAdmin ? ' edit-mode-toast--admin' : ''}${showSubmit ? ' edit-mode-toast--with-submit' : ''}`} role="status" aria-live="polite">
+      <div className={`edit-mode-toast${isAdmin ? ' edit-mode-toast--admin' : ' edit-mode-toast--contrib'}${showSubmit ? ' edit-mode-toast--with-submit' : ''}`} role="status" aria-live="polite">
         <span className="edit-mode-toast-dot" aria-hidden="true" />
-        <span className="edit-mode-toast-text">{toastLabel}</span>
+        {isAdmin ? (
+          <span className="edit-mode-toast-text">{toastLabel}</span>
+        ) : (
+          <span className="edit-mode-toast-text">
+            <span className="edit-mode-toast-long">{t('Vous proposez des changements')}</span>
+            <span className="edit-mode-toast-short">{t('Vous proposez')}</span>
+          </span>
+        )}
 
         {showSubmit && (
           <button

frontend/src/components/navbar/ContextualNavbar.css

@@ -355,6 +355,12 @@
     white-space: normal;
     text-align: center;
   }
+  .contextual-navbar--family .nav-family-label-short { display: none; }
+  /* Sous 420 px, trois libellés complets passent sur deux lignes : on prend les courts, sur une ligne */
+  @media (max-width: 419px) {
+    .contextual-navbar--family .nav-family-label-full { display: none; }
+    .contextual-navbar--family .nav-family-label-short { display: inline; white-space: nowrap; }
+  }
   .contextual-navbar--family .nav-more-wrapper { flex: 1; display: flex; }
   .contextual-navbar--family .nav-dropdown-wrapper { margin-left: 0; align-self: center; }
   /* Le zoom passe au-dessus de la barre pleine largeur */

frontend/src/components/navbar/ContextualNavbar.jsx

@@ -160,13 +160,23 @@ function ContextualNavbar({
   const isFamily = (navbarType === 'contributor_anon' || navbarType === 'contributor_auth') && Boolean(onAddSouvenirClick)
   const renderFamilyButtons = () => (
     <>
-      <button type="button" className="nav-family-btn nav-family-btn--primary" onClick={onAddSouvenirClick}>
+      {/* Le même crayon que le propriétaire : proposer des changements sans passer par « Plus » */}
+      <NavButton
+        icon={<Edit3 size={20} strokeWidth={2} />}
+        label={t('Proposer des changements')}
+        onClick={onEditClick}
+        active={editModeActive}
+      />
+      {/* Sous 420 px, un libellé court tient sur une ligne ; le libellé complet reste en aria-label et en title */}
+      <button type="button" className="nav-family-btn nav-family-btn--primary" onClick={onAddSouvenirClick} aria-label={t('Ajouter un souvenir')} title={t('Ajouter un souvenir')}>
         <ImagePlus size={20} strokeWidth={2} aria-hidden="true" />
-        <span>{t('Ajouter un souvenir')}</span>
+        <span className="nav-family-label-full">{t('Ajouter un souvenir')}</span>
+        <span className="nav-family-label-short" aria-hidden="true">{t('Souvenir')}</span>
       </button>
-      <button type="button" className="nav-family-btn" onClick={onAddPersonClick}>
+      <button type="button" className="nav-family-btn" onClick={onAddPersonClick} aria-label={t('Ajouter une personne')} title={t('Ajouter une personne')}>
         <UserPlus size={20} strokeWidth={2} aria-hidden="true" />
-        <span>{t('Ajouter une personne')}</span>
+        <span className="nav-family-label-full">{t('Ajouter une personne')}</span>
+        <span className="nav-family-label-short" aria-hidden="true">{t('Personne')}</span>
       </button>
       <div ref={moreRef} className="nav-more-wrapper">
         <button type="button" className={`nav-family-btn nav-family-btn--more${moreOpen ? ' is-open' : ''}`} onClick={() => setMoreOpen((v) => !v)} aria-expanded={moreOpen} aria-haspopup="menu">
@@ -239,7 +249,7 @@ function ContextualNavbar({
           <>
             <NavButton
               icon={<Edit3 size={20} strokeWidth={2} />}
-              label={t('Contribuer')}
+              label={t('Proposer des changements')}
               onClick={onEditClick}
               active={editModeActive}
             />
@@ -258,7 +268,7 @@ function ContextualNavbar({
           <>
             <NavButton
               icon={<Edit3 size={20} strokeWidth={2} />}
-              label={t("Contribuer à l'arbre")}
+              label={t('Proposer des changements')}
               onClick={onEditClick}
               active={editModeActive}
             />

frontend/src/i18n/en/compte.js

@@ -190,8 +190,6 @@ export default {
   "Le mode d'emploi": "User guide",
   "Modifier l'arbre": "Edit the tree",
   "Contributions": "Contributions",
-  "Contribuer": "Contribute",
-  "Contribuer à l'arbre": "Contribute to the tree",
   "Contribuer (mot de passe contribution requis)": "Contribute (contribution password required)",
   "Modifier la démo": "Edit the demo",
   "Quitter l'édition": "Exit edit mode",

frontend/src/i18n/en/contribution.js

@@ -177,9 +177,10 @@ export default {
   'Envoyer les modifications': 'Send changes',
   'Aucune modification à soumettre': 'No changes to submit',
   "Vous modifiez l'arbre": "You're editing the tree",
-  'Vos propositions': 'Your suggestions',
+  'Vous proposez des changements': 'You are suggesting changes',
+  'Vous proposez': 'You are suggesting',
+  'Proposer des changements': 'Suggest changes',
   "Mettre à jour l'arbre": 'Update the tree',
-  'Envoyer mes ajouts': 'Send my additions',
   "Aucune modification à envoyer pour l'instant": 'Nothing to send yet',
   'Quitter le mode édition': 'Exit edit mode',