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
3 files src/popup/components/GeneratorDrawer.tsx+12 −10src/popup/styles/popup.css+2 −0src/popup/views/Add.tsx+34 −31
src/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) {

view file

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 {

view file

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>

view file