jgamboaandClaude
f7f02083fe
The deleted win7 tree held a few behaviours the modern tree never got: - Context menu: the first ArrowUp in a fresh menu skipped the last item (Delete in the row menu, Disconnect in the tab menu) — stepping from -1 landed one short. The index math moves to core/menu-nav.ts stepIndex(), checked by menu-nav.spec.ts (bun test; verified to fail on the old logic). Items get ids and the menu exposes aria-activedescendant, so screen readers follow the arrow keys while focus stays on the menu. - Middle-click closes a tab, as in browsers. auxclick also fires for the right button, so only button 1 counts; closeWorkspace already refuses the last tab. A middle press is swallowed so WebView2 doesn't start autoscroll over the scrollable strip. The hover ✕ stays. - ARIA: the tab strip is a tablist of role=tab buttons with aria-selected (the in-tab ✕ is taken out of the a11y tree and tab order — Ctrl/Cmd+W and the tab menu remain the keyboard paths); transfer bars are progressbars with value and a name. Co-Authored-By: Claude <noreply@anthropic.com>
600 lines
26 KiB
TypeScript
600 lines
26 KiB
TypeScript
import { Component, ElementRef, computed, effect, inject, signal, viewChild } from '@angular/core';
|
||
import { NgIcon } from '@ng-icons/core';
|
||
import { BRANDING } from '@shared/branding';
|
||
import { LOCALE_LABELS, SUPPORTED } from '@shared/i18n';
|
||
import type { AccentTone } from '@shared/types';
|
||
import { ContextMenuService } from '@core/context-menu.service';
|
||
import { I18nService } from '@core/i18n.service';
|
||
import { PanelsService, type Workspace } from '@core/panels.service';
|
||
import { IS_MAC_CHROME, MOD_LABEL } from '@core/platform';
|
||
import { RpcService } from '@core/rpc.service';
|
||
import { SettingsService } from '@core/settings.service';
|
||
import { UpdaterService } from '@core/updater.service';
|
||
|
||
const THEMES = ['system', 'light', 'dark'] as const;
|
||
const DARK_TONES = ['dark', 'darker'] as const;
|
||
// Swatch colors are fixed mid-tones so every dot reads on both light and dark
|
||
// cards (the live --primary values would vanish against one of them). Names are
|
||
// translated via options.accentNames.<value>.
|
||
const ACCENTS: readonly { value: AccentTone; swatch: string }[] = [
|
||
{ value: 'graphite', swatch: 'oklch(0.552 0.016 285.9)' },
|
||
{ value: 'blue', swatch: 'oklch(0.65 0.17 255)' },
|
||
{ value: 'indigo', swatch: 'oklch(0.65 0.19 277)' },
|
||
{ value: 'purple', swatch: 'oklch(0.65 0.17 305)' },
|
||
{ value: 'rose', swatch: 'oklch(0.65 0.17 8)' },
|
||
{ value: 'orange', swatch: 'oklch(0.68 0.17 50)' },
|
||
{ value: 'green', swatch: 'oklch(0.65 0.15 150)' },
|
||
{ value: 'teal', swatch: 'oklch(0.65 0.12 185)' },
|
||
];
|
||
const SPEED_UNITS = [
|
||
{ value: 'MBps', label: 'MB/s' },
|
||
{ value: 'Mbps', label: 'Mbps' },
|
||
] as const;
|
||
const ICON_COLOR_MODES = ['plain', 'multi'] as const;
|
||
const TRANSFER_MODES = ['single', 'multi'] as const;
|
||
const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
|
||
|
||
@Component({
|
||
selector: 'app-tab-bar',
|
||
imports: [NgIcon],
|
||
template: `
|
||
<!-- On macOS this row IS the titlebar (hiddenInset): taller, padded past the
|
||
traffic lights, and draggable. Elsewhere it's a normal compact row. -->
|
||
<div
|
||
class="relative flex items-center gap-0.5 border-b border-border bg-chrome pr-1.5 electrobun-webkit-app-region-drag"
|
||
[class.h-10]="isMacChrome"
|
||
[class.pl-24]="isMacChrome"
|
||
[class.pl-1.5]="!isMacChrome"
|
||
[class.pt-1]="!isMacChrome"
|
||
>
|
||
<div
|
||
#tabScroll
|
||
role="tablist"
|
||
class="flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||
>
|
||
@for (ws of panels.workspaces(); track ws.id; let i = $index) {
|
||
<div
|
||
[attr.data-tab-id]="ws.id"
|
||
class="group relative flex max-w-52 shrink-0 items-center rounded-md electrobun-webkit-app-region-no-drag"
|
||
[class.bg-accent]="ws.id === panels.activeWorkspaceId()"
|
||
[class.opacity-50]="draggedId() === ws.id"
|
||
[style.box-shadow]="dropIndicatorShadow(i)"
|
||
(contextmenu)="onTabContextMenu($event, ws, i)"
|
||
(mousedown)="onTabMouseDown($event)"
|
||
(auxclick)="onAuxClick($event, ws.id)"
|
||
draggable="true"
|
||
(dragstart)="onDragStart($event, ws.id)"
|
||
(dragover)="onDragOver($event, i)"
|
||
(drop)="onDrop($event, i)"
|
||
(dragend)="onDragEnd()"
|
||
>
|
||
<button
|
||
role="tab"
|
||
[attr.aria-selected]="ws.id === panels.activeWorkspaceId()"
|
||
(click)="panels.setActiveWorkspace(ws.id)"
|
||
class="flex min-w-0 items-center gap-1.5 py-1.5 pr-1 pl-2.5 text-xs"
|
||
[class.text-foreground]="ws.id === panels.activeWorkspaceId()"
|
||
[class.text-muted-foreground]="ws.id !== panels.activeWorkspaceId()"
|
||
[title]="panels.workspaceName(ws)"
|
||
>
|
||
<ng-icon
|
||
[name]="panels.workspaceIsRemote(ws) ? 'mynaServers' : 'mynaHardDrive'"
|
||
size="0.85rem"
|
||
class="shrink-0"
|
||
[class.text-primary]="panels.workspaceIsRemote(ws)"
|
||
/>
|
||
<span class="truncate">{{ panels.workspaceName(ws) }}</span>
|
||
</button>
|
||
@if (panels.workspaces().length > 1) {
|
||
<button
|
||
(click)="close($event, ws.id)"
|
||
tabindex="-1"
|
||
aria-hidden="true"
|
||
[title]="i18n.t('tabBar.closeTab', { mod: modLabel })"
|
||
class="mr-1 grid size-4 shrink-0 place-items-center rounded text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-border hover:text-foreground"
|
||
>
|
||
<ng-icon name="mynaX" size="0.7rem" />
|
||
</button>
|
||
} @else {
|
||
<span class="mr-1 size-4 shrink-0"></span>
|
||
}
|
||
@if (ws.id === panels.activeWorkspaceId()) {
|
||
<div class="absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-primary"></div>
|
||
}
|
||
</div>
|
||
}
|
||
</div>
|
||
<button
|
||
(click)="panels.newWorkspace()"
|
||
[title]="i18n.t('tabBar.newTab', { mod: modLabel })"
|
||
class="ml-0.5 grid size-6 place-items-center rounded-md text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
|
||
>
|
||
<ng-icon name="mynaPlus" size=".8rem" />
|
||
</button>
|
||
|
||
<div class="flex-1"></div>
|
||
|
||
<!-- auto-update tool: one accent pill that announces the update, becomes its
|
||
own progress bar while downloading, then turns into "Restart to apply" -->
|
||
@if (updater.state() !== 'idle' && updater.state() !== 'error') {
|
||
<button
|
||
(click)="onUpdateClick()"
|
||
[disabled]="updater.state() === 'downloading'"
|
||
[title]="i18n.t('tabBar.updateTooltip', { version: updater.version() })"
|
||
class="relative mr-1 grid h-6 place-items-center overflow-hidden rounded-md px-2.5 text-[0.6875rem] font-medium bg-primary text-primary-foreground electrobun-webkit-app-region-no-drag hover:opacity-90 disabled:cursor-default"
|
||
>
|
||
@if (updater.state() === 'downloading') {
|
||
<span
|
||
class="absolute inset-y-0 left-0 bg-primary-foreground/25 transition-[width] duration-200"
|
||
[style.width.%]="updater.progress()"
|
||
></span>
|
||
}
|
||
<span class="relative flex items-center gap-1.5">
|
||
@switch (updater.state()) {
|
||
@case ('available') {
|
||
<ng-icon name="mynaDownload" size=".8rem" />{{ i18n.t('tabBar.update') }}
|
||
}
|
||
@case ('downloading') {
|
||
<ng-icon name="mynaSpinner" size=".8rem" class="animate-spin" />{{ i18n.t('tabBar.updating') }} {{ updater.progress() }}%
|
||
}
|
||
@case ('ready') {
|
||
<ng-icon name="mynaRefresh" size=".8rem" />{{ i18n.t('tabBar.restartToUpdate') }}
|
||
}
|
||
}
|
||
</span>
|
||
</button>
|
||
}
|
||
|
||
<!-- connection manager (own native window) -->
|
||
<button
|
||
(click)="openManager()"
|
||
[title]="i18n.t('tabBar.manageConnections')"
|
||
class="grid h-6 px-2 py-1 place-items-center rounded-md text-[0.6875rem] text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
|
||
>
|
||
<!-- <ng-icon name="mynaCog" size="0.9rem" /> -->
|
||
{{ i18n.t('tabBar.connections') }}
|
||
</button>
|
||
|
||
<!-- global options -->
|
||
<button
|
||
(click)="settingsOpen.set(!settingsOpen())"
|
||
[title]="i18n.t('tabBar.options')"
|
||
class="grid size-6 place-items-center rounded-md text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
|
||
>
|
||
<ng-icon name="mynaDots" size="1.5rem" />
|
||
</button>
|
||
|
||
@if (settingsOpen()) {
|
||
<div class="fixed inset-0 z-20" (click)="settingsOpen.set(false)"></div>
|
||
<div
|
||
class="absolute top-full right-1.5 z-30 mt-1 w-70 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-xl electrobun-webkit-app-region-no-drag"
|
||
>
|
||
<h3 class="text-xs font-semibold">{{ i18n.t('options.title') }}</h3>
|
||
|
||
<div class="mt-3 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.language') }}</span>
|
||
<select
|
||
(change)="settings.setLocale($any($event.target).value)"
|
||
class="h-7 rounded-md border border-input bg-background px-1.5 text-[0.6875rem] outline-none focus:ring-2 focus:ring-ring"
|
||
>
|
||
<option value="system" [selected]="settings.locale() === 'system'">
|
||
{{ i18n.t('options.system') }}
|
||
</option>
|
||
@for (loc of localeOptions; track loc) {
|
||
<option [value]="loc" [selected]="settings.locale() === loc">
|
||
{{ localeLabels[loc] }}
|
||
</option>
|
||
}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.theme.label') }}</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
@for (theme of themes; track theme) {
|
||
<button
|
||
(click)="settings.setTheme(theme)"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.theme() === theme"
|
||
[class.text-foreground]="settings.theme() === theme"
|
||
[class.text-muted-foreground]="settings.theme() !== theme"
|
||
>
|
||
{{ i18n.t('options.theme.' + theme) }}
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
@if (settings.effectiveDark()) {
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.tone.label') }}</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
@for (tone of darkTones; track tone) {
|
||
<button
|
||
(click)="settings.setDarkTone(tone)"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.darkTone() === tone"
|
||
[class.text-foreground]="settings.darkTone() === tone"
|
||
[class.text-muted-foreground]="settings.darkTone() !== tone"
|
||
>
|
||
{{ i18n.t('options.tone.' + tone) }}
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.accent.label') }}</span>
|
||
<div class="flex items-center gap-1.5">
|
||
@for (tone of accents; track tone.value) {
|
||
<button
|
||
(click)="settings.setAccent(tone.value)"
|
||
[title]="i18n.t('options.accentNames.' + tone.value)"
|
||
class="size-3 rounded-full border border-foreground/15"
|
||
[style.background-color]="tone.swatch"
|
||
[class.ring-2]="settings.accent() === tone.value"
|
||
[class.ring-foreground]="settings.accent() === tone.value"
|
||
[class.ring-offset-1]="settings.accent() === tone.value"
|
||
[class.ring-offset-card]="settings.accent() === tone.value"
|
||
></button>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.fileIcons.label') }}</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
@for (mode of iconColorModes; track mode) {
|
||
<button
|
||
(click)="settings.setIconColors(mode)"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.iconColors() === mode"
|
||
[class.text-foreground]="settings.iconColors() === mode"
|
||
[class.text-muted-foreground]="settings.iconColors() !== mode"
|
||
>
|
||
{{ i18n.t('options.fileIcons.' + mode) }}
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Interface scale: a continuous stepper, 50%..400% in 10-point
|
||
steps. One lever moves the whole UI (root font-size; everything
|
||
is rem), which is also why this popover itself grows with it. -->
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.interface.label') }}</span>
|
||
<div class="flex items-center rounded-md border border-border p-0.5">
|
||
<button
|
||
(click)="settings.setUiScale(settings.uiScale() - 0.1)"
|
||
[disabled]="settings.uiScale() <= 0.5"
|
||
[title]="i18n.t('options.interface.smaller')"
|
||
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
|
||
>
|
||
−
|
||
</button>
|
||
<button
|
||
(click)="settings.setUiScale(1)"
|
||
[title]="i18n.t('options.interface.reset')"
|
||
class="w-11 rounded px-1 py-0.5 text-center text-[0.6875rem] tabular-nums hover:bg-accent"
|
||
>
|
||
{{ scalePercent() }}
|
||
</button>
|
||
<button
|
||
(click)="settings.setUiScale(settings.uiScale() + 0.1)"
|
||
[disabled]="settings.uiScale() >= 4"
|
||
[title]="i18n.t('options.interface.larger')"
|
||
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.speedUnit.label') }}</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
@for (unit of speedUnits; track unit.value) {
|
||
<button
|
||
(click)="settings.setSpeedUnit(unit.value)"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.speedUnit() === unit.value"
|
||
[class.text-foreground]="settings.speedUnit() === unit.value"
|
||
[class.text-muted-foreground]="settings.speedUnit() !== unit.value"
|
||
>
|
||
{{ unit.label }}
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.transfers.label') }}</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
@for (mode of transferModes; track mode) {
|
||
<button
|
||
(click)="settings.setTransferMode(mode)"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.transferMode() === mode"
|
||
[class.text-foreground]="settings.transferMode() === mode"
|
||
[class.text-muted-foreground]="settings.transferMode() !== mode"
|
||
>
|
||
{{ i18n.t('options.transfers.' + mode) }}
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
@if (settings.transferMode() === 'multi') {
|
||
<div class="mt-2.5 flex items-center justify-between gap-2 pl-3">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.atOnce') }}</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
@for (count of concurrencyChoices; track count) {
|
||
<button
|
||
(click)="settings.setTransferConcurrency(count)"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem] tabular-nums"
|
||
[class.bg-accent]="settings.transferConcurrency() === count"
|
||
[class.text-foreground]="settings.transferConcurrency() === count"
|
||
[class.text-muted-foreground]="settings.transferConcurrency() !== count"
|
||
>
|
||
{{ count }}
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.editor.label') }}</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
<button
|
||
(click)="settings.setEditor('builtin')"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.editor() === 'builtin'"
|
||
[class.text-foreground]="settings.editor() === 'builtin'"
|
||
[class.text-muted-foreground]="settings.editor() !== 'builtin'"
|
||
>
|
||
{{ i18n.t('options.editor.builtin') }}
|
||
</button>
|
||
<button
|
||
(click)="settings.setEditor('custom')"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.editor() === 'custom'"
|
||
[class.text-foreground]="settings.editor() === 'custom'"
|
||
[class.text-muted-foreground]="settings.editor() !== 'custom'"
|
||
>
|
||
{{ i18n.t('options.editor.custom') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
@if (settings.editor() === 'custom') {
|
||
<div class="mt-2.5 flex items-center justify-between gap-2 pl-3">
|
||
<span class="min-w-0 truncate text-xs text-muted-foreground" [title]="settings.editorApp()">
|
||
{{ editorAppName() }}
|
||
</span>
|
||
<div class="flex shrink-0 items-center gap-1">
|
||
<button
|
||
(click)="pickEditorApp()"
|
||
class="rounded-md border border-border px-2 py-0.5 text-[0.6875rem] hover:bg-accent"
|
||
>
|
||
{{ i18n.t('common.choose') }}
|
||
</button>
|
||
@if (settings.editorApp()) {
|
||
<button
|
||
(click)="settings.setEditorApp('')"
|
||
[title]="i18n.t('options.resetDefault')"
|
||
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
|
||
>
|
||
<ng-icon name="mynaX" size="0.7rem" />
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ i18n.t('options.finishedTransfers.label') }}</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
<button
|
||
(click)="settings.setAutoClearCompleted(true)"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.autoClearCompleted()"
|
||
[class.text-foreground]="settings.autoClearCompleted()"
|
||
[class.text-muted-foreground]="!settings.autoClearCompleted()"
|
||
>
|
||
{{ i18n.t('options.finishedTransfers.autoClear') }}
|
||
</button>
|
||
<button
|
||
(click)="settings.setAutoClearCompleted(false)"
|
||
class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="!settings.autoClearCompleted()"
|
||
[class.text-foreground]="!settings.autoClearCompleted()"
|
||
[class.text-muted-foreground]="settings.autoClearCompleted()"
|
||
>
|
||
{{ i18n.t('options.finishedTransfers.keep') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Auto-refresh is always on for now. To expose a toggle, uncomment
|
||
the breadcrumbs in types.ts + settings.service, then this row:
|
||
<div class="mt-2.5 flex items-center justify-between gap-2">
|
||
<span class="text-xs text-muted-foreground">Auto-refresh</span>
|
||
<div class="flex rounded-md border border-border p-0.5">
|
||
<button (click)="settings.setAutoRefresh(true)" class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="settings.autoRefresh()"
|
||
[class.text-foreground]="settings.autoRefresh()"
|
||
[class.text-muted-foreground]="!settings.autoRefresh()">On</button>
|
||
<button (click)="settings.setAutoRefresh(false)" class="rounded px-2 py-0.5 text-[0.6875rem]"
|
||
[class.bg-accent]="!settings.autoRefresh()"
|
||
[class.text-foreground]="!settings.autoRefresh()"
|
||
[class.text-muted-foreground]="settings.autoRefresh()">Off</button>
|
||
</div>
|
||
</div>
|
||
-->
|
||
|
||
<!-- about footer -->
|
||
<button
|
||
(click)="showAbout()"
|
||
class="mt-3 w-full border-t border-border pt-2 text-center text-[0.6875rem] text-muted-foreground hover:text-foreground"
|
||
>
|
||
{{ appName }} · {{ buildLabel }}
|
||
</button>
|
||
</div>
|
||
}
|
||
</div>
|
||
`,
|
||
})
|
||
export class TabBar {
|
||
readonly panels = inject(PanelsService);
|
||
readonly settings = inject(SettingsService);
|
||
readonly i18n = inject(I18nService);
|
||
readonly updater = inject(UpdaterService);
|
||
private readonly contextMenu = inject(ContextMenuService);
|
||
private readonly rpc = inject(RpcService);
|
||
readonly settingsOpen = signal(false);
|
||
readonly localeOptions = SUPPORTED;
|
||
readonly localeLabels = LOCALE_LABELS;
|
||
readonly isMacChrome = IS_MAC_CHROME;
|
||
readonly modLabel = MOD_LABEL;
|
||
readonly appName = BRANDING.appName;
|
||
readonly buildLabel = BRANDING.buildLabel;
|
||
readonly themes = THEMES;
|
||
readonly darkTones = DARK_TONES;
|
||
readonly accents = ACCENTS;
|
||
readonly iconColorModes = ICON_COLOR_MODES;
|
||
readonly speedUnits = SPEED_UNITS;
|
||
/** "100%" for the stepper readout; the value itself lives in settings. */
|
||
readonly scalePercent = computed(() => `${Math.round(this.settings.uiScale() * 100)}%`);
|
||
readonly transferModes = TRANSFER_MODES;
|
||
readonly concurrencyChoices = CONCURRENCY_CHOICES;
|
||
|
||
// drag & drop reordering
|
||
readonly draggedId = signal<number | null>(null);
|
||
readonly dropTarget = signal<{ index: number; before: boolean } | null>(null);
|
||
|
||
private readonly tabScroll = viewChild.required<ElementRef<HTMLDivElement>>('tabScroll');
|
||
|
||
constructor() {
|
||
// keep the active tab visible when the strip overflows
|
||
effect(() => {
|
||
const id = this.panels.activeWorkspaceId();
|
||
this.tabScroll()
|
||
.nativeElement.querySelector(`[data-tab-id="${id}"]`)
|
||
?.scrollIntoView({ inline: 'nearest', block: 'nearest' });
|
||
});
|
||
}
|
||
|
||
close(event: MouseEvent, id: number): void {
|
||
event.stopPropagation();
|
||
this.panels.closeWorkspace(id);
|
||
}
|
||
|
||
/**
|
||
* Middle-click closes the tab, as in browsers. `auxclick` also fires for the
|
||
* right button, hence the button check; the last tab is refused by
|
||
* closeWorkspace itself.
|
||
*/
|
||
onAuxClick(event: MouseEvent, id: number): void {
|
||
if (event.button !== 1) return;
|
||
event.preventDefault();
|
||
this.close(event, id);
|
||
}
|
||
|
||
/** A middle press over the scrollable strip would start WebView2's autoscroll. */
|
||
onTabMouseDown(event: MouseEvent): void {
|
||
if (event.button === 1) event.preventDefault();
|
||
}
|
||
|
||
/**
|
||
* Right-click a tab. The menu targets THIS tab, not the active one — its
|
||
* actions all carry the id — so right-clicking a background tab does not
|
||
* yank focus to it first, the way Explorer and every browser behave.
|
||
*/
|
||
onTabContextMenu(event: MouseEvent, workspace: Workspace, index: number): void {
|
||
event.preventDefault();
|
||
this.contextMenu.open(
|
||
event,
|
||
this.contextMenu.tabItems({
|
||
id: workspace.id,
|
||
index,
|
||
tabCount: this.panels.workspaces().length,
|
||
isRemote: this.panels.workspaceIsRemote(workspace),
|
||
}),
|
||
);
|
||
}
|
||
|
||
/** "Visual Studio Code.app" -> "Visual Studio Code"; empty -> system default. */
|
||
editorAppName(): string {
|
||
const path = this.settings.editorApp();
|
||
if (!path) return this.i18n.t('options.systemDefault');
|
||
const base = path.split('/').filter(Boolean).pop() ?? path;
|
||
return base.replace(/\.app$/i, '');
|
||
}
|
||
|
||
openManager(): void {
|
||
void this.rpc.request.openConnectionManager({});
|
||
}
|
||
|
||
/** Update pill: first click downloads, second click (when ready) applies + relaunches. */
|
||
onUpdateClick(): void {
|
||
const state = this.updater.state();
|
||
if (state === 'available') void this.updater.download();
|
||
else if (state === 'ready') this.updater.apply();
|
||
}
|
||
|
||
showAbout(): void {
|
||
void this.rpc.request.showAbout({});
|
||
}
|
||
|
||
async pickEditorApp(): Promise<void> {
|
||
const res = await this.rpc.request.pickEditorApp({});
|
||
if (res.ok && res.path) this.settings.setEditorApp(res.path);
|
||
}
|
||
|
||
/** Insertion line at the drop position (inset shadow: no layout shift). */
|
||
dropIndicatorShadow(index: number): string | null {
|
||
const target = this.dropTarget();
|
||
if (!target || target.index !== index || this.draggedId() === null) return null;
|
||
return target.before
|
||
? 'inset 2px 0 0 var(--primary)'
|
||
: 'inset -2px 0 0 var(--primary)';
|
||
}
|
||
|
||
onDragStart(event: DragEvent, id: number): void {
|
||
this.draggedId.set(id);
|
||
// WebKit refuses to start a drag without data
|
||
event.dataTransfer?.setData('text/plain', String(id));
|
||
if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
|
||
}
|
||
|
||
onDragOver(event: DragEvent, index: number): void {
|
||
if (this.draggedId() === null) return;
|
||
event.preventDefault();
|
||
if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
|
||
const el = event.currentTarget as HTMLElement;
|
||
const before = event.clientX < el.getBoundingClientRect().left + el.offsetWidth / 2;
|
||
this.dropTarget.set({ index, before });
|
||
}
|
||
|
||
onDrop(event: DragEvent, index: number): void {
|
||
event.preventDefault();
|
||
const id = this.draggedId();
|
||
const target = this.dropTarget();
|
||
this.onDragEnd();
|
||
if (id === null || !target) return;
|
||
const list = this.panels.workspaces();
|
||
const fromIndex = list.findIndex((w) => w.id === id);
|
||
if (fromIndex < 0) return;
|
||
let toIndex = target.before ? index : index + 1;
|
||
if (fromIndex < toIndex) toIndex--; // account for removal before insert
|
||
if (toIndex !== fromIndex) this.panels.moveWorkspace(id, toIndex);
|
||
}
|
||
|
||
onDragEnd(): void {
|
||
this.draggedId.set(null);
|
||
this.dropTarget.set(null);
|
||
}
|
||
}
|