/* global React, Icons, Button, Card, Badge, Switch, Input, cn, useState, useEffect, useRef, useSpaces, useSpace, spaceById, ALL_CALENDAR_NAMES, ALL_BOARD_NAMES, useShares, SHARE_MODULES, shareCountForSpace */ /* ============================================================ ESPACES — Gérer / Créer (modal) (P20) Liste à gauche, formulaire à droite. "Tous" sélectionnable mais non modifiable (filet de sécurité). Suppression d'un espace sur mesure → ses éléments retombent dans "Tous" (jamais de perte). Réutilise les groupes réels (calendriers / tableaux de tâches) + un IconPicker et un ColorPicker compacts cohérents avec la marque. ============================================================ */ const SPACE_ICON_SET = ["Briefcase", "Heart", "GraduationCap", "Layers", "Globe", "Home2", "Plane", "Users", "Target", "Star", "Flame", "Activity", "Book", "Compass"]; const SPACE_COLOR_SET = ["263 70% 60%", "217 91% 60%", "330 80% 60%", "38 92% 55%", "142 70% 50%", "180 65% 50%", "0 84% 60%", "20 90% 55%", "280 60% 65%"]; const SPACE_CALENDARS = ["Work", "Meetings", "Projects", "Personal", "Sport", "Family", "Léa", "Tom", "Mom"]; const SPACE_BOARDS = ["Courses", "Internships & jobs", "Personal"]; /* ---- color helpers (HSL token string <-> hex for the native picker) ---- */ function hslStrToHex(str) { const m = String(str || "").trim().match(/^([\d.]+)\s+([\d.]+)%\s+([\d.]+)%$/); if (!m) return "#8b5cf6"; const h = +m[1], s = +m[2] / 100, l = +m[3] / 100; const a = s * Math.min(l, 1 - l); const f = (n) => { const k = (n + h / 30) % 12; return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1))); }; const toHex = (x) => Math.round(x * 255).toString(16).padStart(2, "0"); return "#" + toHex(f(0)) + toHex(f(8)) + toHex(f(4)); } function hexToHslStr(hex) { const r = parseInt(hex.slice(1, 3), 16) / 255, g = parseInt(hex.slice(3, 5), 16) / 255, b = parseInt(hex.slice(5, 7), 16) / 255; const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min; let h = 0, s = 0; const l = (max + min) / 2; if (d) { s = d / (1 - Math.abs(2 * l - 1)); if (max === r) h = ((g - b) / d) % 6; else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; h *= 60; if (h < 0) h += 360; } return `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`; } const ARRIVAL_VIEWS = [ { id: "home", label: "Home" }, { id: "calendar", label: "Calendar" }, { id: "daily-planning", label: "Planning" }, { id: "planner", label: "Focus" }, { id: "tasks", label: "Tasks" }, { id: "dashboard", label: "Analytics dashboard" }, ]; function blankDraft() { return { name: "", icon: "Layers", color: SPACE_COLOR_SET[0], arrivalView: "home", hours: "All hours", content: { calendars: [], boards: [] }, }; } function SpacesModal() { const [spaces, ops] = useSpaces(); const [, setSpace] = useSpace(); const [open, setOpen] = useState(false); const [mode, setMode] = useState("manage"); // "manage" | "create" const [selectedId, setSelectedId] = useState("all"); const [draft, setDraft] = useState(blankDraft()); const [tab, setTab] = useState("details"); // "details" | "share" // Open via window.__dpmOpenSpaces(mode, spaceId) useEffect(() => { const handler = (e) => { const { mode: m, spaceId } = e.detail || {}; setOpen(true); if (m === "create") { setMode("create"); setDraft(blankDraft()); setTab("details"); } else { setMode("manage"); const id = spaceId || window.__dpmSpace || "all"; setSelectedId(id); setTab(m === "share" ? "share" : "details"); const sp = spaceById(id); setDraft({ ...sp, content: { calendars: [...(sp.content?.calendars || [])], boards: [...(sp.content?.boards || [])] } }); } }; window.__dpmOpenSpaces = (m, spaceId) => window.dispatchEvent(new CustomEvent("dpm-spaces-modal", { detail: { mode: m, spaceId } })); window.addEventListener("dpm-spaces-modal", handler); return () => window.removeEventListener("dpm-spaces-modal", handler); }, []); useEffect(() => { const k = (e) => { if (e.key === "Escape") setOpen(false); }; if (open) document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, [open]); if (!open) return null; const isCreate = mode === "create"; const selected = isCreate ? null : spaceById(selectedId); const isAll = !isCreate && selectedId === "all"; const selectSpace = (id) => { setMode("manage"); setSelectedId(id); setTab("details"); const sp = spaceById(id); setDraft({ ...sp, content: { calendars: [...(sp.content?.calendars || [])], boards: [...(sp.content?.boards || [])] } }); }; const startCreate = () => { setMode("create"); setDraft(blankDraft()); }; const toggleContent = (kind, name) => setDraft(d => { const arr = d.content[kind] || []; const next = arr.includes(name) ? arr.filter(n => n !== name) : [...arr, name]; return { ...d, content: { ...d.content, [kind]: next } }; }); const save = () => { if (isCreate) { const id = ops.add(draft); setSpace(id); setOpen(false); } else if (!isAll) { ops.update(selectedId, draft); setOpen(false); } }; const del = () => { if (isAll || isCreate) return; if (window.confirm(`Delete the space “${selected.name}”? Its items will be reassigned to “All” — no data is lost.`)) { ops.remove(selectedId); setOpen(false); } }; const IconPreview = Icons[draft.icon] || Icons.Layers; const contentTotal = (draft.content.calendars?.length || 0) + (draft.content.boards?.length || 0); return (
setOpen(false)} />
{/* Header */}

Manage spaces

Contexts that scope the whole app

{/* Body */}
{/* List */}
{spaces.map(s => { const IconC = Icons[s.icon] || Icons.Layers; const active = !isCreate && selectedId === s.id; return ( ); })}
{/* Form / detail */}
{isAll ? ( ) : ( <> {!isCreate && (
setTab("details")} icon={Icons.Settings} label="Details" /> setTab("share")} icon={Icons.Users} label="Sharing" badge={shareCountForSpace(selectedId) || null} color={draft.color} />
)} {(isCreate || tab === "details") ? (
{/* Preview + Name */}
setDraft(d => ({ ...d, name: e.target.value }))} placeholder="e.g. Client X, Family, Studies…" />
{/* Icon */}
{SPACE_ICON_SET.map(name => { const IconC = Icons[name] || Icons.Layers; const on = draft.icon === name; return ( ); })}
{/* Color */} setDraft(d => ({ ...d, color: c }))} /> {/* Content */}
toggleContent("calendars", n)} color={draft.color} /> toggleContent("boards", n)} color={draft.color} />
Habits, goals and rules inherit the space when created — each item can be reassigned individually.
{/* Defaults */}
) : ( )} )}
{/* Footer */} {!isAll && (isCreate || tab === "details") && (
{!isCreate ? : The new space starts empty — you'll attach content to it.}
)} {!isAll && !isCreate && tab === "share" && (
Changes save automatically. Wellbeing stays private unless shared explicitly.
)}
); } function ColorSwatches({ value, onChange }) { const isPreset = SPACE_COLOR_SET.includes(value); return (
{SPACE_COLOR_SET.map(c => { const on = value === c; return ( ); })} {/* Custom color — native picker */}
{hslStrToHex(value)} {!isPreset && · custom}
); } function Field({ label, sub, children }) { return (
{label}
{sub &&

{sub}

} {children}
); } function ContentGroup({ title, names, selected, onToggle, color }) { return (
{title}
{names.map(n => { const on = selected.includes(n); return ( ); })}
); } function AllSpaceNote() { return (

“All” is automatic

It's the union view of all your spaces — your safety net. It has no content or settings of its own: it shows everything, including items not yet filed.

Non-deletable by design: as long as “All” exists, no task can “disappear” into the wrong space.
); } if (typeof window !== "undefined") { Object.assign(window, { SpacesModal }); } /* ============================================================ PARTAGE — UI (P25). Tabs + members accordion with per-module Read/Edit rights. Wellbeing (Habits) is private by default and shows a confidentiality warning when shared. ============================================================ */ function ShareTab({ active, onClick, icon: Icon, label, badge, color }) { return ( ); } const ROLE_LABEL = { owner: "Owner", member: "Member", pending: "Pending" }; function roleStyle(role) { if (role === "owner") return { background: "hsl(263 70% 60% / 0.18)", color: "hsl(263 70% 82%)" }; if (role === "pending") return { background: "hsl(38 92% 55% / 0.16)", color: "hsl(38 92% 66%)" }; return { background: "hsl(217 91% 60% / 0.16)", color: "hsl(217 91% 74%)" }; } function memberSummary(m) { if (m.role === "owner") return "Full access · all modules"; const n = SHARE_MODULES.filter((mod) => m.perms[mod.id] && m.perms[mod.id].on).length; return n === 0 ? "No access yet" : "Access to " + n + " module" + (n > 1 ? "s" : ""); } function SharingPanel({ spaceId, space }) { const [members, ops] = useShares(spaceId); const [email, setEmail] = useState(""); const [expandedId, setExpandedId] = useState(() => { const firstShared = members.find((m) => m.role !== "owner"); return firstShared ? firstShared.id : null; }); const [err, setErr] = useState(false); const accent = space?.color || "263 70% 60%"; const submitInvite = () => { const e = email.trim(); if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(e)) { setErr(true); setTimeout(() => setErr(false), 1400); return; } ops.invite(e); setEmail(""); }; return (
{/* Invite */}
Invite to this space
setEmail(e.target.value)} placeholder="email@example.com" onKeyDown={(e) => { if (e.key === "Enter") submitInvite(); }} style={err ? { borderColor: "hsl(0 84% 60%)" } : {}} />
Default level: Read on Calendars + Tasks.
{/* Members */}
{members.map((m) => { const expanded = expandedId === m.id; const isOwner = m.role === "owner"; return (
{!isOwner && expanded && (
{m.role === "pending" && (
Invitation sent. Rights below apply once accepted.
)}
Access by module
{SHARE_MODULES.map((mod) => ( ops.toggleModule(m.id, mod.id)} onLevel={(lvl) => ops.setLevel(m.id, mod.id, lvl)} /> ))}
Private modules stay off until shared.
)}
); })}
{/* Privacy reminder */}
Wellbeing is private by default. Habits, journal and energy are never shared automatically. Sharing them is explicit, granular and revocable — in line with Law 25 / PIPEDA / GDPR.
); } function ModuleRow({ mod, perm, member, accent, onToggle, onLevel }) { const on = perm.on; const priv = mod.private; const IconC = Icons[mod.icon] || Icons.Layers; return (
{mod.name} {priv && private}
{on ? (perm.level === "edit" ? "Edit" : "Read") : (priv ? "Not shared" : "No access")}
{/* Read / Edit segmented */}
{["read", "edit"].map((lvl) => ( ))}
{priv && on && (
Wellbeing data shared. {(member.name || "").split(" ")[0]} will see your habits. Reversible anytime.
)}
); }