aurora-curator/src/components/Icons.tsx

// Small line-icon set for the sidebar panels. The original app used bitmap icon
// resources (ResourceManager.getIcon("panel.rename") etc.) that aren't available to
// port directly, so these are fresh SVGs matching the same one-glyph-per-panel idea.
import type { SVGProps } from "react";

const base: SVGProps<SVGSVGElement> = {
  width: 18,
  height: 18,
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.8,
  strokeLinecap: "round",
  strokeLinejoin: "round",
};

export function RenameIcon() {
  return (
    <svg {...base}>
      <path d="M4 7h9l3 3-3 3H4z" />
      <path d="M20 17h-9l-3-3 3-3h9" />
    </svg>
  );
}

export function EpisodesIcon() {
  return (
    <svg {...base}>
      <rect x="3.5" y="5" width="17" height="15" rx="2" />
      <path d="M3.5 9.5h17M8 3v4M16 3v4" />
    </svg>
  );
}

export function SubtitlesIcon() {
  return (
    <svg {...base}>
      <rect x="3" y="5.5" width="18" height="13" rx="2" />
      <path d="M7 14h4M13 14h4M7 10.5h10" />
    </svg>
  );
}

export function SfvIcon() {
  return (
    <svg {...base}>
      <path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  );
}

export function FilterIcon() {
  return (
    <svg {...base}>
      <path d="M4 5h16l-6 7.5V19l-4 2v-8.5z" />
    </svg>
  );
}

export function ListIcon() {
  return (
    <svg {...base}>
      <path d="M8 6h12M8 12h12M8 18h12" />
      <circle cx="4" cy="6" r="1.2" fill="currentColor" stroke="none" />
      <circle cx="4" cy="12" r="1.2" fill="currentColor" stroke="none" />
      <circle cx="4" cy="18" r="1.2" fill="currentColor" stroke="none" />
    </svg>
  );
}

export function GearIcon() {
  return (
    <svg {...{ ...base, width: 16, height: 16 }}>
      <circle cx="12" cy="12" r="3" />
      <path d="M12 3v2.5M12 18.5V21M21 12h-2.5M5.5 12H3M18.4 5.6l-1.8 1.8M7.4 16.6l-1.8 1.8M18.4 18.4l-1.8-1.8M7.4 7.4 5.6 5.6" />
    </svg>
  );
}

export function LoadIcon() {
  return (
    <svg {...{ ...base, width: 15, height: 15 }}>
      <path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3M12 3v12M7 10l5 5 5-5" />
    </svg>
  );
}

export function UpIcon() {
  return (
    <svg {...{ ...base, width: 13, height: 13 }}>
      <path d="M6 15l6-6 6 6" />
    </svg>
  );
}

export function DownIcon() {
  return (
    <svg {...{ ...base, width: 13, height: 13 }}>
      <path d="M6 9l6 6 6-6" />
    </svg>
  );
}

export function RemoveIcon() {
  return (
    <svg {...{ ...base, width: 15, height: 15 }}>
      <path d="M5 5l14 14M19 5L5 19" />
    </svg>
  );
}

export function ClearIcon() {
  return (
    <svg {...{ ...base, width: 15, height: 15 }}>
      <path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12" />
    </svg>
  );
}

export function HistoryIcon() {
  return (
    <svg {...{ ...base, width: 15, height: 15 }}>
      <path d="M4 12a8 8 0 1 0 2.6-5.9" />
      <path d="M4 4v4h4M12 8v4l3 2" />
    </svg>
  );
}

export function PresetsIcon() {
  return (
    <svg {...{ ...base, width: 15, height: 15 }}>
      <path d="M4 6h16M4 12h10M4 18h7" />
      <circle cx="19" cy="15" r="2.5" />
    </svg>
  );
}

export function FetchIcon() {
  return (
    <svg {...{ ...base, width: 15, height: 15 }}>
      <circle cx="11" cy="11" r="6.5" />
      <path d="M20 20l-4.3-4.3" />
    </svg>
  );
}

export function KeyIcon() {
  return (
    <svg {...{ ...base, width: 15, height: 15 }}>
      <circle cx="8" cy="15" r="4" />
      <path d="M11 12l9-9M16 5l3 3M13 8l3 3" />
    </svg>
  );
}