128 lines
8.0 KiB
HTML
128 lines
8.0 KiB
HTML
{{/*
|
|
Editor surface — matches switchboard-prototype-editor.jsx.
|
|
IDE-like layout: topbar + file tree + tabs + code + chat pane.
|
|
editor-mode.js builds CodeMirror, file tree, etc.
|
|
*/}}
|
|
|
|
{{define "surface-editor"}}
|
|
<div class="surface-editor">
|
|
|
|
{{/* Top Bar */}}
|
|
<div class="editor-topbar">
|
|
<a href="{{.BasePath}}/" class="editor-topbar-back">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
|
|
Back
|
|
</a>
|
|
<div style="width:1px;height:18px;background:var(--border);"></div>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent);"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
<span style="font-size:13px;font-weight:600;" id="editorWorkspaceName">
|
|
{{if .Data}}{{.Data.WorkspaceName}}{{else}}Editor{{end}}
|
|
</span>
|
|
<div style="display:flex;align-items:center;gap:4px;background:var(--purple-dim);padding:2px 8px;border-radius:4px;">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" stroke-width="2"><circle cx="12" cy="18" r="3"/><circle cx="12" cy="6" r="3"/><line x1="12" y1="9" x2="12" y2="15"/></svg>
|
|
<span style="font-size:11px;font-weight:600;color:var(--purple);font-family:var(--mono);">main</span>
|
|
</div>
|
|
<div style="flex:1;"></div>
|
|
<button class="icon-btn" id="editorNewFileBtn" title="New File">
|
|
<svg width="14" height="14" 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>
|
|
<button class="icon-btn" id="editorRefreshBtn" title="Refresh">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
|
|
</button>
|
|
<button class="icon-btn" id="editorSearchBtn" title="Search">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
</button>
|
|
<div style="width:1px;height:18px;background:var(--border);"></div>
|
|
<button class="icon-btn" id="editorToggleTree" title="Toggle file tree">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
|
|
</button>
|
|
<button class="icon-btn" id="editorToggleChat" title="Toggle chat">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{/* Body: tree + editor + chat */}}
|
|
<div class="editor-body" id="editorBody">
|
|
{{/* File Tree */}}
|
|
<div class="editor-tree" id="editorFileTree">
|
|
<div class="editor-tree-header">
|
|
<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 style="font-size:11px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:0.4px;flex:1;">Files</span>
|
|
<button class="icon-btn" id="treeNewFileBtn" 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="editor-tree-files" id="editorTreeFiles">
|
|
{{/* Populated by editor-mode.js */}}
|
|
</div>
|
|
</div>
|
|
|
|
{{/* Main Editor Area */}}
|
|
<div class="editor-main" id="editorMain">
|
|
{{/* Tabs */}}
|
|
<div class="editor-tabs" id="editorTabs">
|
|
{{/* Populated by editor-mode.js */}}
|
|
</div>
|
|
|
|
{{/* Code Content */}}
|
|
<div class="editor-content" id="editorContent">
|
|
<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>
|
|
|
|
{{/* Status Bar */}}
|
|
<div class="editor-statusbar" id="editorStatusbar">
|
|
<span>Ready</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{/* Chat Pane (resizable) */}}
|
|
<div id="editorSplitHandle" style="width:5px;background:var(--border);cursor:col-resize;flex-shrink:0;display:none;"></div>
|
|
<div class="editor-chat" id="editorChatPane" style="display:none;">
|
|
<div class="editor-chat-header">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|
<span style="font-size:12px;font-weight:600;flex:1;">AI Chat</span>
|
|
<span class="badge badge-accent" id="editorChatModel">claude-sonnet-4-5</span>
|
|
</div>
|
|
<div class="editor-chat-messages" id="editorChatMessages">
|
|
{{/* Populated by editor-mode.js */}}
|
|
</div>
|
|
<div class="editor-chat-input">
|
|
<div style="display:flex;gap:8px;align-items:flex-end;">
|
|
<textarea id="editorChatInput" placeholder="Ask about this code…" rows="2"
|
|
style="flex:1;background:var(--input-bg,var(--bg));border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:8px;font-size:12px;font-family:inherit;outline:none;resize:none;"></textarea>
|
|
<button id="editorChatSendBtn" style="background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;">Send</button>
|
|
</div>
|
|
<div style="display:flex;gap:6px;margin-top:6px;font-size:10px;color:var(--text-3);">
|
|
<span id="editorChatContext">Context: none</span>
|
|
<span>·</span>
|
|
<span>Cmd+L to focus</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toastContainer" class="toast-container"></div>
|
|
{{end}}
|
|
|
|
{{/* CSS: consolidated into styles.css */}}
|
|
{{define "css-editor"}}
|
|
<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
|
|
{{end}}
|
|
|
|
{{/* Scripts */}}
|
|
{{define "scripts-editor"}}
|
|
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/marked.min.js"></script>
|
|
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/purify.min.js"></script>
|
|
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/codemirror/codemirror.bundle.js?v={{.Version}}" onerror="console.warn('[CM6] Bundle not available')"></script>
|
|
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
|
|
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/editor-mode.js?v={{.Version}}"></script>
|
|
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
|
|
{{end}}
|