App.tsx

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.25,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.55), 0 0 28px rgba(217,104,48,0.2)",60      },61      { offset: 1, boxShadow: "var(--copy-shadow)" },62    ],63    {64      duration: 1000,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}7879export function triggerPipPulse() {80  const pip = document.querySelector(".peach-status-pip, .pip");81  if (pip) {82    pip.classList.remove("pulse");83    void (pip as HTMLElement).offsetWidth;84    pip.classList.add("pulse");85  }86}8788function humanizeError(error: string | undefined): string | undefined {89  if (!error) return error;90  if (error === "STORAGE_QUOTA_EXCEEDED") {91    return "Peach has run out of browser storage. Delete some entries or clear browser storage to continue.";92  }93  return error;94}9596async function sendMessage(msg: any): Promise<any> {97  const MESSAGE_TIMEOUT_MS = 5000;9899  return new Promise((resolve) => {100    let settled = false;101    const timeoutId = window.setTimeout(() => {102      if (settled) return;103      settled = true;104      resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });105    }, MESSAGE_TIMEOUT_MS);106107    try {108      chrome.runtime.sendMessage(msg, (response) => {109        if (settled) return;110        settled = true;111        window.clearTimeout(timeoutId);112113        if (chrome.runtime.lastError) {114          resolve({115            ok: false,116            error:117              chrome.runtime.lastError.message ?? "SERVICE_WORKER_UNAVAILABLE",118          });119          return;120        }121122        if (response === undefined) {123          resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });124          return;125        }126127        if (response && response.ok === false) {128          response.error = humanizeError(response.error);129        }130        resolve(response);131      });132    } catch (error) {133      if (settled) return;134      settled = true;135      window.clearTimeout(timeoutId);136      resolve({137        ok: false,138        error:139          error instanceof Error ? error.message : "SERVICE_WORKER_UNAVAILABLE",140      });141    }142  });143}144145export { sendMessage };146147const ENTRY_TRANSITION_EXIT_MS = 95;148const ENTRY_TRANSITION_SETTLE_MS = 135;149150export default function App() {151  const [bootState, setBootState] = createSignal<BootState>("loading");152  const [view, setView] = createSignal<View>("lock");153  const [contentPhase, setContentPhase] = createSignal<"enter" | "exit" | "idle">(154    "enter"155  );156  const [contentTransitioning, setContentTransitioning] = createSignal(false);157  const [hasVault, setHasVault] = createSignal(false);158  const [entries, setEntries] = createSignal<VaultEntry[]>([]);159  const [selectedEntry, setSelectedEntry] = createSignal<VaultEntry | null>(null);160  const [editEntry, setEditEntry] = createSignal<VaultEntry | undefined>(undefined);161  const [accentColor, setAccentColor] = createSignal("#D96830");162  const [theme, setTheme] = createSignal<"dark" | "light">("dark");163  const [lockOnClose, setLockOnClose] = createSignal(true);164  const [autoLockMinutes, setAutoLockMinutes] = createSignal(5);165  const [breachMonitoring, setBreachMonitoring] = createSignal(true);166  const [trashRetentionDays, setTrashRetentionDays] = createSignal(30);167  const [restoreView, setRestoreView] = createSignal<"cjk" | "file" | null>(null);168  const [pendingPasskey, setPendingPasskey] = createSignal<PendingPasskeyRequest | null>(null);169  const [currentTabDomain, setCurrentTabDomain] = createSignal<string>("");170  const [sortOrder, setSortOrder] = createSignal<SortOrder>("url-first");171172  let contentPhaseTimer: number | undefined;173174  createEffect(() => {175    document.documentElement.style.setProperty("--ac", accentColor());176  });177178  createEffect(() => {179    document.documentElement.classList.toggle("light", theme() === "light");180    document.body.classList.toggle("light", theme() === "light");181  });182183  const selectedIndex = createMemo(() => {184    const currentId = selectedEntry()?.id;185    if (!currentId) return entries().length > 0 ? 0 : -1;186    return entries().findIndex((entry) => entry.id === currentId);187  });188189  async function applyTheme(t: "dark" | "light") {190    setTheme(t);191    await sendMessage({ type: "UPDATE_SETTINGS", payload: { theme: t } });192  }193194  async function applyLockOnClose(enabled: boolean) {195    setLockOnClose(enabled);196    await sendMessage({197      type: "UPDATE_SETTINGS",198      payload: { lockOnClose: enabled },199    });200  }201202  async function applyAutoLockMinutes(minutes: number) {203    setAutoLockMinutes(minutes);204    await sendMessage({205      type: "UPDATE_SETTINGS",206      payload: { autoLockMinutes: minutes },207    });208  }209210  async function applyBreachMonitoring(enabled: boolean) {211    setBreachMonitoring(enabled);212    await sendMessage({213      type: "UPDATE_SETTINGS",214      payload: { breachMonitoring: enabled },215    });216  }217218  onMount(async () => {219    const [unlockResponse, vaultResponse] = await Promise.all([220      sendMessage({ type: "IS_UNLOCKED" }),221      sendMessage({ type: "HAS_VAULT" }),222    ]);223    const unlocked = Boolean(224      (unlockResponse as { ok: boolean; data?: boolean }).data225    );226    const vaultExists = Boolean(227      (vaultResponse as { ok: boolean; data?: boolean }).data228    );229    setHasVault(vaultExists);230    await restoreSettings();231232    if (unlocked && vaultExists) {233      await openVault();234    }235236    await refreshPendingPasskey();237    await refreshCurrentTab();238239    // Track tab changes so smart sort stays current240    const handleTabActivated = () => { void refreshCurrentTab(); };241    const handleTabUpdated = (_tabId: number, changeInfo: { url?: string; status?: string }) => {242      if (changeInfo.url || changeInfo.status === "complete") void refreshCurrentTab();243    };244    try {245      chrome.tabs.onActivated.addListener(handleTabActivated);246      chrome.tabs.onUpdated.addListener(handleTabUpdated);247      onCleanup(() => {248        chrome.tabs.onActivated.removeListener(handleTabActivated);249        chrome.tabs.onUpdated.removeListener(handleTabUpdated);250      });251    } catch {252      // tabs permission may not be available in all contexts253    }254255    setBootState("ready");256    document.getElementById("pre-lock")?.setAttribute("hidden", "true");257258    // Warm the lazy-module cache so the Suspense fallback never shows for259    // locally-bundled extension views. Without this, the first navigation to260    // Settings/Import/Export/etc can briefly mount `.peach-loading`, which261    // covers the shell and absorbs clicks on the header.262    void Promise.all([263      import("./views/Settings").catch(() => {}),264      import("./views/Import").catch(() => {}),265      import("./views/Export").catch(() => {}),266      import("./views/Health").catch(() => {}),267      import("./views/TrashView").catch(() => {}),268      import("./views/CJKExport").catch(() => {}),269      import("./views/CJKImport").catch(() => {}),270    ]);271272    const handlePageHide = () => {273      if (!lockOnClose() || view() === "lock") return;274      chrome.runtime.sendMessage({ type: "LOCK" });275    };276277    window.addEventListener("pagehide", handlePageHide);278    onCleanup(() => window.removeEventListener("pagehide", handlePageHide));279280    // Background auto-lock broadcasts VAULT_LOCKED so the popup drops stale281    // entries instead of waiting for the next GET_ENTRIES round-trip.282    const handleRuntimeMessage = (msg: { type?: string }) => {283      if (msg?.type === "VAULT_LOCKED" && view() !== "lock") handleLock();284    };285    chrome.runtime.onMessage.addListener(handleRuntimeMessage);286    onCleanup(() => chrome.runtime.onMessage.removeListener(handleRuntimeMessage));287288    const handleGlobalKeydown = (e: KeyboardEvent) => {289      const v = view();290      const inInput = (e.target as HTMLElement)?.tagName === "INPUT"291        || (e.target as HTMLElement)?.tagName === "TEXTAREA"292        || (e.target as HTMLElement)?.isContentEditable;293294      // ── Escape ────────────────────────────────────────────────295      if (e.key === "Escape") {296        if (v === "list") { setView("entry"); return; }297        if (v === "settings" || v === "import" || v === "export" || v === "add" || v === "health") { handleBack(); return; }298      }299300      // ── Focus search ─────────────────────────────────────────301      if ((e.key === "/" || (e.ctrlKey && e.key === "f")) && !inInput) {302        e.preventDefault();303        openList();304        return;305      }306307      // ── Lock ──────────────────────────────────────────────────308      if (e.ctrlKey && e.key === "l") {309        e.preventDefault();310        void handleHeaderLock();311        return;312      }313314      // ── Entry-view shortcuts (not in input fields) ────────────315      if (v === "entry" && !inInput) {316        // c → copy password, u → copy username317        if (e.key === "c") {318          e.preventDefault();319          const entry = selectedEntry();320          if (entry?.password) {321            void sendMessage({ type: "COPY", payload: { text: entry.password, label: "Password" } })322              .then(() => triggerRing());323          }324          return;325        }326        if (e.key === "u") {327          e.preventDefault();328          const entry = selectedEntry();329          if (entry?.username) {330            void sendMessage({ type: "COPY", payload: { text: entry.username, label: "Username" } })331              .then(() => triggerRing());332          }333          return;334        }335        // n → new entry336        if (e.key === "n") {337          e.preventDefault();338          handleAdd();339          return;340        }341        // Arrow keys → navigate entries342        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {343          e.preventDefault();344          navigate(-1);345          return;346        }347        if (e.key === "ArrowRight" || e.key === "ArrowDown") {348          e.preventDefault();349          navigate(1);350          return;351        }352      }353    };354    window.addEventListener("keydown", handleGlobalKeydown);355    onCleanup(() => window.removeEventListener("keydown", handleGlobalKeydown));356357    const handleStorageChanged = (358      changes: Record<string, chrome.storage.StorageChange>,359      areaName: string360    ) => {361      if (areaName !== "session") return;362      if (!Object.keys(changes).some((key) => key.startsWith("passkey_pending_"))) {363        return;364      }365      void refreshPendingPasskey();366    };367368    chrome.storage.onChanged.addListener(handleStorageChanged);369    onCleanup(() => chrome.storage.onChanged.removeListener(handleStorageChanged));370  });371372  async function refreshCurrentTab() {373    try {374      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });375      const url = tab?.url ?? tab?.pendingUrl ?? "";376      setCurrentTabDomain(url ? (extractDomain(url) ?? "") : "");377    } catch {378      setCurrentTabDomain("");379    }380  }381382  async function refreshPendingPasskey() {383    const res = await sendMessage({ type: "GET_PENDING_PASSKEY" });384    setPendingPasskey((res as { ok: boolean; data?: PendingPasskeyRequest | null }).data ?? null);385  }386387  async function restoreSettings() {388    const res = await sendMessage({ type: "GET_SETTINGS" });389    const s = (res as { ok: boolean; data?: any }).data ?? {};390    if (s.accentColor) setAccentColor(s.accentColor);391    setTheme(s.theme === "light" ? "light" : "dark");392    setLockOnClose(s.lockOnClose !== false);393    setAutoLockMinutes(typeof s.autoLockMinutes === "number" ? s.autoLockMinutes : 5);394    setBreachMonitoring(s.breachMonitoring !== false);395    setTrashRetentionDays(typeof s.trashRetentionDays === "number" ? s.trashRetentionDays : 30);396  }397398  async function applyTrashRetention(days: number) {399    setTrashRetentionDays(days);400    await sendMessage({ type: "UPDATE_SETTINGS", payload: { trashRetentionDays: days } });401  }402403  // Returns null when it detected a dead service worker and triggered handleLock().404  // Callers that need to abort (e.g. openVault) check for null rather than relying405  // on view() state, which may already be "lock" during normal startup flows.406  async function loadEntries(): Promise<VaultEntry[] | null> {407    const response = await sendMessage({ type: "GET_ENTRIES" });408    const res = response as { ok: boolean; data?: VaultEntry[]; error?: string };409410    // If the service worker was killed and restarted (MV3 workers sleep), the411    // vault will be locked again — or the worker may not respond at all.412    // In either case, send the user to the lock screen rather than silently413    // showing an empty vault (which looks like data loss).414    if (!res.ok) {415      if (416        res.error === "vault locked" ||417        res.error === "SERVICE_WORKER_UNAVAILABLE" ||418        (typeof res.error === "string" && res.error.includes("locked"))419      ) {420        handleLock();421        return null; // signal emergency lock to callers422      }423      return [];424    }425426    const loadedEntries = res.data ?? [];427    setEntries(loadedEntries);428429    const currentId = selectedEntry()?.id;430    if (currentId) {431      setSelectedEntry(432        loadedEntries.find((entry) => entry.id === currentId) ?? loadedEntries[0] ?? null433      );434    }435436    return loadedEntries;437  }438439  async function openVault(preferredEntryId?: string) {440    // Purge expired trash entries on each vault open441    const retDays = trashRetentionDays();442    if (retDays > 0) {443      void sendMessage({444        type: "PURGE_EXPIRED_TRASH",445        payload: { retentionMs: retDays * 86_400_000 },446      });447    }448449    const loadedEntries = await loadEntries();450451    // null means loadEntries() triggered an emergency lock (service worker died).452    // Don't override it by setting view back to "entry" with an empty vault.453    if (loadedEntries === null) return;454455    // Smart selection: prefer explicitly requested ID, then a domain match, then first entry456    let nextSelectedEntry: VaultEntry | null = null;457    if (preferredEntryId) {458      nextSelectedEntry = loadedEntries.find((e) => e.id === preferredEntryId) ?? null;459    }460    if (!nextSelectedEntry) {461      const tabDomain = currentTabDomain();462      if (tabDomain) {463        nextSelectedEntry = loadedEntries.find((e) => {464          if (e.type === "login" && e.url) return (extractDomain(e.url) ?? "") === tabDomain;465          if (e.type === "passkey" && e.rpId) return e.rpId === tabDomain;466          return false;467        }) ?? null;468      }469    }470    nextSelectedEntry ??= loadedEntries[0] ?? null;471472    setSelectedEntry(nextSelectedEntry);473    setEditEntry(undefined);474    setContentTransitioning(false);475    setContentPhase("enter");476    queueContentIdle();477    setView("entry");478  }479480  async function handleUnlock() {481    setHasVault(true);482    triggerPipPulse();483    await restoreSettings();484    await openVault();485  }486487  function handleSelectEntry(entry: VaultEntry) {488    setSelectedEntry(entry);489    setContentTransitioning(false);490    setContentPhase("enter");491    queueContentIdle();492    setView("entry");493  }494495  function handleAdd() {496    setEditEntry(undefined);497    setView("add");498  }499500  async function handleDelete() {501    const entry = selectedEntry();502    if (!entry) return;503    await sendMessage({ type: "DELETE_ENTRY", payload: { id: entry.id } });504    const loadedEntries = await loadEntries() ?? [];505    setSelectedEntry(loadedEntries[0] ?? null);506    setView("entry");507  }508509  async function handleDeleteMany(ids: string[]) {510    for (const id of ids) {511      await sendMessage({ type: "DELETE_ENTRY", payload: { id } });512    }513    const loadedEntries = await loadEntries() ?? [];514    // If the currently selected entry was among the deleted, move to first515    const stillExists = loadedEntries.find(e => e.id === selectedEntry()?.id);516    if (!stillExists) setSelectedEntry(loadedEntries[0] ?? null);517  }518519  async function handleSave(savedEntry?: VaultEntry) {520    await openVault(savedEntry?.id);521  }522523  function handleBack() {524    setEditEntry(undefined);525    setView("entry");526  }527528  function handleLock() {529    clearCanarySuppressions();530    setEntries([]);531    setSelectedEntry(null);532    setEditEntry(undefined);533    setContentPhase("idle");534    setView("lock");535  }536537  function handleHeaderLock() {538    // Lock the UI immediately — do not wait for the service worker. If the SW539    // is dead or slow, the 5s sendMessage timeout would create a dead-click540    // window. The SW will lock on its next wake regardless.541    handleLock();542    void sendMessage({ type: "LOCK" });543  }544545  function navigate(dir: number) {546    const allEntries = entries();547    if (allEntries.length === 0) return;548    const currentIndex = selectedIndex();549    const baseIndex = currentIndex >= 0 ? currentIndex : 0;550    const nextIndex = (baseIndex + dir + allEntries.length) % allEntries.length;551    setSelectedEntry(allEntries[nextIndex]);552    setContentPhase("enter");553    queueContentIdle();554  }555556  function openList() {557    setView("list");558  }559560  function openHealth() {561    setEditEntry(undefined);562    setView("health");563  }564565  function handleOpenCJKImport() {566    setRestoreView("cjk");567  }568569  function handleOpenFileImport() {570    setRestoreView("file");571  }572573  const isShellOverlayOpen = () => view() !== "entry" || restoreView() !== null;574575  function handleFixEntry(entry: VaultEntry) {576    if (entry.type === "passkey") {577      setSelectedEntry(entry);578      setView("entry");579      return;580    }581    setEditEntry(entry);582    setView("add");583  }584585  const isLockedView = () => view() === "lock";586  const selectedPasskeyEntry = createMemo(() =>587    selectedEntry()?.type === "passkey" ? (selectedEntry() as PasskeyEntry) : null588  );589590  async function handleApprovePendingPasskey() {591    const pending = pendingPasskey();592    if (!pending) return;593    await sendMessage({ type: "APPROVE_PASSKEY", payload: { requestId: pending.requestId } });594    setPendingPasskey(null);595  }596597  async function handleDenyPendingPasskey() {598    const pending = pendingPasskey();599    if (!pending) return;600    await sendMessage({ type: "DENY_PASSKEY", payload: { requestId: pending.requestId } });601    setPendingPasskey(null);602  }603604  function queueContentIdle(after?: () => void) {605    if (contentPhaseTimer) window.clearTimeout(contentPhaseTimer);606    contentPhaseTimer = window.setTimeout(() => {607      setContentPhase("idle");608      after?.();609    }, ENTRY_TRANSITION_SETTLE_MS);610  }611612  return (613    <div class="popup-root peach-theme">614      <Show when={bootState() === "ready"}>615        <Show616          when={!pendingPasskey()}617          fallback={618            <PasskeyApprovalView619              type={pendingPasskey()!.type}620              rpName={pendingPasskey()!.rpName}621              rpId={pendingPasskey()!.rpId}622              userName={pendingPasskey()!.userName}623              userDisplayName={pendingPasskey()!.userDisplayName}624              onApprove={handleApprovePendingPasskey}625              onDeny={handleDenyPendingPasskey}626            />627          }628        >629          <Show630            when={!isLockedView()}631            fallback={632              <LockView633                hasVault={hasVault()}634                ready={bootState() === "ready"}635                onUnlock={handleUnlock}636              />637            }638          >639            <section640              id="hd-shell"641              class="peach-shell peach-theme"642              data-surface="extension"643            >644            <header class="peach-chrome" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>645              <PeachWordmark unlocked />646              <div class="peach-chrome-actions">647                <button648                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"649                  onClick={() => setView("settings")}650                  aria-label="Settings"651                >652                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">653                    <path654                      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"655                      stroke="currentColor"656                      stroke-width="0.9"657                    />658                    <circle cx="7" cy="7" r="2.1" stroke="currentColor" stroke-width="0.9" />659                  </svg>660                </button>661                <button662                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"663                  onClick={handleAdd}664                  aria-label="New entry"665                >666                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round">667                    <path d="M5.5 1v9M1 5.5h9" />668                  </svg>669                </button>670                <button671                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-lock-btn"672                  onClick={() => void handleHeaderLock()}673                  aria-label="Lock vault"674                >675                  <svg class="peach-lock-icon" width="14" height="16" viewBox="0 0 14 16" fill="none">676                    <path677                      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"678                      stroke="currentColor"679                      stroke-width="1"680                      stroke-linecap="round"681                    />682                    <rect x="1.5" y="6" width="11" height="8.5" rx="2.2" stroke="currentColor" stroke-width="1" />683                    <circle cx="7" cy="10.25" r="1" fill="currentColor" />684                  </svg>685                </button>686              </div>687            </header>688689            <div class="peach-shell-body">690              <div class="peach-shell-veil"></div>691              <div class="peach-content-frame" data-content-phase={contentPhase()} classList={{ navigating: contentTransitioning() }}>692                <Show693                  when={selectedPasskeyEntry()}694                  fallback={695                    <EntryView696                      entry={selectedEntry()}697                      onDelete={handleDelete}698                      onFieldSaved={() => void loadEntries()}699                      onEscape={() => { setView("list"); }}700                    />701                  }702                >703                  <PasskeyEntryView entry={selectedPasskeyEntry()} onDelete={handleDelete} />704                </Show>705              </div>706707              <section class="peach-search-wrap" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>708                <div class="peach-search-bar">709                  <span class="peach-search-icon">710                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">711                      <circle cx="5.5" cy="5.5" r="3.75" />712                      <path d="M8.75 8.75L11.5 11.5" />713                    </svg>714                  </span>715                  <input716                    class="peach-search-input"717                    placeholder="search vault..."718                    autocomplete="off"719                    aria-label="Search vault entries"720                    onClick={openList}721                    onFocus={openList}722                    readOnly723                  />724                  <div class="peach-search-meta">725                    <span class="peach-search-counter">726                      {entries().length > 0727                        ? `${selectedIndex() + 1} / ${entries().length}`728                        : "0 entries"}729                    </span>730                    <span class="peach-divider"></span>731                    <button732                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"733                      onClick={() => navigate(-1)}734                      aria-label="Previous entry"735                      disabled={entries().length === 0}736                    >737                      <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">738                        <path d="M5 1L1 5.5L5 10" />739                      </svg>740                    </button>741                    <button742                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"743                      onClick={() => navigate(1)}744                      aria-label="Next entry"745                      disabled={entries().length === 0}746                    >747                      <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">748                        <path d="M1 1L5 5.5L1 10" />749                      </svg>750                    </button>751                  </div>752                </div>753              </section>754            </div>755756            <Show when={view() === "list"}>757              <VaultView758                entries={entries()}759                selectedEntryId={selectedEntry()?.id}760                currentTabDomain={currentTabDomain()}761                sortOrder={sortOrder()}762                onSelectEntry={handleSelectEntry}763                onSortOrderChange={setSortOrder}764                onAdd={handleAdd}765                onClose={() => setView("entry")}766                onOpenTrash={() => setView("trash")}767                onDeleteMany={handleDeleteMany}768              />769            </Show>770            <Show when={view() === "settings"}>771              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>772                <SettingsView773                  entriesCount={entries().length}774                  breachMonitoring={breachMonitoring()}775                  lockOnClose={lockOnClose()}776                  autoLockMinutes={autoLockMinutes()}777                  trashRetentionDays={trashRetentionDays()}778                  theme={theme()}779                  onBreachMonitoringChange={applyBreachMonitoring}780                  onLockOnCloseChange={applyLockOnClose}781                  onAutoLockMinutesChange={applyAutoLockMinutes}782                  onTrashRetentionChange={applyTrashRetention}783                  onThemeChange={applyTheme}784                  onBack={handleBack}785                  onImport={() => setView("import")}786                  onExport={() => setView("export")}787                  onBreachCheckDone={loadEntries}788                  onOpenHealth={openHealth}789                  onOpenCJKImport={handleOpenCJKImport}790                  onOpenFileImport={handleOpenFileImport}791                />792              </Suspense>793            </Show>794            <Show when={view() === "add"}>795              <AddView796                entry={editEntry()}797                entries={entries()}798                onBack={handleBack}799                onSave={handleSave}800              />801            </Show>802            <Show when={view() === "import"}>803              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>804                <ImportView onBack={handleBack} onImport={handleSave} />805              </Suspense>806            </Show>807            <Show when={view() === "export"}>808              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>809                <ExportView onBack={handleBack} />810              </Suspense>811            </Show>812            <Show when={view() === "health"}>813              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>814                <HealthView815                  entries={entries()}816                  onFixEntry={handleFixEntry}817                  onBack={() => setView("settings")}818                  onRefresh={loadEntries}819                />820              </Suspense>821            </Show>822            <Show when={view() === "trash"}>823              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>824                <TrashView825                  onBack={() => setView("list")}826                  onRestored={() => void loadEntries()}827                />828              </Suspense>829            </Show>830            <Show when={restoreView() === "cjk"}>831              <CJKImport832                mode="onboarding"833                onBack={() => setRestoreView(null)}834                onDone={async () => {835                  setRestoreView(null);836                  await handleUnlock();837                }}838              />839            </Show>840            <Show when={restoreView() === "file"}>841              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>842                <ImportView843                  mode="onboarding"844                  replacesExistingVault={true}845                  onBack={() => setRestoreView(null)}846                  onImport={async () => {847                    setRestoreView(null);848                    await handleUnlock();849                  }}850                />851              </Suspense>852            </Show>853            </section>854          </Show>855        </Show>856      </Show>857    </div>858  );859}