Changeset 0.25.0 (#160)
This commit is contained in:
@@ -3,12 +3,27 @@
|
||||
Usage: {{template "chat-pane" dict "ID" "main"}}
|
||||
Creates mount points: {ID}ChatMessages, {ID}ChatInput, {ID}SendBtn, {ID}ModelSel
|
||||
ChatPane.create() in chat-pane.js binds to these IDs.
|
||||
|
||||
The header bar ({ID}ChatHeader) is hidden by default.
|
||||
Standalone panes (editor assist) show it for chat switching + model selection.
|
||||
*/}}
|
||||
{{define "chat-pane"}}
|
||||
<div class="chat-pane" id="{{.ID}}ChatPane">
|
||||
<div class="chat-pane-header" id="{{.ID}}ChatHeader" style="display:none;">
|
||||
<div class="chat-pane-header-left">
|
||||
<select class="chat-pane-chat-select" id="{{.ID}}ChatSelect" title="Switch chat">
|
||||
<option value="">New conversation</option>
|
||||
</select>
|
||||
<button class="chat-pane-new-btn" id="{{.ID}}ChatNewBtn" title="New chat">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="chat-pane-header-right">
|
||||
<div class="chat-pane-model-sel" id="{{.ID}}ModelSel"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-pane-messages" id="{{.ID}}ChatMessages"></div>
|
||||
<div class="chat-pane-input-bar">
|
||||
<div class="chat-pane-model-sel" id="{{.ID}}ModelSel"></div>
|
||||
<div class="chat-pane-input-wrap">
|
||||
<div class="chat-pane-input" id="{{.ID}}ChatInput"></div>
|
||||
<button class="chat-pane-send" id="{{.ID}}SendBtn" title="Send">
|
||||
|
||||
30
server/pages/templates/components/code-editor.html
Normal file
30
server/pages/templates/components/code-editor.html
Normal file
@@ -0,0 +1,30 @@
|
||||
{{/*
|
||||
Code Editor Component — tabbed CM6 editor with tab bar, save, and status bar.
|
||||
Usage: {{template "code-editor" dict "ID" "editor"}}
|
||||
Creates mount points: {ID}EditorTabs, {ID}EditorContent, {ID}EditorWelcome,
|
||||
{ID}EditorStatus, {ID}EditorStatusFile, {ID}EditorStatusLang, {ID}EditorStatusBranch.
|
||||
CodeEditor.create() in code-editor.js binds to these IDs.
|
||||
*/}}
|
||||
{{define "code-editor"}}
|
||||
<div class="code-editor" id="{{.ID}}CodeEditor">
|
||||
<div class="code-editor-tabs" id="{{.ID}}EditorTabs">
|
||||
{{/* Populated by CodeEditor.openFile() */}}
|
||||
</div>
|
||||
<div class="code-editor-content" id="{{.ID}}EditorContent">
|
||||
<div class="code-editor-welcome" id="{{.ID}}EditorWelcome">
|
||||
<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-3);">
|
||||
<div style="text-align:center;">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:0.12;display:inline-block;margin-bottom:10px;"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
|
||||
<p style="margin:0;font-size:14px;">Open a file to start editing</p>
|
||||
<p style="margin:6px 0 0;font-size:12px;">Select from the file tree or Ctrl+P</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-editor-statusbar" id="{{.ID}}EditorStatus">
|
||||
<span id="{{.ID}}EditorStatusFile"></span>
|
||||
<span id="{{.ID}}EditorStatusLang"></span>
|
||||
<span id="{{.ID}}EditorStatusBranch"></span>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
20
server/pages/templates/components/file-tree.html
Normal file
20
server/pages/templates/components/file-tree.html
Normal file
@@ -0,0 +1,20 @@
|
||||
{{/*
|
||||
File Tree Component — workspace file browser with directory expand/collapse.
|
||||
Usage: {{template "file-tree" dict "ID" "editor"}}
|
||||
Creates mount points: {ID}FileTree, {ID}TreeHeader, {ID}TreeItems, {ID}TreeNewFile.
|
||||
FileTree.create() in file-tree.js binds to these IDs.
|
||||
*/}}
|
||||
{{define "file-tree"}}
|
||||
<div class="file-tree" id="{{.ID}}FileTree">
|
||||
<div class="file-tree-header" id="{{.ID}}TreeHeader">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
||||
<span class="file-tree-title">Files</span>
|
||||
<button class="icon-btn" id="{{.ID}}TreeNewFile" title="New file">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="file-tree-items" id="{{.ID}}TreeItems">
|
||||
{{/* Populated by FileTree.refresh() */}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
19
server/pages/templates/components/model-selector.html
Normal file
19
server/pages/templates/components/model-selector.html
Normal file
@@ -0,0 +1,19 @@
|
||||
{{/*
|
||||
Model Selector Component — chat model + persona dropdown with capability badges.
|
||||
Usage: {{template "model-selector" dict "ID" ""}}
|
||||
With empty ID, generates existing IDs: modelDropdown, modelDropdownBtn, etc.
|
||||
With prefix: {{template "model-selector" dict "ID" "editor"}} → editorModelDropdown, etc.
|
||||
ModelSelector.create() in model-selector.js binds to these IDs.
|
||||
*/}}
|
||||
{{define "model-selector"}}
|
||||
<div id="{{.ID}}modelDropdown" class="model-dropdown">
|
||||
<button id="{{.ID}}modelDropdownBtn" class="model-dropdown-btn">
|
||||
<span id="{{.ID}}modelDropdownLabel" class="model-dropdown-label">Select model…</span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
<div id="{{.ID}}modelDropdownMenu" class="model-dropdown-menu">
|
||||
{{/* Populated by ModelSelector.update() */}}
|
||||
</div>
|
||||
</div>
|
||||
<span id="{{.ID}}modelCaps" class="model-caps"></span>
|
||||
{{end}}
|
||||
86
server/pages/templates/components/note-editor.html
Normal file
86
server/pages/templates/components/note-editor.html
Normal file
@@ -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}}
|
||||
40
server/pages/templates/components/user-menu.html
Normal file
40
server/pages/templates/components/user-menu.html
Normal file
@@ -0,0 +1,40 @@
|
||||
{{/*
|
||||
User Menu Component — reusable user avatar + flyout dropdown.
|
||||
Usage: {{template "user-menu" dict "ID" ""}}
|
||||
With empty ID, generates existing IDs: userMenuBtn, userAvatar, etc.
|
||||
With prefix: {{template "user-menu" dict "ID" "editor"}} → editorUserMenuBtn, etc.
|
||||
UserMenu.create() in user-menu.js binds to these IDs.
|
||||
*/}}
|
||||
{{define "user-menu"}}
|
||||
<div class="user-menu-wrap" id="{{.ID}}userMenuWrap">
|
||||
<button id="{{.ID}}userMenuBtn" class="user-btn">
|
||||
<div id="{{.ID}}userAvatar" class="user-avatar">
|
||||
<span id="{{.ID}}avatarLetter">?</span>
|
||||
</div>
|
||||
<span id="{{.ID}}userName" class="sb-label">User</span>
|
||||
</button>
|
||||
<div id="{{.ID}}userFlyout" class="user-flyout">
|
||||
<button id="{{.ID}}menuSettings" class="flyout-item">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
<button id="{{.ID}}menuAdmin" class="flyout-item" style="display:none;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
<span>Admin</span>
|
||||
</button>
|
||||
<button id="{{.ID}}menuTeamAdmin" class="flyout-item" style="display:none;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>Team Admin</span>
|
||||
</button>
|
||||
<button id="{{.ID}}menuDebug" class="flyout-item" style="display:none;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/><path d="M12 6V12L16 14"/></svg>
|
||||
<span>Debug Log</span>
|
||||
</button>
|
||||
<hr class="flyout-divider">
|
||||
<button id="{{.ID}}menuSignout" class="flyout-item flyout-danger">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||
<span>Sign Out</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user