diff --git a/packages/app/src/components/diff-stat.tsx b/packages/app/src/components/diff-stat.tsx
index 04f41aa79..154a2162a 100644
--- a/packages/app/src/components/diff-stat.tsx
+++ b/packages/app/src/components/diff-stat.tsx
@@ -28,6 +28,7 @@ const styles = StyleSheet.create((theme) => ({
row: {
flexDirection: "row",
alignItems: "center",
+ height: 20,
gap: 4,
flexShrink: 0,
},
diff --git a/packages/app/src/components/sidebar-workspace-list.tsx b/packages/app/src/components/sidebar-workspace-list.tsx
index f43ac7624..c83d3b705 100644
--- a/packages/app/src/components/sidebar-workspace-list.tsx
+++ b/packages/app/src/components/sidebar-workspace-list.tsx
@@ -48,9 +48,7 @@ import {
ExternalLink,
FolderPlus,
GitPullRequest,
- Globe,
Settings,
- SquareTerminal,
MoreVertical,
Pencil,
Plus,
@@ -150,8 +148,6 @@ const ThemedCircleAlert = withUnistyles(CircleAlert);
const ThemedCircleCheck = withUnistyles(CircleCheck);
const ThemedSyncedLoader = withUnistyles(SyncedLoader);
const ThemedFolderPlus = withUnistyles(FolderPlus);
-const ThemedGlobe = withUnistyles(Globe);
-const ThemedSquareTerminal = withUnistyles(SquareTerminal);
const ThemedMoreVertical = withUnistyles(MoreVertical);
const ThemedTrash2 = withUnistyles(Trash2);
const ThemedSettings = withUnistyles(Settings);
@@ -165,7 +161,6 @@ const foregroundMutedColorMapping = (theme: Theme) => ({
});
const redColorMapping = (theme: Theme) => ({ color: theme.colors.palette.red[500] });
const amberColorMapping = (theme: Theme) => ({ color: 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 purpleColorMapping = (theme: Theme) => ({ color: theme.colors.palette.purple[500] });
const syncedLoaderColorMapping = (theme: Theme) => ({
@@ -622,8 +617,6 @@ function WorkspaceRowRightGroup({
workspace,
isHovered,
isTouchPlatform,
- showScriptsIcon,
- hasRunningService,
isCreating,
showShortcutBadge,
shortcutNumber,
@@ -640,8 +633,6 @@ function WorkspaceRowRightGroup({
workspace: SidebarWorkspaceEntry;
isHovered: boolean;
isTouchPlatform: boolean;
- showScriptsIcon: boolean;
- hasRunningService: boolean;
isCreating: boolean;
showShortcutBadge: boolean;
shortcutNumber: number | null;
@@ -661,15 +652,6 @@ function WorkspaceRowRightGroup({
const shouldRenderActionSlot = Boolean(onArchive || workspace.diffStat);
return (
<>
- {showScriptsIcon ? (
-
- {hasRunningService ? (
-
- ) : (
-
- )}
-
- ) : null}
{isCreating ? Creating... : null}
{shouldRenderActionSlot ? (
@@ -1393,6 +1375,10 @@ function WorkspaceRowInner({
const hasRunningService = workspace.scripts.some(
(s) => s.lifecycle === "running" && (s.type ?? "service") === "service",
);
+ let scriptIconKind: "service" | "command" | null = null;
+ if (showScriptsIcon) {
+ scriptIconKind = hasRunningService ? "service" : "command";
+ }
const workspaceRowStyle = getProjectWorkspaceRowStyle({
isDragging,
selected,
@@ -1420,6 +1406,7 @@ function WorkspaceRowInner({
>
s.lifecycle === "running" && (s.type ?? "service") === "service",
);
+ let scriptIconKind: "service" | "command" | null = null;
+ if (showScriptsIcon) {
+ scriptIconKind = hasRunningService ? "service" : "command";
+ }
const accessibilityState = useMemo(() => ({ selected }), [selected]);
@@ -631,38 +631,28 @@ function StatusWorkspaceRowInner({
- <>
- {showScriptsIcon ? (
-
- {hasRunningService ? (
-
- ) : (
-
- )}
-
- ) : null}
- {shouldRenderActionSlot ? (
-
- ) : null}
- >
+ {shouldRenderActionSlot ? (
+
+ ) : null}
diff --git a/packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx b/packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx
index 19fee6816..5d06b740e 100644
--- a/packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx
+++ b/packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx
@@ -14,7 +14,9 @@ import {
Folder,
FolderGit2,
GitPullRequest,
+ Globe,
Monitor,
+ SquareTerminal,
} from "lucide-react-native";
import { GitHubIcon } from "@/components/icons/github-icon";
import { WorkspaceHoverCard } from "@/components/workspace-hover-card";
@@ -42,6 +44,7 @@ const syncedLoaderColorMapping = (theme: Theme) => ({
? 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] });
@@ -55,6 +58,10 @@ const ThemedSyncedLoader = withUnistyles(SyncedLoader);
const ThemedMonitor = withUnistyles(Monitor);
const ThemedFolder = withUnistyles(Folder);
const ThemedFolderGit2 = withUnistyles(FolderGit2);
+const ThemedGlobe = withUnistyles(Globe);
+const ThemedSquareTerminal = withUnistyles(SquareTerminal);
+
+type SidebarWorkspaceScriptIconKind = "service" | "command";
export function SidebarWorkspaceRowFrame({
workspace,
@@ -86,6 +93,7 @@ export function SidebarWorkspaceRowFrame({
export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowContent({
workspace,
subtitle,
+ scriptIconKind = null,
isHovered,
isLoading,
isCreating = false,
@@ -95,6 +103,7 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
}: {
workspace: SidebarWorkspaceEntry;
subtitle?: string | null;
+ scriptIconKind?: SidebarWorkspaceScriptIconKind | null;
isHovered: boolean;
isLoading: boolean;
isCreating?: boolean;
@@ -105,10 +114,11 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
const workspaceBranchTextStyle = useMemo(
() => [
styles.workspaceBranchText,
+ scriptIconKind ? styles.workspaceBranchTextWithAccessory : styles.workspaceBranchTextFlexible,
isHovered && styles.workspaceBranchTextHovered,
isCreating && styles.workspaceBranchTextCreating,
],
- [isHovered, isCreating],
+ [scriptIconKind, isHovered, isCreating],
);
return (
@@ -123,6 +133,7 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
{workspace.name}
+ {scriptIconKind ? : null}
{children}
@@ -146,6 +157,22 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
);
});
+function WorkspaceScriptIcon({ kind }: { kind: SidebarWorkspaceScriptIconKind }) {
+ return (
+
+ {kind === "service" ? (
+
+ ) : (
+
+ )}
+
+ );
+}
+
function WorkspaceStatusIndicator({
bucket,
workspaceKind,
@@ -454,7 +481,7 @@ const styles = StyleSheet.create((theme) => ({
workspaceStatusDot: {
position: "relative",
width: WORKSPACE_STATUS_DOT_WIDTH,
- height: 16,
+ height: 20,
borderRadius: theme.borderRadius.full,
flexShrink: 0,
alignItems: "center",
@@ -471,9 +498,20 @@ const styles = StyleSheet.create((theme) => ({
fontWeight: "400",
lineHeight: 20,
opacity: 0.76,
- flex: 1,
minWidth: 0,
},
+ workspaceBranchTextFlexible: {
+ flex: 1,
+ },
+ workspaceBranchTextWithAccessory: {
+ flexShrink: 1,
+ },
+ workspaceTitleAccessory: {
+ height: 20,
+ flexShrink: 0,
+ alignItems: "center",
+ justifyContent: "center",
+ },
workspaceBranchTextCreating: {
opacity: 0.92,
},
@@ -490,6 +528,7 @@ const styles = StyleSheet.create((theme) => ({
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
+ marginTop: theme.spacing[1],
paddingLeft: WORKSPACE_STATUS_DOT_WIDTH + theme.spacing[2],
},
statusDotNeedsInput: {