Session 1: bug fix, global search, admin trash, lists CRUD

2026-02-28 03:52:12 +00:00
parent f36ea194f3
commit 5773808ae4
14 changed files with 1211 additions and 2 deletions
--- a/static/app.js
+++ b/static/app.js
@@ -54,3 +54,117 @@ function toggleTheme() {
 document.head.insertAdjacentHTML('beforeend',
    '<style>.domain-children.collapsed { display: none; }</style>'
 );
+
+// ---- Search Modal ----
+
+let searchDebounce = null;
+
+function openSearch() {
+    const modal = document.getElementById('search-modal');
+    if (!modal) return;
+    modal.classList.remove('hidden');
+    const input = document.getElementById('search-input');
+    input.value = '';
+    input.focus();
+    document.getElementById('search-results').innerHTML = '';
+}
+
+function closeSearch() {
+    const modal = document.getElementById('search-modal');
+    if (modal) modal.classList.add('hidden');
+}
+
+document.addEventListener('keydown', (e) => {
+    // Cmd/Ctrl + K opens search
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        openSearch();
+    }
+    // Escape closes search
+    if (e.key === 'Escape') {
+        closeSearch();
+    }
+});
+
+// Live search with debounce
+document.addEventListener('DOMContentLoaded', () => {
+    const input = document.getElementById('search-input');
+    if (!input) return;
+
+    input.addEventListener('input', () => {
+        clearTimeout(searchDebounce);
+        const q = input.value.trim();
+        if (q.length < 1) {
+            document.getElementById('search-results').innerHTML = '';
+            return;
+        }
+        searchDebounce = setTimeout(() => doSearch(q), 200);
+    });
+
+    // Navigate results with arrow keys
+    input.addEventListener('keydown', (e) => {
+        const results = document.querySelectorAll('.search-result-item');
+        const active = document.querySelector('.search-result-item.active');
+        let idx = Array.from(results).indexOf(active);
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (active) active.classList.remove('active');
+            idx = (idx + 1) % results.length;
+            results[idx]?.classList.add('active');
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (active) active.classList.remove('active');
+            idx = idx <= 0 ? results.length - 1 : idx - 1;
+            results[idx]?.classList.add('active');
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            const activeItem = document.querySelector('.search-result-item.active');
+            if (activeItem) {
+                window.location.href = activeItem.dataset.url;
+            }
+        }
+    });
+});
+
+async function doSearch(query) {
+    const container = document.getElementById('search-results');
+    try {
+        const resp = await fetch(`/search/api?q=${encodeURIComponent(query)}&limit=8`);
+        const data = await resp.json();
+
+        if (!data.results || data.results.length === 0) {
+            container.innerHTML = '<div class="search-empty">No results found</div>';
+            return;
+        }
+
+        // Group by type
+        const grouped = {};
+        data.results.forEach(r => {
+            if (!grouped[r.type_label]) grouped[r.type_label] = [];
+            grouped[r.type_label].push(r);
+        });
+
+        let html = '';
+        for (const [label, items] of Object.entries(grouped)) {
+            html += `<div class="search-group-label">${label}</div>`;
+            items.forEach((item, i) => {
+                const isFirst = i === 0 && label === Object.keys(grouped)[0];
+                html += `<a href="${item.url}" class="search-result-item ${isFirst ? 'active' : ''}" data-url="${item.url}">
+                    <span class="search-result-name">${escHtml(item.name)}</span>
+                    ${item.context ? `<span class="search-result-context">${escHtml(item.context)}</span>` : ''}
+                    ${item.status ? `<span class="status-badge status-${item.status}">${item.status.replace('_', ' ')}</span>` : ''}
+                </a>`;
+            });
+        }
+        container.innerHTML = html;
+    } catch (err) {
+        container.innerHTML = '<div class="search-empty">Search error</div>';
+    }
+}
+
+function escHtml(s) {
+    const d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+}