miniSCP/ui/src/app/skins/7like/status-bar/status-bar.ts

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-[0.6875rem] 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())}` : '';
  }
}