2fce2753fd80

update Codex done and restore screens with storage guidance

time
2026-05-17 21:02 UTC · 5 months ago
machine
koh2
parent
21d1b52d8bd8
2 files src/popup/styles/codex.css+128 −0src/popup/views/CodexGenerateView.tsx+56 −8
src/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+}

view file

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"

view file