fix: replace cursor-follow tooltip with standard Radix tooltip in sidebar rows

Replaced the Cursor/CursorFollow animate-ui primitives in StackRow
with the standard Radix Tooltip/TooltipTrigger/TooltipContent already
used throughout the app. The custom cursor dot that followed the mouse
is gone; tooltips now appear as static popovers on hover/touch.
This commit is contained in:
SaelixCode
2026-07-02 12:35:37 -04:00
parent ea02762f0a
commit ba702474bd
2 changed files with 16 additions and 19 deletions
+8 -9
View File
@@ -1,10 +1,10 @@
import type { ReactNode } from 'react';
import { GitBranch, Loader2, AlertCircle } from 'lucide-react';
import type { CheckStatus } from '@/types/imageUpdates';
import { Cursor, CursorContainer, CursorFollow, CursorProvider } from '@/components/animate-ui/primitives/animate/cursor';
import { Checkbox } from '@/components/ui/checkbox';
import type { Label } from '@/components/label-types';
import { cn } from '@/lib/utils';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { sidebarRowActive, sidebarRowBase, sidebarRowCheckboxSlot } from './sidebar-styles';
import { statusText, statusColor } from './stack-status-utils';
import type { StackRowStatus } from './stack-status-utils';
@@ -34,15 +34,14 @@ interface StackRowProps {
function RowTooltip({ trigger, label }: { trigger: ReactNode; label: string }) {
return (
<CursorProvider>
<CursorContainer className="inline-flex items-center shrink-0">{trigger}</CursorContainer>
<Cursor><div className="h-2 w-2 rounded-full bg-brand" /></Cursor>
<CursorFollow side="bottom" sideOffset={4} align="center" transition={{ stiffness: 400, damping: 40, bounce: 0 }}>
<div className="rounded-md border border-card-border bg-popover/95 backdrop-blur-[10px] backdrop-saturate-[1.15] px-2.5 py-1.5 shadow-md">
<TooltipProvider delayDuration={300}>
<Tooltip>
<TooltipTrigger asChild>{trigger}</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={4} align="center">
<span className="font-mono text-xs tabular-nums text-stat-value">{label}</span>
</div>
</CursorFollow>
</CursorProvider>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
@@ -43,17 +43,15 @@ describe('StackRow', () => {
});
it('wraps the partial pill in a hover tooltip', () => {
// jsdom does not mount the cursor-follow label, so assert the PT trigger is
// wrapped in the RowTooltip cursor-container; the visible "3/5 running"
// tooltip text is verified in the Playwright drive.
const { container } = render(<StackRow {...base({ status: 'partial', running: 3, total: 5 })} />);
expect(screen.getByText('PT').closest('[data-slot="cursor-container"]')).not.toBeNull();
expect(container.querySelector('[data-slot="cursor-container"]')).not.toBeNull();
const trigger = screen.getByText('PT');
// Radix TooltipTrigger adds data-state to the wrapped element.
expect(trigger.getAttribute('data-state')).toBe('closed');
});
it('does not wrap a non-partial pill in a tooltip', () => {
render(<StackRow {...base({ status: 'running' })} />);
expect(screen.getByText('UP').closest('[data-slot="cursor-container"]')).toBeNull();
expect(screen.getByText('UP').getAttribute('data-state')).toBeNull();
});
it('renders cyan rail only when active', () => {
@@ -103,12 +101,12 @@ describe('StackRow', () => {
});
// ── Image-update check status indicator ────────────────────────────────
// status='running' renders the pill as plain text (no tooltip), so the only
// cursor-container in these rows is the trailing update/check indicator.
it('shows a muted check-failed indicator when the last check failed and there is no update', () => {
const { container } = render(<StackRow {...base({ status: 'running', hasUpdate: false, checkStatus: 'failed', lastError: 'Registry unreachable' })} />);
expect(container.querySelector('[data-slot="cursor-container"]')).not.toBeNull();
// The trailing slot renders a tooltip-wrapped AlertCircle icon (an SVG).
const trailingSlot = container.querySelector('[data-state="closed"]');
expect(trailingSlot).not.toBeNull();
// It is not the update dot.
expect(container.querySelector('.bg-update')).toBeNull();
});
@@ -120,7 +118,7 @@ describe('StackRow', () => {
it('shows no trailing indicator for a clean ok check with no update', () => {
const { container } = render(<StackRow {...base({ status: 'running', hasUpdate: false, checkStatus: 'ok' })} />);
expect(container.querySelector('[data-slot="cursor-container"]')).toBeNull();
expect(container.querySelector('.lucide-alert-circle')).toBeNull();
expect(container.querySelector('.bg-update')).toBeNull();
});
});