Bohdan Triapitsyn
63da6e6292
Use base-ui's transition-status pattern (data-starting-style / data-ending-style) for Dialog, DropdownMenu, Select, Tooltip and Popover so open/close animate consistently at 150ms ease-out without flicker. Wrap dialog popups in a centered flex container so the scale animation no longer fights with translate-based positioning, and switch PendingChangesBar to a real Popover so it actually animates closed. Convert ScheduledTaskEditorDialog from raw Radix to the shared Dialog wrapper, give ScheduledTasksDialog a stable min-height to prevent layout shift mid-animation, and reset NewWorktreeDialog form state on open instead of close so fields don't empty during the close transition. Drop tooltip delay from 700ms to 300ms globally and remove all per-component overrides except the model/variant/agent selectors in the chat input (600ms).
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { RiEyeLine, RiEyeOffLine } from '@remixicon/react';
|
|
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export type PreviewToggleButtonProps = {
|
|
/** Current mode - determines which icon is displayed */
|
|
currentMode: 'preview' | 'edit';
|
|
/** Callback fired when toggle button is clicked */
|
|
onToggle: () => void;
|
|
};
|
|
|
|
/**
|
|
* PreviewToggleButton - A toggle button for switching between preview and edit modes.
|
|
*
|
|
* Displays an eye icon when in preview mode (indicating the content is visible/read-only)
|
|
* and a slashed eye icon when in edit mode (indicating the content can be edited).
|
|
*/
|
|
export const PreviewToggleButton: React.FC<PreviewToggleButtonProps> = ({
|
|
currentMode,
|
|
onToggle,
|
|
}) => {
|
|
const isPreview = currentMode === 'preview';
|
|
const ariaLabel = isPreview ? 'Switch to edit mode' : 'Switch to preview mode';
|
|
const tooltipText = isPreview ? 'Edit' : 'Preview';
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onToggle}
|
|
aria-label={ariaLabel}
|
|
className="h-5 w-5 p-0"
|
|
>
|
|
{isPreview ? (
|
|
<RiEyeLine className="size-4" aria-hidden="true" />
|
|
) : (
|
|
<RiEyeOffLine className="size-4" aria-hidden="true" />
|
|
)}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8}>
|
|
{tooltipText}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
};
|