/* global React, ReactDOM, useState, useEffect, Sidebar, RightSidebar, defaultNavIdForRoute, TaskModal, LandingPage, LoginPage, SignupPage, OnboardingPage, HomePage, DailyPlanningPage, PlannerPage, CalendarPage, TasksPage, MatrixPage, HabitsPage, GoalsPage, DashboardPage, SettingsPage, RulesPage, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect, cn, useVif, SpaceTitleBar, useCurrentSpace, CommandPalette, CommandTrigger, ToastHost, SyncCenterPage, AIPlanningPage, AutomationsBuilderPage, CollaborationPage, PrivacyPage, BillingPage, NotificationsPage, QuickCreateHost, OfflineBanner, AppErrorBoundary, Icons, Logo */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "lang": "en", "sidebarCollapsed": false, "rightSidebarCollapsed": false, "emptyState": false, "viewport": "desktop" }/*EDITMODE-END*/; const PAGES = [ { id: "landing", label: "Landing", chrome: false }, { id: "login", label: "Login", chrome: false }, { id: "signup", label: "Signup", chrome: false }, { id: "onboarding", label: "Onboarding", chrome: false }, { id: "home", label: "Home", chrome: true, screen: "04 Home" }, { id: "planner", label: "Planner", chrome: true, screen: "11 Planner" }, { id: "daily-planning", label: "Daily planning", chrome: true, screen: "10 Daily Planning" }, { id: "calendar", label: "Calendar", chrome: true, screen: "05 Calendar", fullbleed: true }, { id: "tasks", label: "Tasks", chrome: true, screen: "06 Tasks" }, { id: "matrix", label: "Prioritization", chrome: true, screen: "12 Matrix" }, { id: "habits", label: "Habits", chrome: true, screen: "07 Habits" }, { id: "goals", label: "Goals", chrome: true, screen: "08 Goals" }, { id: "dashboard", label: "Analytics dashboard", chrome: true, screen: "09 Dashboard" }, { id: "rules", label: "Rules", chrome: true, screen: "Rules" }, { id: "sync", label: "Sync Center", chrome: true, screen: "Sync Center" }, { id: "ai-planning", label: "AI Planning", chrome: true, screen: "AI Planning" }, { id: "automations", label: "Automations", chrome: true, screen: "Automations" }, { id: "collaboration", label: "Collaboration", chrome: true, screen: "Collaboration" }, { id: "notifications", label: "Notifications", chrome: true, screen: "Notifications" }, { id: "billing", label: "Plan & Billing", chrome: true, screen: "Billing" }, { id: "privacy", label: "Data & Privacy", chrome: true, screen: "Privacy" }, { id: "settings", label: "Settings", chrome: true, screen: "13 Settings" }, { id: "resources", label: "Help & Resources", chrome: true, screen: "P19 Resources" }, ]; // Global "open task modal" context (poor man's) const TaskModalCtx = React.createContext({ open: () => {} }); function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [route, _setRoute] = useState("landing"); const [navId, setNavId] = useState("main:home"); const [taskOpen, setTaskOpen] = useState(false); // setRoute that also resolves navId based on the route when called externally const setRoute = (r) => { _setRoute(r); setNavId(defaultNavIdForRoute(r)); }; // Apply theme to useEffect(() => { const root = document.documentElement; // Suppress color/background transitions for one frame during the theme // swap. Without this, the many `transition-colors` elements animate their // inherited color + background from the old theme's values, and that // transition can latch at its start frame — leaving dark text/surfaces // stranded over a light page (white-on-white text, black cards). We let // the new theme paint instantly, then restore transitions next frame. const killer = document.createElement("style"); killer.textContent = "*,*::before,*::after{transition:none !important;}"; document.head.appendChild(killer); root.classList.toggle("dark", t.theme === "dark"); root.classList.toggle("light", t.theme === "light"); // Re-derive the accent's lightness for the new theme (keeps fills AA). window.applyAccent?.(window.__dpmAccent || "violet"); // Force a reflow so the no-transition state is committed before restore. void document.body.offsetHeight; const raf = requestAnimationFrame(() => { requestAnimationFrame(() => killer.remove()); }); return () => { cancelAnimationFrame(raf); killer.remove(); }; }, [t.theme]); // Broadcast lang to any component using useT() / useLang(). useEffect(() => { window.__dpmLang = t.lang; window.dispatchEvent(new CustomEvent("dpm-lang-change", { detail: t.lang })); }, [t.lang]); // Global theme toggle for the command palette (⌘K → "Toggle dark / light"). useEffect(() => { window.__dpmToggleTheme = () => setTweak("theme", t.theme === "dark" ? "light" : "dark"); }, [t.theme]); // Tour route bridge — lets window.__dpmTour navigate + deep-link resources. useEffect(() => { window.__dpmNavigate = (r) => setRoute(r); window.__dpmOpenResources = (moduleId) => { setRoute("resources"); if (moduleId) { window.__dpmResTarget = moduleId; window.dispatchEvent(new CustomEvent("dpm-res-deeplink", { detail: moduleId })); } }; }, []); // Auto-launch the overview ONCE, just after onboarding (first visit on Home). useEffect(() => { let seen = true; try { seen = localStorage.getItem("dpm-tour-overview-seen") === "1"; } catch {} if (!seen && route === "home") { const id = setTimeout(() => { window.__dpmTour?.startOverview(); }, 1200); return () => clearTimeout(id); } }, []); const page = PAGES.find(p => p.id === route) || PAGES[0]; const setSidebarCollapsed = (v) => setTweak("sidebarCollapsed", typeof v === "function" ? v(t.sidebarCollapsed) : v); const setRightCollapsed = (v) => setTweak("rightSidebarCollapsed", typeof v === "function" ? v(t.rightSidebarCollapsed) : v); // P21 — Extended/fullscreen Calendar bridge. The Calendar dispatches // "dpm-cal-fullscreen" {detail:on}; we collapse BOTH global sidebars and // remember their prior state so exiting restores exactly what was there. const chromeRestore = React.useRef(null); useEffect(() => { const onFs = (e) => { const on = !!e.detail; if (on) { if (!chromeRestore.current) { chromeRestore.current = { l: t.sidebarCollapsed, r: t.rightSidebarCollapsed }; } setTweak({ sidebarCollapsed: true, rightSidebarCollapsed: true }); } else { if (!chromeRestore.current) return; // never entered full view — nothing to restore const prev = chromeRestore.current; setTweak({ sidebarCollapsed: prev.l, rightSidebarCollapsed: prev.r }); chromeRestore.current = null; } }; window.addEventListener("dpm-cal-fullscreen", onFs); return () => window.removeEventListener("dpm-cal-fullscreen", onFs); }, [t.sidebarCollapsed, t.rightSidebarCollapsed]); const mobile = t.viewport === "mobile"; // Broadcast mobile state to any component using useIsMobile(). useEffect(() => { window.__dpmMobile = mobile; window.dispatchEvent(new CustomEvent("dpm-mobile-change", { detail: mobile })); }, [mobile]); const openTask = () => setTaskOpen(true); const appCtl = { theme: t.theme, setTheme: (v) => setTweak("theme", typeof v === "function" ? v(t.theme) : v), lang: t.lang, setLang: (v) => setTweak("lang", typeof v === "function" ? v(t.lang) : v), }; const screen = {renderScreen(route, setRoute, t.emptyState, openTask, appCtl)}; // Auth pages: full-bleed, no shell if (!page.chrome) { return (
{screen}
setTaskOpen(false)} /> ); } // Mobile shell if (mobile) { return (
{route === "home" &&
} {screen}
setTaskOpen(false)} /> setRoute("resources")} />
); } // Desktop / tablet shell return (
{/* Ambient accent — liseré supérieur teinté par l'Espace courant (P20) */}
setTweak("theme", typeof v === "function" ? v(t.theme) : v)} lang={t.lang} setLang={(v) => setTweak("lang", typeof v === "function" ? v(t.lang) : v)} onOpenTask={openTask} />
{page.fullbleed ?
{screen}
:
{route === "home" &&
} {screen}
}
setTaskOpen(false)} />
); } function renderScreen(route, setRoute, emptyState, openTask, appCtl = {}) { switch (route) { case "landing": return ; case "login": return ; case "signup": return ; case "onboarding": return ; case "home": return ; case "planner": return ; case "daily-planning": return ; case "calendar": return ; case "tasks": return ; case "matrix": return ; case "habits": return ; case "goals": return ; case "dashboard": return ; case "rules": return ; case "sync": return ; case "ai-planning": return ; case "automations": return ; case "collaboration": return ; case "notifications": return ; case "billing": return ; case "privacy": return ; case "settings": return ; case "resources": return ; default: return ; } } function useIsMobile() { const [m, setM] = useState(() => (typeof window !== "undefined" ? !!window.__dpmMobile : false)); useEffect(() => { const h = (e) => setM(!!e.detail); window.addEventListener("dpm-mobile-change", h); return () => window.removeEventListener("dpm-mobile-change", h); }, []); return m; } if (typeof window !== "undefined") window.useIsMobile = useIsMobile; function MobileHeader() { return (
{/* Espace switcher (P20) — toujours visible en tête sur mobile */}
); } function MobileBottomNav({ route, setRoute, onOpenTask }) { const items = [ { id: "home", label: "Home", icon: Icons.Home }, { id: "planner", label: "Today", icon: Icons.Layout }, { id: "add", label: "", icon: Icons.Plus, isAdd: true }, { id: "tasks", label: "Tasks", icon: Icons.CheckSquare }, { id: "dashboard", label: "Stats", icon: Icons.BarChart }, ]; return ( ); } function VifTweakToggle() { const [on, setOn] = useVif(); return ; } function ConnTweak() { const [c, setC] = useState("online"); return { setC(v); window.__dpmSetConn?.(v); }} options={[ { value: "online", label: "Online" }, { value: "reconnecting", label: "Recon." }, { value: "offline", label: "Offline" } ]} />; } function DPMTweaks({ t, setTweak, route, setRoute }) { return (
{PAGES.map(p => ( ))}
setTweak("theme", v)} options={[ { value: "dark", label: "Dark" }, { value: "light", label: "Light" } ]} /> setTweak("lang", v)} options={[ { value: "fr", label: "FR" }, { value: "en", label: "EN" } ]} /> setTweak("viewport", v)} options={[ { value: "desktop", label: "Desktop" }, { value: "mobile", label: "Mobile" } ]} /> setTweak("sidebarCollapsed", v)} /> setTweak("rightSidebarCollapsed", v)} /> setTweak("emptyState", v)} /> ); } window.TaskModalCtx = TaskModalCtx; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();