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

// PaneEmpty — unified empty-state for any list pane or detail column.
//
// Replaces the scatter of `.pane-empty` blocks across panes with a
// consistent structure: title (one short line), an optional descriptive
// hint, and an optional primary action.
//
// The visual treatment is deliberately quiet so empty states don't shout.

"use client";

import type { ReactNode } from "react";

interface PaneEmptyProps {
  /** Short headline (≤8 words). */
  title: string;
  /** Optional secondary copy. Accepts ReactNode so callers can embed a
   *  link or a kbd tag inline. */
  hint?: ReactNode;
  /** Optional primary action button (e.g. "Run Analyze →"). */
  action?: { label: string; onClick: () => void; disabled?: boolean };
  /** Optional decorative icon — kept tiny, no SVG dependency. */
  icon?: ReactNode;
}

export function PaneEmpty({ title, hint, action, icon }: PaneEmptyProps) {
  return (
    <div className="pane-empty-v2" role="status">
      {icon ? <div className="pane-empty-icon">{icon}</div> : null}
      <div className="pane-empty-title">{title}</div>
      {hint ? <div className="pane-empty-hint">{hint}</div> : null}
      {action ? (
        <button
          type="button"
          className="pane-empty-action"
          onClick={action.onClick}
          disabled={action.disabled}
        >
          {action.label}
        </button>
      ) : null}
    </div>
  );
}