Stage 1: extract the skin-agnostic UI layer into app/core/

First step of splitting the UI into two skin trees. All 12 services plus platform.ts, format.ts, file-icons.ts, icons.ts and app.config.ts move to ui/src/app/core/ — the layer both skins will share. This is a pure move: git records all 17 as renames, and no file content changed beyond import paths. The premise holds because `git diff main...feat/7css-skin` touches none of these files — the service layer was already skin-agnostic, so there is nothing to untangle, only to relocate. Components now reach it through a new `@core/*` tsconfig alias rather than a relative path. That is deliberate and load-bearing for the next stage: skin components are about to move under app/skins/<skin>/ at varying depths, and an alias keeps every one of these 67 imports correct wherever its file ends up. `@shared/*` (the bun-side src/shared) already set the precedent. Intra-core imports needed no edits at all — every ./sibling reference among the moved files points at another moved file. Verified: tsc clean, `bun run build:ui` clean (AOT resolves every import and template symbol), and the running window's opaque interior is pixel-identical to a pre-refactor capture. Note on that comparison: the Aero frame and title bar do NOT compare equal between launches, and that is not a regression — .window.glass::before runs at opacity .6, so the chrome composites over whatever desktop is behind the window and shifts by a uniform ~8% brightness. The check therefore diffs the opaque interior (inset 30px sides, 80px top), where anything this refactor could break would show. Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-16 04:49:27 +02:00
parent ab0bb4ef6f
commit 17bb1a14fb
33 changed files with 74 additions and 68 deletions
@@ -0,0 +1,125 @@
+import { Injectable, inject, signal } from '@angular/core';
+import type { ColumnKey, EntryType } from '@shared/types';
+import { I18nService } from './i18n.service';
+import { IS_MAC, IS_WINDOWS } from './platform';
+import { RpcService } from './rpc.service';
+
+/** Optional list columns, in display order (Name is fixed). */
+const COLUMN_KEYS: ColumnKey[] = ['size', 'mtime', 'kind', 'rights', 'owner', 'group'];
+
+export interface MenuItem {
+  type?: 'separator';
+  label?: string;
+  /** Emitted verbatim to the action dispatcher (`ctx-*` / `col:*`). */
+  action?: string;
+  checked?: boolean;
+  tooltip?: string;
+  /** Shortcut hint, rendered right-aligned. */
+  accelerator?: string;
+}
+
+export interface MenuRequest {
+  x: number;
+  y: number;
+  items: MenuItem[];
+}
+
+export interface RowMenuContext {
+  path: string;
+  name: string;
+  type: EntryType;
+  isLocal: boolean;
+  hasEntry: boolean; // false = right-click on empty panel space
+}
+
+// PORTABILITY: shell-integration wording per OS (resolved at build time for locale)
+const revealKey = (): string =>
+  IS_MAC ? 'ctx.revealFinder' : IS_WINDOWS ? 'ctx.revealExplorer' : 'ctx.revealFileManager';
+const trashKey = (): string => (IS_WINDOWS ? 'ctx.moveToRecycleBin' : 'ctx.moveToTrash');
+
+/**
+ * Builds and opens the panel right-click menus. This used to be a native
+ * electrobun ContextMenu on the bun side, but `showContextMenu` is a documented
+ * no-op on Linux (electrobun's own dist/api/bun/proc/linux.md), which left the
+ * whole right-click surface dead there. The menu is plain HTML now — one code
+ * path on every platform — and still emits the exact same action strings, so
+ * the dispatcher in app.ts is unchanged.
+ */
+@Injectable({ providedIn: 'root' })
+export class ContextMenuService {
+  private readonly i18n = inject(I18nService);
+  private readonly rpc = inject(RpcService);
+
+  readonly request = signal<MenuRequest | null>(null);
+
+  open(event: MouseEvent, items: MenuItem[]): void {
+    this.request.set({ x: event.clientX, y: event.clientY, items });
+  }
+
+  close(): void {
+    this.request.set(null);
+  }
+
+  /** A picked item goes through the same dispatcher the app menubar uses. */
+  onPick(action: string): void {
+    this.rpc.emitMenuAction(action);
+  }
+
+  /** Row / empty-space menu for a file panel. */
+  rowItems(ctx: RowMenuContext): MenuItem[] {
+    const t = (key: string) => this.i18n.t(key);
+    const items: MenuItem[] = [];
+
+    if (!ctx.hasEntry || ctx.name === '..') {
+      // empty space (or the parent row): folder-level actions
+      items.push({ label: t('ctx.newFolder'), action: 'ctx-new-folder' });
+      items.push({ label: t('ctx.newFile'), action: 'ctx-new-file' });
+      items.push({ type: 'separator' });
+      items.push({ label: t('ctx.refresh'), action: 'ctx-refresh' });
+      if (ctx.isLocal) {
+        items.push({ type: 'separator' });
+        items.push({ label: t(revealKey()), action: 'ctx-reveal' });
+      }
+      return items;
+    }
+
+    items.push({ label: t('ctx.copyToOther'), action: 'ctx-copy' });
+    if (ctx.type === 'dir') {
+      items.push({ label: t('ctx.open'), action: 'ctx-open' });
+    } else {
+      if (ctx.isLocal) {
+        items.push({ label: t('ctx.open'), action: 'ctx-open-default', tooltip: t('ctx.openDefault') });
+      }
+      items.push({ label: t('ctx.edit'), action: 'ctx-edit', accelerator: 'F4' });
+    }
+    items.push({ label: t('ctx.rename'), action: 'ctx-rename' });
+    // chmod on Windows local files only flips the read-only bit — hide the lie
+    if (!(ctx.isLocal && IS_WINDOWS)) {
+      items.push({ label: t('ctx.permissions'), action: 'ctx-chmod' });
+    }
+    items.push({ type: 'separator' });
+    items.push({ label: t('ctx.copyPath'), action: 'ctx-copy-path' });
+    if (ctx.isLocal) {
+      items.push({ label: t(revealKey()), action: 'ctx-reveal' });
+    }
+    items.push({ type: 'separator' });
+    if (ctx.isLocal) {
+      items.push({
+        label: t(trashKey()),
+        action: 'ctx-trash',
+        ...(IS_MAC ? { tooltip: t('ctx.trashTooltip') } : {}),
+      });
+    }
+    items.push({ label: t('ctx.delete'), action: 'ctx-delete' });
+    return items;
+  }
+
+  /** Column picker for the list headers: checkable toggles per column. */
+  columnItems(visible: ColumnKey[]): MenuItem[] {
+    return COLUMN_KEYS.map((key) => ({
+      label: this.i18n.t(`columns.${key}`),
+      action: `col:${key}`,
+      checked: visible.includes(key),
+    }));
+  }
+}