Move settings into a standalone Settings window

The tab-bar popover had outgrown itself. Settings now open in their own native window (a fourth window kind, built like the connection manager but not modal): a sidebar with Appearance, Transfers, Editor, File list and About, holding every popover row plus the visible-columns choice. Each control is an ordinary settings save, so the other windows follow live while it stays open. The gear button in the tab bar, Ctrl+, and the macOS app menu's "Settings..." (Cmd+,) open it. On macOS Cmd+W arrives as the main window's close-tab menu action, so bun closes the focused Settings window first instead of a main-window tab. Co-Authored-By: Claude <noreply@anthropic.com>
2026-10-05 09:55:15 +02:00
parent f3bec7aeaf
commit 141d675bf7
28 changed files with 743 additions and 405 deletions
@@ -0,0 +1,105 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { BRANDING } from '@shared/branding';
+import { LOCALE_LABELS, SUPPORTED } from '@shared/i18n';
+import type { AccentTone } from '@shared/types';
+import { COLUMN_KEYS } from '@core/context-menu.service';
+import { I18nService } from '@core/i18n.service';
+import { blockNativeContextMenu, IS_MAC_CHROME } from '@core/platform';
+import { RpcService } from '@core/rpc.service';
+import { SettingsService } from '@core/settings.service';
+import { ShortcutsService } from '@core/shortcuts.service';
+
+const SECTIONS = ['appearance', 'transfers', 'editor', 'fileList', 'about'] as const;
+type Section = (typeof SECTIONS)[number];
+
+const THEMES = ['system', 'light', 'dark'] as const;
+const DARK_TONES = ['dark', 'darker'] as const;
+// Swatch colors are fixed mid-tones so every dot reads on both light and dark
+// pages (the live --primary values would vanish against one of them). Names are
+// translated via options.accentNames.<value>.
+const ACCENTS: readonly { value: AccentTone; swatch: string }[] = [
+  { value: 'graphite', swatch: 'oklch(0.552 0.016 285.9)' },
+  { value: 'blue', swatch: 'oklch(0.65 0.17 255)' },
+  { value: 'indigo', swatch: 'oklch(0.65 0.19 277)' },
+  { value: 'purple', swatch: 'oklch(0.65 0.17 305)' },
+  { value: 'rose', swatch: 'oklch(0.65 0.17 8)' },
+  { value: 'orange', swatch: 'oklch(0.68 0.17 50)' },
+  { value: 'green', swatch: 'oklch(0.65 0.15 150)' },
+  { value: 'teal', swatch: 'oklch(0.65 0.12 185)' },
+];
+const SPEED_UNITS = [
+  { value: 'MBps', label: 'MB/s' },
+  { value: 'Mbps', label: 'Mbps' },
+] as const;
+const TRANSFER_MODES = ['single', 'multi'] as const;
+const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
+
+/**
+ * Root of the Settings window (APP_MODE 'settings'). Every control is a plain
+ * SettingsService setter: the save goes to bun, which rebroadcasts it, so the
+ * other windows follow live while this one stays open.
+ */
+@Component({
+  selector: 'app-root',
+  imports: [NgIcon],
+  templateUrl: './settings-window.html',
+  host: {
+    '(window:keydown)': 'onWindowKeydown($event)',
+    '(window:contextmenu)': 'blockContextMenu($event)',
+  },
+})
+export class SettingsWindow {
+  readonly settings = inject(SettingsService);
+  readonly i18n = inject(I18nService);
+  private readonly rpc = inject(RpcService);
+  private readonly shortcuts = inject(ShortcutsService);
+
+  readonly isMacChrome = IS_MAC_CHROME;
+  readonly sections = SECTIONS;
+  readonly section = signal<Section>('appearance');
+  readonly localeOptions = SUPPORTED;
+  readonly localeLabels = LOCALE_LABELS;
+  readonly themes = THEMES;
+  readonly darkTones = DARK_TONES;
+  readonly accents = ACCENTS;
+  readonly speedUnits = SPEED_UNITS;
+  readonly transferModes = TRANSFER_MODES;
+  readonly concurrencyChoices = CONCURRENCY_CHOICES;
+  readonly columnKeys = COLUMN_KEYS;
+  readonly appName = BRANDING.appName;
+  readonly buildLabel = BRANDING.buildLabel;
+  /** "100%" for the stepper readout; the value itself lives in settings. */
+  readonly scalePercent = computed(() => `${Math.round(this.settings.uiScale() * 100)}%`);
+
+  /** "Visual Studio Code.app" -> "Visual Studio Code"; empty -> system default. */
+  editorAppName(): string {
+    const path = this.settings.editorApp();
+    if (!path) return this.i18n.t('options.systemDefault');
+    const base = path.split('/').filter(Boolean).pop() ?? path;
+    return base.replace(/\.app$/i, '');
+  }
+
+  async pickEditorApp(): Promise<void> {
+    const res = await this.rpc.request.pickEditorApp({});
+    if (res.ok && res.path) this.settings.setEditorApp(res.path);
+  }
+
+  showAbout(): void {
+    void this.rpc.request.showAbout({});
+  }
+
+  /** Any-window shortcuts (interface scale); ⌘W arrives as a menu action bun-side. */
+  onWindowKeydown(event: KeyboardEvent): void {
+    const match = this.shortcuts.resolve(event, 'settings');
+    if (!match || this.shortcuts.isTypingTarget(event)) return;
+    event.preventDefault();
+    if (match.id === 'scale-up') this.settings.setUiScale(this.settings.uiScale() + 0.1);
+    else if (match.id === 'scale-down') this.settings.setUiScale(this.settings.uiScale() - 0.1);
+    else if (match.id === 'scale-reset') this.settings.setUiScale(1);
+  }
+
+  blockContextMenu(event: Event): void {
+    blockNativeContextMenu(event);
+  }
+}