theseus/address-picker.html

67 lines
3.6 KiB
HTML
Raw Permalink Normal View History

Theseus UX batch: tabs, address history, password autofill MVP, home cards Six user-visible improvements + supporting infra, all uncommitted from the earlier session-in-progress state. Ships together in one release. Chrome / tabs - Same-size tabs: flex 1 1 0 with max 200px, min 60px. Container gets overflow: hidden so many tabs shrink evenly instead of scrolling out. - Drag-and-drop tab reordering. HTML5 drag events on each .tab; drop side chosen by pointer x within target (Chrome UX). New move-tab IPC splices the tabs array + re-emits. Address bar - Persistent history at userData/history.json capped at 500 LRU. Ranked by host-prefix > url-prefix > contains > title-contains > recency. - Floating suggestions dropdown (addressPicker WebContentsView) anchored under the URL bar. Debounced 80ms input; ArrowUp/Down forward to the picker via address-cursor IPC; Enter fires goURL; blur closes after 160ms so click-through registers. New files address-picker.html + address-picker-preload.js. Cleared by existing clearHistoryOnQuit. Password autofill (A.2 MVP) - Green key chip in the address bar appears when the vault is UNLOCKED and the active tab's host has matching credentials (exact hostname match for phase 1; eTLD+1 upgrade queued as A.2.5). - Click chip → floating picker of usernames. Click a match → main.js runs a small script in the active tab: finds first visible input[type=password]:not([disabled]), walks the same form for a visible text/email/tel/url/search input whose name/id/autocomplete matches /username|user|email|login|account|id/, fills both via the native value setter + dispatches input/change so React/Vue-controlled inputs update. New files pw-fill.html + pw-fill-preload.js. - emitPwAvailability fires from pushNav + vault setup/unlock/lock so the chip's visibility + count stays accurate. Bookmarks bar - Right-click context menu on the favorites bar. On empty area: "Add current page" (or "Remove current page" if already saved). On a specific bookmark: "Open", "Edit title…" (prompt), "Remove", plus the add/remove-current entry. Uses a shared .ctxmenu style mirroring the settings ctxmenu (dark/light aware). - Empty-state text updated to mention right-click. Home page - Larger responsive card grid: auto-fill minmax(260-280px, 1fr) with breakpoints at 600/900/1200. Cards have a subtitle line, a colored badge (on-chain / Sia / server / custom), and edit affordances that reveal only in Edit mode. - User-editable set: Edit toggle reveals per-card ✎/✕ + a dashed "+ Add card" tile. Modal for add/edit with title / URL / subtitle / badge. Reset-to-defaults button. - Persisted at userData/home-cards.json. New home-preload.js exposes window.home = { getCards, setCards, resetCards, navigate }. IPC handlers in main.js validate sender.getURL() matches our own home.html — third-party pages see the API shape via the preload but can't act on the user's local cards. - Fallback set of 2 cards renders when window.home is unavailable (e.g. opening home.html directly outside Electron for preview) so the grid is never blank. Docs - TheseusNavigator/ROADMAP-identity-wallet.md — the phased plan for the two independent strands (password manager A.2/3, browser wallet B.1-6). Committed earlier this session; re-listed here for context. - TheseusNavigator/SESSION-PROMPT-identity-wallet.md — pastable kickoff for the next session picking up either strand. Files added to build.files: address-picker.html, address-picker-preload.js, pw-fill.html, pw-fill-preload.js, home-preload.js.
2026-08-17 02:17:12 +02:00
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
html, body { margin: 0; background: transparent; }
.menu { background: #1c222c; border: 1px solid #ffffff26; border-radius: 10px; box-shadow: 0 12px 34px #000c; overflow: hidden; color: #e7eaf1; }
.item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #ffffff08; }
.item:last-child { border-bottom: 0; }
.item:hover, .item.on { background: #ffffff12; }
.item .ic { flex: none; font-size: 12px; color: #7f8aa0; width: 14px; text-align: center; }
.item .txt { flex: 1; overflow: hidden; }
.item .url { color: #e7eaf1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.item .ttl { color: #7f8aa0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .del { flex: none; padding: 2px 8px; border-radius: 5px; color: #7f8aa0; font-size: 14px;
opacity: 0; cursor: pointer; user-select: none; }
.item:hover .del { opacity: .65; }
.item .del:hover { opacity: 1; color: #f6768a; background: rgba(246,118,138,.12); }
Theseus UX batch: tabs, address history, password autofill MVP, home cards Six user-visible improvements + supporting infra, all uncommitted from the earlier session-in-progress state. Ships together in one release. Chrome / tabs - Same-size tabs: flex 1 1 0 with max 200px, min 60px. Container gets overflow: hidden so many tabs shrink evenly instead of scrolling out. - Drag-and-drop tab reordering. HTML5 drag events on each .tab; drop side chosen by pointer x within target (Chrome UX). New move-tab IPC splices the tabs array + re-emits. Address bar - Persistent history at userData/history.json capped at 500 LRU. Ranked by host-prefix > url-prefix > contains > title-contains > recency. - Floating suggestions dropdown (addressPicker WebContentsView) anchored under the URL bar. Debounced 80ms input; ArrowUp/Down forward to the picker via address-cursor IPC; Enter fires goURL; blur closes after 160ms so click-through registers. New files address-picker.html + address-picker-preload.js. Cleared by existing clearHistoryOnQuit. Password autofill (A.2 MVP) - Green key chip in the address bar appears when the vault is UNLOCKED and the active tab's host has matching credentials (exact hostname match for phase 1; eTLD+1 upgrade queued as A.2.5). - Click chip → floating picker of usernames. Click a match → main.js runs a small script in the active tab: finds first visible input[type=password]:not([disabled]), walks the same form for a visible text/email/tel/url/search input whose name/id/autocomplete matches /username|user|email|login|account|id/, fills both via the native value setter + dispatches input/change so React/Vue-controlled inputs update. New files pw-fill.html + pw-fill-preload.js. - emitPwAvailability fires from pushNav + vault setup/unlock/lock so the chip's visibility + count stays accurate. Bookmarks bar - Right-click context menu on the favorites bar. On empty area: "Add current page" (or "Remove current page" if already saved). On a specific bookmark: "Open", "Edit title…" (prompt), "Remove", plus the add/remove-current entry. Uses a shared .ctxmenu style mirroring the settings ctxmenu (dark/light aware). - Empty-state text updated to mention right-click. Home page - Larger responsive card grid: auto-fill minmax(260-280px, 1fr) with breakpoints at 600/900/1200. Cards have a subtitle line, a colored badge (on-chain / Sia / server / custom), and edit affordances that reveal only in Edit mode. - User-editable set: Edit toggle reveals per-card ✎/✕ + a dashed "+ Add card" tile. Modal for add/edit with title / URL / subtitle / badge. Reset-to-defaults button. - Persisted at userData/home-cards.json. New home-preload.js exposes window.home = { getCards, setCards, resetCards, navigate }. IPC handlers in main.js validate sender.getURL() matches our own home.html — third-party pages see the API shape via the preload but can't act on the user's local cards. - Fallback set of 2 cards renders when window.home is unavailable (e.g. opening home.html directly outside Electron for preview) so the grid is never blank. Docs - TheseusNavigator/ROADMAP-identity-wallet.md — the phased plan for the two independent strands (password manager A.2/3, browser wallet B.1-6). Committed earlier this session; re-listed here for context. - TheseusNavigator/SESSION-PROMPT-identity-wallet.md — pastable kickoff for the next session picking up either strand. Files added to build.files: address-picker.html, address-picker-preload.js, pw-fill.html, pw-fill-preload.js, home-preload.js.
2026-08-17 02:17:12 +02:00
.empty { padding: 14px; color: #7f8aa0; font-size: 12.5px; text-align: center; }
@media (prefers-color-scheme: light) {
.menu { background: #ffffff; border-color: rgba(0,0,0,.15); color: #1a1f28; }
.item:hover, .item.on { background: rgba(0,0,0,.05); }
.item { border-bottom-color: rgba(0,0,0,.06); }
.item .url { color: #1a1f28; }
.item .ttl, .item .ic, .item .del, .empty { color: #7b8494; }
Theseus UX batch: tabs, address history, password autofill MVP, home cards Six user-visible improvements + supporting infra, all uncommitted from the earlier session-in-progress state. Ships together in one release. Chrome / tabs - Same-size tabs: flex 1 1 0 with max 200px, min 60px. Container gets overflow: hidden so many tabs shrink evenly instead of scrolling out. - Drag-and-drop tab reordering. HTML5 drag events on each .tab; drop side chosen by pointer x within target (Chrome UX). New move-tab IPC splices the tabs array + re-emits. Address bar - Persistent history at userData/history.json capped at 500 LRU. Ranked by host-prefix > url-prefix > contains > title-contains > recency. - Floating suggestions dropdown (addressPicker WebContentsView) anchored under the URL bar. Debounced 80ms input; ArrowUp/Down forward to the picker via address-cursor IPC; Enter fires goURL; blur closes after 160ms so click-through registers. New files address-picker.html + address-picker-preload.js. Cleared by existing clearHistoryOnQuit. Password autofill (A.2 MVP) - Green key chip in the address bar appears when the vault is UNLOCKED and the active tab's host has matching credentials (exact hostname match for phase 1; eTLD+1 upgrade queued as A.2.5). - Click chip → floating picker of usernames. Click a match → main.js runs a small script in the active tab: finds first visible input[type=password]:not([disabled]), walks the same form for a visible text/email/tel/url/search input whose name/id/autocomplete matches /username|user|email|login|account|id/, fills both via the native value setter + dispatches input/change so React/Vue-controlled inputs update. New files pw-fill.html + pw-fill-preload.js. - emitPwAvailability fires from pushNav + vault setup/unlock/lock so the chip's visibility + count stays accurate. Bookmarks bar - Right-click context menu on the favorites bar. On empty area: "Add current page" (or "Remove current page" if already saved). On a specific bookmark: "Open", "Edit title…" (prompt), "Remove", plus the add/remove-current entry. Uses a shared .ctxmenu style mirroring the settings ctxmenu (dark/light aware). - Empty-state text updated to mention right-click. Home page - Larger responsive card grid: auto-fill minmax(260-280px, 1fr) with breakpoints at 600/900/1200. Cards have a subtitle line, a colored badge (on-chain / Sia / server / custom), and edit affordances that reveal only in Edit mode. - User-editable set: Edit toggle reveals per-card ✎/✕ + a dashed "+ Add card" tile. Modal for add/edit with title / URL / subtitle / badge. Reset-to-defaults button. - Persisted at userData/home-cards.json. New home-preload.js exposes window.home = { getCards, setCards, resetCards, navigate }. IPC handlers in main.js validate sender.getURL() matches our own home.html — third-party pages see the API shape via the preload but can't act on the user's local cards. - Fallback set of 2 cards renders when window.home is unavailable (e.g. opening home.html directly outside Electron for preview) so the grid is never blank. Docs - TheseusNavigator/ROADMAP-identity-wallet.md — the phased plan for the two independent strands (password manager A.2/3, browser wallet B.1-6). Committed earlier this session; re-listed here for context. - TheseusNavigator/SESSION-PROMPT-identity-wallet.md — pastable kickoff for the next session picking up either strand. Files added to build.files: address-picker.html, address-picker-preload.js, pw-fill.html, pw-fill-preload.js, home-preload.js.
2026-08-17 02:17:12 +02:00
}
</style></head>
<body>
<div class="menu"><div id="list"></div></div>
<script>
const $ = (id) => document.getElementById(id);
const esc = (s) => String(s || "").replace(/</g, "&lt;").replace(/"/g, "&quot;");
let items = []; let cursor = -1;
function report() { requestAnimationFrame(() => { try { window.picker.resize(document.querySelector(".menu").offsetHeight); } catch (e) {} }); }
function paint() {
const list = $("list");
if (!items.length) { list.innerHTML = `<div class="empty">No history yet.</div>`; report(); return; }
list.innerHTML = items.map((h, i) =>
`<div class="item ${i === cursor ? "on" : ""}" data-url="${esc(h.url)}"><span class="ic">🕘</span><span class="txt"><div class="url">${esc(h.url)}</div>${h.title ? `<div class="ttl">${esc(h.title)}</div>` : ""}</span><span class="del" data-del="${esc(h.url)}" title="Remove from history"></span></div>`
Theseus UX batch: tabs, address history, password autofill MVP, home cards Six user-visible improvements + supporting infra, all uncommitted from the earlier session-in-progress state. Ships together in one release. Chrome / tabs - Same-size tabs: flex 1 1 0 with max 200px, min 60px. Container gets overflow: hidden so many tabs shrink evenly instead of scrolling out. - Drag-and-drop tab reordering. HTML5 drag events on each .tab; drop side chosen by pointer x within target (Chrome UX). New move-tab IPC splices the tabs array + re-emits. Address bar - Persistent history at userData/history.json capped at 500 LRU. Ranked by host-prefix > url-prefix > contains > title-contains > recency. - Floating suggestions dropdown (addressPicker WebContentsView) anchored under the URL bar. Debounced 80ms input; ArrowUp/Down forward to the picker via address-cursor IPC; Enter fires goURL; blur closes after 160ms so click-through registers. New files address-picker.html + address-picker-preload.js. Cleared by existing clearHistoryOnQuit. Password autofill (A.2 MVP) - Green key chip in the address bar appears when the vault is UNLOCKED and the active tab's host has matching credentials (exact hostname match for phase 1; eTLD+1 upgrade queued as A.2.5). - Click chip → floating picker of usernames. Click a match → main.js runs a small script in the active tab: finds first visible input[type=password]:not([disabled]), walks the same form for a visible text/email/tel/url/search input whose name/id/autocomplete matches /username|user|email|login|account|id/, fills both via the native value setter + dispatches input/change so React/Vue-controlled inputs update. New files pw-fill.html + pw-fill-preload.js. - emitPwAvailability fires from pushNav + vault setup/unlock/lock so the chip's visibility + count stays accurate. Bookmarks bar - Right-click context menu on the favorites bar. On empty area: "Add current page" (or "Remove current page" if already saved). On a specific bookmark: "Open", "Edit title…" (prompt), "Remove", plus the add/remove-current entry. Uses a shared .ctxmenu style mirroring the settings ctxmenu (dark/light aware). - Empty-state text updated to mention right-click. Home page - Larger responsive card grid: auto-fill minmax(260-280px, 1fr) with breakpoints at 600/900/1200. Cards have a subtitle line, a colored badge (on-chain / Sia / server / custom), and edit affordances that reveal only in Edit mode. - User-editable set: Edit toggle reveals per-card ✎/✕ + a dashed "+ Add card" tile. Modal for add/edit with title / URL / subtitle / badge. Reset-to-defaults button. - Persisted at userData/home-cards.json. New home-preload.js exposes window.home = { getCards, setCards, resetCards, navigate }. IPC handlers in main.js validate sender.getURL() matches our own home.html — third-party pages see the API shape via the preload but can't act on the user's local cards. - Fallback set of 2 cards renders when window.home is unavailable (e.g. opening home.html directly outside Electron for preview) so the grid is never blank. Docs - TheseusNavigator/ROADMAP-identity-wallet.md — the phased plan for the two independent strands (password manager A.2/3, browser wallet B.1-6). Committed earlier this session; re-listed here for context. - TheseusNavigator/SESSION-PROMPT-identity-wallet.md — pastable kickoff for the next session picking up either strand. Files added to build.files: address-picker.html, address-picker-preload.js, pw-fill.html, pw-fill-preload.js, home-preload.js.
2026-08-17 02:17:12 +02:00
).join("");
list.querySelectorAll(".item").forEach((el) => el.onclick = (ev) => {
// Delete-x click removes the entry instead of navigating.
if (ev.target.dataset.del) {
ev.stopPropagation();
const url = ev.target.dataset.del;
window.picker.forget(url);
// Optimistically drop it from the list so the UI reacts before main
// pushes the refreshed suggestions.
items = items.filter((h) => h.url !== url);
if (cursor >= items.length) cursor = items.length - 1;
paint();
return;
}
window.picker.pick(el.dataset.url);
});
Theseus UX batch: tabs, address history, password autofill MVP, home cards Six user-visible improvements + supporting infra, all uncommitted from the earlier session-in-progress state. Ships together in one release. Chrome / tabs - Same-size tabs: flex 1 1 0 with max 200px, min 60px. Container gets overflow: hidden so many tabs shrink evenly instead of scrolling out. - Drag-and-drop tab reordering. HTML5 drag events on each .tab; drop side chosen by pointer x within target (Chrome UX). New move-tab IPC splices the tabs array + re-emits. Address bar - Persistent history at userData/history.json capped at 500 LRU. Ranked by host-prefix > url-prefix > contains > title-contains > recency. - Floating suggestions dropdown (addressPicker WebContentsView) anchored under the URL bar. Debounced 80ms input; ArrowUp/Down forward to the picker via address-cursor IPC; Enter fires goURL; blur closes after 160ms so click-through registers. New files address-picker.html + address-picker-preload.js. Cleared by existing clearHistoryOnQuit. Password autofill (A.2 MVP) - Green key chip in the address bar appears when the vault is UNLOCKED and the active tab's host has matching credentials (exact hostname match for phase 1; eTLD+1 upgrade queued as A.2.5). - Click chip → floating picker of usernames. Click a match → main.js runs a small script in the active tab: finds first visible input[type=password]:not([disabled]), walks the same form for a visible text/email/tel/url/search input whose name/id/autocomplete matches /username|user|email|login|account|id/, fills both via the native value setter + dispatches input/change so React/Vue-controlled inputs update. New files pw-fill.html + pw-fill-preload.js. - emitPwAvailability fires from pushNav + vault setup/unlock/lock so the chip's visibility + count stays accurate. Bookmarks bar - Right-click context menu on the favorites bar. On empty area: "Add current page" (or "Remove current page" if already saved). On a specific bookmark: "Open", "Edit title…" (prompt), "Remove", plus the add/remove-current entry. Uses a shared .ctxmenu style mirroring the settings ctxmenu (dark/light aware). - Empty-state text updated to mention right-click. Home page - Larger responsive card grid: auto-fill minmax(260-280px, 1fr) with breakpoints at 600/900/1200. Cards have a subtitle line, a colored badge (on-chain / Sia / server / custom), and edit affordances that reveal only in Edit mode. - User-editable set: Edit toggle reveals per-card ✎/✕ + a dashed "+ Add card" tile. Modal for add/edit with title / URL / subtitle / badge. Reset-to-defaults button. - Persisted at userData/home-cards.json. New home-preload.js exposes window.home = { getCards, setCards, resetCards, navigate }. IPC handlers in main.js validate sender.getURL() matches our own home.html — third-party pages see the API shape via the preload but can't act on the user's local cards. - Fallback set of 2 cards renders when window.home is unavailable (e.g. opening home.html directly outside Electron for preview) so the grid is never blank. Docs - TheseusNavigator/ROADMAP-identity-wallet.md — the phased plan for the two independent strands (password manager A.2/3, browser wallet B.1-6). Committed earlier this session; re-listed here for context. - TheseusNavigator/SESSION-PROMPT-identity-wallet.md — pastable kickoff for the next session picking up either strand. Files added to build.files: address-picker.html, address-picker-preload.js, pw-fill.html, pw-fill-preload.js, home-preload.js.
2026-08-17 02:17:12 +02:00
report();
}
window.picker.onSuggestions((data) => { items = data.suggestions || []; cursor = -1; paint(); });
window.picker.onCursor((dir) => {
if (!items.length) return;
if (dir === "next") cursor = (cursor + 1) % items.length;
else if (dir === "prev") cursor = (cursor - 1 + items.length) % items.length;
else if (dir === "enter") { if (cursor >= 0) window.picker.pick(items[cursor].url); return; }
paint();
});
</script>
</body></html>