mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-08 09:54:26 +00:00
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:
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user