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 {