Session 1: bug fix, global search, admin trash, lists CRUD
This commit is contained in:
114
static/app.js
114
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;
|
||||
}
|
||||
|
||||
146
static/style.css
146
static/style.css
@@ -829,6 +829,152 @@ a:hover { color: var(--accent-hover); }
|
||||
.flex-1 { flex: 1; }
|
||||
.hidden { display: none; }
|
||||
|
||||
/* ---- Search Trigger (Topbar) ---- */
|
||||
.search-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--muted);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
min-width: 200px;
|
||||
}
|
||||
.search-trigger:hover { border-color: var(--accent); color: var(--text-secondary); }
|
||||
.search-trigger kbd {
|
||||
margin-left: auto;
|
||||
padding: 1px 6px;
|
||||
background: var(--surface3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ---- Search Modal ---- */
|
||||
.search-modal {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 15vh;
|
||||
}
|
||||
.search-modal.hidden { display: none; }
|
||||
.search-modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,.55);
|
||||
}
|
||||
.search-modal-content {
|
||||
position: relative;
|
||||
width: 560px;
|
||||
max-height: 440px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.search-modal-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.search-modal-icon { color: var(--muted); flex-shrink: 0; }
|
||||
.search-modal-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.search-modal-input::placeholder { color: var(--muted); }
|
||||
.search-modal-esc {
|
||||
padding: 2px 8px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-results {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.search-group-label {
|
||||
padding: 8px 16px 4px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.search-result-item:hover,
|
||||
.search-result-item.active { background: var(--surface2); }
|
||||
.search-result-name { font-weight: 500; flex: 1; }
|
||||
.search-result-context { font-size: 0.78rem; color: var(--muted); }
|
||||
.search-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ---- Search Type Badges ---- */
|
||||
.search-type-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.search-type-tasks { background: var(--accent-soft); color: var(--accent); }
|
||||
.search-type-projects { background: var(--green-soft); color: var(--green); }
|
||||
.search-type-notes { background: var(--purple-soft); color: var(--purple); }
|
||||
.search-type-contacts { background: var(--amber-soft); color: var(--amber); }
|
||||
.search-type-links { background: var(--surface2); color: var(--text-secondary); }
|
||||
.search-type-lists { background: var(--accent-soft); color: var(--accent); }
|
||||
.search-type-capture { background: var(--surface2); color: var(--muted); }
|
||||
.search-type-domains { background: var(--green-soft); color: var(--green); }
|
||||
.search-type-areas { background: var(--surface2); color: var(--text-secondary); }
|
||||
.search-type-daily_focus { background: var(--amber-soft); color: var(--amber); }
|
||||
|
||||
/* ---- Search Page Form ---- */
|
||||
.search-page-form {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* ---- Scrollbar ---- */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
Reference in New Issue
Block a user