Changeset 0.25.0 (#160)

server/pages/templates/components/note-editor.html

@@ -0,0 +1,86 @@
+{{/*
+    Note Editor Component — notes list + editor/reader with folders, search, backlinks.
+    Usage: {{template "note-editor" dict "ID" "main"}}
+    Creates mount points for list view, editor view, and graph view.
+    NoteEditor.create() in note-editor.js binds to these IDs.
+
+    When used in the notes surface (standalone), notes.js wires event listeners
+    and integrates with PanelRegistry. When used in the editor surface (tabbed pane),
+    NoteEditor.create() provides independent lifecycle and event wiring.
+*/}}
+{{define "note-editor"}}
+<div class="note-editor" id="{{.ID}}NoteEditor">
+    {{/* ── List View ───────────────────────── */}}
+    <div class="note-editor-list-view" id="{{.ID}}NotesListView">
+        <div class="notes-toolbar">
+            <button id="{{.ID}}NotesNewBtn" class="btn-small" title="New note">+ New</button>
+            <button id="{{.ID}}NotesTodayBtn" class="btn-small" title="Open daily note">📅 Today</button>
+            <button id="{{.ID}}NotesGraphBtn" class="btn-small" title="Note graph">🕸 Graph</button>
+            <button id="{{.ID}}NotesSelectModeBtn" class="btn-small" title="Select mode">☑ Select</button>
+        </div>
+        <div class="notes-search-row">
+            <input type="text" id="{{.ID}}NotesSearchInput" class="notes-search-input" placeholder="Search notes…" autocomplete="off">
+        </div>
+        <div class="notes-filter-row">
+            <select id="{{.ID}}NotesFolderFilter" class="notes-filter-select"><option value="">All folders</option></select>
+            <select id="{{.ID}}NotesSortSelect" class="notes-filter-select">
+                <option value="updated_desc">Last updated</option>
+                <option value="created_desc">Created</option>
+                <option value="alpha">Alphabetical</option>
+            </select>
+        </div>
+        <div id="{{.ID}}NotesList" class="notes-list"></div>
+        <div id="{{.ID}}NotesSelectionBar" class="notes-selection-bar" style="display:none;">
+            <label class="notes-select-all"><input type="checkbox" id="{{.ID}}NotesSelectAll"> All</label>
+            <span id="{{.ID}}NotesSelectedCount">0</span> selected
+            <button id="{{.ID}}NotesDeleteSelectedBtn" class="btn-small btn-danger">Delete</button>
+            <button id="{{.ID}}NotesCancelSelectBtn" class="btn-small">Cancel</button>
+        </div>
+    </div>
+
+    {{/* ── Editor View ─────────────────────── */}}
+    <div class="note-editor-editor-view" id="{{.ID}}NotesEditorView" style="display:none;">
+        <div class="notes-editor-header">
+            <button id="{{.ID}}NotesBackBtn" class="btn-small" title="Back to list">← Back</button>
+            <div style="flex:1"></div>
+            <button id="{{.ID}}NoteEditBtn" class="btn-small" style="display:none;">Edit</button>
+            <button id="{{.ID}}NotePreviewBtn" class="btn-small" style="display:none;">Preview</button>
+            <button id="{{.ID}}NoteCancelEditBtn" class="btn-small" style="display:none;">Cancel</button>
+            <button id="{{.ID}}NoteDeleteBtn" class="btn-small btn-danger" style="display:none;">Delete</button>
+            <button id="{{.ID}}NoteSaveBtn" class="btn-small btn-primary">Save</button>
+        </div>
+
+        {{/* Edit mode */}}
+        <div id="{{.ID}}NoteEditMode" class="notes-editor">
+            <input type="text" id="{{.ID}}NoteEditorTitle" class="notes-title-input" placeholder="Note title">
+            <div class="notes-meta-row">
+                <input type="text" id="{{.ID}}NoteEditorFolder" class="notes-folder-input" placeholder="Folder (e.g. work/project)">
+                <input type="text" id="{{.ID}}NoteEditorTags" class="notes-tags-input" placeholder="Tags (comma-separated)">
+            </div>
+            <div id="{{.ID}}NoteEditorContentContainer" class="notes-content-container">
+                <textarea id="{{.ID}}NoteEditorContent" rows="12" class="notes-content-input" placeholder="Write your note in markdown…"></textarea>
+            </div>
+        </div>
+
+        {{/* Read mode */}}
+        <div id="{{.ID}}NoteReadMode" style="display:none;">
+            <div class="notes-read-view">
+                <h3 id="{{.ID}}NoteReadTitle" class="note-read-title"></h3>
+                <div id="{{.ID}}NoteReadMeta" class="note-read-meta"></div>
+                <div id="{{.ID}}NoteReadContent" class="note-read-content msg-content"></div>
+            </div>
+        </div>
+
+        {{/* Backlinks */}}
+        <div id="{{.ID}}NoteBacklinks" class="note-backlinks" style="display:none;">
+            <div class="note-backlinks-header">
+                Backlinks <span id="{{.ID}}NoteBacklinksCount" class="badge">0</span>
+            </div>
+            <div id="{{.ID}}NoteBacklinksList" class="note-backlinks-list"></div>
+        </div>
+    </div>
+
+    {{/* ── Graph View ──────────────────────── */}}
+    <div class="note-editor-graph-view" id="{{.ID}}NotesGraphView" style="display:none;"></div>
+</div>
+{{end}}