Merge pull request #157 from IliesAllali/fix/badge-conflit

Propositions : étiquette posée sur le bord de la carte, « À vérifier » à la place de l'action, bulle du compteur ronde

frontend/src/components/ContributionPanel.jsx

@@ -558,16 +558,21 @@ const ContributionPanel = ({
                               key={change.id}
                               className={`contrib-change-card${isApproved ? ' contrib-change-card--approved' : ''}${isRejected ? ' contrib-change-card--rejected' : ''}`}
                             >
-                              <div className="contrib-change-card-head">
+                              {/* Étiquette posée sur le bord haut de la carte. Une fiche changée depuis la proposition dit « À vérifier »
+                                  à la place de « Modification » ; toute autre action garde son mot (une suppression reste lisible) */}
+                              {change.conflictState === 'needs_review' ? (
+                                <span className="contrib-action-badge contrib-action-badge--conflict" title={t('La fiche a changé depuis cette proposition')}>
+                                  {change.action === 'update' ? t('À vérifier') : t('{action}, à vérifier', { action: formatAction(change.action) })}
+                                </span>
+                              ) : (
                                 <span className={`contrib-action-badge contrib-action-badge--${change.action}`}>
                                   {formatAction(change.action)}
                                 </span>
+                              )}
+                              <div className="contrib-change-card-head">
                                 <span className="contrib-change-entity-name">
                                   {personName || formatEntityType(change.entityType)}
                                 </span>
-                                {change.conflictState === 'needs_review' && (
-                                  <span className="contrib-conflict-badge">{t('À vérifier')}</span>
-                                )}
                                 <div className="contrib-card-decisions">
                                   <button
                                     type="button"

frontend/src/components/SettingsPanels.css

@@ -179,17 +179,18 @@
 .contrib-change-group { display: grid; gap: 6px; }
 .contrib-group-header { font: 500 11.5px var(--pz-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pz-faint); padding-top: 4px; }
 
-.contrib-change-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px; border: 1px solid var(--pz-line); border-radius: 12px; background: var(--pz-surface); transition: border-color 160ms ease, background-color 160ms ease; }
+.contrib-change-card { position: relative; margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 12px 10px; border: 1px solid var(--pz-line); border-radius: 12px; background: var(--pz-surface); transition: border-color 160ms ease, background-color 160ms ease; }
 .contrib-change-card--approved { border-color: #b9d8b2; background: var(--pz-success-bg); }
 .contrib-change-card--rejected { border-color: #f1c9c4; background: var(--pz-danger-bg); }
 .contrib-change-card--rejected .contrib-change-fields { opacity: .6; }
 .contrib-change-card-head { display: flex; align-items: center; gap: 8px; }
-.contrib-action-badge { flex: none; padding: 2px 8px; border-radius: 999px; font: 500 11.5px var(--pz-sans); background: var(--pz-line-soft); color: var(--pz-ink-2); }
-.contrib-action-badge--create { background: var(--pz-success-bg); color: var(--pz-success); }
-.contrib-action-badge--update { background: var(--pz-a100); color: var(--pz-a700); }
-.contrib-action-badge--delete { background: var(--pz-danger-bg); color: var(--pz-danger); }
+/* Étiquette à cheval sur le bord haut de la carte */
+.contrib-action-badge { position: absolute; top: -9px; left: 12px; padding: 1px 8px; border-radius: 6px; font: 500 11px/16px var(--pz-sans); letter-spacing: .01em; background: var(--pz-line-soft); color: var(--pz-ink-2); box-shadow: 0 0 0 1px var(--pz-line); }
+.contrib-action-badge--create { background: var(--pz-success-bg); color: var(--pz-success); box-shadow: 0 0 0 1px #cfe3cb; }
+.contrib-action-badge--update { background: var(--pz-a100); color: var(--pz-a700); box-shadow: 0 0 0 1px #efcdbf; }
+.contrib-action-badge--delete { background: var(--pz-danger-bg); color: var(--pz-danger); box-shadow: 0 0 0 1px #f1c9c4; }
+.contrib-action-badge--conflict { background: #fff1d6; color: #7a5600; box-shadow: 0 0 0 1px #ecd29a; }
 .contrib-change-entity-name { flex: 1; min-width: 0; font: 400 16px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.contrib-conflict-badge { flex: none; padding: 2px 8px; border-radius: 999px; background: #fff1d6; color: #7a5600; font: 500 11.5px var(--pz-sans); }
 .contrib-card-decisions { display: flex; gap: 4px; flex: none; }
 .contrib-decision-icon {
   width: 32px;

frontend/src/components/navbar/ContextualNavbar.css

@@ -106,7 +106,7 @@
   min-width: 18px;
   height: 18px;
   box-sizing: border-box;
-  padding: 0 5px;
+  padding: 0 3px; /* 5 px faisait d'un chiffre seul un ovale de 20 × 18 */
   border: 2px solid #fff;
   border-radius: 999px;
   background: var(--pz-a500);

frontend/src/i18n/en/contribution.js

@@ -108,6 +108,8 @@ export default {
   'Unions': 'Couples',
   'Annotations': 'Annotations',
   'À vérifier': 'Needs checking',
+  'La fiche a changé depuis cette proposition': 'The profile has changed since this suggestion',
+  '{action}, à vérifier': '{action}, needs checking',
   'Accepter': 'Accept',
   'Refuser': 'Decline',
   'Dessin libre': 'Freehand drawing',