Stage 4: restore the modern tree into app/skins/shadlike/

Both UIs now live side by side. The 18 modern component files come straight from `git show main:<path>` — recovered, not rewritten, which is possible because main's tip IS the merge base of this branch. There is no title-bar among them: that component is win7-only, since the modern skin defers to the native window frame. Their imports were rewritten to @core the same way stage 1 did, leaving only skin-internal relative imports behind. Added skins/shadlike/index.ts exporting SHAD_ROOTS with the same shape as SEVEN_ROOTS, so main.ts can select a tree without knowing either skin's internals. Restored the skin axis in core/platform.ts, deleted in fe028a9 and needed again by the modern tree: __APP_SKIN on the Window global, APP_SKIN, IS_WIN7_CHROME, and IS_MAC_CHROME = IS_MAC && !IS_WIN7_CHROME. That last one is what reserves pl-24 for the macOS traffic lights in the fused hiddenInset header — and correctly stops reserving it under win7, where titleBarStyle 'hidden' removes the traffic lights entirely. The tree is not reachable yet; the build is the gate. I checked that the gate is real rather than assuming it: injecting a type error into an unreferenced shadlike file does fail `bun run build:ui`, so ngtsc type-checks the whole program including components nothing imports. Without that check, "the build passes" would have proven nothing about 18 files no one references. win7 remains pixel-identical to the pre-refactor baseline. Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-16 04:56:20 +02:00
parent b35c30d5ab
commit bb97e5418f
20 changed files with 3626 additions and 0 deletions
@@ -0,0 +1,271 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { I18nService } from '@core/i18n.service';
+import type { SavedConnection, Stack } from '@shared/types';
+import { ConnectionsService } from '@core/connections.service';
+import { ConfirmDialog } from '../dialogs/confirm-dialog';
+import { PromptDialog } from '../dialogs/prompt-dialog';
+import { DialogsService } from '@core/dialogs.service';
+import { blockNativeContextMenu, IS_MAC_CHROME } from '@core/platform';
+import { RpcService } from '@core/rpc.service';
+import { SettingsService } from '@core/settings.service';
+import { Toasts } from '../toasts/toasts';
+
+interface Draft {
+  id: string;
+  name: string;
+  stackId: string | null;
+  host: string;
+  port: number;
+  username: string;
+  authKind: 'password' | 'key';
+  password: string;
+  privateKeyPath: string;
+  passphrase: string;
+  initialPath: string;
+  localDir: string;
+}
+
+function toDraft(c: SavedConnection): Draft {
+  return {
+    id: c.id,
+    name: c.name,
+    stackId: c.stackId,
+    host: c.host,
+    port: c.port,
+    username: c.username,
+    // agent auth only exists on ~/.ssh/config hosts, which never reach this form
+    authKind: c.auth.kind === 'password' ? 'password' : 'key',
+    password: c.auth.kind === 'password' ? c.auth.password : '',
+    privateKeyPath: c.auth.kind === 'key' ? c.auth.privateKeyPath : '',
+    passphrase: c.auth.kind === 'key' ? (c.auth.passphrase ?? '') : '',
+    initialPath: c.initialPath ?? '',
+    localDir: c.localDir ?? '',
+  };
+}
+
+function fromDraft(d: Draft): SavedConnection {
+  return {
+    id: d.id,
+    name: d.name.trim() || `${d.username}@${d.host}`,
+    stackId: d.stackId,
+    host: d.host.trim(),
+    port: d.port || 22,
+    username: d.username.trim(),
+    auth:
+      d.authKind === 'password'
+        ? { kind: 'password', password: d.password }
+        : {
+            kind: 'key',
+            privateKeyPath: d.privateKeyPath.trim(),
+            ...(d.passphrase ? { passphrase: d.passphrase } : {}),
+          },
+    initialPath: d.initialPath.trim() || null,
+    localDir: d.localDir.trim() || null,
+  };
+}
+
+/**
+ * Root component of the connection-manager window (__APP_MODE === 'manager').
+ * Modal to the main window (enforced bun-side); connect/open-stack requests
+ * are executed by the MAIN window — this window never touches panels.
+ */
+@Component({
+  selector: 'app-root',
+  imports: [NgIcon, ConfirmDialog, PromptDialog, Toasts],
+  templateUrl: './connection-manager.html',
+  host: {
+    '(window:keydown.escape)': 'onEscape()',
+    '(window:contextmenu)': 'blockContextMenu($event)',
+  },
+})
+export class ConnectionManager {
+  readonly i18n = inject(I18nService);
+  readonly store = inject(ConnectionsService);
+  readonly dialogs = inject(DialogsService);
+  readonly isMacChrome = IS_MAC_CHROME;
+  private readonly rpc = inject(RpcService);
+  // 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);
+
+  readonly draft = signal<Draft | null>(null);
+  readonly busy = signal(false);
+  readonly importing = signal(false);
+  /** The More… section (local directory) in the edit form. */
+  readonly moreOpen = signal(false);
+  /** Connection id being dragged between stacks. */
+  readonly draggedId = signal<string | null>(null);
+  /** Highlighted drop target: a stack id, 'loose', or null. */
+  readonly dropTarget = signal<string | null>(null);
+
+  readonly valid = computed(() => {
+    const d = this.draft();
+    if (!d) return false;
+    if (!d.host.trim() || !d.username.trim()) return false;
+    if (d.authKind === 'key' && !d.privateKeyPath.trim()) return false;
+    return true;
+  });
+
+  patch<K extends keyof Draft>(key: K, value: Draft[K]): void {
+    this.draft.update((d) => (d ? { ...d, [key]: value } : d));
+  }
+
+  newConnection(): void {
+    this.moreOpen.set(false);
+    this.draft.set({
+      id: '',
+      name: '',
+      stackId: null,
+      host: '',
+      port: 22,
+      username: 'root',
+      authKind: 'password',
+      password: '',
+      privateKeyPath: '',
+      passphrase: '',
+      initialPath: '',
+      localDir: '',
+    });
+  }
+
+  edit(connection: SavedConnection): void {
+    this.draft.set(toDraft(connection));
+    this.moreOpen.set(!!connection.localDir);
+  }
+
+  close(): void {
+    void this.rpc.request.managerClose({});
+  }
+
+  onEscape(): void {
+    // in-window dialogs (confirm/prompt) handle their own Escape first
+    if (!this.dialogs.anyOpen) this.close();
+  }
+
+  blockContextMenu(event: Event): void {
+    blockNativeContextMenu(event);
+  }
+
+  async save(): Promise<string | null> {
+    const d = this.draft();
+    if (!d || !this.valid()) return null;
+    const id = await this.store.upsert(fromDraft(d));
+    if (id) this.patch('id', id);
+    return id;
+  }
+
+  async saveAndConnect(): Promise<void> {
+    if (!this.draft()) return;
+    this.busy.set(true);
+    try {
+      const id = await this.save();
+      if (!id) return;
+      // the main window connects (and this window closes); a failed connect
+      // surfaces as an error there
+      await this.rpc.request.managerConnect({ id });
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  deleteCurrent(): void {
+    const d = this.draft();
+    if (!d?.id) {
+      this.draft.set(null);
+      return;
+    }
+    this.dialogs.confirm.set({
+      title: this.i18n.t('connMgr.deleteConnectionTitle'),
+      body: this.i18n.t('connMgr.deleteConnectionBody', { name: d.name || d.host }),
+      confirmLabel: this.i18n.t('common.delete'),
+      destructive: true,
+      onConfirm: async () => {
+        await this.store.remove(d.id);
+        this.draft.set(null);
+      },
+    });
+  }
+
+  async pickKeyFile(): Promise<void> {
+    const res = await this.rpc.request.pickKeyFile({});
+    if (res.ok && res.path) this.patch('privateKeyPath', res.path);
+  }
+
+  async importWinScp(): Promise<void> {
+    this.importing.set(true);
+    try {
+      await this.store.importWinScp();
+    } finally {
+      this.importing.set(false);
+    }
+  }
+
+  // ---- stacks ----
+
+  openStack(stackId: string): void {
+    // opened as tabs in the main window; bun closes this window after
+    void this.rpc.request.managerOpenStack({ id: stackId });
+  }
+
+  toggleStack(stack: Stack): void {
+    void this.store.upsertStack({ ...stack, collapsed: !stack.collapsed });
+  }
+
+  newStack(): void {
+    this.dialogs.prompt.set({
+      title: this.i18n.t('connMgr.newStackTitle'),
+      placeholder: this.i18n.t('connMgr.newStackPrompt'),
+      confirmLabel: this.i18n.t('fileActions.createConfirm'),
+      onConfirm: (name) => void this.store.upsertStack({ id: '', name }),
+    });
+  }
+
+  renameStack(stack: Stack): void {
+    this.dialogs.prompt.set({
+      title: this.i18n.t('connMgr.renameStackTitle'),
+      initial: stack.name,
+      confirmLabel: this.i18n.t('connMgr.renameStack'),
+      onConfirm: (name) => void this.store.upsertStack({ ...stack, name }),
+    });
+  }
+
+  deleteStack(stack: Stack): void {
+    this.dialogs.confirm.set({
+      title: this.i18n.t('connMgr.deleteStackTitle'),
+      body: this.i18n.t('connMgr.deleteStackBody', { name: stack.name }),
+      confirmLabel: this.i18n.t('common.delete'),
+      destructive: true,
+      onConfirm: () => void this.store.removeStack(stack.id),
+    });
+  }
+
+  // ---- drag & drop (move a connection between stacks / loose) ----
+
+  onDragStart(event: DragEvent, connection: SavedConnection): void {
+    this.draggedId.set(connection.id);
+    event.dataTransfer?.setData('text/plain', connection.id);
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+  }
+
+  onDragOver(event: DragEvent, target: string): void {
+    if (!this.draggedId()) return;
+    event.preventDefault();
+    this.dropTarget.set(target);
+  }
+
+  onDrop(event: DragEvent, stackId: string | null): void {
+    event.preventDefault();
+    const id = this.draggedId();
+    this.draggedId.set(null);
+    this.dropTarget.set(null);
+    const connection = this.store.connections().find((c) => c.id === id);
+    if (!connection || connection.stackId === stackId) return;
+    void this.store.upsert({ ...connection, stackId });
+  }
+
+  onDragEnd(): void {
+    this.draggedId.set(null);
+    this.dropTarget.set(null);
+  }
+}