siftlode/frontend/src/components/ui/Button.tsx

import { forwardRef } from "react";
import type { ButtonHTMLAttributes, ReactNode } from "react";
import clsx from "clsx";
import { Loader2 } from "lucide-react";

// The ONE action-button primitive. Before this there were 385 raw <button>s styling themselves with
// ad-hoc utility strings over the CSS paint-recipes (.btn-primary/.btn-danger, index.css) + the btnCls
// constant. This centralises the geometry+paint so an "action button" (submit/cancel/subscribe/delete…)
// is one component with named variants. It deliberately does NOT cover the app's OTHER button families,
// which keep their own primitives: aria-pressed segmented pills (SegmentedToggle/SortControl), the
// Switch toggle, .chip removers, dropdown/popover trigger pills, and slider/overlay/card-click buttons.
//
// No focus-visible here on purpose: @layer base in index.css already rings every <button> for keyboard
// users. Adding one would double the ring.

type ButtonVariant =
  | "primary" // solid accent — the main affirmative action
  | "danger" // solid danger — destructive confirm
  | "outline" // bordered, quiet — secondary action (Full history, Subscribe, Cancel-with-border)
  | "outline-accent" // bordered + accent-tinted — an affirmative secondary (Activate, Approve)
  | "outline-danger" // neutral at rest, danger on hover — the row-level Delete icon
  | "outline-warn" // bordered + warn-tinted — a reversible restriction that is currently ON
  | "ghost" // borderless, hover-fill — tertiary/dismiss (dialog Cancel, close)
  | "glass" // glass card — the Plex/overlay action buttons
  | "danger-soft" // bordered AND danger-coloured at rest — a destructive action that shouldn't shout
  | "link"; // inline text link — "Show all", "Learn more", a resend-mail prompt inside a sentence

type ButtonSize =
  | "xs" // dense inline action
  | "sm" // the btnCls geometry (px-3 py-1.5)
  | "md" // default action button (px-3 py-2)
  | "lg" // prominent CTA
  | "icon" // square icon-only (w-9 h-9)
  | "icon-sm" // square icon-only, dense (w-8 h-8) — toolbars and table rows
  | "none"; // no padding/radius of its own — the `link` variant's default

const VARIANTS: Record<ButtonVariant, string> = {
  // .btn-primary / .btn-danger own the fill + one hover-dim (index.css @layer components).
  primary: "btn-primary",
  danger: "btn-danger",
  // E10 S1b: the neutral variants were RE-AIMED at the paint the app actually uses. Counting the
  // un-migrated call sites showed the majority hovering to `accent` (outline) and filling with `card`
  // (ghost), while this primitive hovered to `fg` and filled with `surface` — so the 37 migrated sites
  // and the ~100 hand-rolled ones had drifted into two different looks. That split IS the
  // inconsistency this epic exists to remove; the primitive follows the majority, not the reverse.
  outline: "border border-border text-muted hover:text-accent hover:border-accent",
  "outline-accent": "border border-accent/40 text-accent hover:bg-accent/10",
  // Neutral until you reach for it. NOT `danger-soft`, which is already red at rest — the difference
  // is whether the button should advertise the destruction before the pointer arrives.
  "outline-danger": "border border-border text-muted hover:text-danger hover:border-danger/40",
  "outline-warn": "border border-warn/40 text-warn hover:bg-warn/10",
  ghost: "text-muted hover:text-fg hover:bg-card",
  glass: "glass-card glass-hover hover:text-accent",
  "danger-soft": "border border-danger/60 text-danger hover:bg-danger/10 hover:border-danger",
  // No font-weight here on purpose: BASE already sets font-medium, and a second font-* utility would
  // be a coin-flip (both are single-class utilities of equal specificity, and without tailwind-merge
  // the winner is decided by the generated stylesheet order, not by the class list order).
  link: "text-accent hover:underline",
};

const SIZES: Record<ButtonSize, string> = {
  xs: "px-2 py-1 text-xs rounded-md gap-1",
  sm: "px-3 py-1.5 text-sm rounded-lg gap-1.5",
  md: "px-3 py-2 text-sm rounded-lg gap-1.5",
  lg: "px-4 py-2.5 text-base rounded-lg gap-2",
  icon: "w-9 h-9 rounded-lg justify-center",
  "icon-sm": "w-8 h-8 rounded-lg justify-center",
  none: "gap-1.5",
};

const BASE =
  "inline-flex items-center justify-center font-medium transition disabled:opacity-50 disabled:cursor-not-allowed";

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  /** Defaults to "md", except for `variant="link"`, whose default is "none" (a link owns no padding). */
  size?: ButtonSize;
  /** Leading icon (an lucide element). Replaced by a spinner while `loading`. */
  icon?: ReactNode;
  /** Render only the icon: children are dropped and `label` supplies the accessible name. */
  iconOnly?: boolean;
  /** Accessible name + tooltip — required for `iconOnly`, optional otherwise. */
  label?: string;
  /** Disable + swap the icon for a spinner + mark aria-busy. */
  loading?: boolean;
  fullWidth?: boolean;
}

/** The shared action button. `type` defaults to "button" so it never accidentally submits a form. */
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  {
    variant = "primary",
    size,
    icon,
    iconOnly = false,
    label,
    loading = false,
    fullWidth = false,
    className,
    children,
    disabled,
    type,
    ...rest
  },
  ref,
) {
  // A link must not inherit the action-button padding/radius, so its size default differs. Resolved
  // here rather than by asking every call site to pass `size="none"` alongside `variant="link"` —
  // a pairing everyone would eventually forget, which is how a "link" grows a button's box.
  const resolvedSize: ButtonSize = size ?? (variant === "link" ? "none" : "md");
  const leading = loading ? <Loader2 className="w-4 h-4 animate-spin" /> : icon;
  return (
    <button
      ref={ref}
      type={type ?? "button"}
      // `loading` must always disable (see the prop's contract above), even when a call-site also
      // passes an explicit boolean `disabled` — so `||`, not `??`. With `??`, `disabled={false}`
      // would shadow `loading` and leave the button clickable mid-mutation (double-submit).
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      aria-label={label}
      title={label}
      className={clsx(
        BASE,
        VARIANTS[variant],
        SIZES[resolvedSize],
        fullWidth && "w-full",
        className,
      )}
      {...rest}
    >
      {leading}
      {!iconOnly && children}
    </button>
  );
});