Skip to content

Commit 03d4e8b

Browse files
backnotpropbacknotprop
committed
fix: widen diff type dialog with 60/40 split layout and hover-to-zoom image
Makes the image preview visible by splitting the dialog into options (left) and a toolbar screenshot (right) with a CSS hover-to-zoom effect so users can clearly see where the dropdown lives. For provenance purposes, this commit was AI assisted.
1 parent aaad89e commit 03d4e8b

1 file changed

Lines changed: 62 additions & 41 deletions

File tree

‎packages/ui/components/DiffTypeSetupDialog.tsx‎

Lines changed: 62 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const DiffTypeSetupDialog: React.FC<DiffTypeSetupDialogProps> = ({
3838
const [selected, setSelected] = useState<DefaultDiffType>(
3939
() => configStore.get('defaultDiffType')
4040
);
41+
const [imageHovered, setImageHovered] = useState(false);
4142

4243
const handleDone = () => {
4344
configStore.set('defaultDiffType', selected);
@@ -47,63 +48,83 @@ export const DiffTypeSetupDialog: React.FC<DiffTypeSetupDialogProps> = ({
4748

4849
return createPortal(
4950
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/90 backdrop-blur-sm p-4">
50-
<div className="bg-card border border-border rounded-xl w-full max-w-lg shadow-2xl">
51+
<div className="bg-card border border-border rounded-xl w-full max-w-2xl shadow-2xl">
5152
{/* Header */}
5253
<div className="p-5 border-b border-border">
5354
<h3 className="font-semibold text-base mb-2">Set Your Default Diff View</h3>
5455
<p className="text-sm text-muted-foreground">
5556
Pick which changes you want to see when you open a code review.
56-
This is just the default — you can switch anytime using the dropdown in the toolbar.
5757
</p>
5858
</div>
5959

60-
{/* Options */}
61-
<div className="p-4 space-y-2">
62-
{OPTIONS.map((opt) => (
63-
<button
64-
key={opt.value}
65-
type="button"
66-
onClick={() => setSelected(opt.value)}
67-
className={`w-full flex items-start gap-3 p-3 rounded-lg border transition-colors text-left ${
68-
selected === opt.value
69-
? 'border-primary bg-primary/5'
70-
: 'border-border hover:border-muted-foreground/30 hover:bg-muted/50'
71-
}`}
72-
>
73-
<div className={`mt-0.5 w-4 h-4 rounded-full border-2 flex-shrink-0 flex items-center justify-center ${
74-
selected === opt.value ? 'border-primary' : 'border-muted-foreground/40'
75-
}`}>
76-
{selected === opt.value && (
77-
<div className="w-2 h-2 rounded-full bg-primary" />
78-
)}
79-
</div>
80-
<div>
81-
<div className="text-sm font-medium">{opt.label}</div>
82-
<div className="text-xs text-muted-foreground">{opt.description}</div>
83-
</div>
84-
</button>
85-
))}
86-
</div>
60+
{/* Body: 60/40 split */}
61+
<div className="flex gap-5 p-5">
62+
{/* Left: options (60%) */}
63+
<div className="flex-[3] space-y-2 min-w-0">
64+
{OPTIONS.map((opt) => (
65+
<button
66+
key={opt.value}
67+
type="button"
68+
onClick={() => setSelected(opt.value)}
69+
className={`w-full flex items-start gap-3 p-3 rounded-lg border transition-colors text-left ${
70+
selected === opt.value
71+
? 'border-primary bg-primary/5'
72+
: 'border-border hover:border-muted-foreground/30 hover:bg-muted/50'
73+
}`}
74+
>
75+
<div className={`mt-0.5 w-4 h-4 rounded-full border-2 flex-shrink-0 flex items-center justify-center ${
76+
selected === opt.value ? 'border-primary' : 'border-muted-foreground/40'
77+
}`}>
78+
{selected === opt.value && (
79+
<div className="w-2 h-2 rounded-full bg-primary" />
80+
)}
81+
</div>
82+
<div>
83+
<div className="text-sm font-medium">{opt.label}</div>
84+
<div className="text-xs text-muted-foreground">{opt.description}</div>
85+
</div>
86+
</button>
87+
))}
88+
</div>
8789

88-
{/* Inline hint with screenshot */}
89-
<div className="px-4 pb-3">
90-
<div className="flex items-start gap-3 rounded-lg bg-muted/50 border border-border/50 p-3">
91-
<img
92-
src={diffOptionsImg}
93-
alt="Diff type dropdown in the toolbar"
94-
className="w-28 rounded border border-border/50 flex-shrink-0"
95-
/>
96-
<p className="text-[11px] text-muted-foreground leading-relaxed pt-0.5">
97-
You can switch between diff views at any point during a review using this dropdown in the toolbar. The option you pick here just sets your starting view.
90+
{/* Right: image preview + hint (40%) */}
91+
<div className="flex-[2] flex flex-col items-center justify-center min-w-0">
92+
<div
93+
className="relative cursor-zoom-in"
94+
onMouseEnter={() => setImageHovered(true)}
95+
onMouseLeave={() => setImageHovered(false)}
96+
>
97+
<img
98+
src={diffOptionsImg}
99+
alt="Diff type dropdown in the toolbar"
100+
className="w-full rounded-lg shadow-sm"
101+
style={{
102+
border: `2px solid ${imageHovered ? 'var(--primary)' : 'color-mix(in srgb, var(--primary) 30%, transparent)'}`,
103+
transform: imageHovered ? 'scale(1.65)' : 'scale(1)',
104+
zIndex: imageHovered ? 50 : 0,
105+
position: 'relative',
106+
transition: 'transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease',
107+
}}
108+
/>
109+
{!imageHovered && (
110+
<div className="absolute inset-0 flex items-end justify-center pb-1.5 pointer-events-none">
111+
<span className="text-[9px] text-muted-foreground/60 bg-background/80 px-1.5 py-0.5 rounded">
112+
hover to preview
113+
</span>
114+
</div>
115+
)}
116+
</div>
117+
<p className="text-[11px] text-muted-foreground text-center leading-relaxed mt-3">
118+
You can switch views anytime during a review using this dropdown in the toolbar.
98119
</p>
99120
</div>
100121
</div>
101122

102123
{/* Footer */}
103-
<div className="p-4 border-t border-border flex justify-end">
124+
<div className="px-5 pb-4 flex justify-end">
104125
<button
105126
onClick={handleDone}
106-
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity flex-shrink-0"
127+
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
107128
>
108129
Done
109130
</button>

0 commit comments

Comments
 (0)