2fce2753fd80
update Codex done and restore screens with storage guidance
- time
- 2026-05-17 21:02 UTC · 5 months ago
- machine
- koh2
- parent
- 21d1b52d8bd8
↓ peach-browser-2fce2753.tar.gzatlas at this save
files changed2 files
src/popup/styles/codex.css+128 −0src/popup/views/CodexGenerateView.tsx+56 −8src/popup/styles/codex.css+128 −0
@@ -304,3 +304,131 @@304304 vertical-align: middle;305305 opacity: 0.8;306306 }307+308+/* ── Done-screen storage guidance (CodexGenerateView, step=done) ────────── */309+310+.peach-codex-done-guidance {311+ display: flex;312+ flex-direction: column;313+ gap: 14px;314+ margin: 16px 0 8px;315+ text-align: left;316+}317+318+.peach-codex-done-item {319+ display: flex;320+ gap: 12px;321+ align-items: flex-start;322+}323+324+.peach-codex-done-item-icon {325+ font-size: 18px;326+ flex-shrink: 0;327+ margin-top: 1px;328+ line-height: 1;329+}330+331+.peach-codex-done-item-title {332+ font-size: 0.8125rem;333+ font-weight: 600;334+ color: var(--peach-t0);335+ margin: 0 0 2px;336+}337+338+.peach-codex-done-item-body {339+ font-size: 0.75rem;340+ color: var(--peach-t2);341+ line-height: 1.55;342+ margin: 0;343+}344+345+.peach-codex-done-regenerate {346+ font-size: 0.6875rem;347+ color: var(--peach-t3);348+ font-family: var(--font-mono, ui-monospace, monospace);349+ text-align: center;350+ margin: 4px 0 8px;351+}352+353+/* ── Restore choose screen (CodexRestoreView, phase=choose) ─────────────── */354+355+.peach-codex-restore-choose {356+ display: flex;357+ flex-direction: column;358+ gap: 12px;359+ padding: 12px 0;360+}361+362+.peach-codex-restore-headline {363+ margin: 0;364+ font-size: 1rem;365+ font-weight: 600;366+ color: var(--peach-t0);367+}368+369+.peach-codex-restore-sub {370+ margin: 0;371+ font-size: 0.8125rem;372+ color: var(--peach-t2);373+}374+375+.peach-codex-restore-option {376+ display: flex;377+ align-items: center;378+ gap: 14px;379+ padding: 14px;380+ border: 0.5px solid var(--peach-border, rgba(255, 255, 255, 0.12));381+ border-radius: 10px;382+ background: transparent;383+ cursor: pointer;384+ text-align: left;385+ transition: background 150ms ease, border-color 150ms ease;386+ width: 100%;387+ color: inherit;388+ font-family: inherit;389+}390+391+.peach-codex-restore-option:hover {392+ background: rgba(255, 255, 255, 0.04);393+ border-color: var(--peach-accent);394+}395+396+.peach-codex-restore-option-icon {397+ font-size: 22px;398+ flex-shrink: 0;399+ line-height: 1;400+}401+402+.peach-codex-restore-option-content {403+ display: flex;404+ flex-direction: column;405+ gap: 2px;406+}407+408+.peach-codex-restore-option-title {409+ font-size: 0.875rem;410+ font-weight: 600;411+ color: var(--peach-t0);412+}413+414+.peach-codex-restore-option-sub {415+ font-size: 0.75rem;416+ color: var(--peach-t2);417+}418+419+.peach-codex-restore-guidance {420+ font-size: 0.6875rem;421+ color: var(--peach-t3);422+ text-align: center;423+ margin: 4px 0 0;424+ font-family: var(--font-mono, ui-monospace, monospace);425+ line-height: 1.5;426+}427+428+.peach-codex-pdf-import {429+ display: flex;430+ flex-direction: column;431+ gap: 8px;432+ padding: 16px 0;433+ align-items: stretch;434+}src/popup/views/CodexGenerateView.tsx+56 −8
@@ -486,14 +486,6 @@486486 <h2 class="peach-codex-recovery-title">487487 your codex is downloading.488488 </h2>489- <p class="peach-codex-recovery-body">490- store it somewhere safe — a fireproof box, a safe, or a USB491- drive kept offline.492- </p>493- <p class="peach-codex-recovery-warn">494- your recovery words go somewhere else entirely. never store495- them with the Codex.496- </p>497489 </div>498490 499491 <Show when={completed()}>@@ -506,6 +498,62 @@506498 </span>507499 </p>508500 </Show>501+502+ <div class="peach-codex-done-guidance">503+ <div class="peach-codex-done-item">504+ <span class="peach-codex-done-item-icon">🖨</span>505+ <div>506+ <p class="peach-codex-done-item-title">507+ print on a laser printer508+ </p>509+ <p class="peach-codex-done-item-body">510+ laser prints last longer and scan more reliably than511+ inkjet. print at 100% scale — do not fit to page.512+ </p>513+ </div>514+ </div>515+516+ <div class="peach-codex-done-item">517+ <span class="peach-codex-done-item-icon">📦</span>518+ <div>519+ <p class="peach-codex-done-item-title">make two copies</p>520+ <p class="peach-codex-done-item-body">521+ store one at home (fireproof box or safe) and one522+ somewhere else (trusted person, safety deposit box).523+ fire and flood can destroy a single copy.524+ </p>525+ </div>526+ </div>527+528+ <div class="peach-codex-done-item">529+ <span class="peach-codex-done-item-icon">🔑</span>530+ <div>531+ <p class="peach-codex-done-item-title">532+ store separately from recovery words533+ </p>534+ <p class="peach-codex-done-item-body">535+ your 12 recovery words go somewhere different. together536+ they restore your vault without your passphrase. keep537+ them apart.538+ </p>539+ </div>540+ </div>541+542+ <div class="peach-codex-done-item">543+ <span class="peach-codex-done-item-icon">💾</span>544+ <div>545+ <p class="peach-codex-done-item-title">also save the PDF</p>546+ <p class="peach-codex-done-item-body">547+ copy the PDF to a USB drive. Peach can import it548+ directly without needing to scan printed codes.549+ </p>550+ </div>551+ </div>552+ </div>553+554+ <p class="peach-codex-done-regenerate">555+ regenerate your codex whenever you add many new entries.556+ </p>509557 510558 <button511559 class="peach-btn peach-btn--subtle peach-btn--sm peach-btn--full"