/* metaglass.dev — main app */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "density": "default", "fonts": "jb-geist", "cardStyle": "default" }/*EDITMODE-END*/; function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const [active, setActive] = React.useState("All"); const [sort, setSort] = React.useState("Featured"); const [search, setSearch] = React.useState(""); const [openedApp, setOpenedApp] = React.useState(null); const [submitOpen, setSubmitOpen] = React.useState(false); const [theme, setTheme] = React.useState(() => { try { return localStorage.getItem('mg-theme') || 'light'; } catch (e) { return 'light'; } }); // Apply theme + tweaks to as data-attrs (CSS reads them) React.useEffect(() => { document.documentElement.dataset.theme = theme; try { localStorage.setItem('mg-theme', theme); } catch (e) {} }, [theme]); React.useEffect(() => { document.documentElement.dataset.density = tweaks.density; document.documentElement.dataset.fonts = tweaks.fonts; document.documentElement.dataset.cardStyle = tweaks.cardStyle; }, [tweaks.density, tweaks.fonts, tweaks.cardStyle]); // Lock body scroll while any drawer or modal is open React.useEffect(() => { const anyOpen = !!openedApp || submitOpen; document.body.style.overflow = anyOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [openedApp, submitOpen]); // Keyboard shortcut: cmd/ctrl-K focuses search React.useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); const el = document.querySelector('.search input'); if (el) el.focus(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); // When the user starts typing a search, scroll to results and clear any // active category filter so search is global. const prevSearchRef = React.useRef(""); React.useEffect(() => { const prev = prevSearchRef.current; if (!prev && search) { if (active !== "All") setActive("All"); const el = document.getElementById('marketplace'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } prevSearchRef.current = search; }, [search, active]); const apps = window.METAGLASS_APPS; const categories = window.METAGLASS_CATEGORIES; const counts = React.useMemo(() => { const c = { All: apps.length }; for (const a of apps) c[a.category] = (c[a.category] || 0) + 1; return c; }, [apps]); const featured = React.useMemo(() => apps.filter(a => a.featured).slice(0, 3), [apps]); const newCount = React.useMemo(() => apps.filter(a => a.new).length, [apps]); const filtered = React.useMemo(() => { let list = apps.filter(a => { if (active !== "All" && a.category !== active) return false; if (search) { const q = search.toLowerCase(); return a.name.toLowerCase().includes(q) || a.tagline.toLowerCase().includes(q) || a.category.toLowerCase().includes(q) || a.author.name.toLowerCase().includes(q) || (a.description && a.description.toLowerCase().includes(q)); } return true; }); if (sort === "A-Z") list = [...list].sort((a, b) => a.name.localeCompare(b.name)); else if (sort === "Newest") list = [...list].sort((a, b) => Number(b.new) - Number(a.new)); else list = [...list].sort((a, b) => Number(b.featured) - Number(a.featured)); return list; }, [apps, active, search, sort]); const openApp = (app) => setOpenedApp(app); return ( setTheme(t => t === 'dark' ? 'light' : 'dark')} onOpenSubmit={() => setSubmitOpen(true)} /> {!search && (
)}
{!search && ( )}
// open registry

All apps

{filtered.length} {filtered.length === 1 ? 'result' : 'results'}{active !== 'All' && ` · ${active}`}
{filtered.length === 0 ? (
// no results for "{search}" in {active}
) : filtered.map((app, i) => ( ))}
setSubmitOpen(true)} />
setSubmitOpen(true)} />
setOpenedApp(null)} onOpenOther={(a) => setOpenedApp(a)} allApps={apps} /> setSubmitOpen(false)} /> setTweak('density', v)} options={[ { value: 'compact', label: 'Compact' }, { value: 'default', label: 'Default' }, { value: 'roomy', label: 'Roomy' } ]} /> setTweak('fonts', v)} options={[ { value: 'jb-geist', label: 'JetBrains Mono + Geist' }, { value: 'mono-mono', label: 'JetBrains Mono only' }, { value: 'plex', label: 'IBM Plex Mono + Plex Sans' }, { value: 'geistmono-grotesk', label: 'Geist Mono + Space Grotesk' } ]} /> setTweak('cardStyle', v)} options={[ { value: 'default', label: 'Default' }, { value: 'bordered', label: 'Bordered' }, { value: 'minimal', label: 'Minimal' } ]} /> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();