1a33acf1a948
hide password input when generator open; wire onChange for live sync; fade partial rows in identity suggestion list
- time
- 2026-05-13 14:53 UTC · 5 months ago
- machine
- koh2
- parent
- a7f3a9978521
↓ peach-browser-1a33acf1.tar.gzatlas at this save
files changed3 files
src/popup/components/GeneratorDrawer.tsx+12 −10src/popup/styles/popup.css+2 −0src/popup/views/Add.tsx+34 −31src/popup/components/GeneratorDrawer.tsx+12 −10
@@ -8,6 +8,8 @@88 open: boolean;99 policy?: PasswordPolicy;1010 onUse: (password: string) => void;11+ /** Called on every generation so the caller can stay in sync without waiting for onUse */12+ onChange?: (password: string) => void;1113 /** Compact two-row layout for use inside entry edit mode */1214 compact?: boolean;1315 }@@ -58,16 +60,16 @@5860 numbers?: boolean;5961 symbols?: boolean;6062 }) {61- setPassword(62- generatePassword({63- length: options?.length ?? length(),64- includeUppercase: options?.upper ?? upper(),65- includeLowercase: options?.lower ?? lower(),66- includeNumbers: options?.numbers ?? numbers(),67- includeSymbols: options?.symbols ?? symbols(),68- forbiddenChars: forbiddenChars(),69- })70- );63+ const pw = generatePassword({64+ length: options?.length ?? length(),65+ includeUppercase: options?.upper ?? upper(),66+ includeLowercase: options?.lower ?? lower(),67+ includeNumbers: options?.numbers ?? numbers(),68+ includeSymbols: options?.symbols ?? symbols(),69+ forbiddenChars: forbiddenChars(),70+ });71+ setPassword(pw);72+ props.onChange?.(pw);7173 }7274 7375 async function copyPassword(button?: HTMLButtonElement) {src/popup/styles/popup.css+2 −0
@@ -5215,6 +5215,8 @@52155215 max-height: 148px;52165216 scrollbar-width: thin;52175217 scrollbar-color: var(--peach-t3) transparent;5218+ mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5219+ -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);52185220 }52195221 52205222 .peach-identity-rows-inner::-webkit-scrollbar {src/popup/views/Add.tsx+34 −31
@@ -439,39 +439,41 @@439439 {/* Password */}440440 <div class="peach-field-card">441441 <span class="peach-label">password</span>442- <div class="peach-password-edit-row">443- <input444- class="peach-field-value peach-field-value--edit"445- type={showPassword() ? "text" : "password"}446- placeholder="password"447- autocomplete="new-password"448- value={password()}449- onInput={(e) => setPassword((e.currentTarget as HTMLInputElement).value)}450- />451- <button452- class="peach-inline-action peach-password-toggle-btn"453- type="button"454- onClick={() => setShowPassword(!showPassword())}455- aria-label={showPassword() ? "Hide password" : "Show password"}456- >457- <Show458- when={showPassword()}459- fallback={442+ <Show when={!showGenerator()}>443+ <div class="peach-password-edit-row">444+ <input445+ class="peach-field-value peach-field-value--edit"446+ type={showPassword() ? "text" : "password"}447+ placeholder="password"448+ autocomplete="new-password"449+ value={password()}450+ onInput={(e) => setPassword((e.currentTarget as HTMLInputElement).value)}451+ />452+ <button453+ class="peach-inline-action peach-password-toggle-btn"454+ type="button"455+ onClick={() => setShowPassword(!showPassword())}456+ aria-label={showPassword() ? "Hide password" : "Show password"}457+ >458+ <Show459+ when={showPassword()}460+ fallback={461+ <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">462+ <path d="M1 5C1 5 2.8 1 7 1C11.2 1 13 5 13 5C13 5 11.2 9 7 9C2.8 9 1 5 1 5Z" />463+ <circle cx="7" cy="5" r="1.75" />464+ </svg>465+ }466+ >460467 <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">461- <path d="M1 5C1 5 2.8 1 7 1C11.2 1 13 5 13 5C13 5 11.2 9 7 9C2.8 9 1 5 1 5Z" />462- <circle cx="7" cy="5" r="1.75" />468+ <path d="M1 2C3 4.5 5 6 7 6C9 6 11 4.5 13 2" />469+ <path d="M3.5 5.5L2.5 7.5" />470+ <path d="M7 6.5V8.5" />471+ <path d="M10.5 5.5L11.5 7.5" />463472 </svg>464- }465- >466- <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round">467- <path d="M1 2C3 4.5 5 6 7 6C9 6 11 4.5 13 2" />468- <path d="M3.5 5.5L2.5 7.5" />469- <path d="M7 6.5V8.5" />470- <path d="M10.5 5.5L11.5 7.5" />471- </svg>472- </Show>473- </button>474- </div>473+ </Show>474+ </button>475+ </div>476+ </Show>475477 476478 {/* Strength */}477479 <Show when={strengthLabel() !== null}>@@ -500,6 +502,7 @@500502 <GeneratorDrawer501503 compact502504 open={showGenerator()}505+ onChange={(pw) => setPassword(pw)}503506 onUse={(pw) => { setPassword(pw); setShowGenerator(false); }}504507 />505508 </div>