Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): group settings into 4 tabs

Browse Source 
Long settings panel → 4 tabs (Général / Sécurité / Account / Sync & Backup).
Each section (.slideover-field) is keyed by its label text to a tab via
SETTINGS_TAB_OF; applySettingsTab toggles .is-tab-hidden on the rest. No HTML
restructure (sections were already .slideover-field siblings), no dep. The
existing settings search composes: a live query suspends the tab filter so
cross-tab matches show, clearing it restores the active tab.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-09 23:42:22 +01:00
parent f644f8cb57
commit bec94930b4
3 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+10
View File
@@ -2183,6 +2183,16 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
.settings-search-clear svg { width: 12px; height: 12px; }
.settings-search-clear:hover { color: var(--text); background: var(--bg-elev-2); }
.settings-search-wrap.has-query .settings-search-clear { display: inline-flex; }
/* Settings tabs — group sections; JS toggles .is-tab-hidden. */
.settings-tabs { display: flex; gap: 4px; padding: 0 16px 8px; flex-wrap: wrap; }
.settings-tab {
flex: 1; min-width: 70px; padding: 6px 10px; font-size: 12px; cursor: pointer;
color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--border);
border-radius: 6px;
}
.settings-tab:hover { background: var(--bg-elev-3); }
.settings-tab.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.slideover-field.is-tab-hidden { display: none; }
/* Hidden section + per-row + no-results banner driven by JS. */
.slideover-field.is-search-hidden,
.setting-row.is-search-hidden { display: none; }