// Tablet — Chromium-style Settings page (iPad) // Left nav rail with categories, right scrollable detail pane. // Covers Chromium baseline (autofill, privacy, perf, appearance, search, // startup, downloads, languages, a11y, system, reset, extensions, about) // PLUS Ajna additions (identity, mesh, chat, tab groups sharing, private mode). // ─── Toggle ────────────────────────────────────────────────── function TToggle({ on, onChange, accent = M_ACCENT_B }) { return ( ); } // ─── Generic select ────────────────────────────────────────── function TSelect({ value, options, onChange, width = 'auto' }) { return ( ); } // ─── Row / Card primitives ────────────────────────────────── function TSettingRow({ icon, iconColor, title, subtitle, right, onClick, danger }) { return (
{ if (onClick) e.currentTarget.style.background = 'var(--m-tint)'; }} onMouseLeave={e => { if (onClick) e.currentTarget.style.background = M_SURFACE; }} > {icon && (
{icon}
)}
{title}
{subtitle &&
{subtitle}
}
{right || (onClick && ( ))}
); } function TSectionLabel({ children, sub }) { return (
{children}
{sub &&
{sub}
}
); } function TChip({ children, color = '#6EE7B7' }) { return ( {children} ); } // ─── Nav config ───────────────────────────────────────────── const T_SETTINGS_NAV = [ { section: 'Account', items: [ { id: 'identity', icon: , label: 'You & Ajna', badge: '3 devices' }, { id: 'autofill', icon: , label: 'Autofill & passwords' }, ]}, { section: 'Privacy', items: [ { id: 'privacy', icon: , label: 'Privacy & security', badge: 'Strict' }, { id: 'private', icon: () => , label: 'Private browsing', accent: PRIV_ACCENT_2 }, ]}, { section: 'Browser', items: [ { id: 'appearance',icon: , label: 'Appearance' }, { id: 'search', icon: , label: 'Search engine' }, { id: 'startup', icon: , label: 'On startup' }, { id: 'default', icon: , label: 'Default browser' }, { id: 'tabgroups', icon: , label: 'Tab groups' }, { id: 'perf', icon: , label: 'Performance' }, ]}, { section: 'Ajna network', items: [ { id: 'mesh', icon: , label: 'Mesh & peers', badge: '3 online' }, { id: 'chat', icon: , label: 'Chat & messaging' }, ]}, { section: 'Advanced', items: [ { id: 'downloads', icon: , label: 'Downloads' }, { id: 'languages', icon: , label: 'Languages' }, { id: 'a11y', icon: , label: 'Accessibility' }, { id: 'system', icon: , label: 'System' }, { id: 'reset', icon: , label: 'Reset settings' }, ]}, { section: 'About', items: [ { id: 'extensions',icon: , label: 'Extensions', external: true }, { id: 'about', icon: , label: 'About Ajna' }, ]}, ]; const T_SETTING_ROUTES = { identity: 'ajna://settings/people', autofill: 'ajna://settings/autofill', privacy: 'ajna://settings/privacy', private: 'ajna://settings/privateBrowsing', appearance: 'ajna://settings/appearance', search: 'ajna://settings/search', startup: 'ajna://settings/onStartup', default: 'ajna://settings/defaultBrowser', tabgroups: 'ajna://settings/tabGroups', perf: 'ajna://settings/performance', mesh: 'ajna://settings/mesh', chat: 'ajna://settings/chat', downloads: 'ajna://settings/downloads', languages: 'ajna://settings/languages', a11y: 'ajna://settings/accessibility', system: 'ajna://settings/system', reset: 'ajna://settings/reset', extensions: 'ajna://extensions', about: 'ajna://settings/help', }; // ─── Nav rail item ────────────────────────────────────────── function TSNavItem({ item, active, onClick }) { const accent = item.accent || M_ACCENT_B; const isIconFn = typeof item.icon === 'function'; return ( ); } // ─── Page detail bodies ───────────────────────────────────── function TSPageIdentity() { const [name, setName] = React.useState('Maya Chen'); const [editing, setEditing] = React.useState(false); const [avatarIdx, setAvatarIdx] = React.useState(0); const [picking, setPicking] = React.useState(false); const avatars = [ { bg: '#A78BFA' }, { bg: '#22D3EE' }, { bg: '#F472B6' }, { bg: '#FBBF24' }, { bg: '#10B981' }, { bg: '#EF4444' }, ]; const initials = name.trim().split(/\s+/).slice(0,2).map(s => s[0] || '').join('').toUpperCase() || 'A'; const av = avatars[avatarIdx]; const inputRef = React.useRef(null); React.useEffect(() => { if (editing) setTimeout(() => inputRef.current?.focus(), 0); }, [editing]); const Lock = () => ( ); return ( <>
{editing ? ( setName(e.target.value)} onBlur={() => setEditing(false)} onKeyDown={(e) => { if (e.key === 'Enter') setEditing(false); if (e.key === 'Escape') setEditing(false); }} style={{ width: '100%', maxWidth: 320, background: 'var(--m-tint)', border: '1px solid rgba(96,165,250,0.45)', borderRadius: 8, padding: '6px 10px', color: M_FG, fontSize: 18, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.02em', outline: 0, }} /> ) : ( )}
@noah-okafor · maya@ajna.dev
did:key:z6Mk…9kTp
{picking && (
Pick a color or upload
{avatars.map((a, i) => ( ))}
)} Sync
{}}/>}/> SET}/> {}}/>
Devices · 3
{[ { name: 'iPad Pro (this device)', when: 'Active now', conn: 'mesh', primary: true }, { name: 'iPhone 15', when: 'Last seen 4m', conn: 'ble' }, { name: 'MacBook Air', when: 'Last seen 2h', conn: 'internet' }, ].map(d => ( } title={{d.name} {d.primary && THIS}} subtitle={d.when} right={} /> ))}
); } function TSPagePrivacy() { return ( <>
Strict tracking protection · ON
Blocks third-party cookies, fingerprinting, and known trackers everywhere.
Browsing
}/> }/> }/> }/>
Site permissions
{[ { t: 'Location', v: 'Ask', icon: , c: '#FBBF24' }, { t: 'Camera', v: 'Ask', icon: , c: '#F472B6' }, { t: 'Microphone', v: 'Ask', icon: , c: '#22D3EE' }, { t: 'Notifications',v: 'Allow on 4 sites', icon: , c: '#A78BFA' }, ].map(s => ( {}}/> ))}
Clear data
{}}/> {}}/>
); } function TSPagePrivateBrowsing() { return ( <>
Private windows are isolated
Each private window has its own cookies, cache, and history — discarded when closed.
Defaults
ENFORCED}/> ENFORCED}/> }/> }/>
Identity in private mode
}/> }/>
Search & autofill
}/> }/>
); } function TSPageAppearance() { const [theme, setTheme] = React.useState(() => { try { return (window.__ajnaGetTheme && window.__ajnaGetTheme()) || document.body.getAttribute('data-theme') || 'dark'; } catch { return 'dark'; } }); const pickTheme = (id) => { setTheme(id); if (window.__ajnaSetTheme) window.__ajnaSetTheme(id); }; return ( <> Theme
{[ { id: 'auto', label: 'Match system', preview: 'linear-gradient(135deg, #FAFAF8 50%, #14161B 50%)' }, { id: 'light', label: 'Light', preview: '#FAFAF8' }, { id: 'dark', label: 'Dark', preview: '#14161B' }, ].map(t => { const active = theme === t.id; return ( ); })}
Accent color
{[ { id: 'ajna', g: 'linear-gradient(135deg,#6EE7B7,#60A5FA)', active: true }, { id: 'sunrise', g: 'linear-gradient(135deg,#FDE68A,#F472B6)' }, { id: 'ember', g: 'linear-gradient(135deg,#FCA5A5,#F59E0B)' }, { id: 'violet', g: 'linear-gradient(135deg,#C4B5FD,#818CF8)' }, { id: 'mono', g: 'linear-gradient(135deg,#D1D5DB,#6B7280)' }, ].map(a => (
Layout
}/> }/> }/> }/> }/>
Font
}/> {}}/>
); } function TSPageTabGroups() { return ( <> Defaults
}/> }/> }/>
Shared groups
}/> }/> }/> }/>
Archive & cleanup
}/> }/>
); } function TSPageMesh() { return ( <>
Online
did:key:z6Mk…9kTp
{[ { l: 'Mesh peers', v: '3', s: 'BLE' }, { l: 'Mediators', v: '1', s: 'online' }, { l: 'Throughput', v: '24 KB/s', s: 'last 1m' }, ].map(s => (
{s.l}
{s.v}
{s.s}
))}
Transports
}/> }/> }/> }/>
Peers · 3 connected
{[ { name: 'Aishwarya · iPhone', bg: '#EF4444', initials: 'AI', conn: 'ble', hint: '12 m · BLE' }, { name: 'Maya · MacBook', bg: '#A78BFA', initials: 'MC', conn: 'internet', hint: 'online' }, { name: 'Rohan · Pixel', bg: '#F472B6', initials: 'RS', conn: 'mesh', hint: '8 m · BLE' }, ].map(p => ( } iconColor="transparent" title={p.name} subtitle={p.hint} right={} /> ))}
Mediator
}/> }/>
); } function TSPageChat() { return ( <> Privacy
}/> }/> }/> }/>
Notifications
}/> }/> }/> }/>
Calls
}/> }/>
Storage
}/> {}}/>
); } function TSPageAbout() { return ( <>
A
Ajna Browser
Version 0.4.2 (24891) · Chromium 124
Up to date
Help
{}}/> {}}/> {}}/> {}}/>
); } // Generic "simple list" page used for the lower-importance settings — // keeps the page felt-complete without exploding the file size. function TSPageSimple({ routeKey, title, subtitle, rows }) { return ( <>
{rows.map((r, i) => { if (r.section) return {r.section}; return ; })}
); } function TSHeader({ route, title, subtitle, accent }) { return (
{route &&
{route}
}

{title}

{subtitle &&

{subtitle}

}
); } // ─── Main page ────────────────────────────────────────────── function TScreenSettings({ landscape = true, initial = 'identity' }) { const [active, setActive] = React.useState(initial); const [query, setQuery] = React.useState(''); // Build flat searchable list once const flatItems = React.useMemo(() => { const out = []; T_SETTINGS_NAV.forEach(s => s.items.forEach(it => out.push({ ...it, section: s.section }))); return out; }, []); const filtered = query.trim() ? flatItems.filter(i => i.label.toLowerCase().includes(query.toLowerCase().trim())) : null; const PAGES = { identity: () => , privacy: () => , private: () => , appearance: () => , tabgroups: () => , mesh: () => , chat: () => , about: () => , autofill: () => {} }, { title: 'Offer to save passwords', right: }, { title: 'Auto sign-in', right: }, { title: 'Password checkup', subtitle: '3 compromised · 8 weak · 12 reused', right: REVIEW, onClick: () => {} }, { section: 'Addresses' }, { title: 'Saved addresses', subtitle: '2 saved', onClick: () => {} }, { title: 'Save and fill addresses', right: }, { section: 'Payment methods' }, { title: 'Saved cards', subtitle: '3 cards', onClick: () => {} }, { title: 'Save and fill payment methods', right: }, { title: 'Allow sites to check if you have payment methods saved', right: }, ]}/>, search: () => }, { title: 'Show search suggestions', right: }, { title: 'Show trending searches', right: }, { section: 'Manage' }, { title: 'Site search shortcuts', subtitle: 'Type @gh, @wiki, @lin to search inside specific sites', onClick: () => {} }, ]}/>, startup: () => }, { title: 'Continue where you left off', right: , subtitle: 'Restores tabs and tab groups from your last session.' }, { title: 'Open a specific page or set of pages…', right: , onClick: () => {} }, ]}/>, default: () => DEFAULT }, ]}/>, perf: () => }, { title: 'Show memory usage on tab cards', right: }, { section: 'Energy' }, { title: 'Energy saver', subtitle: 'Limit background activity and visual effects.', right: }, { section: 'Prefetch' }, { title: 'Preload pages', subtitle: 'Makes browsing and search faster. Uses cookies.', right: }, ]}/>, downloads: () => {} }, { title: 'Ask where to save each file before downloading', right: }, { title: "Show downloads when they're done", right: }, ]}/>, languages: () => PRIMARY }, { title: 'हिन्दी (हिंदी)' }, { title: 'Deutsch' }, { title: 'Add languages…', onClick: () => {} }, { section: 'Translation' }, { title: 'Offer to translate pages not in your languages', right: }, { title: 'Translate using', right: }, ]}/>, a11y: () => }, { title: 'Larger text', subtitle: 'Increases base font size system-wide.', right: }, { title: 'High contrast mode', right: }, { title: 'Reduce motion', subtitle: 'Disables non-essential animations.', right: }, { title: 'Underline links', right: }, { title: 'Screen reader optimizations', right: }, ]}/>, system: () => }, { title: 'Use hardware acceleration when available', right: }, { title: 'Use prediction service to load pages more quickly', right: }, { section: 'Proxy' }, { title: 'Network proxy', subtitle: 'Direct connection — no proxy configured.', onClick: () => {} }, ]}/>, reset: () => {} }, { title: 'Clean up computer', subtitle: 'Find and remove harmful software.', onClick: () => {} }, { title: 'Sign out and forget this device', danger: true, onClick: () => {} }, ]}/>, extensions: () => }, { title: 'Stylus', subtitle: 'User stylesheets · Access to all sites', right: }, { title: 'Vimium', subtitle: 'Keyboard shortcuts · Access to all sites', right: }, { title: 'Manage extensions…', subtitle: 'Open ajna://extensions', onClick: () => {} }, ]}/>, }; const Page = PAGES[active] || PAGES.identity; return (
{/* Left nav rail */} {/* Right page */}
); } Object.assign(window, { TScreenSettings, T_SETTINGS_NAV, T_SETTING_ROUTES, TSettingRow, TSectionLabel, TToggle, TSelect, TChip, });