);
}
// ─── Coque ordinateur ─────────────────────────────────────────────
// Hauteur fixe de 100dvh : seule la zone .scroll de chaque page défile, le
// menu latéral et l'en-tête restent visibles. Le repli du menu est une
// préférence de l'appareil (localStorage).
// Lien « Aller au contenu » : le focus va sur la zone de contenu sans changer
// l'adresse (les ancres #cgu, #cgv… sont lues par App).
function skipToContent(e) {
if (e && e.preventDefault) e.preventDefault();
const m = document.getElementById('contenu');
if (m && typeof m.focus === 'function') m.focus();
}
function DesktopScreen({ children, active, onChange, journalingOpen, setJournalingOpen, user, displayName }) {
const [collapsed, setCollapsed] = React.useState(sidebarReadCollapsed);
React.useEffect(() => {
try {
if (collapsed) localStorage.setItem(SIDEBAR_PREF_KEY, 'collapsed');
else localStorage.removeItem(SIDEBAR_PREF_KEY);
} catch (e) {}
}, [collapsed]);
const toggleSidebar = React.useCallback(() => setCollapsed(c => !c), []);
const shell = React.useMemo(() => ({ active, collapsed, toggleSidebar }), [active, collapsed, toggleSidebar]);
return (
{/* Lien d'évitement : premier élément atteint au clavier, visible
seulement quand il a le focus (.skip-link, index.html). Il saute le
menu et pose le focus sur la zone de contenu (#contenu). */}
Aller au contenu{children}
);
}
// ─── Barre du bas mobile ──────────────────────────────────────────
// Barre en flux (bas du shell flex), safe-area iOS gérée via env().
// Libellés courts de NAV_LABELS. Les routes absentes de la barre (dashboard,
// daily, weekly, strategy, econ, routines, fondamental, data) sont joignables
// via le hub « Plus » : on surligne alors l'onglet Plus pour garder un état
// actif cohérent.
function BottomNav({ active, onChange }) {
const current = NAV_BOTTOM.includes(active) ? active : 'settings';
return (
);
}
// Shell mobile : la page occupe le viewport réel (aucune barre de statut
// simulée, aucun cadre d'appareil). Colonne flex plein écran : zone de
// contenu scrollable + BottomNav en flux. Safe-areas iOS via env() —
// viewport-fit=cover est déjà posé dans index.html.
function MobileScreen({ children, active, onChange, showNav = true }) {
// Le conteneur .scroll est un noeud DOM unique partagé entre toutes les
// routes : on remet le scroll en haut à chaque changement d'onglet. C'est
// aussi le repère de l'app sur mobile (comme DesktopScreen).
const scrollRef = React.useRef(null);
React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [active]);
return (
{children}
{showNav && }
);
}
// ─── Modales : comportement commun (charte §8) ────────────────────
// useModalBehavior({ open, onRequestClose, isDirty, dialogRef, labelledBy })
// sert à TOUTES les modales et feuilles :
// const modal = useModalBehavior({ open, onRequestClose: onClose, isDirty });
// if (!open) return null;
//
//
//
// …
//
//
//
// - Le fond ne ferme que sur mousedown hors de la carte : une sélection de
// texte qui se termine sur le fond ne ferme plus rien. Pas d'onClick sur le
// fond ni de stopPropagation sur la carte. Seul le bouton principal compte
// (comme l'ancien onClick) : un clic droit, un clic molette ou un Ctrl+clic
// (clic secondaire sur Mac) sur le fond ne ferment rien. Un toucher émet un
// mousedown de bouton 0 : rien ne change au doigt.
// - Échap ferme la modale du dessus seulement (pile).
// - isDirty : croix, fond, Échap et requestClose affichent d'abord
// « Abandonner ta saisie ? » dans la modale (ModalDiscardConfirm).
// - Focus : premier champ à l'ouverture (la carte elle-même sur écran tactile,
// pour ne pas ouvrir le clavier), piégé dans la modale, rendu au
// déclencheur à la fermeture.
// Après un enregistrement réussi, la modale appelle directement son onClose
// (et non requestClose) : il n'y a plus rien à abandonner.
const MODAL_STACK = [];
const MODAL_FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
const MODAL_FIELDS = 'input:not([disabled]):not([type="hidden"]):not([readonly]), select:not([disabled]), textarea:not([disabled]):not([readonly])';
const MODAL_DISCARD_QUESTION = 'Abandonner ta saisie ?';
function modalIsVisible(el) { return el.getClientRects().length > 0; }
function useModalBehavior({ open, onRequestClose, isDirty = false, dialogRef, labelledBy } = {}) {
const ownRef = React.useRef(null);
const ref = dialogRef || ownRef;
const refHolder = React.useRef(ref);
refHolder.current = ref;
const closeRef = React.useRef(onRequestClose);
closeRef.current = onRequestClose;
const dirtyRef = React.useRef(isDirty);
dirtyRef.current = isDirty;
const [confirmDiscard, setConfirmDiscard] = React.useState(false);
const confirmRef = React.useRef(false);
confirmRef.current = confirmDiscard;
const focusBeforeConfirm = React.useRef(null);
// Déclencheur mémorisé au rendu d'ouverture, avant qu'un autoFocus de la
// modale ne déplace le focus.
const openerRef = React.useRef(null);
const wasOpen = React.useRef(false);
if (open && !wasOpen.current) openerRef.current = document.activeElement;
wasOpen.current = !!open;
const discard = React.useCallback(() => {
confirmRef.current = false;
setConfirmDiscard(false);
if (closeRef.current) closeRef.current();
}, []);
const requestClose = React.useCallback(() => {
if (confirmRef.current) return; // la question est déjà affichée
if (dirtyRef.current) {
focusBeforeConfirm.current = document.activeElement;
confirmRef.current = true;
setConfirmDiscard(true);
return;
}
if (closeRef.current) closeRef.current();
}, []);
const keepEditing = React.useCallback(() => {
confirmRef.current = false;
setConfirmDiscard(false);
const back = focusBeforeConfirm.current;
focusBeforeConfirm.current = null;
requestAnimationFrame(() => {
const box = refHolder.current && refHolder.current.current;
if (!box) return;
if (back && back.isConnected && box.contains(back)) back.focus({ preventScroll: true });
else box.focus({ preventScroll: true });
});
}, []);
React.useEffect(() => {
if (!open) {
confirmRef.current = false;
setConfirmDiscard(false);
return undefined;
}
const token = {};
MODAL_STACK.push(token);
const opener = openerRef.current;
const box = () => refHolder.current && refHolder.current.current;
const focusables = () => {
const n = box();
return n ? Array.from(n.querySelectorAll(MODAL_FOCUSABLE)).filter(modalIsVisible) : [];
};
const raf = requestAnimationFrame(() => {
const n = box();
if (!n || n.contains(document.activeElement)) return; // autoFocus de la modale respecté
let coarse = false;
try { coarse = window.matchMedia('(pointer: coarse)').matches; } catch (e) {}
const field = coarse ? null : Array.from(n.querySelectorAll(MODAL_FIELDS)).find(modalIsVisible);
const target = field || (coarse ? n : focusables()[0]) || n;
target.focus({ preventScroll: true });
});
const onKey = (e) => {
if (MODAL_STACK[MODAL_STACK.length - 1] !== token) return;
if (e.key === 'Escape' || e.key === 'Esc') {
if (e.defaultPrevented || e.isComposing) return;
e.preventDefault();
if (confirmRef.current) keepEditing();
else requestClose();
return;
}
if (e.key !== 'Tab') return;
const n = box();
if (!n) return;
const list = focusables();
const cur = document.activeElement;
if (!list.length) { e.preventDefault(); n.focus({ preventScroll: true }); return; }
const first = list[0];
const last = list[list.length - 1];
if (!n.contains(cur)) { e.preventDefault(); (e.shiftKey ? last : first).focus(); return; }
if (e.shiftKey && (cur === first || cur === n)) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && cur === last) { e.preventDefault(); first.focus(); }
};
document.addEventListener('keydown', onKey);
return () => {
cancelAnimationFrame(raf);
document.removeEventListener('keydown', onKey);
const i = MODAL_STACK.indexOf(token);
if (i >= 0) MODAL_STACK.splice(i, 1);
// Focus rendu au déclencheur, sauf si l'utilisateur est déjà ailleurs.
const n = box();
const cur = document.activeElement;
const lost = !cur || cur === document.body || !cur.isConnected || (n && n.contains(cur));
if (lost && opener && opener !== document.body && opener.isConnected
&& typeof opener.focus === 'function' && !(n && n.contains(opener))) {
opener.focus({ preventScroll: true });
}
};
}, [open, requestClose, keepEditing]);
return {
requestClose,
backdropProps: { onMouseDown: (e) => { if (e.button === 0 && !e.ctrlKey && e.target === e.currentTarget) requestClose(); } },
dialogProps: { ref, role: 'dialog', 'aria-modal': 'true', tabIndex: -1, 'aria-labelledby': labelledBy },
dialogRef: ref,
confirmDiscard,
keepEditing,
discard,
};
}
// Confirmation d'abandon d'une saisie, affichée DANS la modale (jamais
// window.confirm). Ne rend rien tant que la question n'est pas posée.
function ModalDiscardConfirm({ modal, detail = 'Ce que tu as saisi ne sera pas enregistré.', style }) {
if (!modal || !modal.confirmDiscard) return null;
return (
{MODAL_DISCARD_QUESTION}
{detail &&
{detail}
}
);
}
// Conteneur commun des pages de contenu (ordinateur) : même largeur maximale et
// même alignement (centré) partout, pour que les cartes ne changent ni de largeur
// ni de position d'une page à l'autre. Les pages formulaires (Réglages, Données)
// gardent leur colonne de 720 px.
const PAGE_MAX_W = 1400;
const PAGE_BODY = { maxWidth: PAGE_MAX_W, width: '100%', margin: '0 auto', boxSizing: 'border-box' };
// ─── État vide partagé (charte §7) ───────────────────────────────────
// UN seul format pour tous les écrans : icône, titre gras, une phrase, une
// action principale (bleue) et, au besoin, une action secondaire.
// icon élément d'icône (Ico.x), agrandi à 28 px
// primary { label, onClick, ico } — bouton bleu
// secondary { label, onClick, ico } — bouton neutre
// compact marges réduites (mobile, intérieur d'une carte déjà titrée)
function EmptyState({ icon, title, text, primary, secondary, compact = false, style }) {
return (
);
}
// ─── Panneaux des onglets inactifs ────────────────────────────────
// Chaque onglet de SegmentedTabs (idPrefix) désigne son panneau par
// aria-controls. Quand un écran ne dessine que le panneau de l'onglet choisi,
// pose à côté les panneaux des autres
// onglets, vides et masqués (hidden) : aucune référence ne pointe dans le vide
// (même convention que la fenêtre « Ajouter des trades », où les trois
// panneaux existent et un seul est visible).
function TabPanelStubs({ idPrefix, options, value }) {
if (!idPrefix || !Array.isArray(options)) return null;
return options.filter(o => o && o.id !== value).map(o => (
));
}
// ─── Titre de carte ───────────────────────────────────────────────
// Agenda : titre de section d'un écran, toujours un h2
// (le h1 est le titre de l'écran : PageHeader sur ordinateur, titre de page sur
// mobile). Mêmes mesures que les anciens titres en ; `style` les
// surcharge au besoin (taille, couleur, marge), `id` sert aux aria-labelledby.
function CardTitle({ children, style, id, className }) {
return