App.tsx

1import { createEffect, createMemo, createSignal, lazy, onCleanup, onMount, Show, Suspense } from "solid-js";2import { ACCENT_COLORS } from "../shared/types";3import type { AccentColorName, PasskeyEntry, PendingPasskeyRequest, VaultEntry } from "../shared/types";4import { LockView } from "./views/Lock";5import { VaultView, type SortOrder } from "./views/Vault";6import { EntryView } from "./views/Entry";7import { AddView } from "./views/Add";8import { PeachWordmark } from "./components/PeachMark";9import { PasskeyApprovalView } from "./views/PasskeyApproval";10import { PasskeyEntryView } from "./views/PasskeyEntry";11import { extractDomain } from "../shared/domain";1213const ImportView    = lazy(() => import("./views/Import").then(m => ({ default: m.ImportView })));14const ExportView    = lazy(() => import("./views/Export").then(m => ({ default: m.ExportView })));15const CJKExport     = lazy(() => import("./views/CJKExport").then(m => ({ default: m.CJKExportView })));16const CJKImport     = lazy(() => import("./views/CJKImport").then(m => ({ default: m.CJKImportView })));17const SettingsView  = lazy(() => import("./views/Settings").then(m => ({ default: m.SettingsView })));18const HealthView    = lazy(() => import("./views/Health").then(m => ({ default: m.HealthView })));19const TrashView     = lazy(() => import("./views/TrashView").then(m => ({ default: m.TrashView })));2021type View =22  | "lock"23  | "entry"24  | "list"25  | "add"26  | "settings"27  | "import"28  | "export"29  | "health"30  | "trash";31type BootState = "loading" | "ready";3233const canarySuppressMap = new Map<string, boolean>();34let shellRingAnimation: Animation | 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 color-mix(in srgb, var(--peach-accent) 58%, transparent), 0 0 22px color-mix(in srgb, var(--peach-accent) 18%, transparent)",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}798081export function triggerPipPulse() {82  const pip = document.querySelector(".peach-status-pip, .pip");83  if (pip) {84    pip.classList.remove("pulse");85    void (pip as HTMLElement).offsetWidth;86    pip.classList.add("pulse");87  }88}8990function humanizeError(error: string | undefined): string | undefined {91  if (!error) return error;92  if (error === "STORAGE_QUOTA_EXCEEDED") {93    return "Peach has run out of browser storage. Delete some entries or clear browser storage to continue.";94  }95  return error;96}9798async function sendMessage(msg: any): Promise<any> {99  const MESSAGE_TIMEOUT_MS = 5000;100101  return new Promise((resolve) => {102    let settled = false;103    const timeoutId = window.setTimeout(() => {104      if (settled) return;105      settled = true;106      resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });107    }, MESSAGE_TIMEOUT_MS);108109    try {110      chrome.runtime.sendMessage(msg, (response) => {111        if (settled) return;112        settled = true;113        window.clearTimeout(timeoutId);114115        if (chrome.runtime.lastError) {116          resolve({117            ok: false,118            error:119              chrome.runtime.lastError.message ?? "SERVICE_WORKER_UNAVAILABLE",120          });121          return;122        }123124        if (response === undefined) {125          resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });126          return;127        }128129        if (response && response.ok === false) {130          response.error = humanizeError(response.error);131        }132        resolve(response);133      });134    } catch (error) {135      if (settled) return;136      settled = true;137      window.clearTimeout(timeoutId);138      resolve({139        ok: false,140        error:141          error instanceof Error ? error.message : "SERVICE_WORKER_UNAVAILABLE",142      });143    }144  });145}146147export { sendMessage };148149const ENTRY_TRANSITION_EXIT_MS = 95;150const ENTRY_TRANSITION_SETTLE_MS = 135;151152export default function App() {153  const [bootState, setBootState] = createSignal<BootState>("loading");154  const [view, setView] = createSignal<View>("lock");155  const [contentPhase, setContentPhase] = createSignal<"enter" | "exit" | "idle">(156    "enter"157  );158  const [contentTransitioning, setContentTransitioning] = createSignal(false);159  const [hasVault, setHasVault] = createSignal(false);160  const [entries, setEntries] = createSignal<VaultEntry[]>([]);161  const [selectedEntry, setSelectedEntry] = createSignal<VaultEntry | null>(null);162  const [editEntry, setEditEntry] = createSignal<VaultEntry | undefined>(undefined);163  const [accentColor, setAccentColor] = createSignal<AccentColorName>("peach");164  const [theme, setTheme] = createSignal<"dark" | "light">("dark");165  const [lockOnClose, setLockOnClose] = createSignal(true);166  const [autoLockMinutes, setAutoLockMinutes] = createSignal(5);167  const [breachMonitoring, setBreachMonitoring] = createSignal(true);168  const [trashRetentionDays, setTrashRetentionDays] = createSignal(30);169  const [restoreView, setRestoreView] = createSignal<"cjk" | "file" | null>(null);170  const [pendingPasskey, setPendingPasskey] = createSignal<PendingPasskeyRequest | null>(null);171  const [currentTabDomain, setCurrentTabDomain] = createSignal<string>("");172  const [sortOrder, setSortOrder] = createSignal<SortOrder>("url-first");173  const [listSearchSeed, setListSearchSeed] = createSignal("");174  const [listSearchSeedNonce, setListSearchSeedNonce] = createSignal(0);175176  let contentPhaseTimer: number | undefined;177178  function applyAccent(name: AccentColorName) {179    const color = ACCENT_COLORS.find(c => c.name === name) ?? ACCENT_COLORS[0]!;180    const hex = color.hex;181    document.documentElement.style.setProperty("--peach-accent", hex);182    // Ambient surface variables — derived from the accent so surfaces shift183    // subtly toward the accent hue rather than staying fixed warm-brown.184    document.documentElement.style.setProperty("--peach-glow", hex + "77");185    document.documentElement.style.setProperty("--peach-surface-tint", hex + "1A");186    document.documentElement.style.setProperty("--peach-border-accent", hex + "66");187  }188189  createEffect(() => {190    applyAccent(accentColor());191  });192193  createEffect(() => {194    document.documentElement.classList.toggle("light", theme() === "light");195    document.body.classList.toggle("light", theme() === "light");196  });197198  const selectedIndex = createMemo(() => {199    const currentId = selectedEntry()?.id;200    if (!currentId) return entries().length > 0 ? 0 : -1;201    return entries().findIndex((entry) => entry.id === currentId);202  });203204  async function applyAccentColor(name: AccentColorName) {205    applyAccent(name);206    setAccentColor(name);207    await sendMessage({ type: "UPDATE_SETTINGS", payload: { accentColor: name } });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    // Resolve the active tab in parallel with the unlock/has-vault queries —241    // openVault()'s smart selection picks the entry matching currentTabDomain,242    // so it must be populated before openVault runs. Previously refreshCurrentTab243    // ran after openVault, leaving popups that booted already-unlocked falling244    // back to loadedEntries[0] instead of the domain match.245    const [unlockResponse, vaultResponse] = await Promise.all([246      sendMessage({ type: "IS_UNLOCKED" }),247      sendMessage({ type: "HAS_VAULT" }),248      refreshCurrentTab(),249    ]);250    const unlocked = Boolean(251      (unlockResponse as { ok: boolean; data?: boolean }).data252    );253    const vaultExists = Boolean(254      (vaultResponse as { ok: boolean; data?: boolean }).data255    );256    setHasVault(vaultExists);257    await restoreSettings();258259    if (unlocked && vaultExists) {260      await openVault();261    }262263    await refreshPendingPasskey();264265    // Track tab changes so smart sort stays current266    const handleTabActivated = () => { void refreshCurrentTab(); };267    const handleTabUpdated = (_tabId: number, changeInfo: { url?: string; status?: string }) => {268      if (changeInfo.url || changeInfo.status === "complete") void refreshCurrentTab();269    };270    try {271      chrome.tabs.onActivated.addListener(handleTabActivated);272      chrome.tabs.onUpdated.addListener(handleTabUpdated);273      onCleanup(() => {274        chrome.tabs.onActivated.removeListener(handleTabActivated);275        chrome.tabs.onUpdated.removeListener(handleTabUpdated);276      });277    } catch {278      // tabs permission may not be available in all contexts279    }280281    setBootState("ready");282    document.getElementById("pre-lock")?.setAttribute("hidden", "true");283284    // Warm the lazy-module cache so the Suspense fallback never shows for285    // locally-bundled extension views. Without this, the first navigation to286    // Settings/Import/Export/etc can briefly mount `.peach-loading`, which287    // covers the shell and absorbs clicks on the header.288    void Promise.all([289      import("./views/Settings").catch(() => {}),290      import("./views/Import").catch(() => {}),291      import("./views/Export").catch(() => {}),292      import("./views/Health").catch(() => {}),293      import("./views/TrashView").catch(() => {}),294      import("./views/CJKExport").catch(() => {}),295      import("./views/CJKImport").catch(() => {}),296    ]);297298    const handlePageHide = () => {299      if (!lockOnClose() || view() === "lock") return;300      chrome.runtime.sendMessage({ type: "LOCK" });301    };302303    window.addEventListener("pagehide", handlePageHide);304    onCleanup(() => window.removeEventListener("pagehide", handlePageHide));305306    // Background auto-lock broadcasts VAULT_LOCKED so the popup drops stale307    // entries instead of waiting for the next GET_ENTRIES round-trip.308    const handleRuntimeMessage = (msg: { type?: string }) => {309      if (msg?.type === "VAULT_LOCKED" && view() !== "lock") handleLock();310    };311    chrome.runtime.onMessage.addListener(handleRuntimeMessage);312    onCleanup(() => chrome.runtime.onMessage.removeListener(handleRuntimeMessage));313314    const handleGlobalKeydown = (e: KeyboardEvent) => {315      const v = view();316      const inInput = (e.target as HTMLElement)?.tagName === "INPUT"317        || (e.target as HTMLElement)?.tagName === "TEXTAREA"318        || (e.target as HTMLElement)?.isContentEditable;319      const isPrintableSearchKey =320        e.key.length === 1 &&321        !e.ctrlKey &&322        !e.metaKey &&323        !e.altKey;324325      // ── Escape ────────────────────────────────────────────────326      if (e.key === "Escape") {327        if (v === "list") { setView("entry"); return; }328        if (v === "settings" || v === "import" || v === "export" || v === "add" || v === "health") { handleBack(); return; }329      }330331      // ── Focus search ─────────────────────────────────────────332      if ((e.key === "/" || (e.ctrlKey && e.key === "f")) && !inInput) {333        e.preventDefault();334        openList();335        return;336      }337338      if (v === "entry" && !inInput && isPrintableSearchKey) {339        e.preventDefault();340        primeListSearch(e.key);341        return;342      }343344      // ── Lock ──────────────────────────────────────────────────345      if (e.ctrlKey && e.key === "l") {346        e.preventDefault();347        void handleHeaderLock();348        return;349      }350351      // ── Entry-view shortcuts (not in input fields) ────────────352      if (v === "entry" && !inInput) {353        // c → copy password, u → copy username354        if (e.key === "c") {355          e.preventDefault();356          const entry = selectedEntry();357          if (entry?.password) {358            void sendMessage({ type: "COPY", payload: { text: entry.password, label: "Password" } })359              .then(() => triggerRing());360          }361          return;362        }363        if (e.key === "u") {364          e.preventDefault();365          const entry = selectedEntry();366          if (entry?.username) {367            void sendMessage({ type: "COPY", payload: { text: entry.username, label: "Username" } })368              .then(() => triggerRing());369          }370          return;371        }372        // n → new entry373        if (e.key === "n") {374          e.preventDefault();375          handleAdd();376          return;377        }378        // Arrow keys → navigate entries379        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {380          e.preventDefault();381          navigate(-1);382          return;383        }384        if (e.key === "ArrowRight" || e.key === "ArrowDown") {385          e.preventDefault();386          navigate(1);387          return;388        }389      }390    };391    window.addEventListener("keydown", handleGlobalKeydown);392    onCleanup(() => window.removeEventListener("keydown", handleGlobalKeydown));393394    const handleStorageChanged = (395      changes: Record<string, chrome.storage.StorageChange>,396      areaName: string397    ) => {398      if (areaName !== "session") return;399      if (!Object.keys(changes).some((key) => key.startsWith("passkey_pending_"))) {400        return;401      }402      void refreshPendingPasskey();403    };404405    chrome.storage.onChanged.addListener(handleStorageChanged);406    onCleanup(() => chrome.storage.onChanged.removeListener(handleStorageChanged));407  });408409  async function refreshCurrentTab() {410    try {411      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });412      const url = tab?.url ?? tab?.pendingUrl ?? "";413      setCurrentTabDomain(url ? (extractDomain(url) ?? "") : "");414    } catch {415      setCurrentTabDomain("");416    }417  }418419  async function refreshPendingPasskey() {420    const res = await sendMessage({ type: "GET_PENDING_PASSKEY" });421    setPendingPasskey((res as { ok: boolean; data?: PendingPasskeyRequest | null }).data ?? null);422  }423424  async function restoreSettings() {425    const res = await sendMessage({ type: "GET_SETTINGS" });426    const s = (res as { ok: boolean; data?: any }).data ?? {};427    if (s.accentColor && ACCENT_COLORS.some(c => c.name === s.accentColor)) {428      setAccentColor(s.accentColor as AccentColorName);429    }430    setTheme(s.theme === "light" ? "light" : "dark");431    setLockOnClose(s.lockOnClose !== false);432    setAutoLockMinutes(typeof s.autoLockMinutes === "number" ? s.autoLockMinutes : 5);433    setBreachMonitoring(s.breachMonitoring !== false);434    setTrashRetentionDays(typeof s.trashRetentionDays === "number" ? s.trashRetentionDays : 30);435  }436437  async function applyTrashRetention(days: number) {438    setTrashRetentionDays(days);439    await sendMessage({ type: "UPDATE_SETTINGS", payload: { trashRetentionDays: days } });440  }441442  function primeListSearch(seed: string) {443    setListSearchSeed(seed);444    setListSearchSeedNonce((value) => value + 1);445    openList();446  }447448  // Returns null when it detected a dead service worker and triggered handleLock().449  // Callers that need to abort (e.g. openVault) check for null rather than relying450  // on view() state, which may already be "lock" during normal startup flows.451  async function loadEntries(): Promise<VaultEntry[] | null> {452    const response = await sendMessage({ type: "GET_ENTRIES" });453    const res = response as { ok: boolean; data?: VaultEntry[]; error?: string };454455    // If the service worker was killed and restarted (MV3 workers sleep), the456    // vault will be locked again — or the worker may not respond at all.457    // In either case, send the user to the lock screen rather than silently458    // showing an empty vault (which looks like data loss).459    if (!res.ok) {460      if (461        res.error === "vault locked" ||462        res.error === "SERVICE_WORKER_UNAVAILABLE" ||463        (typeof res.error === "string" && res.error.includes("locked"))464      ) {465        handleLock();466        return null; // signal emergency lock to callers467      }468      return [];469    }470471    const loadedEntries = res.data ?? [];472    setEntries(loadedEntries);473474    const currentId = selectedEntry()?.id;475    if (currentId) {476      setSelectedEntry(477        loadedEntries.find((entry) => entry.id === currentId) ?? loadedEntries[0] ?? null478      );479    }480481    return loadedEntries;482  }483484  async function openVault(preferredEntryId?: string) {485    // Purge expired trash entries on each vault open486    const retDays = trashRetentionDays();487    if (retDays > 0) {488      void sendMessage({489        type: "PURGE_EXPIRED_TRASH",490        payload: { retentionMs: retDays * 86_400_000 },491      });492    }493494    const loadedEntries = await loadEntries();495496    // null means loadEntries() triggered an emergency lock (service worker died).497    // Don't override it by setting view back to "entry" with an empty vault.498    if (loadedEntries === null) return;499500    // Smart selection: prefer explicitly requested ID, then a domain match, then first entry501    let nextSelectedEntry: VaultEntry | null = null;502    if (preferredEntryId) {503      nextSelectedEntry = loadedEntries.find((e) => e.id === preferredEntryId) ?? null;504    }505    if (!nextSelectedEntry) {506      const tabDomain = currentTabDomain();507      if (tabDomain) {508        nextSelectedEntry = loadedEntries.find((e) => {509          if (e.type === "login" && e.url) return (extractDomain(e.url) ?? "") === tabDomain;510          if (e.type === "passkey" && e.rpId) return e.rpId === tabDomain;511          return false;512        }) ?? null;513      }514    }515    nextSelectedEntry ??= loadedEntries[0] ?? null;516517    setSelectedEntry(nextSelectedEntry);518    setEditEntry(undefined);519    setContentTransitioning(false);520    setContentPhase("enter");521    queueContentIdle();522    setView("entry");523  }524525  async function handleUnlock() {526    setHasVault(true);527    triggerPipPulse();528    await restoreSettings();529    await openVault();530  }531532  function handleSelectEntry(entry: VaultEntry) {533    setSelectedEntry(entry);534    setContentTransitioning(false);535    setContentPhase("enter");536    queueContentIdle();537    setView("entry");538  }539540  function handleAdd() {541    setEditEntry(undefined);542    setView("add");543  }544545  async function handleDelete() {546    const entry = selectedEntry();547    if (!entry) return;548    await sendMessage({ type: "DELETE_ENTRY", payload: { id: entry.id } });549    const loadedEntries = await loadEntries() ?? [];550    setSelectedEntry(loadedEntries[0] ?? null);551    setView("entry");552  }553554  async function handleDeleteMany(ids: string[]) {555    for (const id of ids) {556      await sendMessage({ type: "DELETE_ENTRY", payload: { id } });557    }558    const loadedEntries = await loadEntries() ?? [];559    // If the currently selected entry was among the deleted, move to first560    const stillExists = loadedEntries.find(e => e.id === selectedEntry()?.id);561    if (!stillExists) setSelectedEntry(loadedEntries[0] ?? null);562  }563564  async function handleSave(savedEntry?: VaultEntry) {565    await openVault(savedEntry?.id);566  }567568  function handleBack() {569    setEditEntry(undefined);570    setView("entry");571  }572573  function handleLock() {574    clearCanarySuppressions();575    setEntries([]);576    setSelectedEntry(null);577    setEditEntry(undefined);578    setContentPhase("idle");579    setView("lock");580  }581582  function handleHeaderLock() {583    // Lock the UI immediately — do not wait for the service worker. If the SW584    // is dead or slow, the 5s sendMessage timeout would create a dead-click585    // window. The SW will lock on its next wake regardless.586    handleLock();587    void sendMessage({ type: "LOCK" });588  }589590  function navigate(dir: number) {591    const allEntries = entries();592    if (allEntries.length === 0) return;593    const currentIndex = selectedIndex();594    const baseIndex = currentIndex >= 0 ? currentIndex : 0;595    const nextIndex = (baseIndex + dir + allEntries.length) % allEntries.length;596    setSelectedEntry(allEntries[nextIndex]);597    setContentPhase("enter");598    queueContentIdle();599  }600601  function openList() {602    setView("list");603  }604605  function openHealth() {606    setEditEntry(undefined);607    setView("health");608  }609610  function handleOpenCJKImport() {611    setRestoreView("cjk");612  }613614  function handleOpenFileImport() {615    setRestoreView("file");616  }617618  const isShellOverlayOpen = () => view() !== "entry" || restoreView() !== null;619620  function handleFixEntry(entry: VaultEntry) {621    if (entry.type === "passkey") {622      setSelectedEntry(entry);623      setView("entry");624      return;625    }626    setEditEntry(entry);627    setView("add");628  }629630  const isLockedView = () => view() === "lock";631  const selectedPasskeyEntry = createMemo(() =>632    selectedEntry()?.type === "passkey" ? (selectedEntry() as PasskeyEntry) : null633  );634635  async function handleApprovePendingPasskey() {636    const pending = pendingPasskey();637    if (!pending) return;638    await sendMessage({ type: "APPROVE_PASSKEY", payload: { requestId: pending.requestId } });639    setPendingPasskey(null);640  }641642  async function handleDenyPendingPasskey() {643    const pending = pendingPasskey();644    if (!pending) return;645    await sendMessage({ type: "DENY_PASSKEY", payload: { requestId: pending.requestId } });646    setPendingPasskey(null);647  }648649  function queueContentIdle(after?: () => void) {650    if (contentPhaseTimer) window.clearTimeout(contentPhaseTimer);651    contentPhaseTimer = window.setTimeout(() => {652      setContentPhase("idle");653      after?.();654    }, ENTRY_TRANSITION_SETTLE_MS);655  }656657  return (658    <div class="popup-root peach-theme">659      <Show when={bootState() === "ready"}>660        <Show661          when={!pendingPasskey()}662          fallback={663            <PasskeyApprovalView664              type={pendingPasskey()!.type}665              rpName={pendingPasskey()!.rpName}666              rpId={pendingPasskey()!.rpId}667              userName={pendingPasskey()!.userName}668              userDisplayName={pendingPasskey()!.userDisplayName}669              onApprove={handleApprovePendingPasskey}670              onDeny={handleDenyPendingPasskey}671            />672          }673        >674          <Show675            when={!isLockedView()}676            fallback={677              <LockView678                hasVault={hasVault()}679                ready={bootState() === "ready"}680                onUnlock={handleUnlock}681              />682            }683          >684            <section685              id="hd-shell"686              class="peach-shell peach-theme"687              data-surface="extension"688            >689            <header class="peach-chrome" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>690              <PeachWordmark unlocked />691              <div class="peach-chrome-actions">692                <button693                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"694                  onClick={() => setView("settings")}695                  aria-label="Settings"696                >697                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">698                    <path699                      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"700                      stroke="currentColor"701                      stroke-width="0.9"702                    />703                    <circle cx="7" cy="7" r="2.1" stroke="currentColor" stroke-width="0.9" />704                  </svg>705                </button>706                <button707                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"708                  onClick={handleAdd}709                  aria-label="New entry"710                >711                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round">712                    <path d="M5.5 1v9M1 5.5h9" />713                  </svg>714                </button>715                <button716                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-lock-btn"717                  onClick={() => void handleHeaderLock()}718                  aria-label="Lock vault"719                >720                  <svg class="peach-lock-icon" width="14" height="16" viewBox="0 0 14 16" fill="none">721                    <path722                      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"723                      stroke="currentColor"724                      stroke-width="1"725                      stroke-linecap="round"726                    />727                    <rect x="1.5" y="6" width="11" height="8.5" rx="2.2" stroke="currentColor" stroke-width="1" />728                    <circle cx="7" cy="10.25" r="1" fill="currentColor" />729                  </svg>730                </button>731              </div>732            </header>733734            <div class="peach-shell-body">735              <div class="peach-shell-veil"></div>736              <div class="peach-content-frame" data-content-phase={contentPhase()} classList={{ navigating: contentTransitioning() }}>737                <Show738                  when={selectedPasskeyEntry()}739                  fallback={740                    <EntryView741                      entry={selectedEntry()}742                      onDelete={handleDelete}743                      onFieldSaved={() => void loadEntries()}744                      onEscape={() => { setView("list"); }}745                    />746                  }747                >748                  <PasskeyEntryView entry={selectedPasskeyEntry()} onDelete={handleDelete} />749                </Show>750              </div>751752              <section class="peach-search-wrap" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>753                <div class="peach-search-bar">754                  <span class="peach-search-icon">755                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">756                      <circle cx="5.5" cy="5.5" r="3.75" />757                      <path d="M8.75 8.75L11.5 11.5" />758                    </svg>759                  </span>760                  <input761                    class="peach-search-input"762                    placeholder="search vault..."763                    autocomplete="off"764                    aria-label="Search vault entries"765                    onClick={openList}766                    onFocus={openList}767                    readOnly768                  />769                  <div class="peach-search-meta">770                    <span class="peach-search-counter">771                      {entries().length > 0772                        ? `${selectedIndex() + 1} / ${entries().length}`773                        : "0 entries"}774                    </span>775                    <span class="peach-divider"></span>776                    <button777                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"778                      onClick={() => navigate(-1)}779                      aria-label="Previous entry"780                      disabled={entries().length === 0}781                    >782                      <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">783                        <path d="M5 1L1 5.5L5 10" />784                      </svg>785                    </button>786                    <button787                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"788                      onClick={() => navigate(1)}789                      aria-label="Next entry"790                      disabled={entries().length === 0}791                    >792                      <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">793                        <path d="M1 1L5 5.5L1 10" />794                      </svg>795                    </button>796                  </div>797                </div>798              </section>799            </div>800801            <Show when={view() === "list"}>802              <VaultView803                entries={entries()}804                selectedEntryId={selectedEntry()?.id}805                currentTabDomain={currentTabDomain()}806                sortOrder={sortOrder()}807                searchSeed={listSearchSeed()}808                searchSeedNonce={listSearchSeedNonce()}809                onSelectEntry={handleSelectEntry}810                onSortOrderChange={setSortOrder}811                onAdd={handleAdd}812                onClose={() => setView("entry")}813                onOpenTrash={() => setView("trash")}814                onDeleteMany={handleDeleteMany}815              />816            </Show>817            <Show when={view() === "settings"}>818              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>819                <SettingsView820                  entriesCount={entries().length}821                  breachMonitoring={breachMonitoring()}822                  lockOnClose={lockOnClose()}823                  autoLockMinutes={autoLockMinutes()}824                  trashRetentionDays={trashRetentionDays()}825                  theme={theme()}826                  accentColor={accentColor()}827                  onBreachMonitoringChange={applyBreachMonitoring}828                  onLockOnCloseChange={applyLockOnClose}829                  onAutoLockMinutesChange={applyAutoLockMinutes}830                  onTrashRetentionChange={applyTrashRetention}831                  onThemeChange={applyTheme}832                  onAccentChange={applyAccentColor}833                  onBack={handleBack}834                  onImport={() => setView("import")}835                  onExport={() => setView("export")}836                  onBreachCheckDone={loadEntries}837                  onOpenHealth={openHealth}838                  onOpenCJKImport={handleOpenCJKImport}839                  onOpenFileImport={handleOpenFileImport}840                />841              </Suspense>842            </Show>843            <Show when={view() === "add"}>844              <AddView845                entry={editEntry()}846                entries={entries()}847                onBack={handleBack}848                onSave={handleSave}849              />850            </Show>851            <Show when={view() === "import"}>852              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>853                <ImportView onBack={handleBack} onImport={handleSave} />854              </Suspense>855            </Show>856            <Show when={view() === "export"}>857              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>858                <ExportView onBack={handleBack} onRequiresUnlock={handleLock} />859              </Suspense>860            </Show>861            <Show when={view() === "health"}>862              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>863                <HealthView864                  entries={entries()}865                  onFixEntry={handleFixEntry}866                  onBack={() => setView("settings")}867                  onRefresh={loadEntries}868                />869              </Suspense>870            </Show>871            <Show when={view() === "trash"}>872              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>873                <TrashView874                  onBack={() => setView("list")}875                  onRestored={() => void loadEntries()}876                />877              </Suspense>878            </Show>879            <Show when={restoreView() === "cjk"}>880              <CJKImport881                mode="onboarding"882                onBack={() => setRestoreView(null)}883                onDone={async () => {884                  setRestoreView(null);885                  await handleUnlock();886                }}887              />888            </Show>889            <Show when={restoreView() === "file"}>890              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>891                <ImportView892                  mode="onboarding"893                  replacesExistingVault={true}894                  onBack={() => setRestoreView(null)}895                  onImport={async () => {896                    setRestoreView(null);897                    await handleUnlock();898                  }}899                />900              </Suspense>901            </Show>902            </section>903          </Show>904        </Show>905      </Show>906    </div>907  );908}