Files
parenthese/frontend/src/components/EditSessionBar.jsx
T
IliesAllaliandClaude Opus 5.5 6f28918dde Interface en anglais : traduction, bascule FR · EN, accents corrigés
Module frontend/src/i18n : le texte français sert de clé, dictionnaires anglais
par zone, langue du navigateur puis choix mémorisé, ?lang=en pour forcer.
Bascule dans le menu du compte, la pastille visiteur, le menu Plus, l'écran
d'accès et la connexion. Démo traduite (noms et lieux gardés). Liens d'aide et
de vie privée selon la langue. Textes français sans accents corrigés.
Test : chaque texte passé à t() a sa traduction.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 16:01:15 +02:00

55 lines
1.8 KiB
React

import { useMemo } from 'react'
import { X } from 'lucide-react'
import './EditModeOverlay.css'
import { t } from '../i18n/index.js'
function EditSessionBar({ active, hasDraft, role = 'contributor', onDeactivate, onSubmit }) {
const isAdmin = role === 'admin'
const borderClass = useMemo(() => (
`edit-mode-border ${isAdmin ? 'edit-mode-border--admin' : 'edit-mode-border--contributor'}`
), [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')
// La famille ne voit le bouton d'envoi que lorsqu'il y a quelque chose à envoyer
const showSubmit = Boolean(onSubmit) && (isAdmin || hasDraft)
if (!active) return null
return (
<>
<div className={borderClass} aria-hidden="true" />
<div className={`edit-mode-toast ${isAdmin ? 'edit-mode-toast--admin' : ''}`} role="status" aria-live="polite">
<span className="edit-mode-toast-dot" aria-hidden="true" />
<span className="edit-mode-toast-text">{toastLabel}</span>
{showSubmit && (
<button
type="button"
className="pz-btn pz-btn--primary pz-btn--sm edit-mode-submit"
onClick={onSubmit}
disabled={!hasDraft}
title={hasDraft ? submitLabel : t("Aucune modification à envoyer pour l'instant")}
>
{submitLabel}
</button>
)}
<button
type="button"
className="pz-btn pz-btn--ghost pz-btn--icon edit-mode-toast-close"
onClick={onDeactivate}
aria-label={t('Quitter le mode édition')}
>
<X size={17} strokeWidth={2} />
</button>
</div>
</>
)
}
export default EditSessionBar