1import { createEffect, createMemo, createSignal, lazy, onCleanup, onMount, Show, Suspense } from "solid-js";2import type { PasskeyEntry, PendingPasskeyRequest, VaultEntry } from "../shared/types";3import { LockView } from "./views/Lock";4import { VaultView, type SortOrder } from "./views/Vault";5import { EntryView } from "./views/Entry";6import { AddView } from "./views/Add";7import { PeachWordmark } from "./components/PeachMark";8import { PasskeyApprovalView } from "./views/PasskeyApproval";9import { PasskeyEntryView } from "./views/PasskeyEntry";10import { extractDomain } from "../shared/domain";1112const ImportView = lazy(() => import("./views/Import").then(m => ({ default: m.ImportView })));13const ExportView = lazy(() => import("./views/Export").then(m => ({ default: m.ExportView })));14const CJKExport = lazy(() => import("./views/CJKExport").then(m => ({ default: m.CJKExportView })));15const CJKImport = lazy(() => import("./views/CJKImport").then(m => ({ default: m.CJKImportView })));16const SettingsView = lazy(() => import("./views/Settings").then(m => ({ default: m.SettingsView })));17const HealthView = lazy(() => import("./views/Health").then(m => ({ default: m.HealthView })));18const TrashView = lazy(() => import("./views/TrashView").then(m => ({ default: m.TrashView })));1920type View =21 | "lock"22 | "entry"23 | "list"24 | "add"25 | "settings"26 | "import"27 | "export"28 | "health"29 | "trash";30type BootState = "loading" | "ready";3132const canarySuppressMap = new Map<string, boolean>();33let shellRingAnimation: Animation | null = null;3435export function isCanarySuppressed(entryId: string): boolean {36 return canarySuppressMap.get(entryId) ?? false;37}3839export function setCanarySuppressed(entryId: string, suppressed: boolean): void {40 canarySuppressMap.set(entryId, suppressed);41}4243export function clearCanarySuppressions(): void {44 canarySuppressMap.clear();45}4647export function triggerRing() {48 const shell = document.getElementById("hd-shell");49 if (!shell) return;5051 shellRingAnimation?.cancel();52 shell.dataset.glowing = "true";53 const animation = shell.animate(54 [55 { offset: 0, boxShadow: "var(--copy-shadow)" },56 {57 offset: 0.3,58 boxShadow:59 "0 2px 8px rgba(0,0,0,0.5), 0 14px 48px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(217,104,48,0.58), 0 0 22px rgba(217,104,48,0.18)",60 },61 { offset: 1, boxShadow: "var(--copy-shadow)" },62 ],63 {64 duration: 720,65 easing: "cubic-bezier(0.4, 0, 0.2, 1)",66 fill: "none",67 }68 );69 shellRingAnimation = animation;70 const clearGlow = () => {71 if (shellRingAnimation !== animation) return;72 shellRingAnimation = null;73 delete shell.dataset.glowing;74 };75 animation.onfinish = clearGlow;76 animation.oncancel = clearGlow;77}787980export function triggerPipPulse() {81 const pip = document.querySelector(".peach-status-pip, .pip");82 if (pip) {83 pip.classList.remove("pulse");84 void (pip as HTMLElement).offsetWidth;85 pip.classList.add("pulse");86 }87}8889function humanizeError(error: string | undefined): string | undefined {90 if (!error) return error;91 if (error === "STORAGE_QUOTA_EXCEEDED") {92 return "Peach has run out of browser storage. Delete some entries or clear browser storage to continue.";93 }94 return error;95}9697async function sendMessage(msg: any): Promise<any> {98 const MESSAGE_TIMEOUT_MS = 5000;99100 return new Promise((resolve) => {101 let settled = false;102 const timeoutId = window.setTimeout(() => {103 if (settled) return;104 settled = true;105 resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });106 }, MESSAGE_TIMEOUT_MS);107108 try {109 chrome.runtime.sendMessage(msg, (response) => {110 if (settled) return;111 settled = true;112 window.clearTimeout(timeoutId);113114 if (chrome.runtime.lastError) {115 resolve({116 ok: false,117 error:118 chrome.runtime.lastError.message ?? "SERVICE_WORKER_UNAVAILABLE",119 });120 return;121 }122123 if (response === undefined) {124 resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });125 return;126 }127128 if (response && response.ok === false) {129 response.error = humanizeError(response.error);130 }131 resolve(response);132 });133 } catch (error) {134 if (settled) return;135 settled = true;136 window.clearTimeout(timeoutId);137 resolve({138 ok: false,139 error:140 error instanceof Error ? error.message : "SERVICE_WORKER_UNAVAILABLE",141 });142 }143 });144}145146export { sendMessage };147148const ENTRY_TRANSITION_EXIT_MS = 95;149const ENTRY_TRANSITION_SETTLE_MS = 135;150151export default function App() {152 const [bootState, setBootState] = createSignal<BootState>("loading");153 const [view, setView] = createSignal<View>("lock");154 const [contentPhase, setContentPhase] = createSignal<"enter" | "exit" | "idle">(155 "enter"156 );157 const [contentTransitioning, setContentTransitioning] = createSignal(false);158 const [hasVault, setHasVault] = createSignal(false);159 const [entries, setEntries] = createSignal<VaultEntry[]>([]);160 const [selectedEntry, setSelectedEntry] = createSignal<VaultEntry | null>(null);161 const [editEntry, setEditEntry] = createSignal<VaultEntry | undefined>(undefined);162 const [accentColor, setAccentColor] = createSignal("#D96830");163 const [theme, setTheme] = createSignal<"dark" | "light">("dark");164 const [lockOnClose, setLockOnClose] = createSignal(true);165 const [autoLockMinutes, setAutoLockMinutes] = createSignal(5);166 const [breachMonitoring, setBreachMonitoring] = createSignal(true);167 const [trashRetentionDays, setTrashRetentionDays] = createSignal(30);168 const [restoreView, setRestoreView] = createSignal<"cjk" | "file" | null>(null);169 const [pendingPasskey, setPendingPasskey] = createSignal<PendingPasskeyRequest | null>(null);170 const [currentTabDomain, setCurrentTabDomain] = createSignal<string>("");171 const [sortOrder, setSortOrder] = createSignal<SortOrder>("url-first");172 const [listSearchSeed, setListSearchSeed] = createSignal("");173 const [listSearchSeedNonce, setListSearchSeedNonce] = createSignal(0);174175 let contentPhaseTimer: number | undefined;176177 createEffect(() => {178 document.documentElement.style.setProperty("--ac", accentColor());179 });180181 createEffect(() => {182 document.documentElement.classList.toggle("light", theme() === "light");183 document.body.classList.toggle("light", theme() === "light");184 });185186 const selectedIndex = createMemo(() => {187 const currentId = selectedEntry()?.id;188 if (!currentId) return entries().length > 0 ? 0 : -1;189 return entries().findIndex((entry) => entry.id === currentId);190 });191192 async function applyTheme(t: "dark" | "light") {193 setTheme(t);194 await sendMessage({ type: "UPDATE_SETTINGS", payload: { theme: t } });195 }196197 async function applyLockOnClose(enabled: boolean) {198 setLockOnClose(enabled);199 await sendMessage({200 type: "UPDATE_SETTINGS",201 payload: { lockOnClose: enabled },202 });203 }204205 async function applyAutoLockMinutes(minutes: number) {206 setAutoLockMinutes(minutes);207 await sendMessage({208 type: "UPDATE_SETTINGS",209 payload: { autoLockMinutes: minutes },210 });211 }212213 async function applyBreachMonitoring(enabled: boolean) {214 setBreachMonitoring(enabled);215 await sendMessage({216 type: "UPDATE_SETTINGS",217 payload: { breachMonitoring: enabled },218 });219 }220221 onMount(async () => {222 const [unlockResponse, vaultResponse] = await Promise.all([223 sendMessage({ type: "IS_UNLOCKED" }),224 sendMessage({ type: "HAS_VAULT" }),225 ]);226 const unlocked = Boolean(227 (unlockResponse as { ok: boolean; data?: boolean }).data228 );229 const vaultExists = Boolean(230 (vaultResponse as { ok: boolean; data?: boolean }).data231 );232 setHasVault(vaultExists);233 await restoreSettings();234235 if (unlocked && vaultExists) {236 await openVault();237 }238239 await refreshPendingPasskey();240 await refreshCurrentTab();241242 243 const handleTabActivated = () => { void refreshCurrentTab(); };244 const handleTabUpdated = (_tabId: number, changeInfo: { url?: string; status?: string }) => {245 if (changeInfo.url || changeInfo.status === "complete") void refreshCurrentTab();246 };247 try {248 chrome.tabs.onActivated.addListener(handleTabActivated);249 chrome.tabs.onUpdated.addListener(handleTabUpdated);250 onCleanup(() => {251 chrome.tabs.onActivated.removeListener(handleTabActivated);252 chrome.tabs.onUpdated.removeListener(handleTabUpdated);253 });254 } catch {255 256 }257258 setBootState("ready");259 document.getElementById("pre-lock")?.setAttribute("hidden", "true");260261 262 263 264 265 void Promise.all([266 import("./views/Settings").catch(() => {}),267 import("./views/Import").catch(() => {}),268 import("./views/Export").catch(() => {}),269 import("./views/Health").catch(() => {}),270 import("./views/TrashView").catch(() => {}),271 import("./views/CJKExport").catch(() => {}),272 import("./views/CJKImport").catch(() => {}),273 ]);274275 const handlePageHide = () => {276 if (!lockOnClose() || view() === "lock") return;277 chrome.runtime.sendMessage({ type: "LOCK" });278 };279280 window.addEventListener("pagehide", handlePageHide);281 onCleanup(() => window.removeEventListener("pagehide", handlePageHide));282283 284 285 const handleRuntimeMessage = (msg: { type?: string }) => {286 if (msg?.type === "VAULT_LOCKED" && view() !== "lock") handleLock();287 };288 chrome.runtime.onMessage.addListener(handleRuntimeMessage);289 onCleanup(() => chrome.runtime.onMessage.removeListener(handleRuntimeMessage));290291 const handleGlobalKeydown = (e: KeyboardEvent) => {292 const v = view();293 const inInput = (e.target as HTMLElement)?.tagName === "INPUT"294 || (e.target as HTMLElement)?.tagName === "TEXTAREA"295 || (e.target as HTMLElement)?.isContentEditable;296 const isPrintableSearchKey =297 e.key.length === 1 &&298 !e.ctrlKey &&299 !e.metaKey &&300 !e.altKey;301302 303 if (e.key === "Escape") {304 if (v === "list") { setView("entry"); return; }305 if (v === "settings" || v === "import" || v === "export" || v === "add" || v === "health") { handleBack(); return; }306 }307308 309 if ((e.key === "/" || (e.ctrlKey && e.key === "f")) && !inInput) {310 e.preventDefault();311 openList();312 return;313 }314315 if (v === "entry" && !inInput && isPrintableSearchKey) {316 e.preventDefault();317 primeListSearch(e.key);318 return;319 }320321 322 if (e.ctrlKey && e.key === "l") {323 e.preventDefault();324 void handleHeaderLock();325 return;326 }327328 329 if (v === "entry" && !inInput) {330 331 if (e.key === "c") {332 e.preventDefault();333 const entry = selectedEntry();334 if (entry?.password) {335 void sendMessage({ type: "COPY", payload: { text: entry.password, label: "Password" } })336 .then(() => triggerRing());337 }338 return;339 }340 if (e.key === "u") {341 e.preventDefault();342 const entry = selectedEntry();343 if (entry?.username) {344 void sendMessage({ type: "COPY", payload: { text: entry.username, label: "Username" } })345 .then(() => triggerRing());346 }347 return;348 }349 350 if (e.key === "n") {351 e.preventDefault();352 handleAdd();353 return;354 }355 356 if (e.key === "ArrowLeft" || e.key === "ArrowUp") {357 e.preventDefault();358 navigate(-1);359 return;360 }361 if (e.key === "ArrowRight" || e.key === "ArrowDown") {362 e.preventDefault();363 navigate(1);364 return;365 }366 }367 };368 window.addEventListener("keydown", handleGlobalKeydown);369 onCleanup(() => window.removeEventListener("keydown", handleGlobalKeydown));370371 const handleStorageChanged = (372 changes: Record<string, chrome.storage.StorageChange>,373 areaName: string374 ) => {375 if (areaName !== "session") return;376 if (!Object.keys(changes).some((key) => key.startsWith("passkey_pending_"))) {377 return;378 }379 void refreshPendingPasskey();380 };381382 chrome.storage.onChanged.addListener(handleStorageChanged);383 onCleanup(() => chrome.storage.onChanged.removeListener(handleStorageChanged));384 });385386 async function refreshCurrentTab() {387 try {388 const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });389 const url = tab?.url ?? tab?.pendingUrl ?? "";390 setCurrentTabDomain(url ? (extractDomain(url) ?? "") : "");391 } catch {392 setCurrentTabDomain("");393 }394 }395396 async function refreshPendingPasskey() {397 const res = await sendMessage({ type: "GET_PENDING_PASSKEY" });398 setPendingPasskey((res as { ok: boolean; data?: PendingPasskeyRequest | null }).data ?? null);399 }400401 async function restoreSettings() {402 const res = await sendMessage({ type: "GET_SETTINGS" });403 const s = (res as { ok: boolean; data?: any }).data ?? {};404 if (s.accentColor) setAccentColor(s.accentColor);405 setTheme(s.theme === "light" ? "light" : "dark");406 setLockOnClose(s.lockOnClose !== false);407 setAutoLockMinutes(typeof s.autoLockMinutes === "number" ? s.autoLockMinutes : 5);408 setBreachMonitoring(s.breachMonitoring !== false);409 setTrashRetentionDays(typeof s.trashRetentionDays === "number" ? s.trashRetentionDays : 30);410 }411412 async function applyTrashRetention(days: number) {413 setTrashRetentionDays(days);414 await sendMessage({ type: "UPDATE_SETTINGS", payload: { trashRetentionDays: days } });415 }416417 function primeListSearch(seed: string) {418 setListSearchSeed(seed);419 setListSearchSeedNonce((value) => value + 1);420 openList();421 }422423 424 425 426 async function loadEntries(): Promise<VaultEntry[] | null> {427 const response = await sendMessage({ type: "GET_ENTRIES" });428 const res = response as { ok: boolean; data?: VaultEntry[]; error?: string };429430 431 432 433 434 if (!res.ok) {435 if (436 res.error === "vault locked" ||437 res.error === "SERVICE_WORKER_UNAVAILABLE" ||438 (typeof res.error === "string" && res.error.includes("locked"))439 ) {440 handleLock();441 return null; 442 }443 return [];444 }445446 const loadedEntries = res.data ?? [];447 setEntries(loadedEntries);448449 const currentId = selectedEntry()?.id;450 if (currentId) {451 setSelectedEntry(452 loadedEntries.find((entry) => entry.id === currentId) ?? loadedEntries[0] ?? null453 );454 }455456 return loadedEntries;457 }458459 async function openVault(preferredEntryId?: string) {460 461 const retDays = trashRetentionDays();462 if (retDays > 0) {463 void sendMessage({464 type: "PURGE_EXPIRED_TRASH",465 payload: { retentionMs: retDays * 86_400_000 },466 });467 }468469 const loadedEntries = await loadEntries();470471 472 473 if (loadedEntries === null) return;474475 476 let nextSelectedEntry: VaultEntry | null = null;477 if (preferredEntryId) {478 nextSelectedEntry = loadedEntries.find((e) => e.id === preferredEntryId) ?? null;479 }480 if (!nextSelectedEntry) {481 const tabDomain = currentTabDomain();482 if (tabDomain) {483 nextSelectedEntry = loadedEntries.find((e) => {484 if (e.type === "login" && e.url) return (extractDomain(e.url) ?? "") === tabDomain;485 if (e.type === "passkey" && e.rpId) return e.rpId === tabDomain;486 return false;487 }) ?? null;488 }489 }490 nextSelectedEntry ??= loadedEntries[0] ?? null;491492 setSelectedEntry(nextSelectedEntry);493 setEditEntry(undefined);494 setContentTransitioning(false);495 setContentPhase("enter");496 queueContentIdle();497 setView("entry");498 }499500 async function handleUnlock() {501 setHasVault(true);502 triggerPipPulse();503 await restoreSettings();504 await openVault();505 }506507 function handleSelectEntry(entry: VaultEntry) {508 setSelectedEntry(entry);509 setContentTransitioning(false);510 setContentPhase("enter");511 queueContentIdle();512 setView("entry");513 }514515 function handleAdd() {516 setEditEntry(undefined);517 setView("add");518 }519520 async function handleDelete() {521 const entry = selectedEntry();522 if (!entry) return;523 await sendMessage({ type: "DELETE_ENTRY", payload: { id: entry.id } });524 const loadedEntries = await loadEntries() ?? [];525 setSelectedEntry(loadedEntries[0] ?? null);526 setView("entry");527 }528529 async function handleDeleteMany(ids: string[]) {530 for (const id of ids) {531 await sendMessage({ type: "DELETE_ENTRY", payload: { id } });532 }533 const loadedEntries = await loadEntries() ?? [];534 535 const stillExists = loadedEntries.find(e => e.id === selectedEntry()?.id);536 if (!stillExists) setSelectedEntry(loadedEntries[0] ?? null);537 }538539 async function handleSave(savedEntry?: VaultEntry) {540 await openVault(savedEntry?.id);541 }542543 function handleBack() {544 setEditEntry(undefined);545 setView("entry");546 }547548 function handleLock() {549 clearCanarySuppressions();550 setEntries([]);551 setSelectedEntry(null);552 setEditEntry(undefined);553 setContentPhase("idle");554 setView("lock");555 }556557 function handleHeaderLock() {558 559 560 561 handleLock();562 void sendMessage({ type: "LOCK" });563 }564565 function navigate(dir: number) {566 const allEntries = entries();567 if (allEntries.length === 0) return;568 const currentIndex = selectedIndex();569 const baseIndex = currentIndex >= 0 ? currentIndex : 0;570 const nextIndex = (baseIndex + dir + allEntries.length) % allEntries.length;571 setSelectedEntry(allEntries[nextIndex]);572 setContentPhase("enter");573 queueContentIdle();574 }575576 function openList() {577 setView("list");578 }579580 function openHealth() {581 setEditEntry(undefined);582 setView("health");583 }584585 function handleOpenCJKImport() {586 setRestoreView("cjk");587 }588589 function handleOpenFileImport() {590 setRestoreView("file");591 }592593 const isShellOverlayOpen = () => view() !== "entry" || restoreView() !== null;594595 function handleFixEntry(entry: VaultEntry) {596 if (entry.type === "passkey") {597 setSelectedEntry(entry);598 setView("entry");599 return;600 }601 setEditEntry(entry);602 setView("add");603 }604605 const isLockedView = () => view() === "lock";606 const selectedPasskeyEntry = createMemo(() =>607 selectedEntry()?.type === "passkey" ? (selectedEntry() as PasskeyEntry) : null608 );609610 async function handleApprovePendingPasskey() {611 const pending = pendingPasskey();612 if (!pending) return;613 await sendMessage({ type: "APPROVE_PASSKEY", payload: { requestId: pending.requestId } });614 setPendingPasskey(null);615 }616617 async function handleDenyPendingPasskey() {618 const pending = pendingPasskey();619 if (!pending) return;620 await sendMessage({ type: "DENY_PASSKEY", payload: { requestId: pending.requestId } });621 setPendingPasskey(null);622 }623624 function queueContentIdle(after?: () => void) {625 if (contentPhaseTimer) window.clearTimeout(contentPhaseTimer);626 contentPhaseTimer = window.setTimeout(() => {627 setContentPhase("idle");628 after?.();629 }, ENTRY_TRANSITION_SETTLE_MS);630 }631632 return (633 <div class="popup-root peach-theme">634 <Show when={bootState() === "ready"}>635 <Show636 when={!pendingPasskey()}637 fallback={638 <PasskeyApprovalView639 type={pendingPasskey()!.type}640 rpName={pendingPasskey()!.rpName}641 rpId={pendingPasskey()!.rpId}642 userName={pendingPasskey()!.userName}643 userDisplayName={pendingPasskey()!.userDisplayName}644 onApprove={handleApprovePendingPasskey}645 onDeny={handleDenyPendingPasskey}646 />647 }648 >649 <Show650 when={!isLockedView()}651 fallback={652 <LockView653 hasVault={hasVault()}654 ready={bootState() === "ready"}655 onUnlock={handleUnlock}656 />657 }658 >659 <section660 id="hd-shell"661 class="peach-shell peach-theme"662 data-surface="extension"663 >664 <header class="peach-chrome" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>665 <PeachWordmark unlocked />666 <div class="peach-chrome-actions">667 <button668 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"669 onClick={() => setView("settings")}670 aria-label="Settings"671 >672 <svg width="14" height="14" viewBox="0 0 14 14" fill="none">673 <path674 d="M5.91 1.11C6.38-.02 7.62-.02 8.09 1.11L8.31 1.64C8.48 2.05 8.91 2.27 9.34 2.17L9.9 2.04C11.1 1.76 11.98 2.64 11.7 3.84L11.57 4.4C11.47 4.83 11.69 5.26 12.1 5.43L12.63 5.65C13.76 6.12 13.76 7.36 12.63 7.83L12.1 8.05C11.69 8.22 11.47 8.65 11.57 9.08L11.7 9.64C11.98 10.84 11.1 11.72 9.9 11.44L9.34 11.31C8.91 11.21 8.48 11.43 8.31 11.84L8.09 12.37C7.62 13.5 6.38 13.5 5.91 12.37L5.69 11.84C5.52 11.43 5.09 11.21 4.66 11.31L4.1 11.44C2.9 11.72 2.02 10.84 2.3 9.64L2.43 9.08C2.53 8.65 2.31 8.22 1.9 8.05L1.37 7.83C.24 7.36.24 6.12 1.37 5.65L1.9 5.43C2.31 5.26 2.53 4.83 2.43 4.4L2.3 3.84C2.02 2.64 2.9 1.76 4.1 2.04L4.66 2.17C5.09 2.27 5.52 2.05 5.69 1.64L5.91 1.11Z"675 stroke="currentColor"676 stroke-width="0.9"677 />678 <circle cx="7" cy="7" r="2.1" stroke="currentColor" stroke-width="0.9" />679 </svg>680 </button>681 <button682 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"683 onClick={handleAdd}684 aria-label="New entry"685 >686 <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round">687 <path d="M5.5 1v9M1 5.5h9" />688 </svg>689 </button>690 <button691 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-lock-btn"692 onClick={() => void handleHeaderLock()}693 aria-label="Lock vault"694 >695 <svg class="peach-lock-icon" width="14" height="16" viewBox="0 0 14 16" fill="none">696 <path697 d="M3.75 6V4.75C3.75 2.96 5.21 1.5 7 1.5C8.79 1.5 10.25 2.96 10.25 4.75V6"698 stroke="currentColor"699 stroke-width="1"700 stroke-linecap="round"701 />702 <rect x="1.5" y="6" width="11" height="8.5" rx="2.2" stroke="currentColor" stroke-width="1" />703 <circle cx="7" cy="10.25" r="1" fill="currentColor" />704 </svg>705 </button>706 </div>707 </header>708709 <div class="peach-shell-body">710 <div class="peach-shell-veil"></div>711 <div class="peach-content-frame" data-content-phase={contentPhase()} classList={{ navigating: contentTransitioning() }}>712 <Show713 when={selectedPasskeyEntry()}714 fallback={715 <EntryView716 entry={selectedEntry()}717 onDelete={handleDelete}718 onFieldSaved={() => void loadEntries()}719 onEscape={() => { setView("list"); }}720 />721 }722 >723 <PasskeyEntryView entry={selectedPasskeyEntry()} onDelete={handleDelete} />724 </Show>725 </div>726727 <section class="peach-search-wrap" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>728 <div class="peach-search-bar">729 <span class="peach-search-icon">730 <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">731 <circle cx="5.5" cy="5.5" r="3.75" />732 <path d="M8.75 8.75L11.5 11.5" />733 </svg>734 </span>735 <input736 class="peach-search-input"737 placeholder="search vault..."738 autocomplete="off"739 aria-label="Search vault entries"740 onClick={openList}741 onFocus={openList}742 readOnly743 />744 <div class="peach-search-meta">745 <span class="peach-search-counter">746 {entries().length > 0747 ? `${selectedIndex() + 1} / ${entries().length}`748 : "0 entries"}749 </span>750 <span class="peach-divider"></span>751 <button752 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"753 onClick={() => navigate(-1)}754 aria-label="Previous entry"755 disabled={entries().length === 0}756 >757 <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">758 <path d="M5 1L1 5.5L5 10" />759 </svg>760 </button>761 <button762 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"763 onClick={() => navigate(1)}764 aria-label="Next entry"765 disabled={entries().length === 0}766 >767 <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">768 <path d="M1 1L5 5.5L1 10" />769 </svg>770 </button>771 </div>772 </div>773 </section>774 </div>775776 <Show when={view() === "list"}>777 <VaultView778 entries={entries()}779 selectedEntryId={selectedEntry()?.id}780 currentTabDomain={currentTabDomain()}781 sortOrder={sortOrder()}782 searchSeed={listSearchSeed()}783 searchSeedNonce={listSearchSeedNonce()}784 onSelectEntry={handleSelectEntry}785 onSortOrderChange={setSortOrder}786 onAdd={handleAdd}787 onClose={() => setView("entry")}788 onOpenTrash={() => setView("trash")}789 onDeleteMany={handleDeleteMany}790 />791 </Show>792 <Show when={view() === "settings"}>793 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>794 <SettingsView795 entriesCount={entries().length}796 breachMonitoring={breachMonitoring()}797 lockOnClose={lockOnClose()}798 autoLockMinutes={autoLockMinutes()}799 trashRetentionDays={trashRetentionDays()}800 theme={theme()}801 onBreachMonitoringChange={applyBreachMonitoring}802 onLockOnCloseChange={applyLockOnClose}803 onAutoLockMinutesChange={applyAutoLockMinutes}804 onTrashRetentionChange={applyTrashRetention}805 onThemeChange={applyTheme}806 onBack={handleBack}807 onImport={() => setView("import")}808 onExport={() => setView("export")}809 onBreachCheckDone={loadEntries}810 onOpenHealth={openHealth}811 onOpenCJKImport={handleOpenCJKImport}812 onOpenFileImport={handleOpenFileImport}813 />814 </Suspense>815 </Show>816 <Show when={view() === "add"}>817 <AddView818 entry={editEntry()}819 entries={entries()}820 onBack={handleBack}821 onSave={handleSave}822 />823 </Show>824 <Show when={view() === "import"}>825 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>826 <ImportView onBack={handleBack} onImport={handleSave} />827 </Suspense>828 </Show>829 <Show when={view() === "export"}>830 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>831 <ExportView onBack={handleBack} onRequiresUnlock={handleLock} />832 </Suspense>833 </Show>834 <Show when={view() === "health"}>835 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>836 <HealthView837 entries={entries()}838 onFixEntry={handleFixEntry}839 onBack={() => setView("settings")}840 onRefresh={loadEntries}841 />842 </Suspense>843 </Show>844 <Show when={view() === "trash"}>845 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>846 <TrashView847 onBack={() => setView("list")}848 onRestored={() => void loadEntries()}849 />850 </Suspense>851 </Show>852 <Show when={restoreView() === "cjk"}>853 <CJKImport854 mode="onboarding"855 onBack={() => setRestoreView(null)}856 onDone={async () => {857 setRestoreView(null);858 await handleUnlock();859 }}860 />861 </Show>862 <Show when={restoreView() === "file"}>863 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>864 <ImportView865 mode="onboarding"866 replacesExistingVault={true}867 onBack={() => setRestoreView(null)}868 onImport={async () => {869 setRestoreView(null);870 await handleUnlock();871 }}872 />873 </Suspense>874 </Show>875 </section>876 </Show>877 </Show>878 </Show>879 </div>880 );881}