diff --git a/web/app.js b/web/app.js index c65011b..4b809e4 100644 --- a/web/app.js +++ b/web/app.js @@ -418,6 +418,7 @@ : '|title // desc #tag ${slot} 1. step'; bar.innerHTML = ` +
@@ -426,12 +427,45 @@ `; const input = $('#capture-input'); + function autoResize() { + input.style.height = 'auto'; + input.style.height = input.scrollHeight + 'px'; + } input.addEventListener('keydown', (ev) => { if (ev.key === 'Enter' && !ev.shiftKey) { ev.preventDefault(); handleCapture(); } }); + input.addEventListener('input', () => { autoResize(); updateCapturePreview(input.value); }); + } + + function updateCapturePreview(val) { + const el = $('#cap-preview'); + if (!el) return; + val = val.trim(); + if (!val) { el.innerHTML = ''; el.classList.remove('visible'); return; } + + const parsed = parseInput(val); + if (!parsed) { el.innerHTML = ''; el.classList.remove('visible'); return; } + + const pills = []; + if (parsed.query) { + pills.push('search'); + } else { + pills.push(`${escHtml(parsed.glyph)}`); + } + if (parsed.title) pills.push(`|${escHtml(parsed.title)}`); + if (parsed.description) pills.push(`${escHtml(parsed.description)}`); + for (const t of (parsed.query ? parsed.filterTags : parsed.tags)) { + pills.push(`#${escHtml(t)}`); + } + if (parsed.timeAnchor) pills.push(`@${escHtml(parsed.timeAnchor)}`); + if (parsed.pin) pills.push('pin'); + if (parsed.cardSuffix) pills.push(`^${escHtml(parsed.cardSuffix)}`); + + el.innerHTML = pills.join(''); + el.classList.add('visible'); } async function handleCapture() { @@ -448,6 +482,8 @@ const searchInput = $('#search-input'); if (searchInput) searchInput.value = parsed.body + (parsed.filterTags.length ? ' ' + parsed.filterTags.map(t => '#' + t).join(' ') : ''); input.value = ''; + input.style.height = 'auto'; + updateCapturePreview(''); renderEntityList(); return; } @@ -465,6 +501,8 @@ await api.createEntity(data); input.value = ''; + input.style.height = 'auto'; + updateCapturePreview(''); await loadEntities(); await loadTags(); showToast('captured'); @@ -608,11 +646,12 @@ const cardBadge = e.card_type ? `${e.card_type}` : ''; let label; + const descSnip = e.description ? `${escHtml(e.description)}` : ''; if (e.title) { const preview = e.body ? `${escHtml(e.body)}` : ''; - label = `${escHtml(e.title)}${preview}`; + label = `${escHtml(e.title)}${descSnip}${preview}`; } else { - label = `${escHtml(e.body)}`; + label = `${escHtml(e.body)}${descSnip}`; } return `
diff --git a/web/style.css b/web/style.css index d6d9ad8..829115c 100644 --- a/web/style.css +++ b/web/style.css @@ -372,6 +372,17 @@ main { text-overflow: ellipsis; } +.entity-desc { + font-family: var(--mono); + font-size: 10px; + color: var(--dim); + font-style: italic; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-left: 8px; +} + .entity-preview { font-family: var(--mono); font-size: 11px; @@ -617,6 +628,35 @@ main { transition: border-top-color var(--t-base); } +/* ── Capture preview ── */ +.cap-preview { + display: none; + flex-wrap: wrap; + gap: 5px; + padding: 8px 18px 0; +} +.cap-preview.visible { display: flex; } + +.cap-pill { + font-family: var(--mono); + font-size: 10px; + padding: 2px 7px; + border-radius: var(--r2); + border: 1px solid var(--border); + color: var(--muted); + background: var(--bg); + letter-spacing: .02em; +} + +.cap-pill-glyph { color: var(--accent); border-color: rgba(200,148,42,.25); } +.cap-pill-title { color: var(--text); } +.cap-pill-desc { color: var(--muted); font-style: italic; } +.cap-pill-tag { color: var(--lineage); border-color: rgba(98,134,100,.3); } +.cap-pill-time { color: var(--event); border-color: rgba(104,152,200,.3); } +.cap-pill-pin { color: var(--remind); border-color: rgba(200,120,74,.3); } +.cap-pill-card { color: var(--accent); border-color: rgba(200,148,42,.25); } +.cap-pill-query { color: var(--event); border-color: rgba(104,152,200,.3); } + #capture-bar:focus-within { border-top-color: rgba(200,148,42,.35); } .cap-row {