Function TaskSidebarMenuItem

site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx:181–319

({ task })

};

const TaskSidebarMenuItem: FC<TaskSidebarMenuItemProps> = ({ task }) => {
	const { taskId } = useParams<{ taskId: string }>();
	const isActive = task.id === taskId;
	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
	const navigate = useNavigate();
	const queryClient = useQueryClient();
	const pauseMutation = useMutation({
		...pauseTask(task, queryClient),
		onError: (error: unknown) => {
			toast.error(
				getErrorMessage(error, `Failed to pause task "${task.name}".`),
				{
					description: getErrorDetail(error),
				},
			);
		},
	});
	const resumeMutation = useMutation({
		...resumeTask(task, queryClient),
		onError: (error: unknown) => {
			toast.error(
				getErrorMessage(error, `Failed to resume task "${task.name}".`),
				{
					description: getErrorDetail(error),
				},
			);
		},
	});

	const showPause = canPauseTask(task.status) && task.workspace_id;
	const pauseDisabled = isPauseDisabled(task.status);
	const showResume = canResumeTask(task.status) && task.workspace_id;

	return (
		<>
			<Button
				asChild
				size="sm"
				variant="subtle"
				className={cn(
					"overflow-visible group w-full justify-start text-content-secondary",
					"transition-none hover:bg-surface-tertiary gap-2 has-[[data-state=open]]:bg-surface-tertiary",
					{
						"text-content-primary bg-surface-quaternary hover:bg-surface-quaternary has-[[data-state=open]]:bg-surface-quaternary":
							isActive,
					},
				)}
			>
				<Link
					to={{
						pathname: `/tasks/${task.owner_name}/${task.id}`,
						search: location.search,
					}}
				>
					<TaskSidebarMenuItemStatus task={task} />
					<span className="block max-w-[220px] truncate">
						{task.display_name}
					</span>