Changeset 0.25.0 (#160)

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

@@ -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}}