Function TVChannelGuide

frontend/src/pages/Guide.jsx:93–1520

({ startDate, endDate })

import ErrorBoundary from '../components/ErrorBoundary.jsx';

export default function TVChannelGuide({ startDate, endDate }) {
  const [isChannelsLoading, setIsChannelsLoading] = useState(false);
  const [allowAllGroups, setAllowAllGroups] = useState(true);
  const MAX_ALL_CHANNELS = 99999;

  const recordings = useChannelsStore((s) => s.recordings);
  const channelGroups = useChannelsStore((s) => s.channelGroups);
  const profiles = useChannelsStore((s) => s.profiles);
  const [isProgramsLoading, setIsProgramsLoading] = useState(true);
  const logos = useLogosStore((s) => s.logos);

  const tvgsById = useEPGsStore((s) => s.tvgsById);
  const epgs = useEPGsStore((s) => s.epgs);

  const [programs, setPrograms] = useState([]);
  const [guideChannels, setGuideChannels] = useState([]);
  const [now, setNow] = useState(getNow());
  const [selectedProgram, setSelectedProgram] = useState(null);
  const [selectedChannel, setSelectedChannel] = useState(null);
  const [recordingForProgram, setRecordingForProgram] = useState(null);
  const [recordChoiceOpen, setRecordChoiceOpen] = useState(false);
  const [recordChoiceProgram, setRecordChoiceProgram] = useState(null);
  const [recordChoiceChannel, setRecordChoiceChannel] = useState(null);
  const [existingRuleMode, setExistingRuleMode] = useState(null);
  const [existingRule, setExistingRule] = useState(null);
  const [rulesOpen, setRulesOpen] = useState(false);
  const [rules, setRules] = useState([]);
  const [initialScrollComplete, setInitialScrollComplete] = useState(false);

  // New filter states
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedGroupId, setSelectedGroupId] = useState('all');
  const [selectedProfileId, setSelectedProfileId] = useState('all');

  const env_mode = useSettingsStore((s) => s.environment.env_mode);

  const guideRef = useRef(null);
  const timelineRef = useRef(null); // New ref for timeline scrolling
  const listRef = useRef(null);
  const tvGuideRef = useRef(null); // Ref for the main tv-guide wrapper
  const isSyncingScroll = useRef(false);
  const guideScrollLeftRef = useRef(0);
  const nowLineRef = useRef(null);
  const [settledScrollLeft, setSettledScrollLeft] = useState(0);
  const scrollDebounceRef = useRef(null);
  const {
    ref: guideContainerRef,
    width: guideWidth,
    height: guideHeight,
  } = useElementSize();

  // Decide if 'All Channel Groups' should be enabled (based on total channel count)
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const params = new URLSearchParams();
        const ids = await API.getAllChannelIds(params);