Stage 2: move the win7 component tree into app/skins/7like/

All 14 components (including title-bar/, which has no modern counterpart) move under app/skins/7like/. git records every one as a rename — no content changed except main.ts. The @core alias from stage 1 paid off exactly as intended: not one of the 67 service imports needed touching despite every file changing depth. The only relative imports left inside the tree are skin-internal (app -> its dialogs, connection-manager -> title-bar), and those survived because the move preserved their relative structure. Added skins/7like/index.ts exporting SEVEN_ROOTS { main, manager, editor }. Every skin will export that same shape, so main.ts can pick a tree by skin and then a root by APP_MODE without knowing either skin's internals. main.ts selects from that barrel now, with the second axis still hardcoded until the shadlike tree lands. Verified: tsc clean, build:ui clean, opaque interior pixel-identical to the pre-refactor baseline. That last check also proves Tailwind still scans the templates from their new skins/** paths — a silent utility purge would have collapsed the layout rather than reproducing it exactly. The three structural 7.css contracts that a careless move breaks silently are intact by construction, since no markup changed: app-title-bar is still a direct child of .window.w7-frame, nothing new nests inside menu[role=tablist], and the context menu still emits ul[role=menu] > li[role=menuitem] > button. Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-16 04:50:53 +02:00
parent 17bb1a14fb
commit 39e019af9f
21 changed files with 21 additions and 4 deletions
@@ -0,0 +1,81 @@
+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 -->
+      <!-- w7-flat: this is a text toggle, not a push button. Without it 7.css
+           paints the full Aero slab and the status line reads as a stray
+           bordered button sitting in the status bar. -->
+      <button
+        (click)="transfers.expanded.set(!transfers.expanded())"
+        class="w7-flat 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())}` : '';
+  }
+}