Jeffrey Smith
e00acf9ef1
sw.api.ext() auto-unwraps the JSON response body, so the list
endpoint returns the array directly rather than {data: [...]}.
Use `res.data || res || []` pattern matching tasks surface.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
433 lines
15 KiB
JavaScript
433 lines
15 KiB
JavaScript
/**
|
|
* Notes — Surface Entry Point (v0.1.0)
|
|
*
|
|
* Markdown notes surface using the SDK:
|
|
* sw.api.ext('notes') — scoped API client
|
|
* sw.ui.* — primitive components
|
|
* sw.shell.Topbar — navigation bar
|
|
*/
|
|
(async function () {
|
|
'use strict';
|
|
|
|
var mount = document.getElementById('extension-mount');
|
|
if (!mount) return;
|
|
|
|
var base = window.__BASE__ || '';
|
|
var ver = window.__VERSION__ || '0';
|
|
|
|
// ── Boot SDK ───────────────────────────────
|
|
try {
|
|
if (!window.preact) {
|
|
var { h, render } = await import(base + '/js/sw/vendor/preact.module.js');
|
|
var hooksModule = await import(base + '/js/sw/vendor/hooks.module.js');
|
|
var htmModule = await import(base + '/js/sw/vendor/htm.module.js');
|
|
window.preact = { h, render };
|
|
window.hooks = hooksModule;
|
|
window.html = htmModule.default.bind(h);
|
|
}
|
|
var sdk = await import(base + '/js/sw/sdk/index.js?v=' + ver);
|
|
await sdk.boot();
|
|
} catch (e) {
|
|
mount.innerHTML = '<p style="color:var(--danger);padding:24px;">SDK boot failed: ' + e.message + '</p>';
|
|
return;
|
|
}
|
|
|
|
var { html } = window;
|
|
var { useState, useEffect, useCallback, useRef, useMemo } = hooks;
|
|
var { render } = preact;
|
|
|
|
// ── SDK modules ────────────────────────────
|
|
var api = sw.api.ext('notes');
|
|
var { Button, Spinner } = sw.ui;
|
|
var Topbar = sw.shell.Topbar;
|
|
|
|
// ── Debounce helper ────────────────────────
|
|
var _timers = {};
|
|
function debounce(key, fn, ms) {
|
|
clearTimeout(_timers[key]);
|
|
_timers[key] = setTimeout(fn, ms);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════
|
|
// Markdown renderer (inline, no deps)
|
|
// ═══════════════════════════════════════════
|
|
|
|
function renderMarkdown(src) {
|
|
if (!src) return '';
|
|
var lines = src.split('\n');
|
|
var out = [];
|
|
var inCode = false;
|
|
var inList = false;
|
|
var listTag = '';
|
|
|
|
for (var i = 0; i < lines.length; i++) {
|
|
var line = lines[i];
|
|
|
|
// fenced code blocks
|
|
if (line.trim().startsWith('```')) {
|
|
if (inCode) {
|
|
out.push('</code></pre>');
|
|
inCode = false;
|
|
} else {
|
|
if (inList) { out.push('</' + listTag + '>'); inList = false; }
|
|
out.push('<pre><code>');
|
|
inCode = true;
|
|
}
|
|
continue;
|
|
}
|
|
if (inCode) {
|
|
out.push(escHtml(line) + '\n');
|
|
continue;
|
|
}
|
|
|
|
// blank line
|
|
if (!line.trim()) {
|
|
if (inList) { out.push('</' + listTag + '>'); inList = false; }
|
|
continue;
|
|
}
|
|
|
|
// headings
|
|
if (line.startsWith('### ')) { closeList(); out.push('<h3>' + inline(line.slice(4)) + '</h3>'); continue; }
|
|
if (line.startsWith('## ')) { closeList(); out.push('<h2>' + inline(line.slice(3)) + '</h2>'); continue; }
|
|
if (line.startsWith('# ')) { closeList(); out.push('<h1>' + inline(line.slice(2)) + '</h1>'); continue; }
|
|
|
|
// hr
|
|
if (/^[-*_]{3,}\s*$/.test(line)) { closeList(); out.push('<hr>'); continue; }
|
|
|
|
// blockquote
|
|
if (line.startsWith('> ')) { closeList(); out.push('<blockquote><p>' + inline(line.slice(2)) + '</p></blockquote>'); continue; }
|
|
|
|
// unordered list
|
|
if (/^[\-*+]\s/.test(line)) {
|
|
if (!inList || listTag !== 'ul') { closeList(); out.push('<ul>'); inList = true; listTag = 'ul'; }
|
|
out.push('<li>' + inline(line.replace(/^[\-*+]\s/, '')) + '</li>');
|
|
continue;
|
|
}
|
|
|
|
// ordered list
|
|
if (/^\d+\.\s/.test(line)) {
|
|
if (!inList || listTag !== 'ol') { closeList(); out.push('<ol>'); inList = true; listTag = 'ol'; }
|
|
out.push('<li>' + inline(line.replace(/^\d+\.\s/, '')) + '</li>');
|
|
continue;
|
|
}
|
|
|
|
// paragraph
|
|
closeList();
|
|
out.push('<p>' + inline(line) + '</p>');
|
|
}
|
|
if (inCode) out.push('</code></pre>');
|
|
if (inList) out.push('</' + listTag + '>');
|
|
return out.join('\n');
|
|
|
|
function closeList() { if (inList) { out.push('</' + listTag + '>'); inList = false; } }
|
|
}
|
|
|
|
function escHtml(s) {
|
|
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
|
|
function inline(s) {
|
|
s = escHtml(s);
|
|
// inline code
|
|
s = s.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
// bold
|
|
s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
|
s = s.replace(/__(.+?)__/g, '<strong>$1</strong>');
|
|
// italic
|
|
s = s.replace(/\*(.+?)\*/g, '<em>$1</em>');
|
|
s = s.replace(/_(.+?)_/g, '<em>$1</em>');
|
|
// links
|
|
s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
|
|
return s;
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════
|
|
// NoteCard — sidebar list item
|
|
// ═══════════════════════════════════════════
|
|
|
|
function NoteCard({ note, active, onClick }) {
|
|
var dateStr = note.updated_at || note.created_at || '';
|
|
if (dateStr) {
|
|
try { dateStr = new Date(dateStr).toLocaleDateString(); } catch(e) { /* keep raw */ }
|
|
}
|
|
return html`
|
|
<div class="note-card ${active ? 'note-card--active' : ''}" onClick=${onClick}>
|
|
<div class="note-card__title">
|
|
${note.pinned ? html`<span class="note-card__pin">📌</span>` : null}
|
|
${note.title || 'Untitled'}
|
|
</div>
|
|
${note.snippet && html`<div class="note-card__snippet">${note.snippet}</div>`}
|
|
${dateStr && html`<div class="note-card__date">${dateStr}</div>`}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════
|
|
// EditorPane — note editor + preview
|
|
// ═══════════════════════════════════════════
|
|
|
|
function EditorPane({ note, onSave, onDelete, onRefresh }) {
|
|
var [title, setTitle] = useState(note ? note.title : '');
|
|
var [body, setBody] = useState(note ? note.body : '');
|
|
var [preview, setPreview] = useState(false);
|
|
var [dirty, setDirty] = useState(false);
|
|
var [saving, setSaving] = useState(false);
|
|
var textareaRef = useRef(null);
|
|
|
|
// sync when note changes
|
|
useEffect(function() {
|
|
if (note) {
|
|
setTitle(note.title || '');
|
|
setBody(note.body || '');
|
|
setDirty(false);
|
|
setPreview(false);
|
|
}
|
|
}, [note ? note.id : null]);
|
|
|
|
function handleTitleChange(e) {
|
|
setTitle(e.target.value);
|
|
setDirty(true);
|
|
debounce('save', function() { doSave(e.target.value, body); }, 1000);
|
|
}
|
|
|
|
function handleBodyChange(e) {
|
|
setBody(e.target.value);
|
|
setDirty(true);
|
|
debounce('save', function() { doSave(title, e.target.value); }, 1000);
|
|
}
|
|
|
|
async function doSave(t, b) {
|
|
if (!note) return;
|
|
setSaving(true);
|
|
try {
|
|
await api.put('/notes/' + note.id, { title: t || 'Untitled', body: b });
|
|
setDirty(false);
|
|
onRefresh();
|
|
} catch (e) {
|
|
console.error('Save failed:', e);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handlePin() {
|
|
if (!note) return;
|
|
await api.put('/notes/' + note.id, { pinned: note.pinned ? 0 : 1 });
|
|
onRefresh();
|
|
}
|
|
|
|
async function handleArchive() {
|
|
if (!note || !confirm('Archive this note?')) return;
|
|
await api.del('/notes/' + note.id);
|
|
onDelete();
|
|
}
|
|
|
|
function handleKeyDown(e) {
|
|
// Tab inserts two spaces
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
var ta = e.target;
|
|
var start = ta.selectionStart;
|
|
var end = ta.selectionEnd;
|
|
var val = ta.value;
|
|
ta.value = val.substring(0, start) + ' ' + val.substring(end);
|
|
ta.selectionStart = ta.selectionEnd = start + 2;
|
|
setBody(ta.value);
|
|
setDirty(true);
|
|
debounce('save', function() { doSave(title, ta.value); }, 1000);
|
|
}
|
|
// Ctrl/Cmd+S force save
|
|
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
|
|
e.preventDefault();
|
|
doSave(title, body);
|
|
}
|
|
}
|
|
|
|
var previewHtml = useMemo(function() { return renderMarkdown(body); }, [body]);
|
|
|
|
if (!note) {
|
|
return html`<div class="notes-editor__empty">Select a note or create a new one</div>`;
|
|
}
|
|
|
|
return html`
|
|
<div class="notes-editor">
|
|
<div class="notes-editor__header">
|
|
<input class="notes-editor__title-input" type="text"
|
|
value=${title} onInput=${handleTitleChange}
|
|
placeholder="Note title" />
|
|
<div class="notes-editor__actions">
|
|
<span class=${dirty ? 'notes-saved notes-saved--dirty' : 'notes-saved'}>
|
|
${saving ? 'Saving…' : (dirty ? 'Unsaved' : 'Saved')}
|
|
</span>
|
|
<button class="notes-toggle ${preview ? 'notes-toggle--active' : ''}"
|
|
onClick=${() => setPreview(!preview)}>
|
|
${preview ? 'Edit' : 'Preview'}
|
|
</button>
|
|
<button class="notes-btn" onClick=${handlePin}
|
|
title=${note.pinned ? 'Unpin' : 'Pin'}>
|
|
${note.pinned ? '📌' : '📍'}
|
|
</button>
|
|
<button class="notes-btn notes-btn--danger" onClick=${handleArchive}
|
|
title="Archive">🗑</button>
|
|
</div>
|
|
</div>
|
|
<div class="notes-editor__body">
|
|
${preview
|
|
? html`<div class="notes-preview" dangerouslySetInnerHTML=${{ __html: previewHtml }} />`
|
|
: html`<textarea class="notes-editor__textarea" ref=${textareaRef}
|
|
value=${body} onInput=${handleBodyChange}
|
|
onKeyDown=${handleKeyDown}
|
|
placeholder="Start writing in Markdown…" />`
|
|
}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════
|
|
// NotesApp — root component
|
|
// ═══════════════════════════════════════════
|
|
|
|
function NotesApp() {
|
|
var [notes, setNotes] = useState([]);
|
|
var [loading, setLoading] = useState(true);
|
|
var [activeId, setActiveId] = useState(null);
|
|
var [activeNote, setActiveNote] = useState(null);
|
|
var [searchTerm, setSearchTerm] = useState('');
|
|
var [stats, setStats] = useState(null);
|
|
|
|
// ── Load note list ────────────────────────
|
|
var loadNotes = useCallback(async function() {
|
|
try {
|
|
var res;
|
|
if (searchTerm.trim()) {
|
|
res = await api.get('/search?q=' + encodeURIComponent(searchTerm.trim()));
|
|
} else {
|
|
res = await api.get('/notes');
|
|
}
|
|
var items = (res && res.data) || res || [];
|
|
if (!Array.isArray(items)) items = [];
|
|
// sort: pinned first, then by updated_at desc
|
|
items.sort(function(a, b) {
|
|
if (a.pinned !== b.pinned) return b.pinned - a.pinned;
|
|
return (b.updated_at || b.created_at || '').localeCompare(a.updated_at || a.created_at || '');
|
|
});
|
|
setNotes(items);
|
|
} catch (e) {
|
|
console.error('Load notes failed:', e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [searchTerm]);
|
|
|
|
// ── Load single note (full body) ──────────
|
|
var loadNote = useCallback(async function(id) {
|
|
if (!id) { setActiveNote(null); return; }
|
|
try {
|
|
var note = await api.get('/notes/' + id);
|
|
setActiveNote(note);
|
|
} catch (e) {
|
|
console.error('Load note failed:', e);
|
|
setActiveNote(null);
|
|
}
|
|
}, []);
|
|
|
|
// ── Load stats ────────────────────────────
|
|
var loadStats = useCallback(async function() {
|
|
try {
|
|
var s = await api.get('/stats');
|
|
setStats(s);
|
|
} catch (e) { /* ignore */ }
|
|
}, []);
|
|
|
|
useEffect(function() { loadNotes(); loadStats(); }, [loadNotes]);
|
|
|
|
// select note
|
|
function handleSelect(id) {
|
|
setActiveId(id);
|
|
loadNote(id);
|
|
}
|
|
|
|
// ── Create note ───────────────────────────
|
|
async function handleNew() {
|
|
try {
|
|
var note = await api.post('/notes', { title: 'Untitled', body: '' });
|
|
if (note && note.id) {
|
|
setActiveId(note.id);
|
|
loadNote(note.id);
|
|
loadNotes();
|
|
loadStats();
|
|
}
|
|
} catch (e) {
|
|
console.error('Create failed:', e);
|
|
}
|
|
}
|
|
|
|
// ── Refresh after save ────────────────────
|
|
function handleRefresh() {
|
|
loadNotes();
|
|
if (activeId) loadNote(activeId);
|
|
loadStats();
|
|
}
|
|
|
|
// ── After delete ──────────────────────────
|
|
function handleDelete() {
|
|
setActiveId(null);
|
|
setActiveNote(null);
|
|
loadNotes();
|
|
loadStats();
|
|
}
|
|
|
|
// ── Search ────────────────────────────────
|
|
function handleSearch(e) {
|
|
var val = e.target.value;
|
|
setSearchTerm(val);
|
|
debounce('search', function() { loadNotes(); }, 300);
|
|
}
|
|
|
|
return html`
|
|
<${Topbar} title="Notes">
|
|
<${Button} variant="primary" size="sm" onClick=${handleNew}>+ New Note<//>
|
|
<//>
|
|
<div class="notes-app">
|
|
<div class="notes-sidebar">
|
|
<div class="notes-sidebar__header">
|
|
<span class="notes-sidebar__title">Notes</span>
|
|
${stats && html`<span class="notes-sidebar__count">${stats.total}</span>`}
|
|
</div>
|
|
<div class="notes-search">
|
|
<input type="text" placeholder="Search notes…"
|
|
value=${searchTerm} onInput=${handleSearch} />
|
|
</div>
|
|
<div class="notes-list">
|
|
${loading && html`<div class="notes-list__loading"><${Spinner} size="md" /></div>`}
|
|
${!loading && notes.length === 0 && html`
|
|
<div class="notes-list__empty">
|
|
${searchTerm ? 'No matching notes' : 'No notes yet. Click + New Note to start.'}
|
|
</div>
|
|
`}
|
|
${!loading && notes.map(function(n) {
|
|
return html`
|
|
<${NoteCard} key=${n.id} note=${n}
|
|
active=${n.id === activeId}
|
|
onClick=${() => handleSelect(n.id)} />
|
|
`;
|
|
})}
|
|
</div>
|
|
</div>
|
|
<${EditorPane} note=${activeNote}
|
|
onSave=${handleRefresh}
|
|
onDelete=${handleDelete}
|
|
onRefresh=${handleRefresh} />
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ── Mount ──────────────────────────────────
|
|
render(html`<${NotesApp} />`, mount);
|
|
|
|
})();
|