// FOOTPASS Messenger v2 · app shell: tab bar, accueil, liste des messages, menu latéral, agenda, appels // V2 simple : pas de rooms ni mur d'activité. Entre l'onboarding et la conversation. const { useState: useStateH, useEffect: useEffectH } = React; // ── i18n local ── const HM_T = { fr: { home: 'Accueil', messages: 'Messages', agenda: 'Agenda', calls: 'Appels', menu: 'Menu', hello: 'Bonjour, Alexandre', sub: 'Votre réseau vérifié vous attend.', todo: 'À traiter', recents: 'Conversations récentes', seeAll: 'Tout voir', search: 'Rechercher un membre, un club…', notProto: "Cette partie n'est pas couverte par ce prototype.", verified: 'Pass ID vérifié', online: 'en ligne', todayAgenda: 'Demain', thisWeek: 'Cette semaine', }, en: { home: 'Home', messages: 'Messages', agenda: 'Agenda', calls: 'Calls', menu: 'Menu', hello: 'Hello, Alexandre', sub: 'Your verified network awaits.', todo: 'To handle', recents: 'Recent conversations', seeAll: 'See all', search: 'Search a member, a club…', notProto: 'This part is not covered by this prototype.', verified: 'Pass ID verified', online: 'online', todayAgenda: 'Tomorrow', thisWeek: 'This week', }, }; const hmT = (lang, k) => (HM_T[lang] || HM_T.fr)[k] || k; // ── Icônes propres au shell (formes simples, trait 1.5) ── const HMI = { Home: ({ s = 22, c = 'currentColor' }) => ( ), Calendar: ({ s = 22, c = 'currentColor' }) => ( ), Phone: ({ s = 22, c = 'currentColor' }) => ( ), Bubble: ({ s = 22, c = 'currentColor' }) => ( ), Menu: ({ s = 22, c = 'currentColor' }) => ( ), Search: ({ s = 16, c = 'currentColor' }) => ( ), Chevron: ({ s = 14, c = 'currentColor' }) => ( ), Bell: ({ s = 20, c = 'currentColor' }) => ( ), Vault: ({ s = 18, c = 'currentColor' }) => ( ), Mandate: ({ s = 18, c = 'currentColor' }) => ( ), Gear: ({ s = 18, c = 'currentColor' }) => ( ), Help: ({ s = 18, c = 'currentColor' }) => ( ), Card: ({ s = 18, c = 'currentColor' }) => ( ), Alert: ({ s = 15, c = 'currentColor' }) => ( ), Pen: ({ s = 15, c = 'currentColor' }) => ( ), VideoCam: ({ s = 16, c = 'currentColor' }) => ( ), ArrowUR: ({ s = 13, c = 'currentColor' }) => ( ), ArrowDL: ({ s = 13, c = 'currentColor' }) => ( ), Logout: ({ s = 18, c = 'currentColor' }) => ( ), }; // ── Données des conversations : méta mutable dans v2/convos.js (FP_CONVOS), identités dans FP_PEERS ── const hmConvos = () => window.FP_CONVOS.map((m) => ({ ...FP_PEERS[m.id], ...m })); const hmBadge = () => (window.m4GlobalUnread ? window.m4GlobalUnread() : window.FP_CONVOS.filter((c) => c.unread).length); const hmBadgeLabel = (n) => (n > 99 ? '99+' : n); function HMAvatar({ c, size = 46 }) { if (c.photo) return ; return {c.initials}; } // ── Tab bar ── function FPTabBar({ active, onTab, lang }) { const t = (k) => hmT(lang, k); const badge = hmBadge(); // Présences à confirmer → badge ambre sur l'onglet Agenda const abadge = (window.FP_EVENTS || []).filter((e) => e.status === 'pending').length; const tabs = [ { id: 'agenda', label: t('agenda'), icon: HMI.Calendar, badge: abadge, amber: true }, { id: 'calls', label: t('calls'), icon: HMI.Phone }, { id: 'home', label: t('home'), icon: HMI.Home }, { id: 'messages', label: t('messages'), icon: HMI.Bubble, badge }, { id: 'menu', label: t('menu'), icon: HMI.Menu }, ]; return (
{tabs.map((tb) => ( ))}
); } // ── Toast partagé ── function useHmToast() { const [toast, setToast] = useStateH(null); const show = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2200); }; return [toast, show]; } // ── ACCUEIL ── function HMHome({ lang, onOpenChat, onTab, onOpenSub, hasUnreadNotifs }) { const t = (k) => hmT(lang, k); const recents = hmConvos().slice(0, 3); return (
FOOTPASS®

{t('hello')}

{/* Pass ID : statut compact, or · tap = carte complète + QR */} {/* À traiter */}
{t('todo')}
{/* Conversations récentes */}
{t('recents')}
{recents.map((c) => ( ))}
); } // ── MESSAGES · liste type WhatsApp : Nom – Rôle – Structure, recherche réelle + filtres ── const MSG_FILTERS_KEY = 'fp_v2_msgfilters'; const loadMsgFilters = () => { try { const v = JSON.parse(localStorage.getItem(MSG_FILTERS_KEY)); return Array.isArray(v) ? v : []; } catch (e) { return []; } }; function HMMessages({ lang, onOpenChat, onSheet }) { const t = (k) => hmT(lang, k); const [q, setQ] = useStateH(''); const [cat, setCatRaw] = useStateH('all'); // 'all' | 'role:' | '' const [sub, setSub] = useStateH(null); // contact id (sous-filtre d'un rôle) const [custom, setCustom] = useStateH(loadMsgFilters); const [fsheet, setFsheet] = useStateH(null); // null | { editing } | { editing: filter } const setCat = (k) => { setCatRaw(k); setSub(null); }; useEffectH(() => { try { localStorage.setItem(MSG_FILTERS_KEY, JSON.stringify(custom)); } catch (e) { /* ignore */ } }, [custom]); const all = hmConvos(); const norm = (s) => s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); const roleCats = msgRoleCats(all); const customWithBadge = custom.map((f) => ({ ...f, _badge: all.filter((c) => f.members.includes(c.id)).reduce((n, c) => n + (c.unread || 0), 0), })); // Liste filtrée : d'abord le filtre actif, puis la recherche par-dessus let base = all; const activeRole = roleCats.find((c) => c.key === cat); if (activeRole) { base = all.filter((c) => c.role === activeRole.role); if (sub) base = base.filter((c) => c.id === sub); } else if (cat !== 'all') { const f = custom.find((x) => x.id === cat); if (f) base = all.filter((c) => f.members.includes(c.id)); } const list = q.trim() ? base.filter((c) => norm(`${c.name} ${c.role} ${c.org}`).includes(norm(q.trim()))) : base; const saveFilter = (f) => { setCustom((arr) => { const exists = arr.some((x) => x.id === f.id); return exists ? arr.map((x) => (x.id === f.id ? f : x)) : [...arr, f]; }); setCatRaw(f.id); setSub(null); }; const deleteFilter = (id) => { setCustom((arr) => arr.filter((x) => x.id !== id)); if (cat === id) setCat('all'); }; return (

{t('messages')}

setQ(e.target.value)} placeholder={t('search')} /> {q ? ( ) : null}
setFsheet({ editing: null })} onEdit={(f) => setFsheet({ editing: f })} />
{list.map((c) => ( ))} {list.length === 0 ? (
{q.trim() ? ('Aucun membre ne correspond à « ' + q + ' ».') : 'Aucune conversation dans ce filtre.'}
) : null}
Chiffré de bout en bout · identités vérifiées PASS ID
{fsheet ? ( setFsheet(null)} onSave={saveFilter} onDelete={deleteFilter} /> ) : null}
); } // ── MENU latéral (plein écran, simple) ── function HMMenu({ lang, onOpenSub, onTab, onReplayOnboarding }) { const t = (k) => hmT(lang, k); const item = (Icon, label, sub, target, badge) => ( ); return (

{t('menu')}

{/* Profil + Pass */}
Espace de travail
{item(HMI.Card, 'Mon Pass ID', 'Carte, QR et partage', 'passid')} {window.FPStructureMenuRow ? : null} {item(HMI.Vault, 'Coffre-fort', 'Documents chiffrés', 'vault', ((window.CF_DOCS_INIT || []).concat(window.CF3_DOCS_EXTRA || []).filter((d) => d.state === 'sign' || d.state === 'review' || d.request).length) || null)} {item(HMI.Mandate, 'Autorisations', 'Représentation, délégations, accès', 'mandates', ((window.FP_MANDATES || []).filter((m) => m.status === 'pending').length) || null)} {item(HMI.Calendar, 'Agenda', 'Rendez-vous et échéances', () => onTab('agenda'), ((window.FP_EVENTS || []).filter((e) => e.status !== 'done').length) || null)}
Compte
{item(HMI.Bell, 'Notifications', null, 'notifs')} {item(HMI.Gear, 'Réglages', 'Sécurité, langue, confidentialité', 'settings')} {item(HMI.Help, 'Aide & support', null, 'help')} {window.StI ? item(window.StI.Info, 'À propos', 'Version, sécurité, mentions légales', 'about') : null}
FOOTPASS® V2.2
); } // ── AGENDA · événements vivants : détail, confirmation, création ── function HMAgenda({ lang, events, onSheet }) { const t = (k) => hmT(lang, k); const section = (key, label) => { const list = events.filter((e) => e.sect === key); if (!list.length) return null; return (
{label}
{list.map((e) => ( ))}
); }; return (

{t('agenda')}

{section('tomorrow', t('todayAgenda'))} {section('week', t('thisWeek'))}
); } // ── APPELS (journal · chaque ligne rappelle vraiment) ── function HMCalls({ lang, onSheet, onVoice, onVideo }) { const t = (k) => hmT(lang, k); const LOGS = [ { id: 1, pid: 'lucas', meta: 'Appel vocal · 24:12', time: '12 mars', dir: 'out' }, { id: 2, pid: 'karim', meta: 'Appel vidéo · 08:47', time: 'Hier', dir: 'in', video: true }, { id: 3, pid: 'amadou', meta: 'Appel manqué', time: 'Hier', dir: 'missed' }, { id: 4, pid: 'sira', meta: 'Appel vocal · 03:05', time: 'Lundi', dir: 'out' }, { id: 5, pid: 'david', meta: 'Appel vidéo · 31:08', time: '28 mai', dir: 'out', video: true }, { id: 6, pid: 'mathis', meta: 'Appel vocal · 06:51', time: '17 déc', dir: 'in' }, { id: 7, pid: 'marco', meta: 'Appel vocal · 12:44', time: '14 févr', dir: 'in' }, ]; return (

{t('calls')}

{LOGS.map((l) => { const p = FP_PEERS[l.pid]; return (
{window.fpUpperLast(p.name)} {l.dir === 'in' ? : l.dir === 'missed' ? : } {l.meta} · {l.time}
); })}
Appels chiffrés de bout en bout
); } // ── SHELL : page active + tab bar + sous-pages + feuilles ── function FPShell({ dark, lang, tab, onTab, onOpenChat, onVoice, onVideo, onRoomCall, onReplayOnboarding, appearance }) { const [toast, showToast] = useHmToast(); const [sub, setSub] = useStateH(null); // 'passid' | 'vault' | 'mandates' | 'settings' | 'notifs' | 'help' const [sheet, setSheet] = useStateH(null); // { kind: 'newmsg' | 'newcall' | 'event' | 'newevent', ev? } // Stores module (convos.js) : l'état survit aux démontages du shell const [notifs, setNotifsRaw] = useStateH(window.FP_NOTIFS); const setNotifs = (next) => { window.FP_NOTIFS = next; setNotifsRaw(next); }; const [events, setEventsRaw] = useStateH(window.FP_EVENTS); const setEvents = (next) => { window.FP_EVENTS = next; setEventsRaw(next); }; const openSub = (id) => { // Les notifications glissent en feuille au-dessus de l'écran courant · on ne quitte pas l'app ; // 'contacts' ouvre l'annuaire vérifié (même feuille que Nouveau message). if (id === 'notifs') { setSheet({ kind: 'notifs' }); return; } if (id === 'contacts') { setSheet({ kind: 'newmsg' }); return; } setSub(id); }; const closeSub = () => setSub(null); // Couche d'états système (forcée via Tweaks) · s'applique à l'écran actif, sans le modifier const [sysState, setSysState] = useStateH('none'); useEffectH(() => { const on = (e) => setSysState(((e && e.detail) || {}).state || 'none'); const onNav = (e) => { const d = (e && e.detail) || {}; if (d.sub) setSub(d.sub); }; window.addEventListener('fp:sys', on); window.addEventListener('fp:opensub', onNav); return () => { window.removeEventListener('fp:sys', on); window.removeEventListener('fp:opensub', onNav); }; }, []); const clearSys = () => window.dispatchEvent(new CustomEvent('fp:sys', { detail: { state: 'none', source: 'clear' } })); const sysFlow = (k) => { if (k === 'newmsg' || k === 'newcall' || k === 'newevent') setSheet({ kind: k }); else if (k === 'mandates-new') openSub('mandates-new'); }; // Audit R-11 · un invité certifié = notification + toast (la récompense réelle de la boucle virale) useEffectH(() => { const onGrowth = (e) => { const d = (e && e.detail) || {}; // Ouverture d'un vrai flux depuis la checklist / les états vides (audit R-02, R-03) if (d.kind === 'sheet' && d.sheet) { setSheet({ kind: d.sheet, name: d.name, mode: d.mode }); return; } if (d.kind !== 'joined') return; const n = { id: 'nj' + Date.now(), kind: 'sec', title: 'Théo Lemaire a rejoint FOOTPASS', sub: 'Via votre lien d\u2019invitation · Pass ID vérifié', time: TX('À l\u2019instant'), read: false }; window.FP_NOTIFS = [n, ...window.FP_NOTIFS]; setNotifsRaw(window.FP_NOTIFS); showToast(TX('Théo Lemaire a rejoint votre réseau vérifié')); }; window.addEventListener('fp:growth', onGrowth); return () => window.removeEventListener('fp:growth', onGrowth); }, []); const page = (() => { switch (tab) { case 'messages': { const MsgScreen = window.HMMessagesM4 || HMMessages; return ; } case 'menu': return ; case 'agenda': { const Ag = window.HMAgendaV2 || HMAgenda; return ; } case 'calls': { const Cl = window.HMCallsV2 || HMCalls; return setEvents([...events, ev])} onRemoveEvent={(id) => setEvents(events.filter((e) => e.id !== id))} />; } default: { // Accueil : v3 (refonte) par défaut · l'ancien accueil reste comparable via le tweak « Version » const homeV = (() => { try { return localStorage.getItem('fp_home_v') || 'v3'; } catch (e) { return 'v3'; } })(); const Home = (homeV === 'v2' ? window.HMHomeV2 : window.HMHomeV3) || window.HMHomeV2 || HMHome; return !n.read)} events={events} onOpenEvent={(ev) => setSheet({ kind: 'event', ev })} onConfirmEvent={(id) => { setEvents(events.map((e) => (e.id === id ? { ...e, status: 'ok' } : e))); showToast((window.TX || ((s) => s))('Présence confirmée')); }} />; } } })(); const subEl = (() => { switch (sub) { case 'passid': return ; case 'vault': return ; case 'mandates': return ; case 'mandates-new': return ; case 'stpanel': { const S = window.StructurePanelPage; return S ? : null; } case 'settings': return ; case 'help': return ; case 'about': { const A = window.AboutPage; return A ? openSub('states')} /> : null; } case 'states': { const G = window.StatesGalleryPage; return G ? : null; } case 'passi': return setEvents([...events, ev])} onConfirmEvent={(id) => setEvents(events.map((e) => (e.id === id ? { ...e, status: 'ok' } : e)))} />; default: return null; } })(); const sheetEl = (() => { if (!sheet) return null; const close = () => setSheet(null); switch (sheet.kind) { case 'newmsg': return ; case 'notifs': return ; case 'invite': return window.InviteSheet ? : null; case 'sttunnel': case 'structure': { // Audit structure P0-1 · « créer » ouvre le tunnel plein écran ; la feuille garde rejoindre / gérer if ((sheet.kind === 'sttunnel' || sheet.mode === 'create') && window.StructureTunnel) return ; return window.StructureSheet ? : null; } case 'newcall': return ; case 'newevent': { const NE = window.NewEventSheetV2 || NewEventSheet; return setEvents([...events, ev])} />; } case 'event': { const ES = window.EventSheetV2 || EventSheet; return ( setEvents(events.map((e) => (e.id === id ? { ...e, status: 'ok' } : e)))} onRemove={(id) => setEvents(events.filter((e) => e.id !== id))} /> ); } default: return null; } })(); return (
{page} { closeSub(); onTab(id); }} lang={lang} /> {subEl} {window.FPSysLayer ? : null} {sheetEl} {toast ?
{toast}
: null}
); } Object.assign(window, { FPShell, FPTabBar, HMI });