Function AlgorithmControls

src/components/panels/AlgorithmControls.tsx:19–88

({ pattern, setPattern, threshold, setThreshold, invert, setInvert, paletteId, asciiRamp, setAsciiRamp, groupByCategory })

}

export const AlgorithmControls: React.FC<AlgorithmControlsProps> = ({ pattern, setPattern, threshold, setThreshold, invert, setInvert, paletteId, asciiRamp, setAsciiRamp, groupByCategory }) => {
  const { t } = useTranslation();
  const algo = algorithms.find((a) => a.id === pattern);
  const supportsThreshold = !!algo?.supportsThreshold;
  const isAscii = pattern === 25 || (algo?.name.toLowerCase().includes('ascii'));

  const renderOptions = () => {
    if (!groupByCategory) {
      return algorithms.map((a) => (
        <option key={a.id} value={a.id}>
          {a.name}
        </option>
      ));
    }
    const groups = getAlgorithmsByCategory();
    const order: ["Error Diffusion", "Ordered", "Other"] = ["Error Diffusion", "Ordered", "Other"];
    return order.map((cat) => {
      const list = groups[cat];
      if (!list) return null;
      const labelKey = cat === 'Error Diffusion' ? 'tool.algorithmPanel.errorDiffusion' : cat === 'Ordered' ? 'tool.algorithmPanel.ordered' : 'tool.algorithmPanel.other';
      return (
        <optgroup key={cat} label={t(labelKey)}>
          {list.map((a) => (
            <option key={a.id} value={a.id}>
              {a.name}
            </option>
          ))}
        </optgroup>
      );
    });
  };

  return (
  <div className="space-y-3">
      <div>
        <label htmlFor="algo-select" className="sr-only">
          {t('tool.algorithmPanel.title')}
        </label>
        <select id="algo-select" className="clean-input" value={pattern} onChange={(e) => setPattern(Number(e.target.value))}>
          {renderOptions()}
        </select>
      </div>
      {supportsThreshold && (
        <div className="space-y-1">
          <div className="flex items-center justify-between">
            <span className="font-mono text-[10px] tracking-wide text-gray-400">{t('tool.algorithmPanel.luminanceThreshold')}</span>
            <span className="text-[10px] text-gray-500">{threshold}</span>
          </div>
          <input type="range" min={0} max={255} value={threshold} className="clean-range" onChange={(e) => setThreshold(Number(e.target.value))} aria-label={t('tool.algorithmPanel.threshold')} />
        </div>
      )}
      <div className="grid grid-cols-1 gap-2">
        <button type="button" onClick={() => !paletteId && setInvert((v: boolean) => !v)} disabled={!!paletteId} className={`clean-btn justify-center text-[10px] ${invert ? "border-blue-600 text-blue-400" : ""} ${paletteId ? "cursor-not-allowed opacity-40" : ""}`}>
          {t('tool.algorithmPanel.invert')}
        </button>
      </div>
      {isAscii && setAsciiRamp && (
        <div className="space-y-1">