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,167 @@
+import {
+  Component,
+  ElementRef,
+  computed,
+  effect,
+  inject,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { ContextMenuService, type MenuItem } from '@core/context-menu.service';
+import { FocusService } from '@core/focus.service';
+
+/** Rough per-item metrics, used only to decide whether the menu must flip. */
+const ITEM_H = 26;
+const SEPARATOR_H = 7;
+const MENU_W = 224; // w-56
+const EDGE_GAP = 6;
+
+/**
+ * The panel right-click menu. Replaces electrobun's native ContextMenu, which
+ * is a no-op on Linux — see ContextMenuService for the why. Emits the same
+ * `ctx-*` / `col:*` action strings the native menu did.
+ */
+@Component({
+  selector: 'app-context-menu',
+  imports: [NgIcon],
+  template: `
+    @if (menu.request(); as req) {
+      <!-- click-outside catcher; mousedown so it beats the panel's own handlers -->
+      <div class="fixed inset-0 z-50" (mousedown)="close()" (contextmenu)="onBackdropContext($event)"></div>
+      <div
+        #menuEl
+        role="menu"
+        tabindex="-1"
+        (keydown)="onKeydown($event)"
+        [style.left.px]="position().x"
+        [style.top.px]="position().y"
+        class="fixed z-50 w-56 rounded-lg border border-border bg-card py-1 text-card-foreground shadow-xl outline-none"
+      >
+        @for (item of req.items; track $index) {
+          @if (item.type === 'separator') {
+            <div class="my-1 border-t border-border"></div>
+          } @else {
+            <button
+              type="button"
+              role="menuitem"
+              [title]="item.tooltip ?? ''"
+              [class.bg-accent]="$index === activeIndex()"
+              (mouseenter)="activeIndex.set($index)"
+              (click)="pick(item)"
+              class="flex w-full items-center gap-2 px-3 py-1 text-left text-(length:--path-font) hover:bg-accent"
+            >
+              <span class="w-3.5 shrink-0">
+                @if (item.checked) {
+                  <ng-icon name="mynaCheck" size="0.85rem" class="text-primary" />
+                }
+              </span>
+              <span class="flex-1 truncate">{{ item.label }}</span>
+              @if (item.accelerator) {
+                <span class="shrink-0 text-muted-foreground">{{ item.accelerator }}</span>
+              }
+            </button>
+          }
+        }
+      </div>
+    }
+  `,
+  // Closing on scroll/blur matches native menu behavior: the anchor row moves
+  // out from under a menu that would otherwise float over stale content.
+  host: {
+    '(window:blur)': 'close()',
+    '(window:resize)': 'close()',
+    '(document:scroll)': 'close()',
+  },
+})
+export class ContextMenu {
+  readonly menu = inject(ContextMenuService);
+  private readonly focus = inject(FocusService);
+  private readonly menuEl = viewChild<ElementRef<HTMLDivElement>>('menuEl');
+
+  readonly activeIndex = signal(-1);
+
+  /** Click point, flipped/clamped so the menu never overflows the viewport. */
+  readonly position = computed(() => {
+    const req = this.menu.request();
+    if (!req) return { x: 0, y: 0 };
+    const height =
+      req.items.reduce((sum, i) => sum + (i.type === 'separator' ? SEPARATOR_H : ITEM_H), 0) + 8;
+    const x =
+      req.x + MENU_W > window.innerWidth - EDGE_GAP
+        ? Math.max(EDGE_GAP, req.x - MENU_W)
+        : req.x;
+    const y =
+      req.y + height > window.innerHeight - EDGE_GAP
+        ? Math.max(EDGE_GAP, req.y - height)
+        : req.y;
+    return { x, y };
+  });
+
+  constructor() {
+    // Focus the menu once it exists so arrow keys / Escape reach it. Keyed on
+    // the viewChild signal, NOT on request(): under zoneless CD an effect can
+    // run before the @if has rendered the element.
+    effect(() => this.menuEl()?.nativeElement.focus());
+  }
+
+  close(): void {
+    if (!this.menu.request()) return;
+    this.menu.close();
+    this.activeIndex.set(-1); // a fresh menu starts with nothing highlighted
+    this.focus.bump();
+  }
+
+  pick(item: MenuItem): void {
+    if (!item.action) return;
+    const action = item.action;
+    this.close();
+    this.menu.onPick(action);
+  }
+
+  /** Right-clicking the backdrop closes rather than stacking a second menu. */
+  onBackdropContext(event: MouseEvent): void {
+    event.preventDefault();
+    this.close();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    const items = this.menu.request()?.items ?? [];
+    switch (event.key) {
+      case 'Escape':
+        event.preventDefault();
+        event.stopPropagation();
+        this.close();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.step(items, 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.step(items, -1);
+        break;
+      case 'Enter':
+      case ' ': {
+        event.preventDefault();
+        const item = items[this.activeIndex()];
+        if (item) this.pick(item);
+        break;
+      }
+    }
+  }
+
+  /** Move the highlight by one selectable item, skipping separators, wrapping. */
+  private step(items: MenuItem[], delta: number): void {
+    const count = items.length;
+    if (!count) return;
+    let index = this.activeIndex();
+    for (let hops = 0; hops < count; hops++) {
+      index = (index + delta + count) % count;
+      if (items[index].type !== 'separator') {
+        this.activeIndex.set(index);
+        return;
+      }
+    }
+  }
+}