424 lines
18 KiB
HTML
424 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Search — Ontoref{% endblock title %}
|
|
{% block nav_search %}active{% endblock nav_search %}
|
|
|
|
{% block content %}
|
|
<!-- Hidden context for JS -->
|
|
<input type="hidden" id="search-slug" value="{% if slug %}{{ slug }}{% endif %}">
|
|
|
|
<!-- Page header: tab switcher -->
|
|
<div class="mb-4 flex items-center gap-1.5">
|
|
<button id="tab-search"
|
|
class="btn btn-sm btn-primary gap-1.5"
|
|
title="Search ontology nodes, ADRs and modes">
|
|
<svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
<span class="nav-label">Search</span>
|
|
</button>
|
|
<button id="tab-bookmarks"
|
|
class="btn btn-sm btn-ghost gap-1.5"
|
|
title="Saved bookmarks">
|
|
<svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M5 3a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2H5z"/>
|
|
</svg>
|
|
<span class="nav-label">Bookmarks</span>
|
|
<span id="bm-count" class="badge badge-xs badge-ghost hidden"></span>
|
|
</button>
|
|
<div class="flex-1"></div>
|
|
<button id="btn-reset-search" class="btn btn-xs btn-ghost">Clear</button>
|
|
</div>
|
|
|
|
<div class="flex gap-0 h-[calc(100vh-196px)] min-h-[400px]">
|
|
|
|
<!-- Left: tab content (search or bookmarks) -->
|
|
<div class="flex flex-col bg-base-200 rounded-l-lg" style="flex:0 0 320px;min-width:200px">
|
|
|
|
<!-- ── Search pane ── -->
|
|
<div id="search-pane" class="flex flex-col flex-1 overflow-hidden">
|
|
<div class="p-3 border-b border-base-content/10">
|
|
<div class="relative">
|
|
<input id="search-input" type="search" placeholder="Search nodes, ADRs, modes…"
|
|
class="input input-bordered input-sm w-full pr-8 font-mono"
|
|
autocomplete="off" autocorrect="off" spellcheck="false">
|
|
<svg class="absolute right-2.5 top-2 w-4 h-4 text-base-content/30 pointer-events-none"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div id="results-count" class="px-3 py-1 text-xs text-base-content/40 border-b border-base-content/10 hidden"></div>
|
|
<ul id="results-list" class="flex-1 overflow-y-auto divide-y divide-base-content/10 text-sm"></ul>
|
|
</div>
|
|
|
|
<!-- ── Bookmarks pane ── -->
|
|
<div id="bookmarks-pane" class="flex flex-col flex-1 overflow-hidden hidden">
|
|
<div class="flex items-center justify-between px-3 py-2 border-b border-base-content/10">
|
|
<span class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
|
|
Saved bookmarks
|
|
</span>
|
|
<button id="btn-clear-bookmarks"
|
|
class="btn btn-ghost btn-xs text-base-content/30 hover:text-error">
|
|
clear all
|
|
</button>
|
|
</div>
|
|
<ul id="bookmarks-list" class="flex-1 overflow-y-auto divide-y divide-base-content/10 text-sm"></ul>
|
|
<div id="bookmarks-empty" class="flex-1 flex items-center justify-center text-base-content/25 text-xs hidden">
|
|
No bookmarks yet — star a result to save it
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resize handle -->
|
|
<div id="search-resize" class="w-1.5 bg-base-300 hover:bg-primary/40 cursor-col-resize transition-colors flex-shrink-0"></div>
|
|
|
|
<!-- Right: detail panel -->
|
|
<div id="detail-panel" class="flex-1 bg-base-200 rounded-r-lg overflow-y-auto p-5 hidden min-w-[200px]">
|
|
<!-- filled by JS -->
|
|
</div>
|
|
|
|
<!-- Empty right side when nothing selected -->
|
|
<div id="detail-empty" class="flex-1 bg-base-200 rounded-r-lg flex items-center justify-center text-base-content/25 text-sm">
|
|
<div class="text-center">
|
|
<svg class="w-10 h-10 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
|
|
</svg>
|
|
Type to search, click a result to view
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
const slugInput = document.getElementById('search-slug');
|
|
const input = document.getElementById('search-input');
|
|
const resultsList = document.getElementById('results-list');
|
|
const resultsCount = document.getElementById('results-count');
|
|
const detail = document.getElementById('detail-panel');
|
|
const detailEmpty = document.getElementById('detail-empty');
|
|
const resetBtn = document.getElementById('btn-reset-search');
|
|
const resizeHandle = document.getElementById('search-resize');
|
|
|
|
const LEFT_PANEL = document.querySelector('#search-pane').closest('div.flex-col');
|
|
const CONTAINER = LEFT_PANEL.parentElement;
|
|
|
|
let results = [];
|
|
let searchTimer = null;
|
|
let selectedItem = null;
|
|
|
|
// ── Tab switching ──────────────────────────────────────────────────────────
|
|
|
|
const tabSearch = document.getElementById('tab-search');
|
|
const tabBm = document.getElementById('tab-bookmarks');
|
|
const searchPane = document.getElementById('search-pane');
|
|
const bookmarksPane = document.getElementById('bookmarks-pane');
|
|
|
|
const TAB_KEY = 'ontoref-search-tab';
|
|
|
|
function setTab(tab) {
|
|
const isBm = tab === 'bookmarks';
|
|
searchPane.classList.toggle('hidden', isBm);
|
|
bookmarksPane.classList.toggle('hidden', !isBm);
|
|
tabSearch.className = isBm ? 'btn btn-sm btn-ghost gap-1.5' : 'btn btn-sm btn-primary gap-1.5';
|
|
tabBm.className = isBm ? 'btn btn-sm btn-primary gap-1.5' : 'btn btn-sm btn-ghost gap-1.5';
|
|
resetBtn.classList.toggle('hidden', isBm);
|
|
try { localStorage.setItem(TAB_KEY, tab); } catch (_) {}
|
|
if (isBm) renderBookmarks();
|
|
else { input.focus(); }
|
|
}
|
|
|
|
tabSearch.addEventListener('click', () => setTab('search'));
|
|
tabBm.addEventListener('click', () => setTab('bookmarks'));
|
|
|
|
// ── Bookmarks ──────────────────────────────────────────────────────────────
|
|
|
|
const BM_KEY = 'ontoref-bookmarks';
|
|
const bmList = document.getElementById('bookmarks-list');
|
|
const bmCount = document.getElementById('bm-count');
|
|
const bmEmpty = document.getElementById('bookmarks-empty');
|
|
const bmClearBtn = document.getElementById('btn-clear-bookmarks');
|
|
const PROJECT = slugInput.value || '__single__';
|
|
|
|
function loadBookmarks() {
|
|
try { return JSON.parse(localStorage.getItem(BM_KEY) || '[]'); } catch(_) { return []; }
|
|
}
|
|
function saveBookmarks(bms) {
|
|
try { localStorage.setItem(BM_KEY, JSON.stringify(bms)); } catch(_) {}
|
|
}
|
|
function bmKey(r) { return `${r.kind}:${r.id}:${PROJECT}`; }
|
|
function isBookmarked(r) { return loadBookmarks().some(b => b.key === bmKey(r)); }
|
|
|
|
function toggleBookmark(r) {
|
|
let bms = loadBookmarks();
|
|
const key = bmKey(r);
|
|
const idx = bms.findIndex(b => b.key === key);
|
|
if (idx >= 0) {
|
|
bms.splice(idx, 1);
|
|
} else {
|
|
bms.unshift({ key, kind: r.kind, id: r.id, title: r.title,
|
|
description: r.description, project: PROJECT,
|
|
pole: r.pole || null, level: r.level || null,
|
|
saved: Date.now() });
|
|
}
|
|
saveBookmarks(bms);
|
|
renderBookmarks();
|
|
renderResults();
|
|
}
|
|
|
|
function renderBookmarks() {
|
|
const bms = loadBookmarks().filter(b => b.project === PROJECT);
|
|
if (bms.length > 0) {
|
|
bmCount.textContent = bms.length;
|
|
bmCount.classList.remove('hidden');
|
|
} else {
|
|
bmCount.classList.add('hidden');
|
|
}
|
|
|
|
if (bms.length === 0) {
|
|
bmList.innerHTML = '';
|
|
if (bmEmpty) bmEmpty.classList.remove('hidden');
|
|
return;
|
|
}
|
|
if (bmEmpty) bmEmpty.classList.add('hidden');
|
|
|
|
bmList.innerHTML = bms.map(b => `
|
|
<li class="bm-item cursor-pointer hover:bg-base-300 transition-colors" data-key="${esc(b.key)}">
|
|
<div class="px-3 py-2 flex items-center gap-2">
|
|
<span class="badge badge-xs ${kindCls(b.kind)} flex-shrink-0">${b.kind}</span>
|
|
<span class="text-xs font-medium truncate flex-1">${esc(b.title)}</span>
|
|
<button class="btn-unbm btn btn-ghost btn-xs btn-circle flex-shrink-0 opacity-40 hover:opacity-100 hover:text-error" data-key="${esc(b.key)}" title="Remove">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
`).join('');
|
|
|
|
bmList.querySelectorAll('.bm-item').forEach(el => {
|
|
el.addEventListener('click', e => {
|
|
if (e.target.closest('.btn-unbm')) return;
|
|
const key = el.dataset.key;
|
|
const bm = loadBookmarks().find(b => b.key === key);
|
|
if (!bm) return;
|
|
if (selectedItem) selectedItem.classList.remove('bg-base-200');
|
|
selectedItem = null;
|
|
showDetailBm(bm);
|
|
});
|
|
});
|
|
|
|
bmList.querySelectorAll('.btn-unbm').forEach(el => {
|
|
el.addEventListener('click', e => {
|
|
e.stopPropagation();
|
|
const key = el.dataset.key;
|
|
saveBookmarks(loadBookmarks().filter(b => b.key !== key));
|
|
renderBookmarks();
|
|
renderResults();
|
|
});
|
|
});
|
|
}
|
|
|
|
function showDetailBm(bm) {
|
|
detail.classList.remove('hidden');
|
|
detailEmpty.classList.add('hidden');
|
|
detail.innerHTML = `
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex-1 min-w-0">
|
|
<h2 class="font-bold text-base leading-tight">${esc(bm.title)}</h2>
|
|
<div class="flex flex-wrap gap-1 mt-1.5">
|
|
<span class="badge badge-xs ${kindCls(bm.kind)}">${bm.kind}</span>
|
|
${bm.level ? `<span class="badge badge-xs badge-ghost">${esc(bm.level)}</span>` : ''}
|
|
${bm.pole ? `<span class="badge badge-xs" style="background:${poleColor(bm.pole)};color:#111;border:none">${esc(bm.pole)}</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-ghost btn-xs btn-circle text-warning" title="Remove bookmark"
|
|
onclick="toggleBookmark(${JSON.stringify(bm).replace(/</g,'\\u003c')})">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M5 3a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2H5z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-base-content/40 mb-3">${esc(bm.description)}</p>
|
|
<p class="text-xs font-mono text-base-content/30">id: ${esc(bm.id)}</p>
|
|
`;
|
|
}
|
|
|
|
bmClearBtn.addEventListener('click', () => {
|
|
saveBookmarks(loadBookmarks().filter(b => b.project !== PROJECT));
|
|
renderBookmarks();
|
|
renderResults();
|
|
});
|
|
|
|
// ── Persistence ────────────────────────────────────────────────────────────
|
|
|
|
const STORAGE_KEY = 'ontoref-search:' + PROJECT;
|
|
|
|
function saveQuery(q) { try { sessionStorage.setItem(STORAGE_KEY, q); } catch (_) {} }
|
|
function loadQuery() { try { return sessionStorage.getItem(STORAGE_KEY) || ''; } catch (_) { return ''; } }
|
|
|
|
// ── Search ─────────────────────────────────────────────────────────────────
|
|
|
|
input.addEventListener('input', () => {
|
|
saveQuery(input.value);
|
|
clearTimeout(searchTimer);
|
|
searchTimer = setTimeout(doSearch, 280);
|
|
});
|
|
input.addEventListener('keydown', e => { if (e.key === 'Escape') { reset(); e.preventDefault(); } });
|
|
|
|
async function doSearch() {
|
|
const q = input.value.trim();
|
|
if (!q) { clearResults(); return; }
|
|
const slug = slugInput.value;
|
|
const url = `/search?q=${encodeURIComponent(q)}${slug ? `&slug=${encodeURIComponent(slug)}` : ''}`;
|
|
let data;
|
|
try {
|
|
const res = await fetch(url);
|
|
data = await res.json();
|
|
} catch (err) {
|
|
resultsCount.textContent = 'Search error';
|
|
resultsCount.classList.remove('hidden');
|
|
return;
|
|
}
|
|
results = data.results || [];
|
|
renderResults();
|
|
}
|
|
|
|
function renderResults() {
|
|
if (results.length === 0) {
|
|
resultsList.innerHTML = '<li class="px-3 py-8 text-center text-xs text-base-content/40">No results</li>';
|
|
resultsCount.textContent = '0 results';
|
|
resultsCount.classList.remove('hidden');
|
|
return;
|
|
}
|
|
resultsCount.textContent = `${results.length} result${results.length === 1 ? '' : 's'}`;
|
|
resultsCount.classList.remove('hidden');
|
|
|
|
resultsList.innerHTML = results.map((r, i) => {
|
|
const starred = isBookmarked(r);
|
|
return `
|
|
<li class="result-item cursor-pointer hover:bg-base-300 transition-colors" data-idx="${i}">
|
|
<div class="px-3 py-2.5 flex items-start gap-1">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-1 mb-1">
|
|
<span class="badge badge-xs ${kindCls(r.kind)}">${r.kind}</span>
|
|
${r.level ? `<span class="badge badge-xs badge-ghost">${esc(r.level)}</span>` : ''}
|
|
${r.pole ? `<span class="badge badge-xs" style="background:${poleColor(r.pole)};color:#111;border:none">${esc(r.pole)}</span>` : ''}
|
|
</div>
|
|
<div class="text-sm font-medium leading-tight truncate">${esc(r.title)}</div>
|
|
<div class="text-xs text-base-content/50 leading-tight truncate mt-0.5">${esc(r.description)}</div>
|
|
</div>
|
|
<button class="btn-star btn btn-ghost btn-xs btn-circle flex-shrink-0 mt-0.5 ${starred ? 'text-warning' : 'text-base-content/20 hover:text-warning'}"
|
|
data-idx="${i}" title="${starred ? 'Remove bookmark' : 'Bookmark'}">
|
|
<svg class="w-3.5 h-3.5" fill="${starred ? 'currentColor' : 'none'}" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2H5z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</li>`;
|
|
}).join('');
|
|
|
|
document.querySelectorAll('.result-item').forEach(el => {
|
|
el.addEventListener('click', e => {
|
|
if (e.target.closest('.btn-star')) return;
|
|
if (selectedItem) selectedItem.classList.remove('bg-base-200');
|
|
el.classList.add('bg-base-200');
|
|
selectedItem = el;
|
|
showDetail(parseInt(el.dataset.idx));
|
|
});
|
|
});
|
|
document.querySelectorAll('.btn-star').forEach(el => {
|
|
el.addEventListener('click', e => {
|
|
e.stopPropagation();
|
|
toggleBookmark(results[parseInt(el.dataset.idx)]);
|
|
});
|
|
});
|
|
}
|
|
|
|
function showDetail(idx) {
|
|
const r = results[idx];
|
|
const starred = isBookmarked(r);
|
|
detail.classList.remove('hidden');
|
|
detailEmpty.classList.add('hidden');
|
|
detail.innerHTML = `
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex-1 min-w-0">
|
|
<h2 class="font-bold text-base leading-tight">${esc(r.title)}</h2>
|
|
<div class="flex flex-wrap gap-1 mt-1.5">
|
|
<span class="badge badge-xs ${kindCls(r.kind)}">${r.kind}</span>
|
|
${r.level ? `<span class="badge badge-xs badge-ghost">${esc(r.level)}</span>` : ''}
|
|
${r.pole ? `<span class="badge badge-xs" style="background:${poleColor(r.pole)};color:#111;border:none">${esc(r.pole)}</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<button id="detail-star" class="btn btn-ghost btn-xs btn-circle ${starred ? 'text-warning' : 'text-base-content/25 hover:text-warning'}" title="${starred ? 'Remove bookmark' : 'Bookmark this'}">
|
|
<svg class="w-4 h-4" fill="${starred ? 'currentColor' : 'none'}" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2H5z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p class="text-xs font-mono text-base-content/30 mb-4 truncate">${esc(r.path)}</p>
|
|
<div class="space-y-1 text-sm">${r.detail_html}</div>
|
|
`;
|
|
document.getElementById('detail-star').addEventListener('click', () => {
|
|
toggleBookmark(r);
|
|
showDetail(idx);
|
|
});
|
|
}
|
|
|
|
function clearResults() {
|
|
results = [];
|
|
resultsList.innerHTML = '';
|
|
resultsCount.classList.add('hidden');
|
|
detail.classList.add('hidden');
|
|
detail.innerHTML = '';
|
|
detailEmpty.classList.remove('hidden');
|
|
selectedItem = null;
|
|
}
|
|
function reset() { input.value = ''; saveQuery(''); clearResults(); input.focus(); }
|
|
resetBtn.addEventListener('click', reset);
|
|
|
|
// ── Resize handle ──────────────────────────────────────────────────────────
|
|
|
|
let resizing = false;
|
|
resizeHandle.addEventListener('mousedown', e => {
|
|
resizing = true;
|
|
document.body.style.cursor = 'col-resize';
|
|
document.body.style.userSelect = 'none';
|
|
e.preventDefault();
|
|
});
|
|
document.addEventListener('mousemove', e => {
|
|
if (!resizing) return;
|
|
const rect = CONTAINER.getBoundingClientRect();
|
|
const newW = Math.max(160, Math.min(e.clientX - rect.left, rect.width * 0.6));
|
|
LEFT_PANEL.style.flex = `0 0 ${newW}px`;
|
|
});
|
|
document.addEventListener('mouseup', () => {
|
|
if (!resizing) return;
|
|
resizing = false;
|
|
document.body.style.cursor = '';
|
|
document.body.style.userSelect = '';
|
|
});
|
|
|
|
// ── Helpers ────────────────────────────────────────────────────────────────
|
|
|
|
function kindCls(kind) { return { node: 'badge-primary', adr: 'badge-secondary', mode: 'badge-accent' }[kind] || 'badge-neutral'; }
|
|
function poleColor(p) { return { Yang: '#f59e0b', Yin: '#3b82f6', Spiral: '#8b5cf6' }[p] || '#6b7280'; }
|
|
function esc(s) { return String(s ?? '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
|
|
|
// ── Init ───────────────────────────────────────────────────────────────────
|
|
|
|
renderBookmarks();
|
|
const savedTab = (() => { try { return localStorage.getItem(TAB_KEY); } catch (_) { return null; } })();
|
|
setTab(savedTab === 'bookmarks' ? 'bookmarks' : 'search');
|
|
|
|
const savedQuery = loadQuery();
|
|
if (savedQuery) { input.value = savedQuery; doSearch(); }
|
|
</script>
|
|
{% endblock scripts %}
|