e.stopPropagation()}>

Add a new tool

Name setForm(f => ({ ...f, name: e.target.value }))} autoFocus />

Description setForm(f => ({ ...f, desc: e.target.value }))} />

Link (optional) setForm(f => ({ ...f, url: e.target.value }))} />

Tag

{CATEGORIES.map(c => ( ))}

Animated icon setForm(f => ({ ...f, iconId: id }))} />

Background image (optional) {form.bg ? (

Image attached

) : (

fileRef.current?.click()}> Click to upload an image

)} handleFile(e.target.files?.[0])} />

); } // ─── Sign-in modal ─────────────────────────────────────── function SignInModal({ open, currentRole, intent, onClose, onSignedIn }) { const [pw, setPw] = useState(''); const [err, setErr] = useState(''); const [busy, setBusy] = useState(false); const inputRef = useRef(null); useEffect(() => { if (open) { setPw(''); setErr(''); setBusy(false); // Focus the field after the modal mounts. setTimeout(() => inputRef.current?.focus(), 60); } }, [open]); if (!open) return null; const submit = async () => { if (!pw || busy) return; setBusy(true); setErr(''); try { const res = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ password: pw }), }); const data = await res.json().catch(() => ({})); if (res.ok && data.role) { onSignedIn(data.role); } else { setErr(data.error || 'Wrong password'); setBusy(false); // Re-select for quick retry. setTimeout(() => inputRef.current?.select(), 0); } } catch { setErr('Network error'); setBusy(false); } }; const title = intent?.type === 'switch' ? 'Switch account' : currentRole ? 'Sign in' : 'Sign in to continue'; const subtitle = intent?.type === 'navigate' && intent.appName ? `Sign in to open ${intent.appName}.` : intent?.type === 'action' ? 'Sign in to make changes to your workspace.' : intent?.type === 'switch' ? 'Enter the other account’s password to switch.' : 'Public access opens the shared workspace. Admin access opens the private one.'; return (

e.stopPropagation()}>

{title}

{subtitle}

Password { setPw(e.target.value); setErr(''); }} onKeyDown={(e) => { if (e.key === 'Enter') submit(); }} />

{err || ' '}

); } // ─── Account chip in top bar ───────────────────────────── function AccountChip({ role, onSignIn, onSwitch, onSignOut }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, [open]); if (!role) { return ( ); } const label = role === 'admin' ? 'admin' : 'public'; return (

{open && ( )}

); } // ─── Main app ──────────────────────────────────────────── function App() { // Per-browser viewing prefs — theme/accent. useTweaks does not persist on its // own (it postMessages to an editor host), so we hydrate from / save to // localStorage ourselves below. const initialPrefs = useMemo(() => { const stored = loadPrefs(); return { theme: stored.theme || 'dark', accent: stored.accent || 'lime' }; }, []); const [tweaks, setTweak] = window.useTweaks(initialPrefs); useEffect(() => { savePrefs({ theme: tweaks.theme, accent: tweaks.accent }); }, [tweaks.theme, tweaks.accent]); // Auth + per-account state. const [auth, setAuth] = useState({ ready: false, role: null }); const [serverState, setServerState] = useState({ customApps: [], pinned: [], order: [], removedDefaults: [] }); const [tileBgs, setTileBgs] = useState({}); // UI state. const [query, setQuery] = useState(''); const [showAdd, setShowAdd] = useState(false); const [signin, setSignin] = useState({ open: false, intent: null }); const [bgMenu, setBgMenu] = useState(null); const [stuck, setStuck] = useState(false); const [toast, setToast] = useState(null); const fileInputRef = useRef(null); const heroRef = useRef(null); const tilesRef = useRef(null); // Drag state. const [dragId, setDragId] = useState(null); const [dropIndex, setDropIndex] = useState(null); const [dropY, setDropY] = useState(null); // ── Auth bootstrap ── const refreshAuth = useCallback(async () => { try { const res = await fetch('/api/me', { cache: 'no-store' }); const data = await res.json().catch(() => ({})); setAuth({ ready: true, role: data.role || null }); return data.role || null; } catch { setAuth({ ready: true, role: null }); return null; } }, []); useEffect(() => { refreshAuth(); }, [refreshAuth]); // ── Load server-stored homepage state when role becomes known ── useEffect(() => { let cancelled = false; if (!auth.ready) return; if (!auth.role) { setServerState({ customApps: [], pinned: [], order: [], removedDefaults: [] }); setTileBgs({}); return; } (async () => { try { const res = await fetch('/api/homepage-state', { cache: 'no-store' }); if (!res.ok) throw new Error(`load failed: ${res.status}`); const data = await res.json(); if (!cancelled) setServerState({ customApps: Array.isArray(data.state?.customApps) ? data.state.customApps : [], pinned: Array.isArray(data.state?.pinned) ? data.state.pinned : [], order: Array.isArray(data.state?.order) ? data.state.order : [], removedDefaults: Array.isArray(data.state?.removedDefaults) ? data.state.removedDefaults : [], }); } catch (err) { if (!cancelled) { console.warn('Could not load homepage state:', err); setServerState({ customApps: [], pinned: [], order: [], removedDefaults: [] }); } } if (!cancelled) setTileBgs(loadTileBgs(auth.role)); })(); return () => { cancelled = true; }; }, [auth.ready, auth.role]); // ── Persist server state (debounced) ── const saveTimer = useRef(null); const persistServer = useCallback((next) => { if (!auth.role) return; if (saveTimer.current) clearTimeout(saveTimer.current); saveTimer.current = setTimeout(() => { fetch('/api/homepage-state', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ state: next }), }).catch(err => console.warn('Could not save homepage state:', err)); }, 250); }, [auth.role]); const updateServer = useCallback((updater) => { setServerState(prev => { const next = typeof updater === 'function' ? updater(prev) : updater; persistServer(next); return next; }); }, [persistServer]); // ── Persist tile bgs to localStorage scoped to role ── useEffect(() => { if (auth.role) saveTileBgs(auth.role, tileBgs); }, [auth.role, tileBgs]); // ── Theme + accent ── useEffect(() => { document.documentElement.setAttribute('data-theme', tweaks.theme); const accent = THEME_COLORS.find(c => c.name === tweaks.accent) || THEME_COLORS[0]; document.documentElement.style.setProperty('--accent', accent.value); document.documentElement.style.setProperty('--accent-soft', accent.value.replace(')', ' / 0.14)')); document.documentElement.style.setProperty('--accent-glow', accent.value.replace(')', ' / 0.28)')); }, [tweaks.theme, tweaks.accent]); // ── Keyboard shortcuts ── useEffect(() => { const h = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); document.querySelector('.search')?.focus(); } if (e.key === 'Escape') { setShowAdd(false); setBgMenu(null); setSignin(s => s.open ? { ...s, open: false } : s); } }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, []); // ── Hero out-of-view detection ── useEffect(() => { const obs = new IntersectionObserver(([entry]) => { setStuck(!entry.isIntersecting); }, { threshold: 0, rootMargin: '-40px 0px 0px 0px' }); if (heroRef.current) obs.observe(heroRef.current); return () => obs.disconnect(); }, []); // ── Toast helper ── const flashToast = useCallback((message) => { setToast({ message, id: Date.now() }); setTimeout(() => setToast(t => (t && t.message === message ? null : t)), 2400); }, []); // ── Resolve full app list ── const allApps = useMemo(() => { const removed = new Set(serverState.removedDefaults); const defaults = window.DEFAULT_APPS.filter(a => !removed.has(a.id)); return [...defaults, ...serverState.customApps]; }, [serverState.customApps, serverState.removedDefaults]); const orderedApps = useMemo(() => { const byId = Object.fromEntries(allApps.map(a => [a.id, a])); const seen = new Set(); const out = []; for (const id of serverState.order) { if (byId[id] && !seen.has(id)) { out.push(byId[id]); seen.add(id); } } for (const app of allApps) { if (!seen.has(app.id)) { out.push(app); seen.add(app.id); } } return out; }, [allApps, serverState.order]); const filtered = useMemo(() => { if (!query.trim()) return orderedApps; const q = query.toLowerCase(); return orderedApps.filter(a => a.name.toLowerCase().includes(q) || a.desc.toLowerCase().includes(q) || a.meta.toLowerCase().includes(q) ); }, [orderedApps, query]); const pinnedSet = useMemo(() => new Set(serverState.pinned), [serverState.pinned]); const pinnedApps = filtered.filter(a => pinnedSet.has(a.id)); const unpinnedApps = filtered.filter(a => !pinnedSet.has(a.id)); const locked = !auth.role; // ── Sign-in flow ── const requireAuth = useCallback((intent) => { if (auth.role) return true; setSignin({ open: true, intent }); return false; }, [auth.role]); const handleSignedIn = useCallback(async (newRole) => { const intent = signin.intent; setSignin({ open: false, intent: null }); setAuth({ ready: true, role: newRole }); flashToast(`Signed in as ${newRole}`); if (!intent) return; if (intent.type === 'navigate' && intent.url) { // Brief delay so the user sees the toast before navigating. setTimeout(() => { window.location.href = intent.url; }, 350); } }, [signin.intent, flashToast]); const handleSignOut = useCallback(async () => { try { await fetch('/api/logout', { method: 'POST' }); } catch {} setAuth({ ready: true, role: null }); setServerState({ customApps: [], pinned: [], order: [], removedDefaults: [] }); setTileBgs({}); flashToast('Signed out'); }, [flashToast]); // ── Tile interactions ── const handleTileClick = useCallback((app) => { if (!app.url) return; if (auth.role) { window.location.href = app.url; } else { setSignin({ open: true, intent: { type: 'navigate', url: app.url, appName: app.name } }); } }, [auth.role]); const togglePin = useCallback((id) => { if (!requireAuth({ type: 'action' })) return; updateServer(s => ({ ...s, pinned: s.pinned.includes(id) ? s.pinned.filter(x => x !== id) : [...s.pinned, id], })); }, [requireAuth, updateServer]); const deleteTool = useCallback((app) => { if (!requireAuth({ type: 'action' })) return; if (!confirm(`Delete ${app.name} from this workspace?`)) return; const isDefault = window.DEFAULT_APPS.some(defaultApp => defaultApp.id === app.id); updateServer(s => ({ ...s, customApps: s.customApps.filter(customApp => customApp.id !== app.id), removedDefaults: isDefault && !s.removedDefaults.includes(app.id) ? [...s.removedDefaults, app.id] : s.removedDefaults, pinned: s.pinned.filter(id => id !== app.id), order: s.order.filter(id => id !== app.id), })); setTileBgs(prev => { if (!prev[app.id]) return prev; const next = { ...prev }; delete next[app.id]; return next; }); flashToast(`${app.name} deleted`); }, [requireAuth, updateServer, flashToast]); // ── Drag & drop ── const handleDragStart = (e, id) => { if (!auth.role) return; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', id); setDragId(id); }; const handleDragEnd = () => { setDragId(null); setDropIndex(null); setDropY(null); }; const handleListDragOver = (e) => { if (!dragId) return; e.preventDefault(); const list = tilesRef.current; if (!list) return; const tiles = Array.from(list.querySelectorAll('.tile')); if (tiles.length === 0) return; const listRect = list.getBoundingClientRect(); const y = e.clientY; let insertIdx = tiles.length; for (let i = 0; i < tiles.length; i++) { const r = tiles[i].getBoundingClientRect(); if (y < r.top + r.height / 2) { insertIdx = i; break; } } let lineY; if (insertIdx < tiles.length) { const r = tiles[insertIdx].getBoundingClientRect(); lineY = r.top - listRect.top - 4; } else { const r = tiles[tiles.length - 1].getBoundingClientRect(); lineY = r.bottom - listRect.top + 4; } setDropIndex(insertIdx); setDropY(lineY); }; const handleDrop = (e) => { e.preventDefault(); if (!dragId || dropIndex == null) return handleDragEnd(); updateServer(s => { // Build canonical full order from current state. const fullOrder = orderedApps.map(a => a.id); const fromIdx = fullOrder.indexOf(dragId); if (fromIdx === -1) return s; const targetApp = unpinnedApps[dropIndex]; let insertAt; if (!targetApp) { insertAt = fullOrder.length; } else { insertAt = fullOrder.indexOf(targetApp.id); } fullOrder.splice(fromIdx, 1); if (fromIdx < insertAt) insertAt -= 1; insertAt = Math.max(0, Math.min(insertAt, fullOrder.length)); fullOrder.splice(insertAt, 0, dragId); return { ...s, order: fullOrder }; }); handleDragEnd(); }; // ── Tile bg upload ── const handleCustomBgClick = (appId, evt) => { if (!requireAuth({ type: 'action' })) return; const rect = evt.currentTarget.getBoundingClientRect(); setBgMenu({ appId, x: rect.right - 180, y: rect.bottom + 6 }); }; const handleBgUpload = () => fileInputRef.current?.click(); const handleFileChange = (e) => { const file = e.target.files?.[0]; if (!file || !bgMenu) return; const r = new FileReader(); r.onload = () => { setTileBgs(prev => ({ ...prev, [bgMenu.appId]: r.result })); setBgMenu(null); }; r.readAsDataURL(file); e.target.value = ''; }; const handleBgRemove = () => { if (!bgMenu) return; setTileBgs(prev => { const next = { ...prev }; delete next[bgMenu.appId]; return next; }); setBgMenu(null); }; useEffect(() => { if (!bgMenu) return; const onClick = (e) => { if (!e.target.closest('.tile-bg-upload') && !e.target.closest('.tile-btn')) setBgMenu(null); }; setTimeout(() => document.addEventListener('click', onClick), 0); return () => document.removeEventListener('click', onClick); }, [bgMenu]); // ── Add app ── const handleAddApp = (newApp) => { if (!requireAuth({ type: 'action' })) return; const customApp = { id: newApp.id, name: newApp.name, desc: newApp.desc, meta: newApp.meta, iconId: newApp.iconId, }; if (newApp.url) customApp.url = newApp.url; updateServer(s => ({ ...s, customApps: [...s.customApps, customApp], order: [...s.order, newApp.id], })); if (newApp.bg) setTileBgs(prev => ({ ...prev, [newApp.id]: newApp.bg })); }; const scrollToTop = (e) => { e?.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }; return ( <>

{/* Sticky top bar — always visible */}

zwolk

setSignin({ open: true, intent: null })} onSwitch={() => setSignin({ open: true, intent: { type: 'switch' } })} onSignOut={handleSignOut} />

zwolk

A directory of small, useful tools

setQuery(e.target.value)} /> ⌘K

{filtered.length} {filtered.length === 1 ? 'tool' : 'tools'} {query && ` matching "${query}"`} {auth.role && ( )}

{locked && auth.ready && (

)} {filtered.length === 0 ? (

No tools matched "{query}"

) : ( <> {pinnedApps.length > 0 && ( <>

Pinned

{}} onDragEnd={() => {}} isDragging={false} customBg={tileBgs[app.id]} onCustomBgClick={handleCustomBgClick} /> ))}

All tools

)}

))} {dragId && dropY != null && (

)}

{bgMenu && (

{tileBgs[bgMenu.appId] && ( )}

)} setShowAdd(false)} onAdd={handleAddApp} /> setSignin({ open: false, intent: null })} onSignedIn={handleSignedIn} /> {toast && (

{toast.message}

)} setTweak('theme', v)} />

Accent color

{THEME_COLORS.map(c => (

• Pin — hover any tile, click the pin icon

• Reorder — drag any tile

• Backgrounds — hover, click image icon

• Delete — hover, click trash icon

• Add tool — sign in first

{auth.role && ( { if (!confirm('Reset this account\'s tool order, pins, custom tools, and tile backgrounds?')) return; updateServer({ customApps: [], pinned: [], order: [], removedDefaults: [] }); setTileBgs({}); }} /> )} ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();