87 lines
5.0 KiB
HTML
87 lines
5.0 KiB
HTML
{{/*
|
|
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}}
|