// Mobile Library v2 — Ajna-native designs for the menu's library section. // Replaces MScreenLibrary. Each screen has identity-aware chrome (peer/device // source chips, sync state, verified hashes) instead of a generic Chromium // list. Routed by setScreen() from mobile-variants.jsx. // ─── Shared chrome ────────────────────────────────────────────── function MLHeader({ icon, color, title, sub, badge, tools }) { return (
{icon}
{title}
{badge}
{sub &&
{sub}
}
{tools}
); } function MLSearch({ value, onChange, placeholder, shortcut = '⌘F' }) { return (
{MIc.search({ s: 14 })} onChange(e.target.value)} placeholder={placeholder} style={{ flex: 1, background: 'transparent', border: 0, outline: 0, color: M_FG, fontSize: 13, fontFamily: 'inherit', minWidth: 0 }}/> {value ? : {shortcut}}
); } function MLChip({ active, onClick, children, color }) { return ( ); } function MLCard({ children }) { return (
{children}
); } function MLPage({ children }) { return (
{children}
); } // ─── History ─────────────────────────────────────────────────── function MScreenHistory({ onOpen }) { const [q, setQ] = React.useState(''); const [filter, setFilter] = React.useState('all'); // 'all', or a device id const ql = q.toLowerCase(); const matches = (it) => { if (filter !== 'all' && it.device !== filter) return false; if (!ql) return true; return it.title.toLowerCase().includes(ql) || it.url.toLowerCase().includes(ql); }; const filtered = A_HISTORY.filter(matches); const grouped = filtered.reduce((acc, it) => { (acc[it.day] = acc[it.day] || []).push(it); return acc; }, {}); const deviceChips = [ { id: 'all', label: 'All', count: A_HISTORY.length }, { id: 'thisIphone',label: 'iPhone', color: '#C4B5FD', count: A_HISTORY.filter(h => h.device === 'thisIphone').length }, { id: 'ipad', label: 'iPad', color: '#93C5FD', count: A_HISTORY.filter(h => h.device === 'ipad').length }, { id: 'mac', label: 'Mac', color: '#93C5FD', count: A_HISTORY.filter(h => h.device === 'mac').length }, ]; return ( } color={M_ACCENT_B} title="History" sub="ajna://history · synced across devices" /> {/* Cross-device activity band — the thing Chrome doesn't have */}
Today · across devices
{A_HISTORY.filter(h => h.day === 'Today').length}
sites
{A_HISTORY_STATS.map(s => (
{s.count}
))}
{deviceChips.map(c => ( setFilter(c.id)}> {c.label} {c.count} ))}
{Object.keys(grouped).length === 0 && (
No history matches.
)} {Object.entries(grouped).map(([day, items]) => (
{day}
{items.length} {items.length === 1 ? 'visit' : 'visits'}
{items.map((it, i) => (
onOpen && onOpen(it)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 12px', borderTop: i === 0 ? 0 : '1px solid ' + M_BORDER_SOFT, cursor: 'pointer', }}>
{it.ts}
{it.title}
{it.url}
))}
))} ); } // ─── Bookmarks ───────────────────────────────────────────────── function MScreenBookmarks({ onOpen }) { const [q, setQ] = React.useState(''); const [folder, setFolder] = React.useState('All'); const ql = q.toLowerCase(); const filtered = A_BOOKMARKS.filter(it => { if (folder !== 'All' && it.folder !== folder) return false; if (!ql) return true; return it.title.toLowerCase().includes(ql) || it.url.toLowerCase().includes(ql); }); const recent = [...A_BOOKMARKS].sort((a, b) => { const score = s => /day/.test(s.saved) ? 1 : /week/.test(s.saved) ? 2 : 3; return score(a) - score(b); }).slice(0, 3); return ( } color="#FBBF24" title="Bookmarks" sub={A_BOOKMARKS.length + ' saved · ' + A_BOOKMARKS.filter(b => b.shared).length + ' shared with mesh'} /> {/* Folder pills */}
setFolder('All')}>All {A_BOOKMARKS.length} {A_BOOKMARK_FOLDERS.map(f => ( setFolder(f.name)} color={f.color}> {f.name} {f.count} ))}
{/* Recently added when no search */} {!q && folder === 'All' && (
Recently added
{recent.map((it, i) => (
onOpen && onOpen(it)} style={{ padding: 10, background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 10, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 7, minHeight: 78, }}>
{it.title}
{it.saved}
))}
)}
{folder === 'All' ? 'All bookmarks' : folder} {filtered.length}
{filtered.length === 0 &&
No matches
} {filtered.map((it, i) => { const folderMeta = A_BOOKMARK_FOLDERS.find(f => f.name === it.folder); return (
onOpen && onOpen(it)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 12px', borderTop: i === 0 ? 0 : '1px solid ' + M_BORDER_SOFT, cursor: 'pointer', }}>
{it.title}
{it.url}
{it.shared && ( )} {folderMeta && }
); })} ); } // ─── Downloads ───────────────────────────────────────────────── function MScreenDownloads({ onOpen }) { const totalBytes = A_DOWNLOADS.reduce((a, d) => a + d.bytes, 0); const fmtBytes = (n) => n >= 1e9 ? (n/1e9).toFixed(2) + ' GB' : n >= 1e6 ? (n/1e6).toFixed(1) + ' MB' : n >= 1e3 ? (n/1e3).toFixed(0) + ' KB' : n + ' B'; const active = A_DOWNLOADS.find(d => d.status === 'active'); const done = A_DOWNLOADS.filter(d => d.status === 'done'); return ( } color="#10B981" title="Downloads" sub={A_DOWNLOADS.length + ' files · ' + fmtBytes(totalBytes) + ' on this device'} /> {/* Storage band */}
Saved to
iCloud Drive / Ajna
{fmtBytes(totalBytes)} used 50 GB total
{active && (
In progress
{active.name}
{fmtBytes(active.bytes)} / {fmtBytes(active.total)} · {active.speed}
)}
Recent
{done.map((it, i) => (
onOpen && onOpen(it)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 12px', borderTop: i === 0 ? 0 : '1px solid ' + M_BORDER_SOFT, cursor: 'pointer', }}>
{it.name}
{fmtBytes(it.bytes)} · {it.time} {it.verified && VERIFIED } {it.encrypted && ENCRYPTED }
))} ); } // ─── Recently closed ─────────────────────────────────────────── function MScreenRecentlyClosed({ onOpen }) { return ( } color="#22D3EE" title="Recently closed" sub={A_RECENTLY_CLOSED.reduce((a, s) => a + s.tabs.length, 0) + ' tabs · ' + A_RECENTLY_CLOSED.length + ' sessions'} /> {A_RECENTLY_CLOSED.map((s, si) => (
{s.session}
{s.when}
{s.tabs.map((it, i) => (
onOpen && onOpen(it)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', borderTop: i === 0 ? 0 : '1px solid ' + M_BORDER_SOFT, cursor: 'pointer', }}>
{it.title}
{it.url}
↺
))}
))} ); } // ─── Passwords ───────────────────────────────────────────────── function MScreenPasswords() { const [q, setQ] = React.useState(''); const [filter, setFilter] = React.useState('all'); const ql = q.toLowerCase(); const matches = (p) => { if (filter !== 'all' && p.flag !== filter) return false; if (!ql) return true; return p.site.toLowerCase().includes(ql) || p.user.toLowerCase().includes(ql); }; const filtered = A_PASSWORDS.filter(matches); const flagColor = { compromised: '#F87171', weak: '#FBBF24', reused: '#A78BFA' }; const flagLabel = { compromised: 'COMPROMISED', weak: 'WEAK', reused: 'REUSED' }; return ( } color="#F472B6" title="Passwords" sub={A_PASSWORDS_HEALTH.total + ' saved · encrypted with device key'} /> {/* Health banner */}
Password checkup
Review weak and exposed credentials
{[ { k: 'compromised', n: A_PASSWORDS_HEALTH.compromised, c: '#F87171' }, { k: 'weak', n: A_PASSWORDS_HEALTH.weak, c: '#FBBF24' }, { k: 'reused', n: A_PASSWORDS_HEALTH.reused, c: '#A78BFA' }, ].map(s => (
{s.n}
{s.k}
))}
setFilter('all')}>All {A_PASSWORDS.length} {['compromised', 'weak', 'reused'].map(k => ( setFilter(k)} color={flagColor[k]}> {k.charAt(0).toUpperCase() + k.slice(1)} {A_PASSWORDS.filter(p => p.flag === k).length} ))}
{filtered.length === 0 &&
No matches
} {filtered.map((p, i) => (
{p.domain}
{p.user} · {p.last}
{p.flag && ( {flagLabel[p.flag]} )}
))} ); } // ─── Reading list ────────────────────────────────────────────── function MScreenReadingList({ onOpen }) { const [filter, setFilter] = React.useState('unread'); const filtered = A_READING_LIST.filter(r => filter === 'all' || (filter === 'unread' ? !r.read : r.read)); return ( } color="#10B981" title="Reading list" sub={A_READING_LIST.filter(r => !r.read).length + ' unread · ' + A_READING_LIST.reduce((a, r) => a + r.mins, 0) + ' min total'} />
setFilter('unread')}>Unread {A_READING_LIST.filter(r => !r.read).length} setFilter('all')}>All {A_READING_LIST.length} setFilter('read')}>Read {A_READING_LIST.filter(r => r.read).length}
{filtered.map((r, i) => (
onOpen && onOpen(r)} style={{ padding: 14, background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 12, cursor: 'pointer', opacity: r.read ? 0.6 : 1, }}>
{r.url}
{!r.read && }
{r.title}
{r.preview}
{r.mins} min · {r.saved}
))}
); } // ─── Site permissions ────────────────────────────────────────── function MScreenSitePermissions() { const permIcon = (id) => { const Wrap = (d) => {d}; const map = { pin: Wrap(<>), camera: Wrap(<>), mic: Wrap(<>), bell: Wrap(<>), clip: Wrap(<>), play: Wrap(), cookie: Wrap(<>), disk: Wrap(<>), }; return map[id] || map.pin; }; return ( } color="#6EE7B7" title="Site permissions" sub="Per-site grants · revoked instantly" />
By permission
{A_PERMS_SUMMARY.map((p, i) => (
{permIcon(p.icon)}
{p.label}
{p.allowed} allow · {p.blocked} block
›
))}
Recent sites
{A_PERMS_SITES.slice(0, 5).map((s, i) => (
{s.domain}
{Object.entries(s.perms).map(([k, v]) => { const meta = A_PERMS_SUMMARY.find(p => p.id === k) || { label: k, color: M_FG_MUTED }; return ( {meta.label.toLowerCase()} · {v} ); })}
))} ); } Object.assign(window, { MScreenHistory, MScreenBookmarks, MScreenDownloads, MScreenRecentlyClosed, MScreenPasswords, MScreenReadingList, MScreenSitePermissions, });