feat(settings): move editor live preview near appearance controls

Closes #4346

apps/desktop/src/components/editor/EditorSettingsDialog.vue

@@ -3902,6 +3902,14 @@ onUnmounted(() => {
                 </div>
               </div>
 
+              <!-- Live Preview -->
+              <div class="space-y-2">
+                <Label>{{ t("settings.preview") }}</Label>
+                <div class="rounded-md border overflow-auto max-w-full" :class="editTheme === 'vscode-light' || editTheme === 'duotone-light' || editTheme === 'xcode' ? 'border-border' : 'border-border/50'">
+                  <div ref="previewRef" style="min-width: 100%" />
+                </div>
+              </div>
+
               <Separator />
 
               <div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
@@ -4229,16 +4237,6 @@ onUnmounted(() => {
                   </div>
                 </div>
               </div>
-
-              <Separator />
-
-              <!-- Live Preview -->
-              <div class="space-y-2">
-                <Label>{{ t("settings.preview") }}</Label>
-                <div class="rounded-md border overflow-auto max-w-full" :class="editTheme === 'vscode-light' || editTheme === 'duotone-light' || editTheme === 'xcode' ? 'border-border' : 'border-border/50'">
-                  <div ref="previewRef" style="min-width: 100%" />
-                </div>
-              </div>
             </section>
 
             <section v-else-if="activeSettingsTab === 'formatter'" data-settings-search-id="formatter" :class="['flex flex-col gap-5 py-2', settingsSearchTargetClass('formatter')]">

apps/desktop/src/components/editor/__tests__/EditorSettingsDialog.previewPosition.spec.ts

@@ -0,0 +1,31 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const dialogSource = readFileSync(new URL("../EditorSettingsDialog.vue", import.meta.url), "utf8");
+const editorSectionStart = dialogSource.indexOf(`activeSettingsTab === 'editor'`);
+const formatterSectionStart = dialogSource.indexOf(`activeSettingsTab === 'formatter'`, editorSectionStart);
+const editorSection = dialogSource.slice(editorSectionStart, formatterSectionStart);
+
+describe("EditorSettingsDialog live preview placement", () => {
+  it("renders one preview after the appearance controls and before behavior settings", () => {
+    const fontFamily = editorSection.indexOf('t("settings.fontFamily")');
+    const theme = editorSection.indexOf('t("settings.theme")');
+    const fontSize = editorSection.indexOf('t("settings.fontSize")');
+    const preview = editorSection.indexOf('ref="previewRef"');
+    const executeMode = editorSection.indexOf("executeModeLabel");
+
+    expect(editorSectionStart).toBeGreaterThanOrEqual(0);
+    expect(formatterSectionStart).toBeGreaterThan(editorSectionStart);
+    expect(fontFamily).toBeGreaterThanOrEqual(0);
+    expect(theme).toBeGreaterThan(fontFamily);
+    expect(fontSize).toBeGreaterThan(theme);
+    expect(preview).toBeGreaterThan(fontSize);
+    expect(preview).toBeLessThan(executeMode);
+    expect(editorSection.match(/ref="previewRef"/g)).toHaveLength(1);
+  });
+
+  it("keeps the preview lifecycle tied to the same template ref", () => {
+    expect(dialogSource).toContain("watch(previewRef, async (el) => {");
+    expect(dialogSource).toContain("cleanupPreviewEditor();");
+  });
+});