experiments in a post-browser web
10
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(tags): add vim status/command bar to embedded editor

+67
+19
extensions/tags/home.css
··· 490 490 overflow: auto; 491 491 } 492 492 493 + /* Vim status line below embedded editor */ 494 + .detail-editor-status-line { 495 + border-radius: 0 0 8px 8px; 496 + overflow: hidden; 497 + } 498 + 499 + .detail-editor-status-line .vim-status-line { 500 + border-radius: 0 0 8px 8px; 501 + } 502 + 503 + /* When vim status line is active, flatten bottom corners of the editor */ 504 + .detail-editor-container.has-vim-status { 505 + border-radius: 8px 8px 0 0; 506 + } 507 + 508 + .detail-editor-container.has-vim-status .cm-editor { 509 + border-radius: 8px 8px 0 0; 510 + } 511 + 493 512 /* Detail sections (tags) */ 494 513 .detail-section { 495 514 margin-bottom: 16px;
+48
extensions/tags/home.js
··· 12 12 */ 13 13 14 14 import * as CodeMirror from 'peek://extensions/editor/codemirror.js'; 15 + import { StatusLine } from 'peek://extensions/editor/status-line.js'; 15 16 const { getCM, Vim } = CodeMirror; 16 17 17 18 const api = window.app; ··· 92 93 93 94 // Embedded editor state 94 95 let embeddedEditor = null; // CodeMirror EditorView instance 96 + let embeddedStatusLine = null; // StatusLine instance for vim status bar 95 97 let editorSaveTimer = null; 96 98 let editorSaveStatus = 'saved'; // 'saved' | 'saving' | 'unsaved' 97 99 const EDITOR_AUTOSAVE_DELAY_MS = 1500; ··· 393 395 await loadEditorVimPreference(); 394 396 if (embeddedEditor) { 395 397 CodeMirror.setVimMode(embeddedEditor, editorVimMode); 398 + // Show/hide status line based on vim mode 399 + if (embeddedStatusLine) { 400 + const editorContainer = document.querySelector('.detail-editor-container'); 401 + if (editorVimMode) { 402 + embeddedStatusLine.show(); 403 + embeddedStatusLine.updateMode('normal'); 404 + editorContainer?.classList.add('has-vim-status'); 405 + } else { 406 + embeddedStatusLine.hide(); 407 + editorContainer?.classList.remove('has-vim-status'); 408 + } 409 + } 396 410 debug && console.log('[tags] Updated embedded editor vimMode:', editorVimMode); 397 411 } 398 412 }, api.scopes.GLOBAL); ··· 1032 1046 // Load vim mode preference from editor extension before creating editor 1033 1047 await loadEditorVimPreference(); 1034 1048 1049 + // Create status line container below the editor 1050 + const statusLineContainer = document.createElement('div'); 1051 + statusLineContainer.className = 'detail-editor-status-line'; 1052 + container.after(statusLineContainer); 1053 + 1054 + // Create status line (vim status bar) 1055 + embeddedStatusLine = new StatusLine({ container: statusLineContainer }); 1056 + if (editorVimMode) { 1057 + container.classList.add('has-vim-status'); 1058 + } else { 1059 + embeddedStatusLine.hide(); 1060 + } 1061 + 1035 1062 embeddedEditor = CodeMirror.createEditor({ 1036 1063 parent: container, 1037 1064 content: item.content || '', ··· 1040 1067 onChange: (content) => { 1041 1068 scheduleEditorAutosave(content); 1042 1069 }, 1070 + onSelectionChange: (line, col) => { 1071 + if (embeddedStatusLine) { 1072 + embeddedStatusLine.updatePosition(line, col); 1073 + } 1074 + }, 1075 + onVimModeChange: (mode) => { 1076 + if (embeddedStatusLine && editorVimMode) { 1077 + embeddedStatusLine.updateMode(mode); 1078 + } 1079 + }, 1043 1080 }); 1044 1081 1045 1082 editorSaveStatus = 'saved'; ··· 1058 1095 if (editorSaveTimer) { 1059 1096 clearTimeout(editorSaveTimer); 1060 1097 editorSaveTimer = null; 1098 + } 1099 + 1100 + if (embeddedStatusLine) { 1101 + embeddedStatusLine.destroy(); 1102 + embeddedStatusLine = null; 1103 + } 1104 + 1105 + // Remove the status line container element if it exists 1106 + const statusLineEl = document.querySelector('.detail-editor-status-line'); 1107 + if (statusLineEl) { 1108 + statusLineEl.remove(); 1061 1109 } 1062 1110 1063 1111 if (embeddedEditor) {