// Mobile Settings — iOS-style drill-down navigation. // Pattern: top-level list grouped by section → tap to drill into a sub-page // → back button returns to the list. Reuses the iPad's setting categories // (T_SETTINGS_NAV) and many of its sub-pages (TSPageIdentity, TSPagePrivacy, // etc.) since they're vertically-flowing row layouts that work at narrow // widths. Mobile-specific chrome wraps each sub-page. // Local IcMask — defined here because the global IcMask (in tablet-private.jsx) // loads AFTER this file, and we reference it at module-scope inside M_SETTINGS_NAV. const MS_IcMask = ({ s = 14 }) => ( ); // ─── Tiny primitives (mobile-tuned versions of the iPad ones) ───── function MSToggle({ on, onChange }) { return ( ); } function MSRow({ icon, iconColor, title, subtitle, right, onClick, danger, last }) { return (
{icon && (
{icon}
)}
{title}
{subtitle &&
{subtitle}
}
{right || (onClick && ( ))}
); } function MSCard({ children, label, sub }) { return ( <> {label && (
{label}
{sub &&
{sub}
}
)}
{children}
); } function MSChip({ children, color = M_ACCENT }) { return ( {children} ); } function MSSelect({ value, options, onChange }) { return ( ); } // ─── Nav config (mirrors iPad's T_SETTINGS_NAV, mobile icons) ──── const M_SETTINGS_NAV = [ { section: 'Account', items: [ { id: 'identity', label: 'You & Ajna', sub: 'Identity, devices, sync', color: '#A78BFA', icon: , badge: '3 devices' }, { id: 'autofill', label: 'Autofill & passwords', sub: '128 saved · 3 compromised', color: '#F472B6', icon: }, ]}, { section: 'Privacy', items: [ { id: 'privacy', label: 'Privacy & security', sub: 'Strict tracking protection · ON', color: '#6EE7B7', icon: }, { id: 'private', label: 'Private browsing', sub: 'Always-on protections', color: '#C4B5FD', icon: }, ]}, { section: 'Browser', items: [ { id: 'appearance',label: 'Appearance', sub: 'Theme, accent, layout', color: '#FBBF24', icon: }, { id: 'search', label: 'Search engine', sub: 'Ajna · privacy', color: M_ACCENT_B, icon: }, { id: 'startup', label: 'On startup', sub: 'Continue where you left off', color: '#22D3EE', icon: }, { id: 'default', label: 'Default browser', sub: 'Currently default', color: '#10B981', icon: }, { id: 'tabgroups', label: 'Tab groups', sub: 'Share over mesh · auto-archive', color: '#60A5FA', icon: }, { id: 'perf', label: 'Performance', sub: 'Memory + energy saver', color: '#F59E0B', icon: }, ]}, { section: 'Ajna network', items: [ { id: 'mesh', label: 'Mesh & peers', sub: '3 online · BLE + mediator', color: '#A78BFA', icon: }, { id: 'chat', label: 'Chat & messaging', sub: 'Read receipts, calls', color: M_ACCENT_B, icon: }, ]}, { section: 'Advanced', items: [ { id: 'downloads', label: 'Downloads', sub: 'iCloud Drive · Ajna', color: '#0EA5E9', icon: }, { id: 'languages', label: 'Languages', sub: 'English (US) · 2 others', color: '#84CC16', icon: }, { id: 'a11y', label: 'Accessibility', sub: 'Text size, motion, contrast', color: '#EC4899', icon: }, { id: 'system', label: 'System', sub: 'Hardware acceleration, proxy', color: M_FG_MUTED, icon: }, { id: 'reset', label: 'Reset settings', sub: 'Restore defaults', color: '#F87171', icon: }, ]}, { section: 'About', items: [ { id: 'about', label: 'About Ajna', sub: 'v0.4.2 · up to date', color: M_FG_MUTED, icon: }, ]}, ]; // ─── Sub-page bodies — mobile-tuned variants of the iPad pages ──── function MSPageIdentity() { 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', label: 'MC' }, { bg: '#22D3EE', label: 'MC' }, { bg: '#F472B6', label: 'MC' }, { bg: '#FBBF24', label: 'MC' }, { bg: '#10B981', label: 'MC' }, { bg: '#EF4444', label: 'MC' }, ]; 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]); return ( <> {/* Identity hero — name and avatar are editable; handle and DID are not. */}
{editing ? ( setName(e.target.value)} onBlur={() => setEditing(false)} onKeyDown={(e) => { if (e.key === 'Enter') setEditing(false); }} style={{ width: '100%', background: 'var(--m-tint)', border: '1px solid rgba(96,165,250,0.45)', borderRadius: 7, padding: '4px 8px', color: M_FG, fontSize: 15, fontWeight: 600, fontFamily: 'Geist', letterSpacing: '-0.02em', outline: 0, }} /> ) : ( )}
@noah-okafor
did:key:z6Mk…9kTp
{/* Avatar picker — appears when camera badge is tapped */} {picking && (
Pick a color
{avatars.map((a, i) => ( ))}
)} }/> SET}/> {}} last/> } title="iPhone (this device)" subtitle="Active now" right={THIS}/> } title="iPad Pro" subtitle="Last seen 4m" right={BLE}/> } title="MacBook Air" subtitle="Last seen 2h" right={NET} last/> ); } function MSPagePrivacy() { return ( <>
Strict protection · ON
Blocks third-party cookies and trackers.
}/> }/> }/> } last/> } iconColor="#FBBF24" title="Location" subtitle="Ask" onClick={() => {}}/> } iconColor="#F472B6" title="Camera" subtitle="Ask" onClick={() => {}}/> } iconColor="#22D3EE" title="Microphone" subtitle="Ask" onClick={() => {}}/> } iconColor="#A78BFA" title="Notifications" subtitle="Allow on 4 sites" onClick={() => {}} last/> {}}/> {}} last/> ); } function MSPagePrivate() { return ( <>
Private windows are isolated
Own cookies, cache, history — discarded on close.
ENFORCED}/> ENFORCED}/> }/> } last/> }/> } last/> }/> } last/> ); } function MSPageAppearance() { 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 ( <>
{[ { id: 'auto', label: 'Auto', 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 ( ); })}
{[ { 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 => (
}/> }/> }/> } last/> }/> {}} last/> ); } function MSPageMesh() { return ( <>
Online
{[ { l: 'Peers', v: '3', s: 'BLE' }, { l: 'Relay', v: '1', s: 'online' }, { l: 'Speed', v: '24 KB/s', s: 'last 1m' }, ].map(x => (
{x.l}
{x.v}
{x.s}
))}
} iconColor="#22D3EE" title="Bluetooth LE mesh" subtitle="Nearby devices, no internet" right={}/> } iconColor={M_ACCENT_B} title="Mediator routing" subtitle="Relay via mediator.ajna.dev" right={}/> }/> } last/> } iconColor="transparent" title="Aishwarya · iPhone" subtitle="12m · BLE" right={BLE}/> } iconColor="transparent" title="Maya · MacBook" subtitle="Online" right={NET}/> } iconColor="transparent" title="Rohan · Pixel" subtitle="8m · BLE" right={BLE} last/> }/> } last/> ); } function MSPageChat() { return ( <> }/> }/> }/> } last/> }/> }/> }/> } last/> }/> } last/> }/> {}} last/> ); } function MSPageTabGroups() { return ( <> }/> }/> } last/> } iconColor="#A78BFA" title="Sync over" right={}/> }/> }/> } last/> }/> } last/> ); } function MSPageAbout() { return ( <>
A
Ajna Browser
v0.4.2 (24891)
Up to date
{}}/> {}}/> {}}/> {}} last/> ); } // Generic simple page — covers the lower-importance settings function MSPageSimple({ rows }) { // rows is a flat array where {section: '...'} starts a new card and the rest are MSRow props const cards = []; let current = { label: null, rows: [] }; rows.forEach(r => { if (r.section) { if (current.rows.length) cards.push(current); current = { label: r.section, rows: [] }; } else { current.rows.push(r); } }); if (current.rows.length) cards.push(current); return ( <> {cards.map((c, i) => ( {c.rows.map((r, j) => )} ))} ); } // ─── Page registry ───────────────────────────────────────── const M_SETTINGS_PAGES = { identity: () => , privacy: () => , private: () => , appearance: () => , mesh: () => , chat: () => , tabgroups: () => , 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 cards', right: }, ]}/>, search: () => }, { title: 'Show suggestions', right: }, { title: 'Show trending', right: }, { section: 'Shortcuts' }, { title: 'Site search shortcuts', subtitle: '@gh, @wiki, @lin to scope', onClick: () => {} }, ]}/>, startup: () => }, { title: 'Continue where you left off', subtitle: 'Restores tabs from last session', right: }, { title: 'Open a specific page…', onClick: () => {} }, ]}/>, default: () => DEFAULT }, ]}/>, perf: () => }, { title: 'Show memory on tab cards', right: }, { section: 'Energy' }, { title: 'Energy saver', right: }, { section: 'Prefetch' }, { title: 'Preload pages', subtitle: 'Faster browsing · uses cookies', right: }, ]}/>, downloads: () => {} }, { title: 'Ask before downloading', right: }, { title: 'Show when done', right: }, ]}/>, languages: () => PRIMARY }, { title: 'हिन्दी (हिंदी)' }, { title: 'Deutsch' }, { title: 'Add languages…', onClick: () => {} }, { section: 'Translation' }, { title: 'Offer to translate', right: }, { title: 'Translate using', right: }, ]}/>, a11y: () => }, { title: 'Larger text', right: }, { title: 'High contrast', right: }, { title: 'Reduce motion', right: }, { title: 'Underline links', right: }, { title: 'Screen reader optimizations', right: }, ]}/>, system: () => }, { title: 'Hardware acceleration', right: }, { title: 'Page prediction', right: }, { section: 'Network' }, { title: 'Proxy', subtitle: 'Direct connection — no proxy', onClick: () => {} }, ]}/>, reset: () => {} }, { title: 'Sign out and forget this device', danger: true, onClick: () => {} }, ]}/>, }; // ─── Header / breadcrumb (mobile) ────────────────────────── function MSHeader({ subPage, onBack }) { const all = M_SETTINGS_NAV.flatMap(s => s.items); const meta = subPage ? all.find(i => i.id === subPage) : null; return (
{subPage ? ( ) : (
A
)}
{meta ? meta.label : 'Settings'}
{meta && meta.sub &&
{meta.sub}
}
); } // ─── Main Settings screen ────────────────────────────────── function MScreenSettings() { const [subPage, setSubPage] = React.useState(null); const [query, setQuery] = React.useState(''); const flat = M_SETTINGS_NAV.flatMap(s => s.items.map(i => ({ ...i, section: s.section }))); const filtered = query.trim() ? flat.filter(i => i.label.toLowerCase().includes(query.toLowerCase().trim())) : null; // Sub-page view if (subPage) { const Page = M_SETTINGS_PAGES[subPage]; return (
setSubPage(null)}/>
{Page ? :
Coming soon
}
); } // Top-level list return (
{MIc.search({ s: 14 })} setQuery(e.target.value)} placeholder="Search settings" style={{ flex: 1, background: 'transparent', border: 0, outline: 0, color: M_FG, fontSize: 12.5, fontFamily: 'inherit', minWidth: 0 }} />
{filtered ? ( {filtered.length === 0 ?
No matches
: filtered.map((it, i) => ( { setSubPage(it.id); setQuery(''); }} last={i === filtered.length - 1} /> )) } ) : ( M_SETTINGS_NAV.map((sec, i) => ( {sec.items.map((it, j) => ( {it.badge} : undefined} onClick={() => setSubPage(it.id)} last={j === sec.items.length - 1} /> ))} )) )}
); } Object.assign(window, { MScreenSettings, M_SETTINGS_NAV });