// Life Memory Tree — app chrome (redesigned). // Nav model + three sidebar styles (rail / rich / minimal), top bar, mobile tab // bar + drawer, and a ⌘K command palette. All theme-aware and animated. (function () { const { useState, useEffect, useRef } = React; const { cx } = LMTXUtil; const I = window.LMTIcons; // ── Navigation model ──────────────────────────────────────────────────────── const NAV = [ { group:'Cultivate', items:[ { id:'today', label:'Today', icon:I.Sun }, { id:'tree', label:'Life Tree',icon:I.Tree }, { id:'graph', label:'Life Graph',icon:I.Graph }, { id:'timeline', label:'Timeline', icon:I.Cal }, ]}, { group:'Library', items:[ { id:'scenes', label:'Scenes', icon:I.Layers }, { id:'people', label:'People', icon:I.People }, { id:'places', label:'Places', icon:I.Pin }, ]}, { group:'Create', items:[ { id:'weaver', label:'Story Weaver', icon:I.Branch }, { id:'ask', label:'Ask', icon:I.Sparkles }, ]}, { group:'Together', items:[ { id:'collab', label:'Collaborate', icon:I.Compass }, { id:'recap', label:'Year in Review', icon:I.TreeFull }, ]}, ]; const NAV_FLAT = NAV.flatMap(g => g.items); const TITLES = Object.fromEntries(NAV_FLAT.map(n => [n.id, n.label]).concat([['echoes','Echoes'],['settings','Settings'],['scene','Scene'],['person','Person'],['place','Place'],['capture','Capture']])); const MOBILE_TABS = ['today','tree','scenes','ask']; // ── Brand mark ─────────────────────────────────────────────────────────────── function Brand({ collapsed = false, onClick }) { return ( ); } // ── Nav item ───────────────────────────────────────────────────────────────── function NavItem({ item, active, collapsed, onClick, badge }) { const Icon = item.icon; return ( ); } function CaptureBtn({ collapsed, onClick }) { return ( ); } // ── Sidebar (variant-aware) ────────────────────────────────────────────────── function Sidebar({ variant = 'rich', route, go, onCapture, onCmd, accentName, echoCount = 3 }) { const [hover, setHover] = useState(false); const collapsed = variant === 'rail' && !hover; const W = collapsed ? 74 : (variant === 'minimal' ? 232 : 268); const badgeFor = (id) => { if (id === 'today') return LMTData.todayItems.length; if (id === 'collab') return LMTX2.collaborators.filter(c => c.here).length; return null; }; return ( ); } // ── Top bar ────────────────────────────────────────────────────────────────── function TopBar({ route, go, onCmd, dark, setDark, onCapture, compact = false, onMenu }) { const here = LMTX2.collaborators.filter(c => c.here); return (
{compact && }

{TITLES[route] || 'Today'}

{!compact &&
Tuesday · June 2 · a quiet week, mostly green
}
{/* command trigger (desktop) */} {!compact && ( )} {compact && } {/* presence stack */} {!compact && ( )} {!compact && }
); } function MoonIcon(props) { return ; } // ── Mobile bottom tab bar ──────────────────────────────────────────────────── function MobileBar({ route, go, onCapture }) { const tabs = MOBILE_TABS.map(id => NAV_FLAT.find(n => n.id === id)); return ( ); } function MobTab({ t, active, onClick }) { const Icon = t.icon; return ( ); } // ── Mobile drawer (full nav) ───────────────────────────────────────────────── function MobileDrawer({ open, route, go, onClose, dark, setDark }) { if (!open) return null; return (
e.stopPropagation()} className="scroll" style={{ position:'absolute', top:0, bottom:0, left:0, width:'80%', maxWidth:320, background:'var(--bg2)', borderRight:'1px solid var(--edge)', boxShadow:'var(--shadow-float)', display:'flex', flexDirection:'column', animation:'lmtx-slidein .26s cubic-bezier(.2,.8,.2,1)', overflowY:'auto' }}>
{ go('today'); onClose(); }} />
Prabhat
Software Engineer · 7.7 yrs
); } // ── Command palette ────────────────────────────────────────────────────────── function CommandPalette({ open, onClose, go }) { const [q, setQ] = useState(''); const inputRef = useRef(null); useEffect(() => { if (open) { setQ(''); setTimeout(() => inputRef.current?.focus(), 40); } }, [open]); if (!open) return null; const ql = q.toLowerCase(); const navMatches = NAV_FLAT.concat([{ id:'echoes', label:'Echoes', icon:I.Bell }, { id:'settings', label:'Settings', icon:I.Settings }]).filter(n => n.label.toLowerCase().includes(ql)); const eventMatches = q ? LMTData.events.filter(e => e.title.toLowerCase().includes(ql) || e.scene.toLowerCase().includes(ql)).slice(0,4) : LMTData.events.slice(0,3); const actions = [ { label:'Capture a new memory', icon:I.Plus, go:'capture' }, { label:'Ask the Weaver a question', icon:I.Sparkles, go:'ask' }, { label:'Weave a story', icon:I.Branch, go:'weaver' }, ].filter(a => !q || a.label.toLowerCase().includes(ql)); return (
e.stopPropagation()} className="card-r" style={{ width:'min(620px, 92vw)', maxHeight:'72vh', display:'flex', flexDirection:'column', overflow:'hidden', boxShadow:'var(--shadow-float)', animation:'lmtx-rise .26s cubic-bezier(.2,.8,.2,1)' }}>
setQ(e.target.value)} placeholder="Search memories, jump to a page, or ask…" style={{ flex:1, border:'none', outline:'none', background:'transparent', fontFamily:'inherit', fontSize:15.5, color:'var(--ink)' }}/> ESC
{actions.length > 0 && {actions.map(a => } label={a.label} onClick={() => { go(a.go); onClose(); }} accent />)}} {navMatches.length > 0 && {navMatches.map(n => } label={n.label} onClick={() => { go(n.id); onClose(); }} />)}} {eventMatches.length > 0 && {eventMatches.map(e => ( } label={e.title} meta={`${e.t} · ${e.scene}`} onClick={() => { go('scene'); onClose(); }} /> ))}}
); } function PaletteGroup({ label, children }) { return
{label}
{children}
; } function PaletteRow({ icon, label, meta, onClick, accent }) { return ( ); } Object.assign(window, { NAV, NAV_FLAT, TITLES, Sidebar, TopBar, MobileBar, MobileDrawer, CommandPalette, Brand }); })();