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

feat(sidebar): show host name on every row in multi-host setups (#1775)

Browse Source 
The host name previously appeared only in project grouping mode, and only
for projects shared across hosts. It now shows on every workspace row in
both project and status grouping modes whenever the sidebar spans more than
one host, so you can always tell which machine a workspace lives on. Status
rows read "Project · Host". Single-host setups are unchanged.
This commit is contained in:
Mohamed Boudra
2026-06-28 08:50:04 +07:00
committed by GitHub
parent 276c1f48f1
commit 9b6aa99396
5 changed files with 135 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/sidebar-workspace-list.tsx
+20 -4
View File
@@ -64,6 +64,7 @@ import {
parseHostWorkspaceRouteFromPathname,
} from "@/utils/host-routes";
import {
shouldShowSidebarHostLabels,
useSidebarWorkspaceEntry,
type SidebarProjectEntry,
type SidebarStatusWorkspacePlacement,
@@ -1879,6 +1880,7 @@ function ProjectBlock({
creatingWorkspaceIds,
activeWorkspaceSelection,
hostLabelByServerId,
showHostLabels,
}: {
project: SidebarProjectEntry;
collapsed: boolean;
@@ -1899,6 +1901,7 @@ function ProjectBlock({
creatingWorkspaceIds: ReadonlySet<string>;
activeWorkspaceSelection: ActiveWorkspaceSelection | null;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
}) {
const rowModel = useMemo(
() =>
@@ -1928,9 +1931,7 @@ function ProjectBlock({
<MemoWorkspaceRowItem
workspace={item}
subtitle={
project.hosts.length > 1
? (hostLabelByServerId.get(item.serverId) ?? item.serverId)
: null
showHostLabels ? (hostLabelByServerId.get(item.serverId) ?? item.serverId) : null
}
shortcutNumber={shortcutIndexByWorkspaceKey.get(item.workspaceKey) ?? null}
showShortcutBadge={showShortcutBadges}
@@ -1947,7 +1948,7 @@ function ProjectBlock({
},
[
project.projectKind,
project.hosts.length,
showHostLabels,
activeWorkspaceSelection,
creatingWorkspaceIds,
hostLabelByServerId,
@@ -2115,6 +2116,7 @@ function areProjectBlockPropsEqual(previous: ProjectBlockProps, next: ProjectBlo
previous.showShortcutBadges === next.showShortcutBadges &&
previous.shortcutIndexByWorkspaceKey === next.shortcutIndexByWorkspaceKey &&
previous.hostLabelByServerId === next.hostLabelByServerId &&
previous.showHostLabels === next.showHostLabels &&
previous.parentGestureRef === next.parentGestureRef &&
previous.onToggleCollapsed === next.onToggleCollapsed &&
previous.onWorkspacePress === next.onWorkspacePress &&
@@ -2181,6 +2183,7 @@ export function SidebarWorkspaceList({
}
return labels;
}, [hosts]);
const showHostLabels = useMemo(() => shouldShowSidebarHostLabels(projects), [projects]);
const content =
groupMode === "status" ? (
@@ -2189,6 +2192,8 @@ export function SidebarWorkspaceList({
projectNamesByKey={projectNamesByKey}
shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
onWorkspacePress={onWorkspacePress}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
/>
) : (
<ProjectModeList
@@ -2202,6 +2207,7 @@ export function SidebarWorkspaceList({
parentGestureRef={parentGestureRef}
pathname={pathname}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
/>
);
@@ -2213,11 +2219,15 @@ function SidebarStatusModeWrapper({
projectNamesByKey,
shortcutIndexByWorkspaceKey: _projectShortcutIndex,
onWorkspacePress,
hostLabelByServerId,
showHostLabels,
}: {
statusWorkspacePlacements: SidebarStatusWorkspacePlacement[];
projectNamesByKey: Map<string, string>;
shortcutIndexByWorkspaceKey: Map<string, number>;
onWorkspacePress?: () => void;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
}) {
const showShortcutBadges = useShowShortcutBadges();
@@ -2228,6 +2238,8 @@ function SidebarStatusModeWrapper({
shortcutIndexByWorkspaceKey={_projectShortcutIndex}
showShortcutBadges={showShortcutBadges}
onWorkspacePress={onWorkspacePress}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
/>
);
}
@@ -2243,12 +2255,14 @@ function ProjectModeList({
parentGestureRef,
pathname,
hostLabelByServerId,
showHostLabels,
}: Omit<
SidebarWorkspaceListProps,
"statusWorkspacePlacements" | "projectNamesByKey" | "groupMode" | "isRefreshing" | "onRefresh"
> & {
pathname: string;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
}) {
const { t } = useTranslation();
const [creatingWorkspaceIds, setCreatingWorkspaceIds] = useState<Set<string>>(() => new Set());
@@ -2436,6 +2450,7 @@ function ProjectModeList({
creatingWorkspaceIds={creatingWorkspaceIds}
activeWorkspaceSelection={activeWorkspaceSelection}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
/>
);
},
@@ -2445,6 +2460,7 @@ function ProjectModeList({
handleWorktreeCreated,
handleWorkspaceReorder,
hostLabelByServerId,
showHostLabels,
onWorkspacePress,
onToggleProjectCollapsed,
parentGestureRef,
packages/app/src/components/sidebar/sidebar-status-list.tsx
+42 -10
View File
@@ -95,6 +95,8 @@ interface StatusWorkspaceListProps {
shortcutIndexByWorkspaceKey: Map<string, number>;
showShortcutBadges: boolean;
onWorkspacePress?: () => void;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
}
export function SidebarStatusWorkspaceList({
@@ -103,6 +105,8 @@ export function SidebarStatusWorkspaceList({
shortcutIndexByWorkspaceKey: _projectShortcutIndex,
showShortcutBadges,
onWorkspacePress,
hostLabelByServerId,
showHostLabels,
}: StatusWorkspaceListProps) {
const groups = useMemo(
() => buildStatusGroups(workspaces, projectNamesByKey),
@@ -138,6 +142,8 @@ export function SidebarStatusWorkspaceList({
shortcutIndex={statusShortcutIndex}
showShortcutBadges={showShortcutBadges}
onWorkspacePress={onWorkspacePress}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
/>
</NestableScrollContainer>
) : (
@@ -154,6 +160,8 @@ export function SidebarStatusWorkspaceList({
shortcutIndex={statusShortcutIndex}
showShortcutBadges={showShortcutBadges}
onWorkspacePress={onWorkspacePress}
hostLabelByServerId={hostLabelByServerId}
showHostLabels={showHostLabels}
/>
</ScrollView>
)}
@@ -168,6 +176,8 @@ function StatusGroupList({
shortcutIndex,
showShortcutBadges,
onWorkspacePress,
hostLabelByServerId,
showHostLabels,
}: {
groups: StatusGroup[];
collapsedStatusGroupKeys: ReadonlySet<string>;
@@ -175,6 +185,8 @@ function StatusGroupList({
shortcutIndex: Map<string, number>;
showShortcutBadges: boolean;
onWorkspacePress?: () => void;
hostLabelByServerId: ReadonlyMap<string, string>;
showHostLabels: boolean;
}) {
return (
<>
@@ -190,7 +202,12 @@ function StatusGroupList({
<StatusWorkspaceRow
key={workspace.workspaceKey}
workspace={workspace}
projectName={projectNamesByKey.get(workspace.projectKey) ?? ""}
subtitle={buildStatusRowSubtitle({
projectName: projectNamesByKey.get(workspace.projectKey) ?? "",
hostLabel: showHostLabels
? (hostLabelByServerId.get(workspace.serverId) ?? workspace.serverId)
: null,
})}
shortcutNumber={shortcutIndex.get(workspace.workspaceKey) ?? null}
showShortcutBadge={showShortcutBadges}
onWorkspacePress={onWorkspacePress}
@@ -204,6 +221,21 @@ function StatusGroupList({
);
}
// 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;
}
function StatusGroupHeader({ group, collapsed }: { group: StatusGroup; collapsed: boolean }) {
const [isHovered, setIsHovered] = useState(false);
const toggleStatusGroupCollapsed = useSidebarCollapsedSectionsStore(
@@ -288,13 +320,13 @@ function StatusGroupIcon({ bucket }: { bucket: StatusGroup["bucket"] }) {
const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
workspace,
projectName,
subtitle,
shortcutNumber,
showShortcutBadge,
onWorkspacePress,
}: {
workspace: SidebarStatusWorkspacePlacement;
projectName: string;
subtitle: string;
shortcutNumber: number | null;
showShortcutBadge: boolean;
onWorkspacePress?: () => void;
@@ -316,7 +348,7 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
return (
<StatusWorkspaceRowWithMenu
workspace={workspaceEntry}
projectName={projectName}
subtitle={subtitle}
selected={selected}
shortcutNumber={shortcutNumber}
showShortcutBadge={showShortcutBadge}
@@ -327,14 +359,14 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
function StatusWorkspaceRowWithMenu({
workspace,
projectName,
subtitle,
selected,
shortcutNumber,
showShortcutBadge,
onPress,
}: {
workspace: SidebarWorkspaceEntry;
projectName: string;
subtitle: string;
selected: boolean;
shortcutNumber: number | null;
showShortcutBadge: boolean;
@@ -455,7 +487,7 @@ function StatusWorkspaceRowWithMenu({
<>
<StatusWorkspaceRowInner
workspace={workspace}
projectName={projectName}
subtitle={subtitle}
selected={selected}
shortcutNumber={shortcutNumber}
showShortcutBadge={showShortcutBadge}
@@ -487,7 +519,7 @@ function StatusWorkspaceRowWithMenu({
function StatusWorkspaceRowInner({
workspace,
projectName,
subtitle,
selected,
shortcutNumber,
showShortcutBadge,
@@ -504,7 +536,7 @@ function StatusWorkspaceRowInner({
archiveShortcutKeys,
}: {
workspace: SidebarWorkspaceEntry;
projectName: string;
subtitle: string;
selected: boolean;
shortcutNumber: number | null;
showShortcutBadge: boolean;
@@ -554,7 +586,7 @@ function StatusWorkspaceRowInner({
>
<SidebarWorkspaceRowContent
workspace={workspace}
subtitle={projectName}
subtitle={subtitle}
scriptIconKind={scriptIconKind}
isHovered={isHovered}
isLoading={isArchiving}
packages/app/src/hooks/sidebar-workspaces-view-model.test.ts
+58
View File
@@ -9,6 +9,7 @@ import {
buildSidebarProjectsFromStructure,
computeSidebarOrderUpdates,
deriveSidebarLoadingState,
shouldShowSidebarHostLabels,
type SidebarProjectEntry,
} from "./sidebar-workspaces-view-model";
@@ -297,6 +298,63 @@ describe("shared sidebar workspace model", () => {
});
});
describe("shouldShowSidebarHostLabels", () => {
it("is false with no visible projects", () => {
expect(shouldShowSidebarHostLabels([])).toBe(false);
});
it("is false when every project lives on a single host", () => {
const projects = buildSidebarProjectsFromStructure({
projects: [
project({ projectKey: "project-a", workspaceKeys: ["ws-1"] }),
project({ projectKey: "project-b", workspaceKeys: ["ws-2"] }),
],
});
expect(shouldShowSidebarHostLabels(projects)).toBe(false);
});
it("is true when projects span separate hosts", () => {
const projects = buildSidebarProjectsFromStructure({
projects: [
project({
projectKey: "project-a",
hosts: [
{ serverId: "host-a", iconWorkingDir: "/repo/project-a", canCreateWorktree: true },
],
workspaceKeys: ["host-a:ws-1"],
}),
project({
projectKey: "project-b",
hosts: [
{ serverId: "host-b", iconWorkingDir: "/repo/project-b", canCreateWorktree: true },
],
workspaceKeys: ["host-b:ws-2"],
}),
],
});
expect(shouldShowSidebarHostLabels(projects)).toBe(true);
});
it("is true for a single project shared across hosts", () => {
const projects = buildSidebarProjectsFromStructure({
projects: [
project({
projectKey: "getpaseo/paseo",
hosts: [
{ serverId: "host-a", iconWorkingDir: "/repo/paseo", canCreateWorktree: true },
{ serverId: "host-b", iconWorkingDir: "/repo/paseo", canCreateWorktree: true },
],
workspaceKeys: ["host-a:main", "host-b:feature"],
}),
],
});
expect(shouldShowSidebarHostLabels(projects)).toBe(true);
});
});
describe("computeSidebarOrderUpdates", () => {
it("returns no updates when there are no visible projects", () => {
const updates = computeSidebarOrderUpdates({
packages/app/src/hooks/sidebar-workspaces-view-model.ts
+14
View File
@@ -351,6 +351,20 @@ export function buildSidebarProjectsFromHostProjects(input: {
}));
}
// Host labels disambiguate which machine a workspace lives on; they only earn their
// space once the visible sidebar spans more than one host. Counting distinct hosts
// across the visible projects (not all connected hosts) keeps labels off when a host
// filter pins the view to a single host.
export function shouldShowSidebarHostLabels(projects: SidebarProjectEntry[]): boolean {
const serverIds = new Set<string>();
for (const project of projects) {
for (const host of project.hosts) {
serverIds.add(host.serverId);
}
}
return serverIds.size >= 2;
}
export function applyStoredOrdering<T>(input: {
items: T[];
storedOrder: string[];
packages/app/src/hooks/use-sidebar-workspaces-list.ts
+1
View File
@@ -31,6 +31,7 @@ export {
computeSidebarOrderUpdates,
createSidebarWorkspaceEntry,
deriveSidebarLoadingState,
shouldShowSidebarHostLabels,
type SidebarLoadingState,
type SidebarOrderUpdates,
type SidebarStatusWorkspacePlacement,