fredy/ui/src/components/listings/StatusControl.jsx

/*
 * Copyright (c) 2026 by Christian Kellner.
 * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
 */

import { Dropdown, Button, Tooltip } from '@douyinfe/semi-ui-19';
import { IconChevronDown } from '@douyinfe/semi-icons';

import './StatusControl.less';

const STATUS_TOOLTIP =
  'Track where you stand with this listing: Applied once you have reached out, Rejected if it did not work out, or Accepted if you got it.';

/**
 * @typedef {('applied'|'rejected'|'accepted'|null)} ListingStatus
 */

const STATUS_OPTIONS = [
  { value: null, label: 'None' },
  { value: 'applied', label: 'Applied' },
  { value: 'rejected', label: 'Rejected' },
  { value: 'accepted', label: 'Accepted' },
];

/**
 * Look up the option metadata for a status value.
 * @param {ListingStatus} status
 */
const optionFor = (status) => STATUS_OPTIONS.find((o) => o.value === status) ?? STATUS_OPTIONS[0];

/**
 * Shared control for setting a listing's user-decision status
 * (Applied / Rejected / Accepted).
 *
 * Both compact (table/grid rows) and full (listing detail header) modes
 * render a Button that picks up the project's CI tokens via the
 * .status-btn classes, with a small size variant for compact contexts.
 *
 * @param {Object} props
 * @param {ListingStatus} props.status - The current status value.
 * @param {(next: ListingStatus) => void} props.onChange - Called with the new status when the user picks one.
 * @param {boolean} [props.compact=false] - When true, renders smaller for table/grid rows; full size otherwise.
 * @param {(e: React.MouseEvent) => void} [props.onTriggerClick] - Optional click handler to stop propagation on the trigger.
 */
export default function StatusControl({ status = null, onChange, compact = false, onTriggerClick }) {
  const current = optionFor(status);

  const handlePick = (next) => {
    if (next === status) return;
    onChange?.(next);
  };

  const menu = (
    <Dropdown.Menu>
      {STATUS_OPTIONS.map((opt) => (
        <Dropdown.Item
          key={opt.value ?? '__none__'}
          active={opt.value === status}
          onClick={() => handlePick(opt.value)}
        >
          {opt.label}
        </Dropdown.Item>
      ))}
    </Dropdown.Menu>
  );

  const className = ['status-btn', compact ? 'status-btn--compact' : null, status ? `status-btn--${status}` : null]
    .filter(Boolean)
    .join(' ');

  const trigger = (
    <Tooltip content={STATUS_TOOLTIP} position="top" trigger="hover">
      <Button
        size={compact ? 'small' : 'default'}
        theme="borderless"
        icon={<IconChevronDown />}
        iconPosition="right"
        onClick={(e) => onTriggerClick?.(e)}
        className={className}
      >
        {status ? current.label : 'Status'}
      </Button>
    </Tooltip>
  );

  return (
    <Dropdown trigger="click" position="bottomLeft" render={menu} stopPropagation>
      {trigger}
    </Dropdown>
  );
}