feat(fillbar): onglet Fill bar dans les reglages, icones ou texte, boutons Add et Search

- boutons choisis (Full, Password, 2FA, Add current window, Search, Open),
  style icones (Segoe MDL2 Assets) ou texte, opacite au repos, allumee ou non
- clic droit sur la barrette : Show icons / Show text en plus de l'opacite
- info-bulles sur chaque bouton
- Add et Search reprennent les corps extraits de Ctrl+Shift+A et Ctrl+Shift+Q

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-09-18 10:24:26 +01:00
parent ba8c4205f9
commit d7a8b4ddff
4 changed files with 302 additions and 60 deletions
+48
View File
@@ -444,6 +444,7 @@
<button class="settings-tab is-active" data-tab="general"><svg><use href="#i-settings"/></svg>General</button>
<button class="settings-tab" data-tab="security"><svg><use href="#i-shield"/></svg>Security</button>
<button class="settings-tab" data-tab="autofill"><svg><use href="#i-key"/></svg>Autofill</button>
<button class="settings-tab" data-tab="fillbar" id="settingsTabFillbar"><svg><use href="#i-grid"/></svg>Fill bar</button>
<button class="settings-tab" data-tab="account"><svg><use href="#i-user"/></svg>Account</button>
<button class="settings-tab" data-tab="sync"><svg><use href="#i-rotate-ccw"/></svg>Sync &amp; Backup</button>
</div>
@@ -738,6 +739,53 @@
</div>
</div>
<div class="slideover-field" id="fillbarSection">
<div class="slideover-field-label">Fill bar</div>
<p style="font-size:12px;color:var(--text-dim);margin:0 0 8px;line-height:1.5">
A small floating bar that does with the mouse what the hotkeys
do from the keyboard. Right-click it for the same opacity and
icons/text choices.
</p>
<div class="setting-row">
<span>Show the fill bar</span>
<label class="toggle">
<input type="checkbox" id="fbOn">
<span class="toggle-slider"></span>
</label>
</div>
<div class="setting-row">
<span>Buttons</span>
<span style="display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:flex-end">
<label><input type="checkbox" class="fb-btn" data-key="full"> Full</label>
<label><input type="checkbox" class="fb-btn" data-key="pwd"> Password</label>
<label><input type="checkbox" class="fb-btn" data-key="totp"> 2FA</label>
<label><input type="checkbox" class="fb-btn" data-key="add"> Add current window</label>
<label><input type="checkbox" class="fb-btn" data-key="search"> Search</label>
<label><input type="checkbox" class="fb-btn" data-key="open"> Open</label>
</span>
</div>
<div class="setting-row">
<span>Style</span>
<select id="fbStyle">
<option value="text">Text</option>
<option value="icons">Icons</option>
</select>
</div>
<div class="setting-row">
<span>
Opacity when the mouse leaves
<small class="setting-hint">Full again as soon as the mouse is over it.</small>
</span>
<select id="fbAlpha">
<option value="100">100%</option>
<option value="75">75%</option>
<option value="60">60% (default)</option>
<option value="50">50%</option>
<option value="25">25%</option>
</select>
</div>
</div>
<div class="slideover-field">
<div class="slideover-field-label">Clipboard privacy</div>
<p style="font-size:12px;color:var(--text-dim);margin:0 0 8px;line-height:1.5">