From b0cb60030144468ecfc1b65cc416fa0f0d8ea5eb Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Mon, 17 Nov 2025 19:21:38 +0100
Subject: [PATCH] fix: apply status colors to file explorer icons

---
 components/FileExplorer/FileExplorerIcon.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/components/FileExplorer/FileExplorerIcon.tsx b/components/FileExplorer/FileExplorerIcon.tsx
index b88e0e8..c4b95a9 100644
--- a/components/FileExplorer/FileExplorerIcon.tsx
+++ b/components/FileExplorer/FileExplorerIcon.tsx
@@ -26,13 +26,16 @@ export const FileExplorerIcon: FC<Props> = memo(
 			0,
 		);
 
+		const getStatusColor = (color?: string) =>
+			(color && color.trim()) || "var(--text-accent)";
+
 		if (totalStatuses === 0) {
 			// If hideUnknownStatus is enabled, don't show anything for files without status
 			if (hideUnknownStatus) return null;
 
 			// Use config passed from integration, with fallbacks
 			const icon = unknownStatusConfig?.icon || "❓";
-			const color = unknownStatusConfig?.color || "#8b949e";
+			const color = unknownStatusConfig?.color?.trim() || "#8b949e";
 
 			return (
 				<div className="status-wrapper">
@@ -40,11 +43,7 @@ export const FileExplorerIcon: FC<Props> = memo(
 						className="status-minimal status-minimal--no-status"
 						onMouseEnter={() => onMouseEnter({})}
 						onMouseLeave={() => onMouseLeave({})}
-						style={
-							{
-								"--primary-color": color,
-							} as React.CSSProperties
-						}
+						style={{ color } as React.CSSProperties}
 					>
 						<span className="status-icon">{icon}</span>
 					</div>
@@ -54,6 +53,7 @@ export const FileExplorerIcon: FC<Props> = memo(
 
 		const primaryStatus = statusEntries[0]?.[1]?.[0];
 		if (!primaryStatus) return null;
+		const iconColor = getStatusColor(primaryStatus.color);
 
 		return (
 			<div className="status-wrapper">
@@ -61,12 +61,7 @@ export const FileExplorerIcon: FC<Props> = memo(
 					className="status-minimal"
 					onMouseEnter={() => onMouseEnter(statuses)}
 					onMouseLeave={() => onMouseLeave(statuses)}
-					style={
-						{
-							"--primary-color":
-								primaryStatus.color || "var(--text-accent)",
-						} as React.CSSProperties
-					}
+					style={{ color: iconColor } as React.CSSProperties}
 				>
 					<span className="status-icon">{primaryStatus.icon}</span>
 					{totalStatuses > 1 && (