Socrates/apps/web/components/editor/PaneControls.tsx

// Shared pane-header controls. Two primitives:
//
//  - <PaneViewTabs/> — segmented control for VIEW MODES that are mutually
//    exclusive (Tree | A–Z, Diagram | Summary). Always exactly one active.
//
//  - <PaneFilterChip/> — toggleable filter chip with an optional count pip.
//    Use for filters like "Pending" that overlay the current view mode
//    rather than replacing it. Disabled when count=0.
//
// The intent is to stop mixing "view mode" and "filter" in the same
// pane-tabs cluster, which currently makes "Pending" feel like a third
// view mode instead of a filter you can stack on Tree or A–Z.

"use client";

import type { ReactNode } from "react";

// ─── PaneViewTabs ────────────────────────────────────────────────────────

export interface PaneViewTab<V extends string> {
  value: V;
  label: ReactNode;
  /** Optional tooltip. */
  title?: string;
}

interface PaneViewTabsProps<V extends string> {
  value: V;
  onChange: (v: V) => void;
  tabs: PaneViewTab<V>[];
  /** ARIA label for the segmented group. */
  ariaLabel?: string;
}

export function PaneViewTabs<V extends string>({
  value,
  onChange,
  tabs,
  ariaLabel = "View mode",
}: PaneViewTabsProps<V>) {
  return (
    <div className="pane-view-tabs" role="tablist" aria-label={ariaLabel}>
      {tabs.map(t => (
        <button
          key={t.value}
          type="button"
          role="tab"
          aria-selected={value === t.value}
          className={`pane-view-tab ${value === t.value ? "pane-view-tab-active" : ""}`}
          onClick={() => onChange(t.value)}
          title={t.title}
        >
          {t.label}
        </button>
      ))}
    </div>
  );
}

// ─── PaneFilterChip ──────────────────────────────────────────────────────

interface PaneFilterChipProps {
  /** Whether the filter is currently applied. */
  active: boolean;
  onToggle: () => void;
  label: string;
  /** Optional count to render as a pip (e.g. number of pending items).
   *  When 0 (or undefined), the chip is disabled. */
  count?: number;
  title?: string;
}

export function PaneFilterChip({
  active,
  onToggle,
  label,
  count,
  title,
}: PaneFilterChipProps) {
  const hasCount = typeof count === "number" && count > 0;
  const disabled = typeof count === "number" && count === 0;
  return (
    <button
      type="button"
      className={`pane-filter-chip ${active ? "pane-filter-chip-active" : ""} ${
        hasCount ? "pane-filter-chip-attention" : ""
      }`}
      onClick={onToggle}
      title={title}
      disabled={disabled}
      aria-pressed={active}
    >
      <span className="pane-filter-chip-label">{label}</span>
      {hasCount ? <span className="pane-filter-chip-pip">{count}</span> : null}
    </button>
  );
}