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";12import { popupCopy } from "./copy";1314const ImportView    = lazy(() => import("./views/Import").then(m => ({ default: m.ImportView })));15const ExportView    = lazy(() => import("./views/Export").then(m => ({ default: m.ExportView })));16const CJKExport     = lazy(() => import("./views/CJKExport").then(m => ({ default: m.CJKExportView })));17const CJKImport     = lazy(() => import("./views/CJKImport").then(m => ({ default: m.CJKImportView })));18const SettingsView  = lazy(() => import("./views/Settings").then(m => ({ default: m.SettingsView })));19const HealthView    = lazy(() => import("./views/Health").then(m => ({ default: m.HealthView })));20const TrashView     = lazy(() => import("./views/TrashView").then(m => ({ default: m.TrashView })));2122type View =23  | "lock"24  | "entry"25  | "list"26  | "add"27  | "settings"28  | "import"29  | "export"30  | "health"31  | "trash";32type BootState = "loading" | "ready";3334const canarySuppressMap = new Map<string, boolean>();35let shellRingAnimation: Animation | null = null;3637export function isCanarySuppressed(entryId: string): boolean {38  return canarySuppressMap.get(entryId) ?? false;39}4041export function setCanarySuppressed(entryId: string, suppressed: boolean): void {42  canarySuppressMap.set(entryId, suppressed);43}4445export function clearCanarySuppressions(): void {46  canarySuppressMap.clear();47}4849export function triggerRing() {50  const shell = document.getElementById("hd-shell");51  if (!shell) return;5253  shellRingAnimation?.cancel();54  shell.dataset.glowing = "true";55  const animation = shell.animate(56    [57      { offset: 0, boxShadow: "var(--copy-shadow)" },58      {59        offset: 0.3,60        boxShadow:61          "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)",62      },63      { offset: 1, boxShadow: "var(--copy-shadow)" },64    ],65    {66      duration: 720,67      easing: "cubic-bezier(0.4, 0, 0.2, 1)",68      fill: "none",69    }70  );71  shellRingAnimation = animation;72  const clearGlow = () => {73    if (shellRingAnimation !== animation) return;74    shellRingAnimation = null;75    delete shell.dataset.glowing;76  };77  animation.onfinish = clearGlow;78  animation.oncancel = clearGlow;79}808182export function triggerPipPulse() {83  const pip = document.querySelector(".peach-status-pip, .pip");84  if (pip) {85    pip.classList.remove("pulse");86    void (pip as HTMLElement).offsetWidth;87    pip.classList.add("pulse");88  }89}9091function humanizeError(error: string | undefined): string | undefined {92  if (!error) return error;93  if (error === "STORAGE_QUOTA_EXCEEDED") {94    return "Peach has run out of browser storage. Delete some entries or clear browser storage to continue.";95  }96  return error;97}9899async function sendMessage(msg: any): Promise<any> {100  const MESSAGE_TIMEOUT_MS = 5000;101102  return new Promise((resolve) => {103    let settled = false;104    const timeoutId = window.setTimeout(() => {105      if (settled) return;106      settled = true;107      resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });108    }, MESSAGE_TIMEOUT_MS);109110    try {111      chrome.runtime.sendMessage(msg, (response) => {112        if (settled) return;113        settled = true;114        window.clearTimeout(timeoutId);115116        if (chrome.runtime.lastError) {117          resolve({118            ok: false,119            error:120              chrome.runtime.lastError.message ?? "SERVICE_WORKER_UNAVAILABLE",121          });122          return;123        }124125        if (response === undefined) {126          resolve({ ok: false, error: "SERVICE_WORKER_UNAVAILABLE" });127          return;128        }129130        if (response && response.ok === false) {131          response.error = humanizeError(response.error);132        }133        resolve(response);134      });135    } catch (error) {136      if (settled) return;137      settled = true;138      window.clearTimeout(timeoutId);139      resolve({140        ok: false,141        error:142          error instanceof Error ? error.message : "SERVICE_WORKER_UNAVAILABLE",143      });144    }145  });146}147148export { sendMessage };149150const ENTRY_TRANSITION_EXIT_MS = 95;151const ENTRY_TRANSITION_SETTLE_MS = 135;152153export default function App() {154  const [bootState, setBootState] = createSignal<BootState>("loading");155  const [view, setView] = createSignal<View>("lock");156  const [contentPhase, setContentPhase] = createSignal<"enter" | "exit" | "idle">(157    "enter"158  );159  const [contentTransitioning, setContentTransitioning] = createSignal(false);160  const [hasVault, setHasVault] = createSignal(false);161  const [entries, setEntries] = createSignal<VaultEntry[]>([]);162  const [selectedEntry, setSelectedEntry] = createSignal<VaultEntry | null>(null);163  const [editEntry, setEditEntry] = createSignal<VaultEntry | undefined>(undefined);164  const [accentColor, setAccentColor] = createSignal<AccentColorName>("peach");165  const [theme, setTheme] = createSignal<"dark" | "light">("dark");166  const [lockOnClose, setLockOnClose] = createSignal(true);167  const [autoLockMinutes, setAutoLockMinutes] = createSignal(5);168  const [breachMonitoring, setBreachMonitoring] = createSignal(true);169  const [trashRetentionDays, setTrashRetentionDays] = createSignal(30);170  const [restoreView, setRestoreView] = createSignal<"cjk" | "file" | null>(null);171  const [pendingPasskey, setPendingPasskey] = createSignal<PendingPasskeyRequest | null>(null);172  const [currentTabDomain, setCurrentTabDomain] = createSignal<string>("");173  const [sortOrder, setSortOrder] = createSignal<SortOrder>("url-first");174  const [listSearchSeed, setListSearchSeed] = createSignal("");175  const [listSearchSeedNonce, setListSearchSeedNonce] = createSignal(0);176177  let contentPhaseTimer: number | undefined;178179  function applyAccent(name: AccentColorName) {180    const color = ACCENT_COLORS.find(c => c.name === name) ?? ACCENT_COLORS[0]!;181    const hex = color.hex;182    document.documentElement.style.setProperty("--peach-accent", hex);183    // Ambient surface variables — derived from the accent so surfaces shift184    // subtly toward the accent hue rather than staying fixed warm-brown.185    document.documentElement.style.setProperty("--peach-glow", hex + "2A");186    document.documentElement.style.setProperty("--peach-surface-tint", hex + "09");187    document.documentElement.style.setProperty("--peach-border-accent", hex + "24");188  }189190  createEffect(() => {191    applyAccent(accentColor());192  });193194  createEffect(() => {195    document.documentElement.classList.toggle("light", theme() === "light");196    document.body.classList.toggle("light", theme() === "light");197  });198199  const selectedIndex = createMemo(() => {200    const currentId = selectedEntry()?.id;201    if (!currentId) return entries().length > 0 ? 0 : -1;202    return entries().findIndex((entry) => entry.id === currentId);203  });204205  async function applyAccentColor(name: AccentColorName) {206    applyAccent(name);207    setAccentColor(name);208    await sendMessage({ type: "UPDATE_SETTINGS", payload: { accentColor: name } });209  }210211  async function applyTheme(t: "dark" | "light") {212    setTheme(t);213    await sendMessage({ type: "UPDATE_SETTINGS", payload: { theme: t } });214  }215216  async function applyLockOnClose(enabled: boolean) {217    setLockOnClose(enabled);218    await sendMessage({219      type: "UPDATE_SETTINGS",220      payload: { lockOnClose: enabled },221    });222  }223224  async function applyAutoLockMinutes(minutes: number) {225    setAutoLockMinutes(minutes);226    await sendMessage({227      type: "UPDATE_SETTINGS",228      payload: { autoLockMinutes: minutes },229    });230  }231232  async function applyBreachMonitoring(enabled: boolean) {233    setBreachMonitoring(enabled);234    await sendMessage({235      type: "UPDATE_SETTINGS",236      payload: { breachMonitoring: enabled },237    });238  }239240  onMount(async () => {241    // Resolve the active tab in parallel with the unlock/has-vault queries —242    // openVault()'s smart selection picks the entry matching currentTabDomain,243    // so it must be populated before openVault runs. Previously refreshCurrentTab244    // ran after openVault, leaving popups that booted already-unlocked falling245    // back to loadedEntries[0] instead of the domain match.246    const [unlockResponse, vaultResponse] = await Promise.all([247      sendMessage({ type: "IS_UNLOCKED" }),248      sendMessage({ type: "HAS_VAULT" }),249      refreshCurrentTab(),250    ]);251    const unlocked = Boolean(252      (unlockResponse as { ok: boolean; data?: boolean }).data253    );254    const vaultExists = Boolean(255      (vaultResponse as { ok: boolean; data?: boolean }).data256    );257    setHasVault(vaultExists);258    await restoreSettings();259260    if (unlocked && vaultExists) {261      await openVault();262    }263264    await refreshPendingPasskey();265266    // Track tab changes so smart sort stays current267    const handleTabActivated = () => { void refreshCurrentTab(); };268    const handleTabUpdated = (_tabId: number, changeInfo: { url?: string; status?: string }) => {269      if (changeInfo.url || changeInfo.status === "complete") void refreshCurrentTab();270    };271    try {272      chrome.tabs.onActivated.addListener(handleTabActivated);273      chrome.tabs.onUpdated.addListener(handleTabUpdated);274      onCleanup(() => {275        chrome.tabs.onActivated.removeListener(handleTabActivated);276        chrome.tabs.onUpdated.removeListener(handleTabUpdated);277      });278    } catch {279      // tabs permission may not be available in all contexts280    }281282    setBootState("ready");283    document.getElementById("pre-lock")?.setAttribute("hidden", "true");284285    // Warm the lazy-module cache so the Suspense fallback never shows for286    // locally-bundled extension views. Without this, the first navigation to287    // Settings/Import/Export/etc can briefly mount `.peach-loading`, which288    // covers the shell and absorbs clicks on the header.289    void Promise.all([290      import("./views/Settings").catch(() => {}),291      import("./views/Import").catch(() => {}),292      import("./views/Export").catch(() => {}),293      import("./views/Health").catch(() => {}),294      import("./views/TrashView").catch(() => {}),295      import("./views/CJKExport").catch(() => {}),296      import("./views/CJKImport").catch(() => {}),297    ]);298299    // Lock-on-close via a persistent port. sendMessage in pagehide is300    // unreliable — the popup context tears down before the message lands.301    // The SW's onConnect listener locks when this port disconnects.302    let popupPort: chrome.runtime.Port | null = null;303    try {304      popupPort = chrome.runtime.connect({ name: "popup" });305    } catch { /* extension context invalidated — ignore */ }306    onCleanup(() => { try { popupPort?.disconnect(); } catch {} });307308    // Background auto-lock broadcasts VAULT_LOCKED so the popup drops stale309    // entries instead of waiting for the next GET_ENTRIES round-trip.310    const handleRuntimeMessage = (msg: { type?: string }) => {311      if (msg?.type === "VAULT_LOCKED" && view() !== "lock") handleLock();312    };313    chrome.runtime.onMessage.addListener(handleRuntimeMessage);314    onCleanup(() => chrome.runtime.onMessage.removeListener(handleRuntimeMessage));315316    const handleGlobalKeydown = (e: KeyboardEvent) => {317      const v = view();318      const inInput = (e.target as HTMLElement)?.tagName === "INPUT"319        || (e.target as HTMLElement)?.tagName === "TEXTAREA"320        || (e.target as HTMLElement)?.isContentEditable;321      const isPrintableSearchKey =322        e.key.length === 1 &&323        !e.ctrlKey &&324        !e.metaKey &&325        !e.altKey;326327      // ── Escape ────────────────────────────────────────────────328      if (e.key === "Escape") {329        if (v === "list") { setView("entry"); return; }330        if (v === "settings" || v === "import" || v === "export" || v === "add" || v === "health") { handleBack(); return; }331      }332333      // ── Focus search ─────────────────────────────────────────334      if ((e.key === "/" || (e.ctrlKey && e.key === "f")) && !inInput) {335        e.preventDefault();336        openList();337        return;338      }339340      if (v === "entry" && !inInput && isPrintableSearchKey) {341        e.preventDefault();342        primeListSearch(e.key);343        return;344      }345346      // ── Lock ──────────────────────────────────────────────────347      if (e.ctrlKey && e.key === "l") {348        e.preventDefault();349        void handleHeaderLock();350        return;351      }352353      // ── Entry-view shortcuts (not in input fields) ────────────354      if (v === "entry" && !inInput) {355        // c → copy password, u → copy username356        if (e.key === "c") {357          e.preventDefault();358          const entry = selectedEntry();359          if (entry?.password) {360            void popupCopy(entry.password, "Password").then((ok) => { if (ok) triggerRing(); });361          }362          return;363        }364        if (e.key === "u") {365          e.preventDefault();366          const entry = selectedEntry();367          if (entry?.username) {368            void popupCopy(entry.username, "Username").then((ok) => { if (ok) 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") {510            if (e.url && (extractDomain(e.url) ?? "") === tabDomain) return true;511            for (const extra of e.additionalUrls ?? []) {512              if ((extractDomain(extra) ?? "") === tabDomain) return true;513            }514            return false;515          }516          if (e.type === "passkey" && e.rpId) return e.rpId === tabDomain;517          return false;518        }) ?? null;519      }520    }521    nextSelectedEntry ??= loadedEntries[0] ?? null;522523    setSelectedEntry(nextSelectedEntry);524    setEditEntry(undefined);525    setContentTransitioning(false);526    setContentPhase("enter");527    queueContentIdle();528    setView("entry");529  }530531  async function handleUnlock() {532    setHasVault(true);533    triggerPipPulse();534    await restoreSettings();535    await openVault();536  }537538  function handleSelectEntry(entry: VaultEntry) {539    setSelectedEntry(entry);540    setContentTransitioning(false);541    setContentPhase("enter");542    queueContentIdle();543    setView("entry");544  }545546  function handleAdd() {547    setEditEntry(undefined);548    setView("add");549  }550551  async function handleDelete() {552    const entry = selectedEntry();553    if (!entry) return;554    await sendMessage({ type: "DELETE_ENTRY", payload: { id: entry.id } });555    const loadedEntries = await loadEntries() ?? [];556    setSelectedEntry(loadedEntries[0] ?? null);557    setView("entry");558  }559560  async function handleDeleteMany(ids: string[]) {561    for (const id of ids) {562      await sendMessage({ type: "DELETE_ENTRY", payload: { id } });563    }564    const loadedEntries = await loadEntries() ?? [];565    // If the currently selected entry was among the deleted, move to first566    const stillExists = loadedEntries.find(e => e.id === selectedEntry()?.id);567    if (!stillExists) setSelectedEntry(loadedEntries[0] ?? null);568  }569570  async function handleSave(savedEntry?: VaultEntry) {571    await openVault(savedEntry?.id);572  }573574  function handleBack() {575    setEditEntry(undefined);576    setView("entry");577  }578579  function handleLock() {580    clearCanarySuppressions();581    setEntries([]);582    setSelectedEntry(null);583    setEditEntry(undefined);584    setContentPhase("idle");585    setView("lock");586  }587588  function handleHeaderLock() {589    // Lock the UI immediately — do not wait for the service worker. If the SW590    // is dead or slow, the 5s sendMessage timeout would create a dead-click591    // window. The SW will lock on its next wake regardless.592    handleLock();593    void sendMessage({ type: "LOCK" });594  }595596  function navigate(dir: number) {597    const allEntries = entries();598    if (allEntries.length === 0) return;599    const currentIndex = selectedIndex();600    const baseIndex = currentIndex >= 0 ? currentIndex : 0;601    const nextIndex = (baseIndex + dir + allEntries.length) % allEntries.length;602    setSelectedEntry(allEntries[nextIndex]);603    setContentPhase("enter");604    queueContentIdle();605  }606607  function openList() {608    setView("list");609  }610611  function openHealth() {612    setEditEntry(undefined);613    setView("health");614  }615616  function handleOpenCJKImport() {617    setRestoreView("cjk");618  }619620  function handleOpenFileImport() {621    setRestoreView("file");622  }623624  const isShellOverlayOpen = () => view() !== "entry" || restoreView() !== null;625626  function handleFixEntry(entry: VaultEntry) {627    if (entry.type === "passkey") {628      setSelectedEntry(entry);629      setView("entry");630      return;631    }632    setEditEntry(entry);633    setView("add");634  }635636  const isLockedView = () => view() === "lock";637  const selectedPasskeyEntry = createMemo(() =>638    selectedEntry()?.type === "passkey" ? (selectedEntry() as PasskeyEntry) : null639  );640641  async function handleApprovePendingPasskey() {642    const pending = pendingPasskey();643    if (!pending) return;644    await sendMessage({ type: "APPROVE_PASSKEY", payload: { requestId: pending.requestId } });645    setPendingPasskey(null);646  }647648  async function handleDenyPendingPasskey() {649    const pending = pendingPasskey();650    if (!pending) return;651    await sendMessage({ type: "DENY_PASSKEY", payload: { requestId: pending.requestId } });652    setPendingPasskey(null);653  }654655  function queueContentIdle(after?: () => void) {656    if (contentPhaseTimer) window.clearTimeout(contentPhaseTimer);657    contentPhaseTimer = window.setTimeout(() => {658      setContentPhase("idle");659      after?.();660    }, ENTRY_TRANSITION_SETTLE_MS);661  }662663  return (664    <div class="popup-root peach-theme">665      <Show when={bootState() === "ready"}>666        <Show667          when={!pendingPasskey()}668          fallback={669            <PasskeyApprovalView670              type={pendingPasskey()!.type}671              rpName={pendingPasskey()!.rpName}672              rpId={pendingPasskey()!.rpId}673              userName={pendingPasskey()!.userName}674              userDisplayName={pendingPasskey()!.userDisplayName}675              onApprove={handleApprovePendingPasskey}676              onDeny={handleDenyPendingPasskey}677            />678          }679        >680          <Show681            when={!isLockedView()}682            fallback={683              <LockView684                hasVault={hasVault()}685                ready={bootState() === "ready"}686                onUnlock={handleUnlock}687              />688            }689          >690            <section691              id="hd-shell"692              class="peach-shell peach-theme"693              data-surface="extension"694            >695            <header class="peach-chrome" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>696              <PeachWordmark unlocked />697              <div class="peach-chrome-actions">698                <button699                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"700                  onClick={() => setView("settings")}701                  aria-label="Settings"702                >703                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">704                    <path705                      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"706                      stroke="currentColor"707                      stroke-width="0.9"708                    />709                    <circle cx="7" cy="7" r="2.1" stroke="currentColor" stroke-width="0.9" />710                  </svg>711                </button>712                <button713                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"714                  onClick={handleAdd}715                  aria-label="New entry"716                >717                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round">718                    <path d="M5.5 1v9M1 5.5h9" />719                  </svg>720                </button>721                <button722                  class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn peach-lock-btn"723                  onClick={() => void handleHeaderLock()}724                  aria-label="Lock vault"725                >726                  <svg class="peach-lock-icon" width="14" height="16" viewBox="0 0 14 16" fill="none">727                    <path728                      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"729                      stroke="currentColor"730                      stroke-width="1"731                      stroke-linecap="round"732                    />733                    <rect x="1.5" y="6" width="11" height="8.5" rx="2.2" stroke="currentColor" stroke-width="1" />734                    <circle cx="7" cy="10.25" r="1" fill="currentColor" />735                  </svg>736                </button>737              </div>738            </header>739740            <div class="peach-shell-body">741              <div class="peach-shell-veil"></div>742              <div class="peach-content-frame" data-content-phase={contentPhase()} classList={{ navigating: contentTransitioning() }}>743                <Show744                  when={selectedPasskeyEntry()}745                  fallback={746                    <EntryView747                      entry={selectedEntry()}748                      onDelete={handleDelete}749                      onFieldSaved={() => void loadEntries()}750                      onEscape={() => { setView("list"); }}751                    />752                  }753                >754                  <PasskeyEntryView entry={selectedPasskeyEntry()} onDelete={handleDelete} />755                </Show>756              </div>757758              <section class="peach-search-wrap" classList={{ "is-hidden-for-overlay": isShellOverlayOpen() }}>759                <div class="peach-search-bar">760                  <span class="peach-search-icon">761                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">762                      <circle cx="5.5" cy="5.5" r="3.75" />763                      <path d="M8.75 8.75L11.5 11.5" />764                    </svg>765                  </span>766                  <input767                    class="peach-search-input"768                    placeholder="search vault..."769                    autocomplete="off"770                    aria-label="Search vault entries"771                    onClick={openList}772                    onFocus={openList}773                    readOnly774                  />775                  <div class="peach-search-meta">776                    <span class="peach-search-counter">777                      {entries().length > 0778                        ? `${selectedIndex() + 1} / ${entries().length}`779                        : "0 entries"}780                    </span>781                    <span class="peach-divider"></span>782                    <button783                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"784                      onClick={() => navigate(-1)}785                      aria-label="Previous entry"786                      disabled={entries().length === 0}787                    >788                      <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">789                        <path d="M5 1L1 5.5L5 10" />790                      </svg>791                    </button>792                    <button793                      class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"794                      onClick={() => navigate(1)}795                      aria-label="Next entry"796                      disabled={entries().length === 0}797                    >798                      <svg width="6" height="11" viewBox="0 0 6 11" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">799                        <path d="M1 1L5 5.5L1 10" />800                      </svg>801                    </button>802                  </div>803                </div>804              </section>805            </div>806807            <Show when={view() === "list"}>808              <VaultView809                entries={entries()}810                selectedEntryId={selectedEntry()?.id}811                currentTabDomain={currentTabDomain()}812                sortOrder={sortOrder()}813                searchSeed={listSearchSeed()}814                searchSeedNonce={listSearchSeedNonce()}815                onSelectEntry={handleSelectEntry}816                onSortOrderChange={setSortOrder}817                onAdd={handleAdd}818                onClose={() => setView("entry")}819                onOpenTrash={() => setView("trash")}820                onDeleteMany={handleDeleteMany}821              />822            </Show>823            <Show when={view() === "settings"}>824              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>825                <SettingsView826                  entriesCount={entries().length}827                  breachMonitoring={breachMonitoring()}828                  lockOnClose={lockOnClose()}829                  autoLockMinutes={autoLockMinutes()}830                  trashRetentionDays={trashRetentionDays()}831                  theme={theme()}832                  accentColor={accentColor()}833                  onBreachMonitoringChange={applyBreachMonitoring}834                  onLockOnCloseChange={applyLockOnClose}835                  onAutoLockMinutesChange={applyAutoLockMinutes}836                  onTrashRetentionChange={applyTrashRetention}837                  onThemeChange={applyTheme}838                  onAccentChange={applyAccentColor}839                  onBack={handleBack}840                  onImport={() => setView("import")}841                  onExport={() => setView("export")}842                  onBreachCheckDone={loadEntries}843                  onOpenHealth={openHealth}844                  onOpenCJKImport={handleOpenCJKImport}845                  onOpenFileImport={handleOpenFileImport}846                />847              </Suspense>848            </Show>849            <Show when={view() === "add"}>850              <AddView851                entry={editEntry()}852                entries={entries()}853                onBack={handleBack}854                onSave={handleSave}855              />856            </Show>857            <Show when={view() === "import"}>858              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>859                <ImportView onBack={handleBack} onImport={handleSave} />860              </Suspense>861            </Show>862            <Show when={view() === "export"}>863              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>864                <ExportView onBack={handleBack} onRequiresUnlock={handleLock} />865              </Suspense>866            </Show>867            <Show when={view() === "health"}>868              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>869                <HealthView870                  entries={entries()}871                  onFixEntry={handleFixEntry}872                  onBack={() => setView("settings")}873                  onRefresh={loadEntries}874                />875              </Suspense>876            </Show>877            <Show when={view() === "trash"}>878              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>879                <TrashView880                  onBack={() => setView("list")}881                  onRestored={() => void loadEntries()}882                />883              </Suspense>884            </Show>885            <Show when={restoreView() === "cjk"}>886              <CJKImport887                mode="onboarding"888                onBack={() => setRestoreView(null)}889                onDone={async () => {890                  setRestoreView(null);891                  await handleUnlock();892                }}893              />894            </Show>895            <Show when={restoreView() === "file"}>896              <Suspense fallback={<div class="peach-loading"><PeachWordmark /></div>}>897                <ImportView898                  mode="onboarding"899                  replacesExistingVault={true}900                  onBack={() => setRestoreView(null)}901                  onImport={async () => {902                    setRestoreView(null);903                    await handleUnlock();904                  }}905                />906              </Suspense>907            </Show>908            </section>909          </Show>910        </Show>911      </Show>912    </div>913  );914}