add clear for search + regroup options in settings btn

js/app.js

@@ -93,14 +93,8 @@ function playSound(type) {
 function toggleSound() {
     soundEnabled = !soundEnabled;
     localStorage.setItem('soundEnabled', soundEnabled);
-    const btn = document.getElementById('soundToggle');
-    if (btn) btn.textContent = soundEnabled ? '🔊' : '🔇';
-    if (soundEnabled) playTone(440, 0.05, 'sine', 0.05);
-}
-
-function updateSoundButton() {
-    const btn = document.getElementById('soundToggle');
-    if (btn) btn.textContent = soundEnabled ? '🔊' : '🔇';
+    if (soundEnabled) playTone(440, 0.05);
+    syncSettingsUI();
 }
 
 // ==================== TOAST ====================
@@ -118,7 +112,7 @@ function showZigzagToast(elem, msg, type) {
 
 // ==================== THEME ====================
 function applyTheme() { document.body.classList.toggle('light', !dark); }
-function toggleTheme() { dark = !dark; localStorage.setItem('darkTheme', dark); applyTheme(); playSound('click'); }
+function toggleTheme() { dark = !dark; localStorage.setItem('darkTheme', dark); applyTheme(); syncSettingsUI(); playSound('click'); }
 
 // ==================== CRYPTO ====================
 function checkStrength() { const p = document.getElementById('passwordInput').value; const b = document.getElementById('strengthBar'); let s = 0; if (p.length >= 8) s++; if (p.length >= 12) s++; if (/[A-Z]/.test(p) && /[a-z]/.test(p)) s++; if (/\d/.test(p)) s++; if (/[!@#$%^&*()_+\-=\[\]{}|;:,.<>?]/.test(p)) s++; b.className = 'strength-bar s' + Math.min(4, s); }
@@ -282,18 +276,28 @@ function timeAgo(dateStr) {
     return days <= 0 ? 'Expiring' : days + 'd left';
 }
 
+// ==================== SETTINGS ====================
+function toggleSettings() {
+    document.getElementById('settingsMenu').classList.toggle('hidden');
+}
+function syncSettingsUI() {
+    document.getElementById('soundToggleSwitch').classList.toggle('active', soundEnabled);
+    document.getElementById('themeToggleSwitch').classList.toggle('active', !dark);
+    document.getElementById('showViewBtnToggle').classList.toggle('active', showView);
+    document.getElementById('showEmailToggle').classList.toggle('active', showMail);
+    document.getElementById('autoLockTimer').value = lockMin;
+}
+
 // ==================== INIT ====================
 function init() {
     document.querySelectorAll('.view-btn').forEach(b => b.classList.toggle('active', b.dataset.view === view));
-    document.getElementById('showViewBtnToggle').classList.toggle('active', showView);
-    document.getElementById('showEmailToggle').classList.toggle('active', showMail);
     document.getElementById('autoLockTimer').value = lockMin;
     applyTheme();
     document.getElementById('usernameInput').style.display = showMail ? '' : 'none';
     loadUsername();
     const sl = localStorage.getItem('savedLoginUser');
     if (sl) document.getElementById('loginUsername').value = sl;
-    updateSoundButton();
+    syncSettingsUI();
     document.getElementById('viewToggle').addEventListener('click', e => {
         if (e.target.classList.contains('view-btn')) {
             document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
@@ -304,9 +308,20 @@ function init() {
             playSound('click');
         }
     });
+    const clearBtn = document.getElementById('clearSearchBtn');
+    if (clearBtn) clearBtn.style.display = 'none';
+    // Close settings when clicking outside
+    document.addEventListener('click', (e) => {
+        const menu = document.getElementById('settingsMenu');
+        const btn = document.getElementById('settingsBtn');
+        if (menu && !menu.classList.contains('hidden') && !menu.contains(e.target) && e.target !== btn) {
+            menu.classList.add('hidden');
+        }
+    });
 }
-function toggleViewBtn() { showView = !showView; localStorage.setItem('showViewBtn', showView); document.getElementById('showViewBtnToggle').classList.toggle('active', showView); render(); playSound('click'); }
-function toggleShowEmail() { showMail = !showMail; localStorage.setItem('showEmail', showMail); document.getElementById('showEmailToggle').classList.toggle('active', showMail); document.getElementById('usernameInput').style.display = showMail ? '' : 'none'; render(); playSound('click'); }
+
+function toggleViewBtn() { showView = !showView; localStorage.setItem('showViewBtn', showView); syncSettingsUI(); render(); playSound('click'); }
+function toggleShowEmail() { showMail = !showMail; localStorage.setItem('showEmail', showMail); syncSettingsUI(); document.getElementById('usernameInput').style.display = showMail ? '' : 'none'; render(); playSound('click'); }
 
 // ==================== GENERATOR ====================
 function openGen() { document.getElementById('genModal').style.display = 'flex'; genPwd(); playSound('open'); }
@@ -391,6 +406,7 @@ function showVault() {
     loadUsername();
     renderFolders();
     populateAddFolderSelect();
+    syncSettingsUI();
     resetIdle();
 }
 
@@ -587,10 +603,22 @@ async function delEntry(id) {
 }
 
 // ==================== UTILS ====================
-function searchEntries() { loadEntries(document.getElementById('searchInput').value); }
+function searchEntries() {
+    const input = document.getElementById('searchInput');
+    const btn = document.getElementById('clearSearchBtn');
+    if (btn) btn.style.display = input.value.trim() ? 'block' : 'none';
+    loadEntries(input.value);
+}
 function exportPasswords() { if (!confirm('Export plain text?')) return; const b = new Blob([JSON.stringify(entries, null, 2)], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'vault-' + new Date().toISOString().slice(0, 10) + '.json'; a.click(); URL.revokeObjectURL(a.href); toast('Exported!'); }
 function esc(t) { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
-
+function clearSearch() {
+    const input = document.getElementById('searchInput');
+    input.value = '';
+    const btn = document.getElementById('clearSearchBtn');
+    if (btn) btn.style.display = 'none';
+    loadEntries();
+    input.focus();
+}
 // ==================== STARTUP – session persistence ====================
 init();
 applyTheme();