Function RecordingModal

frontend/src/components/forms/Recording.jsx:39–346

({
  recording = null,
  channel = null,
  isOpen,
  onClose,
})

} from '../../utils/forms/RecordingUtils.js';

const RecordingModal = ({
  recording = null,
  channel = null,
  isOpen,
  onClose,
}) => {
  const fetchRecordings = useChannelsStore((s) => s.fetchRecordings);
  const fetchRecurringRules = useChannelsStore((s) => s.fetchRecurringRules);

  // All channels loaded via lightweight summary API
  const [allChannels, setAllChannels] = useState([]);
  const [isChannelsLoading, setIsChannelsLoading] = useState(false);

  const [mode, setMode] = useState('single');
  const [submitting, setSubmitting] = useState(false);

  const singleForm = useForm({
    mode: 'controlled',
    initialValues: getSingleFormDefaults(recording, channel),
    validate: singleFormValidators,
  });

  const recurringForm = useForm({
    mode: 'controlled',
    validateInputOnChange: false,
    validateInputOnBlur: true,
    initialValues: getRecurringFormDefaults(channel),
    validate: recurringFormValidators,
  });

  useEffect(() => {
    if (!isOpen) return;

    if (recording?.id) {
      setMode('single');
      singleForm.setValues(getSingleFormDefaults(recording, channel));
    } else {
      singleForm.setValues(getSingleFormDefaults(null, channel));
      recurringForm.setValues(getRecurringFormDefaults(channel));
      setMode('single');
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen, recording, channel]);

  // Load all channels via lightweight summary API when modal opens
  useEffect(() => {
    let cancelled = false;
    const run = async () => {
      if (!isOpen) return;
      try {
        setIsChannelsLoading(true);
        const chans = await getChannelsSummary();
        if (cancelled) return;
        setAllChannels(Array.isArray(chans) ? chans : []);
      } catch (e) {
        console.warn('Failed to load channels for recording form', e);
        if (!cancelled) setAllChannels([]);
      } finally {