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;34let totpRingResetTimer: number | null = null;3536export function isCanarySuppressed(entryId: string): boolean {37 return canarySuppressMap.get(entryId) ?? false;38}3940export function setCanarySuppressed(entryId: string, suppressed: boolean): void {41 canarySuppressMap.set(entryId, suppressed);42}4344export function clearCanarySuppressions(): void {45 canarySuppressMap.clear();46}4748export function triggerRing() {49 const shell = document.getElementById("hd-shell");50 if (!shell) return;5152 shellRingAnimation?.cancel();53 shell.dataset.glowing = "true";54 const animation = shell.animate(55 [56 { offset: 0, boxShadow: "var(--copy-shadow)" },57 {58 offset: 0.3,59 boxShadow:60 "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)",61 },62 { offset: 1, boxShadow: "var(--copy-shadow)" },63 ],64 {65 duration: 720,66 easing: "cubic-bezier(0.4, 0, 0.2, 1)",67 fill: "none",68 }69 );70 shellRingAnimation = animation;71 const clearGlow = () => {72 if (shellRingAnimation !== animation) return;73 shellRingAnimation = null;74 delete shell.dataset.glowing;75 };76 animation.onfinish = clearGlow;77 animation.oncancel = clearGlow;78}7980export function triggerTotpRing() {81 const shell = document.getElementById("hd-shell");82 if (!shell) return;8384 shell.classList.remove("peach-shell--totp-ring");85 void shell.offsetWidth;86 shell.classList.add("peach-shell--totp-ring");8788 if (totpRingResetTimer !== null) {89 window.clearTimeout(totpRingResetTimer);90 }9192 totpRingResetTimer = window.setTimeout(() => {93 shell.classList.remove("peach-shell--totp-ring");94 totpRingResetTimer = null;95 }, 920);96}9798export function triggerPipPulse() {99 const pip = document.querySelector(".peach-status-pip, .pip");100 if (pip) {101 pip.classList.remove("pulse");102 void (pip as HTMLElement).offsetWidth;103 pip.classList.add("pulse");104 }105}106107function humanizeError(error: string | undefined): string | undefined {108 if (!error) return error;109 if (error === "STORAGE_QUOTA_EXCEEDED") {110 return "Peach has run out of browser storage. Delete some entries or clear browser storage to continue.";111 }112 return error;113}114115async function sendMessage(msg: any): Promise<any> {116 const MESSAGE_TIMEOUT_MS = 5000;117118 return new Promise((resolve) => {119 let settled = false;120 const timeoutId = window.setTimeout(() => {121 if (settled) return;122 settled = true;123 resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });124 }, MESSAGE_TIMEOUT_MS);125126 try {127 chrome.runtime.sendMessage(msg, (response) => {128 if (settled) return;129 settled = true;130 window.clearTimeout(timeoutId);131132 if (chrome.runtime.lastError) {133 resolve({134 ok: false,135 error:136 chrome.runtime.lastError.message ?? "SERVICE_WORKER_UNAVAILABLE",137 });138 return;139 }140141 if (response === undefined) {142 resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });143 return;144 }145146 if (response && response.ok === false) {147 response.error = humanizeError(response.error);148 }149 resolve(response);150 });151 } catch (error) {152 if (settled) return;153 settled = true;154 window.clearTimeout(timeoutId);155 resolve({156 ok: false,157 error:158 error instanceof Error ? error.message : "SERVICE_WORKER_UNAVAILABLE",159 });160 }161 });162}163164export { sendMessage };165166const ENTRY_TRANSITION_EXIT_MS = 95;167const ENTRY_TRANSITION_SETTLE_MS = 135;168169export default function App() {170 const [bootState, setBootState] = createSignal<BootState>("loading");171 const [view, setView] = createSignal<View>("lock");172 const [contentPhase, setContentPhase] = createSignal<"enter" | "exit" | "idle">(173 "enter"174 );175 const [contentTransitioning, setContentTransitioning] = createSignal(false);176 const [hasVault, setHasVault] = createSignal(false);177 const [entries, setEntries] = createSignal<VaultEntry[]>([]);178 const [selectedEntry, setSelectedEntry] = createSignal<VaultEntry | null>(null);179 const [editEntry, setEditEntry] = createSignal<VaultEntry | undefined>(undefined);180 const [accentColor, setAccentColor] = createSignal("#D96830");181 const [theme, setTheme] = createSignal<"dark" | "light">("dark");182 const [lockOnClose, setLockOnClose] = createSignal(true);183 const [autoLockMinutes, setAutoLockMinutes] = createSignal(5);184 const [breachMonitoring, setBreachMonitoring] = createSignal(true);185 const [trashRetentionDays, setTrashRetentionDays] = createSignal(30);186 const [restoreView, setRestoreView] = createSignal<"cjk" | "file" | null>(null);187 const [pendingPasskey, setPendingPasskey] = createSignal<PendingPasskeyRequest | null>(null);188 const [currentTabDomain, setCurrentTabDomain] = createSignal<string>("");189 const [sortOrder, setSortOrder] = createSignal<SortOrder>("url-first");190 const [listSearchSeed, setListSearchSeed] = createSignal("");191 const [listSearchSeedNonce, setListSearchSeedNonce] = createSignal(0);192193 let contentPhaseTimer: number | undefined;194195 createEffect(() => {196 document.documentElement.style.setProperty("--ac", accentColor());197 });198199 createEffect(() => {200 document.documentElement.classList.toggle("light", theme() === "light");201 document.body.classList.toggle("light", theme() === "light");202 });203204 const selectedIndex = createMemo(() => {205 const currentId = selectedEntry()?.id;206 if (!currentId) return entries().length > 0 ? 0 : -1;207 return entries().findIndex((entry) => entry.id === currentId);208 });209210 async function applyTheme(t: "dark" | "light") {211 setTheme(t);212 await sendMessage({ type: "UPDATE_SETTINGS", payload: { theme: t } });213 }214215 async function applyLockOnClose(enabled: boolean) {216 setLockOnClose(enabled);217 await sendMessage({218 type: "UPDATE_SETTINGS",219 payload: { lockOnClose: enabled },220 });221 }222223 async function applyAutoLockMinutes(minutes: number) {224 setAutoLockMinutes(minutes);225 await sendMessage({226 type: "UPDATE_SETTINGS",227 payload: { autoLockMinutes: minutes },228 });229 }230231 async function applyBreachMonitoring(enabled: boolean) {232 setBreachMonitoring(enabled);233 await sendMessage({234 type: "UPDATE_SETTINGS",235 payload: { breachMonitoring: enabled },236 });237 }238239 onMount(async () => {240 const [unlockResponse, vaultResponse] = await Promise.all([241 sendMessage({ type: "IS_UNLOCKED" }),242 sendMessage({ type: "HAS_VAULT" }),243 ]);244 const unlocked = Boolean(245 (unlockResponse as { ok: boolean; data?: boolean }).data246 );247 const vaultExists = Boolean(248 (vaultResponse as { ok: boolean; data?: boolean }).data249 );250 setHasVault(vaultExists);251 await restoreSettings();252253 if (unlocked && vaultExists) {254 await openVault();255 }256257 await refreshPendingPasskey();258 await refreshCurrentTab();259260 261 const handleTabActivated = () => { void refreshCurrentTab(); };262 const handleTabUpdated = (_tabId: number, changeInfo: { url?: string; status?: string }) => {263 if (changeInfo.url || changeInfo.status === "complete") void refreshCurrentTab();264 };265 try {266 chrome.tabs.onActivated.addListener(handleTabActivated);267 chrome.tabs.onUpdated.addListener(handleTabUpdated);268 onCleanup(() => {269 chrome.tabs.onActivated.removeListener(handleTabActivated);270 chrome.tabs.onUpdated.removeListener(handleTabUpdated);271 });272 } catch {273 274 }275276 setBootState("ready");277 document.getElementById("pre-lock")?.setAttribute("hidden", "true");278279 280 281 282 283 void Promise.all([284 import("./views/Settings").catch(() => {}),285 import("./views/Import").catch(() => {}),286 import("./views/Export").catch(() => {}),287 import("./views/Health").catch(() => {}),288 import("./views/TrashView").catch(() => {}),289 import("./views/CJKExport").catch(() => {}),290 import("./views/CJKImport").catch(() => {}),291 ]);292293 const handlePageHide = () => {294 if (!lockOnClose() || view() === "lock") return;295 chrome.runtime.sendMessage({ type: "LOCK" });296 };297298 window.addEventListener("pagehide", handlePageHide);299 onCleanup(() => window.removeEventListener("pagehide", handlePageHide));300301 302 303 const handleRuntimeMessage = (msg: { type?: string }) => {304 if (msg?.type === "VAULT_LOCKED" && view() !== "lock") handleLock();305 };306 chrome.runtime.onMessage.addListener(handleRuntimeMessage);307 onCleanup(() => chrome.runtime.onMessage.removeListener(handleRuntimeMessage));308309 const handleGlobalKeydown = (e: KeyboardEvent) => {310 const v = view();311 const inInput = (e.target as HTMLElement)?.tagName === "INPUT"312 || (e.target as HTMLElement)?.tagName === "TEXTAREA"313 || (e.target as HTMLElement)?.isContentEditable;314 const isPrintableSearchKey =315 e.key.length === 1 &&316 !e.ctrlKey &&317 !e.metaKey &&318 !e.altKey;319320 321 if (e.key === "Escape") {322 if (v === "list") { setView("entry"); return; }323 if (v === "settings" || v === "import" || v === "export" || v === "add" || v === "health") { handleBack(); return; }324 }325326 327 if ((e.key === "/" || (e.ctrlKey && e.key === "f")) && !inInput) {328 e.preventDefault();329 openList();330 return;331 }332333 if (v === "entry" && !inInput && isPrintableSearchKey) {334 e.preventDefault();335 primeListSearch(e.key);336 return;337 }338339 340 if (e.ctrlKey && e.key === "l") {341 e.preventDefault();342 void handleHeaderLock();343 return;344 }345346 347 if (v === "entry" && !inInput) {348 349 if (e.key === "c") {350 e.preventDefault();351 const entry = selectedEntry();352 if (entry?.password) {353 void sendMessage({ type: "COPY", payload: { text: entry.password, label: "Password" } })354 .then(() => triggerRing());355 }356 return;357 }358 if (e.key === "u") {359 e.preventDefault();360 const entry = selectedEntry();361 if (entry?.username) {362 void sendMessage({ type: "COPY", payload: { text: entry.username, label: "Username" } })363 .then(() => triggerRing());364 }365 return;366 }367 368 if (e.key === "n") {369 e.preventDefault();370 handleAdd();371 return;372 }373 374 if (e.key === "ArrowLeft" || e.key === "ArrowUp") {375 e.preventDefault();376 navigate(-1);377 return;378 }379 if (e.key === "ArrowRight" || e.key === "ArrowDown") {380 e.preventDefault();381 navigate(1);382 return;383 }384 }385 };386 window.addEventListener("keydown", handleGlobalKeydown);387 onCleanup(() => window.removeEventListener("keydown", handleGlobalKeydown));388389 const handleStorageChanged = (390 changes: Record<string, chrome.storage.StorageChange>,391 areaName: string392 ) => {393 if (areaName !== "session") return;394 if (!Object.keys(changes).some((key) => key.startsWith("passkey_pending_"))) {395 return;396 }397 void refreshPendingPasskey();398 };399400 chrome.storage.onChanged.addListener(handleStorageChanged);401 onCleanup(() => chrome.storage.onChanged.removeListener(handleStorageChanged));402 });403404 async function refreshCurrentTab() {405 try {406 const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });407 const url = tab?.url ?? tab?.pendingUrl ?? "";408 setCurrentTabDomain(url ? (extractDomain(url) ?? "") : "");409 } catch {410 setCurrentTabDomain("");411 }412 }413414 async function refreshPendingPasskey() {415 const res = await sendMessage({ type: "GET_PENDING_PASSKEY" });416 setPendingPasskey((res as { ok: boolean; data?: PendingPasskeyRequest | null }).data ?? null);417 }418419 async function restoreSettings() {420 const res = await sendMessage({ type: "GET_SETTINGS" });421 const s = (res as { ok: boolean; data?: any }).data ?? {};422 if (s.accentColor) setAccentColor(s.accentColor);423 setTheme(s.theme === "light" ? "light" : "dark");424 setLockOnClose(s.lockOnClose !== false);425 setAutoLockMinutes(typeof s.autoLockMinutes === "number" ? s.autoLockMinutes : 5);426 setBreachMonitoring(s.breachMonitoring !== false);427 setTrashRetentionDays(typeof s.trashRetentionDays === "number" ? s.trashRetentionDays : 30);428 }429430 async function applyTrashRetention(days: number) {431 setTrashRetentionDays(days);432 await sendMessage({ type: "UPDATE_SETTINGS", payload: { trashRetentionDays: days } });433 }434435 function primeListSearch(seed: string) {436 setListSearchSeed(seed);437 setListSearchSeedNonce((value) => value + 1);438 openList();439 }440441 442 443 444 async function loadEntries(): Promise<VaultEntry[] | null> {445 const response = await sendMessage({ type: "GET_ENTRIES" });446 const res = response as { ok: boolean; data?: VaultEntry[]; error?: string };447448 449 450 451 452 if (!res.ok) {453 if (454 res.error === "vault locked" ||455 res.error === "SERVICE_WORKER_UNAVAILABLE" ||456 (typeof res.error === "string" && res.error.includes("locked"))457 ) {458 handleLock();459 return null; 460 }461 return [];462 }463464 const loadedEntries = res.data ?? [];465 setEntries(loadedEntries);466467 const currentId = selectedEntry()?.id;468 if (currentId) {469 setSelectedEntry(470 loadedEntries.find((entry) => entry.id === currentId) ?? loadedEntries[0] ?? null471 );472 }473474 return loadedEntries;475 }476477 async function openVault(preferredEntryId?: string) {478 479 const retDays = trashRetentionDays();480 if (retDays > 0) {481 void sendMessage({482 type: "PURGE_EXPIRED_TRASH",483 payload: { retentionMs: retDays * 86_400_000 },484 });485 }486487 const loadedEntries = await loadEntries();488489 490 491 if (loadedEntries === null) return;492493 494 let nextSelectedEntry: VaultEntry | null = null;495 if (preferredEntryId) {496 nextSelectedEntry = loadedEntries.find((e) => e.id === preferredEntryId) ?? null;497 }498 if (!nextSelectedEntry) {499 const tabDomain = currentTabDomain();500 if (tabDomain) {501 nextSelectedEntry = loadedEntries.find((e) => {502 if (e.type === "login" && e.url) return (extractDomain(e.url) ?? "") === tabDomain;503 if (e.type === "passkey" && e.rpId) return e.rpId === tabDomain;504 return false;505 }) ?? null;506 }507 }508 nextSelectedEntry ??= loadedEntries[0] ?? null;509510 setSelectedEntry(nextSelectedEntry);511 setEditEntry(undefined);512 setContentTransitioning(false);513 setContentPhase("enter");514 queueContentIdle();515 setView("entry");516 }517518 async function handleUnlock() {519 setHasVault(true);520 triggerPipPulse();521 await restoreSettings();522 await openVault();523 }524525 function handleSelectEntry(entry: VaultEntry) {526 setSelectedEntry(entry);527 setContentTransitioning(false);528 setContentPhase("enter");529 queueContentIdle();530 setView("entry");531 }532533 function handleAdd() {534 setEditEntry(undefined);535 setView("add");536 }537538 async function handleDelete() {539 const entry = selectedEntry();540 if (!entry) return;541 await sendMessage({ type: "DELETE_ENTRY", payload: { id: entry.id } });542 const loadedEntries = await loadEntries() ?? [];543 setSelectedEntry(loadedEntries[0] ?? null);544 setView("entry");545 }546547 async function handleDeleteMany(ids: string[]) {548 for (const id of ids) {549 await sendMessage({ type: "DELETE_ENTRY", payload: { id } });550 }551 const loadedEntries = await loadEntries() ?? [];552 553 const stillExists = loadedEntries.find(e => e.id === selectedEntry()?.id);554 if (!stillExists) setSelectedEntry(loadedEntries[0] ?? null);555 }556557 async function handleSave(savedEntry?: VaultEntry) {558 await openVault(savedEntry?.id);559 }560561 function handleBack() {562 setEditEntry(undefined);563 setView("entry");564 }565566 function handleLock() {567 clearCanarySuppressions();568 setEntries([]);569 setSelectedEntry(null);570 setEditEntry(undefined);571 setContentPhase("idle");572 setView("lock");573 }574575 function handleHeaderLock() {576 577 578 579 handleLock();580 void sendMessage({ type: "LOCK" });581 }582583 function navigate(dir: number) {584 const allEntries = entries();585 if (allEntries.length === 0) return;586 const currentIndex = selectedIndex();587 const baseIndex = currentIndex >= 0 ? currentIndex : 0;588 const nextIndex = (baseIndex + dir + allEntries.length) % allEntries.length;589 setSelectedEntry(allEntries[nextIndex]);590 setContentPhase("enter");591 queueContentIdle();592 }593594 function openList() {595 setView("list");596 }597598 function openHealth() {599 setEditEntry(undefined);600 setView("health");601 }602603 function handleOpenCJKImport() {604 setRestoreView("cjk");605 }606607 function handleOpenFileImport() {608 setRestoreView("file");609 }610611 const isShellOverlayOpen = () => view() !== "entry" || restoreView() !== null;612613 function handleFixEntry(entry: VaultEntry) {614 if (entry.type === "passkey") {615 setSelectedEntry(entry);616 setView("entry");617 return;618 }619 setEditEntry(entry);620 setView("add");621 }622623 const isLockedView = () => view() === "lock";624 const selectedPasskeyEntry = createMemo(() =>625 selectedEntry()?.type === "passkey" ? (selectedEntry() as PasskeyEntry) : null626 );627628 async function handleApprovePendingPasskey() {629 const pending = pendingPasskey();630 if (!pending) return;631 await sendMessage({ type: "APPROVE_PASSKEY", payload: { requestId: pending.requestId } });632 setPendingPasskey(null);633 }634635 async function handleDenyPendingPasskey() {636 const pending = pendingPasskey();637 if (!pending) return;638 await sendMessage({ type: "DENY_PASSKEY", payload: { requestId: pending.requestId } });639 setPendingPasskey(null);640 }641642 function queueContentIdle(after?: () => void) {643 if (contentPhaseTimer) window.clearTimeout(contentPhaseTimer);644 contentPhaseTimer = window.setTimeout(() => {645 setContentPhase("idle");646 after?.();647 }, ENTRY_TRANSITION_SETTLE_MS);648 }649650 return (651 <div class="popup-root peach-theme">652 <Show when={bootState() === "ready"}>653 <Show654 when={!pendingPasskey()}655 fallback={656 <PasskeyApprovalView657 type={pendingPasskey()!.type}658 rpName={pendingPasskey()!.rpName}659 rpId={pendingPasskey()!.rpId}660 userName={pendingPasskey()!.userName}661 userDisplayName={pendingPasskey()!.userDisplayName}662 onApprove={handleApprovePendingPasskey}663 onDeny={handleDenyPendingPasskey}664 />665 }666 >667 <Show668 when={!isLockedView()}669 fallback={670 <LockView671 hasVault={hasVault()}672 ready={bootState() === "ready"}673 onUnlock={handleUnlock}674 />675 }676 >677 <section678 id="hd-shell"679 class="peach-shell peach-theme"680 data-surface="extension"681 >682 <header class="peach-chrome" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>683 <PeachWordmark unlocked />684 <div class="peach-chrome-actions">685 <button686 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"687 onClick={() => setView("settings")}688 aria-label="Settings"689 >690 <svg width="14" height="14" viewBox="0 0 14 14" fill="none">691 <path692 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"693 stroke="currentColor"694 stroke-width="0.9"695 />696 <circle cx="7" cy="7" r="2.1" stroke="currentColor" stroke-width="0.9" />697 </svg>698 </button>699 <button700 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"701 onClick={handleAdd}702 aria-label="New entry"703 >704 <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round">705 <path d="M5.5 1v9M1 5.5h9" />706 </svg>707 </button>708 <button709 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-lock-btn"710 onClick={() => void handleHeaderLock()}711 aria-label="Lock vault"712 >713 <svg class="peach-lock-icon" width="14" height="16" viewBox="0 0 14 16" fill="none">714 <path715 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"716 stroke="currentColor"717 stroke-width="1"718 stroke-linecap="round"719 />720 <rect x="1.5" y="6" width="11" height="8.5" rx="2.2" stroke="currentColor" stroke-width="1" />721 <circle cx="7" cy="10.25" r="1" fill="currentColor" />722 </svg>723 </button>724 </div>725 </header>726727 <div class="peach-shell-body">728 <div class="peach-shell-veil"></div>729 <div class="peach-content-frame" data-content-phase={contentPhase()} classList={{ navigating: contentTransitioning() }}>730 <Show731 when={selectedPasskeyEntry()}732 fallback={733 <EntryView734 entry={selectedEntry()}735 onDelete={handleDelete}736 onFieldSaved={() => void loadEntries()}737 onEscape={() => { setView("list"); }}738 />739 }740 >741 <PasskeyEntryView entry={selectedPasskeyEntry()} onDelete={handleDelete} />742 </Show>743 </div>744745 <section class="peach-search-wrap" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>746 <div class="peach-search-bar">747 <span class="peach-search-icon">748 <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">749 <circle cx="5.5" cy="5.5" r="3.75" />750 <path d="M8.75 8.75L11.5 11.5" />751 </svg>752 </span>753 <input754 class="peach-search-input"755 placeholder="search vault..."756 autocomplete="off"757 aria-label="Search vault entries"758 onClick={openList}759 onFocus={openList}760 readOnly761 />762 <div class="peach-search-meta">763 <span class="peach-search-counter">764 {entries().length > 0765 ? `${selectedIndex() + 1} / ${entries().length}`766 : "0 entries"}767 </span>768 <span class="peach-divider"></span>769 <button770 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"771 onClick={() => navigate(-1)}772 aria-label="Previous entry"773 disabled={entries().length === 0}774 >775 <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">776 <path d="M5 1L1 5.5L5 10" />777 </svg>778 </button>779 <button780 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"781 onClick={() => navigate(1)}782 aria-label="Next entry"783 disabled={entries().length === 0}784 >785 <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">786 <path d="M1 1L5 5.5L1 10" />787 </svg>788 </button>789 </div>790 </div>791 </section>792 </div>793794 <Show when={view() === "list"}>795 <VaultView796 entries={entries()}797 selectedEntryId={selectedEntry()?.id}798 currentTabDomain={currentTabDomain()}799 sortOrder={sortOrder()}800 searchSeed={listSearchSeed()}801 searchSeedNonce={listSearchSeedNonce()}802 onSelectEntry={handleSelectEntry}803 onSortOrderChange={setSortOrder}804 onAdd={handleAdd}805 onClose={() => setView("entry")}806 onOpenTrash={() => setView("trash")}807 onDeleteMany={handleDeleteMany}808 />809 </Show>810 <Show when={view() === "settings"}>811 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>812 <SettingsView813 entriesCount={entries().length}814 breachMonitoring={breachMonitoring()}815 lockOnClose={lockOnClose()}816 autoLockMinutes={autoLockMinutes()}817 trashRetentionDays={trashRetentionDays()}818 theme={theme()}819 onBreachMonitoringChange={applyBreachMonitoring}820 onLockOnCloseChange={applyLockOnClose}821 onAutoLockMinutesChange={applyAutoLockMinutes}822 onTrashRetentionChange={applyTrashRetention}823 onThemeChange={applyTheme}824 onBack={handleBack}825 onImport={() => setView("import")}826 onExport={() => setView("export")}827 onBreachCheckDone={loadEntries}828 onOpenHealth={openHealth}829 onOpenCJKImport={handleOpenCJKImport}830 onOpenFileImport={handleOpenFileImport}831 />832 </Suspense>833 </Show>834 <Show when={view() === "add"}>835 <AddView836 entry={editEntry()}837 entries={entries()}838 onBack={handleBack}839 onSave={handleSave}840 />841 </Show>842 <Show when={view() === "import"}>843 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>844 <ImportView onBack={handleBack} onImport={handleSave} />845 </Suspense>846 </Show>847 <Show when={view() === "export"}>848 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>849 <ExportView onBack={handleBack} onRequiresUnlock={handleLock} />850 </Suspense>851 </Show>852 <Show when={view() === "health"}>853 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>854 <HealthView855 entries={entries()}856 onFixEntry={handleFixEntry}857 onBack={() => setView("settings")}858 onRefresh={loadEntries}859 />860 </Suspense>861 </Show>862 <Show when={view() === "trash"}>863 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>864 <TrashView865 onBack={() => setView("list")}866 onRestored={() => void loadEntries()}867 />868 </Suspense>869 </Show>870 <Show when={restoreView() === "cjk"}>871 <CJKImport872 mode="onboarding"873 onBack={() => setRestoreView(null)}874 onDone={async () => {875 setRestoreView(null);876 await handleUnlock();877 }}878 />879 </Show>880 <Show when={restoreView() === "file"}>881 <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>882 <ImportView883 mode="onboarding"884 replacesExistingVault={true}885 onBack={() => setRestoreView(null)}886 onImport={async () => {887 setRestoreView(null);888 await handleUnlock();889 }}890 />891 </Suspense>892 </Show>893 </section>894 </Show>895 </Show>896 </Show>897 </div>898 );899}