Editor opens in native windows (one per file)

Real BrowserWindow per edited file with its own RPC instance, deduped by sessionId+path. The same Angular bundle boots an editor-only root via preload globals. Native close isn't cancellable in electrobun, so the editor mirrors its draft to bun; traffic-light closes get a native Save/Discard prompt after the fact, and failed saves park the draft in the edit-leftovers dir. In-window closes (Cmd+W, Close) use a styled prompt; the quit guard now also counts unsaved editors. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-13 22:36:11 +02:00
parent 70f3f2a2e6
commit 1652b9e298
18 changed files with 716 additions and 239 deletions
@@ -0,0 +1,192 @@
+import {
+  Component,
+  DOCUMENT,
+  ElementRef,
+  afterNextRender,
+  computed,
+  effect,
+  inject,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { EDITOR_CONTEXT, IS_MAC_CHROME } from '../platform';
+import { RpcService } from '../rpc.service';
+import { SettingsService } from '../settings.service';
+import { ToastService } from '../toast.service';
+import { Toasts } from '../toasts/toasts';
+
+/** Debounce for mirroring the draft to bun (the traffic-light-close safety net). */
+const DRAFT_DEBOUNCE_MS = 400;
+
+/**
+ * Root component of an editor window (window.__APP_MODE === 'editor').
+ *
+ * Deliberately injects only Rpc/Toast/Settings: main-window root services
+ * (PanelsService, ConnectionsService, TransfersService — and the dialogs that
+ * inject them) have constructor side effects like creating workspaces and
+ * loading connections that must not run here.
+ */
+@Component({
+  selector: 'app-root',
+  imports: [NgIcon, Toasts],
+  templateUrl: './editor-window.html',
+  host: { '(window:keydown)': 'onKeydown($event)', '(window:blur)': 'flushDraft()' },
+})
+export class EditorWindow {
+  readonly ctx = EDITOR_CONTEXT;
+  readonly isMacChrome = IS_MAC_CHROME;
+
+  readonly loading = signal(true);
+  readonly loadError = signal<string | null>(null);
+  readonly text = signal('');
+  readonly savedContent = signal('');
+  readonly dirty = computed(() => this.text() !== this.savedContent());
+  readonly saving = signal(false);
+  readonly closePrompt = signal(false);
+  readonly sessionDead = signal(false);
+
+  private readonly box = viewChild<ElementRef<HTMLTextAreaElement>>('box');
+  private readonly rpc = inject(RpcService);
+  private readonly toast = inject(ToastService);
+  private readonly document = inject(DOCUMENT);
+  // injected for its side effects: fetches settings and applies theme/accent/
+  // text-size data attributes to this window's document root
+  private readonly settings = inject(SettingsService);
+
+  private draftTimer: ReturnType<typeof setTimeout> | null = null;
+  private lastSentDirty = false;
+
+  constructor() {
+    const ctx = this.ctx;
+    if (!ctx) return; // opened outside the app (plain browser) — error card renders
+
+    const baseTitle = `${ctx.name} — ${ctx.sessionTitle}`;
+    effect(() => {
+      this.document.title = `${this.dirty() ? '• ' : ''}${baseTitle}`;
+    });
+
+    this.rpc.onEditorCloseRequest(() => this.requestClose());
+    this.rpc.onSessionClosed((event) => {
+      if (event.sessionId === ctx.sessionId) this.sessionDead.set(true);
+    });
+
+    afterNextRender(() => void this.load(ctx.sessionId, ctx.path));
+  }
+
+  private async load(sessionId: string, path: string): Promise<void> {
+    const res = await this.rpc.request.readFile({ sessionId, path });
+    if (!res.ok) {
+      this.loadError.set(res.error);
+      this.loading.set(false);
+      return;
+    }
+    this.savedContent.set(res.content);
+    this.text.set(res.content);
+    this.loading.set(false);
+    queueMicrotask(() => this.box()?.nativeElement.focus());
+  }
+
+  onInput(value: string): void {
+    this.text.set(value);
+    this.scheduleDraft();
+  }
+
+  // ---- draft mirror: bun holds the latest content for the native-close prompt ----
+
+  private scheduleDraft(): void {
+    if (this.dirty() !== this.lastSentDirty) {
+      // dirty flag flipped — tell bun immediately so the native title updates
+      this.flushDraft();
+      return;
+    }
+    if (this.draftTimer) clearTimeout(this.draftTimer);
+    this.draftTimer = setTimeout(() => this.flushDraft(), DRAFT_DEBOUNCE_MS);
+  }
+
+  flushDraft(): void {
+    if (!this.ctx || this.loading()) return;
+    if (this.draftTimer) {
+      clearTimeout(this.draftTimer);
+      this.draftTimer = null;
+    }
+    this.lastSentDirty = this.dirty();
+    this.rpc.send.editorState({ dirty: this.dirty(), content: this.text() });
+  }
+
+  // ---- save / close ----
+
+  async save(): Promise<boolean> {
+    if (!this.dirty() || this.saving()) return true;
+    const content = this.text();
+    this.saving.set(true);
+    try {
+      const res = await this.rpc.request.editorSave({ content });
+      if (!res.ok) {
+        this.toast.error(res.error);
+        return false;
+      }
+      this.savedContent.set(content);
+      this.lastSentDirty = false; // bun record already cleaned by the handler
+      this.toast.success(`Saved ${this.ctx!.name}`);
+      return true;
+    } finally {
+      this.saving.set(false);
+    }
+  }
+
+  /** ⌘W / Close button / bun's editorCloseRequest: prompt if dirty, else close. */
+  requestClose(): void {
+    if (this.dirty()) {
+      this.closePrompt.set(true);
+    } else {
+      void this.rpc.request.editorClose({});
+    }
+  }
+
+  async saveAndClose(): Promise<void> {
+    if (await this.save()) void this.rpc.request.editorClose({});
+  }
+
+  discardAndClose(): void {
+    void this.rpc.request.editorClose({});
+  }
+
+  cancelClose(): void {
+    this.closePrompt.set(false);
+    queueMicrotask(() => this.box()?.nativeElement.focus());
+  }
+
+  // ---- keyboard ----
+
+  onKeydown(event: KeyboardEvent): void {
+    const mod = event.metaKey || event.ctrlKey;
+    if (mod && event.key.toLowerCase() === 's') {
+      event.preventDefault();
+      void this.save();
+    } else if (mod && event.key.toLowerCase() === 'w') {
+      // reaches us on Windows/Linux; on macOS the app menu intercepts ⌘W and
+      // bun routes it back as editorCloseRequest
+      event.preventDefault();
+      this.requestClose();
+    } else if (event.key === 'Escape' && this.closePrompt()) {
+      event.preventDefault();
+      this.cancelClose();
+    } else if (event.key === 'Tab' && event.target === this.box()?.nativeElement) {
+      // keep Tab as an input character inside the editor
+      event.preventDefault();
+      this.insertTab();
+    }
+  }
+
+  private insertTab(): void {
+    const el = this.box()!.nativeElement;
+    // execCommand keeps the native undo stack intact where supported
+    if (!this.document.execCommand('insertText', false, '\t')) {
+      const { selectionStart, selectionEnd, value } = el;
+      el.value = `${value.slice(0, selectionStart)}\t${value.slice(selectionEnd)}`;
+      el.selectionStart = el.selectionEnd = selectionStart + 1;
+    }
+    this.onInput(el.value);
+  }
+}