Add 3 new views (Card, Grouped, Detail) and view dropdown

Replace view toggle buttons with dropdown menu containing all 7 views. Card view: 2-column grid with bigger cards. Grouped view: entries grouped by folder with sticky headers. Detail view: single entry at a time, large text, prev/next navigation. Arrow key navigation for detail view.

js/app.js

@@ -5,6 +5,7 @@ let curUser = sessionStorage.getItem('currentUsername');
 function a2b64(arr) { return btoa(String.fromCharCode(...new Uint8Array(arr))).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,''); }
 function b642ab(s) { return Uint8Array.from(atob(s.replace(/-/g,'+').replace(/_/g,'/')), c=>c.charCodeAt(0)).buffer; }
 let view = localStorage.getItem('vaultView') || 'grid';
+let detailIndex = 0;
 let showView = localStorage.getItem('showViewBtn') !== 'false';
 let showMail = localStorage.getItem('showEmail') !== 'false';
 let dark = localStorage.getItem('darkTheme') !== 'false';
@@ -356,7 +357,6 @@ async function registerPasskey() {
 
 // ==================== INIT ====================
 function init() {
-    document.querySelectorAll('.view-btn').forEach(b => b.classList.toggle('active', b.dataset.view === view));
     document.getElementById('autoLockTimer').value = lockMin;
     applyTheme();
   //  document.getElementById('usernameInput').style.display = showMail ? '' : 'none';
@@ -364,16 +364,28 @@ function init() {
     const sl = localStorage.getItem('savedLoginUser');
     if (sl) document.getElementById('loginUsername').value = sl;
     syncSettingsUI();
-    document.getElementById('viewToggle').addEventListener('click', e => {
-        if (e.target.classList.contains('view-btn')) {
-            document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
-            e.target.classList.add('active');
-            view = e.target.dataset.view;
-            localStorage.setItem('vaultView', view);
-            render();
-            playSound('click');
-        }
-    });
+    // View dropdown
+    const vdd = document.getElementById('viewDropdown');
+    const vBtn = document.getElementById('viewDropdownBtn');
+    const vMenu = document.getElementById('viewDropdownMenu');
+    const vIcons = {grid:'🟫',compact:'📝',list:'📋',table:'📊',card:'🃏',grouped:'📂',detail:'🔍'};
+    const updateViewBtn = () => { vBtn.textContent = (vIcons[view] || '🟫') + ' ' + view.charAt(0).toUpperCase() + view.slice(1) + ' ▾'; };
+    updateViewBtn();
+    vMenu.querySelectorAll('.view-opt').forEach(o => o.classList.toggle('active', o.dataset.view === view));
+    vBtn.onclick = (e) => { e.stopPropagation(); vMenu.classList.toggle('hidden'); };
+    vMenu.onclick = (e) => {
+        const opt = e.target.closest('.view-opt');
+        if (!opt) return;
+        vMenu.querySelectorAll('.view-opt').forEach(o => o.classList.remove('active'));
+        opt.classList.add('active');
+        view = opt.dataset.view;
+        detailIndex = 0;
+        localStorage.setItem('vaultView', view);
+        updateViewBtn();
+        render();
+        playSound('click');
+    };
+    document.addEventListener('click', () => vMenu.classList.add('hidden'));
     const clearBtn = document.getElementById('clearSearchBtn');
     if (clearBtn) clearBtn.style.display = 'none';
     document.getElementById('addModal').addEventListener('click', e => {
@@ -646,9 +658,9 @@ async function loadEntries(q) {
     } catch (e) { document.getElementById('connectionStatus').textContent = '🔴 Error'; toast('Connection error', 'error'); }
 }
 
-function getFilteredEntries() {
+function getFilteredEntries(noFolder) {
     if (showTrash) return entries;
-    if (selectedFolder === 'All') return entries;
+    if (noFolder || selectedFolder === 'All') return entries;
     return entries.filter(e => (e.folder || 'All') === selectedFolder);
 }
 
@@ -688,9 +700,13 @@ function render() {
         });
         h += '</tbody></table>';
         c.innerHTML = h;
+    } else if (view === 'grouped') {
+        c.innerHTML = groupedC(getFilteredEntries(true));
+    } else if (view === 'detail') {
+        c.innerHTML = detailC(getFilteredEntries(true));
     } else {
         c.innerHTML = filtered.map(e => {
-            if (view === 'grid') return gridC(e);
+            if (view === 'grid' || view === 'card') return gridC(e);
             if (view === 'compact') return compC(e);
             return listC(e);
         }).join('');
@@ -775,6 +791,85 @@ function compC(e) {
     return html;
 }
 
+function groupedC(list) {
+    const groups = {};
+    list.forEach(e => {
+        const f = e.folder || 'All';
+        if (!groups[f]) groups[f] = [];
+        groups[f].push(e);
+    });
+    let html = '';
+    for (const [folder, items] of Object.entries(groups)) {
+        html += '<div class="grouped-header">📁 ' + esc(folder) + ' <span class="folder-count">' + items.length + '</span></div>';
+        items.forEach(e => {
+            const sel = selectedIds.has(e.id);
+            html += '<div class="entry-row' + (e.favorite ? ' favorite' : '') + (sel ? ' selected' : '') + '" draggable="true" data-id="' + e.id + '" onclick="toggleSelectEntry(' + e.id + ', event)">';
+            html += '<div class="action-btns">';
+            if (showTrash) {
+                html += '<button class="restore-btn" onclick="restoreEntry(' + e.id + ')">↩️</button>';
+                html += '<button class="delete-btn" data-id="' + e.id + '">✕</button>';
+            } else {
+                html += '<button class="star-btn" data-id="' + e.id + '">' + (e.favorite ? '⭐' : '☆') + '</button>';
+                html += '<button class="edit-btn" data-id="' + e.id + '">✏️</button>';
+                html += '<button class="delete-btn" data-id="' + e.id + '">✕</button>';
+            }
+            html += '</div>';
+            html += '<div class="entry-info"><span class="entry-site">🌐 ' + highlightText(e.site, searchQuery) + '</span>';
+            if (showMail) html += '<span class="entry-user">👤 ' + highlightText(e.username, searchQuery) + '</span>';
+            if (!showTrash) {
+                html += '<div class="password-field"><span class="password-text pw-display' + (showView ? ' pw-hover' : '') + '" id="p-' + e.id + '">••••••••</span>' +
+                    '<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button></div>';
+            } else {
+                html += '<span class="trash-badge">🗑️ ' + timeAgo(e.deleted_at) + '</span>';
+            }
+            html += '</div></div>';
+        });
+    }
+    return html;
+}
+
+function detailC(list) {
+    if (detailIndex >= list.length) detailIndex = 0;
+    if (detailIndex < 0) detailIndex = list.length - 1;
+    const e = list[detailIndex];
+    const hasPrev = detailIndex > 0, hasNext = detailIndex < list.length - 1;
+    const sel = selectedIds.has(e.id);
+    let html = '<div class="detail-nav">';
+    html += '<button onclick="goDetail(-1)"' + (hasPrev ? '' : ' disabled') + '>◀ Prev</button>';
+    html += '<span class="detail-counter">' + (detailIndex + 1) + ' of ' + list.length + '</span>';
+    html += '<button onclick="goDetail(1)"' + (hasNext ? '' : ' disabled') + '>Next ▶</button>';
+    html += '</div>';
+    html += '<div class="detail-card' + (e.favorite ? ' favorite' : '') + '">';
+    html += '<div class="detail-field"><span class="detail-label">Site</span><span class="detail-value">🌐 ' + highlightText(e.site, searchQuery) + '</span></div>';
+    if (showMail) html += '<div class="detail-field"><span class="detail-label">Username</span><span class="detail-value">👤 ' + highlightText(e.username, searchQuery) + '</span></div>';
+    if (!showTrash) {
+        html += '<div class="detail-field"><span class="detail-label">Password</span><span class="detail-value pw-display' + (showView ? ' pw-hover' : '') + '" id="p-' + e.id + '">••••••••</span></div>';
+        html += '<div class="detail-folder"><span class="detail-label">Folder</span><span class="entry-folder">📁 ' + esc(e.folder || 'All') + '</span></div>';
+        html += '<div class="detail-actions">' +
+            '<button class="star-btn" data-id="' + e.id + '">' + (e.favorite ? '⭐' : '☆') + '</button>' +
+            '<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button>' +
+            '<button class="edit-btn" data-id="' + e.id + '">✏️</button>' +
+            '<button class="delete-btn" data-id="' + e.id + '">✕</button>' +
+            '</div>';
+    } else {
+        html += '<div class="detail-field"><span class="detail-label">Deleted</span><span class="trash-badge">🗑️ ' + timeAgo(e.deleted_at) + '</span></div>';
+        html += '<div class="detail-actions">' +
+            '<button class="restore-btn" onclick="restoreEntry(' + e.id + ')">↩️ Restore</button>' +
+            '<button class="delete-btn" data-id="' + e.id + '">✕ Delete</button>' +
+            '</div>';
+    }
+    html += '</div>';
+    return html;
+}
+
+function goDetail(dir) {
+    const list = getFilteredEntries(true);
+    detailIndex += dir;
+    if (detailIndex < 0) detailIndex = list.length - 1;
+    if (detailIndex >= list.length) detailIndex = 0;
+    render();
+}
+
 // ==================== EVENTS ====================
 function showConfirm(btn, message, callback) {
     const id = btn.dataset.id;
@@ -1090,7 +1185,7 @@ function highlightText(text, query) {
 function showShortcutsHelp() {
     const overlay = document.createElement('div');
     overlay.className = 'custom-modal-overlay show';
-    overlay.innerHTML = `<div class="custom-modal" style="min-width:380px"><h3>⌨️ Keyboard Shortcuts</h3><div style="display:grid;grid-template-columns:auto 1fr;gap:0.5rem 1.2rem;font-size:0.85rem;margin-bottom:1rem"><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+N</span><span>New entry</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+F</span><span>Search</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+T</span><span>Toggle trash</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+L</span><span>Lock vault</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+S</span><span>Save entry</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Esc</span><span>Close modal / deselect</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">?</span><span>Show this help</span></div><p style="color:var(--text2);font-size:0.8rem;margin-bottom:0.8rem">💡 Click any entry to select, Shift+click for range, Ctrl+click to toggle</p><div class="modal-actions"><button class="btn btn-sm" onclick="this.closest('.custom-modal-overlay').remove()">Got it</button></div></div>`;
+    overlay.innerHTML = `<div class="custom-modal" style="min-width:380px"><h3>⌨️ Keyboard Shortcuts</h3><div style="display:grid;grid-template-columns:auto 1fr;gap:0.5rem 1.2rem;font-size:0.85rem;margin-bottom:1rem"><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+N</span><span>New entry</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+F</span><span>Search</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+T</span><span>Toggle trash</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+L</span><span>Lock vault</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Ctrl+S</span><span>Save entry</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">Esc</span><span>Close modal / deselect</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">◀ ▶</span><span>Detail view nav</span><span style="background:var(--input);padding:0.15rem 0.6rem;border-radius:0.4rem;font-family:monospace;text-align:center">?</span><span>Show this help</span></div><p style="color:var(--text2);font-size:0.8rem;margin-bottom:0.8rem">💡 Click any entry to select, Shift+click for range, Ctrl+click to toggle</p><div class="modal-actions"><button class="btn btn-sm" onclick="this.closest('.custom-modal-overlay').remove()">Got it</button></div></div>`;
     document.body.appendChild(overlay);
     overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
 }
@@ -1149,7 +1244,7 @@ document.getElementById('entriesContainer').addEventListener('dragstart', functi
 // Document mousedown: rect selection on vault background, clear outside vault
 document.addEventListener('mousedown', function(e) {
     if (e.button !== 0 || rectState.active) return;
-    if (e.target?.closest?.('.entry-card,.entry-row,.entry-compact,.table-row-drag,#batchBar,.custom-modal-overlay.show,.edit-modal.show,.modal-overlay.show,#genModal,#settingsMenu')) return;
+    if (e.target?.closest?.('.entry-card,.entry-row,.entry-compact,.table-row-drag,.detail-card,.detail-nav,#batchBar,.custom-modal-overlay.show,.edit-modal.show,.modal-overlay.show,#genModal,#settingsMenu')) return;
     if (e.target?.closest?.('button,input,select,.folders-bar,.toolbar,#trashActions,.settings-dropdown,.fab,.view-toggle,.auth-section')) {
         if (selectedIds.size > 0) clearSelection();
         return;
@@ -1236,7 +1331,14 @@ document.addEventListener('keydown', function(e) {
         if (confirm) confirm.remove();
         return;
     }
-    
+
+    // Arrow keys for detail view navigation
+    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && !isInput && view === 'detail' && !document.getElementById('authSection').classList.contains('hidden')) {
+        e.preventDefault();
+        goDetail(e.key === 'ArrowLeft' ? -1 : 1);
+        return;
+    }
+
     // ? or / to show shortcuts help (only in vault)
     if ((e.key === '?' || e.key === '/') && !isInput) {
         if (!document.getElementById('authSection').classList.contains('hidden')) return;