João Salavisa
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type ResizeHandleProps = {
|
|
planModeEnabled?: boolean;
|
|
isAgentBusy?: boolean;
|
|
isStarting?: boolean;
|
|
onMouseDown: (e: React.MouseEvent) => void;
|
|
onDoubleClick: () => void;
|
|
};
|
|
|
|
function getHandleColor(planModeEnabled?: boolean, isAgentBusy?: boolean, isStarting?: boolean) {
|
|
if (isStarting) return "bg-primary/70 hover:bg-primary";
|
|
if (isAgentBusy && planModeEnabled) return "bg-violet-400/80 hover:bg-violet-400";
|
|
if (isAgentBusy) return "bg-primary/70 hover:bg-primary";
|
|
if (planModeEnabled) return "bg-violet-400/80 hover:bg-violet-400";
|
|
// Resting state: muted-foreground (light gray on dark bg) at high opacity so
|
|
// the handle reads as a discoverable affordance, not invisible chrome.
|
|
return "bg-muted-foreground/60 hover:bg-muted-foreground";
|
|
}
|
|
|
|
export function ResizeHandle({
|
|
planModeEnabled,
|
|
isAgentBusy,
|
|
isStarting,
|
|
onMouseDown,
|
|
onDoubleClick,
|
|
}: ResizeHandleProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-label={t("task:resize")}
|
|
className={cn(
|
|
"absolute left-1/2 top-[-1px] -translate-x-1/2 -translate-y-1/2 z-10",
|
|
"w-16 h-3 cursor-ns-resize",
|
|
"flex items-center justify-center group",
|
|
)}
|
|
onMouseDown={onMouseDown}
|
|
onDoubleClick={onDoubleClick}
|
|
tabIndex={-1}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"w-12 h-1 rounded-full transition-all group-hover:h-1.5 group-hover:w-14",
|
|
getHandleColor(planModeEnabled, isAgentBusy, isStarting),
|
|
)}
|
|
/>
|
|
</button>
|
|
);
|
|
}
|