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:
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user