From 8600f183b1a4b5688897cb9c3dba07557b1c639d Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Mon, 20 Apr 2026 10:57:27 +0700
Subject: [PATCH] feat(sidebar): restore PR state color, swap badge order,
 brighten checks on hover

- PR icon color reflects merge state (open/merged/closed) via the
  existing getWorkspacePrIconColor helper.
- PR badge is rendered before the failed-checks badge in the workspace
  row.
- Hovering the PR badge swaps the GitPullRequest icon for ExternalLink
  in place (same size, no layout shift) and removes the trailing arrow.
- Hovering the checks row in the workspace hover card brightens the
  icon and "Checks" label to foreground.
---
 .../src/components/sidebar-workspace-list.tsx | 11 +++++++----
 .../src/components/workspace-hover-card.tsx   | 19 ++++++++++++++++---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/sidebar-workspace-list.tsx b/packages/app/src/components/sidebar-workspace-list.tsx
index db32a5f81..de1c6ce72 100644
--- a/packages/app/src/components/sidebar-workspace-list.tsx
+++ b/packages/app/src/components/sidebar-workspace-list.tsx
@@ -28,7 +28,6 @@ import * as Clipboard from "expo-clipboard";
 import { DiffStat } from "@/components/diff-stat";
 import {
   Archive,
-  ArrowUpRight,
   CircleAlert,
   ChevronDown,
   ChevronRight,
@@ -216,6 +215,7 @@ export function PrBadge({ hint }: { hint: PrHint }) {
   const { theme } = useUnistyles();
   const [isHovered, setIsHovered] = useState(false);
   const activeColor = isHovered ? theme.colors.foreground : theme.colors.foregroundMuted;
+  const iconColor = getWorkspacePrIconColor(theme, hint.state);
 
   const handlePressIn = useCallback((event: GestureResponderEvent) => {
     event.stopPropagation();
@@ -240,11 +240,14 @@ export function PrBadge({ hint }: { hint: PrHint }) {
       onHoverOut={() => setIsHovered(false)}
       style={({ pressed }) => [prBadgeStyles.badge, pressed && prBadgeStyles.badgePressed]}
     >
-      <GitPullRequest size={12} color={activeColor} />
+      {isHovered ? (
+        <ExternalLink size={12} color={activeColor} />
+      ) : (
+        <GitPullRequest size={12} color={iconColor} />
+      )}
       <Text style={[prBadgeStyles.text, { color: activeColor }]} numberOfLines={1}>
         #{hint.number}
       </Text>
-      <ArrowUpRight size={10} color={activeColor} style={{ opacity: isHovered ? 1 : 0 }} />
     </Pressable>
   );
 }
@@ -1138,8 +1141,8 @@ function WorkspaceRowInner({
           </View>
           {prHint ? (
             <View style={styles.workspacePrBadgeRow}>
-              <ChecksBadge checks={prHint.checks} />
               <PrBadge hint={prHint} />
+              <ChecksBadge checks={prHint.checks} />
             </View>
           ) : null}
         </Pressable>
diff --git a/packages/app/src/components/workspace-hover-card.tsx b/packages/app/src/components/workspace-hover-card.tsx
index 730ba442b..e51b098ad 100644
--- a/packages/app/src/components/workspace-hover-card.tsx
+++ b/packages/app/src/components/workspace-hover-card.tsx
@@ -306,14 +306,24 @@ function WorkspaceHoverCardContent({
                     badgeLabel = `${checks.length} passed`;
                   }
 
+                  const iconColor = hovered
+                    ? theme.colors.foreground
+                    : theme.colors.foregroundMuted;
                   return (
                     <>
                       {hovered ? (
-                        <ExternalLink size={12} color={theme.colors.foregroundMuted} />
+                        <ExternalLink size={12} color={iconColor} />
                       ) : (
-                        <GitHubIcon size={12} color={theme.colors.foregroundMuted} />
+                        <GitHubIcon size={12} color={iconColor} />
                       )}
-                      <Text style={styles.checksSummaryLabel}>Checks</Text>
+                      <Text
+                        style={[
+                          styles.checksSummaryLabel,
+                          hovered && styles.checksSummaryLabelHovered,
+                        ]}
+                      >
+                        Checks
+                      </Text>
                       <View style={styles.checksSummaryCounts}>
                         <View style={[styles.checksDot, { backgroundColor: badgeColor }]} />
                         <Text style={[styles.checksStatusText, { color: badgeColor }]}>
@@ -395,6 +405,9 @@ const styles = StyleSheet.create((theme) => ({
     fontWeight: theme.fontWeight.normal,
     color: theme.colors.foregroundMuted,
   },
+  checksSummaryLabelHovered: {
+    color: theme.colors.foreground,
+  },
   checksSummaryCounts: {
     flexDirection: "row",
     alignItems: "center",