From 27f64de4a5d5f48ad65d39a1c992a95490b12a4f Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Tue, 24 Jun 2025 13:55:32 -0800
Subject: [PATCH] chore: fix idle state icon when disabled

When the workspace is off, we set a disabled color, but for the idle
icon that also needs a fill, this only changed the border making it look
weird.  Instead, move the disabled logic into the component so we can
apply a matching fill when necessary.
---
 site/src/modules/apps/AppStatusStateIcon.tsx  | 11 ++++--
 .../WorkspaceAppStatus.stories.tsx            | 36 ++++++++++++++++++-
 .../WorkspaceAppStatus/WorkspaceAppStatus.tsx |  4 ---
 3 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/site/src/modules/apps/AppStatusStateIcon.tsx b/site/src/modules/apps/AppStatusStateIcon.tsx
index 3497773952373..1800c81958c4e 100644
--- a/site/src/modules/apps/AppStatusStateIcon.tsx
+++ b/site/src/modules/apps/AppStatusStateIcon.tsx
@@ -24,16 +24,23 @@ export const AppStatusStateIcon: FC<AppStatusStateIconProps> = ({
 	latest,
 	className: customClassName,
 }) => {
-	const className = cn(["size-4 shrink-0", customClassName]);
+	const className = cn([
+		"size-4 shrink-0",
+		customClassName,
+		disabled && "text-content-disabled",
+	]);
 
 	switch (state) {
 		case "idle":
+			// The pause icon is outlined; add a fill since it is hard to see and
+			// remove the stroke so it is not overly thick.
 			return (
 				<PauseIcon
+					css={{ strokeWidth: 0 }}
 					className={cn([
 						"text-content-secondary",
-						"fill-content-secondary",
 						className,
+						disabled ? "fill-content-disabled" : "fill-content-secondary",
 					])}
 				/>
 			);
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
index 0e229467b994b..9327ff6b46e98 100644
--- a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
+++ b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
@@ -69,9 +69,43 @@ export const LongMessage: Story = {
 	},
 };
 
-export const Disabled: Story = {
+export const DisabledComplete: Story = {
 	args: {
 		status: MockWorkspaceAppStatus,
 		disabled: true,
 	},
 };
+
+export const DisabledFailure: Story = {
+	args: {
+		status: {
+			...MockWorkspaceAppStatus,
+			state: "failure",
+			message: "Couldn't figure out how to start the dev server",
+		},
+		disabled: true,
+	},
+};
+
+export const DisabledWorking: Story = {
+	args: {
+		status: {
+			...MockWorkspaceAppStatus,
+			state: "working",
+			message: "Starting dev server...",
+			uri: "",
+		},
+		disabled: true,
+	},
+};
+
+export const DisabledIdle: Story = {
+	args: {
+		status: {
+			...MockWorkspaceAppStatus,
+			state: "idle",
+			message: "Done for now",
+		},
+		disabled: true,
+	},
+};
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
index 587ae9f5b062f..633a9fcbc1ad8 100644
--- a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
+++ b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
@@ -7,7 +7,6 @@ import {
 } from "components/Tooltip/Tooltip";
 import capitalize from "lodash/capitalize";
 import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
-import { cn } from "utils/cn";
 
 type WorkspaceAppStatusProps = {
 	status: APIWorkspaceAppStatus | null;
@@ -37,9 +36,6 @@ export const WorkspaceAppStatus = ({
 								latest
 								disabled={disabled}
 								state={status.state}
-								className={cn({
-									"text-content-disabled": disabled,
-								})}
 							/>
 							<span className="whitespace-nowrap max-w-72 overflow-hidden text-ellipsis text-sm text-content-primary font-medium">
 								{message}