04/26 Folder tag

extension/popup/popup.js

@@ -19,9 +19,11 @@ const ALERTS_URL = 'https://pwkeeper.ngodanguyen.tech/vault#security';
 
 let _vaultKey = null;
 let _items = [];
+let _folders = [];           // fetched alongside vault items for folder grouping
 let _mfaToken = null;
 let _currentUrl = '';
 let _activeTab = 'relevant';
+const _collapsedFolders = new Set();  // persists collapsed state across re-renders
 
 // ── DOM helpers ───────────────────────────────────────────────────────────────
 
@@ -91,6 +93,11 @@ function siteLabel(item) {
   return item.name;
 }
 
+function folderName(id) {
+  if (!id) return '(none)';
+  return _folders.find(f => f.id === id)?.name || '(none)';
+}
+
 // ── Domain matching ───────────────────────────────────────────────────────────
 
 function currentHostname() {
@@ -332,9 +339,15 @@ async function restoreSessionIfAvailable() {
 async function fetchAndDecryptVault() {
   $('vault-spinner').classList.remove('hidden');
   try {
-    const res = await apiFetch('/api/vault');
+    const [res, foldersRes] = await Promise.all([
+      apiFetch('/api/vault'),
+      apiFetch('/api/folders'),
+    ]);
     if (!res) return;
     const raw = await res.json();
+    try {
+      if (foldersRes?.ok) _folders = await foldersRes.json();
+    } catch (e) { _folders = []; }
 
     _items = await Promise.all(raw.map(async item => {
       try {
@@ -459,6 +472,9 @@ function getTabItems() {
     items = items.filter(isMatch).sort((a, b) => a.name.localeCompare(b.name));
   } else if (_activeTab === 'recents') {
     items = [...items].sort((a, b) => new Date(b.updated_at || b.created_at) - new Date(a.updated_at || a.created_at)).slice(0, 20);
+  } else if (_activeTab === 'favorites') {
+    items = items.filter(i => (i.plain?.tags || []).includes('favorite'))
+      .sort((a, b) => a.name.localeCompare(b.name));
   } else {
     items = [...items].sort((a, b) => a.name.localeCompare(b.name));
   }
@@ -496,7 +512,7 @@ function renderList() {
   const svgFill = `<svg viewBox="0 0 24 24" fill="none"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><path d="M17 3l4 4-9 9H8v-4l9-9z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>`;
   const svgTotp = `<svg viewBox="0 0 24 24" fill="none" width="16" height="16"><rect x="5" y="2" width="14" height="20" rx="2" stroke="currentColor" stroke-width="1.7"/><circle cx="12" cy="17" r="1" fill="currentColor"/><path d="M9 7h6M9 11h4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`;
 
-  listEl.innerHTML = items.map(item => {
+  function buildItemHtml(item) {
     const matched = isMatch(item);
     const site = escHtml(siteLabel(item));
     const name = escHtml(item.name);
@@ -506,12 +522,15 @@ function renderList() {
     const canFill = item.item_type === 'password' && item.plain?.username && item.plain?.password;
     const canCopy = item.item_type === 'password' && item.plain?.password;
     const hasTotp = item.item_type === 'password' && !!_extractTotpSecret(item.plain?.totp_uri);
-
+    const tags = (item.plain?.tags || []).filter(t => t !== 'favorite');
+    const tagHtml = tags.map(t => `<span class="pk-tag">${escHtml(t)}</span>`).join('');
+    const isFav = (item.plain?.tags || []).includes('favorite');
     return `<div class="vault-item" data-id="${item.id}">
       <div class="item-avatar ${color}">${emoji}</div>
       <div class="item-info">
-        <div class="item-site">${site}${badge}</div>
+        <div class="item-site">${site}${badge}${isFav ? '<span class="pk-fav">★</span>' : ''}</div>
         <div class="item-name">${name}</div>
+        ${tagHtml ? `<div class="pk-tag-row">${tagHtml}</div>` : ''}
         ${hasTotp ? `<div class="item-totp-row"><span class="totp-code-inline" id="totp-${item.id}">······</span><span class="totp-timer-inline" id="totp-t-${item.id}"></span></div>` : ''}
       </div>
       <div class="item-actions">
@@ -522,7 +541,49 @@ function renderList() {
         <button class="btn-item-action" data-menu="${item.id}" title="More options">${svgDots}</button>
       </div>
     </div>`;
-  }).join('');
+  }
+
+  // Build the vault list — grouped by folder for 'all' tab, flat otherwise.
+  if (_activeTab === 'all' && _folders.length > 0) {
+    const groups = {};
+    items.forEach(item => {
+      const key = folderName(item.folder_id);
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(item);
+    });
+    const keys = ['(none)', ..._folders.map(f => f.name)].filter(k => groups[k]);
+    Object.keys(groups).forEach(k => { if (!keys.includes(k)) keys.push(k); });
+
+    listEl.innerHTML = keys.map(groupName => {
+      if (!groups[groupName]) return '';
+      const isCollapsed = _collapsedFolders.has(groupName);
+      const count = groups[groupName].length;
+      const chevron = isCollapsed ? '›' : '⌄';
+      const itemsHtml = isCollapsed ? '' : groups[groupName].map(buildItemHtml).join('');
+      return `<div class="pk-group" data-group="${escHtml(groupName)}">
+        <div class="pk-group-header">
+          <span class="pk-group-name">${escHtml(groupName)}</span>
+          <span class="pk-group-meta">
+            <span class="pk-group-count">${count}</span>
+            <span class="pk-group-chevron">${chevron}</span>
+          </span>
+        </div>
+        <div class="pk-group-items">${itemsHtml}</div>
+      </div>`;
+    }).join('');
+
+    // Wire collapse toggle on group headers.
+    listEl.querySelectorAll('.pk-group-header').forEach(hdr => {
+      hdr.addEventListener('click', () => {
+        const groupName = hdr.closest('.pk-group').dataset.group;
+        if (_collapsedFolders.has(groupName)) _collapsedFolders.delete(groupName);
+        else _collapsedFolders.add(groupName);
+        renderList();
+      });
+    });
+  } else {
+    listEl.innerHTML = items.map(buildItemHtml).join('');
+  }
 
   // Start TOTP tickers for items that have a totp_uri.
   items.forEach(item => {