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.
This commit is contained in:
Mohamed Boudra
2026-04-20 10:57:27 +07:00
parent 002946d4dd
commit 8600f183b1
2 changed files with 23 additions and 7 deletions
@@ -28,7 +28,6 @@ import * as Clipboard from "expo-clipboard";
import { DiffStat } from "@/components/diff-stat"; import { DiffStat } from "@/components/diff-stat";
import { import {
Archive, Archive,
ArrowUpRight,
CircleAlert, CircleAlert,
ChevronDown, ChevronDown,
ChevronRight, ChevronRight,
@@ -216,6 +215,7 @@ export function PrBadge({ hint }: { hint: PrHint }) {
const { theme } = useUnistyles(); const { theme } = useUnistyles();
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const activeColor = isHovered ? theme.colors.foreground : theme.colors.foregroundMuted; const activeColor = isHovered ? theme.colors.foreground : theme.colors.foregroundMuted;
const iconColor = getWorkspacePrIconColor(theme, hint.state);
const handlePressIn = useCallback((event: GestureResponderEvent) => { const handlePressIn = useCallback((event: GestureResponderEvent) => {
event.stopPropagation(); event.stopPropagation();
@@ -240,11 +240,14 @@ export function PrBadge({ hint }: { hint: PrHint }) {
onHoverOut={() => setIsHovered(false)} onHoverOut={() => setIsHovered(false)}
style={({ pressed }) => [prBadgeStyles.badge, pressed && prBadgeStyles.badgePressed]} 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}> <Text style={[prBadgeStyles.text, { color: activeColor }]} numberOfLines={1}>
#{hint.number} #{hint.number}
</Text> </Text>
<ArrowUpRight size={10} color={activeColor} style={{ opacity: isHovered ? 1 : 0 }} />
</Pressable> </Pressable>
); );
} }
@@ -1138,8 +1141,8 @@ function WorkspaceRowInner({
</View> </View>
{prHint ? ( {prHint ? (
<View style={styles.workspacePrBadgeRow}> <View style={styles.workspacePrBadgeRow}>
<ChecksBadge checks={prHint.checks} />
<PrBadge hint={prHint} /> <PrBadge hint={prHint} />
<ChecksBadge checks={prHint.checks} />
</View> </View>
) : null} ) : null}
</Pressable> </Pressable>
@@ -306,14 +306,24 @@ function WorkspaceHoverCardContent({
badgeLabel = `${checks.length} passed`; badgeLabel = `${checks.length} passed`;
} }
const iconColor = hovered
? theme.colors.foreground
: theme.colors.foregroundMuted;
return ( return (
<> <>
{hovered ? ( {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.checksSummaryCounts}>
<View style={[styles.checksDot, { backgroundColor: badgeColor }]} /> <View style={[styles.checksDot, { backgroundColor: badgeColor }]} />
<Text style={[styles.checksStatusText, { color: badgeColor }]}> <Text style={[styles.checksStatusText, { color: badgeColor }]}>
@@ -395,6 +405,9 @@ const styles = StyleSheet.create((theme) => ({
fontWeight: theme.fontWeight.normal, fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted, color: theme.colors.foregroundMuted,
}, },
checksSummaryLabelHovered: {
color: theme.colors.foreground,
},
checksSummaryCounts: { checksSummaryCounts: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",