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,78 @@
+import { Component, computed, inject } from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { I18nService } from '@core/i18n.service';
+import type { TransferSnapshot } from '@shared/types';
+import { formatSpeed } from '@core/format';
+import { PanelsService } from '@core/panels.service';
+import { SettingsService } from '@core/settings.service';
+import { TransfersService } from '@core/transfers.service';
+
+@Component({
+  selector: 'app-status-bar',
+  imports: [NgIcon],
+  template: `
+    <div
+      class="flex h-6 items-center justify-between gap-4 border-t border-border bg-chrome px-3 text-[11px] text-muted-foreground select-none"
+    >
+      <!-- transfers summary; click toggles the detailed list -->
+      <button
+        (click)="transfers.expanded.set(!transfers.expanded())"
+        class="flex min-w-0 items-center gap-1.5 hover:text-foreground"
+        [title]="i18n.t('transfer.showDetails')"
+      >
+        @if (transfers.currentJob(); as job) {
+          <ng-icon name="mynaSpinner" size="0.8rem" class="shrink-0 animate-spin text-primary" />
+          <span class="truncate">
+            {{ i18n.t('transfer.copying', { name: job.name, percent: percent(job), speed: speedSuffix(job) }) }}
+            @if (transfers.queuedCount(); as queued) {
+              · {{ i18n.t('transfer.queued', { count: queued }) }}
+            }
+          </span>
+        } @else if (transfers.failedJobs().length; as failed) {
+          <ng-icon name="mynaXCircle" size="0.8rem" class="shrink-0 text-destructive" />
+          <span class="text-destructive">
+            {{ i18n.t('transfer.failed', { count: failed }) }}
+          </span>
+        } @else if (transfers.hasJobs()) {
+          <ng-icon name="mynaCheckCircle" size="0.8rem" class="shrink-0 text-success" />
+          <span>{{ i18n.t('transfer.finished') }}</span>
+        } @else {
+          <span>{{ i18n.t('transfer.ready') }}</span>
+        }
+      </button>
+
+      <!-- active panel info -->
+      <div class="flex shrink-0 items-center gap-1.5">
+        <ng-icon
+          [name]="activePanel().sessionId() === 'local' ? 'mynaHardDrive' : 'mynaServers'"
+          size="0.8rem"
+          [class.text-primary]="activePanel().sessionId() !== 'local'"
+        />
+        <span class="max-w-56 truncate">
+          {{ activePanel().sessionId() === 'local' ? i18n.t('common.local') : activePanel().title() }}
+        </span>
+        <span>· {{ i18n.t('transfer.items', { count: activePanel().sorted().length }) }}</span>
+        @if (activePanel().selected().size; as count) {
+          <span>· {{ i18n.t('transfer.selected', { count }) }}</span>
+        }
+      </div>
+    </div>
+  `,
+})
+export class StatusBar {
+  readonly i18n = inject(I18nService);
+  readonly transfers = inject(TransfersService);
+  readonly panels = inject(PanelsService);
+  readonly settings = inject(SettingsService);
+  readonly activePanel = computed(() => this.panels.get(this.panels.activeSide()));
+
+  percent(job: TransferSnapshot): number {
+    if (!job.totalBytes) return 0;
+    return Math.min(100, Math.round((job.doneBytes / job.totalBytes) * 100));
+  }
+
+  speedSuffix(job: TransferSnapshot): string {
+    const speed = this.transfers.speeds().get(job.id);
+    return speed ? ` · ${formatSpeed(speed, this.settings.speedUnit())}` : '';
+  }
+}