; function NavItem({ item, active, onClick, count }) { const [hover, setHover] = React.useState(false); return ( ); } function WorkspaceSwitcher({ onNavigate }) { const boot = window.LTQ.boot || {}; const ws = boot.workspace || {}; const workspaces = boot.workspaces || []; const switchWs = async (w, close) => { close(); if (w.id === boot.active_workspace) return; const r = await api.post("/api/workspace/switch", { workspaceId: w.id }); if (r.ok) { await reloadBoot(); toast(t("chrome.switched_to", { name: w.name })); } else toast(r.error || t("chrome.switch_failed"), { tone: "error" }); }; return ( ( )}> {(close) => ( <>

{t("chrome.workspaces")}

{workspaces.map((w) => ( : null} onClick={() => switchWs(w, close)} /> ))} {DIVIDER} { close(); onNavigate && onNavigate("settings"); }} /> )} ); } function Sidebar({ active, onNavigate, open, onOpenPalette, onClose }) { const boot = window.LTQ.boot || {}; const counts = boot.counts || {}; const plan = (boot.workspace && boot.workspace.plan) || "free"; const isPaid = plan === "pro" || plan === "team"; // ---- spring-driven active indicator (MV-4) ---- // One highlight pill glides between nav items on a real damped spring. Because // the spring keeps position AND velocity, rapid navigation retargets mid-glide // and flows continuously — a CSS transition would restart from the old spot on // every click. Reduced-motion snaps instantly (the engine handles that). const navRef = React.useRef(null); const indRef = React.useRef(null); const springRef = React.useRef(null); const mountedRef = React.useRef(false); const wasHiddenRef = React.useRef(false); const activeIndex = NAV.findIndex((n) => n.id === active); React.useLayoutEffect(() => { const nav = navRef.current, ind = indRef.current; if (!nav || !ind) return; if (activeIndex < 0) { ind.style.opacity = "0"; wasHiddenRef.current = true; return; } const el = nav.querySelectorAll("button")[activeIndex]; if (!el) return; const top = el.offsetTop; ind.style.opacity = "1"; ind.style.height = el.offsetHeight + "px"; const S = window.LTQSpring; if (!S) { ind.style.transform = "translateY(" + top + "px)"; return; } if (!springRef.current) { springRef.current = S.createSpring(Object.assign(S.fromResponse(0.38, 0.9), { from: top, restDelta: 0.1, restSpeed: 0.5, onUpdate: (v) => { if (indRef.current) indRef.current.style.transform = "translateY(" + v + "px)"; }, })); } // First paint (or re-appearing after a non-nav page) snaps into place; a // normal nav→nav change glides and can be interrupted. if (!mountedRef.current || wasHiddenRef.current) { mountedRef.current = true; wasHiddenRef.current = false; springRef.current.jump(top); } else { springRef.current.set(top); } }, [active, activeIndex]); // ---- mobile drawer: swipe-to-close with a real velocity throw (MV-4) ---- // Drag the open drawer leftward; on release the gesture's velocity + offset // decide open vs closed and the spring throws it there with inertia (a flick // closes even from a small drag). touch-action:pan-y lets vertical scroll pass // through, so no passive-listener preventDefault fight. Desktop/no-touch never // triggers it (guarded by `open`, and touch events simply don't fire). const asideRef = React.useRef(null); const dragRef = React.useRef(null); const onTouchStart = (e) => { if (!open || !e.touches || e.touches.length !== 1) return; const t = e.touches[0]; dragRef.current = { x0: t.clientX, y0: t.clientY, t0: performance.now(), dx: 0, moved: false, axis: false, w: (asideRef.current && asideRef.current.offsetWidth) || 280 }; }; const onTouchMove = (e) => { const d = dragRef.current; if (!d) return; const t = e.touches[0]; const dx = t.clientX - d.x0, dy = t.clientY - d.y0; if (!d.moved) { if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return; if (Math.abs(dy) > Math.abs(dx)) { dragRef.current = null; return; } // vertical → let it scroll d.moved = true; if (asideRef.current) asideRef.current.style.transition = "none"; } const clamped = Math.max(-d.w, Math.min(0, dx)); // leftward only d.dx = clamped; d.vx = t.clientX; d.vt = performance.now(); if (asideRef.current) asideRef.current.style.transform = "translateX(" + clamped + "px)"; const bd = document.querySelector(".lt-backdrop"); if (bd) bd.style.opacity = String(Math.max(0, 1 - Math.abs(clamped) / d.w)); }; const settleDrawer = (el, bd, close) => { if (el) { el.style.transition = ""; el.style.transform = ""; } if (bd) bd.style.opacity = ""; if (close && onClose) onClose(); }; const onTouchEnd = () => { const d = dragRef.current; dragRef.current = null; if (!d || !d.moved) return; const el = asideRef.current, bd = document.querySelector(".lt-backdrop"); const velPxPerS = ((d.vx - d.x0) / Math.max(1, d.vt - d.t0)) * 1000; // negative = left const shouldClose = d.dx < -d.w * 0.4 || velPxPerS < -450; const S = window.LTQSpring; if (!S || S.reducedMotion()) { settleDrawer(el, bd, shouldClose); return; } const sp = S.createSpring({ from: d.dx, velocity: velPxPerS, stiffness: 320, damping: 36, restDelta: 0.3, restSpeed: 2, onUpdate: (v) => { if (el) el.style.transform = "translateX(" + v + "px)"; if (bd) bd.style.opacity = String(Math.max(0, 1 - Math.abs(v) / d.w)); }, onRest: () => settleDrawer(el, bd, shouldClose), }); sp.set(shouldClose ? -d.w : 0); }; return (

{/* Workspace switcher; logo links back to the marketing site */}

{/* Command palette launcher */} {/* The guided setup is a standalone first-run screen now (onboarding revamp Phase 12) — the shell never renders while it's needed, so the old "Finish setup" entry is gone. */}

{t("chrome.pages")}

{/* Reddit-mentions upsell, hidden once on a paid plan. Routes into Settings → Plan and highlights the Reddit-citations upgrade card. */} {!isPaid && (

{t("reddit.upsell.title")}

)}

); } window.LTQ.Sidebar = Sidebar; })();