Polish Editor toolbar actions
Move the Editor preview/source toggle into the left-side toolbar cluster so mode switching sits with editing controls. Add a dedicated right-side Save button and remove Save from the overflow menu, leaving the menu for rename and close actions. Cover the toolbar placement with a static regression test.
Alessandro committed
Jun 4, 2026 at 15:21 UTC
8c6157301926495ed4319776ef03a28505269016
2 files changed
+42
-9
plugins/_editor/webui/editor-panel.html
+17
-9
@@ -79,6 +79,16 @@
79
80
<div class="editor-toolbar" x-show="$store.editor.session" style="display: none;">
81
<div class="editor-toolbar-row">
82
+ <button
83
+ type="button"
84
+ class="editor-icon-button editor-mode-toggle"
85
+ :title="$store.editor.viewModeTitle()"
86
+ :aria-label="$store.editor.viewModeTitle()"
87
+ @click="$store.editor.toggleViewMode()"
88
+ >
89
+ <span class="material-symbols-outlined" aria-hidden="true" x-text="$store.editor.viewModeIcon()"></span>
90
+ </button>
91
+
92
<div class="editor-tool-group editor-source-tools" x-show="$store.editor.isMarkdown() && $store.editor.isSourceMode()" style="display: none;">
93
<button type="button" class="editor-icon-button" title="Undo" aria-label="Undo" :disabled="!$store.editor.canUndo()" @click="$store.editor.undo()">
94
<span class="material-symbols-outlined">undo</span>
@@ -127,12 +137,14 @@
137
138
<button
139
type="button"
130
- class="editor-icon-button editor-mode-toggle"
131
- :title="$store.editor.viewModeTitle()"
132
- :aria-label="$store.editor.viewModeTitle()"
133
- @click="$store.editor.toggleViewMode()"
140
+ class="editor-icon-button editor-save-button"
141
+ :class="{ 'is-primary': $store.editor.dirty || $store.editor.saving }"
142
+ :title="$store.editor.saving ? 'Saving' : 'Save'"
143
+ :aria-label="$store.editor.saving ? 'Saving' : 'Save'"
144
+ :disabled="$store.editor.saving"
145
+ @click="$store.editor.save()"
146
>
135
- <span class="material-symbols-outlined" aria-hidden="true" x-text="$store.editor.viewModeIcon()"></span>
147
+ <span class="material-symbols-outlined" :class="{ spinning: $store.editor.saving }" x-text="$store.editor.saving ? 'progress_activity' : 'save'"></span>
148
</button>
149
150
<div class="editor-file-actions" x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false">
@@ -149,10 +161,6 @@
161
<span class="material-symbols-outlined">more_vert</span>
162
</button>
163
<div class="editor-new-menu editor-file-menu" role="menu" x-show="open" @click.stop>
152
- <button type="button" class="editor-new-menu-item" :class="{ 'is-emphasized': $store.editor.dirty }" role="menuitem" :disabled="$store.editor.saving" @click="open = false; $store.editor.save()">
153
- <span class="material-symbols-outlined" :class="{ spinning: $store.editor.saving }" x-text="$store.editor.saving ? 'progress_activity' : 'save'"></span>
154
- <span>Save</span>
155
- </button>
164
<button type="button" class="editor-new-menu-item" role="menuitem" :disabled="$store.editor.saving" @click="open = false; $store.editor.renameActiveFile()">
165
<span class="material-symbols-outlined" aria-hidden="true">edit</span>
166
<span>Rename</span>
tests/test_office_canvas_setup.py
+25
@@ -519,6 +519,31 @@ def test_editor_open_file_browser_prefers_context_home_before_workdir_fallback()
519
assert "workdirPath = response?.settings?.workdir_path || workdirPath;" in open_file_browser
520
521
522
+def test_editor_toolbar_places_preview_toggle_left_and_save_on_right():
523
+ editor_panel = read("plugins", "_editor", "webui", "editor-panel.html")
524
+ toolbar_start = editor_panel.index('<div class="editor-toolbar"')
525
+ toolbar_end = editor_panel.index('<div class="editor-search-bar"', toolbar_start)
526
+ toolbar = editor_panel[toolbar_start:toolbar_end]
527
+
528
+ mode_toggle = toolbar.index("editor-mode-toggle")
529
+ source_tools = toolbar.index("editor-source-tools")
530
+ preview_tools = toolbar.index("editor-preview-tools")
531
+ spacer = toolbar.index("editor-toolbar-spacer")
532
+ save_button = toolbar.index("editor-save-button")
533
+ file_actions = toolbar.index("editor-file-actions")
534
+ file_menu = toolbar.index("editor-file-menu")
535
+
536
+ assert mode_toggle < source_tools
537
+ assert mode_toggle < preview_tools
538
+ assert spacer < save_button < file_actions < file_menu
539
+ assert "@click=\"$store.editor.save()\"" in toolbar
540
+
541
+ file_menu_markup = toolbar[file_menu:]
542
+ assert "<span>Save</span>" not in file_menu_markup
543
+ assert "<span>Rename</span>" in file_menu_markup
544
+ assert "<span>Close File</span>" in file_menu_markup
545
+
546
+
547
def test_office_and_desktop_skills_are_rehomed_and_renamed():
548
office_skills = PROJECT_ROOT / "plugins" / "_office" / "skills"
549
desktop_skills = PROJECT_ROOT / "plugins" / "_desktop" / "skills"