7f7e6a624761
make generated password editable in-place; editing updates length counter and syncs to parent via onChange
- time
- 2026-05-13 14:54 UTC · 5 months ago
- machine
- koh2
- parent
- 1a33acf1a948
↓ peach-browser-7f7e6a62.tar.gzatlas at this save
files changed2 files
src/popup/components/GeneratorDrawer.tsx+14 −1src/popup/styles/popup.css+6 −1src/popup/components/GeneratorDrawer.tsx+14 −1
@@ -169,7 +169,20 @@169169 {/* ── Compact layout ──────────────────────────────── */}170170 <Show when={props.compact}>171171 <div class="peach-pwgen-compact-display-row">172- <span class="peach-pwgen-compact-output">{password()}</span>172+ <input173+ class="peach-pwgen-compact-output"174+ type="text"175+ autocomplete="off"176+ spellcheck={false}177+ value={password()}178+ onInput={(e) => {179+ const pw = (e.currentTarget as HTMLInputElement).value;180+ setPassword(pw);181+ setLength(pw.length);182+ props.onChange?.(pw);183+ }}184+ aria-label="Generated password — click to edit"185+ />173186 <button174187 class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"175188 onClick={() => regenerate()}src/popup/styles/popup.css+6 −1
@@ -2220,8 +2220,13 @@22202220 border: 1px solid var(--peach-t3);22212221 border-radius: 5px;22222222 padding: 5px 8px;2223- word-break: break-all;22242223 line-height: 1.5;2224+ outline: none;2225+ transition: border-color 120ms ease;2226+}2227+2228+.peach-pwgen-compact-output:focus {2229+ border-color: var(--peach-t1);22252230 }22262231 .peach-pwgen-compact-controls {22272232 display: flex;