kandev/apps/web/components/task/sidebar-button.tsx

'use client';

import { memo, type ReactNode } from 'react';
import { IconChevronRight } from '@tabler/icons-react';
import { cn } from '@/lib/utils';

type SidebarButtonProps = {
  icon?: ReactNode;
  label: string;
  count?: number;
  isExpanded?: boolean;
  onToggle?: () => void;
  compact?: boolean;
};

export const SidebarButton = memo(function SidebarButton({
  icon,
  label,
  count,
  isExpanded,
  onToggle,
  compact = false,
}: SidebarButtonProps) {
  const isExpandable = onToggle !== undefined;

  return (
    <button
      type="button"
      onClick={onToggle}
      className={cn(
        'group flex w-full items-center gap-2 rounded-[6px] text-[13px] select-none outline-none',
        'focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring',
        compact ? 'py-[3px]' : 'py-[5px]',
        'px-2',
        'hover:bg-foreground/[0.07]',
        isExpandable && 'cursor-pointer'
      )}
      aria-expanded={isExpandable ? isExpanded : undefined}
    >
      {icon && (
        <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
          {icon}
        </span>
      )}
      <span className="flex-1 truncate text-left font-medium text-foreground/80">
        {label}
      </span>
      {count !== undefined && (
        <span className="text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">
          {count}
        </span>
      )}
      {isExpandable && (
        <IconChevronRight
          className={cn(
            'h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 transition-all duration-150',
            isExpanded && 'rotate-90'
          )}
        />
      )}
    </button>
  );
});