jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve sidebar workspace readability and host identity (#2790)

Browse Source 
* fix(app): align turn footer actions

Keep running-turn actions in the same position as completed-turn actions and use the shared small icon size for both copy and fork controls.

* feat(app): improve sidebar workspace identity

Make dense sidebar workspace rows easier to scan and let each device control how connected hosts are identified.

* fix(app): keep host badges readable

Use a compact display menu and keep identity color on the host icon so translated controls fit and badge text retains standard contrast.

* fix(app): announce selected sidebar badge mode

* fix(app): retain icon-only host names for screen readers

* fix(app): name hoisted workspace rows

* fix(app): retain host identity in workspace labels

* fix(app): retain workspace status in row labels

* fix(app): defer host appearance until identity resolves

* fix(app): serialize host appearance writes

* fix(app): serialize host registry writes

* fix(app): bound sidebar host badge labels

* test(app): match workspace status labels

* fix(app): consolidate sidebar identity behavior

* test(app): assert status grouping behavior

* fix(app): keep sidebar row actions accessible

* fix(app): stabilize optimistic message layout
This commit is contained in:
Mohamed Boudra
2026-08-02 16:58:20 +02:00
committed by GitHub
parent 553ac53643
commit ccb668b3b4
57 changed files with 3251 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design.md
+3 -1
View File
@@ -225,6 +225,8 @@ Status pills are `palette.<color>[300]` foreground on a 10%-alpha background of
Status dots — the small filled circles next to a host or agent name — are `borderRadius.full` filled with the status color (`statusSuccess`, `statusWarning`, `statusDanger`, or `foregroundMuted`). They sit in the trailing slot of a sidebar row or as a leading marker on a status pill.
Identity badges — the project icon and the sidebar host badge — do not use the theme palette. They draw from the fixed ten-color identity table in `packages/app/src/styles/identity-colors.ts`, whose hexes are held to one contrast band so a color identifies rather than ranks. Identity color is a fill-only contract: project icons use it as a fill with a white letter, while host badges use it on their icon and retain the normal muted text color. The table is theme-independent by design; do not fork it per theme, and do not add hexes to it without recomputing the band.
The bespoke pills in `packages/app/src/screens/settings/host-page.tsx:97-116`, `packages/app/src/components/agent-list.tsx:607-632`, and `packages/app/src/components/sidebar-workspace-list.tsx:2889-2894` are drift to be removed. New code uses `<StatusBadge>`.
---
@@ -236,7 +238,7 @@ The bespoke pills in `packages/app/src/screens/settings/host-page.tsx:97-116`, `
- Bare `<Text>` for a section header inside settings. `<SettingsSection>` exists.
- A "Settings" CTA on a detail page. Detail pages are settings; settings is reached from the sidebar, the host entry, or a row's kebab menu.
- The word "checkout" in UI strings or identifiers. The term is "workspace".
- New color tokens or hardcoded hex outside the palette. Status pill rgba backgrounds are the documented pattern (§12), not a license.
- New color tokens or hardcoded hex outside the palette. Status pill rgba backgrounds and the identity color table are the documented exceptions (§13), not a license.
- Placeholder text dimmed beyond `foregroundMuted`. No extra opacity, no italics, no ghost-text.
- `onPointerEnter` and `onPointerLeave`. They do not fire on native iOS. Hover uses Pressable's `onHoverIn`/`onHoverOut` gated with `isHovered || isCompact || isNative`.
- Raw DOM APIs without an `isWeb` guard.
docs/glossary.md
+1
View File
@@ -10,6 +10,7 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here
- **Agent** — See **Agent session**. UI still says "Agent" / "New Agent" in places, but moving toward **Agent session** as the canonical term. Code: `AgentSnapshotPayload` (`packages/protocol/src/messages.ts:608`). Forbidden: "Task", "Job", "Run".
- **Daemon** — Local Paseo server process; identified by `serverId`. UI: "Daemon" (system contexts only). Code: `serverId` in `ServerInfoStatusPayloadSchema` (`packages/protocol/src/messages.ts:1936`), `DaemonClient` (`packages/client/src/daemon-client.ts`).
- **Host** — Client-side connection profile pointing at a daemon; bundles one or more `HostConnection`s. UI: "Host" / "Add host" / "Switch host". Code: `HostProfile` (`packages/app/src/types/host-connection.ts:37`). Forbidden: "Connection" (means `HostConnection`, not host).
- **Host badge** — The sidebar pill naming which host a workspace lives on. Only drawn once the visible sidebar spans more than one host. Its name, color, and display mode (**Name** / **Icon only** / **Hidden**) are per-host, per-device, and live client-side on `HostProfile.appearance`; nothing about it reaches the daemon. UI: the "Appearance" group on a host's settings page. Code: `HostBadge` (`packages/app/src/components/sidebar/host-badge.tsx`), `selectHostBadges` (`packages/app/src/hosts/appearance.ts`). Don't confuse with **Status pill**, which reports state rather than identity.
- **Project host entry** — One row in a project for a single (project, daemon) pair, aggregating that daemon's workspaces in the project. Internal. Code: `ProjectHostEntry` (`packages/app/src/utils/projects.ts:11`). Don't introduce "Checkout" as a synonym.
- **Placement** — One workspace's stable foreign-key relationship to its project plus its git checkout snapshot. Internal. An explicit creation `projectId` is authoritative when active.
- **Branch** — Plain git branch. UI: "Switch branch". Code: `currentBranch` in `WorkspaceGitRuntimePayloadSchema` (`packages/protocol/src/messages.ts:2136`); `BranchSwitcher` (`packages/app/src/components/branch-switcher.tsx`).
packages/app/e2e/browser/agent-consecutive-turns.spec.ts
+40
View File
@@ -660,6 +660,19 @@ function expectAtomicIdleToRunningTransition(frames: TurnFrame[]): void {
).toEqual([]);
}
function expectSubmittedMessageHeightStable(frames: TurnFrame[]): void {
const first = frames.findIndex((frame) => frame.userRow.visible);
const baseline = frames[first]?.userRow.rect?.height;
const changes = frames
.slice(first)
.flatMap((frame, offset) =>
geometryChanged(frame.userRow.rect?.height, baseline)
? [`frame ${first + offset}: submitted row height changed`]
: [],
);
expect(changes, `submitted message geometry changed:\n${changes.join("\n")}`).toEqual([]);
}
function expectAtomicFirstPromptTransition(frames: TurnFrame[]): void {
expectRowContinuity(frames);
const first = frames.findIndex((frame) => hasPaintedLayout(frame.userRow));
@@ -828,6 +841,33 @@ test("keeps follow-up activity continuous when turn starts before response", asy
expectAtomicIdleToRunningTransition(frames);
});
test("keeps a submitted message height stable when its canonical echo arrives", async ({
page,
streamingAgent,
}) => {
const gate = await installDaemonWebSocketGate(page);
await openAgentRoute(page, {
workspaceId: streamingAgent.workspaceId,
agentId: streamingAgent.agentId,
});
await expectAgentIdle(page);
const prompt = "Canonical echo must not resize this message.";
gate.holdNextAgentStreamItem("user_message");
await recordTurnFrames(page, prompt);
await submitMessage(page, prompt);
await gate.waitForHeldAgentStreamItem("user_message");
const submittedRow = page.getByTestId("user-message").filter({ hasText: prompt });
await expect(submittedRow).toBeVisible();
await recordPaintsFor(page, 80);
gate.releaseHeldAgentStreamItem("user_message");
await expect(submittedRow.getByTestId("rewind-menu-trigger")).toBeVisible();
await recordPaintsFor(page, 80);
expectSubmittedMessageHeightStable(await stopTurnFrameRecording(page));
});
test("keeps follow-up activity continuous when response arrives before running state", async ({
page,
streamingAgent,
packages/app/e2e/browser/host-appearance.spec.ts
+212
View File
@@ -0,0 +1,212 @@
import { expect, test as base } from "../support/fixtures";
import { gotoAppShell } from "../support/helpers/app";
import {
addConnectedHostAndReload,
chooseHostBadgeDisplay,
chooseHostColor,
expectHostAppearancePreview,
expectHostBadgeIconOnly,
expectHostBadgeName,
expectHostBadgeTinted,
expectNoHostBadge,
leaveHostAppearanceSettings,
openHostAppearanceSettings,
reloadPreservingHostRegistry,
renameHostFromSettings,
waitForConnectedHost,
} from "../support/helpers/hosts";
import {
type IsolatedHostDaemon,
startIsolatedHostDaemon,
} from "../support/helpers/isolated-host-daemon";
import { seedWorkspace, type SeededWorkspace } from "../support/helpers/seed-client";
import { getServerId } from "../support/helpers/server-id";
import { waitForSidebarHydration } from "../support/helpers/workspace-ui";
const PRIMARY_HOST_LABEL = "Primary Host";
const SECONDARY_HOST_LABEL = "Secondary Host";
interface TwoHostSidebar {
primaryServerId: string;
primaryWorkspaceId: string;
secondaryServerId: string;
secondaryWorkspaceId: string;
}
// The host badge only appears once the visible sidebar spans more than one host, and that count
// runs over visible projects — so an offline host with no workspaces will not raise it. Two real
// daemons, each with a seeded workspace, is the minimum shape that exercises the feature.
const test = base.extend<{ twoHostSidebar: TwoHostSidebar }>({
twoHostSidebar: async ({ page }, provide) => {
const secondaryHost: IsolatedHostDaemon = await startIsolatedHostDaemon(
"host-appearance-secondary",
);
let primary: SeededWorkspace | null = null;
let secondary: SeededWorkspace | null = null;
try {
primary = await seedWorkspace({
repoPrefix: "host-appearance-primary-",
title: "Primary workspace",
});
secondary = await seedWorkspace({
repoPrefix: "host-appearance-secondary-",
title: "Secondary workspace",
port: secondaryHost.port,
});
await gotoAppShell(page);
await addConnectedHostAndReload(page, {
serverId: secondaryHost.serverId,
label: SECONDARY_HOST_LABEL,
port: secondaryHost.port,
primaryLabel: PRIMARY_HOST_LABEL,
});
await waitForConnectedHost(page, {
serverId: secondaryHost.serverId,
endpoint: `localhost:${secondaryHost.port}`,
});
await waitForSidebarHydration(page);
await provide({
primaryServerId: getServerId(),
primaryWorkspaceId: primary.workspaceId,
secondaryServerId: secondaryHost.serverId,
secondaryWorkspaceId: secondary.workspaceId,
});
} finally {
await primary?.cleanup().catch(() => undefined);
await secondary?.cleanup().catch(() => undefined);
await secondaryHost.close().catch(() => undefined);
}
},
});
test.describe("Host appearance", () => {
test.describe.configure({ timeout: 180_000 });
test("renaming a host renames its sidebar badge", async ({ page, twoHostSidebar }) => {
const badge = {
serverId: twoHostSidebar.secondaryServerId,
workspaceId: twoHostSidebar.secondaryWorkspaceId,
};
await expectHostBadgeName(page, { ...badge, hostName: SECONDARY_HOST_LABEL });
await openHostAppearanceSettings(page, twoHostSidebar.secondaryServerId);
await renameHostFromSettings(page, "Build Box");
await leaveHostAppearanceSettings(page);
await expectHostBadgeName(page, { ...badge, hostName: "Build Box" });
});
test("long host names leave room for the workspace title and actions", async ({
page,
twoHostSidebar,
}) => {
const hostName = "A very long remote build host name that must not take over the sidebar";
const workspaceKey = `${twoHostSidebar.secondaryServerId}:${twoHostSidebar.secondaryWorkspaceId}`;
await openHostAppearanceSettings(page, twoHostSidebar.secondaryServerId);
await renameHostFromSettings(page, hostName);
await leaveHostAppearanceSettings(page);
const row = page.getByTestId(`sidebar-workspace-row-${workspaceKey}`);
const badge = row.getByTestId(`sidebar-host-badge-${twoHostSidebar.secondaryServerId}`);
await expect(badge).toHaveText(hostName);
await row.hover();
const title = row.getByText("Secondary workspace", { exact: true });
const kebab = page.getByTestId(`sidebar-workspace-kebab-${workspaceKey}`);
await expect(kebab).toBeVisible();
const [badgeBox, titleBox, rowBox, kebabBox] = await Promise.all([
badge.boundingBox(),
title.boundingBox(),
row.boundingBox(),
kebab.boundingBox(),
]);
expect(badgeBox).not.toBeNull();
expect(titleBox).not.toBeNull();
expect(rowBox).not.toBeNull();
expect(kebabBox).not.toBeNull();
expect(titleBox!.width).toBeGreaterThan(0);
expect(kebabBox!.x + kebabBox!.width).toBeLessThanOrEqual(rowBox!.x + rowBox!.width);
});
test("picking a color identifies the badge", async ({ page, twoHostSidebar }) => {
const badge = {
serverId: twoHostSidebar.secondaryServerId,
workspaceId: twoHostSidebar.secondaryWorkspaceId,
hostName: SECONDARY_HOST_LABEL,
};
await openHostAppearanceSettings(page, twoHostSidebar.secondaryServerId);
await chooseHostColor(page, "Teal");
await leaveHostAppearanceSettings(page);
await expectHostBadgeTinted(page, { ...badge, color: "teal" });
});
test("icon only keeps the badge and drops the name", async ({ page, twoHostSidebar }) => {
const badge = {
serverId: twoHostSidebar.secondaryServerId,
workspaceId: twoHostSidebar.secondaryWorkspaceId,
hostName: SECONDARY_HOST_LABEL,
};
await openHostAppearanceSettings(page, twoHostSidebar.secondaryServerId);
await chooseHostBadgeDisplay(page, "Icon only");
await leaveHostAppearanceSettings(page);
await expectHostBadgeIconOnly(page, badge);
});
test("hiding one host leaves the other host's badge visible", async ({
page,
twoHostSidebar,
}) => {
await openHostAppearanceSettings(page, twoHostSidebar.secondaryServerId);
await chooseHostBadgeDisplay(page, "Hidden");
await leaveHostAppearanceSettings(page);
await expectNoHostBadge(page, {
serverId: twoHostSidebar.secondaryServerId,
workspaceId: twoHostSidebar.secondaryWorkspaceId,
hostName: SECONDARY_HOST_LABEL,
});
await expectHostBadgeName(page, {
serverId: twoHostSidebar.primaryServerId,
workspaceId: twoHostSidebar.primaryWorkspaceId,
hostName: PRIMARY_HOST_LABEL,
});
});
test("name, color, and display survive a reload", async ({ page, twoHostSidebar }) => {
await openHostAppearanceSettings(page, twoHostSidebar.secondaryServerId);
await renameHostFromSettings(page, "Build Box");
await chooseHostColor(page, "Amber");
await chooseHostBadgeDisplay(page, "Icon only");
await leaveHostAppearanceSettings(page);
await reloadPreservingHostRegistry(page);
await waitForSidebarHydration(page);
await expectHostBadgeIconOnly(page, {
serverId: twoHostSidebar.secondaryServerId,
workspaceId: twoHostSidebar.secondaryWorkspaceId,
hostName: "Build Box",
});
});
test("the settings preview shows the badge as configured", async ({ page, twoHostSidebar }) => {
await openHostAppearanceSettings(page, twoHostSidebar.secondaryServerId);
await renameHostFromSettings(page, "Build Box");
await chooseHostColor(page, "Emerald");
await expectHostAppearancePreview(page, {
serverId: twoHostSidebar.secondaryServerId,
hostName: "Build Box",
color: "emerald",
});
});
});
packages/app/e2e/browser/new-workspace.spec.ts
+7 -8
View File
@@ -116,7 +116,13 @@ async function startTrackingSidebarStatusGroups(page: import("@playwright/test")
capture();
const observer = new MutationObserver(capture);
observer.observe(document.body, { childList: true, subtree: true, characterData: true });
observer.observe(document.body, {
childList: true,
subtree: true,
characterData: true,
attributes: true,
attributeFilter: ["data-testid"],
});
win.__workspaceStatusGroupObserver = observer;
});
}
@@ -159,7 +165,6 @@ async function expectWorkspaceStatusGroupEvents(input: {
rowTestId: string;
includes: string;
excludes: string;
includesIndicator?: string;
excludesIndicator?: string;
}) {
await waitForWorkspaceStatusGroupEvent({
@@ -172,11 +177,6 @@ async function expectWorkspaceStatusGroupEvents(input: {
);
expect(createdWorkspaceEvents.map((event) => event.bucket)).toContain(input.includes);
expect(createdWorkspaceEvents.filter((event) => event.bucket === input.excludes)).toEqual([]);
if (input.includesIndicator) {
expect(createdWorkspaceEvents.map((event) => event.indicatorTestId)).toContain(
input.includesIndicator,
);
}
if (input.excludesIndicator) {
expect(
createdWorkspaceEvents.filter((event) => event.indicatorTestId === input.excludesIndicator),
@@ -612,7 +612,6 @@ test.describe("New workspace flow", () => {
rowTestId,
includes: "running",
excludes: "done",
includesIndicator: "workspace-status-indicator-running",
});
} finally {
await tempRepo.cleanup();
packages/app/e2e/browser/sidebar-context-menu.spec.ts
+40
View File
@@ -0,0 +1,40 @@
import { test } from "../support/fixtures";
import { gotoAppShell } from "../support/helpers/app";
import { seedWorkspace } from "../support/helpers/seed-client";
import {
closeProjectContextMenu,
closeWorkspaceContextMenu,
expectProjectContextMenuActions,
expectWorkspaceContextMenuActions,
expectWorkspaceContextMenuOwnsAttention,
expectWorkspaceRowHoverCleared,
openProjectContextMenu,
openWorkspaceContextMenu,
showWorkspaceHoverCard,
} from "../support/helpers/sidebar";
test.describe("Sidebar context menus", () => {
test("right-clicking workspace and project rows opens their actions at the pointer", async ({
page,
}) => {
const workspace = await seedWorkspace({ repoPrefix: "sidebar-context-menu-" });
try {
await gotoAppShell(page);
await showWorkspaceHoverCard(page, workspace.workspaceId);
await openWorkspaceContextMenu(page, workspace.workspaceId);
await expectWorkspaceContextMenuActions(page, workspace.workspaceId);
await expectWorkspaceContextMenuOwnsAttention(page);
await closeWorkspaceContextMenu(page, workspace.workspaceId);
await expectWorkspaceRowHoverCleared(page, workspace.workspaceId);
await openProjectContextMenu(page, workspace.projectKey);
await expectProjectContextMenuActions(page, workspace.projectKey);
await closeProjectContextMenu(page, workspace.projectKey);
} finally {
await workspace.cleanup();
}
});
});
packages/app/e2e/browser/sidebar-model-b.spec.ts
+6
View File
@@ -149,6 +149,12 @@ test.describe("Model B sidebar shape", () => {
await expect(workspaceRow(page, activeMock.workspaceId).first()).toBeVisible({
timeout: 60_000,
});
await expect(workspaceRow(page, idleProject.workspaceId).first()).toHaveAccessibleName(
`${idleProject.projectDisplayName}, ${idleProject.workspaceName}`,
);
await expect(workspaceRow(page, activeMock.workspaceId).first()).toHaveAccessibleName(
/Working$/,
);
// Only workspace rows are shown — no tab/agent/terminal leaves leak into
// the status view.
packages/app/e2e/helpers/project-status-badge.ts
+7 -1
View File
@@ -102,5 +102,11 @@ function projectRow(page: Page, project: StatusProject) {
}
function workspaceRow(page: Page, workspaceName: string) {
return page.getByRole("button", { name: workspaceName, exact: true });
return page.getByRole("button", {
name: new RegExp(`^${escapeRegExp(workspaceName)}(?:,|$)`),
});
}
function escapeRegExp(value: string): string {
return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
packages/app/e2e/support/helpers/daemon-websocket-gate.ts
+26
View File
@@ -176,6 +176,10 @@ function agentStreamEventKey(type: string): string {
return `agent-stream-event:${type}`;
}
function agentStreamItemKey(type: string): string {
return `agent-stream-item:${type}`;
}
function agentUpdateKey(agentId: string, status: string): string {
return `agent-update:${agentId}:${status}`;
}
@@ -526,6 +530,12 @@ export async function installDaemonWebSocketGate(page: Page) {
(message) => readAgentStreamEventType(message) === type,
);
},
holdNextAgentStreamItem(type: string): void {
pendingServerMessageHolds.set(
agentStreamItemKey(type),
(message) => readAgentStreamItemType(message) === type,
);
},
async waitForHeldServerMessage(type?: string): Promise<void> {
const key = type ? serverMessageKey(type) : null;
while (!heldServerMessages.some((message) => key === null || message.key === key)) {
@@ -574,6 +584,22 @@ export async function installDaemonWebSocketGate(page: Page) {
heldServerMessage.browser.send(follower);
}
},
async waitForHeldAgentStreamItem(type: string): Promise<void> {
const key = agentStreamItemKey(type);
while (!heldServerMessages.some((message) => message.key === key)) {
await new Promise<void>((resolve) => heldServerMessageWaiters.add(resolve));
}
},
releaseHeldAgentStreamItem(type: string): void {
const key = agentStreamItemKey(type);
const index = heldServerMessages.findIndex((message) => message.key === key);
const [heldServerMessage] = index >= 0 ? heldServerMessages.splice(index, 1) : [];
if (!heldServerMessage) throw new Error("No held agent stream item to release");
heldServerMessage.browser.send(heldServerMessage.message);
for (const follower of heldServerMessage.agentStreamFollowers) {
heldServerMessage.browser.send(follower);
}
},
requestTimelineTail(agentId: string): void {
if (!latestServer) throw new Error("No daemon WebSocket is connected");
latestServer.send(
packages/app/e2e/support/helpers/hosts.ts
+113
View File
@@ -1,5 +1,8 @@
import { expect, type Page } from "@playwright/test";
import { identityColor, type IdentityColorName } from "@/styles/identity-colors";
import { openSettings } from "./app";
import { buildSeededHost } from "./daemon-registry";
import { clickSettingsBackToWorkspace, openHostSection, selectSettingsHost } from "./settings";
const REGISTRY_KEY = "@paseo:daemon-registry";
const SEED_NONCE_KEY = "@paseo:e2e-seed-nonce";
@@ -140,3 +143,113 @@ export async function toggleHostFilter(page: Page, serverId: string): Promise<vo
export async function selectAllHostsFilter(page: Page): Promise<void> {
await page.getByTestId("sidebar-host-filter-all").click();
}
export async function openHostAppearanceSettings(page: Page, serverId: string): Promise<void> {
await openSettings(page);
await selectSettingsHost(page, serverId);
await openHostSection(page, serverId, "host");
await expect(page.getByTestId("host-appearance-preview")).toBeVisible({ timeout: 15_000 });
}
// Settings replaces the workspace sidebar, so badge assertions need the app shell back. Going
// through the in-app back control (rather than a fresh goto) also keeps the auto-seed fixture
// from rewriting the host registry, since init scripts only re-run on a real navigation.
export async function leaveHostAppearanceSettings(page: Page): Promise<void> {
await clickSettingsBackToWorkspace(page);
await expect(page.getByTestId("host-appearance-preview")).toHaveCount(0);
}
export async function renameHostFromSettings(page: Page, name: string): Promise<void> {
await page.getByTestId("host-page-label-edit-button").click();
const input = page.getByTestId("host-page-rename-modal-input");
await expect(input).toBeVisible();
await input.fill(name);
await page.getByTestId("host-page-rename-modal-submit").click();
await expect(input).toHaveCount(0);
}
export async function chooseHostColor(page: Page, colorName: string): Promise<void> {
await page.getByRole("button", { name: /^Color, / }).click();
await page.getByRole("button", { name: colorName, exact: true }).click();
await expect(page.getByRole("button", { name: `Color, ${colorName}` })).toBeVisible();
}
export async function chooseHostBadgeDisplay(
page: Page,
option: "Name" | "Icon only" | "Hidden",
): Promise<void> {
await page.getByTestId("host-appearance-badge-display").click();
await page.getByRole("button", { name: option, exact: true }).click();
await expect(page.getByRole("button", { name: `Sidebar badge, ${option}` })).toBeVisible();
}
// The badge is visual-only; the workspace row owns its accessible name. Test IDs keep visual
// assertions from coupling to that row-level accessibility contract.
function hostBadge(page: Page, input: HostBadgeTarget) {
return page
.getByTestId(`sidebar-workspace-row-${input.serverId}:${input.workspaceId}`)
.getByTestId(`sidebar-host-badge-${input.serverId}`);
}
interface HostBadgeTarget {
serverId: string;
workspaceId: string;
hostName: string;
}
export async function expectHostBadgeName(page: Page, target: HostBadgeTarget): Promise<void> {
const badge = hostBadge(page, target);
await expect(badge).toBeVisible({ timeout: 15_000 });
await expect(badge).toHaveText(target.hostName);
}
export async function expectHostBadgeIconOnly(page: Page, target: HostBadgeTarget): Promise<void> {
const badge = hostBadge(page, target);
await expect(badge).toBeVisible({ timeout: 15_000 });
await expect(badge).not.toHaveText(target.hostName);
await expect(
page.getByTestId(`sidebar-workspace-row-${target.serverId}:${target.workspaceId}`),
).toHaveAccessibleName(new RegExp(target.hostName));
}
export async function expectNoHostBadge(page: Page, target: HostBadgeTarget): Promise<void> {
await expect(hostBadge(page, target)).toHaveCount(0, { timeout: 15_000 });
}
export async function expectHostBadgeTinted(
page: Page,
target: HostBadgeTarget & { color: IdentityColorName },
): Promise<void> {
const badge = hostBadge(page, target);
await expect(badge).toBeVisible({ timeout: 15_000 });
await expect(badge.getByText(target.hostName)).toHaveCSS("color", "rgb(113, 113, 122)");
await expect(badge.locator("svg")).toHaveAttribute("stroke", identityColor(target.color));
}
export async function expectHostAppearancePreview(
page: Page,
input: { serverId: string; hostName: string; color: IdentityColorName },
): Promise<void> {
const preview = page.getByTestId("host-appearance-preview");
await expect(preview).toBeVisible();
const badge = preview.getByTestId(`sidebar-host-badge-${input.serverId}`);
await expect(badge).toHaveText(input.hostName);
await expect(badge.locator("svg")).toHaveAttribute("stroke", identityColor(input.color));
}
// The auto-seed fixture rewrites the host registry on every navigation. Setting the
// disable-once flag to the current nonce makes it skip exactly one reload, which is what proves
// the appearance survived rather than being reseeded.
export async function reloadPreservingHostRegistry(page: Page): Promise<void> {
await page.evaluate(
(keys) => {
const nonce = localStorage.getItem(keys.nonce);
if (!nonce) {
throw new Error("Expected the e2e seed nonce before reloading.");
}
localStorage.setItem(keys.disableSeedOnce, nonce);
},
{ nonce: SEED_NONCE_KEY, disableSeedOnce: DISABLE_DEFAULT_SEED_ONCE_KEY },
);
await page.reload();
}
packages/app/e2e/support/helpers/sidebar.ts
+104
View File
@@ -1,6 +1,110 @@
import { expect, type Page } from "@playwright/test";
import { getServerId } from "./server-id";
interface ContextMenuAnchor {
x: number;
y: number;
}
async function openContextMenuAtRowPoint(
page: Page,
rowTestID: string,
menuTestID: string,
): Promise<ContextMenuAnchor> {
const row = page.getByTestId(rowTestID);
await expect(row).toBeVisible({ timeout: 30_000 });
const bounds = await row.boundingBox();
if (!bounds) throw new Error(`Could not measure ${rowTestID}`);
const anchor = {
x: bounds.x + Math.min(60, bounds.width / 2),
y: bounds.y + bounds.height / 2,
};
await page.mouse.click(anchor.x, anchor.y, { button: "right" });
await expect(page.getByTestId(menuTestID)).toBeVisible({ timeout: 10_000 });
return anchor;
}
async function expectContextMenuAtPointer(
page: Page,
menuTestID: string,
anchor: ContextMenuAnchor,
): Promise<void> {
const bounds = await page.getByTestId(menuTestID).boundingBox();
if (!bounds) throw new Error(`Could not measure ${menuTestID}`);
expect(Math.abs(bounds.x - anchor.x)).toBeLessThanOrEqual(2);
expect(Math.abs(bounds.y - (anchor.y + 4))).toBeLessThanOrEqual(2);
}
export async function openWorkspaceContextMenu(page: Page, workspaceId: string): Promise<void> {
const workspaceKey = `${getServerId()}:${workspaceId}`;
const menuTestID = `sidebar-workspace-context-menu-${workspaceKey}`;
const anchor = await openContextMenuAtRowPoint(
page,
`sidebar-workspace-row-${workspaceKey}`,
menuTestID,
);
await expectContextMenuAtPointer(page, menuTestID, anchor);
}
export async function showWorkspaceHoverCard(page: Page, workspaceId: string): Promise<void> {
const workspaceKey = `${getServerId()}:${workspaceId}`;
await page.getByTestId(`sidebar-workspace-row-${workspaceKey}`).hover();
await expect(page.getByTestId("workspace-hover-card")).toBeVisible();
}
export async function closeWorkspaceContextMenu(page: Page, workspaceId: string): Promise<void> {
const workspaceKey = `${getServerId()}:${workspaceId}`;
await page.getByTestId(`sidebar-workspace-context-menu-${workspaceKey}-backdrop`).click();
}
export async function expectWorkspaceContextMenuOwnsAttention(page: Page): Promise<void> {
await expect(page.getByTestId("workspace-hover-card")).toHaveCount(0);
}
export async function expectWorkspaceRowHoverCleared(
page: Page,
workspaceId: string,
): Promise<void> {
const workspaceKey = `${getServerId()}:${workspaceId}`;
await expect(page.getByTestId(`sidebar-workspace-kebab-${workspaceKey}`)).toBeHidden();
await expect(page.getByTestId("workspace-hover-card")).toHaveCount(0);
}
export async function expectWorkspaceContextMenuActions(
page: Page,
workspaceId: string,
): Promise<void> {
const workspaceKey = `${getServerId()}:${workspaceId}`;
const menu = page.getByTestId(`sidebar-workspace-context-menu-${workspaceKey}`);
await expect(menu.getByRole("button", { name: "Copy path" })).toBeVisible();
await expect(menu.getByRole("button", { name: "Rename workspace" })).toBeVisible();
await expect(menu.getByRole("button", { name: "Archive" })).toBeVisible();
}
export async function openProjectContextMenu(page: Page, projectViewKey: string): Promise<void> {
const menuTestID = `sidebar-project-context-menu-${projectViewKey}`;
const anchor = await openContextMenuAtRowPoint(
page,
`sidebar-project-row-${projectViewKey}`,
menuTestID,
);
await expectContextMenuAtPointer(page, menuTestID, anchor);
}
export async function closeProjectContextMenu(page: Page, projectViewKey: string): Promise<void> {
await page.getByTestId(`sidebar-project-context-menu-${projectViewKey}-backdrop`).click();
}
export async function expectProjectContextMenuActions(
page: Page,
projectViewKey: string,
): Promise<void> {
const menu = page.getByTestId(`sidebar-project-context-menu-${projectViewKey}`);
await expect(menu.getByRole("button", { name: "Open project settings" })).toBeVisible();
await expect(menu.getByRole("button", { name: "Remove project" })).toBeVisible();
}
export async function selectWorkspaceInSidebar(page: Page, workspaceId: string): Promise<void> {
const row = page.getByTestId(`sidebar-workspace-row-${getServerId()}:${workspaceId}`);
await expect(row).toBeVisible({ timeout: 30_000 });
packages/app/src/agent-stream/turn-footer.test.tsx
+105
View File
@@ -0,0 +1,105 @@
/**
* @vitest-environment jsdom
*/
import React, { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
vi.mock("react-native", () => ({
Platform: { OS: "web" },
View: ({ children, testID }: { children?: React.ReactNode; testID?: string }) => (
<div data-testid={testID}>{children}</div>
),
}));
vi.mock("react-native-unistyles", () => ({
StyleSheet: {
create: (factory: unknown) =>
typeof factory === "function"
? (factory as (theme: Record<string, unknown>) => unknown)({
spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24 },
colors: {
foregroundMuted: "#aaa",
palette: { amber: { 500: "#f0b429", 700: "#b7791f" } },
},
})
: factory,
},
useUnistyles: () => ({ rt: { breakpoint: "md" } }),
withUnistyles: <T,>(component: T) => component,
}));
vi.mock("@/components/message", () => ({
AssistantTurnFooter: () => null,
LiveElapsed: () => <span data-testid="running-turn-timestamp" />,
STREAM_METADATA_FONT_SIZE: 11,
}));
vi.mock("@/components/assistant-fork-menu", () => ({
AssistantForkMenu: () => <button data-testid="running-turn-fork" type="button" />,
}));
vi.mock("@/components/synced-loader", () => ({
SyncedLoader: () => <span data-testid="running-turn-loader" />,
}));
vi.mock("@/components/retained-panel", () => ({
useRetainedPanelActive: () => true,
}));
import { TurnFooter } from "./turn-footer";
const unusedRunningTurnStrategy = null as unknown as React.ComponentProps<
typeof TurnFooter
>["strategy"];
describe("TurnFooter", () => {
let root: Root | null = null;
let container: HTMLDivElement | null = null;
beforeEach(() => {
Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
value: true,
configurable: true,
});
});
afterEach(() => {
if (root) {
act(() => root?.unmount());
}
root = null;
container?.remove();
container = null;
});
it("places the running-turn fork between the loader and timestamp", () => {
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
act(() => {
root?.render(
<TurnFooter
isRunning
inFlightTurnStartedAt={new Date("2026-08-01T10:00:00.000Z")}
host={null}
strategy={unusedRunningTurnStrategy}
supportsTimelineCursor
onForkInFlightTurn={vi.fn()}
/>,
);
});
const footer = container.querySelector('[data-testid="turn-working-indicator"]');
const controls = Array.from(footer?.querySelectorAll("[data-testid]") ?? []).map((node) =>
node.getAttribute("data-testid"),
);
expect(controls).toEqual([
"running-turn-loader",
"running-turn-fork",
"running-turn-timestamp",
]);
});
});
packages/app/src/agent-stream/turn-footer.tsx
+2 -3
View File
@@ -130,6 +130,8 @@ const WorkingIndicator = memo(function WorkingIndicator({
<View style={stylesheet.workingLoader}>
<ThemedSyncedLoader size={14} uniProps={workingIndicatorColorMapping} />
</View>
{/* Match the completed-turn footer: actions precede timing metadata. */}
{onForkInFlightTurn ? <AssistantForkMenu onFork={onForkInFlightTurn} /> : null}
{inFlightTurnStartedAt ? (
<LiveElapsed
startedAt={inFlightTurnStartedAt}
@@ -138,9 +140,6 @@ const WorkingIndicator = memo(function WorkingIndicator({
testID="turn-working-elapsed"
/>
) : null}
{/* Sits in the same 24px gapped row as the loader and elapsed timer, so
fork is reachable without waiting for the run to finish. */}
{onForkInFlightTurn ? <AssistantForkMenu onFork={onForkInFlightTurn} /> : null}
</View>
);
});
packages/app/src/components/assistant-fork-menu.tsx
+6 -3
View File
@@ -10,7 +10,7 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import type { Theme } from "@/styles/theme";
import { ICON_SIZE, type Theme } from "@/styles/theme";
export type AssistantForkTarget = "tab" | "workspace";
@@ -69,7 +69,10 @@ export const AssistantForkMenu = memo(function AssistantForkMenu({
[t],
);
const forkIcon = useMemo(() => <ThemedSplit size={16} uniProps={foregroundColorMapping} />, []);
const forkIcon = useMemo(
() => <ThemedSplit size={ICON_SIZE.sm} uniProps={foregroundColorMapping} />,
[],
);
return (
<DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
@@ -85,7 +88,7 @@ export const AssistantForkMenu = memo(function AssistantForkMenu({
>
{({ hovered, open }) => (
<ThemedSplit
size={16}
size={ICON_SIZE.sm}
uniProps={hovered || open ? foregroundColorMapping : foregroundMutedColorMapping}
/>
)}
packages/app/src/components/diff-stat.tsx
+2 -2
View File
@@ -36,11 +36,11 @@ const styles = StyleSheet.create((theme) => ({
additions: {
fontSize: theme.fontSize.xs,
fontWeight: theme.fontWeight.normal,
color: theme.colors.diffAddition,
color: theme.colors.diffStatAddition,
},
deletions: {
fontSize: theme.fontSize.xs,
fontWeight: theme.fontWeight.normal,
color: theme.colors.diffDeletion,
color: theme.colors.diffStatDeletion,
},
}));
packages/app/src/components/left-sidebar.tsx
-7
View File
@@ -78,7 +78,6 @@ interface SidebarSharedProps {
pinnedGroups: PinnedSidebarGroups;
projects: SidebarProjectEntry[];
workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
projectNamesByViewKey: Map<string, string>;
isInitialLoad: boolean;
isRevalidating: boolean;
isManualRefresh: boolean;
@@ -133,7 +132,6 @@ export const LeftSidebar = memo(function LeftSidebar({ active }: { active: boole
const {
projects,
workspaceEntriesByKey,
projectNamesByViewKey,
isInitialLoad,
isRevalidating,
refreshAll,
@@ -239,7 +237,6 @@ export const LeftSidebar = memo(function LeftSidebar({ active }: { active: boole
pinnedGroups,
projects,
workspaceEntriesByKey,
projectNamesByViewKey,
isInitialLoad,
isRevalidating,
isManualRefresh,
@@ -593,7 +590,6 @@ function MobileSidebar({
pinnedGroups,
projects,
workspaceEntriesByKey,
projectNamesByViewKey,
isInitialLoad,
isRevalidating,
isManualRefresh,
@@ -710,7 +706,6 @@ function MobileSidebar({
pinnedGroups={pinnedGroups}
projects={projects}
workspaceEntriesByKey={workspaceEntriesByKey}
projectNamesByViewKey={projectNamesByViewKey}
isRefreshing={isManualRefresh && isRevalidating}
onRefresh={handleRefresh}
onWorkspacePress={handleWorkspacePress}
@@ -741,7 +736,6 @@ function DesktopSidebar({
pinnedGroups,
projects,
workspaceEntriesByKey,
projectNamesByViewKey,
isInitialLoad,
isRevalidating,
isManualRefresh,
@@ -878,7 +872,6 @@ function DesktopSidebar({
pinnedGroups={pinnedGroups}
projects={projects}
workspaceEntriesByKey={workspaceEntriesByKey}
projectNamesByViewKey={projectNamesByViewKey}
isRefreshing={isManualRefresh && isRevalidating}
onRefresh={handleRefresh}
onAddProject={handleOpenProject}
packages/app/src/components/message.tsx
+4 -3
View File
@@ -47,7 +47,7 @@ import {
FileSymlink,
} from "lucide-react-native";
import { StyleSheet, withUnistyles } from "react-native-unistyles";
import type { Theme } from "@/styles/theme";
import { ICON_SIZE, type Theme } from "@/styles/theme";
import { useIsCompactFormFactor } from "@/constants/layout";
import Animated, {
Easing,
@@ -373,6 +373,7 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
alignSelf: "flex-end",
flexDirection: "row",
alignItems: "center",
height: 24,
gap: theme.spacing[2],
marginTop: theme.spacing[2],
},
@@ -1034,9 +1035,9 @@ export const TurnCopyButton = memo(function TurnCopyButton({
? turnCopyButtonStylesheet.iconHoveredColor.color
: turnCopyButtonStylesheet.iconColor.color;
return copied ? (
<Check size={16} color={iconColor} />
<Check size={ICON_SIZE.sm} color={iconColor} />
) : (
<Copy size={16} color={iconColor} />
<Copy size={ICON_SIZE.sm} color={iconColor} />
);
}}
</Pressable>
packages/app/src/components/project-icon-view.tsx
+5 -2
View File
@@ -8,7 +8,7 @@ import {
View,
type ViewStyle,
} from "react-native";
import { deriveProjectIconColor } from "@/utils/project-icon-color";
import { deriveIdentityColorName, identityColor } from "@/styles/identity-colors";
const WHITE_TEXT = { color: "#ffffff" } as const;
@@ -29,7 +29,10 @@ export function ProjectIconView({
}) {
const imageSource = useMemo(() => ({ uri: iconDataUri ?? "" }), [iconDataUri]);
const fallbackStyles = useMemo(
() => [fallbackStyle, { backgroundColor: deriveProjectIconColor(projectViewKey) }],
() => [
fallbackStyle,
{ backgroundColor: identityColor(deriveIdentityColorName(projectViewKey)) },
],
[fallbackStyle, projectViewKey],
);
const textStyles = useMemo(() => [textStyle, WHITE_TEXT], [textStyle]);
packages/app/src/components/sidebar-workspace-list.test.tsx
+2
View File
@@ -43,6 +43,7 @@ import { seedSessionWorkspaces } from "@/test/seed-session";
import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
import { useWorkspaceFields } from "@/stores/session-store-hooks";
import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
import { defaultHostAppearance } from "@/hosts/appearance";
vi.mock("@react-native-async-storage/async-storage", () => ({
default: {
@@ -146,6 +147,7 @@ function makeHost(): HostProfile {
return {
serverId: SERVER_ID,
label: "Render Count Host",
appearance: defaultHostAppearance(),
lifecycle: {},
connections: [],
preferredConnectionId: null,
packages/app/src/components/sidebar-workspace-list.tsx
+296 -169
View File
@@ -6,6 +6,8 @@ import {
ScrollView,
type GestureResponderEvent,
type PressableStateCallbackType,
type StyleProp,
type ViewStyle,
} from "react-native";
import { useMutation } from "@tanstack/react-query";
import { AdaptiveRenameModal } from "@/components/rename-modal";
@@ -19,6 +21,8 @@ import {
type ReactElement,
type MutableRefObject,
type Ref,
type ComponentProps,
type PropsWithChildren,
} from "react";
import { useTranslation } from "react-i18next";
import { router, usePathname, type Href } from "expo-router";
@@ -68,7 +72,13 @@ import {
import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
import { useSidebarViewStore } from "@/stores/sidebar-view-store";
import { useShowShortcutBadges } from "@/hooks/use-show-shortcut-badges";
import { ContextMenuTrigger, useContextMenu } from "@/components/ui/context-menu";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
useContextMenu,
} from "@/components/ui/context-menu";
import {
DropdownMenu,
DropdownMenuTrigger,
@@ -84,7 +94,10 @@ import { confirmDialog } from "@/utils/confirm-dialog";
import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
import { SidebarStatusWorkspaceList } from "@/components/sidebar/sidebar-status-list";
import type { StatusGroup } from "@/hooks/sidebar-status-view-model";
import { SidebarWorkspaceMenu } from "@/components/sidebar/sidebar-workspace-menu";
import {
SidebarWorkspaceContextMenu,
SidebarWorkspaceMenu,
} from "@/components/sidebar/sidebar-workspace-menu";
import { useLongPressDragInteraction } from "@/components/sidebar/use-long-press-drag-interaction";
import { PinnedSectionHeader } from "@/components/sidebar/pinned-section-header";
import { SidebarGroupToggleRow } from "@/components/sidebar/sidebar-group-toggle-row";
@@ -93,6 +106,7 @@ import {
SidebarWorkspaceRowFrame,
SidebarWorkspaceRowContent,
SidebarWorkspaceShortcutBadge,
resolveTrailingActionVisibility,
SidebarWorkspaceTrailingActionBase,
SidebarWorkspaceTrailingActionOverlay,
SidebarWorkspaceTrailingActionSlot,
@@ -126,7 +140,8 @@ import {
} from "@/constants/platform";
import { getDesktopHost } from "@/desktop/host";
import { OpenInFileManagerMenuItem } from "@/workspace/open-in-file-manager/menu-item";
import { useLocalDaemonServerId } from "@/hooks/use-is-local-daemon";
import { useLocalDaemonServerId, useLocalDaemonServerIdState } from "@/hooks/use-is-local-daemon";
import { selectHostBadges, type HostBadgeModel } from "@/hosts/appearance";
const workspaceKeyExtractor = (workspace: SidebarWorkspacePlacement) => workspace.workspaceKey;
@@ -212,7 +227,6 @@ interface SidebarWorkspaceListProps {
pinnedGroups: PinnedSidebarGroups;
projects: SidebarProjectEntry[];
workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
projectNamesByViewKey: Map<string, string>;
collapsedProjectKeys: ReadonlySet<string>;
onToggleProjectCollapsed: (projectViewKey: string) => void;
shortcutIndexByWorkspaceKey: Map<string, number>;
@@ -255,7 +269,9 @@ interface ProjectHeaderRowProps {
interface WorkspaceRowInnerProps {
workspace: SidebarWorkspaceEntry;
subtitle?: string | null;
hostBadge?: HostBadgeModel | null;
leadingProjectName?: string | null;
leadingProjectIconDataUri?: string | null;
selected: boolean;
shortcutNumber: number | null;
showShortcutBadge: boolean;
@@ -280,7 +296,7 @@ interface WorkspaceRowInnerProps {
reserveIdleStatusIndicatorSpace?: boolean;
}
export function PrBadge({ hint }: { hint: PrHint }) {
export function PrBadge({ hint, style }: { hint: PrHint; style?: StyleProp<ViewStyle> }) {
const { t } = useTranslation();
const [isHovered, setIsHovered] = useState(false);
@@ -299,6 +315,18 @@ export function PrBadge({ hint }: { hint: PrHint }) {
const handleHoverIn = useCallback(() => setIsHovered(true), []);
const handleHoverOut = useCallback(() => setIsHovered(false), []);
// Callers that place the badge in a list of icon+text rows pass that row's layout in, so the
// icon and text land on the same rails as their neighbors instead of on the badge's tighter
// inline spacing.
const pressableStyle = useCallback(
({ pressed }: PressableStateCallbackType) => [
prBadgeStyles.badge,
style,
pressed && prBadgeStyles.badgePressed,
],
[style],
);
const textStyle = isHovered
? [prBadgeStyles.text, prBadgeStyles.textHovered]
: prBadgeStyles.text;
@@ -317,7 +345,7 @@ export function PrBadge({ hint }: { hint: PrHint }) {
onPress={handlePress}
onHoverIn={handleHoverIn}
onHoverOut={handleHoverOut}
style={prBadgePressableStyle}
style={pressableStyle}
>
{isHovered ? (
<ThemedExternalLink size={12} uniProps={iconUniProps} />
@@ -332,10 +360,6 @@ export function PrBadge({ hint }: { hint: PrHint }) {
);
}
function prBadgePressableStyle({ pressed }: PressableStateCallbackType) {
return [prBadgeStyles.badge, pressed && prBadgeStyles.badgePressed];
}
function projectKebabStyle({
hovered = false,
}: PressableStateCallbackType & { hovered?: boolean }) {
@@ -382,9 +406,11 @@ const prBadgeStyles = StyleSheet.create((theme) => ({
}));
function ProjectRowTrailingActions({
project,
projectViewKey,
displayName,
worktreeTarget,
settingsTarget,
projectPath,
isHovered,
isMobileBreakpoint,
isProjectActive,
@@ -392,9 +418,11 @@ function ProjectRowTrailingActions({
onRemoveProject,
removeProjectStatus,
}: {
project: SidebarProjectEntry;
projectViewKey: string;
displayName: string;
worktreeTarget: SidebarProjectHostTarget | null;
settingsTarget: { serverId: string; projectId: string } | null;
projectPath: string;
isHovered: boolean;
isMobileBreakpoint: boolean;
isProjectActive: boolean;
@@ -403,9 +431,6 @@ function ProjectRowTrailingActions({
removeProjectStatus: "idle" | "pending" | "success";
}) {
const actionsVisible = isHovered || platformIsNative || isMobileBreakpoint;
const localDaemonServerId = useLocalDaemonServerId();
const localProjectPath = resolveSidebarProjectLocalPath(project, localDaemonServerId);
const settingsTarget = project.hosts[0] ?? null;
return (
<View style={styles.projectTrailingActions}>
{worktreeTarget ? (
@@ -414,7 +439,7 @@ function ProjectRowTrailingActions({
onPress={onBeginWorkspaceSetup}
visible={actionsVisible}
showShortcutHint={isProjectActive}
testID={`sidebar-project-new-worktree-${project.viewKey}`}
testID={`sidebar-project-new-worktree-${projectViewKey}`}
/>
) : null}
{onRemoveProject ? (
@@ -423,9 +448,9 @@ function ProjectRowTrailingActions({
pointerEvents={actionsVisible ? "auto" : "none"}
>
<ProjectKebabMenu
projectViewKey={project.viewKey}
projectViewKey={projectViewKey}
settingsTarget={settingsTarget}
projectPath={localProjectPath}
projectPath={projectPath}
onRemoveProject={onRemoveProject}
removeProjectStatus={removeProjectStatus}
/>
@@ -464,26 +489,6 @@ function ProjectKebabMenu({
removeProjectStatus: "idle" | "pending" | "success";
}) {
const { t } = useTranslation();
const toast = useToast();
const handleOpenProjectSettings = useCallback(() => {
if (!settingsTarget) return;
router.navigate(buildProjectSettingsRoute(settingsTarget.serverId, settingsTarget.projectId));
}, [settingsTarget]);
const canOpenProjectSettings = settingsTarget !== null;
// Desktop-only: open a second window that lands on this project via the same
// open-project flow as a CLI launch. The project stays visible here too — no
// ownership, no move.
const canOpenInNewWindow = getIsElectron() && projectPath.trim().length > 0;
const handleOpenInNewWindow = useCallback(() => {
const trimmedPath = projectPath.trim();
if (trimmedPath.length === 0) return;
void getDesktopHost()
?.window?.openNew?.({ pendingOpenProjectPath: trimmedPath })
?.catch((error) => {
console.warn("[sidebar] openNew failed", error);
toast.error(t("sidebar.project.actions.openNewWindowFailed"));
});
}, [projectPath, t, toast]);
return (
<DropdownMenu>
<DropdownMenuTrigger
@@ -496,42 +501,108 @@ function ProjectKebabMenu({
{renderKebabTriggerIcon}
</DropdownMenuTrigger>
<DropdownMenuContent align="end" width={220}>
{canOpenProjectSettings ? (
<DropdownMenuItem
testID={`sidebar-project-menu-open-settings-${projectViewKey}`}
leading={settingsLeadingIcon}
onSelect={handleOpenProjectSettings}
>
{t("sidebar.project.actions.openSettings")}
</DropdownMenuItem>
) : null}
{canOpenInNewWindow ? (
<DropdownMenuItem
testID={`sidebar-project-menu-open-new-window-${projectViewKey}`}
leading={openInNewWindowLeadingIcon}
onSelect={handleOpenInNewWindow}
>
{t("sidebar.project.actions.openNewWindow")}
</DropdownMenuItem>
) : null}
<OpenInFileManagerMenuItem
path={projectPath}
testID={`sidebar-project-menu-open-folder-${projectViewKey}`}
<ProjectMenuItems
surface="dropdown"
projectViewKey={projectViewKey}
settingsTarget={settingsTarget}
projectPath={projectPath}
onRemoveProject={onRemoveProject}
removeProjectStatus={removeProjectStatus}
/>
<DropdownMenuItem
testID={`sidebar-project-menu-remove-${projectViewKey}`}
leading={trash2LeadingIcon}
status={removeProjectStatus}
pendingLabel={t("sidebar.project.actions.removing")}
onSelect={onRemoveProject}
>
{t("sidebar.project.actions.remove")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
type ProjectMenuSurface = "context" | "dropdown";
function ProjectMenuItem({
surface,
children,
...props
}: PropsWithChildren<
Omit<ComponentProps<typeof DropdownMenuItem>, "children"> & { surface: ProjectMenuSurface }
>) {
if (surface === "context") {
return <ContextMenuItem {...props}>{children}</ContextMenuItem>;
}
return <DropdownMenuItem {...props}>{children}</DropdownMenuItem>;
}
function ProjectMenuItems({
surface,
projectViewKey,
settingsTarget,
projectPath,
onRemoveProject,
removeProjectStatus,
}: {
surface: ProjectMenuSurface;
projectViewKey: string;
settingsTarget: { serverId: string; projectId: string } | null;
projectPath: string;
onRemoveProject: () => void;
removeProjectStatus: "idle" | "pending" | "success";
}) {
const { t } = useTranslation();
const toast = useToast();
const handleOpenProjectSettings = useCallback(() => {
if (!settingsTarget) return;
router.navigate(buildProjectSettingsRoute(settingsTarget.serverId, settingsTarget.projectId));
}, [settingsTarget]);
const canOpenInNewWindow = getIsElectron() && projectPath.trim().length > 0;
const handleOpenInNewWindow = useCallback(() => {
const trimmedPath = projectPath.trim();
if (trimmedPath.length === 0) return;
void getDesktopHost()
?.window?.openNew?.({ pendingOpenProjectPath: trimmedPath })
?.catch((error) => {
console.warn("[sidebar] openNew failed", error);
toast.error(t("sidebar.project.actions.openNewWindowFailed"));
});
}, [projectPath, t, toast]);
return (
<>
{settingsTarget ? (
<ProjectMenuItem
surface={surface}
testID={`sidebar-project-menu-open-settings-${projectViewKey}`}
leading={settingsLeadingIcon}
onSelect={handleOpenProjectSettings}
>
{t("sidebar.project.actions.openSettings")}
</ProjectMenuItem>
) : null}
{canOpenInNewWindow ? (
<ProjectMenuItem
surface={surface}
testID={`sidebar-project-menu-open-new-window-${projectViewKey}`}
leading={openInNewWindowLeadingIcon}
onSelect={handleOpenInNewWindow}
>
{t("sidebar.project.actions.openNewWindow")}
</ProjectMenuItem>
) : null}
<OpenInFileManagerMenuItem
surface={surface}
path={projectPath}
testID={`sidebar-project-menu-open-folder-${projectViewKey}`}
/>
<ProjectMenuItem
surface={surface}
testID={`sidebar-project-menu-remove-${projectViewKey}`}
leading={trash2LeadingIcon}
status={removeProjectStatus}
pendingLabel={t("sidebar.project.actions.removing")}
onSelect={onRemoveProject}
>
{t("sidebar.project.actions.remove")}
</ProjectMenuItem>
</>
);
}
function WorkspaceRowRightGroup({
workspace,
isHovered,
@@ -572,8 +643,17 @@ function WorkspaceRowRightGroup({
const workspacePath = workspace.workspaceDirectory ?? workspace.projectRootPath;
const { t } = useTranslation();
const showShortcut = showShortcutBadge && shortcutNumber !== null;
const showKebab = Boolean(onArchive && (isHovered || isTouchPlatform));
const showKebabInSlot = showKebab && !showShortcut;
const {
showDiffStat,
showKebab: showKebabInSlot,
showScrim,
} = resolveTrailingActionVisibility({
hasDiffStat: Boolean(workspace.diffStat),
hasArchiveAction: Boolean(onArchive),
isHovered,
isTouchPlatform,
showShortcut,
});
const shouldRenderActionSlot = Boolean(onArchive || workspace.diffStat);
return (
@@ -583,9 +663,7 @@ function WorkspaceRowRightGroup({
) : null}
{shouldRenderActionSlot ? (
<SidebarWorkspaceTrailingActionSlot>
<SidebarWorkspaceTrailingActionBase
visible={Boolean(workspace.diffStat && !showKebabInSlot && !showShortcut)}
>
<SidebarWorkspaceTrailingActionBase visible={showDiffStat}>
{workspace.diffStat ? (
<DiffStat
additions={workspace.diffStat.additions}
@@ -593,7 +671,7 @@ function WorkspaceRowRightGroup({
/>
) : null}
</SidebarWorkspaceTrailingActionBase>
<SidebarWorkspaceTrailingActionOverlay visible={showKebabInSlot}>
<SidebarWorkspaceTrailingActionOverlay visible={showKebabInSlot} scrim={showScrim}>
{onArchive ? (
<SidebarWorkspaceMenu
workspaceKey={workspace.workspaceKey}
@@ -784,7 +862,11 @@ function ProjectHeaderRow({
dragHandleProps,
}: ProjectHeaderRowProps) {
const [isHovered, setIsHovered] = useState(false);
const [contextMenuOpen, setContextMenuOpen] = useState(false);
const isMobileBreakpoint = useIsCompactFormFactor();
const localDaemonServerId = useLocalDaemonServerId();
const projectPath = resolveSidebarProjectLocalPath(project, localDaemonServerId);
const settingsTarget = project.hosts[0] ?? null;
const handleBeginWorkspaceSetup = useCallback(() => {
if (!worktreeTarget) {
return;
@@ -818,8 +900,14 @@ function ProjectHeaderRow({
onPress();
}, [interaction.didLongPressRef, onPress]);
const handlePointerEnter = useCallback(() => setIsHovered(true), []);
const handlePointerEnter = useCallback(() => {
if (!contextMenuOpen) setIsHovered(true);
}, [contextMenuOpen]);
const handlePointerLeave = useCallback(() => setIsHovered(false), []);
const handleContextMenuOpenChange = useCallback((open: boolean) => {
setContextMenuOpen(open);
if (open) setIsHovered(false);
}, []);
const projectRowStyle = useCallback(
({ pressed }: PressableStateCallbackType) => [
@@ -852,9 +940,11 @@ function ProjectHeaderRow({
</View>
</View>
<ProjectRowTrailingActions
project={project}
projectViewKey={project.viewKey}
displayName={displayName}
worktreeTarget={worktreeTarget}
settingsTarget={settingsTarget}
projectPath={projectPath}
isHovered={isHovered}
isMobileBreakpoint={isMobileBreakpoint}
isProjectActive={isProjectActive}
@@ -870,8 +960,32 @@ function ProjectHeaderRow({
</>
);
if (menuController) {
if (!onRemoveProject) {
return (
<View
{...dragAttributes}
{...dragHandleProps?.listeners}
ref={dragHandleProps?.setActivatorNodeRef as unknown as Ref<View>}
onPointerEnter={handlePointerEnter}
onPointerLeave={handlePointerLeave}
>
<Pressable
accessibilityRole="button"
style={projectRowStyle}
onPressIn={interaction.handlePressIn}
onTouchMove={interaction.handleTouchMove}
onPressOut={interaction.handlePressOut}
onPress={handlePress}
testID={`sidebar-project-row-${project.viewKey}`}
>
{rowChildren}
</Pressable>
</View>
);
}
return (
<ContextMenu open={contextMenuOpen} onOpenChange={handleContextMenuOpenChange}>
<View
{...dragAttributes}
{...dragHandleProps?.listeners}
@@ -892,35 +1006,29 @@ function ProjectHeaderRow({
{rowChildren}
</ContextMenuTrigger>
</View>
);
}
return (
<View
{...dragAttributes}
{...dragHandleProps?.listeners}
ref={dragHandleProps?.setActivatorNodeRef as unknown as Ref<View>}
onPointerEnter={handlePointerEnter}
onPointerLeave={handlePointerLeave}
>
<Pressable
accessibilityRole="button"
style={projectRowStyle}
onPressIn={interaction.handlePressIn}
onTouchMove={interaction.handleTouchMove}
onPressOut={interaction.handlePressOut}
onPress={handlePress}
testID={`sidebar-project-row-${project.viewKey}`}
<ContextMenuContent
align="start"
width={220}
testID={`sidebar-project-context-menu-${project.viewKey}`}
>
{rowChildren}
</Pressable>
</View>
<ProjectMenuItems
surface="context"
projectViewKey={project.viewKey}
settingsTarget={settingsTarget}
projectPath={projectPath}
onRemoveProject={onRemoveProject}
removeProjectStatus={removeProjectStatus}
/>
</ContextMenuContent>
</ContextMenu>
);
}
function WorkspaceRowInner({
workspace,
subtitle,
hostBadge,
leadingProjectName,
leadingProjectIconDataUri,
selected,
shortcutNumber,
showShortcutBadge,
@@ -968,7 +1076,7 @@ function WorkspaceRowInner({
return (
<SidebarWorkspaceRowFrame workspace={workspace} isDragging={isDragging}>
{({ isHovered, hoverHandlers }) => {
{({ isHovered, contextMenuOpen, onContextMenuOpenChange, hoverHandlers }) => {
const isDesktop = !isTouchPlatform;
const showScriptsIcon = isDesktop && workspace.hasRunningScripts;
const hasRunningService = workspace.scripts.some(
@@ -991,7 +1099,24 @@ function WorkspaceRowInner({
style={styles.workspaceRowContainer}
{...hoverHandlers}
>
<Pressable
<SidebarWorkspaceContextMenu
contextMenuOpen={contextMenuOpen}
onContextMenuOpenChange={onContextMenuOpenChange}
workspace={workspace}
leadingProjectName={leadingProjectName}
hostBadgeLabel={hostBadge?.label}
workspaceKey={workspace.workspaceKey}
onCopyPath={onCopyPath}
onCopyBranchName={onCopyBranchName}
onRename={onRename}
onArchive={onArchive}
archiveLabel={archiveLabel}
archiveStatus={archiveStatus}
archivePendingLabel={archivePendingLabel}
archiveShortcutKeys={archiveShortcutKeys}
isPinned={isPinned}
onTogglePin={onTogglePin}
openInFileManagerPath={workspace.workspaceDirectory}
disabled={isArchiving}
aria-selected={selected}
accessibilityRole="button"
@@ -1005,7 +1130,9 @@ function WorkspaceRowInner({
>
<SidebarWorkspaceRowContent
workspace={workspace}
subtitle={subtitle}
hostBadge={hostBadge}
leadingProjectName={leadingProjectName}
leadingProjectIconDataUri={leadingProjectIconDataUri}
scriptIconKind={scriptIconKind}
isHovered={isHovered}
isLoading={isArchiving || isCreating}
@@ -1033,7 +1160,7 @@ function WorkspaceRowInner({
onTogglePin={onTogglePin}
/>
</SidebarWorkspaceRowContent>
</Pressable>
</SidebarWorkspaceContextMenu>
</View>
);
}}
@@ -1043,7 +1170,9 @@ function WorkspaceRowInner({
function WorkspaceRowWithMenu({
workspace,
subtitle,
hostBadge,
leadingProjectName,
leadingProjectIconDataUri,
selected,
shortcutNumber,
showShortcutBadge,
@@ -1058,7 +1187,9 @@ function WorkspaceRowWithMenu({
isCreating = false,
}: {
workspace: SidebarWorkspaceEntry;
subtitle?: string | null;
hostBadge?: HostBadgeModel | null;
leadingProjectName?: string | null;
leadingProjectIconDataUri?: string | null;
selected: boolean;
shortcutNumber: number | null;
showShortcutBadge: boolean;
@@ -1186,7 +1317,9 @@ function WorkspaceRowWithMenu({
<>
<WorkspaceRowInner
workspace={workspace}
subtitle={subtitle}
hostBadge={hostBadge}
leadingProjectName={leadingProjectName}
leadingProjectIconDataUri={leadingProjectIconDataUri}
selected={selected}
shortcutNumber={shortcutNumber}
showShortcutBadge={showShortcutBadge}
@@ -1227,7 +1360,9 @@ function WorkspaceRowWithMenu({
interface WorkspaceRowItemProps {
workspace: SidebarWorkspacePlacement;
workspaceEntry: SidebarWorkspaceEntry | null;
subtitle?: string | null;
hostBadge?: HostBadgeModel | null;
leadingProjectName?: string | null;
leadingProjectIconDataUri?: string | null;
shortcutNumber: number | null;
showShortcutBadge: boolean;
canCopyBranchName: boolean;
@@ -1246,7 +1381,9 @@ interface WorkspaceRowItemProps {
function WorkspaceRowItem({
workspace,
workspaceEntry,
subtitle,
hostBadge,
leadingProjectName,
leadingProjectIconDataUri,
shortcutNumber,
showShortcutBadge,
canCopyBranchName,
@@ -1272,7 +1409,9 @@ function WorkspaceRowItem({
return (
<WorkspaceRow
workspaceEntry={workspaceEntry}
subtitle={subtitle}
hostBadge={hostBadge}
leadingProjectName={leadingProjectName}
leadingProjectIconDataUri={leadingProjectIconDataUri}
shortcutNumber={shortcutNumber}
showShortcutBadge={showShortcutBadge}
canCopyBranchName={canCopyBranchName}
@@ -1313,7 +1452,9 @@ function areWorkspaceRowItemPropsEqual(
return (
previous.workspace === next.workspace &&
previous.workspaceEntry === next.workspaceEntry &&
previous.subtitle === next.subtitle &&
previous.hostBadge === next.hostBadge &&
previous.leadingProjectName === next.leadingProjectName &&
previous.leadingProjectIconDataUri === next.leadingProjectIconDataUri &&
previous.shortcutNumber === next.shortcutNumber &&
previous.showShortcutBadge === next.showShortcutBadge &&
previous.canCopyBranchName === next.canCopyBranchName &&
@@ -1333,7 +1474,9 @@ const MemoWorkspaceRowItem = memo(WorkspaceRowItem, areWorkspaceRowItemPropsEqua
function WorkspaceRow({
workspaceEntry,
subtitle,
hostBadge,
leadingProjectName,
leadingProjectIconDataUri,
shortcutNumber,
showShortcutBadge,
onPress,
@@ -1348,7 +1491,9 @@ function WorkspaceRow({
selected,
}: {
workspaceEntry: SidebarWorkspaceEntry | null;
subtitle?: string | null;
hostBadge?: HostBadgeModel | null;
leadingProjectName?: string | null;
leadingProjectIconDataUri?: string | null;
shortcutNumber: number | null;
showShortcutBadge: boolean;
onPress: () => void;
@@ -1369,7 +1514,9 @@ function WorkspaceRow({
return (
<WorkspaceRowWithMenu
workspace={workspaceEntry}
subtitle={subtitle}
hostBadge={hostBadge}
leadingProjectName={leadingProjectName}
leadingProjectIconDataUri={leadingProjectIconDataUri}
selected={selected}
shortcutNumber={shortcutNumber}
showShortcutBadge={showShortcutBadge}
@@ -1407,8 +1554,7 @@ function ProjectBlock({
dragGestureHostPresented,
creatingWorkspaceIds,
activeWorkspaceSelection,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
supportsMultiplicityByServerId,
supportsPinningByServerId,
onToggleWorkspacePin,
@@ -1433,8 +1579,7 @@ function ProjectBlock({
dragGestureHostPresented?: boolean;
creatingWorkspaceIds: ReadonlySet<string>;
activeWorkspaceSelection: ActiveWorkspaceSelection | null;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
hostBadgeByServerId: ReadonlyMap<string, HostBadgeModel>;
supportsMultiplicityByServerId: ReadonlyMap<string, boolean>;
supportsPinningByServerId: ReadonlyMap<string, boolean>;
onToggleWorkspacePin: ToggleSidebarWorkspacePin;
@@ -1481,9 +1626,7 @@ function ProjectBlock({
<MemoWorkspaceRowItem
workspace={item}
workspaceEntry={workspaceEntriesByKey.get(item.workspaceKey) ?? null}
subtitle={
showHostLabels ? (hostLabelByServerId.get(item.serverId) ?? item.serverId) : null
}
hostBadge={hostBadgeByServerId.get(item.serverId) ?? null}
shortcutNumber={shortcutIndexByWorkspaceKey.get(item.workspaceKey) ?? null}
showShortcutBadge={showShortcutBadges}
canCopyBranchName={project.projectKind === "git"}
@@ -1503,10 +1646,9 @@ function ProjectBlock({
project.projectKind,
onToggleWorkspacePin,
supportsPinningByServerId,
showHostLabels,
activeWorkspaceSelection,
creatingWorkspaceIds,
hostLabelByServerId,
hostBadgeByServerId,
onWorkspacePress,
selectionEnabled,
shortcutIndexByWorkspaceKey,
@@ -1681,8 +1823,7 @@ function areProjectBlockPropsEqual(previous: ProjectBlockProps, next: ProjectBlo
previous.selectionEnabled === next.selectionEnabled &&
previous.showShortcutBadges === next.showShortcutBadges &&
previous.shortcutIndexByWorkspaceKey === next.shortcutIndexByWorkspaceKey &&
previous.hostLabelByServerId === next.hostLabelByServerId &&
previous.showHostLabels === next.showHostLabels &&
previous.hostBadgeByServerId === next.hostBadgeByServerId &&
previous.supportsMultiplicityByServerId === next.supportsMultiplicityByServerId &&
previous.supportsPinningByServerId === next.supportsPinningByServerId &&
previous.onToggleWorkspacePin === next.onToggleWorkspacePin &&
@@ -1734,7 +1875,6 @@ export function SidebarWorkspaceList({
pinnedGroups,
projects,
workspaceEntriesByKey,
projectNamesByViewKey,
collapsedProjectKeys,
onToggleProjectCollapsed,
shortcutIndexByWorkspaceKey,
@@ -1750,18 +1890,22 @@ export function SidebarWorkspaceList({
}: SidebarWorkspaceListProps) {
const pathname = usePathname();
const hosts = useHosts();
const hostLabelByServerId = useMemo(() => {
const labels = new Map<string, string>();
for (const host of hosts) {
labels.set(host.serverId, host.label?.trim() || host.serverId);
}
return labels;
}, [hosts]);
const localServerId = useLocalDaemonServerId();
const localDaemon = useLocalDaemonServerIdState();
const hostBadgeByServerId = useMemo(
() =>
selectHostBadges({
hosts,
localServerId,
localHostResolutionPending: localDaemon.status !== "resolved",
enabled: shouldShowSidebarHostLabels(projects),
}),
[hosts, localDaemon.status, localServerId, projects],
);
const serverIds = useMemo(() => hosts.map((host) => host.serverId), [hosts]);
const supportsMultiplicityByServerId = useHostFeatureMap(serverIds, "workspaceMultiplicity");
const supportsPinningByServerId = useHostFeatureMap(serverIds, "workspacePinning");
const onToggleWorkspacePin = useSidebarWorkspacePinController();
const showHostLabels = useMemo(() => shouldShowSidebarHostLabels(projects), [projects]);
// Status mode drops the project grouping, so its rows carry their own project
// icon. Project mode fetches the same icons inside ProjectModeList for its
// project headers, so only the active mode requests them.
@@ -1779,12 +1923,10 @@ export function SidebarWorkspaceList({
statusGroups={statusGroups}
pinnedGroups={pinnedGroups}
workspaceEntriesByKey={workspaceEntriesByKey}
projectNamesByViewKey={projectNamesByViewKey}
projectIconByProjectViewKey={statusProjectIconByProjectViewKey}
shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
onWorkspacePress={onWorkspacePress}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
hostBadgeByServerId={hostBadgeByServerId}
supportsPinningByServerId={supportsPinningByServerId}
onToggleWorkspacePin={onToggleWorkspacePin}
listHeaderComponent={listHeaderComponent}
@@ -1804,8 +1946,7 @@ export function SidebarWorkspaceList({
parentGestureRef={parentGestureRef}
dragGestureHostPresented={dragGestureHostPresented}
pathname={pathname}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
hostBadgeByServerId={hostBadgeByServerId}
supportsMultiplicityByServerId={supportsMultiplicityByServerId}
supportsPinningByServerId={supportsPinningByServerId}
onToggleWorkspacePin={onToggleWorkspacePin}
@@ -1819,12 +1960,10 @@ function SidebarStatusModeWrapper({
statusGroups,
pinnedGroups,
workspaceEntriesByKey,
projectNamesByViewKey,
projectIconByProjectViewKey,
shortcutIndexByWorkspaceKey: _projectShortcutIndex,
onWorkspacePress,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
supportsPinningByServerId,
onToggleWorkspacePin,
listHeaderComponent,
@@ -1832,12 +1971,10 @@ function SidebarStatusModeWrapper({
statusGroups: StatusGroup[];
pinnedGroups: PinnedSidebarGroups;
workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
projectNamesByViewKey: Map<string, string>;
projectIconByProjectViewKey: ReadonlyMap<string, string | null>;
shortcutIndexByWorkspaceKey: Map<string, number>;
onWorkspacePress?: () => void;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
hostBadgeByServerId: ReadonlyMap<string, HostBadgeModel>;
supportsPinningByServerId: ReadonlyMap<string, boolean>;
onToggleWorkspacePin: ToggleSidebarWorkspacePin;
listHeaderComponent?: ReactElement | null;
@@ -1851,13 +1988,11 @@ function SidebarStatusModeWrapper({
const entry = workspaceEntriesByKey.get(workspace.workspaceKey);
return entry ? [entry] : [];
})}
projectNamesByViewKey={projectNamesByViewKey}
projectIconByProjectViewKey={projectIconByProjectViewKey}
shortcutIndexByWorkspaceKey={_projectShortcutIndex}
showShortcutBadges={showShortcutBadges}
onWorkspacePress={onWorkspacePress}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
hostBadgeByServerId={hostBadgeByServerId}
supportsPinningByServerId={supportsPinningByServerId}
onToggleWorkspacePin={onToggleWorkspacePin}
listHeaderComponent={listHeaderComponent}
@@ -1879,18 +2014,13 @@ function ProjectModeList({
parentGestureRef,
dragGestureHostPresented,
pathname,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
supportsMultiplicityByServerId,
supportsPinningByServerId,
onToggleWorkspacePin,
}: Omit<
SidebarWorkspaceListProps,
"statusGroups" | "projectNamesByViewKey" | "groupMode" | "isRefreshing" | "onRefresh"
> & {
}: Omit<SidebarWorkspaceListProps, "statusGroups" | "groupMode" | "isRefreshing" | "onRefresh"> & {
pathname: string;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
hostBadgeByServerId: ReadonlyMap<string, HostBadgeModel>;
supportsMultiplicityByServerId: ReadonlyMap<string, boolean>;
supportsPinningByServerId: ReadonlyMap<string, boolean>;
onToggleWorkspacePin: ToggleSidebarWorkspacePin;
@@ -2095,8 +2225,7 @@ function ProjectModeList({
dragGestureHostPresented={dragGestureHostPresented}
creatingWorkspaceIds={creatingWorkspaceIds}
activeWorkspaceSelection={activeWorkspaceSelection}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
hostBadgeByServerId={hostBadgeByServerId}
supportsMultiplicityByServerId={supportsMultiplicityByServerId}
supportsPinningByServerId={supportsPinningByServerId}
onToggleWorkspacePin={onToggleWorkspacePin}
@@ -2108,8 +2237,7 @@ function ProjectModeList({
activeWorkspaceSelection,
handleWorktreeCreated,
handleWorkspaceReorder,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
supportsMultiplicityByServerId,
supportsPinningByServerId,
onToggleWorkspacePin,
@@ -2134,17 +2262,16 @@ function ProjectModeList({
const renderPinnedChat = useCallback(
(workspace: SidebarWorkspacePlacement) => {
// A hoisted chat loses its project context, so surface the project name (plus
// host when the sidebar spans multiple hosts) as the subtitle.
const hostLabel = showHostLabels
? (hostLabelByServerId.get(workspace.serverId) ?? workspace.serverId)
: null;
return (
<MemoWorkspaceRowItem
key={workspace.workspaceKey}
workspace={workspace}
workspaceEntry={workspaceEntriesByKey.get(workspace.workspaceKey) ?? null}
subtitle={hostLabel ? `${workspace.projectName} · ${hostLabel}` : workspace.projectName}
hostBadge={hostBadgeByServerId.get(workspace.serverId) ?? null}
leadingProjectName={workspace.projectName}
leadingProjectIconDataUri={
projectIconByProjectViewKey.get(workspace.projectViewKey) ?? null
}
shortcutNumber={shortcutIndexByWorkspaceKey.get(workspace.workspaceKey) ?? null}
showShortcutBadge={showShortcutBadges}
canCopyBranchName={workspace.projectKind === "git"}
@@ -2160,14 +2287,14 @@ function ProjectModeList({
[
activeWorkspaceSelection,
creatingWorkspaceIds,
hostLabelByServerId,
hostBadgeByServerId,
onWorkspacePress,
selectionEnabled,
shortcutIndexByWorkspaceKey,
showHostLabels,
showShortcutBadges,
supportsPinningByServerId,
onToggleWorkspacePin,
projectIconByProjectViewKey,
workspaceEntriesByKey,
],
);
packages/app/src/components/sidebar/host-badge.tsx
+91
View File
@@ -0,0 +1,91 @@
import { Text, View } from "react-native";
import { StyleSheet, withUnistyles } from "react-native-unistyles";
import { Server } from "lucide-react-native";
import { HOST_COLORS, type HostColor } from "@/hosts/appearance";
import { identityColor } from "@/styles/identity-colors";
import type { Theme } from "@/styles/theme";
const ThemedServer = withUnistyles(Server);
const MAX_NAMED_BADGE_WIDTH = 96;
// The identity table is theme-independent, so its icon mapping is fixed for the life of the
// module. It must not be rebuilt per render: a fresh `uniProps` identity makes withUnistyles
// re-subscribe every pass.
function buildIconMappings(): Record<HostColor, (theme: Theme) => { color: string }> {
const byColor = {} as Record<HostColor, (theme: Theme) => { color: string }>;
for (const color of HOST_COLORS) {
byColor[color] =
color === "none"
? (theme: Theme) => ({ color: theme.colors.foregroundMuted })
: () => ({ color: identityColor(color) });
}
return byColor;
}
const ICON_MAPPINGS = buildIconMappings();
/**
* Which host a workspace lives on, as a pill after the title. Only rendered in multi-host
* setups — see selectHostBadges. It's a badge rather than a second line of text because the
* row has to stay scannable at one line per workspace.
*
*/
export function HostBadge({
serverId,
label,
color,
showLabel,
}: {
serverId: string;
label: string;
color: HostColor;
showLabel: boolean;
}) {
return (
<View
style={[hostBadgeStyles.badge, showLabel ? null : hostBadgeStyles.badgeIconOnly]}
testID={`sidebar-host-badge-${serverId}`}
>
<ThemedServer size={9} uniProps={ICON_MAPPINGS[color]} />
{showLabel ? (
<Text style={hostBadgeStyles.text} numberOfLines={1}>
{label}
</Text>
) : null}
</View>
);
}
const hostBadgeStyles = StyleSheet.create((theme) => ({
// Sized off the title's 20pt line box so the pill never grows the row. A named badge must
// leave room for the workspace title and trailing actions, even when a host has an arbitrary
// custom label. The full host name remains in the row's accessible label and hover card.
badge: {
flexDirection: "row",
alignItems: "center",
gap: 3,
height: 16,
paddingLeft: 4,
paddingRight: 6,
borderRadius: theme.borderRadius.full,
backgroundColor: theme.colors.surface2,
maxWidth: MAX_NAMED_BADGE_WIDTH,
minWidth: 0,
flexShrink: 1,
},
// Icon-only drops the label, so the asymmetric padding that made room for text leaves a
// lopsided pill. Symmetric padding recenters the icon.
badgeIconOnly: {
paddingLeft: 4,
paddingRight: 4,
flexShrink: 0,
},
text: {
fontSize: theme.fontSize.xs,
fontWeight: theme.fontWeight.normal,
lineHeight: 14,
color: theme.colors.foregroundMuted,
flexShrink: 1,
minWidth: 0,
},
}));
packages/app/src/components/sidebar/project-leading-visual.tsx
+95 -87
View File
@@ -1,21 +1,27 @@
import type { ReactNode } from "react";
import { ActivityIndicator, View, type ViewStyle } from "react-native";
import { StyleSheet, withUnistyles } from "react-native-unistyles";
import { ChevronDown, ChevronRight, CircleAlert } from "lucide-react-native";
import { ProjectIconView } from "@/components/project-icon-view";
import { SyncedLoader } from "@/components/synced-loader";
import { PulsingStatusDot } from "@/components/sidebar/pulsing-status-dot";
import { STATUS_BUCKET_LABELS } from "@/hooks/sidebar-status-view-model";
import type { Theme } from "@/styles/theme";
import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
import { getProjectStatusBadgeContent } from "@/utils/project-status-badge-content";
import {
getProjectStatusBadgeContent,
type ProjectStatusBadgeContent,
type ProjectStatusBadgeDotBucket,
} from "@/utils/project-status-badge-content";
import { projectIconPlaceholderLabelFromDisplayName } from "@/utils/project-display-name";
import { getStatusDotColor } from "@/utils/status-dot-color";
// Every surfaced status shares one badge shell, so the ring never changes size or position
// Every surfaced status shares one badge shell, so the badge never changes size or position
// between states. Only the thing inside it changes.
const STATUS_BADGE_SIZE = 14;
const STATUS_BADGE_BORDER_WIDTH = 1;
// Centers the badge on the icon's bottom-right corner: half in, half out.
const STATUS_BADGE_OFFSET = -(STATUS_BADGE_SIZE / 2);
// How far the badge overhangs the icon's bottom-right corner. Well short of half the badge:
// centered on the corner it reads as hanging off the icon rather than sitting on it, and the
// sidebar row has no padding there to absorb the overhang.
const STATUS_BADGE_OFFSET = -5;
// Both glyphs must be EVEN. The shell's interior is 12pt (14 minus the 1pt ring on each side),
// so a centered glyph of size N sits at a (12 - N) / 2 offset — fractional for odd N, which the
// browser snaps to a device-pixel boundary and renders visibly off-center (an odd size measured
@@ -26,17 +32,12 @@ const STATUS_BADGE_OFFSET = -(STATUS_BADGE_SIZE / 2);
// against the 8pt dot — the two states read as the same-diameter disc.
const STATUS_BADGE_DOT_SIZE = 8;
const STATUS_BADGE_ALERT_SIZE = 10;
// SyncedLoader clamps its dot size at 2px, so sizes 5-10 all render the same 5x8 dot grid.
const STATUS_BADGE_LOADER_SIZE = 7;
// The dot-comet's 6 divs are geometrically centered, but the snake reads a hair right inside
// the round circle. This optical nudge (pt, leftward) lands its visual center on the circle
// center — the play-button-triangle trick. Dialed in visually: -0.67pt ≈ 2 device px left at
// 3x (a full -1pt / 3px read a touch too far left).
const STATUS_BADGE_LOADER_NUDGE_X = -0.67;
// Matches the workspace title's lineHeight (sidebar-workspace-row-content's
// workspaceBranchText) so the icon centers on the title rather than floating above it.
const LEADING_SLOT_HEIGHT = 20;
const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
const ThemedCircleAlert = withUnistyles(CircleAlert);
const ThemedSyncedLoader = withUnistyles(SyncedLoader);
const foregroundMutedColorMapping = (theme: Theme) => ({
color: theme.colors.foregroundMuted,
@@ -44,12 +45,6 @@ const foregroundMutedColorMapping = (theme: Theme) => ({
const amberColorMapping = (theme: Theme) => ({
color: theme.colors.palette.amber[500],
});
const syncedLoaderColorMapping = (theme: Theme) => ({
color:
theme.colorScheme === "light"
? theme.colors.palette.amber[700]
: theme.colors.palette.amber[500],
});
/**
* Leading slot of a sidebar project row: chevron on hover, archive spinner while removing,
@@ -73,9 +68,6 @@ export function ProjectLeadingVisual({
showChevron?: boolean;
isArchiving?: boolean;
}) {
const placeholderLabel = projectIconPlaceholderLabelFromDisplayName(displayName);
const placeholderInitial = placeholderLabel.charAt(0).toUpperCase();
if (showChevron && chevron !== null) {
return (
<View style={styles.projectLeadingVisualSlot}>
@@ -95,7 +87,7 @@ export function ProjectLeadingVisual({
return (
<ProjectStatusIndicator
iconDataUri={iconDataUri}
placeholderInitial={placeholderInitial}
displayName={displayName}
projectViewKey={projectViewKey}
statusBucket={statusBucket}
/>
@@ -103,46 +95,65 @@ export function ProjectLeadingVisual({
}
// The project icon (the lettered box) is what marks a row as a *project* rather than a
// workspace, so it always stays. Status rides along as a corner badge instead of replacing
// the icon: "working" and "needs input" keep the same amber loader/alert glyph a workspace
// row uses, the quieter buckets get a dot, and "done" shows nothing. Every one of those sits
// in the identical ringed badge, so the badge reads as one fixed shell across all states.
// workspace, so it always stays and status annotates it instead of replacing it. Every
// surfaced bucket lands in the identical corner badge — an amber alert glyph for needs_input,
// a colored disc for the rest, nothing for done — so the badge reads as one fixed shell and
// only its contents change.
export function ProjectStatusIndicator({
iconDataUri,
placeholderInitial,
displayName,
projectViewKey,
statusBucket,
loading = false,
testID,
}: {
iconDataUri: string | null;
placeholderInitial: string;
displayName: string;
projectViewKey: string;
statusBucket: SidebarStateBucket | null;
loading?: boolean;
testID?: string;
}) {
const placeholderInitial = projectIconPlaceholderLabelFromDisplayName(displayName)
.charAt(0)
.toUpperCase();
// A row that's still starting up and a row that's working are both "busy", and at 8pt
// there's no room to draw the difference — so `loading` just resolves to the running bucket
// and they share one badge.
const badgeBucket = loading ? "running" : statusBucket;
const badgeContent = getProjectStatusBadgeContent(badgeBucket);
return (
<View
style={styles.projectLeadingVisualSlot}
testID={
statusBucket && statusBucket !== "done"
testID ??
(statusBucket && statusBucket !== "done"
? `project-status-indicator-${statusBucket}`
: "project-icon-only"
: "project-icon-only")
}
>
<ProjectIcon
iconDataUri={iconDataUri}
placeholderInitial={placeholderInitial}
projectViewKey={projectViewKey}
/>
<ProjectStatusBadge statusBucket={statusBucket} />
<View style={styles.projectIconBox}>
<ProjectIcon
iconDataUri={iconDataUri}
placeholderInitial={placeholderInitial}
projectViewKey={projectViewKey}
/>
{badgeContent === null || badgeBucket === null ? null : (
<ProjectStatusBadge content={badgeContent} statusBucket={badgeBucket} />
)}
</View>
</View>
);
}
function ProjectStatusBadge({ statusBucket }: { statusBucket: SidebarStateBucket | null }) {
const content = getProjectStatusBadgeContent(statusBucket);
if (content === null || statusBucket === null) {
return null;
}
function ProjectStatusBadge({
content,
statusBucket,
}: {
content: ProjectStatusBadgeContent;
statusBucket: SidebarStateBucket;
}) {
return (
<View
role="status"
@@ -150,28 +161,20 @@ function ProjectStatusBadge({ statusBucket }: { statusBucket: SidebarStateBucket
style={styles.statusBadge}
testID="project-status-badge"
>
{renderProjectStatusBadgeContent(content)}
{content.kind === "alert" ? (
<ThemedCircleAlert size={STATUS_BADGE_ALERT_SIZE} uniProps={amberColorMapping} />
) : (
<ProjectStatusDot bucket={content.bucket} />
)}
</View>
);
}
function renderProjectStatusBadgeContent(
content: NonNullable<ReturnType<typeof getProjectStatusBadgeContent>>,
): ReactNode {
switch (content.kind) {
case "loader":
// Nudged left a hair so the comet's visual center sits on the circle center (see the
// nudge constant). The wrapper carries the transform; the loader itself is untouched.
return (
<View style={styles.runningLoaderNudge}>
<ThemedSyncedLoader size={STATUS_BADGE_LOADER_SIZE} uniProps={syncedLoaderColorMapping} />
</View>
);
case "alert":
return <ThemedCircleAlert size={STATUS_BADGE_ALERT_SIZE} uniProps={amberColorMapping} />;
case "dot":
return <View testID="project-status-dot" style={getStatusDotColorStyle(content.bucket)} />;
function ProjectStatusDot({ bucket }: { bucket: ProjectStatusBadgeDotBucket }) {
if (bucket !== "running") {
return <View testID="project-status-dot" style={getStatusDotColorStyle(bucket)} />;
}
return <PulsingStatusDot testID="project-status-dot" style={styles.statusDotRunning} />;
}
function ProjectIcon({
@@ -205,29 +208,43 @@ function ProjectInlineChevron({ chevron }: { chevron: "expand" | "collapse" | nu
return <ChevronRight size={14} color="#9ca3af" />;
}
function getStatusDotColorStyle(bucket: "failed" | "attention"): ViewStyle {
function getStatusDotColorStyle(
bucket: Exclude<ProjectStatusBadgeDotBucket, "running">,
): ViewStyle {
return bucket === "failed" ? styles.statusDotFailed : styles.statusDotAttention;
}
const styles = StyleSheet.create((theme) => {
// Dot statuses sit *inside* the shell rather than replacing it, so "ready to review" and
// "failed" carry the same ring as the loader and alert. The geometry is shared here and
// baked into each colored variant so the style prop stays a single stable object.
const statusDotBase = {
width: STATUS_BADGE_DOT_SIZE,
height: STATUS_BADGE_DOT_SIZE,
borderRadius: theme.borderRadius.full,
} as const;
// Dot statuses sit *inside* the shell rather than replacing it, so they carry the same ring
// the alert does. The geometry is shared here and baked into each colored variant so the
// style prop stays a single stable object; the colors come from the one bucket-to-color map
// so this badge can't drift from the status dots everywhere else.
const statusDot = (bucket: ProjectStatusBadgeDotBucket) =>
({
width: STATUS_BADGE_DOT_SIZE,
height: STATUS_BADGE_DOT_SIZE,
borderRadius: theme.borderRadius.full,
backgroundColor: getStatusDotColor({ theme, bucket }) ?? undefined,
}) as const;
return {
// The slot is as tall as the title's line box, not as tall as the icon, and centers the
// icon inside it. Rows lay their leading visual out with alignItems:flex-start, so a
// 16pt slot next to a 20pt line box puts the icon 2pt above the title and the kebab —
// which is why the workspace status indicator is also 20 tall. Keep the two in step.
projectLeadingVisualSlot: {
position: "relative",
width: theme.iconSize.md,
height: theme.iconSize.md,
height: LEADING_SLOT_HEIGHT,
flexShrink: 0,
alignItems: "center",
justifyContent: "center",
},
// Anchors the corner badge to the icon rather than to the taller slot.
projectIconBox: {
position: "relative",
width: theme.iconSize.md,
height: theme.iconSize.md,
},
projectIcon: {
width: "100%",
height: "100%",
@@ -243,9 +260,9 @@ const styles = StyleSheet.create((theme) => {
projectIconFallbackText: {
fontSize: 9,
},
// The one shell every status shares. It straddles the icon's bottom-right corner (half in,
// half out) so the lettered project box stays readable, and its ring is sidebar-colored so
// the badge separates from the icon underneath rather than blending into it.
// The shell the alert and dot statuses share. It straddles the icon's bottom-right corner
// (half in, half out) so the lettered project box stays readable, and its ring is
// sidebar-colored so the badge separates from the icon underneath rather than blending in.
statusBadge: {
position: "absolute",
right: STATUS_BADGE_OFFSET,
@@ -260,17 +277,8 @@ const styles = StyleSheet.create((theme) => {
justifyContent: "center",
overflow: "hidden",
},
// Optical-centering nudge for the running dot-comet (see the nudge constant).
runningLoaderNudge: {
transform: [{ translateX: STATUS_BADGE_LOADER_NUDGE_X }],
},
statusDotFailed: {
...statusDotBase,
backgroundColor: theme.colors.palette.red[500],
},
statusDotAttention: {
...statusDotBase,
backgroundColor: theme.colors.palette.green[500],
},
statusDotRunning: statusDot("running"),
statusDotFailed: statusDot("failed"),
statusDotAttention: statusDot("attention"),
};
});
packages/app/src/components/sidebar/pulsing-status-dot.tsx
+83
View File
@@ -0,0 +1,83 @@
import { useEffect } from "react";
import type { StyleProp, ViewStyle } from "react-native";
import Animated, {
cancelAnimation,
Easing,
makeMutable,
useAnimatedStyle,
useReducedMotion,
withRepeat,
withTiming,
} from "react-native-reanimated";
import { useRetainedPanelActive } from "@/components/retained-panel";
// The busy affordance for a sidebar row. Every status in the sidebar is a dot; busy is the
// one that moves. Callers own the dot's geometry and color and pass it in as a style — this
// module owns nothing but the pulse.
//
// Opacity only, and shallow: the dot sits in a column of static dots in neighboring rows, so
// anything that changes its size or drops it near invisible reads as jitter down the list.
// One full cycle is out-and-back, so the visible period is twice the half period.
const PULSE_HALF_PERIOD_MS = 900;
const PULSE_MIN_OPACITY = 0.65;
// One clock for every pulsing dot in the app. Dots that each start their own animation drift
// apart as rows mount at different times, and a column of them fading out of step is noise —
// the same reason SyncedLoader drives all its instances from a single step. The value *is*
// the opacity, so subscribers read it directly and there is nothing per-instance to fall out
// of phase.
//
// Refcounted so the animation only runs while at least one dot is mounted: an unattended
// withRepeat keeps the UI thread's frame loop awake forever.
const pulseClock = makeMutable(1);
let pulseClockSubscribers = 0;
function acquirePulseClock(): void {
pulseClockSubscribers += 1;
if (pulseClockSubscribers > 1) {
return;
}
pulseClock.value = withRepeat(
withTiming(PULSE_MIN_OPACITY, {
duration: PULSE_HALF_PERIOD_MS,
easing: Easing.inOut(Easing.quad),
}),
-1,
true,
);
}
function releasePulseClock(): void {
pulseClockSubscribers -= 1;
if (pulseClockSubscribers > 0) {
return;
}
cancelAnimation(pulseClock);
pulseClock.value = 1;
}
/** A status dot, breathing in step with every other one on screen. */
export function PulsingStatusDot({
style,
testID,
}: {
style: StyleProp<ViewStyle>;
testID?: string;
}) {
const active = useRetainedPanelActive();
const reduceMotion = useReducedMotion();
useEffect(() => {
if (!active || reduceMotion) {
return;
}
acquirePulseClock();
return releasePulseClock;
}, [active, reduceMotion]);
const pulseStyle = useAnimatedStyle(() => ({ opacity: pulseClock.value }));
// Reduced motion leaves the dot fully opaque. It still carries the running color, and the
// status is spelled out in the surrounding row's accessible label either way.
return <Animated.View testID={testID} style={[style, reduceMotion ? null : pulseStyle]} />;
}
packages/app/src/components/sidebar/sidebar-status-list.tsx
+71 -79
View File
@@ -6,6 +6,7 @@ import { navigateToWorkspace } from "@/stores/navigation-active-workspace-store"
import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
import { type SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
import type { StatusGroup } from "@/hooks/sidebar-status-view-model";
import type { HostBadgeModel } from "@/hosts/appearance";
import { isWeb as platformIsWeb, isNative as platformIsNative } from "@/constants/platform";
import { StyleSheet } from "react-native-unistyles";
import type { Theme } from "@/styles/theme";
@@ -35,12 +36,16 @@ import { useClearWorkspaceAttention } from "@/hooks/use-clear-workspace-attentio
import {
SidebarWorkspaceRowFrame,
SidebarWorkspaceRowContent,
resolveTrailingActionVisibility,
SidebarWorkspaceTrailingActionBase,
SidebarWorkspaceTrailingActionOverlay,
SidebarWorkspaceTrailingActionSlot,
} from "@/components/sidebar/sidebar-workspace-row-content";
import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
import { SidebarWorkspaceMenu } from "@/components/sidebar/sidebar-workspace-menu";
import {
SidebarWorkspaceContextMenu,
SidebarWorkspaceMenu,
} from "@/components/sidebar/sidebar-workspace-menu";
import { PinnedSectionHeader } from "@/components/sidebar/pinned-section-header";
import { SidebarGroupToggleRow } from "@/components/sidebar/sidebar-group-toggle-row";
import { useLimitedSidebarGroup } from "@/components/sidebar/use-limited-sidebar-group";
@@ -50,7 +55,6 @@ import type { ToggleSidebarWorkspacePin } from "@/hooks/use-sidebar-workspace-pi
const foregroundMutedColorMapping = (theme: Theme) => ({
color: theme.colors.foregroundMuted,
});
const blueColorMapping = (theme: Theme) => ({ color: theme.colors.palette.blue[500] });
const amberColorMapping = (theme: Theme) => ({ color: theme.colors.palette.amber[500] });
const redColorMapping = (theme: Theme) => ({ color: theme.colors.palette.red[500] });
const greenColorMapping = (theme: Theme) => ({ color: theme.colors.palette.green[500] });
@@ -64,13 +68,11 @@ const ThemedCircleX = withUnistyles(CircleX);
interface StatusWorkspaceListProps {
groups: StatusGroup[];
pinnedWorkspaces: SidebarWorkspaceEntry[];
projectNamesByViewKey: Map<string, string>;
projectIconByProjectViewKey: ReadonlyMap<string, string | null>;
shortcutIndexByWorkspaceKey: Map<string, number>;
showShortcutBadges: boolean;
onWorkspacePress?: () => void;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
hostBadgeByServerId: ReadonlyMap<string, HostBadgeModel>;
supportsPinningByServerId: ReadonlyMap<string, boolean>;
onToggleWorkspacePin: ToggleSidebarWorkspacePin;
listHeaderComponent?: ReactNode;
@@ -79,13 +81,11 @@ interface StatusWorkspaceListProps {
export function SidebarStatusWorkspaceList({
groups,
pinnedWorkspaces,
projectNamesByViewKey,
projectIconByProjectViewKey,
shortcutIndexByWorkspaceKey,
showShortcutBadges,
onWorkspacePress,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
supportsPinningByServerId,
onToggleWorkspacePin,
listHeaderComponent,
@@ -118,10 +118,8 @@ export function SidebarStatusWorkspaceList({
workspace={workspace}
{...buildStatusRowProjectPresentation({
workspace,
projectNamesByViewKey,
projectIconByProjectViewKey,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
})}
shortcutNumber={statusShortcutIndex.get(workspace.workspaceKey) ?? null}
showShortcutBadge={showShortcutBadges}
@@ -145,13 +143,11 @@ export function SidebarStatusWorkspaceList({
<StatusGroupList
groups={groups}
collapsedStatusGroupKeys={collapsedStatusGroupKeys}
projectNamesByViewKey={projectNamesByViewKey}
projectIconByProjectViewKey={projectIconByProjectViewKey}
shortcutIndex={statusShortcutIndex}
showShortcutBadges={showShortcutBadges}
onWorkspacePress={onWorkspacePress}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
hostBadgeByServerId={hostBadgeByServerId}
supportsPinningByServerId={supportsPinningByServerId}
onToggleWorkspacePin={onToggleWorkspacePin}
/>
@@ -186,25 +182,21 @@ export function SidebarStatusWorkspaceList({
function StatusGroupList({
groups,
collapsedStatusGroupKeys,
projectNamesByViewKey,
projectIconByProjectViewKey,
shortcutIndex,
showShortcutBadges,
onWorkspacePress,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
supportsPinningByServerId,
onToggleWorkspacePin,
}: {
groups: StatusGroup[];
collapsedStatusGroupKeys: ReadonlySet<string>;
projectNamesByViewKey: Map<string, string>;
projectIconByProjectViewKey: ReadonlyMap<string, string | null>;
shortcutIndex: Map<string, number>;
showShortcutBadges: boolean;
onWorkspacePress?: () => void;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
hostBadgeByServerId: ReadonlyMap<string, HostBadgeModel>;
supportsPinningByServerId: ReadonlyMap<string, boolean>;
onToggleWorkspacePin: ToggleSidebarWorkspacePin;
}) {
@@ -215,13 +207,11 @@ function StatusGroupList({
key={group.bucket}
group={group}
collapsed={collapsedStatusGroupKeys.has(group.bucket)}
projectNamesByViewKey={projectNamesByViewKey}
projectIconByProjectViewKey={projectIconByProjectViewKey}
shortcutIndex={shortcutIndex}
showShortcutBadges={showShortcutBadges}
onWorkspacePress={onWorkspacePress}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
hostBadgeByServerId={hostBadgeByServerId}
supportsPinningByServerId={supportsPinningByServerId}
onToggleWorkspacePin={onToggleWorkspacePin}
/>
@@ -233,25 +223,21 @@ function StatusGroupList({
function StatusGroupRows({
group,
collapsed,
projectNamesByViewKey,
projectIconByProjectViewKey,
shortcutIndex,
showShortcutBadges,
onWorkspacePress,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
supportsPinningByServerId,
onToggleWorkspacePin,
}: {
group: StatusGroup;
collapsed: boolean;
projectNamesByViewKey: Map<string, string>;
projectIconByProjectViewKey: ReadonlyMap<string, string | null>;
shortcutIndex: Map<string, number>;
showShortcutBadges: boolean;
onWorkspacePress?: () => void;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
hostBadgeByServerId: ReadonlyMap<string, HostBadgeModel>;
supportsPinningByServerId: ReadonlyMap<string, boolean>;
onToggleWorkspacePin: ToggleSidebarWorkspacePin;
}) {
@@ -276,10 +262,8 @@ function StatusGroupRows({
workspace={workspace}
{...buildStatusRowProjectPresentation({
workspace,
projectNamesByViewKey,
projectIconByProjectViewKey,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
})}
shortcutNumber={shortcutIndex.get(workspace.workspaceKey) ?? null}
showShortcutBadge={showShortcutBadges}
@@ -301,47 +285,24 @@ function StatusGroupRows({
);
}
// Status mode breaks the project grouping, so the row needs the project name to stay
// legible; the host is appended after a middle dot once labels are active.
function buildStatusRowSubtitle({
projectName,
hostLabel,
}: {
projectName: string;
hostLabel: string | null;
}): string {
if (!hostLabel) {
return projectName;
}
return projectName ? `${projectName} · ${hostLabel}` : hostLabel;
}
interface StatusRowProjectPresentation {
subtitle: string;
hostBadge: HostBadgeModel | null;
projectName: string;
projectIconDataUri: string | null;
}
function buildStatusRowProjectPresentation({
workspace,
projectNamesByViewKey,
projectIconByProjectViewKey,
hostLabelByServerId,
showHostLabels,
hostBadgeByServerId,
}: {
workspace: SidebarWorkspaceEntry;
projectNamesByViewKey: Map<string, string>;
projectIconByProjectViewKey: ReadonlyMap<string, string | null>;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
hostBadgeByServerId: ReadonlyMap<string, HostBadgeModel>;
}): StatusRowProjectPresentation {
const projectName = projectNamesByViewKey.get(workspace.projectViewKey) ?? "";
const hostLabel = showHostLabels
? (hostLabelByServerId.get(workspace.serverId) ?? workspace.serverId)
: null;
return {
subtitle: buildStatusRowSubtitle({ projectName, hostLabel }),
projectName,
hostBadge: hostBadgeByServerId.get(workspace.serverId) ?? null,
projectName: workspace.projectName,
projectIconDataUri: projectIconByProjectViewKey.get(workspace.projectViewKey) ?? null,
};
}
@@ -422,7 +383,7 @@ function StatusGroupIcon({ bucket }: { bucket: StatusGroup["bucket"] }) {
case "attention":
return <ThemedCircleCheck size={14} uniProps={greenColorMapping} />;
case "running":
return <ThemedCircleDot size={14} uniProps={blueColorMapping} />;
return <ThemedCircleDot size={14} uniProps={amberColorMapping} />;
case "done":
return <ThemedCircleCheck size={14} uniProps={foregroundMutedColorMapping} />;
}
@@ -430,7 +391,7 @@ function StatusGroupIcon({ bucket }: { bucket: StatusGroup["bucket"] }) {
const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
workspace,
subtitle,
hostBadge,
projectName,
projectIconDataUri,
shortcutNumber,
@@ -441,7 +402,7 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
onWorkspacePress,
}: {
workspace: SidebarWorkspaceEntry;
subtitle: string;
hostBadge: HostBadgeModel | null;
projectName: string;
projectIconDataUri: string | null;
shortcutNumber: number | null;
@@ -465,7 +426,7 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
return (
<StatusWorkspaceRowWithMenu
workspace={workspace}
subtitle={subtitle}
hostBadge={hostBadge}
projectName={projectName}
projectIconDataUri={projectIconDataUri}
selected={selected}
@@ -481,7 +442,7 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
function StatusWorkspaceRowWithMenu({
workspace,
subtitle,
hostBadge,
projectName,
projectIconDataUri,
selected,
@@ -493,7 +454,7 @@ function StatusWorkspaceRowWithMenu({
onPress,
}: {
workspace: SidebarWorkspaceEntry;
subtitle: string;
hostBadge: HostBadgeModel | null;
projectName: string;
projectIconDataUri: string | null;
selected: boolean;
@@ -603,7 +564,7 @@ function StatusWorkspaceRowWithMenu({
<>
<StatusWorkspaceRowInner
workspace={workspace}
subtitle={subtitle}
hostBadge={hostBadge}
projectName={projectName}
projectIconDataUri={projectIconDataUri}
selected={selected}
@@ -640,7 +601,7 @@ function StatusWorkspaceRowWithMenu({
function StatusWorkspaceRowInner({
workspace,
subtitle,
hostBadge,
projectName,
projectIconDataUri,
selected,
@@ -662,7 +623,7 @@ function StatusWorkspaceRowInner({
reserveIdleStatusIndicatorSpace = true,
}: {
workspace: SidebarWorkspaceEntry;
subtitle: string;
hostBadge: HostBadgeModel | null;
projectName: string;
projectIconDataUri: string | null;
selected: boolean;
@@ -699,15 +660,43 @@ function StatusWorkspaceRowInner({
return (
<SidebarWorkspaceRowFrame workspace={workspace}>
{({ isHovered, hoverHandlers }) => {
{({ isHovered, contextMenuOpen, onContextMenuOpenChange, hoverHandlers }) => {
const showShortcut = showShortcutBadge && shortcutNumber !== null;
const showKebab = Boolean(onArchive && (isHovered || isTouchPlatform));
const showKebabInSlot = showKebab && !showShortcut;
const {
showDiffStat,
showKebab: showKebabInSlot,
showScrim,
} = resolveTrailingActionVisibility({
hasDiffStat: Boolean(workspace.diffStat),
hasArchiveAction: Boolean(onArchive),
isHovered,
isTouchPlatform,
showShortcut,
});
const shouldRenderActionSlot = Boolean(onArchive || workspace.diffStat);
const workspaceRowStyle = getStatusWorkspaceRowStyle({ selected, isHovered });
return (
<View style={styles.workspaceRowContainer} {...hoverHandlers}>
<Pressable
<SidebarWorkspaceContextMenu
contextMenuOpen={contextMenuOpen}
onContextMenuOpenChange={onContextMenuOpenChange}
workspace={workspace}
leadingProjectName={projectName}
hostBadgeLabel={hostBadge?.label}
scriptIconKind={scriptIconKind}
workspaceKey={workspace.workspaceKey}
onCopyPath={onCopyPath}
onCopyBranchName={onCopyBranchName}
onRename={onRename}
onMarkAsRead={onMarkAsRead}
onArchive={onArchive}
archiveLabel={archiveLabel}
archiveStatus={archiveStatus}
archivePendingLabel={archivePendingLabel}
archiveShortcutKeys={archiveShortcutKeys}
isPinned={isPinned}
onTogglePin={onTogglePin}
openInFileManagerPath={workspace.workspaceDirectory}
disabled={isArchiving}
accessibilityRole="button"
accessibilityState={accessibilityState}
@@ -717,9 +706,9 @@ function StatusWorkspaceRowInner({
>
<SidebarWorkspaceRowContent
workspace={workspace}
subtitle={subtitle}
subtitleProjectName={projectName}
subtitleProjectIconDataUri={projectIconDataUri}
hostBadge={hostBadge}
leadingProjectName={projectName}
leadingProjectIconDataUri={projectIconDataUri}
scriptIconKind={scriptIconKind}
isHovered={isHovered}
isLoading={isArchiving}
@@ -730,8 +719,9 @@ function StatusWorkspaceRowInner({
{shouldRenderActionSlot ? (
<StatusWorkspaceActionSlot
workspace={workspace}
showBase={Boolean(workspace.diffStat && !showKebabInSlot && !showShortcut)}
showBase={showDiffStat}
showKebab={showKebabInSlot}
showScrim={showScrim}
isPinned={isPinned}
onTogglePin={onTogglePin}
onCopyPath={onCopyPath}
@@ -746,7 +736,7 @@ function StatusWorkspaceRowInner({
/>
) : null}
</SidebarWorkspaceRowContent>
</Pressable>
</SidebarWorkspaceContextMenu>
</View>
);
}}
@@ -758,6 +748,7 @@ function StatusWorkspaceActionSlot({
workspace,
showBase,
showKebab,
showScrim,
isPinned,
onTogglePin,
onCopyPath,
@@ -773,6 +764,7 @@ function StatusWorkspaceActionSlot({
workspace: SidebarWorkspaceEntry;
showBase: boolean;
showKebab: boolean;
showScrim: boolean;
isPinned?: boolean;
onTogglePin?: () => void;
onCopyPath?: () => void;
@@ -795,7 +787,7 @@ function StatusWorkspaceActionSlot({
/>
) : null}
</SidebarWorkspaceTrailingActionBase>
<SidebarWorkspaceTrailingActionOverlay visible={showKebab}>
<SidebarWorkspaceTrailingActionOverlay visible={showKebab} scrim={showScrim}>
{showKebab && onArchive ? (
<SidebarWorkspaceMenu
workspaceKey={workspace.workspaceKey}
packages/app/src/components/sidebar/sidebar-subtitle-project-icon.tsx
-74
View File
@@ -1,74 +0,0 @@
import { View } from "react-native";
import { StyleSheet } from "react-native-unistyles";
import { ProjectIconView } from "@/components/project-icon-view";
import { projectIconPlaceholderLabelFromDisplayName } from "@/utils/project-display-name";
/**
* Decorative project marker for a sidebar row's subtitle line. Status mode breaks
* the project grouping, so the icon is what makes two same-named branches from
* different projects tell apart at a glance — the project name next to it carries
* the meaning, so the icon itself stays out of the accessibility tree.
*/
export function SidebarSubtitleProjectIcon({
projectViewKey,
projectName,
iconDataUri,
testID,
}: {
projectViewKey: string;
projectName: string;
iconDataUri: string | null;
testID?: string;
}) {
const placeholderInitial = projectIconPlaceholderLabelFromDisplayName(projectName)
.charAt(0)
.toUpperCase();
if (!iconDataUri && !placeholderInitial) {
return null;
}
return (
<View
style={styles.slot}
testID={testID}
accessibilityElementsHidden
importantForAccessibility="no-hide-descendants"
>
<ProjectIconView
iconDataUri={iconDataUri}
initial={placeholderInitial}
projectViewKey={projectViewKey}
imageStyle={styles.icon}
fallbackStyle={styles.fallback}
textStyle={styles.fallbackText}
/>
</View>
);
}
const styles = StyleSheet.create((theme) => ({
slot: {
width: 12,
// Match the 14px subtitle line so the icon does not change row density.
height: 14,
flexShrink: 0,
alignItems: "center",
justifyContent: "center",
},
icon: {
width: 12,
height: 12,
borderRadius: theme.borderRadius.sm,
},
fallback: {
width: 12,
height: 12,
borderRadius: theme.borderRadius.sm,
alignItems: "center",
justifyContent: "center",
},
fallbackText: {
fontSize: 8,
lineHeight: 12,
},
}));
packages/app/src/components/sidebar/sidebar-workspace-menu.tsx
+235 -65
View File
@@ -1,9 +1,12 @@
import { useMemo } from "react";
import { useMemo, type ComponentProps, type PropsWithChildren, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { type PressableStateCallbackType } from "react-native";
import { StyleSheet, withUnistyles } from "react-native-unistyles";
import { Archive, CircleCheck, Copy, MoreVertical, Pencil, Pin, PinOff } from "lucide-react-native";
import { isNative, isWeb } from "@/constants/platform";
import { getForgePresentation, normalizeForge } from "@/git/forge";
import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
import { useAppSettings } from "@/hooks/use-settings";
import type { Theme } from "@/styles/theme";
import type { ShortcutKey } from "@/utils/format-shortcut";
import {
@@ -12,8 +15,15 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { Shortcut } from "@/components/ui/shortcut";
import { OpenInFileManagerMenuItem } from "@/workspace/open-in-file-manager/menu-item";
import { resolveSidebarWorkspaceAccessibilityLabel } from "@/components/sidebar/sidebar-workspace-title";
const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
const foregroundMutedColorMapping = (theme: Theme) => ({
@@ -46,7 +56,7 @@ function renderTriggerIcon({ hovered }: { hovered?: boolean }) {
);
}
interface SidebarWorkspaceMenuProps {
export interface SidebarWorkspaceMenuProps {
workspaceKey: string;
onCopyPath?: () => void;
onCopyBranchName?: () => void;
@@ -62,6 +72,121 @@ interface SidebarWorkspaceMenuProps {
openInFileManagerPath?: string | null;
}
interface SidebarWorkspaceMenuItemsProps extends Omit<SidebarWorkspaceMenuProps, "onArchive"> {
onArchive?: () => void;
}
type MenuSurface = "context" | "dropdown";
function WorkspaceMenuItem({
surface,
children,
...props
}: PropsWithChildren<
Omit<ComponentProps<typeof DropdownMenuItem>, "children"> & { surface: MenuSurface }
>) {
if (surface === "context") {
return <ContextMenuItem {...props}>{children}</ContextMenuItem>;
}
return <DropdownMenuItem {...props}>{children}</DropdownMenuItem>;
}
function SidebarWorkspaceMenuItems({
surface,
workspaceKey,
onCopyPath,
onCopyBranchName,
onRename,
onMarkAsRead,
onArchive,
archiveLabel,
archiveStatus,
archivePendingLabel,
archiveShortcutKeys,
isPinned,
onTogglePin,
openInFileManagerPath,
}: SidebarWorkspaceMenuItemsProps & { surface: MenuSurface }): ReactNode {
const { t } = useTranslation();
const archiveTrailing = useMemo(
() => (archiveShortcutKeys && !isNative ? <Shortcut chord={archiveShortcutKeys} /> : null),
[archiveShortcutKeys],
);
return (
<>
{onCopyPath ? (
<WorkspaceMenuItem
surface={surface}
testID={`sidebar-workspace-menu-copy-path-${workspaceKey}`}
leading={copyLeadingIcon}
onSelect={onCopyPath}
>
{t("sidebar.workspace.actions.copyPath")}
</WorkspaceMenuItem>
) : null}
{onCopyBranchName ? (
<WorkspaceMenuItem
surface={surface}
testID={`sidebar-workspace-menu-copy-branch-name-${workspaceKey}`}
leading={copyLeadingIcon}
onSelect={onCopyBranchName}
>
{t("sidebar.workspace.actions.copyBranchName")}
</WorkspaceMenuItem>
) : null}
{onRename ? (
<WorkspaceMenuItem
surface={surface}
testID={`sidebar-workspace-menu-rename-${workspaceKey}`}
leading={renameLeadingIcon}
onSelect={onRename}
>
{t("sidebar.workspace.actions.rename")}
</WorkspaceMenuItem>
) : null}
{onMarkAsRead ? (
<WorkspaceMenuItem
surface={surface}
testID={`sidebar-workspace-menu-mark-as-read-${workspaceKey}`}
leading={markAsReadLeadingIcon}
onSelect={onMarkAsRead}
>
Mark as read
</WorkspaceMenuItem>
) : null}
{onTogglePin ? (
<WorkspaceMenuItem
surface={surface}
testID={`sidebar-workspace-menu-pin-${workspaceKey}`}
leading={isPinned ? unpinLeadingIcon : pinLeadingIcon}
onSelect={onTogglePin}
>
{isPinned ? t("sidebar.workspace.actions.unpin") : t("sidebar.workspace.actions.pin")}
</WorkspaceMenuItem>
) : null}
<OpenInFileManagerMenuItem
surface={surface}
path={openInFileManagerPath}
testID={`sidebar-workspace-menu-open-folder-${workspaceKey}`}
/>
{onArchive ? (
<WorkspaceMenuItem
surface={surface}
testID={`sidebar-workspace-menu-archive-${workspaceKey}`}
leading={archiveLeadingIcon}
trailing={archiveTrailing}
status={archiveStatus}
pendingLabel={archivePendingLabel}
onSelect={onArchive}
>
{archiveLabel ?? t("sidebar.workspace.actions.archive")}
</WorkspaceMenuItem>
) : null}
</>
);
}
export function SidebarWorkspaceMenu({
workspaceKey,
onCopyPath,
@@ -78,11 +203,6 @@ export function SidebarWorkspaceMenu({
openInFileManagerPath,
}: SidebarWorkspaceMenuProps) {
const { t } = useTranslation();
const archiveTrailing = useMemo(
() => (archiveShortcutKeys && !isNative ? <Shortcut chord={archiveShortcutKeys} /> : null),
[archiveShortcutKeys],
);
return (
<DropdownMenu>
<DropdownMenuTrigger
@@ -95,70 +215,120 @@ export function SidebarWorkspaceMenu({
{renderTriggerIcon}
</DropdownMenuTrigger>
<DropdownMenuContent align="end" width={260}>
{onCopyPath ? (
<DropdownMenuItem
testID={`sidebar-workspace-menu-copy-path-${workspaceKey}`}
leading={copyLeadingIcon}
onSelect={onCopyPath}
>
{t("sidebar.workspace.actions.copyPath")}
</DropdownMenuItem>
) : null}
{onCopyBranchName ? (
<DropdownMenuItem
testID={`sidebar-workspace-menu-copy-branch-name-${workspaceKey}`}
leading={copyLeadingIcon}
onSelect={onCopyBranchName}
>
{t("sidebar.workspace.actions.copyBranchName")}
</DropdownMenuItem>
) : null}
{onRename ? (
<DropdownMenuItem
testID={`sidebar-workspace-menu-rename-${workspaceKey}`}
leading={renameLeadingIcon}
onSelect={onRename}
>
{t("sidebar.workspace.actions.rename")}
</DropdownMenuItem>
) : null}
{onMarkAsRead ? (
<DropdownMenuItem
testID={`sidebar-workspace-menu-mark-as-read-${workspaceKey}`}
leading={markAsReadLeadingIcon}
onSelect={onMarkAsRead}
>
Mark as read
</DropdownMenuItem>
) : null}
{onTogglePin ? (
<DropdownMenuItem
testID={`sidebar-workspace-menu-pin-${workspaceKey}`}
leading={isPinned ? unpinLeadingIcon : pinLeadingIcon}
onSelect={onTogglePin}
>
{isPinned ? t("sidebar.workspace.actions.unpin") : t("sidebar.workspace.actions.pin")}
</DropdownMenuItem>
) : null}
<OpenInFileManagerMenuItem
path={openInFileManagerPath}
testID={`sidebar-workspace-menu-open-folder-${workspaceKey}`}
<SidebarWorkspaceMenuItems
surface="dropdown"
workspaceKey={workspaceKey}
onCopyPath={onCopyPath}
onCopyBranchName={onCopyBranchName}
onRename={onRename}
onMarkAsRead={onMarkAsRead}
onArchive={onArchive}
archiveLabel={archiveLabel}
archiveStatus={archiveStatus}
archivePendingLabel={archivePendingLabel}
archiveShortcutKeys={archiveShortcutKeys}
isPinned={isPinned}
onTogglePin={onTogglePin}
openInFileManagerPath={openInFileManagerPath}
/>
<DropdownMenuItem
testID={`sidebar-workspace-menu-archive-${workspaceKey}`}
leading={archiveLeadingIcon}
trailing={archiveTrailing}
status={archiveStatus}
pendingLabel={archivePendingLabel}
onSelect={onArchive}
>
{archiveLabel ?? t("sidebar.workspace.actions.archive")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
type ContextTriggerProps = Omit<
ComponentProps<typeof ContextMenuTrigger>,
"children" | "enabledOnMobile"
>;
export function SidebarWorkspaceContextMenu({
children,
contextMenuOpen,
onContextMenuOpenChange,
workspace,
leadingProjectName,
hostBadgeLabel,
scriptIconKind,
workspaceKey,
onCopyPath,
onCopyBranchName,
onRename,
onMarkAsRead,
onArchive,
archiveLabel,
archiveStatus,
archivePendingLabel,
archiveShortcutKeys,
isPinned,
onTogglePin,
openInFileManagerPath,
accessibilityLabel,
...triggerProps
}: PropsWithChildren<
SidebarWorkspaceMenuItemsProps &
ContextTriggerProps & {
contextMenuOpen: boolean;
onContextMenuOpenChange: (open: boolean) => void;
workspace: SidebarWorkspaceEntry;
leadingProjectName?: string | null;
hostBadgeLabel?: string | null;
scriptIconKind?: "service" | "command" | null;
}
>) {
const {
settings: { workspaceTitleSource },
} = useAppSettings();
const { t } = useTranslation();
const pullRequestLabel = workspace.prHint
? t("workspace.git.pr.accessibility.pullRequest", {
number: workspace.prHint.number,
context: getForgePresentation(normalizeForge(workspace.prHint.forge)).changeRequestContext,
})
: null;
const rowAccessibilityLabel = resolveSidebarWorkspaceAccessibilityLabel({
workspace,
workspaceTitleSource,
leadingProjectName,
hostBadgeLabel,
pullRequestLabel,
scriptLabel: scriptIconKind ? t("workspace.status.scriptsAvailable") : null,
});
return (
<ContextMenu open={contextMenuOpen} onOpenChange={onContextMenuOpenChange}>
<ContextMenuTrigger
{...triggerProps}
enabledOnMobile={false}
accessibilityLabel={accessibilityLabel ?? rowAccessibilityLabel}
>
{children}
</ContextMenuTrigger>
<ContextMenuContent
align="start"
width={260}
testID={`sidebar-workspace-context-menu-${workspaceKey}`}
>
<SidebarWorkspaceMenuItems
surface="context"
workspaceKey={workspaceKey}
onCopyPath={onCopyPath}
onCopyBranchName={onCopyBranchName}
onRename={onRename}
onMarkAsRead={onMarkAsRead}
onArchive={onArchive}
archiveLabel={archiveLabel}
archiveStatus={archiveStatus}
archivePendingLabel={archivePendingLabel}
archiveShortcutKeys={archiveShortcutKeys}
isPinned={isPinned}
onTogglePin={onTogglePin}
openInFileManagerPath={openInFileManagerPath}
/>
</ContextMenuContent>
</ContextMenu>
);
}
function triggerStyle({ hovered = false }: PressableStateCallbackType & { hovered?: boolean }) {
return [styles.trigger, hovered && styles.triggerHovered];
}
packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx
+218 -154
View File
@@ -1,11 +1,17 @@
import { LoadingSpinner } from "@/components/ui/loading-spinner";
import { memo, useCallback, useMemo, useState, type ReactNode } from "react";
import { memo, useCallback, useId, useMemo, useState, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Pressable, Text, View, type GestureResponderEvent, type ViewStyle } from "react-native";
import {
Pressable,
Text,
View,
type GestureResponderEvent,
type PressableStateCallbackType,
type ViewStyle,
} from "react-native";
import { StyleSheet, withUnistyles } from "react-native-unistyles";
import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from "react-native-svg";
import {
CircleAlert,
ExternalLink,
Folder,
FolderGit2,
GitPullRequest,
@@ -13,53 +19,82 @@ import {
Monitor,
SquareTerminal,
} from "lucide-react-native";
import { SidebarSubtitleProjectIcon } from "@/components/sidebar/sidebar-subtitle-project-icon";
import { HostBadge } from "@/components/sidebar/host-badge";
import { ProjectStatusIndicator } from "@/components/sidebar/project-leading-visual";
import { PulsingStatusDot } from "@/components/sidebar/pulsing-status-dot";
import { WorkspaceHoverCard } from "@/components/workspace-hover-card";
import { SyncedLoader } from "@/components/synced-loader";
import type { HostBadgeModel } from "@/hosts/appearance";
import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
import { useAppSettings } from "@/hooks/use-settings";
import type { Theme } from "@/styles/theme";
import type { PrHint } from "@/git/use-pr-status-query";
import { getForgePresentation, normalizeForge } from "@/git/forge";
import { ForgeBrandIcon } from "@/git/forge-icon";
import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
import { isEmphasizedStatusDotBucket } from "@/utils/status-dot-color";
import { getStatusDotColor, isEmphasizedStatusDotBucket } from "@/utils/status-dot-color";
import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
import { openExternalUrl } from "@/utils/open-external-url";
import { resolveSidebarWorkspacePrimaryLabel } from "@/components/sidebar/sidebar-workspace-title";
// The scrim spans more than the kebab so the fade starts left of the diff stat. Solid from
// SCRIM_SOLID_OFFSET rightward, which keeps the kebab itself off the gradient entirely.
const SCRIM_WIDTH = 48;
const SCRIM_SOLID_OFFSET = "55%";
const DEFAULT_STATUS_DOT_SIZE = 7;
const EMPHASIZED_STATUS_DOT_SIZE = 9;
const DEFAULT_STATUS_DOT_OFFSET = 0;
const EMPHASIZED_STATUS_DOT_OFFSET = -1;
const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
const foregroundMutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
const amberColorMapping = (theme: Theme) => ({ color: theme.colors.palette.amber[500] });
const syncedLoaderColorMapping = (theme: Theme) => ({
color:
theme.colorScheme === "light"
? theme.colors.palette.amber[700]
: theme.colors.palette.amber[500],
});
const blueColorMapping = (theme: Theme) => ({ color: theme.colors.palette.blue[500] });
const greenColorMapping = (theme: Theme) => ({ color: theme.colors.palette.green[500] });
const redColorMapping = (theme: Theme) => ({ color: theme.colors.palette.red[500] });
const purpleColorMapping = (theme: Theme) => ({ color: theme.colors.palette.purple[500] });
const ThemedExternalLink = withUnistyles(ExternalLink);
const ThemedGitPullRequest = withUnistyles(GitPullRequest);
const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
const ThemedCircleAlert = withUnistyles(CircleAlert);
const ThemedSyncedLoader = withUnistyles(SyncedLoader);
const ThemedMonitor = withUnistyles(Monitor);
const ThemedFolder = withUnistyles(Folder);
const ThemedFolderGit2 = withUnistyles(FolderGit2);
const ThemedGlobe = withUnistyles(Globe);
const ThemedSquareTerminal = withUnistyles(SquareTerminal);
function renderChecksBadgeForgeIcon(icon: string) {
return <ForgeBrandIcon iconKind={icon} size={10} uniProps={redColorMapping} />;
/**
* react-native-svg's extractGradient reads stopColor off the child elements structurally,
* without rendering them, so wrapping Stop itself in withUnistyles hides the color from it and
* the native gradient silently falls back to black. Theme the whole SVG instead and keep real
* Stop elements as direct children of the gradient.
*/
function TrailingActionScrimSvg({ gradientId, color }: { gradientId: string; color: string }) {
return (
<Svg width="100%" height="100%" preserveAspectRatio="none">
<Defs>
<SvgLinearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
{/* Same color at both ends, varying only stopOpacity. Interpolating a hex toward
`transparent` goes through black in some engines and leaves a grey fringe. */}
<Stop offset="0%" stopColor={color} stopOpacity={0} />
<Stop offset={SCRIM_SOLID_OFFSET} stopColor={color} stopOpacity={1} />
<Stop offset="100%" stopColor={color} stopOpacity={1} />
</SvgLinearGradient>
</Defs>
<Rect x="0" y="0" width="100%" height="100%" fill={`url(#${gradientId})`} />
</Svg>
);
}
const ThemedTrailingActionScrimSvg = withUnistyles(TrailingActionScrimSvg);
const scrimColorMapping = (theme: Theme) => ({ color: theme.colors.surfaceSidebarHover });
function pullRequestIconStyle({
hovered,
pressed,
}: PressableStateCallbackType & { hovered?: boolean }) {
return [
pullRequestIconStyles.pressable,
(Boolean(hovered) || pressed) && pullRequestIconStyles.pressableActive,
];
}
type SidebarWorkspaceScriptIconKind = "service" | "command";
@@ -73,29 +108,48 @@ export function SidebarWorkspaceRowFrame({
isDragging?: boolean;
children: (input: {
isHovered: boolean;
contextMenuOpen: boolean;
onContextMenuOpenChange: (open: boolean) => void;
hoverHandlers: { onPointerEnter: () => void; onPointerLeave: () => void };
}) => ReactNode;
}) {
const [isHovered, setIsHovered] = useState(false);
const handlePointerEnter = useCallback(() => setIsHovered(true), []);
const [contextMenuOpen, setContextMenuOpen] = useState(false);
const handlePointerEnter = useCallback(() => {
if (!contextMenuOpen) setIsHovered(true);
}, [contextMenuOpen]);
const handlePointerLeave = useCallback(() => setIsHovered(false), []);
const handleContextMenuOpenChange = useCallback((open: boolean) => {
setContextMenuOpen(open);
if (open) setIsHovered(false);
}, []);
const hoverHandlers = useMemo(
() => ({ onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave }),
[handlePointerEnter, handlePointerLeave],
);
return (
<WorkspaceHoverCard workspace={workspace} prHint={workspace.prHint} isDragging={isDragging}>
{children({ isHovered, hoverHandlers })}
<WorkspaceHoverCard
workspace={workspace}
prHint={workspace.prHint}
isDragging={isDragging}
disabled={contextMenuOpen}
>
{children({
isHovered: isHovered && !contextMenuOpen,
contextMenuOpen,
onContextMenuOpenChange: handleContextMenuOpenChange,
hoverHandlers,
})}
</WorkspaceHoverCard>
);
}
export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowContent({
workspace,
subtitle,
subtitleProjectName = null,
subtitleProjectIconDataUri = null,
hostBadge,
leadingProjectName = null,
leadingProjectIconDataUri = null,
scriptIconKind = null,
isHovered,
isLoading,
@@ -106,10 +160,10 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
children,
}: {
workspace: SidebarWorkspaceEntry;
subtitle?: string | null;
/** Project named by the subtitle. Set it to lead the subtitle line with that project's icon. */
subtitleProjectName?: string | null;
subtitleProjectIconDataUri?: string | null;
hostBadge?: HostBadgeModel | null;
/** Hoisted rows use their project icon as the leading visual because no project row contains them. */
leadingProjectName?: string | null;
leadingProjectIconDataUri?: string | null;
scriptIconKind?: SidebarWorkspaceScriptIconKind | null;
isHovered: boolean;
isLoading: boolean;
@@ -124,28 +178,51 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
settings: { workspaceTitleSource },
} = useAppSettings();
const workspaceLabel = resolveSidebarWorkspacePrimaryLabel({ workspace, workspaceTitleSource });
const hasTitleAccessory = Boolean(scriptIconKind || workspace.prHint || hostBadge);
const workspaceBranchTextStyle = useMemo(
() => [
styles.workspaceBranchText,
scriptIconKind ? styles.workspaceBranchTextWithAccessory : styles.workspaceBranchTextFlexible,
hasTitleAccessory
? styles.workspaceBranchTextWithAccessory
: styles.workspaceBranchTextFlexible,
isHovered && styles.workspaceBranchTextHovered,
isCreating && styles.workspaceBranchTextCreating,
],
[scriptIconKind, isHovered, isCreating],
[hasTitleAccessory, isHovered, isCreating],
);
return (
<View style={styles.workspaceRowContent}>
<View style={styles.workspaceRowMain}>
<WorkspaceStatusIndicator
bucket={workspace.statusBucket}
workspaceKind={workspace.workspaceKind}
loading={isLoading}
reserveIdleSpace={reserveIdleStatusIndicatorSpace}
/>
{leadingProjectName ? (
<ProjectStatusIndicator
iconDataUri={leadingProjectIconDataUri}
displayName={leadingProjectName}
projectViewKey={workspace.projectViewKey}
statusBucket={workspace.statusBucket}
loading={isLoading}
testID={`sidebar-row-project-icon-${workspace.workspaceKey}`}
/>
) : (
<WorkspaceStatusIndicator
bucket={workspace.statusBucket}
workspaceKind={workspace.workspaceKind}
loading={isLoading}
reserveIdleSpace={reserveIdleStatusIndicatorSpace}
/>
)}
<View style={styles.workspaceContentColumn}>
<View style={styles.workspaceTitleRow}>
<View style={styles.workspaceTitleLeft}>
{workspace.prHint ? <PullRequestIcon hint={workspace.prHint} /> : null}
{hostBadge ? (
<HostBadge
serverId={hostBadge.serverId}
label={hostBadge.label}
color={hostBadge.color}
showLabel={hostBadge.showLabel}
/>
) : null}
<Text style={workspaceBranchTextStyle} numberOfLines={1}>
{workspaceLabel}
</Text>
@@ -153,27 +230,6 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
</View>
<View style={sidebarWorkspaceRowStyles.rowRight}>{children}</View>
</View>
{subtitle ? (
<View style={styles.workspaceSubtitleRow}>
{subtitleProjectName ? (
<SidebarSubtitleProjectIcon
projectViewKey={workspace.projectViewKey}
projectName={subtitleProjectName}
iconDataUri={subtitleProjectIconDataUri}
testID={`sidebar-row-project-icon-${workspace.workspaceKey}`}
/>
) : null}
<Text style={styles.workspaceSubtitle} numberOfLines={1}>
{subtitle}
</Text>
</View>
) : null}
{workspace.prHint ? (
<View style={styles.workspacePrBadgeRow}>
<PrBadge hint={workspace.prHint} />
<ChecksBadge checks={workspace.prHint.checks} forge={workspace.prHint.forge} />
</View>
) : null}
</View>
</View>
{showShortcutBadge && shortcutNumber !== null ? (
@@ -212,20 +268,22 @@ function WorkspaceStatusIndicator({
loading?: boolean;
reserveIdleSpace?: boolean;
}) {
const shouldShowSyncedLoader = shouldRenderSyncedStatusLoader({ bucket });
// Busy is a pulsing dot here for the same reason it is on a project icon: every status in
// the sidebar is a dot, and a row with a project icon simply moves that dot onto the icon.
// A row starting up and a row working are both busy, so they share the dot and differ only
// in testID.
if (loading) {
return (
<View style={styles.workspaceStatusDot} testID="workspace-status-indicator-loading">
<ThemedLoadingSpinner size={8} uniProps={foregroundMutedColorMapping} />
<PulsingStatusDot style={styles.standaloneRunningDot} />
</View>
);
}
if (shouldShowSyncedLoader) {
if (shouldRenderSyncedStatusLoader({ bucket })) {
return (
<View style={styles.workspaceStatusDot} testID="workspace-status-indicator-running">
<ThemedSyncedLoader size={11} uniProps={syncedLoaderColorMapping} />
<PulsingStatusDot style={styles.standaloneRunningDot} />
</View>
);
}
@@ -247,8 +305,14 @@ function WorkspaceStatusIndicator({
}
if (bucket === "done") {
// An idle row still gets a dot rather than an empty slot. Nested rows are marked as
// workspaces by indentation alone, and with nothing in the leading slot the rail has no
// edge to read against — a workspace carrying its own glyph starts looking like a project
// header. The dot is muted to half opacity so it holds the rail without reporting status.
return reserveIdleSpace ? (
<View style={styles.workspaceStatusDot} testID="workspace-status-indicator-done" />
<View style={styles.workspaceStatusDot} testID="workspace-status-indicator-done">
<View style={styles.idleStatusDot} />
</View>
) : null;
}
@@ -304,9 +368,8 @@ function StatusDotOverlay({
return <View style={overlayStyle} />;
}
function PrBadge({ hint }: { hint: PrHint }) {
function PullRequestIcon({ hint }: { hint: PrHint }) {
const { t } = useTranslation();
const [isHovered, setIsHovered] = useState(false);
const handlePress = useCallback(
(event: GestureResponderEvent) => {
event.stopPropagation();
@@ -314,21 +377,9 @@ function PrBadge({ hint }: { hint: PrHint }) {
},
[hint.url],
);
const textStyle = useMemo(
() => (isHovered ? [prBadgeStyles.text, prBadgeStyles.textHovered] : prBadgeStyles.text),
[isHovered],
);
const iconUniProps = isHovered ? foregroundColorMapping : getPrIconUniMapping(hint.state);
const presentation = getForgePresentation(normalizeForge(hint.forge));
const handlePressIn = useCallback((event: GestureResponderEvent) => event.stopPropagation(), []);
const handleHoverIn = useCallback(() => setIsHovered(true), []);
const handleHoverOut = useCallback(() => setIsHovered(false), []);
const pressableStyle = useMemo(
() => [prBadgeStyles.badge, isHovered && prBadgeStyles.badgePressed],
[isHovered],
);
return (
<Pressable
@@ -340,36 +391,13 @@ function PrBadge({ hint }: { hint: PrHint }) {
hitSlop={4}
onPressIn={handlePressIn}
onPress={handlePress}
onHoverIn={handleHoverIn}
onHoverOut={handleHoverOut}
style={pressableStyle}
style={pullRequestIconStyle}
>
{isHovered ? (
<ThemedExternalLink size={12} uniProps={iconUniProps} />
) : (
<ThemedGitPullRequest size={12} uniProps={iconUniProps} />
)}
<Text style={textStyle} numberOfLines={1}>
{presentation.numberPrefix}
{hint.number}
</Text>
<ThemedGitPullRequest size={12} uniProps={getPrIconUniMapping(hint.state)} />
</Pressable>
);
}
function ChecksBadge({ checks, forge }: { checks: PrHint["checks"]; forge: PrHint["forge"] }) {
if (!checks || checks.length === 0) return null;
const failed = checks.filter((check) => check.status === "failure").length;
if (failed === 0) return null;
const icon = getForgePresentation(normalizeForge(forge)).icon;
return (
<View style={checksBadgeStyles.badge}>
{renderChecksBadgeForgeIcon(icon)}
<Text style={checksBadgeStyles.text}>{failed} failed</Text>
</View>
);
}
function getPrIconUniMapping(state: PrHint["state"]) {
switch (state) {
case "merged":
@@ -396,38 +424,16 @@ function getStatusDotColorStyle(bucket: SidebarStateBucket) {
}
}
const prBadgeStyles = StyleSheet.create((theme) => ({
badge: {
flexDirection: "row",
const pullRequestIconStyles = StyleSheet.create(() => ({
pressable: {
height: 20,
alignItems: "center",
gap: 2,
justifyContent: "center",
flexShrink: 0,
},
badgePressed: {
pressableActive: {
opacity: 0.82,
},
text: {
fontSize: theme.fontSize.xs,
fontWeight: theme.fontWeight.normal,
lineHeight: 14,
color: theme.colors.foregroundMuted,
},
textHovered: {
color: theme.colors.foreground,
},
}));
const checksBadgeStyles = StyleSheet.create((theme) => ({
badge: {
flexDirection: "row",
alignItems: "center",
gap: 2,
},
text: {
fontSize: theme.fontSize.xs,
fontWeight: theme.fontWeight.normal,
lineHeight: 14,
color: theme.colors.palette.red[500],
},
}));
export const sidebarWorkspaceRowStyles = StyleSheet.create((theme) => ({
@@ -469,6 +475,13 @@ export const sidebarWorkspaceRowStyles = StyleSheet.create((theme) => ({
top: 0,
right: 0,
},
trailingActionScrim: {
position: "absolute",
top: 0,
bottom: 0,
right: 0,
width: SCRIM_WIDTH,
},
}));
export function SidebarWorkspaceShortcutBadge({ number }: { number: number }) {
@@ -479,6 +492,34 @@ export function SidebarWorkspaceShortcutBadge({ number }: { number: number }) {
);
}
/**
* What the trailing slot shows for a row. Derived in one place because three row renderers
* share it: the two project-mode rows and the status-mode row. The rule used to be copied
* into each of them and immediately drifted — one call site kept hiding the diff after the
* others stopped.
*
* The diff survives the kebab on hover and fades under the scrim instead of blinking out.
* Touch has no hover, so its permanent kebab still hides the diff outright rather than
* scrimming an unhovered row whose background doesn't match the gradient.
*/
export function resolveTrailingActionVisibility({
hasDiffStat,
hasArchiveAction,
isHovered,
isTouchPlatform,
showShortcut,
}: {
hasDiffStat: boolean;
hasArchiveAction: boolean;
isHovered: boolean;
isTouchPlatform: boolean;
showShortcut: boolean;
}): { showDiffStat: boolean; showKebab: boolean; showScrim: boolean } {
const showKebab = Boolean(hasArchiveAction && (isHovered || isTouchPlatform)) && !showShortcut;
const showDiffStat = hasDiffStat && !showShortcut && (isHovered || !showKebab);
return { showDiffStat, showKebab, showScrim: showDiffStat && showKebab };
}
export function SidebarWorkspaceTrailingActionSlot({ children }: { children: ReactNode }) {
return <View style={sidebarWorkspaceRowStyles.trailingActionSlot}>{children}</View>;
}
@@ -496,13 +537,42 @@ export function SidebarWorkspaceTrailingActionBase({
export function SidebarWorkspaceTrailingActionOverlay({
visible,
scrim = false,
children,
}: {
visible: boolean;
/** Fade the row into the kebab when something (the diff stat) is still rendered behind it. */
scrim?: boolean;
children: ReactNode;
}) {
if (!visible || !children) return null;
return <View style={sidebarWorkspaceRowStyles.trailingActionOverlay}>{children}</View>;
return (
<>
{scrim ? <TrailingActionScrim /> : null}
<View style={sidebarWorkspaceRowStyles.trailingActionOverlay}>{children}</View>
</>
);
}
/**
* The row's own background, faded in from the right, sitting between the diff stat and the
* kebab. The kebab lands on fully opaque background while the diff dissolves underneath it
* rather than blinking out — hiding the diff outright was the old behavior and it cost a
* visible flicker on every hover.
*
* Anchored to the trailing slot, which is position:relative. Wider than the slot on purpose:
* the fade has to start before the diff stat does or the diff's left edge cuts off hard.
*/
function TrailingActionScrim() {
// useId's output contains characters that are not legal inside url(#...) — React 19 wraps
// ids in guillemets, React 18 in colons — and an unresolvable fill paints nothing at all.
// Keep the per-instance uniqueness, drop everything a fragment reference can't carry.
const gradientId = `sidebar-scrim-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
return (
<View style={sidebarWorkspaceRowStyles.trailingActionScrim} pointerEvents="none">
<ThemedTrailingActionScrimSvg gradientId={gradientId} uniProps={scrimColorMapping} />
</View>
);
}
const styles = StyleSheet.create((theme) => ({
@@ -528,7 +598,7 @@ const styles = StyleSheet.create((theme) => ({
workspaceTitleLeft: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
gap: theme.spacing[1],
flex: 1,
minWidth: 0,
},
@@ -557,6 +627,19 @@ const styles = StyleSheet.create((theme) => ({
borderRadius: theme.borderRadius.full,
backgroundColor: theme.colors.palette.green[500],
},
standaloneRunningDot: {
width: 8,
height: 8,
borderRadius: theme.borderRadius.full,
backgroundColor: getStatusDotColor({ theme, bucket: "running" }) ?? undefined,
},
idleStatusDot: {
width: 8,
height: 8,
borderRadius: theme.borderRadius.full,
backgroundColor: theme.colors.foregroundExtraMuted,
opacity: 0.3,
},
workspaceBranchText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
@@ -583,25 +666,6 @@ const styles = StyleSheet.create((theme) => ({
workspaceBranchTextHovered: {
opacity: 1,
},
workspaceSubtitleRow: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[1],
minWidth: 0,
},
workspaceSubtitle: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
lineHeight: 14,
flexShrink: 1,
minWidth: 0,
},
workspacePrBadgeRow: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
marginTop: theme.spacing[1],
},
statusDotNeedsInput: {
backgroundColor: theme.colors.palette.amber[500],
borderColor: theme.colors.surface0,
@@ -611,7 +675,7 @@ const styles = StyleSheet.create((theme) => ({
borderColor: theme.colors.surface0,
},
statusDotRunning: {
backgroundColor: theme.colors.palette.blue[500],
backgroundColor: getStatusDotColor({ theme, bucket: "running" }) ?? undefined,
borderColor: theme.colors.surface0,
},
statusDotAttention: {
packages/app/src/components/sidebar/sidebar-workspace-row.tsx
+46 -18
View File
@@ -1,9 +1,10 @@
import { memo, useCallback, useMemo, useState, type Ref } from "react";
import { useTranslation } from "react-i18next";
import { View, Text, Pressable } from "react-native";
import { View, Text } from "react-native";
import { StyleSheet } from "react-native-unistyles";
import { useMutation } from "@tanstack/react-query";
import * as Clipboard from "expo-clipboard";
import type { HostBadgeModel } from "@/hosts/appearance";
import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
import type { DraggableListDragHandleProps } from "@/components/draggable-list.types";
import type { ShortcutKey } from "@/utils/format-shortcut";
@@ -20,10 +21,14 @@ import { redirectIfArchivingActiveWorkspace } from "@/utils/sidebar-workspace-ar
import { requireWorkspaceDirectory } from "@/utils/workspace-directory";
import { isNative as platformIsNative } from "@/constants/platform";
import { useLongPressDragInteraction } from "@/components/sidebar/use-long-press-drag-interaction";
import { SidebarWorkspaceMenu } from "@/components/sidebar/sidebar-workspace-menu";
import {
SidebarWorkspaceContextMenu,
SidebarWorkspaceMenu,
} from "@/components/sidebar/sidebar-workspace-menu";
import {
SidebarWorkspaceRowFrame,
SidebarWorkspaceRowContent,
resolveTrailingActionVisibility,
SidebarWorkspaceTrailingActionBase,
SidebarWorkspaceTrailingActionOverlay,
SidebarWorkspaceTrailingActionSlot,
@@ -38,8 +43,8 @@ interface SidebarWorkspaceRowProps {
showShortcutBadge: boolean;
canCopyBranchName: boolean;
onPress: () => void;
/** Secondary line under the name (status grouping shows the project name). */
subtitle?: string | null;
/** The host pill after the title. Absent → the sidebar spans one host, or this one is hidden. */
hostBadge?: HostBadgeModel | null;
/** Project grouping only: shows a transient "creating" affordance. */
isCreating?: boolean;
/** Project grouping only: drag-to-reorder wiring. Absent → not draggable. */
@@ -55,7 +60,7 @@ export function SidebarWorkspaceRow({
showShortcutBadge,
canCopyBranchName,
onPress,
subtitle,
hostBadge,
isCreating = false,
drag,
isDragging = false,
@@ -175,7 +180,7 @@ export function SidebarWorkspaceRow({
selected={selected}
shortcutNumber={shortcutNumber}
showShortcutBadge={showShortcutBadge}
subtitle={subtitle}
hostBadge={hostBadge}
isCreating={isCreating}
isArchiving={isArchiving}
onPress={onPress}
@@ -211,7 +216,7 @@ interface WorkspaceRowBodyProps {
selected: boolean;
shortcutNumber: number | null;
showShortcutBadge: boolean;
subtitle?: string | null;
hostBadge?: HostBadgeModel | null;
isCreating: boolean;
isArchiving: boolean;
onPress: () => void;
@@ -234,7 +239,7 @@ function WorkspaceRowBody({
selected,
shortcutNumber,
showShortcutBadge,
subtitle,
hostBadge,
isCreating,
isArchiving,
onPress,
@@ -276,7 +281,7 @@ function WorkspaceRowBody({
return (
<SidebarWorkspaceRowFrame workspace={workspace} isDragging={isDragging}>
{({ isHovered, hoverHandlers }) => {
{({ isHovered, contextMenuOpen, onContextMenuOpenChange, hoverHandlers }) => {
const isDesktop = !isTouchPlatform;
const showScriptsIcon = isDesktop && workspace.hasRunningScripts;
const hasRunningService = workspace.scripts.some(
@@ -297,7 +302,23 @@ function WorkspaceRowBody({
style={styles.workspaceRowContainer}
{...hoverHandlers}
>
<Pressable
<SidebarWorkspaceContextMenu
contextMenuOpen={contextMenuOpen}
onContextMenuOpenChange={onContextMenuOpenChange}
workspace={workspace}
hostBadgeLabel={hostBadge?.label}
scriptIconKind={scriptIconKind}
workspaceKey={workspace.workspaceKey}
onCopyPath={onCopyPath}
onCopyBranchName={onCopyBranchName}
onRename={onRename}
onMarkAsRead={onMarkAsRead}
onArchive={onArchive}
archiveLabel={archiveLabel}
archiveStatus={archiveStatus}
archivePendingLabel={archivePendingLabel}
archiveShortcutKeys={archiveShortcutKeys}
openInFileManagerPath={workspace.workspaceDirectory}
disabled={isArchiving}
aria-selected={selected}
accessibilityRole="button"
@@ -311,7 +332,7 @@ function WorkspaceRowBody({
>
<SidebarWorkspaceRowContent
workspace={workspace}
subtitle={subtitle}
hostBadge={hostBadge}
scriptIconKind={scriptIconKind}
isHovered={isHovered}
isLoading={isArchiving || isCreating}
@@ -337,7 +358,7 @@ function WorkspaceRowBody({
onMarkAsRead={onMarkAsRead}
/>
</SidebarWorkspaceRowContent>
</Pressable>
</SidebarWorkspaceContextMenu>
</View>
);
}}
@@ -380,8 +401,17 @@ function WorkspaceRowTrailingActions({
}) {
const { t } = useTranslation();
const showShortcut = showShortcutBadge && shortcutNumber !== null;
const showKebab = Boolean(onArchive && (isHovered || isTouchPlatform));
const showKebabInSlot = showKebab && !showShortcut;
const {
showDiffStat,
showKebab: showKebabInSlot,
showScrim,
} = resolveTrailingActionVisibility({
hasDiffStat: Boolean(workspace.diffStat),
hasArchiveAction: Boolean(onArchive),
isHovered,
isTouchPlatform,
showShortcut,
});
const shouldRenderActionSlot = Boolean(onArchive || workspace.diffStat);
return (
@@ -391,9 +421,7 @@ function WorkspaceRowTrailingActions({
) : null}
{shouldRenderActionSlot ? (
<SidebarWorkspaceTrailingActionSlot>
<SidebarWorkspaceTrailingActionBase
visible={Boolean(workspace.diffStat && !showKebabInSlot && !showShortcut)}
>
<SidebarWorkspaceTrailingActionBase visible={showDiffStat}>
{workspace.diffStat ? (
<DiffStat
additions={workspace.diffStat.additions}
@@ -401,7 +429,7 @@ function WorkspaceRowTrailingActions({
/>
) : null}
</SidebarWorkspaceTrailingActionBase>
<SidebarWorkspaceTrailingActionOverlay visible={showKebabInSlot}>
<SidebarWorkspaceTrailingActionOverlay visible={showKebabInSlot} scrim={showScrim}>
{onArchive ? (
<SidebarWorkspaceMenu
workspaceKey={workspace.workspaceKey}
packages/app/src/components/sidebar/sidebar-workspace-title.test.ts
+46 -1
View File
@@ -1,5 +1,8 @@
import { describe, expect, it } from "vitest";
import { resolveSidebarWorkspacePrimaryLabel } from "@/components/sidebar/sidebar-workspace-title";
import {
resolveSidebarWorkspaceAccessibilityLabel,
resolveSidebarWorkspacePrimaryLabel,
} from "@/components/sidebar/sidebar-workspace-title";
describe("resolveSidebarWorkspacePrimaryLabel", () => {
it("uses the workspace name in title mode", () => {
@@ -29,3 +32,45 @@ describe("resolveSidebarWorkspacePrimaryLabel", () => {
expect(label).toBe("Local folder");
});
});
describe("resolveSidebarWorkspaceAccessibilityLabel", () => {
it("includes the visible host badge with the workspace title", () => {
const label = resolveSidebarWorkspaceAccessibilityLabel({
workspace: { name: "Investigate search", currentBranch: "fix/search", statusBucket: "done" },
workspaceTitleSource: "title",
hostBadgeLabel: "Build host",
});
expect(label).toBe("Investigate search, Build host");
});
it("owns every visual row contributor in one accessible label", () => {
const label = resolveSidebarWorkspaceAccessibilityLabel({
workspace: {
name: "Investigate search",
currentBranch: "fix/search",
statusBucket: "running",
},
workspaceTitleSource: "branch",
leadingProjectName: "Search project",
hostBadgeLabel: "Build host",
pullRequestLabel: "Pull request 42",
scriptLabel: "Scripts available",
});
expect(label).toBe(
"Search project, fix/search, Build host, Pull request 42, Scripts available, Working",
);
});
it("omits the idle status from the workspace label", () => {
const label = resolveSidebarWorkspaceAccessibilityLabel({
workspace: { name: "Investigate search", currentBranch: "fix/search", statusBucket: "done" },
workspaceTitleSource: "title",
leadingProjectName: "Search project",
hostBadgeLabel: "Build host",
});
expect(label).toBe("Search project, Investigate search, Build host");
});
});
packages/app/src/components/sidebar/sidebar-workspace-title.ts
+23
View File
@@ -1,5 +1,6 @@
import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
import type { WorkspaceTitleSource } from "@/hooks/use-settings";
import { STATUS_BUCKET_LABELS } from "@/hooks/sidebar-status-view-model";
export function resolveSidebarWorkspacePrimaryLabel(input: {
workspace: Pick<SidebarWorkspaceEntry, "name" | "currentBranch">;
@@ -10,3 +11,25 @@ export function resolveSidebarWorkspacePrimaryLabel(input: {
}
return input.workspace.name;
}
export function resolveSidebarWorkspaceAccessibilityLabel(input: {
workspace: Pick<SidebarWorkspaceEntry, "name" | "currentBranch" | "statusBucket">;
workspaceTitleSource: WorkspaceTitleSource;
leadingProjectName?: string | null;
hostBadgeLabel?: string | null;
pullRequestLabel?: string | null;
scriptLabel?: string | null;
}): string {
return [
input.leadingProjectName,
resolveSidebarWorkspacePrimaryLabel(input),
input.hostBadgeLabel,
input.pullRequestLabel,
input.scriptLabel,
input.workspace.statusBucket === "done"
? null
: STATUS_BUCKET_LABELS[input.workspace.statusBucket],
]
.filter((label): label is string => Boolean(label))
.join(", ");
}
packages/app/src/components/workspace-hover-card.tsx
+26 -24
View File
@@ -19,6 +19,7 @@ import {
CircleX,
Copy,
ExternalLink,
FileDiff,
Folder,
GitBranch,
Server,
@@ -94,12 +95,14 @@ interface WorkspaceHoverCardProps {
workspace: SidebarWorkspaceEntry;
prHint: PrHint | null;
isDragging: boolean;
disabled?: boolean;
}
export function WorkspaceHoverCard({
workspace,
prHint,
isDragging,
disabled = false,
children,
}: PropsWithChildren<WorkspaceHoverCardProps>): ReactNode {
const isCompact = useIsCompactFormFactor();
@@ -109,7 +112,12 @@ export function WorkspaceHoverCard({
}
return (
<WorkspaceHoverCardDesktop workspace={workspace} prHint={prHint} isDragging={isDragging}>
<WorkspaceHoverCardDesktop
workspace={workspace}
prHint={prHint}
isDragging={isDragging}
disabled={disabled}
>
{children}
</WorkspaceHoverCardDesktop>
);
@@ -119,6 +127,7 @@ function WorkspaceHoverCardDesktop({
workspace,
prHint,
isDragging,
disabled = false,
children,
}: PropsWithChildren<WorkspaceHoverCardProps>): ReactElement {
const triggerRef = useRef<View>(null);
@@ -145,10 +154,10 @@ function WorkspaceHoverCardDesktop({
const handleTriggerEnter = useCallback(() => {
triggerHoveredRef.current = true;
clearGraceTimer();
if (!isDragging) {
if (!isDragging && !disabled) {
setOpen(true);
}
}, [clearGraceTimer, isDragging]);
}, [clearGraceTimer, disabled, isDragging]);
const handleTriggerLeave = useCallback(() => {
triggerHoveredRef.current = false;
@@ -166,13 +175,13 @@ function WorkspaceHoverCardDesktop({
onLeaveSafeZone: scheduleClose,
});
// Close when drag starts
// Close while another row interaction owns attention.
useEffect(() => {
if (isDragging) {
if (isDragging || disabled) {
clearGraceTimer();
setOpen(false);
}
}, [isDragging, clearGraceTimer]);
}, [clearGraceTimer, disabled, isDragging]);
// Cleanup on unmount
useEffect(() => {
@@ -285,6 +294,16 @@ function WorkspaceHoverCardContent({
{workspace.name}
</Text>
</View>
{prHint ? <PrBadge hint={prHint} style={styles.cardInfoRow} /> : null}
{workspace.diffStat ? (
<View style={styles.cardInfoRow}>
<ThemedFileDiff size={12} uniProps={foregroundMutedColorMapping} />
<DiffStat
additions={workspace.diffStat.additions}
deletions={workspace.diffStat.deletions}
/>
</View>
) : null}
<HostRow serverId={workspace.serverId} />
{workspace.currentBranch ? (
<CopyableInfoRow
@@ -304,17 +323,6 @@ function WorkspaceHoverCardContent({
testID="hover-card-workspace-cwd"
/>
) : null}
{prHint || workspace.diffStat ? (
<View style={styles.cardMetaRow}>
{workspace.diffStat ? (
<DiffStat
additions={workspace.diffStat.additions}
deletions={workspace.diffStat.deletions}
/>
) : null}
{prHint ? <PrBadge hint={prHint} /> : null}
</View>
) : null}
{prHint?.checks && prHint.checks.length > 0 ? (
<>
<View style={styles.separator} />
@@ -334,6 +342,7 @@ function WorkspaceHoverCardContent({
const ThemedGitBranch = withUnistyles(GitBranch);
const ThemedFolder = withUnistyles(Folder);
const ThemedServer = withUnistyles(Server);
const ThemedFileDiff = withUnistyles(FileDiff);
type CardInfoIcon = React.ComponentType<React.ComponentProps<typeof ThemedGitBranch>>;
@@ -596,13 +605,6 @@ const styles = StyleSheet.create((theme) => ({
flex: 1,
minWidth: 0,
},
cardMetaRow: {
flexDirection: "row",
alignItems: "center",
gap: 6,
paddingHorizontal: theme.spacing[3],
paddingBottom: theme.spacing[2],
},
cardInfoRow: {
flexDirection: "row",
alignItems: "center",
packages/app/src/components/workspace-shortcut-targets-subscriber.test.tsx
+2
View File
@@ -16,6 +16,7 @@ import { useSidebarViewStore } from "@/stores/sidebar-view-store";
import type { HostProfile } from "@/types/host-connection";
import { WorkspaceShortcutTargetsSubscriber } from "./workspace-shortcut-targets-subscriber";
import { SidebarModelProvider } from "./sidebar/sidebar-model";
import { defaultHostAppearance } from "@/hosts/appearance";
vi.hoisted(() => {
(globalThis as unknown as { __DEV__: boolean }).__DEV__ = false;
@@ -51,6 +52,7 @@ function hostProfile(serverId = "srv"): HostProfile {
return {
serverId,
label: "Shortcut Host",
appearance: defaultHostAppearance(),
lifecycle: {},
connections: [],
preferredConnectionId: null,
packages/app/src/diagnostics/app-diagnostic-report.test.ts
+2
View File
@@ -6,11 +6,13 @@ import {
} from "./app-diagnostic-report";
import type { HostRuntimeSnapshot } from "@/runtime/host-runtime";
import type { HostProfile } from "@/types/host-connection";
import { defaultHostAppearance } from "@/hosts/appearance";
function makeHost(): HostProfile {
return {
serverId: "srv-secret",
label: "Secret host",
appearance: defaultHostAppearance(),
lifecycle: {},
preferredConnectionId: "direct:secret.example.test:6767",
createdAt: "2026-06-25T00:00:00.000Z",
packages/app/src/hosts/appearance.test.ts
+153
View File
@@ -0,0 +1,153 @@
import { describe, expect, it } from "vitest";
import {
type HostAppearanceSource,
defaultHostAppearance,
normalizeStoredHostAppearance,
resolveHostBadgeDisplay,
selectHostBadges,
} from "@/hosts/appearance";
function host(
serverId: string,
label: string,
appearance = defaultHostAppearance(),
): HostAppearanceSource {
return { serverId, label, appearance };
}
describe("normalizeStoredHostAppearance", () => {
it("defaults when the stored registry predates the field or holds junk", () => {
const expected = { color: "none", badgeDisplay: null };
expect(normalizeStoredHostAppearance(undefined)).toEqual(expected);
expect(normalizeStoredHostAppearance(null)).toEqual(expected);
expect(normalizeStoredHostAppearance("x")).toEqual(expected);
expect(normalizeStoredHostAppearance({})).toEqual(expected);
expect(normalizeStoredHostAppearance({ color: "chartreuse" })).toEqual(expected);
expect(normalizeStoredHostAppearance({ badgeDisplay: "loud" })).toEqual(expected);
});
it("round-trips a value the user actually chose", () => {
expect(normalizeStoredHostAppearance({ color: "teal", badgeDisplay: "icon" })).toEqual({
color: "teal",
badgeDisplay: "icon",
});
});
});
describe("resolveHostBadgeDisplay", () => {
it("hides the badge for the local host until the user chooses", () => {
expect(
resolveHostBadgeDisplay({ appearance: defaultHostAppearance(), isLocalHost: true }),
).toBe("hidden");
});
it("names a remote host until the user chooses", () => {
expect(
resolveHostBadgeDisplay({ appearance: defaultHostAppearance(), isLocalHost: false }),
).toBe("name");
});
it("prefers an explicit choice over either default", () => {
expect(
resolveHostBadgeDisplay({
appearance: { color: "none", badgeDisplay: "icon" },
isLocalHost: true,
}),
).toBe("icon");
expect(
resolveHostBadgeDisplay({
appearance: { color: "none", badgeDisplay: "hidden" },
isLocalHost: false,
}),
).toBe("hidden");
});
it("defers only the default while local-host detection is unresolved", () => {
expect(
resolveHostBadgeDisplay({
appearance: defaultHostAppearance(),
isLocalHost: false,
localHostResolutionPending: true,
}),
).toBeNull();
expect(
resolveHostBadgeDisplay({
appearance: { color: "none", badgeDisplay: "icon" },
isLocalHost: false,
localHostResolutionPending: true,
}),
).toBe("icon");
});
});
describe("selectHostBadges", () => {
it("shows no badges while the sidebar spans a single host", () => {
const badges = selectHostBadges({
hosts: [host("alpha", "Alpha"), host("beta", "Beta")],
localServerId: null,
enabled: false,
});
expect(badges.size).toBe(0);
});
it("omits a host the user hid and keeps its sibling", () => {
const badges = selectHostBadges({
hosts: [
host("alpha", "Alpha", { color: "none", badgeDisplay: "hidden" }),
host("beta", "Beta"),
],
localServerId: null,
enabled: true,
});
expect(badges.has("alpha")).toBe(false);
expect(badges.get("beta")).toEqual({
serverId: "beta",
label: "Beta",
color: "none",
showLabel: true,
});
});
it("keeps an icon-only host in the map without its label", () => {
const badges = selectHostBadges({
hosts: [host("alpha", "Alpha", { color: "teal", badgeDisplay: "icon" })],
localServerId: null,
enabled: true,
});
expect(badges.get("alpha")).toEqual({
serverId: "alpha",
label: "Alpha",
color: "teal",
showLabel: false,
});
});
it("falls back to the server id when the label is blank", () => {
const badges = selectHostBadges({
hosts: [host("alpha", " ")],
localServerId: null,
enabled: true,
});
expect(badges.get("alpha")?.label).toBe("alpha");
});
it("hides an untouched local host while its remote sibling shows", () => {
const badges = selectHostBadges({
hosts: [host("alpha", "Alpha"), host("beta", "Beta")],
localServerId: "alpha",
enabled: true,
});
expect(badges.has("alpha")).toBe(false);
expect(badges.get("beta")?.label).toBe("Beta");
});
it("omits untouched badges while local-host detection is unresolved", () => {
const badges = selectHostBadges({
hosts: [host("alpha", "Alpha"), host("beta", "Beta")],
localServerId: null,
localHostResolutionPending: true,
enabled: true,
});
expect(badges.size).toBe(0);
});
});
packages/app/src/hosts/appearance.ts
+100
View File
@@ -0,0 +1,100 @@
import { IDENTITY_COLOR_NAMES, type IdentityColorName } from "@/styles/identity-colors";
import type { HostProfile } from "@/types/host-connection";
export type HostColor = "none" | IdentityColorName;
export const HOST_COLORS: readonly HostColor[] = ["none", ...IDENTITY_COLOR_NAMES];
export type HostBadgeDisplay = "name" | "icon" | "hidden";
export const HOST_BADGE_DISPLAYS: readonly HostBadgeDisplay[] = ["name", "icon", "hidden"];
/**
* Per-device host presentation. `badgeDisplay` is null while the user has not chosen,
* because the default differs by host (local hides, remote shows) and local-ness is only
* knowable from a desktop-only async query — never at parse time.
*/
export interface HostAppearance {
color: HostColor;
badgeDisplay: HostBadgeDisplay | null;
}
export function defaultHostAppearance(): HostAppearance {
return { color: "none", badgeDisplay: null };
}
function isHostColor(value: unknown): value is HostColor {
return HOST_COLORS.some((color) => color === value);
}
function isHostBadgeDisplay(value: unknown): value is HostBadgeDisplay {
return HOST_BADGE_DISPLAYS.some((display) => display === value);
}
export function normalizeStoredHostAppearance(value: unknown): HostAppearance {
if (!value || typeof value !== "object" || Array.isArray(value)) {
return defaultHostAppearance();
}
const record = value as Record<string, unknown>;
return {
color: isHostColor(record.color) ? record.color : "none",
badgeDisplay: isHostBadgeDisplay(record.badgeDisplay) ? record.badgeDisplay : null,
};
}
export function resolveHostBadgeDisplay(input: {
appearance: HostAppearance;
isLocalHost: boolean;
localHostResolutionPending?: boolean;
}): HostBadgeDisplay | null {
if (input.appearance.badgeDisplay) {
return input.appearance.badgeDisplay;
}
if (input.localHostResolutionPending) {
return null;
}
return input.isLocalHost ? "hidden" : "name";
}
export interface HostBadgeModel {
serverId: string;
label: string;
color: HostColor;
showLabel: boolean;
}
export type HostAppearanceSource = Pick<HostProfile, "serverId" | "label" | "appearance">;
/**
* The sidebar's whole host-badge decision, resolved once per host list. Rows look their
* badge up by serverId and render whatever they find; a host that should show no badge is
* simply absent from the map.
*/
export function selectHostBadges(input: {
hosts: readonly HostAppearanceSource[];
localServerId: string | null;
localHostResolutionPending?: boolean;
enabled: boolean;
}): ReadonlyMap<string, HostBadgeModel> {
const badges = new Map<string, HostBadgeModel>();
if (!input.enabled) {
return badges;
}
for (const host of input.hosts) {
const display = resolveHostBadgeDisplay({
appearance: host.appearance,
isLocalHost: host.serverId === input.localServerId,
localHostResolutionPending: input.localHostResolutionPending,
});
if (display === null || display === "hidden") {
continue;
}
badges.set(host.serverId, {
serverId: host.serverId,
label: host.label.trim() || host.serverId,
color: host.appearance.color,
showLabel: display === "name",
});
}
return badges;
}
packages/app/src/i18n/resources/ar.ts
+35
View File
@@ -1938,6 +1938,41 @@ export const ar: TranslationResources = {
},
},
host: {
appearance: {
title: "المظهر",
name: {
label: "الاسم",
},
color: {
label: "اللون",
accessibilityLabel: "اللون، {{value}}",
options: {
none: "افتراضي",
violet: "بنفسجي",
sky: "سماوي",
emerald: "زمردي",
orange: "برتقالي",
pink: "وردي",
indigo: "نيلي",
teal: "أزرق مخضر",
red: "أحمر",
amber: "كهرماني",
blue: "أزرق",
},
},
badge: {
label: "شارة الشريط الجانبي",
accessibilityLabel: "شارة الشريط الجانبي، {{value}}",
options: {
name: "الاسم",
icon: "أيقونة فقط",
hidden: "مخفي",
},
},
preview: {
workspaceName: "my-workspace",
},
},
notFound: "لم يتم العثور على Host",
badges: {
relay: "تتابع",
packages/app/src/i18n/resources/en.ts
+36 -1
View File
@@ -265,7 +265,7 @@ export const en = {
copyCode: "Copy code",
copyTurn: "Copy turn",
copyMessage: "Copy message",
forkMenu: "Fork chat",
forkMenu: "Fork chat from here",
forkInNewTab: "Fork in a new tab",
forkInNewWorkspace: "Fork in a new workspace",
forkUnavailable: "Update the host to use this.",
@@ -1949,6 +1949,41 @@ export const en = {
},
},
host: {
appearance: {
title: "Appearance",
name: {
label: "Name",
},
color: {
label: "Color",
accessibilityLabel: "Color, {{value}}",
options: {
none: "Default",
violet: "Violet",
sky: "Sky",
emerald: "Emerald",
orange: "Orange",
pink: "Pink",
indigo: "Indigo",
teal: "Teal",
red: "Red",
amber: "Amber",
blue: "Blue",
},
},
badge: {
label: "Sidebar badge",
accessibilityLabel: "Sidebar badge, {{value}}",
options: {
name: "Name",
icon: "Icon only",
hidden: "Hidden",
},
},
preview: {
workspaceName: "my-workspace",
},
},
notFound: "Host not found",
badges: {
relay: "Relay",
packages/app/src/i18n/resources/es.ts
+35
View File
@@ -1988,6 +1988,41 @@ export const es: TranslationResources = {
},
},
host: {
appearance: {
title: "Apariencia",
name: {
label: "Nombre",
},
color: {
label: "Color",
accessibilityLabel: "Color, {{value}}",
options: {
none: "Predeterminado",
violet: "Violeta",
sky: "Cielo",
emerald: "Esmeralda",
orange: "Naranja",
pink: "Rosa",
indigo: "Índigo",
teal: "Verde azulado",
red: "Rojo",
amber: "Ámbar",
blue: "Azul",
},
},
badge: {
label: "Insignia de la barra lateral",
accessibilityLabel: "Insignia de la barra lateral, {{value}}",
options: {
name: "Nombre",
icon: "Solo icono",
hidden: "Oculta",
},
},
preview: {
workspaceName: "my-workspace",
},
},
notFound: "Hostno encontrado",
badges: {
relay: "Relé",
packages/app/src/i18n/resources/fr.ts
+35
View File
@@ -1992,6 +1992,41 @@ export const fr: TranslationResources = {
},
},
host: {
appearance: {
title: "Apparence",
name: {
label: "Nom",
},
color: {
label: "Couleur",
accessibilityLabel: "Couleur, {{value}}",
options: {
none: "Par défaut",
violet: "Violet",
sky: "Ciel",
emerald: "Émeraude",
orange: "Orange",
pink: "Rose",
indigo: "Indigo",
teal: "Sarcelle",
red: "Rouge",
amber: "Ambre",
blue: "Bleu",
},
},
badge: {
label: "Badge de la barre latérale",
accessibilityLabel: "Badge de la barre latérale, {{value}}",
options: {
name: "Nom",
icon: "Icône seule",
hidden: "Masqué",
},
},
preview: {
workspaceName: "my-workspace",
},
},
notFound: "Hostintrouvable",
badges: {
relay: "Relais",
packages/app/src/i18n/resources/ja.ts
+35
View File
@@ -1957,6 +1957,41 @@ export const ja: TranslationResources = {
},
},
host: {
appearance: {
title: "外観",
name: {
label: "名前",
},
color: {
label: "色",
accessibilityLabel: "色、{{value}}",
options: {
none: "デフォルト",
violet: "バイオレット",
sky: "スカイ",
emerald: "エメラルド",
orange: "オレンジ",
pink: "ピンク",
indigo: "インディゴ",
teal: "ティール",
red: "レッド",
amber: "アンバー",
blue: "ブルー",
},
},
badge: {
label: "サイドバーのバッジ",
accessibilityLabel: "サイドバーのバッジ、{{value}}",
options: {
name: "名前",
icon: "アイコンのみ",
hidden: "非表示",
},
},
preview: {
workspaceName: "my-workspace",
},
},
notFound: "ホストが見つかりません",
badges: {
relay: "リレー",
packages/app/src/i18n/resources/pt-BR.ts
+35
View File
@@ -1972,6 +1972,41 @@ export const ptBR: TranslationResources = {
},
},
host: {
appearance: {
title: "Aparência",
name: {
label: "Nome",
},
color: {
label: "Cor",
accessibilityLabel: "Cor, {{value}}",
options: {
none: "Padrão",
violet: "Violeta",
sky: "Céu",
emerald: "Esmeralda",
orange: "Laranja",
pink: "Rosa",
indigo: "Índigo",
teal: "Verde-azulado",
red: "Vermelho",
amber: "Âmbar",
blue: "Azul",
},
},
badge: {
label: "Selo da barra lateral",
accessibilityLabel: "Selo da barra lateral, {{value}}",
options: {
name: "Nome",
icon: "Somente ícone",
hidden: "Oculto",
},
},
preview: {
workspaceName: "my-workspace",
},
},
notFound: "Host não encontrado",
badges: {
relay: "Relay",
packages/app/src/i18n/resources/ru.ts
+35
View File
@@ -1976,6 +1976,41 @@ export const ru: TranslationResources = {
},
},
host: {
appearance: {
title: "Оформление",
name: {
label: "Имя",
},
color: {
label: "Цвет",
accessibilityLabel: "Цвет, {{value}}",
options: {
none: "По умолчанию",
violet: "Фиолетовый",
sky: "Небесный",
emerald: "Изумрудный",
orange: "Оранжевый",
pink: "Розовый",
indigo: "Индиго",
teal: "Бирюзовый",
red: "Красный",
amber: "Янтарный",
blue: "Синий",
},
},
badge: {
label: "Значок на боковой панели",
accessibilityLabel: "Значок на боковой панели, {{value}}",
options: {
name: "Имя",
icon: "Только значок",
hidden: "Скрыт",
},
},
preview: {
workspaceName: "my-workspace",
},
},
notFound: "Host не найден",
badges: {
relay: "Реле",
packages/app/src/i18n/resources/zh-CN.ts
+35
View File
@@ -1916,6 +1916,41 @@ export const zhCN: TranslationResources = {
},
},
host: {
appearance: {
title: "外观",
name: {
label: "名称",
},
color: {
label: "颜色",
accessibilityLabel: "颜色，{{value}}",
options: {
none: "默认",
violet: "紫罗兰",
sky: "天蓝",
emerald: "翠绿",
orange: "橙色",
pink: "粉色",
indigo: "靛蓝",
teal: "青色",
red: "红色",
amber: "琥珀",
blue: "蓝色",
},
},
badge: {
label: "侧边栏徽章",
accessibilityLabel: "侧边栏徽章，{{value}}",
options: {
name: "名称",
icon: "仅图标",
hidden: "隐藏",
},
},
preview: {
workspaceName: "my-workspace",
},
},
notFound: "Host 未找到",
badges: {
relay: "Relay",
packages/app/src/runtime/host-runtime.test.ts
+162
View File
@@ -9,6 +9,7 @@ import type { ConnectionOffer } from "@getpaseo/protocol/connection-offer";
import type { SessionOutboundMessage } from "@getpaseo/protocol/messages";
import type { AgentPermissionRequest } from "@getpaseo/protocol/agent-types";
import type { HostConnection, HostProfile } from "@/types/host-connection";
import { defaultHostAppearance } from "@/hosts/appearance";
import { useSessionStore, type Agent } from "@/stores/session-store";
import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
import { isAgentArchiving, setAgentArchiving } from "@/hooks/use-archive-agent";
@@ -348,6 +349,7 @@ function makeHost(input?: Partial<HostProfile>): HostProfile {
return {
serverId: input?.serverId ?? "srv_test",
label: input?.label ?? "test host",
appearance: input?.appearance ?? defaultHostAppearance(),
lifecycle: input?.lifecycle ?? {},
connections: input?.connections ?? [direct, relay],
preferredConnectionId: input?.preferredConnectionId ?? direct.id,
@@ -446,6 +448,21 @@ function createMemoryHostRuntimeStorage(entries: Record<string, string> = {}): H
};
}
function createAppearanceStore(storage: HostRuntimeStorage): HostRuntimeStore {
return new HostRuntimeStore({
storage,
deps: {
createClient: () => {
throw new Error("createClient should not be called");
},
connectToDaemon: async () => {
throw new Error("connectToDaemon should not be called");
},
getClientId: async () => "cid_test_appearance",
},
});
}
function onceHostListMatches(store: HostRuntimeStore, predicate: () => boolean): Promise<void> {
if (predicate()) {
return Promise.resolve();
@@ -1477,6 +1494,151 @@ describe("HostRuntimeStore", () => {
}
});
it("exposes the default appearance for a host stored before the field existed", async () => {
const storage = createMemoryHostRuntimeStorage();
await storage.setItem(
"@paseo:daemon-registry",
JSON.stringify([
{
serverId: "srv_legacy",
label: "Legacy",
connections: [
{ id: "socket:/tmp/legacy.sock", type: "directSocket", path: "/tmp/legacy.sock" },
],
preferredConnectionId: "socket:/tmp/legacy.sock",
},
]),
);
await storage.setItem("@paseo:e2e", "1");
const store = createAppearanceStore(storage);
const registryLoaded = onceHostListMatches(store, () => store.isHostRegistryLoaded());
store.boot();
await registryLoaded;
expect(store.getHosts()[0]?.appearance).toEqual({ color: "none", badgeDisplay: null });
store.syncHosts([]);
});
it("records a chosen host color and writes it through to storage", async () => {
const host = makeHost({ serverId: "srv_appearance", updatedAt: new Date(0).toISOString() });
const storage = createMemoryHostRuntimeStorage();
await storage.setItem("@paseo:daemon-registry", JSON.stringify([host]));
await storage.setItem("@paseo:e2e", "1");
const store = createAppearanceStore(storage);
const registryLoaded = onceHostListMatches(store, () => store.isHostRegistryLoaded());
store.boot();
await registryLoaded;
const hostListChanged = onceHostListMatches(
store,
() => store.getHosts()[0]?.appearance.color === "teal",
);
await store.setHostColor("srv_appearance", "teal");
await hostListChanged;
const updated = store.getHosts()[0];
expect(updated?.appearance).toEqual({ color: "teal", badgeDisplay: null });
expect(updated?.updatedAt).not.toBe(host.updatedAt);
const persisted = await storage.getItem("@paseo:daemon-registry");
expect(JSON.parse(persisted ?? "[]")[0].appearance).toEqual({
color: "teal",
badgeDisplay: null,
});
store.syncHosts([]);
});
it("records a chosen badge display without disturbing the color", async () => {
const host = makeHost({
serverId: "srv_appearance",
appearance: { color: "amber", badgeDisplay: null },
});
const storage = createMemoryHostRuntimeStorage();
await storage.setItem("@paseo:daemon-registry", JSON.stringify([host]));
await storage.setItem("@paseo:e2e", "1");
const store = createAppearanceStore(storage);
const registryLoaded = onceHostListMatches(store, () => store.isHostRegistryLoaded());
store.boot();
await registryLoaded;
const hostListChanged = onceHostListMatches(
store,
() => store.getHosts()[0]?.appearance.badgeDisplay === "icon",
);
await store.setHostBadgeDisplay("srv_appearance", "icon");
await hostListChanged;
expect(store.getHosts()[0]?.appearance).toEqual({ color: "amber", badgeDisplay: "icon" });
const persisted = await storage.getItem("@paseo:daemon-registry");
expect(JSON.parse(persisted ?? "[]")[0].appearance).toEqual({
color: "amber",
badgeDisplay: "icon",
});
store.syncHosts([]);
});
it("keeps host appearance unchanged when persistence fails", async () => {
const host = makeHost({ serverId: "srv_appearance" });
const storage = createMemoryHostRuntimeStorage();
await storage.setItem("@paseo:daemon-registry", JSON.stringify([host]));
await storage.setItem("@paseo:e2e", "1");
const store = createAppearanceStore(storage);
const registryLoaded = onceHostListMatches(store, () => store.isHostRegistryLoaded());
store.boot();
await registryLoaded;
storage.setItem = async () => {
throw new Error("disk full");
};
await expect(store.setHostColor("srv_appearance", "teal")).rejects.toThrow("disk full");
expect(store.getHosts()[0]?.appearance).toEqual(defaultHostAppearance());
store.syncHosts([]);
});
it("serializes overlapping host appearance writes", async () => {
const host = makeHost({ serverId: "srv_appearance" });
const storage = createMemoryHostRuntimeStorage();
await storage.setItem("@paseo:daemon-registry", JSON.stringify([host]));
await storage.setItem("@paseo:e2e", "1");
const store = createAppearanceStore(storage);
const registryLoaded = onceHostListMatches(store, () => store.isHostRegistryLoaded());
store.boot();
await registryLoaded;
const firstWrite = createDeferred<void>();
let writeCount = 0;
const setItem = storage.setItem.bind(storage);
storage.setItem = async (key, value) => {
writeCount += 1;
if (writeCount === 1) await firstWrite.promise;
await setItem(key, value);
};
const color = store.setHostColor("srv_appearance", "teal");
const display = store.setHostBadgeDisplay("srv_appearance", "icon");
await Promise.resolve();
expect(writeCount).toBe(1);
firstWrite.resolve();
await Promise.all([color, display]);
expect(store.getHosts()[0]?.appearance).toEqual({ color: "teal", badgeDisplay: "icon" });
const persistedHosts = JSON.parse((await storage.getItem("@paseo:daemon-registry")) ?? "[]");
expect(persistedHosts[0]?.appearance).toEqual({ color: "teal", badgeDisplay: "icon" });
store.syncHosts([]);
});
it("bootstraps agent directory subscription when host transitions online", async () => {
const host = makeHost({
connections: [
packages/app/src/runtime/host-runtime.ts
+67 -12
View File
@@ -14,6 +14,7 @@ import {
type HostConnection,
type HostProfile,
} from "@/types/host-connection";
import { defaultHostAppearance, type HostBadgeDisplay, type HostColor } from "@/hosts/appearance";
import {
buildDaemonWebSocketUrl,
buildRelayWebSocketUrl,
@@ -1347,6 +1348,7 @@ export class HostRuntimeStore {
private hostListVersion = 0;
private hostRegistryLoaded = false;
private hosts: HostProfile[] = [];
private hostAppearanceMutationTail: Promise<void> = Promise.resolve();
private hostRegistryStatus: HostRegistryStatus = "loading";
private deps: HostRuntimeControllerDeps;
private lastConnectionStatusByServer = new Map<string, HostRuntimeConnectionStatus>();
@@ -1461,7 +1463,9 @@ export class HostRuntimeStore {
this.hostRegistryStatus = "ready";
this.emitHostList();
if (shouldPersistHosts) {
void this.persistHosts();
void this.persistHosts().catch((error) =>
console.error("[HostRuntime] Failed to persist host registry", error),
);
}
}
}
@@ -1626,7 +1630,9 @@ export class HostRuntimeStore {
);
this.emitHostList();
this.emit(newServerId);
void this.persistHosts();
void this.persistHosts().catch((error) =>
console.error("[HostRuntime] Failed to persist host registry", error),
);
}
async upsertDirectConnection(input: {
@@ -1664,6 +1670,7 @@ export class HostRuntimeStore {
const probeHost: HostProfile = {
serverId: "",
label: input.label ?? input.connection.id,
appearance: defaultHostAppearance(),
lifecycle: {},
connections: [input.connection],
preferredConnectionId: input.connection.id,
@@ -1782,14 +1789,59 @@ export class HostRuntimeStore {
});
}
async renameHost(serverId: string, label: string): Promise<void> {
const next = this.hosts.map((h) =>
h.serverId === serverId ? { ...h, label, updatedAt: new Date().toISOString() } : h,
private async updateHost(
serverId: string,
apply: (host: HostProfile) => HostProfile,
): Promise<void> {
const updatedAt = new Date().toISOString();
const next = this.hosts.map((host) =>
host.serverId === serverId ? { ...apply(host), updatedAt } : host,
);
this.setHostsAndSync(next);
await this.persistHosts();
}
async renameHost(serverId: string, label: string): Promise<void> {
await this.updateHost(serverId, (host) => ({ ...host, label }));
}
async setHostColor(serverId: string, color: HostColor): Promise<void> {
await this.updateHostAppearance(serverId, (host) => ({
...host,
appearance: { ...host.appearance, color },
}));
}
async setHostBadgeDisplay(serverId: string, badgeDisplay: HostBadgeDisplay): Promise<void> {
await this.updateHostAppearance(serverId, (host) => ({
...host,
appearance: { ...host.appearance, badgeDisplay },
}));
}
private updateHostAppearance(
serverId: string,
apply: (host: HostProfile) => HostProfile,
): Promise<void> {
const update = this.hostAppearanceMutationTail.then(() =>
this.applyHostAppearance(serverId, apply),
);
this.hostAppearanceMutationTail = update.catch(() => undefined);
return update;
}
private async applyHostAppearance(
serverId: string,
apply: (host: HostProfile) => HostProfile,
): Promise<void> {
const updatedAt = new Date().toISOString();
const next = this.hosts.map((host) =>
host.serverId === serverId ? { ...apply(host), updatedAt } : host,
);
await this.persistHosts(next);
this.setHostsAndSync(next);
}
async removeHost(serverId: string): Promise<void> {
const remaining = this.hosts.filter((daemon) => daemon.serverId !== serverId);
this.setHostsAndSync(remaining);
@@ -1848,7 +1900,9 @@ export class HostRuntimeStore {
])
: undefined,
});
void this.persistHosts();
void this.persistHosts().catch((error) =>
console.error("[HostRuntime] Failed to persist host registry", error),
);
return next.find((daemon) => daemon.serverId === input.serverId) as HostProfile;
}
@@ -1866,12 +1920,8 @@ export class HostRuntimeStore {
this.emitHostList();
}
private async persistHosts(): Promise<void> {
try {
await this.storage.setItem(REGISTRY_STORAGE_KEY, JSON.stringify(this.hosts));
} catch (error) {
console.error("[HostRuntime] Failed to persist host registry", error);
}
private async persistHosts(hosts = this.hosts): Promise<void> {
await this.storage.setItem(REGISTRY_STORAGE_KEY, JSON.stringify(hosts));
}
private emitHostList(): void {
@@ -2421,6 +2471,8 @@ export interface HostMutations {
label?: string,
) => Promise<HostProfile>;
renameHost: (serverId: string, label: string) => Promise<void>;
setHostColor: (serverId: string, color: HostColor) => Promise<void>;
setHostBadgeDisplay: (serverId: string, badgeDisplay: HostBadgeDisplay) => Promise<void>;
removeHost: (serverId: string) => Promise<void>;
removeConnection: (serverId: string, connectionId: string) => Promise<void>;
}
@@ -2435,6 +2487,9 @@ export function useHostMutations(): HostMutations {
upsertConnectionFromOffer: (offer, label) => store.upsertConnectionFromOffer(offer, label),
upsertConnectionFromOfferUrl: (url, label) => store.upsertConnectionFromOfferUrl(url, label),
renameHost: (serverId, label) => store.renameHost(serverId, label),
setHostColor: (serverId, color) => store.setHostColor(serverId, color),
setHostBadgeDisplay: (serverId, badgeDisplay) =>
store.setHostBadgeDisplay(serverId, badgeDisplay),
removeHost: (serverId) => store.removeHost(serverId),
removeConnection: (serverId, connectionId) => store.removeConnection(serverId, connectionId),
}),
packages/app/src/screens/settings/host-appearance-section.tsx
+357
View File
@@ -0,0 +1,357 @@
import { useCallback, useMemo, useState } from "react";
import type { TFunction } from "i18next";
import { useTranslation } from "react-i18next";
import { Pressable, Text, View, type PressableStateCallbackType } from "react-native";
import { StyleSheet, withUnistyles } from "react-native-unistyles";
import { ChevronDown, Pencil } from "lucide-react-native";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { AdaptiveRenameModal } from "@/components/rename-modal";
import { HostBadge } from "@/components/sidebar/host-badge";
import { useToast } from "@/contexts/toast-context";
import { SettingsSection } from "@/screens/settings/settings-section";
import {
HOST_BADGE_DISPLAYS,
HOST_COLORS,
resolveHostBadgeDisplay,
type HostBadgeDisplay,
type HostColor,
} from "@/hosts/appearance";
import { useLocalDaemonServerIdState } from "@/hooks/use-is-local-daemon";
import { useHostMutations } from "@/runtime/host-runtime";
import { identityColor } from "@/styles/identity-colors";
import { settingsStyles } from "@/styles/settings";
import { ICON_SIZE, type Theme } from "@/styles/theme";
import type { HostProfile } from "@/types/host-connection";
const ThemedChevronDown = withUnistyles(ChevronDown);
const ThemedPencil = withUnistyles(Pencil);
const mutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
function dropdownTriggerStyle({ pressed }: PressableStateCallbackType) {
return pressed ? [styles.trigger, styles.triggerPressed] : styles.trigger;
}
function HostRenameButton({ host }: { host: HostProfile }) {
const { t } = useTranslation();
const { renameHost } = useHostMutations();
const [isEditing, setIsEditing] = useState(false);
const handleSubmit = useCallback(
async (value: string) => {
const nextLabel = value.trim();
if (nextLabel === host.label.trim()) return;
await renameHost(host.serverId, nextLabel);
},
[host.label, host.serverId, renameHost],
);
const openEditor = useCallback(() => setIsEditing(true), []);
const closeEditor = useCallback(() => setIsEditing(false), []);
return (
<>
<Pressable
onPress={openEditor}
hitSlop={8}
style={styles.renameButton}
accessibilityRole="button"
accessibilityLabel={t("settings.host.daemon.rename.editLabel")}
testID="host-page-label-edit-button"
>
<ThemedPencil size={ICON_SIZE.sm} uniProps={mutedColorMapping} />
</Pressable>
<AdaptiveRenameModal
visible={isEditing}
title={t("settings.host.daemon.rename.title")}
initialValue={host.label}
placeholder={t("settings.host.daemon.rename.placeholder")}
submitLabel={t("settings.host.daemon.rename.submit")}
onClose={closeEditor}
onSubmit={handleSubmit}
testID="host-page-rename-modal"
/>
</>
);
}
function colorLabel(t: TFunction, color: HostColor): string {
return t(`settings.host.appearance.color.options.${color}`);
}
function badgeDisplayLabel(t: TFunction, display: HostBadgeDisplay): string {
return t(`settings.host.appearance.badge.options.${display}`);
}
function ColorSwatch({ color }: { color: HostColor }) {
const swatchStyle = useMemo(
() => [styles.swatch, color === "none" ? null : { backgroundColor: identityColor(color) }],
[color],
);
return <View style={swatchStyle} />;
}
function ColorMenuItem({
color,
selected,
onChange,
}: {
color: HostColor;
selected: boolean;
onChange: (color: HostColor) => void;
}) {
const { t } = useTranslation();
const handleSelect = useCallback(() => onChange(color), [color, onChange]);
const leading = useMemo(() => <ColorSwatch color={color} />, [color]);
return (
<DropdownMenuItem selected={selected} onSelect={handleSelect} leading={leading}>
{colorLabel(t, color)}
</DropdownMenuItem>
);
}
function ColorRow({ color, onChange }: { color: HostColor; onChange: (color: HostColor) => void }) {
const { t } = useTranslation();
const selectedLabel = colorLabel(t, color);
return (
<View style={[settingsStyles.row, settingsStyles.rowBorder]}>
<View style={settingsStyles.rowContent}>
<Text style={settingsStyles.rowTitle}>{t("settings.host.appearance.color.label")}</Text>
</View>
<DropdownMenu>
<DropdownMenuTrigger
style={dropdownTriggerStyle}
accessibilityRole="button"
accessibilityLabel={t("settings.host.appearance.color.accessibilityLabel", {
value: selectedLabel,
})}
>
<ColorSwatch color={color} />
<Text style={styles.triggerText}>{selectedLabel}</Text>
<ThemedChevronDown size={ICON_SIZE.sm} uniProps={mutedColorMapping} />
</DropdownMenuTrigger>
<DropdownMenuContent side="bottom" align="end" width={200}>
{HOST_COLORS.map((option) => (
<ColorMenuItem
key={option}
color={option}
selected={option === color}
onChange={onChange}
/>
))}
</DropdownMenuContent>
</DropdownMenu>
</View>
);
}
function BadgeDisplayRow({
badgeDisplay,
onChange,
}: {
badgeDisplay: HostBadgeDisplay;
onChange: (badgeDisplay: HostBadgeDisplay) => void;
}) {
const { t } = useTranslation();
const selectedLabel = badgeDisplayLabel(t, badgeDisplay);
return (
<View style={[settingsStyles.row, settingsStyles.rowBorder]}>
<View style={settingsStyles.rowContent}>
<Text style={settingsStyles.rowTitle}>{t("settings.host.appearance.badge.label")}</Text>
</View>
<DropdownMenu>
<DropdownMenuTrigger
testID="host-appearance-badge-display"
style={dropdownTriggerStyle}
accessibilityRole="button"
accessibilityLabel={t("settings.host.appearance.badge.accessibilityLabel", {
value: selectedLabel,
})}
>
<Text style={styles.triggerText}>{selectedLabel}</Text>
<ThemedChevronDown size={ICON_SIZE.sm} uniProps={mutedColorMapping} />
</DropdownMenuTrigger>
<DropdownMenuContent side="bottom" align="end" width={200}>
{HOST_BADGE_DISPLAYS.map((option) => (
<BadgeDisplayMenuItem
key={option}
display={option}
selected={option === badgeDisplay}
onChange={onChange}
/>
))}
</DropdownMenuContent>
</DropdownMenu>
</View>
);
}
function BadgeDisplayMenuItem({
display,
selected,
onChange,
}: {
display: HostBadgeDisplay;
selected: boolean;
onChange: (display: HostBadgeDisplay) => void;
}) {
const { t } = useTranslation();
const handleSelect = useCallback(() => onChange(display), [display, onChange]);
return (
<DropdownMenuItem selected={selected} onSelect={handleSelect}>
{badgeDisplayLabel(t, display)}
</DropdownMenuItem>
);
}
/**
* Shows the badge exactly as the sidebar will draw it, next to a sample workspace title on
* the sidebar surface. The real component, never a restyled copy — a preview that can drift
* from the thing it previews is worse than no preview.
*/
function BadgePreview({
host,
badgeDisplay,
}: {
host: HostProfile;
badgeDisplay: HostBadgeDisplay;
}) {
const { t } = useTranslation();
return (
<View style={styles.preview} testID="host-appearance-preview">
<Text style={styles.previewTitle} numberOfLines={1}>
{t("settings.host.appearance.preview.workspaceName")}
</Text>
{badgeDisplay === "hidden" ? null : (
<HostBadge
serverId={host.serverId}
label={host.label}
color={host.appearance.color}
showLabel={badgeDisplay === "name"}
/>
)}
</View>
);
}
export function HostAppearanceSection({ host }: { host: HostProfile }) {
const { t } = useTranslation();
const toast = useToast();
const { setHostColor, setHostBadgeDisplay } = useHostMutations();
const localDaemon = useLocalDaemonServerIdState();
const isLocalHost = localDaemon.status === "resolved" && localDaemon.serverId === host.serverId;
const badgeDisplay = resolveHostBadgeDisplay({
appearance: host.appearance,
isLocalHost,
localHostResolutionPending: localDaemon.status !== "resolved",
});
const handleColorChange = useCallback(
async (color: HostColor) => {
try {
await setHostColor(host.serverId, color);
} catch {
toast.error(t("errors.unableToSave"));
}
},
[host.serverId, setHostColor, t, toast],
);
const handleBadgeDisplayChange = useCallback(
async (next: HostBadgeDisplay) => {
try {
await setHostBadgeDisplay(host.serverId, next);
} catch {
toast.error(t("errors.unableToSave"));
}
},
[host.serverId, setHostBadgeDisplay, t, toast],
);
return (
<SettingsSection title={t("settings.host.appearance.title")}>
<View style={settingsStyles.card}>
<View style={settingsStyles.row}>
<View style={settingsStyles.rowContent}>
<Text style={settingsStyles.rowTitle}>{t("settings.host.appearance.name.label")}</Text>
</View>
<View style={styles.nameValue}>
<Text style={styles.nameText} numberOfLines={1}>
{host.label}
</Text>
<HostRenameButton host={host} />
</View>
</View>
<ColorRow color={host.appearance.color} onChange={handleColorChange} />
{badgeDisplay === null ? null : (
<>
<BadgeDisplayRow badgeDisplay={badgeDisplay} onChange={handleBadgeDisplayChange} />
<BadgePreview host={host} badgeDisplay={badgeDisplay} />
</>
)}
</View>
</SettingsSection>
);
}
const styles = StyleSheet.create((theme) => ({
trigger: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[1],
paddingVertical: theme.spacing[1],
paddingHorizontal: theme.spacing[2],
borderRadius: theme.borderRadius.md,
borderWidth: theme.borderWidth[1],
borderColor: theme.colors.border,
},
triggerPressed: {
opacity: 0.85,
},
triggerText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
},
swatch: {
width: ICON_SIZE.md,
height: ICON_SIZE.md,
borderRadius: ICON_SIZE.md / 2,
borderWidth: theme.borderWidth[1],
borderColor: theme.colors.border,
},
renameButton: {
padding: theme.spacing[1],
borderRadius: theme.borderRadius.md,
},
nameValue: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
flexShrink: 1,
},
nameText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
flexShrink: 1,
},
preview: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
paddingVertical: theme.spacing[3],
paddingHorizontal: theme.spacing[4],
borderTopWidth: theme.borderWidth[1],
borderTopColor: theme.colors.border,
backgroundColor: theme.colors.surfaceSidebar,
},
previewTitle: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
flexShrink: 1,
},
}));
packages/app/src/screens/settings/host-page.tsx
+3 -51
View File
@@ -22,7 +22,6 @@ import {
resolveTerminalProfiles,
} from "@getpaseo/protocol/terminal-profiles";
import { AdaptiveModalSheet, type SheetHeader } from "@/components/adaptive-modal-sheet";
import { AdaptiveRenameModal } from "@/components/rename-modal";
import { SettingsTextAreaCard } from "@/components/settings-textarea";
import { Alert as InlineAlert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
@@ -56,6 +55,7 @@ import {
import { ProvidersSection } from "@/screens/settings/providers-section";
import { ProviderUsageSettingsSection } from "@/provider-usage/settings-section";
import { useProviderUsage } from "@/provider-usage/use-provider-usage";
import { HostAppearanceSection } from "@/screens/settings/host-appearance-section";
import { SettingsSection } from "@/screens/settings/settings-section";
import { useSessionStore } from "@/stores/session-store";
import { settingsStyles } from "@/styles/settings";
@@ -368,11 +368,12 @@ export function HostSettingsPage({
<Text style={styles.daemonHeaderLabel} numberOfLines={1}>
{host.label}
</Text>
<HostRenameButton host={host} />
</View>
<HostStatusBadges serverId={serverId} />
<HostAppearanceSection host={host} />
{isLocalDaemon ? <LocalDaemonSection /> : null}
{!isLocalDaemon ? <UpdateDaemonCard key={host.serverId} host={host} /> : null}
@@ -382,51 +383,6 @@ export function HostSettingsPage({
);
}
export function HostRenameButton({ host }: { host: HostProfile }) {
const { t } = useTranslation();
const { theme } = useUnistyles();
const { renameHost } = useHostMutations();
const [isEditing, setIsEditing] = useState(false);
const handleSubmit = useCallback(
async (value: string) => {
const nextLabel = value.trim();
if (nextLabel === host.label.trim()) return;
await renameHost(host.serverId, nextLabel);
},
[host.label, host.serverId, renameHost],
);
const openEditor = useCallback(() => setIsEditing(true), []);
const closeEditor = useCallback(() => setIsEditing(false), []);
return (
<>
<Pressable
onPress={openEditor}
hitSlop={8}
style={styles.identityEditButton}
accessibilityRole="button"
accessibilityLabel={t("settings.host.daemon.rename.editLabel")}
testID="host-page-label-edit-button"
>
<Pencil size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
</Pressable>
<AdaptiveRenameModal
visible={isEditing}
title={t("settings.host.daemon.rename.title")}
initialValue={host.label}
placeholder={t("settings.host.daemon.rename.placeholder")}
submitLabel={t("settings.host.daemon.rename.submit")}
onClose={closeEditor}
onSubmit={handleSubmit}
testID="host-page-rename-modal"
/>
</>
);
}
function ConnectionsSection({ host }: { host: HostProfile }) {
const { t } = useTranslation();
const { removeConnection } = useHostMutations();
@@ -1856,10 +1812,6 @@ const styles = StyleSheet.create((theme) => ({
marginHorizontal: theme.spacing[4],
marginBottom: theme.spacing[4],
},
identityEditButton: {
padding: theme.spacing[1],
borderRadius: theme.borderRadius.md,
},
daemonHeader: {
flexDirection: "row",
alignItems: "center",
packages/app/src/styles/identity-colors.test.ts
+39
View File
@@ -0,0 +1,39 @@
import { describe, expect, it } from "vitest";
import {
IDENTITY_COLOR_NAMES,
deriveIdentityColorName,
identityColor,
} from "@/styles/identity-colors";
function contrastRatio(foreground: string, background: string): number {
const luminance = (hex: string) => {
const channels = [1, 3, 5].map(
(index) => Number.parseInt(hex.slice(index, index + 2), 16) / 255,
);
const linear = channels.map((channel) =>
channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4,
);
return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
};
const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a);
return (lighter + 0.05) / (darker + 0.05);
}
describe("identity colors", () => {
it("keeps ten colors so existing derived assignments stay put", () => {
expect(IDENTITY_COLOR_NAMES.length).toBe(10);
});
it("derives the same color a project key had before the palette moved", () => {
expect(identityColor(deriveIdentityColorName("paseo"))).toBe("#368080");
expect(identityColor(deriveIdentityColorName("my-project"))).toBe("#7a6aa8");
expect(identityColor(deriveIdentityColorName("a"))).toBe("#b06260");
});
it("keeps every fill in the white-letter contrast band", () => {
for (const color of IDENTITY_COLOR_NAMES) {
expect(contrastRatio(identityColor(color), "#ffffff")).toBeGreaterThanOrEqual(4.2);
expect(contrastRatio(identityColor(color), "#ffffff")).toBeLessThanOrEqual(4.8);
}
});
});
packages/app/src/styles/identity-colors.ts
+57
View File
@@ -0,0 +1,57 @@
// Muted tones, all landing in a 4.2-4.8:1 contrast band against the white letter on top.
//
// Two properties matter more than the individual hues. First, low chroma: these squares sit
// in a sidebar row next to a status dot, a PR glyph and a diff stat, and at full saturation
// the project icon wins a fight it shouldn't be in. Second, even luminance: the previous set
// was raw Tailwind 500s spanning 1.9:1 (amber, where the white letter was barely visible) to
// 4.5:1 (indigo), so a project's color decided how loud it was in the list. Holding every
// swatch to one contrast band makes the color identifying rather than ranking.
//
// Retune with the contrast band, not by eye — a hue nudged for looks quietly re-weights that
// project against the other nine.
//
// Order is load-bearing: `deriveIdentityColorName` indexes into this array, so reordering
// silently recolors every existing project icon.
export const IDENTITY_COLOR_NAMES = [
"violet",
"sky",
"emerald",
"orange",
"pink",
"indigo",
"teal",
"red",
"amber",
"blue",
] as const;
export type IdentityColorName = (typeof IDENTITY_COLOR_NAMES)[number];
const IDENTITY_COLORS: Record<IdentityColorName, string> = {
violet: "#7a6aa8",
sky: "#3d7ea6",
emerald: "#388068",
orange: "#a4673a",
pink: "#b05c80",
indigo: "#6a70b8",
teal: "#368080",
red: "#b06260",
amber: "#8f7838",
blue: "#5179b0",
};
export function identityColor(name: IdentityColorName): string {
return IDENTITY_COLORS[name];
}
function hashIdentityKey(key: string): number {
let hash = 0;
for (const character of key) {
hash = (hash * 31 + character.charCodeAt(0)) >>> 0;
}
return hash;
}
export function deriveIdentityColorName(key: string): IdentityColorName {
return IDENTITY_COLOR_NAMES[hashIdentityKey(key) % IDENTITY_COLOR_NAMES.length];
}
packages/app/src/styles/theme.ts
+11 -1
View File
@@ -109,15 +109,25 @@ export const baseColors = {
export type ThemeName = "light" | "dark" | "zinc" | "midnight" | "claude" | "ghostty";
// Diff stat colors — light uses muted tones, dark uses the brighter palette values
// Diff colors — light uses muted tones, dark uses the brighter palette values.
//
// Two tiers, because the +/- serves two jobs. In the diff view the color *is* the signal and
// has to survive being scanned line by line, so it stays saturated. In a row's metadata the
// counts are a footnote next to a title and a subtitle; at full saturation they read as the
// loudest thing in the row. The Stat tier keeps the hue but drops the chroma to roughly the
// weight of foregroundMuted, so it sits with the subtitle instead of shouting over it.
const lightDiffColors = {
diffAddition: "#15803d", // green-700 — readable on white without screaming
diffDeletion: "#b91c1c", // red-700
diffStatAddition: "#32794a", // softened green-700
diffStatDeletion: "#a43c39", // softened red-700
};
const darkDiffColors = {
diffAddition: "#4ade80", // green-400
diffDeletion: "#ef4444", // red-500
diffStatAddition: "#61bf82",
diffStatDeletion: "#d36461",
};
// Status colors — semantic signals for success/danger/warning/merged. Used by
packages/app/src/types/host-connection.test.ts
+61
View File
@@ -1,8 +1,11 @@
import { describe, expect, it } from "vitest";
import { defaultHostAppearance } from "@/hosts/appearance";
import {
normalizeStoredHostProfile,
orderHostsLocalFirst,
resolveActiveHostServerId,
upsertHostConnectionInProfiles,
type HostConnection,
type HostProfile,
} from "./host-connection";
@@ -10,6 +13,7 @@ function makeHost(serverId: string): HostProfile {
return {
serverId,
label: serverId,
appearance: defaultHostAppearance(),
lifecycle: {},
connections: [],
preferredConnectionId: null,
@@ -114,6 +118,63 @@ describe("normalizeStoredHostProfile", () => {
daemonPublicKeyB64: "pubkey",
});
});
it("gives a host stored before appearance existed the default appearance", () => {
const profile = normalizeStoredHostProfile({
serverId: "srv_old",
connections: [
{ id: "socket:/tmp/paseo.sock", type: "directSocket", path: "/tmp/paseo.sock" },
],
});
expect(profile?.appearance).toEqual({ color: "none", badgeDisplay: null });
});
it("loads a stored appearance the user chose", () => {
const profile = normalizeStoredHostProfile({
serverId: "srv_new",
appearance: { color: "teal", badgeDisplay: "icon" },
connections: [
{ id: "socket:/tmp/paseo.sock", type: "directSocket", path: "/tmp/paseo.sock" },
],
});
expect(profile?.appearance).toEqual({ color: "teal", badgeDisplay: "icon" });
});
});
describe("upsertHostConnectionInProfiles", () => {
const connection: HostConnection = {
id: "socket:/tmp/paseo.sock",
type: "directSocket",
path: "/tmp/paseo.sock",
};
it("gives a newly discovered host the default appearance", () => {
const [profile] = upsertHostConnectionInProfiles({
profiles: [],
serverId: "srv_new",
connection,
});
expect(profile.appearance).toEqual({ color: "none", badgeDisplay: null });
});
it("keeps the appearance the user chose when the host reconnects", () => {
const existing: HostProfile = {
...makeHost("srv_known"),
appearance: { color: "amber", badgeDisplay: "hidden" },
connections: [],
};
const [profile] = upsertHostConnectionInProfiles({
profiles: [existing],
serverId: "srv_known",
connection,
});
expect(profile.appearance).toEqual({ color: "amber", badgeDisplay: "hidden" });
});
});
describe("resolveActiveHostServerId", () => {
packages/app/src/types/host-connection.ts
+8
View File
@@ -6,6 +6,11 @@ import {
DirectTcpHostConnectionSchema,
type DirectTcpHostConnection,
} from "@getpaseo/protocol/host-connection-schema";
import {
type HostAppearance,
defaultHostAppearance,
normalizeStoredHostAppearance,
} from "@/hosts/appearance";
export { DirectTcpHostConnectionSchema, type DirectTcpHostConnection };
@@ -40,6 +45,7 @@ export type HostLifecycle = Record<string, never>;
export interface HostProfile {
serverId: string;
label: string;
appearance: HostAppearance;
lifecycle: HostLifecycle;
connections: HostConnection[];
preferredConnectionId: string | null;
@@ -172,6 +178,7 @@ export function upsertHostConnectionInProfiles(input: {
const profile: HostProfile = {
serverId,
label: derivedLabel,
appearance: defaultHostAppearance(),
lifecycle: defaultLifecycle(),
connections: [input.connection],
preferredConnectionId: input.connection.id,
@@ -372,6 +379,7 @@ export function normalizeStoredHostProfile(entry: unknown): HostProfile | null {
return {
serverId,
label,
appearance: normalizeStoredHostAppearance(record.appearance),
lifecycle: defaultLifecycle(),
connections,
preferredConnectionId,
packages/app/src/utils/project-icon-color.ts
-26
View File
@@ -1,26 +0,0 @@
// Medium-saturation tones chosen so a white letter stays legible on top in both
// light and dark themes. Soft and colorful, but not pale pastels.
const PROJECT_ICON_COLORS = [
"#8b5cf6", // violet
"#0ea5e9", // sky
"#10b981", // emerald
"#f97316", // orange
"#ec4899", // pink
"#6366f1", // indigo
"#14b8a6", // teal
"#ef4444", // red
"#eab308", // amber
"#3b82f6", // blue
];
function hashProjectKey(projectKey: string): number {
let hash = 0;
for (const character of projectKey) {
hash = (hash * 31 + character.charCodeAt(0)) >>> 0;
}
return hash;
}
export function deriveProjectIconColor(projectKey: string): string {
return PROJECT_ICON_COLORS[hashProjectKey(projectKey) % PROJECT_ICON_COLORS.length];
}
packages/app/src/utils/project-status-badge-content.test.ts
+2 -2
View File
@@ -2,8 +2,8 @@ import { describe, expect, it } from "vitest";
import { getProjectStatusBadgeContent } from "./project-status-badge-content";
describe("getProjectStatusBadgeContent", () => {
it("shows the loader while running", () => {
expect(getProjectStatusBadgeContent("running")).toEqual({ kind: "loader" });
it("shows a running dot while working", () => {
expect(getProjectStatusBadgeContent("running")).toEqual({ kind: "dot", bucket: "running" });
});
it("shows the alert when input is needed", () => {
packages/app/src/utils/project-status-badge-content.ts
+11 -12
View File
@@ -1,29 +1,28 @@
import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
export type ProjectStatusBadgeDotBucket = "failed" | "attention" | "running";
export type ProjectStatusBadgeContent =
| { kind: "loader" }
| { kind: "alert" }
| { kind: "dot"; bucket: "failed" | "attention" };
| { kind: "dot"; bucket: ProjectStatusBadgeDotBucket };
/**
* What the collapsed-project status badge should render for a project's aggregate bucket,
* or null when no badge should show at all. Kept as plain data (no React) so it's testable
* without JSDOM or component mounting — see docs/testing.md's two test categories.
* What the project status badge should render for a project's aggregate bucket, or null when
* no badge should show at all. Kept as plain data (no React) so it's testable without JSDOM
* or component mounting — see docs/testing.md's two test categories.
*
* The "dot" variant is narrowed to failed/attention only: running renders the loader and
* needs_input renders the alert, so those two buckets can never reach a dot.
* Running is a dot like failed and attention rather than its own glyph. The badge is 14pt;
* anything with internal detail at that size loses to a solid disc, so the buckets separate
* by color and — for running alone — by pulsing. Only needs_input earns a glyph, because
* "someone must act" has to survive being the one amber state next to running.
*/
export function getProjectStatusBadgeContent(
statusBucket: SidebarStateBucket | null,
): ProjectStatusBadgeContent | null {
if (shouldRenderSyncedStatusLoader({ bucket: statusBucket })) {
return { kind: "loader" };
}
if (statusBucket === "needs_input") {
return { kind: "alert" };
}
if (statusBucket === "failed" || statusBucket === "attention") {
if (statusBucket === "failed" || statusBucket === "attention" || statusBucket === "running") {
return { kind: "dot", bucket: statusBucket };
}
return null;
packages/app/src/utils/status-dot-color.ts
+4 -1
View File
@@ -8,6 +8,9 @@ export function getStatusDotColor(input: {
}): string | null {
const { theme, bucket, showDoneAsInactive = false } = input;
// Working and needs_input share amber: both mean "this agent has your turn in it". They
// never collide in practice because needs_input always draws the alert glyph, never a bare
// dot — see getProjectStatusBadgeContent.
if (bucket === "needs_input") {
return theme.colors.palette.amber[500];
}
@@ -15,7 +18,7 @@ export function getStatusDotColor(input: {
return theme.colors.palette.red[500];
}
if (bucket === "running") {
return theme.colors.palette.blue[500];
return theme.colors.palette.amber[500];
}
if (bucket === "attention") {
return theme.colors.palette.green[500];
packages/app/src/workspace/open-in-file-manager/menu-item.tsx
+16 -2
View File
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
import { FolderOpen } from "lucide-react-native";
import { withUnistyles } from "react-native-unistyles";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { ContextMenuItem } from "@/components/ui/context-menu";
import { getIsElectron } from "@/constants/platform";
import { useToast } from "@/contexts/toast-context";
import type { Theme } from "@/styles/theme";
@@ -11,6 +12,7 @@ import { openDesktopTarget, useDesktopOpenTargets } from "@/workspace/desktop-op
interface OpenInFileManagerMenuItemProps {
path?: string | null;
testID: string;
surface?: "context" | "dropdown";
}
const ThemedFolderOpen = withUnistyles(FolderOpen);
@@ -21,7 +23,11 @@ const foregroundMutedColorMapping = (theme: Theme) => ({
const leadingIcon = <ThemedFolderOpen size={14} uniProps={foregroundMutedColorMapping} />;
export function OpenInFileManagerMenuItem({ path, testID }: OpenInFileManagerMenuItemProps) {
export function OpenInFileManagerMenuItem({
path,
testID,
surface = "dropdown",
}: OpenInFileManagerMenuItemProps) {
const { t } = useTranslation();
const toast = useToast();
const isElectron = getIsElectron();
@@ -46,9 +52,17 @@ export function OpenInFileManagerMenuItem({ path, testID }: OpenInFileManagerMen
return null;
}
const label = t("sidebar.project.actions.openFolder");
if (surface === "context") {
return (
<ContextMenuItem testID={testID} leading={leadingIcon} onSelect={openInFileManager}>
{label}
</ContextMenuItem>
);
}
return (
<DropdownMenuItem testID={testID} leading={leadingIcon} onSelect={openInFileManager}>
{t("sidebar.project.actions.openFolder")}
{label}
</DropdownMenuItem>
);
}