1import { createEffect, createMemo, createSignal, For, Match, onCleanup, onMount, Show, Switch } from "solid-js";2import { sendMessage } from "../App";3import { PeachMark } from "../components/PeachMark";4import { SyncModeSelector } from "../components/SyncModeSelector";5import { StackDeck } from "../components/settings/StackDeck";6import type { CardId, StackBodies, StackCardSpec } from "../components/settings/types";7import { RecoveryWordDisplayView } from "./RecoveryWordDisplay";8import { WhatsNewView } from "./WhatsNew";9import type { Canary } from "../../shared/types";10import { ACCENT_COLORS } from "../../shared/types";11import { PEACH_VERSION, hasReleaseNotes } from "../../shared/release-notes";12import type {13 AccentColorName,14 PasskeyProviderState,15 ProFeature,16 VaultSnapshot,17} from "../../shared/types";18import type { PairedDevice } from "../../shared/sync-types";19import {20 describeSyncOutcome,21 syncIndicator,22 syncIndicatorLabel,23 type SyncOutcomeSummary,24} from "../../shared/sync-outcome";25import type { SyncGeneration } from "../../background/sync-generation";26import {27 DEFAULT_BINDINGS,28 findConflict,29 formatKeybinding,30 keybindingFromEvent,31 SHORTCUT_DESCRIPTORS,32 type Keybinding,33 type ShortcutAction,34} from "../../shared/shortcuts";35import { WEB3FORMS_KEY } from "../../shared/config";3637interface LicenseInfo {38 valid: boolean;39 plan: "free" | "pro";40 issued?: string;41}4243interface SettingsProps {44 entriesCount: number;45 breachMonitoring: boolean;46 lockOnClose: boolean;47 autoLockMinutes: number;48 lockedSyncRequiresUnlock: boolean;49 trashRetentionDays: number;50 theme: "dark" | "light";51 accentColor: AccentColorName;52 textSize: "small" | "medium" | "large";53 reduceMotion: boolean;54 isPro?: boolean;55 initialSection?: string | null;56 upgradeHighlight?: ProFeature | null;57 onBreachMonitoringChange: (enabled: boolean) => void | Promise<void>;58 onLockOnCloseChange: (enabled: boolean) => void | Promise<void>;59 onAutoLockMinutesChange: (minutes: number) => void | Promise<void>;60 onLockedSyncRequiresUnlockChange: (enabled: boolean) => void | Promise<void>;61 onTrashRetentionChange: (days: number) => void | Promise<void>;62 onThemeChange: (theme: "dark" | "light") => void;63 onAccentChange: (name: AccentColorName) => void | Promise<void>;64 onTextSizeChange: (size: "small" | "medium" | "large") => void | Promise<void>;65 onReduceMotionChange: (enabled: boolean) => void | Promise<void>;66 shortcuts: Record<ShortcutAction, Keybinding>;67 onShortcutsChange: (active: Record<ShortcutAction, Keybinding>) => void | Promise<void>;68 onLicenseChange?: () => void | Promise<void>;69 isExiting?: boolean;70 onBack: () => void;71 onImport: () => void;72 onExport: () => void;73 onBreachCheckDone: () => void;74 onOpenHealth?: () => void;75 onOpenSyncPairing?: (method?: "code") => void;76 onOpenFileImport?: () => void;77 onOpenPanic?: () => void;78 onOpenCodexGenerate?: () => void;79 onOpenCodexRestore?: () => void;80 818283 onProGate?: (feature: ProFeature) => void;84 onCardChange?: (id: CardId) => void;85}8687const FEEDBACK_CATEGORIES = ["Bug report", "Feature request", "Question", "Other"];88const MAX_FEEDBACK_MESSAGE_LENGTH = 4000;89const PRO_CELEBRATION_CARD_STEP_MS = 150;90const PRO_CELEBRATION_THANK_YOU_MS = 3200;9192function sanitizeFeedbackMessage(value: string): string {93 return value94 .trim()95 .slice(0, MAX_FEEDBACK_MESSAGE_LENGTH)96 97 .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, "")98 .replace(/&/g, "&")99 .replace(/</g, "<")100 .replace(/>/g, ">")101 .replace(/"/g, """)102 .replace(/'/g, "'");103}104105function formatActivatedSince(issued: string | undefined): string {106 if (!issued) return "Active";107 try {108 const d = new Date(issued);109 if (Number.isNaN(d.getTime())) return "Active";110 return `Active since ${d.toLocaleDateString(undefined, { month: "long", year: "numeric" })}`;111 } catch {112 return "Active";113 }114}115116function initialSectionToCard(value: string | null | undefined): CardId | null {117 if (!value) return null;118 if (value === "security") return "protection";119 if (value === "license") return "pro";120 if (121 value === "protection" ||122 value === "vault" ||123 value === "sync" ||124 value === "appearance" ||125 value === "shortcuts" ||126 value === "pro" ||127 value === "feedback"128 ) {129 return value;130 }131 return null;132}133134135136137138const SECURE_RESET_DISCLOSURE =139 "Peach will archive this device's old Sync trust and start the new Sync generation. " +140 "Every other device must be updated first, then re-paired with this one — they will " +141 "not continue on their own. Your vault and your recovery words are not changed.";142143function secureResetHeadline(state: string | undefined): string {144 switch (state) {145 case "LEGACY_ACTIVE":146 return "Legacy Sync generation";147 case "RESET_REQUIRED":148 return "Reset required";149 case "RESET_CONFIRMED":150 return "Reset not completed";151 case "V2_ANCHOR":152 case "REPAIRING":153 return "Not re-paired";154 case "V2_ACTIVE":155 return "New Sync generation";156 case "UNKNOWN":157 return "Sync generation unreadable";158 default:159 return "Sync generation";160 }161}162163function secureResetDetail(state: string | undefined): string {164 switch (state) {165 case "LEGACY_ACTIVE":166 return "This device still holds the old Sync trust. Resetting retires it for good: update Peach on every other device, then re-pair each one.";167 case "RESET_REQUIRED":168 return "Sync is stopped until the reset completes. Update Peach on every other device, then reset this one and re-pair each device.";169 case "RESET_CONFIRMED":170 return "The reset did not finish. Nothing was lost — the old trust is archived. Try again.";171 case "V2_ANCHOR":172 case "REPAIRING":173 return "This device anchors the new Sync generation and is not re-paired yet. Pair each device again; until then it keeps its own vault and cannot sync.";174 case "V2_ACTIVE":175 return "This device is on the new Sync generation. Each device is re-paired individually.";176 case "UNKNOWN":177 return "This device's Sync generation can't be read, so sync is stopped. Reinstall or contact support.";178 default:179 return "Sync state is unavailable.";180 }181}182183export function SettingsView(props: SettingsProps) {184 const manifest = chrome.runtime.getManifest();185 const version = manifest.version;186 const initial = props.initialSection;187 const [activeCard, setActiveCard] = createSignal<CardId>(188 props.upgradeHighlight ? "pro" : initialSectionToCard(initial) ?? "pro"189 );190191 createEffect(() => { props.onCardChange?.(activeCard()); });192193 const [justActivated, setJustActivated] = createSignal(false);194 const [isFanning, setIsFanning] = createSignal(false);195196 function triggerCelebration() {197 if (isFanning()) return;198 setJustActivated(false);199 setIsFanning(true);200 setActiveCard("pro");201 const fanOrder: CardId[] = ["protection", "vault", "sync", "appearance", "shortcuts", "feedback"];202 fanOrder.forEach((id, i) => {203 window.setTimeout(() => setActiveCard(id), (i + 1) * PRO_CELEBRATION_CARD_STEP_MS);204 });205 window.setTimeout(() => {206 setActiveCard("pro");207 setIsFanning(false);208 setJustActivated(true);209 window.setTimeout(() => setJustActivated(false), PRO_CELEBRATION_THANK_YOU_MS);210 }, (fanOrder.length + 1) * PRO_CELEBRATION_CARD_STEP_MS);211 }212213 function handleProCelebrationClick(e: MouseEvent) {214 e.stopPropagation();215 triggerCelebration();216 }217218 const [checkingBreaches, setCheckingBreaches] = createSignal(false);219 const [breachResult, setBreachResult] = createSignal<string | null>(null);220 const [licenseInfo, setLicenseInfo] = createSignal<LicenseInfo | null>(null);221 const [licenseKeyInput, setLicenseKeyInput] = createSignal("");222 const [licenseError, setLicenseError] = createSignal<string | null>(null);223 const [, setLicenseSuccess] = createSignal<string | null>(null);224 const [activatingLicense, setActivatingLicense] = createSignal(false);225226 const isPro = () => props.isPro ?? false;227 const cards = createMemo<StackCardSpec[]>(() => [228 {229 id: "pro",230 num: "I · FOREVER",231 title: "Peach Pro",232 lede: isPro() ? "active · paid once, yours forever" : "$39 once · yours forever",233 bgVar: "--stack-pro-bg",234 fgVar: "--stack-pro-fg",235 icon: "spark",236 onIconClick: isPro() ? triggerCelebration : undefined,237 },238 {239 id: "protection",240 num: "II · PROTECT",241 title: "Protection",242 lede: `${props.breachMonitoring ? "breaches watched" : "breach watch off"} · ${props.lockOnClose ? "locks on close" : "manual lock"}`,243 bgVar: "--stack-protect-bg",244 fgVar: "--stack-protect-fg",245 icon: "shield",246 },247 {248 id: "vault",249 num: "III · KEEP",250 title: "Vault",251 lede: `${props.entriesCount} ${props.entriesCount === 1 ? "entry" : "entries"} · backups, history, cleanup`,252 bgVar: "--stack-vault-bg",253 fgVar: "--stack-vault-fg",254 icon: "lock",255 },256 {257 id: "sync",258 num: "IV · ECHO",259 title: "Sync",260 lede: isPro() ? "End to End Encryption" : "Pro · encrypted device sync",261 bgVar: "--stack-sync-bg",262 fgVar: "--stack-sync-fg",263 icon: "sync",264 },265 {266 id: "appearance",267 num: "V · DRESS",268 title: "Appearance",269 lede: `${props.theme} · ${props.accentColor} · ${props.textSize}`,270 bgVar: "--stack-appear-bg",271 fgVar: "--stack-appear-fg",272 icon: "sun",273 },274 {275 id: "shortcuts",276 num: "VI · KEYS",277 title: "Shortcuts",278 lede: `${SHORTCUT_DESCRIPTORS.length} bindings · what your fingers know`,279 bgVar: "--stack-shortcut-bg",280 fgVar: "--stack-shortcut-fg",281 icon: "keys",282 },283 {284 id: "feedback",285 num: "VII · ECHO",286 title: "Feedback",287 lede: `version ${version} · tell us what would make it better`,288 bgVar: "--stack-feedback-bg",289 fgVar: "--stack-feedback-fg",290 icon: "bubble",291 },292 ]);293 const [passkeyState, setPasskeyState] = createSignal<PasskeyProviderState | null>(null);294 const [passkeySaving, setPasskeySaving] = createSignal(false);295296 297 298 interface PendingVouched {299 deviceId: string;300 deviceName: string;301 longTermPublicKeyHex: string;302 receivedAt: number;303 vouchedByDeviceId: string;304 }305 const [pendingVouched, setPendingVouched] = createSignal<PendingVouched[]>([]);306 const [vouchedBusy, setVouchedBusy] = createSignal<string | null>(null);307 308 const [pairedDevices, setPairedDevices] = createSignal<PairedDevice[]>([]);309 const [trustDataCorrupted, setTrustDataCorrupted] = createSignal(false);310311 const [confirmUnpair, setConfirmUnpair] = createSignal<string | null>(null);312 const [unpairError, setUnpairError] = createSignal<string | null>(null);313 const [renameDeviceId, setRenameDeviceId] = createSignal<string | null>(null);314 const [renameDraft, setRenameDraft] = createSignal("");315 const [syncStatus, setSyncStatus] = createSignal<"idle" | "syncing" | "error">("idle");316 const [syncFlash, setSyncFlash] = createSignal<string | null>(null);317 318 319 const [syncSummary, setSyncSummary] = createSignal<SyncOutcomeSummary>({});320 321 322 const [generation, setGeneration] = createSignal<SyncGeneration | null>(null);323 const [resetOpen, setResetOpen] = createSignal(false);324 const [resetPassword, setResetPassword] = createSignal("");325 const [resetError, setResetError] = createSignal<string | null>(null);326 const [resetting, setResetting] = createSignal(false);327 const syncLight = () =>328 syncStatus() === "syncing"329 ? "busy"330 : syncIndicator(syncSummary(), pairedDevices().length);331 const syncLightLabel = () => syncIndicatorLabel(syncLight(), syncSummary());332 const lastSyncLine = () => {333 const s = syncSummary();334 if (!s.outcome) return "No sync attempted yet";335 return `${syncRelativeTime(s.finishedAt)} · ${describeSyncOutcome(s)}`;336 };337 async function loadSyncState() {338 const r = (await sendMessage({ type: "GET_SYNC_STATE" })) as {339 ok: boolean;340 data?: SyncOutcomeSummary;341 };342 if (r.ok && r.data) {343 setSyncSummary(r.data);344 setSyncStatus(r.data.status ?? "idle");345 }346 }347348 async function loadGeneration() {349 const r = (await sendMessage({ type: "GET_SYNC_GENERATION" })) as {350 ok: boolean;351 data?: SyncGeneration | null;352 };353 if (r.ok) setGeneration(r.data ?? null);354 }355356 async function runSecureReset() {357 setResetting(true);358 const r = (await sendMessage({359 type: "SECURE_RESET",360 payload: { password: resetPassword() },361 })) as { ok: boolean; data?: SyncGeneration | null; error?: string };362 setResetting(false);363 setResetPassword("");364 if (!r.ok) {365 setResetError(r.error ?? "The reset did not complete — nothing was lost, try again");366 await loadGeneration();367 return;368 }369 setResetError(null);370 setResetOpen(false);371 if (r.data) setGeneration(r.data);372 }373374 const STALE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;375 function syncRelativeTime(when: number | undefined): string {376 if (!when) return "Not synced yet";377 const elapsed = Date.now() - when;378 if (elapsed < 60_000) return "Just now";379 const minutes = Math.floor(elapsed / 60_000);380 if (minutes < 60) return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;381 const hours = Math.floor(minutes / 60);382 if (hours < 24) return `${hours} hour${hours === 1 ? "" : "s"} ago`;383 const days = Math.floor(hours / 24);384 return days < 7 ? `${days} day${days === 1 ? "" : "s"} ago` : "Not seen recently";385 }386 function isSyncStale(d: PairedDevice): boolean {387 return d.lastSyncedAt !== undefined && Date.now() - d.lastSyncedAt > STALE_THRESHOLD_MS;388 }389 function deviceTypeLabel(t: PairedDevice["deviceType"]): string {390 switch (t) {391 case "android": return "Android";392 case "ios": return "iPhone";393 case "extension": return "Browser";394 default: return "Device";395 }396 }397398 async function loadPairedDevices() {399 if (!isPro()) return;400 const r = (await sendMessage({ type: "LIST_PAIRED_DEVICES" })) as {401 ok: boolean;402 error?: string;403 data?: { devices: PairedDevice[] };404 };405 if (r.ok) {406 setTrustDataCorrupted(false);407 setPairedDevices(r.data?.devices ?? []);408 } else if (r.error === "trust_data_corrupted") {409 setPairedDevices([]);410 setTrustDataCorrupted(true);411 }412 }413 async function unpairDevice(deviceId: string) {414 const result = (await sendMessage({ type: "UNPAIR_DEVICE", payload: { deviceId } })) as {415 ok: boolean;416 error?: string;417 };418 if (!result.ok) {419 setUnpairError(result.error ?? "Could not remove this device");420 return;421 }422 setUnpairError(null);423 setConfirmUnpair(null);424 await loadPairedDevices();425 }426 async function renameDevice(deviceId: string) {427 const name = renameDraft().trim();428 if (!name) return;429 const result = (await sendMessage({430 type: "RENAME_PAIRED_DEVICE",431 payload: { deviceId, name },432 })) as { ok: boolean };433 if (!result.ok) return;434 setRenameDeviceId(null);435 await loadPairedDevices();436 }437 async function syncNow() {438 setSyncStatus("syncing");439 setSyncFlash(null);440 const res = (await sendMessage({441 type: "TRIGGER_SYNC",442 payload: { reason: "manual", force: true },443 })) as { ok: boolean; error?: string };444 if (!res.ok) {445 setSyncStatus("error");446 setSyncSummary({ status: "error", outcome: "run_failed", detail: res.error });447 return;448 }449 450 451 452 let s: SyncOutcomeSummary = { status: "syncing" };453 for (let i = 0; i < 40 && s.status === "syncing"; i++) {454 await new Promise((r) => setTimeout(r, 250));455 const state = (await sendMessage({ type: "GET_SYNC_STATE" })) as {456 ok: boolean;457 data?: SyncOutcomeSummary;458 };459 s = state.ok ? state.data ?? { status: "idle" } : { status: "error", outcome: "run_failed" };460 }461 setSyncSummary(s);462 setSyncStatus(s.status ?? "idle");463 464 465 setSyncFlash(describeSyncOutcome(s));466 setTimeout(() => setSyncFlash(null), 4000);467 await loadPairedDevices();468 }469 470 const [rotateConfirmOpen, setRotateConfirmOpen] = createSignal(false);471 const [rotating, setRotating] = createSignal(false);472 const [rotateError, setRotateError] = createSignal<string | null>(null);473 const [showSyncConnection, setShowSyncConnection] = createSignal(false);474 const [showSyncRecovery, setShowSyncRecovery] = createSignal(false);475476 async function loadPendingVouched() {477 const r = (await sendMessage({ type: "GET_PENDING_VOUCHED_DEVICES" })) as {478 ok: boolean;479 data?: PendingVouched[];480 };481 if (r.ok) setPendingVouched(r.data ?? []);482 }483 async function confirmVouched(deviceId: string) {484 setVouchedBusy(deviceId);485 try {486 await sendMessage({ type: "CONFIRM_VOUCHED_DEVICE", payload: { deviceId } });487 await loadPendingVouched();488 } finally {489 setVouchedBusy(null);490 }491 }492 async function rejectVouched(deviceId: string) {493 setVouchedBusy(deviceId);494 try {495 await sendMessage({ type: "REJECT_VOUCHED_DEVICE", payload: { deviceId } });496 await loadPendingVouched();497 } finally {498 setVouchedBusy(null);499 }500 }501 async function doRotateSyncIdentity() {502 setRotateError(null);503 setRotating(true);504 try {505 const r = (await sendMessage({ type: "ROTATE_SYNC_IDENTITY" })) as {506 ok: boolean;507 error?: string;508 };509 if (!r.ok) {510 setRotateError(r.error ?? "Rotation failed.");511 return;512 }513 setRotateConfirmOpen(false);514 515 516 setShowNewRecoveryWords(true);517 } finally {518 setRotating(false);519 }520 }521522 const [dedupCount, setDedupCount] = createSignal<number | null>(null);523 const [dedupRunning, setDedupRunning] = createSignal(false);524 const [dedupDone, setDedupDone] = createSignal<number | null>(null);525526 const [declinedCardCount, setDeclinedCardCount] = createSignal(0);527528 529 530 531 const [historySnapshots, setHistorySnapshots] = createSignal<VaultSnapshot[]>([]);532 const [historyLoading, setHistoryLoading] = createSignal(false);533 const [historyRestoring, setHistoryRestoring] = createSignal<string | null>(null);534 const [historyShowAll, setHistoryShowAll] = createSignal(false);535536 async function loadVaultHistory() {537 setHistoryLoading(true);538 try {539 const res = await sendMessage({ type: "GET_VAULT_HISTORY" });540 const list = (res as { ok: boolean; data?: VaultSnapshot[] }).data ?? [];541 setHistorySnapshots(list);542 } finally {543 setHistoryLoading(false);544 }545 }546547 async function handleRestoreVaultSnapshot(id: string) {548 if (historyRestoring()) return;549 setHistoryRestoring(id);550 const res = await sendMessage({551 type: "RESTORE_VAULT_SNAPSHOT",552 payload: { snapshotId: id },553 });554 setHistoryRestoring(null);555 if ((res as { ok: boolean }).ok) {556 557 558 props.onBack();559 }560 }561562 function formatSnapshotTime(savedAt: number): string {563 const diff = Date.now() - savedAt;564 if (diff < 60_000) return "Just now";565 if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;566 const d = new Date(savedAt);567 const isToday = new Date().toDateString() === d.toDateString();568 const isYest =569 new Date(Date.now() - 86_400_000).toDateString() === d.toDateString();570 const t = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });571 if (isToday) return `Today ${t}`;572 if (isYest) return `Yesterday ${t}`;573 return `${d.toLocaleDateString([], { month: "short", day: "numeric" })} ${t}`;574 }575576 function reasonLabel(reason: VaultSnapshot["reason"]): string {577 return (578 {579 local_save: "saved",580 sync_received: "synced",581 import: "imported",582 restore: "restored",583 } as const584 )[reason] ?? reason;585 }586587 const [showVaultAdvanced, setShowVaultAdvanced] = createSignal(false);588 const [showWhatsNew, setShowWhatsNew] = createSignal(false);589590 const [showChangePw, setShowChangePw] = createSignal(false);591 const [changePwCurrent, setChangePwCurrent] = createSignal("");592 const [changePwNew, setChangePwNew] = createSignal("");593 const [changePwConfirm, setChangePwConfirm] = createSignal("");594 const [changePwSaving, setChangePwSaving] = createSignal(false);595 const [changePwError, setChangePwError] = createSignal<string | null>(null);596 const [changePwSuccess] = createSignal(false);597 const [showNewRecoveryWords, setShowNewRecoveryWords] = createSignal(false);598599 const [pinEnabled, setPinEnabled] = createSignal(false);600 const [pinFlow, setPinFlow] = createSignal<"setup" | "disable" | null>(null);601 const [pinCurrentPassword, setPinCurrentPassword] = createSignal("");602 const [pinValue, setPinValue] = createSignal("");603 const [pinConfirm, setPinConfirm] = createSignal("");604 const [pinSaving, setPinSaving] = createSignal(false);605 const [pinError, setPinError] = createSignal<string | null>(null);606607 608 const [showViewWords, setShowViewWords] = createSignal(false);609 const [viewWordsPassword, setViewWordsPassword] = createSignal("");610 const [viewWordsError, setViewWordsError] = createSignal<string | null>(null);611 const [viewedWords, setViewedWords] = createSignal<string[] | null>(null);612 const [viewWordsBusy, setViewWordsBusy] = createSignal(false);613614 async function handleViewRecoveryWords() {615 setViewWordsError(null);616 if (!viewWordsPassword()) {617 setViewWordsError("Enter your master password.");618 return;619 }620 setViewWordsBusy(true);621 try {622 const r = (await sendMessage({623 type: "GET_RECOVERY_WORDS",624 payload: { password: viewWordsPassword() },625 })) as { ok: boolean; data?: string[]; error?: string };626 if (r.ok) {627 setViewedWords(r.data ?? []);628 setViewWordsPassword("");629 return;630 }631 switch (r.error) {632 case "wrong_password":633 setViewWordsError("Incorrect password");634 break;635 case "password_required":636 setViewWordsError("Enter your master password.");637 break;638 case "recovery_not_setup":639 setViewWordsError("Recovery words aren't set up for this vault yet.");640 break;641 default:642 setViewWordsError("Couldn't retrieve recovery words.");643 }644 } finally {645 setViewWordsBusy(false);646 }647 }648 function closeViewWords() {649 setShowViewWords(false);650 setViewWordsPassword("");651 setViewWordsError(null);652 setViewedWords(null);653 }654655 const [duressEnabled, setDuressEnabled] = createSignal(false);656 const [showDuressSetup, setShowDuressSetup] = createSignal(false);657 const [duressPassword, setDuressPassword] = createSignal("");658 const [duressConfirm, setDuressConfirm] = createSignal("");659 const [duressMainPassword, setDuressMainPassword] = createSignal("");660 const [duressSaving, setDuressSaving] = createSignal(false);661 const [duressError, setDuressError] = createSignal<string | null>(null);662 const [duressSuccess, setDuressSuccess] = createSignal<string | null>(null);663664 const [canaryEntries, setCanaryEntries] = createSignal<Array<{id: string; title: string; canary: Canary}>>([]);665666 const [canaryTestingId, setCanaryTestingId] = createSignal<string | null>(null);667 const [canaryTestResult, setCanaryTestResult] = createSignal<{id: string; ok: boolean} | null>(null);668669 const [fbCategory, setFbCategory] = createSignal("Bug report");670 const [fbMessage, setFbMessage] = createSignal("");671 type FeedbackState = 'idle' | 'sending' | 'sent' | 'error';672 const [feedbackState, setFeedbackState] = createSignal<FeedbackState>('idle');673674 createEffect(() => {675 if (props.upgradeHighlight) {676 setActiveCard("pro");677 }678 });679680 onMount(async () => {681 const [licenseRes, passkeyRes, duressRes, settingsRes, keyRes] = await Promise.all([682 sendMessage({ type: "GET_LICENSE" }),683 sendMessage({ type: "GET_PASSKEY_PROVIDER_STATE" }),684 sendMessage({ type: "IS_DURESS_ENABLED" }),685 sendMessage({ type: "GET_SETTINGS" }),686 sendMessage({ type: "GET_LICENSE_KEY" }),687 ]);688689 690 691 void loadVaultHistory();692693 694 695 void loadPendingVouched();696 void loadPairedDevices();697 void loadSyncState();698 void loadGeneration();699 const onBroadcast = (msg: unknown) => {700 const m = msg as { type?: string; payload?: unknown } | null;701 if (m?.type === "VOUCHED_DEVICE_PENDING") {702 void loadPendingVouched();703 }704 if (m?.type === "SYNC_STATE_CHANGED") {705 const payload = (m.payload ?? {}) as SyncOutcomeSummary;706 setSyncSummary(payload);707 setSyncStatus(payload.status ?? "idle");708 }709 };710 chrome.runtime?.onMessage?.addListener(onBroadcast);711 onCleanup(() => {712 try { chrome.runtime?.onMessage?.removeListener(onBroadcast); } catch { }713 });714715 if ((licenseRes as { ok: boolean }).ok) {716 setLicenseInfo((licenseRes as { ok: boolean; data?: LicenseInfo }).data ?? null);717 }718719 if ((passkeyRes as { ok: boolean }).ok) {720 setPasskeyState(721 (passkeyRes as { ok: boolean; data?: PasskeyProviderState }).data ?? null722 );723 }724725 if ((duressRes as { ok: boolean }).ok) {726 setDuressEnabled((duressRes as { ok: boolean; data?: boolean }).data ?? false);727 }728729 if ((settingsRes as { ok: boolean }).ok) {730 const sData = (settingsRes as { ok: boolean; data?: { declinedCardFingerprints?: string[]; pinEnabled?: boolean } }).data;731 setDeclinedCardCount(sData?.declinedCardFingerprints?.length ?? 0);732 setPinEnabled(sData?.pinEnabled === true);733 }734735 if ((keyRes as { ok: boolean }).ok) {736 setLicenseKey((keyRes as { ok: boolean; data?: string }).data ?? null);737 }738739 const entriesRes = await sendMessage({ type: "GET_ENTRIES" });740 if ((entriesRes as { ok: boolean }).ok) {741 const entries = (entriesRes as { ok: boolean; data?: Array<{id: string; title: string; canary?: Canary}> }).data ?? [];742 setCanaryEntries(743 entries744 .filter((e) => e.canary?.webhookUrl)745 .map((e) => ({ id: e.id, title: e.title, canary: e.canary! }))746 );747 }748749 });750751 function resetPinFlow() {752 setPinFlow(null);753 setPinCurrentPassword("");754 setPinValue("");755 setPinConfirm("");756 setPinError(null);757 }758759 async function handleSetupPin() {760 setPinError(null);761 if (!pinCurrentPassword()) { setPinError("enter your current password"); return; }762 if (!/^\d{4,12}$/.test(pinValue())) { setPinError("PIN must be 4–12 digits"); return; }763 if (pinValue() !== pinConfirm()) { setPinError("PINs do not match"); return; }764 setPinSaving(true);765 const res = await sendMessage({766 type: "SETUP_PIN",767 payload: { currentPassword: pinCurrentPassword(), pin: pinValue() },768 }) as { ok: boolean; error?: string };769 if (res.ok) {770 setPinEnabled(true);771 resetPinFlow();772 } else {773 setPinError(res.error === "incorrect_current_password" ? "incorrect current password" : "couldn't set up PIN");774 }775 setPinSaving(false);776 }777778 async function handleDisablePin() {779 setPinError(null);780 if (!pinCurrentPassword()) { setPinError("enter your current password"); return; }781 setPinSaving(true);782 const res = await sendMessage({783 type: "DISABLE_PIN",784 payload: { currentPassword: pinCurrentPassword() },785 }) as { ok: boolean; error?: string };786 if (res.ok) {787 setPinEnabled(false);788 resetPinFlow();789 } else {790 setPinError(res.error === "incorrect_current_password" ? "incorrect current password" : "couldn't remove PIN");791 }792 setPinSaving(false);793 }794795 async function handleChangePassword() {796 setChangePwError(null);797 if (!changePwCurrent().trim()) { setChangePwError("enter your current password"); return; }798 if (changePwNew().length < 12) { setChangePwError("new password must be at least 12 characters"); return; }799 if (changePwNew() !== changePwConfirm()) { setChangePwError("new passwords do not match"); return; }800 if (changePwNew() === changePwCurrent()) { setChangePwError("new password must differ from current"); return; }801 setChangePwSaving(true);802 const res = await sendMessage({803 type: "CHANGE_PASSWORD",804 payload: { currentPassword: changePwCurrent(), newPassword: changePwNew() },805 }) as { ok: boolean; error?: string };806 if (res.ok) {807 setChangePwCurrent(""); setChangePwNew(""); setChangePwConfirm("");808 setShowChangePw(false);809 810 811 812 await sendMessage({ type: "SET_RECOVERY_CONFIRM_PENDING" });813 setShowNewRecoveryWords(true);814 } else {815 setChangePwError(res.error ?? "failed to change password");816 }817 setChangePwSaving(false);818 }819820 const [copied, setCopied] = createSignal(false);821822 async function copyLicenseKey(key: string) {823 await navigator.clipboard.writeText(key);824 setCopied(true);825 setTimeout(() => setCopied(false), 2000);826 }827828 async function handleActivateLicense() {829 const key = licenseKeyInput().trim();830 if (!key) return;831 setActivatingLicense(true);832 setLicenseError(null);833 setLicenseSuccess(null);834 const res = await sendMessage({ type: "ACTIVATE_LICENSE", payload: { key } });835 setActivatingLicense(false);836 if ((res as { ok: boolean }).ok) {837 const data = (res as { ok: boolean; data?: LicenseInfo }).data;838 if (data?.valid) {839 setLicenseInfo(data);840 setLicenseKey(key);841 setLicenseSuccess("License activated!");842 setLicenseKeyInput("");843 } else {844 setLicenseError("Invalid license key");845 }846 } else {847 setLicenseError("Activation failed");848 }849 }850851 async function handleTogglePasskeys() {852 const current = passkeyState();853 if (!current || !current.supported) return;854 setPasskeySaving(true);855 const res = await sendMessage({856 type: "SET_PASSKEY_PROVIDER_ENABLED",857 payload: { enabled: !current.enabled },858 });859 setPasskeySaving(false);860 if ((res as { ok: boolean }).ok) {861 setPasskeyState(862 (res as { ok: boolean; data?: PasskeyProviderState }).data ?? null863 );864 }865 }866867 async function handleCheckAllBreaches() {868 setCheckingBreaches(true);869 setBreachResult(null);870 const res = await sendMessage({ type: "CHECK_ALL_BREACHES" });871 setCheckingBreaches(false);872 if ((res as { ok: boolean }).ok) {873 const data = (res as { ok: boolean; data?: Record<string, number> }).data ?? {};874 const breached = Object.values(data).filter((count) => count > 0).length;875 setBreachResult(876 breached > 0 ? `${breached} password${breached > 1 ? "s" : ""} found in breaches` : "All passwords clean"877 );878 props.onBreachCheckDone();879 }880 }881882883 async function handleSetupDuress() {884 const mainPw = duressMainPassword().trim();885 const duressPw = duressPassword().trim();886 const confirmPw = duressConfirm().trim();887888 if (!mainPw) { setDuressError("enter your main password to confirm"); return; }889 if (duressPw.length < 8) { setDuressError("duress password must be at least 8 characters"); return; }890 if (duressPw === mainPw) { setDuressError("duress password must differ from your main password"); return; }891 if (duressPw !== confirmPw) { setDuressError("passwords do not match"); return; }892893 setDuressSaving(true);894 setDuressError(null);895896 const verifyRes = await sendMessage({ type: "VERIFY_MAIN_PASSWORD", payload: { password: mainPw } }) as { ok: boolean; data?: boolean };897 if (!verifyRes.ok || !verifyRes.data) {898 setDuressError("incorrect main password");899 setDuressSaving(false);900 return;901 }902903 const res = await sendMessage({ type: "SETUP_DURESS", payload: { duressPassword: duressPw } }) as { ok: boolean; error?: string };904 setDuressSaving(false);905 if (res.ok) {906 setDuressEnabled(true);907 setShowDuressSetup(false);908 setDuressPassword("");909 setDuressConfirm("");910 setDuressMainPassword("");911 setDuressSuccess("Duress password set. If entered, a decoy vault will be shown.");912 setTimeout(() => setDuressSuccess(null), 5000);913 } else {914 setDuressError(915 res.error === "session_expired"916 ? "Vault session expired — lock and unlock Peach, then try again"917 : res.error ?? "failed to set duress password"918 );919 }920 }921922 async function handleClearDeclinedCards() {923 await sendMessage({ type: "UPDATE_SETTINGS", payload: { declinedCardFingerprints: [] } });924 setDeclinedCardCount(0);925 }926927 async function handleCountDuplicates() {928 setDedupRunning(true);929 setDedupDone(null);930 const res = await sendMessage({ type: "COUNT_DUPLICATES" }) as { ok: boolean; data?: number };931 setDedupRunning(false);932 if (res.ok) setDedupCount(res.data ?? 0);933 }934935 async function handleDeduplicate() {936 setDedupRunning(true);937 const res = await sendMessage({ type: "DEDUPLICATE_ENTRIES" }) as { ok: boolean; data?: number };938 setDedupRunning(false);939 if (res.ok) {940 setDedupDone(res.data ?? 0);941 setDedupCount(0);942 }943 }944945 async function handleDisableDuress() {946 const mainPw = duressMainPassword().trim();947 if (!mainPw) { setDuressError("enter your main password to confirm"); return; }948949 setDuressSaving(true);950 setDuressError(null);951952 const verifyRes = await sendMessage({ type: "VERIFY_MAIN_PASSWORD", payload: { password: mainPw } }) as { ok: boolean; data?: boolean };953 if (!verifyRes.ok || !verifyRes.data) {954 setDuressError("incorrect main password");955 setDuressSaving(false);956 return;957 }958959 const res = await sendMessage({ type: "DISABLE_DURESS" }) as { ok: boolean; error?: string };960 setDuressSaving(false);961 if (res.ok) {962 setDuressEnabled(false);963 setShowDuressSetup(false);964 setDuressMainPassword("");965 setDuressSuccess("Duress password disabled.");966 setTimeout(() => setDuressSuccess(null), 4000);967 } else {968 setDuressError(res.error ?? "failed to disable duress password");969 }970 }971972 async function handleSubmitFeedback() {973 const message = sanitizeFeedbackMessage(fbMessage());974 if (!message) return;975976 setFeedbackState('sending');977978 try {979 const category = FEEDBACK_CATEGORIES.includes(fbCategory())980 ? fbCategory()981 : FEEDBACK_CATEGORIES[0];982 const res = await fetch('https://api.web3forms.com/submit', {983 method: 'POST',984 headers: { 'Content-Type': 'application/json' },985 body: JSON.stringify({986 access_key: WEB3FORMS_KEY,987 subject: `Peach Feedback - ${category}`,988 message,989 from_name: 'Peach User',990 991 botcheck: '',992 }),993 });994995 if (!res.ok) throw new Error(`HTTP ${res.status}`);996 const data = await res.json() as { success: boolean; message?: string };997 if (!data.success) throw new Error(data.message ?? 'unknown error');998999 setFeedbackState('sent');1000 setFbMessage('');1001 setFbCategory(FEEDBACK_CATEGORIES[0]);1002 } catch (err) {1003 console.error('[feedback]', err);1004 setFeedbackState('error');1005 setTimeout(() => setFeedbackState('idle'), 4000);1006 }1007 }10081009 function renderSecurity() {1010 return (1011 <div class="peach-settings-body">1012 <div class="peach-settings-group">1013 <p class="peach-settings-sub-label">LOCKING</p>1014 <div class="peach-settings-row">1015 <span>Lock on close</span>1016 <button1017 class={`peach-toggle ${props.lockOnClose ? "is-on" : ""}`}1018 onClick={() => void props.onLockOnCloseChange(!props.lockOnClose)}1019 aria-label="Toggle lock on close"1020 >1021 <span class="peach-toggle-knob"></span>1022 </button>1023 </div>1024 <div class="peach-settings-row">1025 <span>Auto-lock after</span>1026 <select1027 class="peach-settings-select"1028 value={String(props.autoLockMinutes)}1029 onChange={(e) => void props.onAutoLockMinutesChange(Number(e.currentTarget.value))}1030 >1031 <option value="1">1 minute</option>1032 <option value="5">5 minutes</option>1033 <option value="15">15 minutes</option>1034 <option value="30">30 minutes</option>1035 <option value="0">Never</option>1036 </select>1037 </div>1038 <p class="peach-settings-sub-label">SYNC WHILE LOCKED</p>1039 <div class="peach-settings-row">1040 <span>Require unlock after restart</span>1041 <button1042 class={`peach-toggle ${props.lockedSyncRequiresUnlock ? "is-on" : ""}`}1043 onClick={() => void props.onLockedSyncRequiresUnlockChange(!props.lockedSyncRequiresUnlock)}1044 aria-label="Toggle unlock requirement for locked Sync after restart"1045 aria-pressed={props.lockedSyncRequiresUnlock}1046 >1047 <span class="peach-toggle-knob"></span>1048 </button>1049 </div>1050 <p class="peach-settings-sub-label">QUICK UNLOCK</p>1051 <div class="peach-settings-row peach-settings-row--meta">1052 <span>PIN unlock</span>1053 <button1054 class="peach-btn peach-btn--subtle peach-btn--sm"1055 onClick={() => { setPinFlow(pinEnabled() ? "disable" : "setup"); setPinError(null); }}1056 >1057 {pinEnabled() ? "remove" : "set up"}1058 </button>1059 </div>1060 <Show when={pinFlow() === "setup"}>1061 <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">1062 <input1063 class="peach-settings-input"1064 type="password"1065 placeholder="current password"1066 value={pinCurrentPassword()}1067 onInput={(e) => setPinCurrentPassword((e.target as HTMLInputElement).value)}1068 autocomplete="current-password"1069 />1070 <input1071 class="peach-settings-input"1072 type="password"1073 inputmode="numeric"1074 maxlength="12"1075 placeholder="new 4–12 digit PIN"1076 value={pinValue()}1077 onInput={(e) => setPinValue((e.target as HTMLInputElement).value.replace(/\D/g, "").slice(0, 12))}1078 autocomplete="off"1079 />1080 <input1081 class="peach-settings-input"1082 type="password"1083 inputmode="numeric"1084 maxlength="12"1085 placeholder="confirm PIN"1086 value={pinConfirm()}1087 onInput={(e) => setPinConfirm((e.target as HTMLInputElement).value.replace(/\D/g, "").slice(0, 12))}1088 autocomplete="off"1089 onKeyDown={(e) => { if (e.key === "Enter") void handleSetupPin(); }}1090 />1091 <Show when={pinError()}>1092 <p class="peach-hint peach-hint-error" style="margin:0">{pinError()}</p>1093 </Show>1094 <button1095 class="peach-btn peach-btn--accent peach-btn--sm"1096 style="align-self:flex-start"1097 onClick={() => void handleSetupPin()}1098 disabled={pinSaving() || !pinCurrentPassword() || !/^\d{4,12}$/.test(pinValue()) || !/^\d{4,12}$/.test(pinConfirm())}1099 >1100 {pinSaving() ? "saving…" : "save PIN"}1101 </button>1102 </div>1103 </Show>1104 <Show when={pinFlow() === "disable"}>1105 <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">1106 <input1107 class="peach-settings-input"1108 type="password"1109 placeholder="current password"1110 value={pinCurrentPassword()}1111 onInput={(e) => setPinCurrentPassword((e.target as HTMLInputElement).value)}1112 autocomplete="current-password"1113 onKeyDown={(e) => { if (e.key === "Enter") void handleDisablePin(); }}1114 />1115 <Show when={pinError()}>1116 <p class="peach-hint peach-hint-error" style="margin:0">{pinError()}</p>1117 </Show>1118 <button1119 class="peach-btn peach-btn--subtle peach-btn--sm"1120 style="align-self:flex-start"1121 onClick={() => void handleDisablePin()}1122 disabled={pinSaving() || !pinCurrentPassword()}1123 >1124 {pinSaving() ? "removing…" : "remove PIN"}1125 </button>1126 </div>1127 </Show>11281129 <p class="peach-settings-sub-label">BREACH PROTECTION</p>1130 <div class="peach-settings-row">1131 <span>Breach monitoring</span>1132 <button1133 class={`peach-toggle ${props.breachMonitoring ? "is-on" : ""}`}1134 onClick={() => void props.onBreachMonitoringChange(!props.breachMonitoring)}1135 aria-label="Toggle breach monitoring"1136 >1137 <span class="peach-toggle-knob"></span>1138 </button>1139 </div>1140 <div class="peach-settings-row peach-settings-row--meta">1141 <span>Check all passwords</span>1142 <button1143 class="peach-btn peach-btn--subtle peach-btn--sm"1144 onClick={() => void handleCheckAllBreaches()}1145 disabled={checkingBreaches()}1146 >1147 {checkingBreaches() ? "checking..." : "run"}1148 </button>1149 </div>1150 <Show when={breachResult()}>1151 <div class="peach-settings-row peach-settings-row--meta">1152 <span>Last check</span>1153 <span class="peach-settings-value">{breachResult()}</span>1154 </div>1155 </Show>11561157 <p class="peach-settings-sub-label">MASTER PASSWORD</p>1158 <div class="peach-settings-row peach-settings-row--meta">1159 <span>Master password</span>1160 <button1161 class="peach-btn peach-btn--subtle peach-btn--sm"1162 onClick={() => { setShowChangePw((v) => !v); setChangePwError(null); }}1163 >1164 {showChangePw() ? "cancel" : "change"}1165 </button>1166 </div>1167 <Show when={showChangePw()}>1168 <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">1169 <input1170 class="peach-settings-input"1171 type="password"1172 placeholder="current password"1173 value={changePwCurrent()}1174 onInput={(e) => setChangePwCurrent((e.target as HTMLInputElement).value)}1175 autocomplete="current-password"1176 />1177 <input1178 class="peach-settings-input"1179 type="password"1180 placeholder="new password (min 12 chars)"1181 value={changePwNew()}1182 onInput={(e) => setChangePwNew((e.target as HTMLInputElement).value)}1183 autocomplete="new-password"1184 />1185 <input1186 class="peach-settings-input"1187 type="password"1188 placeholder="confirm new password"1189 value={changePwConfirm()}1190 onInput={(e) => setChangePwConfirm((e.target as HTMLInputElement).value)}1191 autocomplete="new-password"1192 onKeyDown={(e) => { if (e.key === "Enter") void handleChangePassword(); }}1193 />1194 <Show when={changePwError()}>1195 <p class="peach-hint peach-hint-error" style="margin:0">{changePwError()}</p>1196 </Show>1197 <Show when={changePwSuccess()}>1198 <p class="peach-hint" style="margin:0;color:var(--peach-accent)">password changed ✓</p>1199 </Show>1200 <button1201 class="peach-btn peach-btn--accent peach-btn--sm"1202 style="align-self:flex-start"1203 onClick={() => void handleChangePassword()}1204 disabled={changePwSaving() || !changePwCurrent() || !changePwNew() || !changePwConfirm()}1205 >1206 {changePwSaving() ? "saving…" : "save new password"}1207 </button>1208 </div>1209 </Show>12101211 {}1212 <div class="peach-settings-row peach-settings-row--meta">1213 <span>Recovery words</span>1214 <button1215 class="peach-btn peach-btn--subtle peach-btn--sm"1216 onClick={() => {1217 if (showViewWords()) { closeViewWords(); } else { setShowViewWords(true); }1218 }}1219 >1220 {showViewWords() ? "cancel" : "view"}1221 </button>1222 </div>1223 <Show when={showViewWords()}>1224 <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">1225 <Show1226 when={viewedWords()}1227 fallback={1228 <>1229 <p class="peach-hint" style="margin:0;color:var(--peach-t2)">1230 Enter your master password to reveal your recovery words.1231 </p>1232 <input1233 class="peach-settings-input"1234 type="password"1235 placeholder="master password"1236 value={viewWordsPassword()}1237 onInput={(e) => setViewWordsPassword((e.target as HTMLInputElement).value)}1238 autocomplete="current-password"1239 onKeyDown={(e) => { if (e.key === "Enter") void handleViewRecoveryWords(); }}1240 />1241 <Show when={viewWordsError()}>1242 <p class="peach-hint peach-hint-error" style="margin:0">{viewWordsError()}</p>1243 </Show>1244 <button1245 class="peach-btn peach-btn--accent peach-btn--sm"1246 style="align-self:flex-start"1247 onClick={() => void handleViewRecoveryWords()}1248 disabled={viewWordsBusy() || !viewWordsPassword()}1249 >1250 {viewWordsBusy() ? "checking…" : "reveal recovery words"}1251 </button>1252 </>1253 }1254 >1255 <div class="peach-recovery-words-grid">1256 <For each={viewedWords()!}>1257 {(word, i) => (1258 <span class="peach-recovery-word"><b>{i() + 1}</b> {word}</span>1259 )}1260 </For>1261 </div>1262 <button1263 class="peach-btn peach-btn--subtle peach-btn--sm"1264 style="align-self:flex-start"1265 onClick={closeViewWords}1266 >done</button>1267 </Show>1268 </div>1269 </Show>12701271 <p class="peach-settings-sub-label">1272 DURESS PASSWORD1273 <Show when={!isPro()}>1274 <span class="peach-pro-mark" aria-label="Pro feature" style="margin-left:6px">✦</span>1275 </Show>1276 </p>1277 <div class="peach-settings-row peach-settings-row--top">1278 <div class="peach-settings-row-main">1279 <span>1280 Duress password1281 <Show when={!isPro()}>1282 <span class="peach-pro-badge">Pro</span>1283 </Show>1284 </span>1285 <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--t2)">1286 If entered under coercion, shows a decoy empty vault instead of your real one.1287 </span>1288 </div>1289 <div class={`peach-duress-status-pill ${duressEnabled() ? "is-active" : ""}`}>1290 {duressEnabled() ? "on" : "off"}1291 </div>1292 </div>12931294 <Show when={duressEnabled() && !showDuressSetup()}>1295 <div class="peach-settings-row peach-settings-row--meta">1296 <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">1297 If someone forces you to unlock Peach, enter the duress password instead. A decoy empty vault opens; your real vault stays hidden. The encrypted storage is identical in size whether a hidden vault exists or not, so the hidden vault cannot be proven or disproven without both passwords. This protects against a coercer who demands your password — not against device malware or someone who already has your device unlocked.1298 </span>1299 </div>1300 </Show>13011302 <Show when={duressSuccess()}>1303 <div class="peach-settings-row peach-settings-row--meta">1304 <span class="peach-settings-value" style="color:var(--peach-sync-ok)">{duressSuccess()}</span>1305 </div>1306 </Show>13071308 <Show when={!showDuressSetup()}>1309 <div class="peach-settings-row peach-settings-row--meta">1310 <button1311 class="peach-btn peach-btn--subtle peach-btn--sm"1312 onClick={() => {1313 1314 1315 1316 1317 1318 if (!isPro() && !duressEnabled()) {1319 props.onProGate?.("duress_vault");1320 setActiveCard("pro");1321 return;1322 }1323 setShowDuressSetup(true);1324 setDuressError(null);1325 setDuressSuccess(null);1326 setDuressPassword("");1327 setDuressConfirm("");1328 setDuressMainPassword("");1329 }}1330 >1331 {duressEnabled() ? "Change / disable" : "Set up"}1332 </button>1333 </div>1334 </Show>13351336 <Show when={showDuressSetup()}>1337 <div class="peach-duress-form">1338 <label class="peach-label">main password (to confirm)</label>1339 <input1340 class="peach-settings-input"1341 type="password"1342 placeholder="your current master password"1343 autocomplete="current-password"1344 value={duressMainPassword()}1345 onInput={(e) => setDuressMainPassword(e.currentTarget.value)}1346 />1347 <Show when={!duressEnabled()}>1348 <label class="peach-label">new duress password</label>1349 <input1350 class="peach-settings-input"1351 type="password"1352 placeholder="duress password (min 8 chars)"1353 autocomplete="new-password"1354 value={duressPassword()}1355 onInput={(e) => setDuressPassword(e.currentTarget.value)}1356 />1357 <label class="peach-label">confirm duress password</label>1358 <input1359 class="peach-settings-input"1360 type="password"1361 placeholder="confirm duress password"1362 autocomplete="new-password"1363 value={duressConfirm()}1364 onInput={(e) => setDuressConfirm(e.currentTarget.value)}1365 />1366 </Show>13671368 <Show when={duressError()}>1369 <p class="peach-hint peach-hint-error">{duressError()}</p>1370 </Show>13711372 <div class="peach-duress-actions">1373 <button1374 class="peach-btn peach-btn--subtle peach-btn--sm"1375 onClick={() => { setShowDuressSetup(false); setDuressError(null); }}1376 >1377 cancel1378 </button>1379 <Show when={duressEnabled()}>1380 <button1381 class="peach-btn peach-btn--ghost peach-btn--sm"1382 style="color:var(--peach-breach)"1383 onClick={() => void handleDisableDuress()}1384 disabled={duressSaving()}1385 >1386 {duressSaving() ? "disabling..." : "disable duress"}1387 </button>1388 </Show>1389 <Show when={!duressEnabled()}>1390 <button1391 class="peach-btn peach-btn--accent peach-btn--sm"1392 onClick={() => void handleSetupDuress()}1393 disabled={duressSaving() || !duressMainPassword() || !duressPassword() || !duressConfirm()}1394 >1395 {duressSaving() ? "saving..." : "save"}1396 </button>1397 </Show>1398 </div>1399 </div>1400 </Show>14011402 <p class="peach-settings-sub-label">1403 CANARY ENTRIES1404 <Show when={!isPro()}>1405 <span class="peach-pro-mark" aria-label="Pro feature" style="margin-left:6px">✦</span>1406 </Show>1407 </p>1408 <div class="peach-settings-row peach-settings-row--top">1409 <div class="peach-settings-row-main">1410 <span>1411 Canary entries1412 <Show when={!isPro()}>1413 <span class="peach-pro-badge">Pro</span>1414 </Show>1415 </span>1416 <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">1417 Silently pings a webhook when an entry is accessed. Configure canary on any entry in your vault.1418 </span>1419 </div>1420 <span class="peach-settings-value" style="flex-shrink:0">1421 {canaryEntries().length > 0 ? `${canaryEntries().length} active` : "none"}1422 </span>1423 </div>1424 <Show when={canaryEntries().length > 0}>1425 <For each={canaryEntries()}>1426 {(entry) => (1427 <div class="peach-settings-row peach-settings-row--meta">1428 <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0">{entry.title}</span>1429 <button1430 class="peach-btn peach-btn--subtle peach-btn--sm"1431 onClick={() => void handleTestCanary(entry)}1432 disabled={canaryTestingId() === entry.id}1433 style="flex-shrink:0"1434 >1435 {canaryTestingId() === entry.id1436 ? "sending…"1437 : canaryTestResult()?.id === entry.id1438 ? (canaryTestResult()!.ok ? "sent ✓" : "failed ✗")1439 : "test"}1440 </button>1441 </div>1442 )}1443 </For>1444 </Show>14451446 <p class="peach-settings-sub-label">PASSKEYS</p>1447 <div class="peach-settings-row peach-settings-row--top">1448 <div class="peach-settings-row-main">1449 <span>Intercept passkey requests</span>1450 <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--t2)">1451 Peach can handle passkey sign-in and creation on supported Chromium browsers.1452 </span>1453 </div>1454 <button1455 class={`peach-toggle ${passkeyState()?.enabled ? "is-on" : ""}`}1456 onClick={() => void handleTogglePasskeys()}1457 aria-label="Toggle passkey interception"1458 disabled={!passkeyState()?.supported || passkeySaving()}1459 >1460 <span class="peach-toggle-knob"></span>1461 </button>1462 </div>1463 <div class="peach-settings-row peach-settings-row--meta">1464 <span>Status</span>1465 <span class="peach-settings-value">{passkeyState()?.statusLabel ?? "Unavailable"}</span>1466 </div>1467 <div class="peach-settings-row peach-settings-row--meta">1468 <span>Browser</span>1469 <span class="peach-settings-value">1470 {passkeyState()?.browserLabel ?? "Unknown"}1471 {passkeyState()?.supported ? " ✓" : " (interception unavailable)"}1472 </span>1473 </div>1474 <div class="peach-info-notice" style="margin-top:8px">1475 Only one passkey provider can be active at a time. Disable Bitwarden or 1Password passkey interception if Peach reports a conflict.1476 </div>1477 <Show when={passkeyState()?.conflict}>1478 <div class="peach-settings-row peach-settings-row--meta">1479 <span class="peach-settings-value" style="color:#e7b36b">{passkeyState()!.conflict}</span>1480 </div>1481 </Show>1482 </div>1483 </div>1484 );1485 }14861487 function renderVault() {1488 return (1489 <div class="peach-settings-body">1490 <div class="peach-settings-group">1491 <p class="peach-settings-sub-label">ENTRIES</p>1492 <div class="peach-settings-row peach-settings-row--meta">1493 <span>Entries</span>1494 <span class="peach-settings-value">{props.entriesCount}</span>1495 </div>1496 <div class="peach-settings-row peach-settings-row--meta">1497 <span>Duplicates</span>1498 <Show when={dedupDone() !== null} fallback={1499 <button1500 class="peach-btn peach-btn--subtle peach-btn--sm"1501 onClick={() => void handleCountDuplicates()}1502 disabled={dedupRunning()}1503 >1504 {dedupRunning() ? "scanning..." : dedupCount() === null ? "scan" : dedupCount() === 0 ? "none found" : `${dedupCount()} found — remove?`}1505 </button>1506 }>1507 <span class="peach-settings-value" style="color:var(--peach-sync-ok)">1508 {dedupDone() === 0 ? "already clean" : `removed ${dedupDone()}`}1509 </span>1510 </Show>1511 </div>1512 <Show when={dedupCount() !== null && dedupCount()! > 0 && dedupDone() === null}>1513 <div class="peach-settings-row peach-settings-row--meta" style="flex-direction:column;align-items:stretch;gap:6px">1514 <div class="peach-restore-warning">1515 {dedupCount()} duplicate {dedupCount() === 1 ? "entry" : "entries"} found. The newest copy of each will be kept; older duplicates will be moved to trash.1516 </div>1517 <div style="display:flex;gap:6px">1518 <button1519 class="peach-btn peach-btn--subtle peach-btn--sm"1520 onClick={() => setDedupCount(null)}1521 >1522 cancel1523 </button>1524 <button1525 class="peach-btn peach-btn--accent peach-btn--sm"1526 onClick={() => void handleDeduplicate()}1527 disabled={dedupRunning()}1528 >1529 {dedupRunning() ? "removing..." : "remove duplicates"}1530 </button>1531 </div>1532 </div>1533 </Show>15341535 <p class="peach-settings-sub-label">MAINTENANCE</p>1536 <div class="peach-settings-row peach-settings-row--meta">1537 <span>Trash auto-delete</span>1538 <select1539 class="peach-settings-select"1540 value={String(props.trashRetentionDays)}1541 onChange={(e) => void props.onTrashRetentionChange(Number(e.currentTarget.value))}1542 >1543 <option value="7">7 days</option>1544 <option value="30">30 days</option>1545 <option value="90">90 days</option>1546 <option value="0">Never</option>1547 </select>1548 </div>1549 <div class="peach-settings-row peach-settings-row--meta">1550 <span>Advanced Vault Health</span>1551 <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={props.onOpenHealth}>1552 open1553 </button>1554 </div>1555 <Show when={declinedCardCount() > 0}>1556 <div class="peach-settings-row peach-settings-row--meta">1557 <span>{declinedCardCount()} card{declinedCardCount() === 1 ? '' : 's'} set to never save</span>1558 <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={() => void handleClearDeclinedCards()}>1559 Clear1560 </button>1561 </div>1562 </Show>15631564 <p class="peach-settings-sub-label">DATA</p>1565 <div class="peach-settings-row peach-settings-row--meta">1566 <span>Import passwords</span>1567 <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={props.onImport}>1568 open1569 </button>1570 </div>1571 <div class="peach-settings-row peach-settings-row--meta">1572 <span>Export backup</span>1573 <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={props.onExport}>1574 open1575 </button>1576 </div>1577 <div class="peach-settings-row peach-settings-row--meta">1578 <span>1579 Peach Codex1580 <Show when={!isPro()}>1581 <span class="peach-pro-badge">Pro</span>1582 </Show>1583 </span>1584 <button1585 class="peach-btn peach-btn--subtle peach-btn--sm"1586 onClick={() => props.onOpenCodexGenerate?.()}1587 >1588 open1589 </button>1590 </div>1591 {1592}1593 <div class="peach-settings-row peach-settings-row--meta">1594 <span>Restore from Codex</span>1595 <button1596 class="peach-btn peach-btn--subtle peach-btn--sm"1597 onClick={() => props.onOpenCodexRestore?.()}1598 >1599 open1600 </button>1601 </div>16021603 <Show when={hasReleaseNotes()}>1604 <p class="peach-settings-sub-label">RELEASE NOTES</p>1605 <div class="peach-settings-row peach-settings-row--meta">1606 <span>v{PEACH_VERSION}</span>1607 <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={() => setShowWhatsNew(true)}>1608 view1609 </button>1610 </div>1611 </Show>16121613 <span class="peach-settings-sub-label">VAULT HISTORY</span>1614 <Show when={historyLoading()}>1615 <p class="peach-settings-hint">Loading…</p>1616 </Show>1617 <Show when={!historyLoading() && historySnapshots().length === 0}>1618 <p class="peach-settings-hint">1619 No snapshots yet. Peach saves automatically before every change —1620 saves, syncs, and imports.1621 </p>1622 </Show>1623 <Show when={!historyLoading() && historySnapshots().length > 0}>1624 <p class="peach-settings-hint">1625 Restoring locks your vault. Unlock with the password that1626 encrypted that snapshot to confirm.1627 </p>1628 <div class="peach-history-list">1629 <For each={historySnapshots().slice(0, historyShowAll() ? undefined : 3)}>1630 {(snap) => (1631 <div class="peach-history-row">1632 <div class="peach-history-meta">1633 <span class="peach-history-time">1634 {formatSnapshotTime(snap.savedAt)}1635 </span>1636 <span class="peach-history-sub">1637 {[1638 snap.entryCount !== null1639 ? `up to ${snap.entryCount} ${snap.entryCount === 1 ? "entry" : "entries"}`1640 : null,1641 reasonLabel(snap.reason),1642 ]1643 .filter(Boolean)1644 .join(" · ")}1645 </span>1646 </div>1647 <button1648 class={`peach-btn peach-btn--subtle peach-btn--sm peach-history-btn${1649 historyRestoring() === snap.id ? " is-busy" : ""1650 }`}1651 onClick={() => void handleRestoreVaultSnapshot(snap.id)}1652 disabled={historyRestoring() !== null}1653 >1654 <Show when={historyRestoring() === snap.id} fallback="Restore">1655 …1656 </Show>1657 </button>1658 </div>1659 )}1660 </For>1661 </div>1662 <Show when={historySnapshots().length > 3}>1663 <button1664 class="peach-settings-advanced-toggle"1665 onClick={() => setHistoryShowAll((v) => !v)}1666 aria-expanded={historyShowAll()}1667 >1668 <span class="peach-settings-hint" style="margin:0">1669 {historyShowAll() ? "show less" : `${historySnapshots().length - 3} older`}1670 </span>1671 <span class="peach-settings-advanced-chevron">1672 {historyShowAll() ? "▲" : "▼"}1673 </span>1674 </button>1675 </Show>1676 <p class="peach-history-footer">1677 {historySnapshots().length} of 10 snapshots1678 </p>1679 </Show>16801681 <button1682 class="peach-settings-advanced-toggle"1683 onClick={() => setShowVaultAdvanced((v) => !v)}1684 aria-expanded={showVaultAdvanced()}1685 >1686 <span class="peach-settings-sub-label" style="margin:0">ADVANCED</span>1687 <span class="peach-settings-advanced-chevron">1688 {showVaultAdvanced() ? "▲" : "▼"}1689 </span>1690 </button>16911692 <Show when={showVaultAdvanced()}>1693 <div class="peach-danger-card">1694 <div class="peach-danger-card-head">1695 <span class="peach-danger-card-glyph" aria-hidden="true">⟳</span>1696 <h3 class="peach-danger-card-title">Replace vault from backup</h3>1697 </div>1698 <p class="peach-danger-card-copy">1699 Wipes the current vault and restores from a backup file.1700 Recoverable only if your backup is good.1701 </p>1702 <button1703 class="peach-danger-card-button"1704 onClick={() => props.onOpenFileImport?.()}1705 >1706 Choose backup file1707 </button>1708 </div>17091710 <Show when={props.onOpenPanic}>1711 <div class="peach-danger-card peach-danger-card--hazard">1712 <div class="peach-danger-card-head">1713 <span class="peach-danger-card-glyph" aria-hidden="true">⚠</span>1714 <h3 class="peach-danger-card-title">Destroy vault</h3>1715 </div>1716 <p class="peach-danger-card-copy">1717 Permanently wipes every entry, setting, and license on this1718 device. There is no recovery.1719 </p>1720 <button1721 class="peach-danger-card-button"1722 onClick={() => props.onOpenPanic?.()}1723 >1724 Begin destruction1725 </button>1726 </div>1727 </Show>1728 </Show>1729 </div>1730 </div>1731 );1732 }17331734 function renderSync() {1735 return (1736 <div class="peach-settings-body">1737 <div class="peach-settings-group">1738 <p class="peach-settings-sub-label" style="margin-top:0">SYNC STATUS</p>1739 <Show when={trustDataCorrupted()}>1740 <p class="peach-settings-value" role="alert" style="color:var(--peach-danger,#e5805c);line-height:1.5">1741 Device trust data is damaged — re-pair your devices after updating1742 </p>1743 </Show>1744 <div1745 class="peach-settings-row peach-settings-row--meta"1746 style="align-items:center;gap:8px"1747 aria-label={syncLightLabel()}1748 title={syncLightLabel()}1749 >1750 <span class={`stk-pip stk-pip--sync is-${syncLight()}`} aria-hidden="true" />1751 <span class="peach-settings-value" style="color:var(--peach-t2);line-height:1.5;flex:1;min-width:0;overflow-wrap:anywhere">1752 {syncFlash() ?? lastSyncLine()}1753 </span>1754 {17551756}1757 <Show when={pairedDevices().length > 0}>1758 <button1759 class="peach-btn peach-btn--subtle peach-btn--sm"1760 aria-label="Sync this vault now"1761 disabled={syncStatus() === "syncing"}1762 onClick={() => void syncNow()}1763 >{syncStatus() === "syncing" ? "syncing…" : "sync now"}</button>1764 </Show>1765 </div>17661767 {17681769}1770 <Show when={generation()?.state && generation()?.state !== "V2_ACTIVE"}>1771 <p class="peach-settings-sub-label">SECURE SYNC RESET</p>1772 <div class="peach-settings-row peach-settings-row--top">1773 <div class="peach-settings-row-main">1774 <span class="peach-settings-value" style="color:var(--peach-t1)">1775 {secureResetHeadline(generation()?.state)}1776 </span>1777 <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">1778 {secureResetDetail(generation()?.state)}1779 </span>1780 </div>1781 <Show1782 when={1783 generation()?.state === "LEGACY_ACTIVE" ||1784 generation()?.state === "RESET_REQUIRED" ||1785 generation()?.state === "RESET_CONFIRMED"1786 }1787 >1788 <button1789 class="peach-btn peach-btn--subtle peach-btn--sm"1790 onClick={() => {1791 setResetError(null);1792 setResetPassword("");1793 setResetOpen(true);1794 }}1795 >reset sync</button>1796 </Show>1797 </div>1798 <Show when={resetError()}>1799 <p1800 class="peach-settings-value"1801 role="alert"1802 style="color:var(--peach-danger,#e5805c);font-size:11px;line-height:1.5"1803 >{resetError()}</p>1804 </Show>1805 <Show when={resetOpen()}>1806 <div class="peach-settings-stack" style="padding: 4px 0 2px; gap: 6px;">1807 <p class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">1808 {SECURE_RESET_DISCLOSURE}1809 </p>1810 <input1811 class="peach-settings-input"1812 type="password"1813 placeholder="master password"1814 value={resetPassword()}1815 onInput={(e) => setResetPassword((e.target as HTMLInputElement).value)}1816 autocomplete="current-password"1817 />1818 <div style="display:flex;gap:4px">1819 <button1820 class="peach-btn peach-btn--subtle peach-btn--sm"1821 disabled={resetting()}1822 onClick={() => void runSecureReset()}1823 >{resetting() ? "resetting…" : "reset"}</button>1824 <button1825 class="peach-btn peach-btn--subtle peach-btn--sm"1826 disabled={resetting()}1827 onClick={() => setResetOpen(false)}1828 >cancel</button>1829 </div>1830 </div>1831 </Show>1832 </Show>18331834 <Show when={pairedDevices().length > 0}>1835 <p class="peach-settings-sub-label">PAIRED DEVICES</p>1836 <For each={pairedDevices()}>1837 {(d) => (1838 <div class="peach-settings-row peach-settings-row--top">1839 <div class="peach-settings-row-main">1840 <Show1841 when={renameDeviceId() === d.deviceId}1842 fallback={<span>{d.localAlias ?? d.deviceName ?? "Unnamed device"}</span>}1843 >1844 <input1845 class="peach-settings-input"1846 aria-label={`Rename ${d.localAlias ?? d.deviceName ?? "device"}`}1847 maxlength={64}1848 value={renameDraft()}1849 onInput={(event) => setRenameDraft(event.currentTarget.value)}1850 onKeyDown={(event) => {1851 if (event.key === "Enter") void renameDevice(d.deviceId);1852 if (event.key === "Escape") setRenameDeviceId(null);1853 }}1854 />1855 </Show>1856 <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">1857 {deviceTypeLabel(d.deviceType)} · {syncRelativeTime(d.lastSyncedAt)}{isSyncStale(d) ? " · not seen recently" : ""}1858 </span>1859 </div>1860 <Show1861 when={confirmUnpair() === d.deviceId}1862 fallback={1863 <div style="display:flex;gap:4px;flex-shrink:0">1864 <Show1865 when={renameDeviceId() === d.deviceId}1866 fallback={1867 <button1868 class="peach-btn peach-btn--subtle peach-btn--sm"1869 onClick={() => {1870 setRenameDraft(d.localAlias ?? d.deviceName ?? "");1871 setRenameDeviceId(d.deviceId);1872 }}1873 >rename</button>1874 }1875 >1876 <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={() => setRenameDeviceId(null)}>cancel</button>1877 <button class="peach-btn peach-btn--subtle peach-btn--sm" disabled={!renameDraft().trim()} onClick={() => void renameDevice(d.deviceId)}>save</button>1878 </Show>1879 <button1880 class="peach-btn peach-btn--subtle peach-btn--sm"1881 onClick={() => {1882 setUnpairError(null);1883 setConfirmUnpair(d.deviceId);1884 }}1885 >remove</button>1886 </div>1887 }1888 >1889 {18901891189218931894}1895 <div class="peach-unpair-confirm">1896 <p class="peach-unpair-confirm-note">1897 Stops this device receiving future changes. It doesn't1898 lock it out of what it already has — if it's lost or1899 stolen, also change your master password and generate1900 new recovery words.1901 </p>1902 <div style="display:flex;gap:6px;justify-content:flex-end">1903 <button class="peach-btn peach-btn--subtle peach-btn--sm" onClick={() => setConfirmUnpair(null)}>cancel</button>1904 <button1905 class="peach-btn peach-btn--sm"1906 style="background:var(--peach-breach);border-color:var(--peach-breach)"1907 onClick={() => void unpairDevice(d.deviceId)}1908 >remove</button>1909 </div>1910 </div>1911 <Show when={unpairError()}>1912 <p class="peach-settings-value" role="alert" style="color:var(--peach-danger,#e5805c);font-size:11px;line-height:1.5">1913 {unpairError()}1914 </p>1915 </Show>1916 </Show>1917 </div>1918 )}1919 </For>1920 </Show>19211922 <Show when={pendingVouched().length > 0}>1923 <p class="peach-settings-sub-label">1924 PENDING DEVICES1925 <span class="peach-pro-badge" style="background:#C8A840;color:#1a1a1a">{pendingVouched().length}</span>1926 </p>1927 <For each={pendingVouched()}>1928 {(dev) => (1929 <div class="peach-settings-row peach-settings-row--top">1930 <div class="peach-settings-row-main">1931 <span>{dev.deviceName}</span>1932 <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">1933 Key {dev.longTermPublicKeyHex.slice(0, 12).match(/.{4}/g)?.join(" ")} ·1934 requested {new Date(dev.receivedAt).toISOString().slice(0, 16).replace("T", " ")} UTC ·1935 vouched by device {dev.vouchedByDeviceId}. Allowing it can read1936 existing vault contents and all future changes.1937 </span>1938 </div>1939 <div style="display:flex;gap:6px;flex-shrink:0">1940 <button1941 class="peach-btn peach-btn--sm"1942 disabled={vouchedBusy() === dev.deviceId}1943 onClick={() => void confirmVouched(dev.deviceId)}1944 >Allow</button>1945 <button1946 class="peach-btn peach-btn--subtle peach-btn--sm"1947 disabled={vouchedBusy() === dev.deviceId}1948 onClick={() => void rejectVouched(dev.deviceId)}1949 >Reject</button>1950 </div>1951 </div>1952 )}1953 </For>1954 </Show>19551956 <p class="peach-settings-sub-label">ADD A DEVICE</p>1957 <button1958 class="peach-sync-pair-option"1959 onClick={() => props.onOpenSyncPairing?.("code")}1960 >1961 <span class="peach-sync-pair-option-icon" aria-hidden="true">1962 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">1963 <rect x="6" y="2.5" width="8" height="15" rx="1.6" />1964 <path d="M9 15 L11 15" />1965 </svg>1966 </span>1967 <span class="peach-sync-pair-option-main">1968 <span class="peach-sync-pair-option-title">Show a code</span>1969 <span class="peach-sync-pair-option-sub">Scan it with Peach on your phone, then confirm one 8-digit code</span>1970 </span>1971 <span class="peach-sync-pair-option-chevron" aria-hidden="true">›</span>1972 </button>1973 <Show when={!isPro()}>1974 <p class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2);margin:8px 2px 0">1975 At least one device needs Peach Pro — pair with a Pro device and it carries over to here.1976 </p>1977 </Show>19781979 <button1980 class="peach-settings-advanced-toggle peach-sync-disclosure-toggle"1981 onClick={() => setShowSyncConnection((value) => !value)}1982 aria-expanded={showSyncConnection()}1983 aria-controls="peach-sync-connection"1984 >1985 <span>1986 <span class="peach-settings-sub-label" style="margin:0">CONNECTION</span>1987 <span class="peach-sync-disclosure-summary">Relay and privacy choices</span>1988 </span>1989 <span class="peach-settings-advanced-chevron">1990 {showSyncConnection() ? "▲" : "▼"}1991 </span>1992 </button>1993 <Show when={showSyncConnection()}>1994 <div id="peach-sync-connection" class="peach-sync-disclosure-content">1995 <SyncModeSelector />1996 </div>1997 </Show>19981999 <button2000 class="peach-settings-advanced-toggle peach-sync-disclosure-toggle"2001 onClick={() => setShowSyncRecovery((value) => !value)}2002 aria-expanded={showSyncRecovery()}2003 aria-controls="peach-sync-recovery"2004 >2005 <span>2006 <span class="peach-settings-sub-label" style="margin:0">RECOVERY & SECURITY</span>2007 <span class="peach-sync-disclosure-summary">For a lost or stolen device</span>2008 </span>2009 <span class="peach-settings-advanced-chevron">2010 {showSyncRecovery() ? "▲" : "▼"}2011 </span>2012 </button>2013 <Show when={showSyncRecovery()}>2014 <div id="peach-sync-recovery" class="peach-sync-disclosure-content">2015 <Show2016 when={rotateConfirmOpen()}2017 fallback={2018 <div class="peach-settings-row peach-settings-row--top">2019 <div class="peach-settings-row-main">2020 <span>Rotate sync identity</span>2021 <span class="peach-settings-value" style="font-size:11px;line-height:1.5;color:var(--peach-t2)">2022 Disconnects every device and replaces the keys used for sync.2023 </span>2024 </div>2025 <button2026 class="peach-btn peach-btn--subtle peach-btn--sm"2027 style="color:var(--peach-breach);border-color:color-mix(in srgb,var(--peach-breach) 40%,transparent)"2028 onClick={() => { setRotateError(null); setRotateConfirmOpen(true); }}2029 >rotate</button>2030 </div>2031 }2032 >2033 <div class="peach-info-notice" style="margin-top:8px;border-color:color-mix(in srgb,var(--peach-breach) 40%,transparent)">2034 This disconnects every paired device and changes your 12 recovery words. You'll be shown the new words next.2035 <Show when={rotateError()}>2036 <div style="color:var(--peach-breach);margin-top:6px">{rotateError()}</div>2037 </Show>2038 <div style="display:flex;gap:6px;margin-top:10px">2039 <button2040 class="peach-btn peach-btn--subtle peach-btn--sm"2041 disabled={rotating()}2042 onClick={() => setRotateConfirmOpen(false)}2043 >Cancel</button>2044 <button2045 class="peach-btn peach-btn--sm"2046 style="background:var(--peach-breach);border-color:var(--peach-breach)"2047 disabled={rotating()}2048 onClick={() => void doRotateSyncIdentity()}2049 >{rotating() ? "Rotating…" : "Rotate sync identity"}</button>2050 </div>2051 </div>2052 </Show>2053 </div>2054 </Show>2055 </div>2056 </div>2057 );2058 }20592060 function renderAppearance() {2061 const sizeOptions: Array<{ id: "medium" | "large"; label: string }> = [2062 { id: "medium", label: "Default" },2063 { id: "large", label: "Large" },2064 ];2065 return (2066 <div class="peach-settings-body">2067 <div class="peach-settings-group">2068 <p class="peach-settings-sub-label">THEME</p>2069 <div class="peach-settings-row peach-settings-row--meta">2070 <span>Theme</span>2071 <button2072 class="peach-btn peach-btn--subtle peach-btn--sm"2073 onClick={() =>2074 props.onThemeChange(props.theme === "dark" ? "light" : "dark")2075 }2076 >2077 {props.theme === "dark" ? "Switch to light" : "Switch to dark"}2078 </button>2079 </div>20802081 <p class="peach-settings-sub-label">ACCENT</p>2082 <div class="peach-settings-row peach-settings-row--meta peach-settings-row--accent">2083 <span>Accent</span>2084 <div class="peach-accent-picker">2085 <For each={ACCENT_COLORS}>2086 {(color) => (2087 <button2088 class="peach-accent-swatch peach-swatch"2089 classList={{ "is-active": props.accentColor === color.name }}2090 style={{ background: color.hex }}2091 onClick={() => void props.onAccentChange(color.name)}2092 aria-label={color.name}2093 title={color.name}2094 />2095 )}2096 </For>2097 </div>2098 </div>20992100 <p class="peach-settings-sub-label">TEXT SIZE</p>2101 <div class="peach-settings-row peach-settings-row--meta">2102 <span>Size</span>2103 <div class="peach-pill-group">2104 <For each={sizeOptions}>2105 {(opt) => (2106 <button2107 class="peach-btn peach-btn--ghost peach-btn--sm"2108 classList={{ "is-active": props.textSize === opt.id }}2109 onClick={() => void props.onTextSizeChange(opt.id)}2110 >2111 {opt.label}2112 </button>2113 )}2114 </For>2115 </div>2116 </div>21172118 <p class="peach-settings-sub-label">MOTION</p>2119 <div class="peach-settings-row peach-settings-row--meta">2120 <span>Reduce motion</span>2121 <button2122 class="peach-btn peach-btn--subtle peach-btn--sm"2123 onClick={() => void props.onReduceMotionChange(!props.reduceMotion)}2124 >2125 {props.reduceMotion ? "On" : "Off"}2126 </button>2127 </div>2128 </div>2129 </div>2130 );2131 }21322133 function renderShortcuts() {2134 const [capturingAction, setCapturingAction] = createSignal<ShortcutAction | null>(null);2135 const [conflictMsg, setConflictMsg] = createSignal<string | null>(null);21362137 function startCapture(action: ShortcutAction) {2138 setConflictMsg(null);2139 setCapturingAction(action);2140 }2141 function cancelCapture() {2142 setCapturingAction(null);2143 setConflictMsg(null);2144 }2145 function commitBinding(action: ShortcutAction, binding: Keybinding) {2146 const conflict = findConflict(props.shortcuts, binding, action);2147 if (conflict) {2148 const other = SHORTCUT_DESCRIPTORS.find((d) => d.action === conflict);2149 setConflictMsg(`Already bound to "${other?.label ?? conflict}"`);2150 return;2151 }2152 const next = { ...props.shortcuts, [action]: binding };2153 setCapturingAction(null);2154 setConflictMsg(null);2155 void props.onShortcutsChange(next);2156 }2157 function resetAction(action: ShortcutAction) {2158 const next = { ...props.shortcuts, [action]: DEFAULT_BINDINGS[action] };2159 void props.onShortcutsChange(next);2160 }2161 function resetAll() {2162 void props.onShortcutsChange({ ...DEFAULT_BINDINGS });2163 }21642165 2166 2167 function handleCaptureKey(e: KeyboardEvent) {2168 e.preventDefault();2169 e.stopPropagation();2170 if (e.key === "Escape") { cancelCapture(); return; }2171 const binding = keybindingFromEvent(e);2172 if (!binding) return; 2173 const action = capturingAction();2174 if (action) commitBinding(action, binding);2175 }21762177 return (2178 <div class="peach-settings-body">2179 <div class="peach-settings-group peach-shortcuts-group">2180 <p class="peach-settings-sub-label">ENTRY VIEW</p>2181 <For each={SHORTCUT_DESCRIPTORS.filter((d) => d.scope === "entry")}>2182 {(desc) => renderRow(desc, capturingAction, startCapture, cancelCapture, resetAction, handleCaptureKey)}2183 </For>2184 </div>21852186 <div class="peach-settings-group peach-shortcuts-group">2187 <p class="peach-settings-sub-label">ANYWHERE IN POPUP</p>2188 <For each={SHORTCUT_DESCRIPTORS.filter((d) => d.scope === "global")}>2189 {(desc) => renderRow(desc, capturingAction, startCapture, cancelCapture, resetAction, handleCaptureKey)}2190 </For>2191 </div>21922193 <Show when={conflictMsg()}>2194 <div class="peach-shortcuts-conflict">{conflictMsg()}</div>2195 </Show>21962197 <div class="peach-settings-group" style="display:flex;flex-direction:column;gap:8px">2198 <div class="peach-settings-row peach-settings-row--meta">2199 <span>Inline autofill on page</span>2200 <a2201 class="peach-settings-link"2202 href="chrome://extensions/shortcuts"2203 onClick={(e) => {2204 e.preventDefault();2205 chrome.tabs.create({ url: "chrome://extensions/shortcuts" });2206 }}2207 >2208 ⌘⇧P — customize ↗2209 </a>2210 </div>2211 <button2212 class="peach-btn peach-btn--subtle peach-btn--sm"2213 style="align-self:flex-start"2214 onClick={resetAll}2215 >2216 Reset all to defaults2217 </button>2218 </div>2219 </div>2220 );22212222 function renderRow(2223 desc: typeof SHORTCUT_DESCRIPTORS[number],2224 capturing: () => ShortcutAction | null,2225 onStart: (a: ShortcutAction) => void,2226 onCancel: () => void,2227 onReset: (a: ShortcutAction) => void,2228 onKey: (e: KeyboardEvent) => void,2229 ) {2230 const isActive = () => capturing() === desc.action;2231 const binding = () => props.shortcuts[desc.action];2232 const isCustom = () => {2233 const b = binding();2234 const d = DEFAULT_BINDINGS[desc.action];2235 return b.key !== d.key2236 || Boolean(b.ctrl) !== Boolean(d.ctrl)2237 || Boolean(b.meta) !== Boolean(d.meta)2238 || Boolean(b.shift) !== Boolean(d.shift)2239 || Boolean(b.alt) !== Boolean(d.alt);2240 };2241 return (2242 <div class="peach-shortcut-row">2243 <span class="peach-shortcut-row-label">{desc.label}</span>2244 <button2245 class="peach-shortcut-chip"2246 classList={{ "is-capturing": isActive(), "is-custom": isCustom() }}2247 onClick={() => isActive() ? onCancel() : onStart(desc.action)}2248 onKeyDown={(e) => { if (isActive()) onKey(e); }}2249 ref={(el) => {2250 2251 if (el) {2252 queueMicrotask(() => { if (isActive()) el.focus(); });2253 }2254 }}2255 >2256 {isActive() ? "Press a key…" : formatKeybinding(binding())}2257 </button>2258 <Show when={isCustom() && !isActive()}>2259 <button2260 class="peach-shortcut-reset"2261 title="Reset to default"2262 onClick={() => onReset(desc.action)}2263 >2264 ↺2265 </button>2266 </Show>2267 </div>2268 );2269 }2270 }22712272 const PRO_FEATURES: Array<{2273 feature: ProFeature;2274 name: string;2275 desc: string;2276 }> = [2277 { feature: "sync", name: "Peach Sync", desc: "Encrypted · peer-to-peer" },2278 { feature: "codex", name: "Peach Codex", desc: "Restore from paper" },2279 { feature: "passkeys", name: "Passkeys", desc: "Zero-knowledge WebAuthn" },2280 { feature: "advanced_health", name: "Advanced Vault Health", desc: "Reuse · age · exposure" },2281 ];22822283 const PRO_SECURITY_FEATURES: Array<{2284 feature: ProFeature;2285 name: string;2286 desc: string;2287 }> = [2288 { feature: "canary_entry", name: "Canary entries", desc: "Detects vault compromise" },2289 { feature: "duress_vault", name: "Duress vault", desc: "Decoy under coercion" },2290 ];22912292 const [licenseKey, setLicenseKey] = createSignal<string | null>(null);2293 const [showKey, setShowKey] = createSignal(false);22942295 const [deactivating, setDeactivating] = createSignal(false);22962297 async function handleDeactivateLicense() {2298 setDeactivating(true);2299 await sendMessage({ type: "DEACTIVATE_LICENSE" });2300 setLicenseInfo(null);2301 await props.onLicenseChange?.();2302 setDeactivating(false);2303 }23042305 async function handleTestCanary(entry: {id: string; title: string; canary: Canary}) {2306 setCanaryTestingId(entry.id);2307 setCanaryTestResult(null);2308 const res = await sendMessage({2309 type: "FIRE_CANARY_PING",2310 payload: { webhookUrl: entry.canary.webhookUrl, entryTitle: entry.title, trigger: "test" },2311 }) as { ok: boolean };2312 setCanaryTestResult({ id: entry.id, ok: res.ok });2313 setCanaryTestingId(null);2314 setTimeout(() => setCanaryTestResult((r) => r?.id === entry.id ? null : r), 3000);2315 }23162317 function renderLicense() {2318 async function onActivate() {2319 await handleActivateLicense();2320 if ((licenseInfo()?.valid ?? false) && licenseInfo()?.plan === "pro") {2321 await props.onLicenseChange?.();2322 }2323 }23242325 return (2326 <div class="peach-settings-body">2327 <Show2328 when={isPro()}2329 fallback={2330 <div class="peach-pro-upgrade">2331 <p class="peach-pro-eyebrow">PEACH PRO · ONE-TIME</p>23322333 <h2 class="peach-pro-headline">2334 Every<em>thing,</em><br />every<em>where.</em>2335 </h2>23362337 <p class="peach-pro-subtitle">2338 One key unlocks every Pro feature — for the lifetime of the app.2339 </p>23402341 <div class="peach-pro-grid">2342 <For each={PRO_FEATURES}>2343 {(item, i) => (2344 <div2345 class="peach-pro-grid-item"2346 classList={{ "is-highlighted": props.upgradeHighlight === item.feature }}2347 >2348 <span class="peach-pro-grid-num">{String(i() + 1).padStart(2, "0")}</span>2349 <span class="peach-pro-grid-name">{item.name}</span>2350 <span class="peach-pro-grid-desc">{item.desc}</span>2351 </div>2352 )}2353 </For>2354 </div>23552356 <p class="peach-pro-section-label">ADVANCED SECURITY</p>2357 <div class="peach-pro-grid">2358 <For each={PRO_SECURITY_FEATURES}>2359 {(item, i) => (2360 <div2361 class="peach-pro-grid-item"2362 classList={{ "is-highlighted": props.upgradeHighlight === item.feature }}2363 >2364 <span class="peach-pro-grid-num">{String(PRO_FEATURES.length + i() + 1).padStart(2, "0")}</span>2365 <span class="peach-pro-grid-name">{item.name}</span>2366 <span class="peach-pro-grid-desc">{item.desc}</span>2367 </div>2368 )}2369 </For>2370 </div>23712372 <div class="peach-pro-upgrade-actions">2373 <p class="peach-pro-pricing">2374 $39 <span class="peach-pro-pricing-sub">once · yours forever</span>2375 </p>2376 <a2377 href="https://buy.polar.sh/polar_cl_IXSFIPojx67rcOTksn8LkH5mnU3osPHtYqBIl1eyuIz"2378 target="_blank"2379 rel="noopener noreferrer"2380 class="peach-pro-upgrade-cta"2381 >2382 Get Peach Pro2383 </a>2384 <div class="peach-pro-key-divider"><span>ALREADY HAVE A KEY</span></div>2385 <div class="peach-pro-key-inline">2386 <input2387 class="peach-pro-key-inline-input"2388 type="text"2389 placeholder="PEACH-XXXX-XXXX-XXXX"2390 value={licenseKeyInput()}2391 onInput={(e) => setLicenseKeyInput(e.currentTarget.value)}2392 onKeyDown={(e) => { if (e.key === "Enter") void onActivate(); }}2393 autocomplete="off"2394 spellcheck={false}2395 />2396 <button2397 class="peach-pro-key-apply"2398 onClick={() => void onActivate()}2399 disabled={activatingLicense() || !licenseKeyInput().trim()}2400 >2401 {activatingLicense() ? "…" : "APPLY"}2402 </button>2403 </div>2404 <Show when={licenseError()}>2405 <p class="peach-pro-key-error">{licenseError()}</p>2406 </Show>2407 </div>2408 </div>2409 }2410 >2411 <div class="peach-pro-active">2412 <div class="peach-pro-active-hero">2413 <button2414 class="peach-pro-active-mark-wrap"2415 type="button"2416 aria-label="Celebrate"2417 onClick={handleProCelebrationClick}2418 >2419 <PeachMark class="peach-pro-active-mark" />2420 <Show when={justActivated()}>2421 <div class="peach-pro-sparks" aria-hidden="true">2422 <span class="peach-pro-spark" style="--spark-x:0px;--spark-y:-54px;--spark-delay:0ms">✦</span>2423 <span class="peach-pro-spark" style="--spark-x:38px;--spark-y:-38px;--spark-delay:50ms">✦</span>2424 <span class="peach-pro-spark" style="--spark-x:54px;--spark-y:0px;--spark-delay:110ms">·</span>2425 <span class="peach-pro-spark" style="--spark-x:38px;--spark-y:38px;--spark-delay:30ms">✦</span>2426 <span class="peach-pro-spark" style="--spark-x:0px;--spark-y:54px;--spark-delay:80ms">·</span>2427 <span class="peach-pro-spark" style="--spark-x:-38px;--spark-y:38px;--spark-delay:130ms">✦</span>2428 <span class="peach-pro-spark" style="--spark-x:-54px;--spark-y:0px;--spark-delay:55ms">·</span>2429 <span class="peach-pro-spark" style="--spark-x:-38px;--spark-y:-38px;--spark-delay:95ms">✦</span>2430 </div>2431 </Show>2432 </button>2433 <h2 class="peach-pro-active-title">Peach Pro</h2>2434 <p class="peach-pro-active-since">{formatActivatedSince(licenseInfo()?.issued)}</p>2435 <Show when={justActivated()}>2436 <p class="peach-pro-thankyou-text" aria-live="polite">thank you ✦</p>2437 </Show>2438 </div>24392440 <Show when={licenseKey()}>2441 <div class="peach-settings-license">2442 <span class="peach-settings-label">LICENSE KEY</span>2443 <div class="peach-settings-license-row">2444 <Show2445 when={showKey()}2446 fallback={2447 <span class="peach-settings-license-key peach-settings-license-key--masked" aria-label="License key hidden">2448 ••••••••••••••••••••••••••••2449 </span>2450 }2451 >2452 <span class="peach-settings-license-key">{licenseKey()!}</span>2453 </Show>2454 <div class="peach-settings-license-actions">2455 <button2456 class="peach-settings-license-copy"2457 title="Copy license key"2458 onClick={() => copyLicenseKey(licenseKey()!)}2459 >2460 {copied() ? "✓" : "copy"}2461 </button>2462 <button2463 class="peach-settings-license-toggle"2464 aria-label={showKey() ? "Hide license key" : "Reveal license key"}2465 title={showKey() ? "Hide" : "Reveal"}2466 onClick={() => setShowKey(v => !v)}2467 >2468 <Show2469 when={showKey()}2470 fallback={2471 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">2472 <ellipse cx="7" cy="7" rx="5.5" ry="3.5" />2473 <circle cx="7" cy="7" r="1.5" fill="currentColor" stroke="none" />2474 </svg>2475 }2476 >2477 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">2478 <ellipse cx="7" cy="7" rx="5.5" ry="3.5" />2479 <circle cx="7" cy="7" r="1.5" fill="currentColor" stroke="none" />2480 <line x1="2" y1="2" x2="12" y2="12" />2481 </svg>2482 </Show>2483 </button>2484 </div>2485 </div>2486 </div>2487 </Show>24882489 <div class="peach-pro-active-features">2490 <For each={[...PRO_FEATURES, ...PRO_SECURITY_FEATURES]}>2491 {(item) => (2492 <div class="peach-pro-active-feature">2493 <span class="peach-pro-active-feature-mark">✦</span>2494 <span class="peach-pro-active-feature-name">{item.name}</span>2495 </div>2496 )}2497 </For>2498 </div>24992500 <button2501 class="peach-pro-deactivate"2502 onClick={() => void handleDeactivateLicense()}2503 disabled={deactivating()}2504 >2505 {deactivating() ? "Deactivating…" : "Deactivate"}2506 </button>2507 </div>2508 </Show>2509 </div>2510 );2511 }25122513 function renderFeedback() {2514 return (2515 <div class="peach-settings-body">2516 <div class="peach-settings-group peach-feedback-group">2517 <Show2518 when={feedbackState() === 'sent'}2519 fallback={2520 <>2521 <p class="peach-feedback-intro">2522 Help us improve Peach. Every report goes directly to our inbox.2523 </p>25242525 <p class="peach-settings-sub-label">TYPE</p>2526 <div class="peach-feedback-chips">2527 <For each={FEEDBACK_CATEGORIES}>2528 {(cat) => {2529 const selected = () => fbCategory() === cat;2530 return (2531 <button2532 type="button"2533 class={`peach-feedback-chip ${selected() ? "is-active" : ""}`}2534 aria-pressed={selected()}2535 onClick={() => setFbCategory(cat)}2536 >2537 {cat}2538 </button>2539 );2540 }}2541 </For>2542 </div>25432544 <p class="peach-settings-sub-label">MESSAGE</p>2545 <textarea2546 class="peach-feedback-textarea"2547 placeholder="Describe the issue or idea..."2548 maxLength={MAX_FEEDBACK_MESSAGE_LENGTH}2549 value={fbMessage()}2550 onInput={(e) => setFbMessage(e.currentTarget.value)}2551 />25522553 <p class="peach-feedback-meta">2554 Version {version} · will be included automatically2555 </p>25562557 <button2558 type="button"2559 class="peach-btn peach-btn--accent peach-btn--sm peach-feedback-submit"2560 disabled={!fbMessage().trim() || feedbackState() === 'sending'}2561 onClick={() => void handleSubmitFeedback()}2562 >2563 <Switch>2564 <Match when={feedbackState() === 'idle'}>Send</Match>2565 <Match when={feedbackState() === 'sending'}>Sending...</Match>2566 <Match when={feedbackState() === 'error'}>Failed - try again</Match>2567 </Switch>2568 </button>25692570 <p class="peach-feedback-anon">2571 Sent anonymously · no account required2572 </p>2573 </>2574 }2575 >2576 <div class="peach-feedback-thanks" role="status" aria-live="polite">2577 <p class="peach-feedback-thanks-title">Thank you</p>2578 <p>2579 Your note is in the queue. Someone will process it soon.2580 </p>2581 </div>2582 </Show>2583 </div>2584 </div>2585 );2586 }25872588 const bodies: StackBodies = {2589 protection: renderSecurity(),2590 vault: renderVault(),2591 sync: renderSync(),2592 appearance: renderAppearance(),2593 shortcuts: renderShortcuts(),2594 pro: renderLicense(),2595 feedback: renderFeedback(),2596 };25972598 return (2599 <Show2600 when={showWhatsNew()}2601 fallback={2602 <Show2603 when={showNewRecoveryWords()}2604 fallback={2605 <div2606 class="peach-overlay-view peach-settings-overlay"2607 classList={{ "ov-enter-right": !props.isExiting, "ov-exit-right": !!props.isExiting }}2608 style="display:flex;flex-direction:column"2609 >2610 <StackDeck2611 active={activeCard()}2612 onActiveChange={setActiveCard}2613 onBack={props.onBack}2614 cards={cards()}2615 bodies={bodies}2616 version={version}2617 isFanning={isFanning()}2618 celebratingCardId={justActivated() ? "pro" : null}2619 isPro={isPro()}2620 />2621 </div>2622 }2623 >2624 <RecoveryWordDisplayView onDone={() => setShowNewRecoveryWords(false)} />2625 </Show>2626 }2627 >2628 <div class="peach-overlay-view peach-settings-overlay">2629 <WhatsNewView mode="history" onContinue={() => setShowWhatsNew(false)} />2630 </div>2631 </Show>2632 );2633}