Function QuestionsTable

src/components/questions/QuestionsTable.tsx:422–1162

({ data, updatedDate }: { data: Question[]; updatedDate: string })

}

export default function QuestionsTable({ data, updatedDate }: { data: Question[]; updatedDate: string }) {
  const isMobile = useIsMobile();
  const searchParams = useSearchParams();
  const { syncNow, syncVersion } = useAuth();

  const [sorting, setSorting] = useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(() =>
    parseInitialFilters(searchParams)
  );
  const [globalFilter, setGlobalFilter] = useState(
    () => searchParams.get("q") ?? ""
  );
  const [completed, setCompleted] = useState<Set<number>>(new Set());
  const [starred, setStarred] = useState<Set<number>>(new Set());
  const [shuffleOrder, setShuffleOrder] = useState<number[] | null>(null);
  const [notes, setNotes] = useState<Record<number, string>>({});
  const [solvedDates, setSolvedDates] = useState<Record<number, string>>({});
  const [reminders, setReminders] = useState<Record<number, Reminder>>({});
  const [migrationToast, setMigrationToast] = useState<string | null>(null);
  const [toastFading, setToastFading] = useState(false);
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    const migrated = migrateLegacyProgress(data);
    setCompleted(migrated ?? loadCompleted());
    if (migrated) {
      setMigrationToast(`Migrated ${migrated.size} completed question${migrated.size === 1 ? "" : "s"} from V1`);
    }
    setStarred(loadStarred());
    setShuffleOrder(loadShuffleOrder());
    setNotes(loadNotes());
    setSolvedDates(loadSolvedDates());
    setReminders(loadReminders());
    setHydrated(true);
  }, [data]);

  // Reload from localStorage when remote sync arrives
  useEffect(() => {
    if (!hydrated || syncVersion === 0) return;
    setCompleted(loadCompleted());
    setStarred(loadStarred());
    setNotes(loadNotes());
    setSolvedDates(loadSolvedDates());
    setReminders(loadReminders());
  }, [syncVersion, hydrated]);

  useEffect(() => {
    if (!migrationToast) return;
    const fadeTimer = setTimeout(() => setToastFading(true), 2500);
    const removeTimer = setTimeout(() => { setMigrationToast(null); setToastFading(false); }, 3200);
    return () => { clearTimeout(fadeTimer); clearTimeout(removeTimer); };
  }, [migrationToast]);

  useEffect(() => {
    const params = new URLSearchParams();
    if (globalFilter) params.set("q", globalFilter);
    const difficulty = columnFilters.find((f) => f.id === "difficulty")?.value as string[] | undefined;
    if (difficulty?.length) params.set("difficulty", difficulty.join(","));