Function RoadmapView

src/components/roadmaps/RoadmapView.tsx:62–882

({ roadmap, questions }: Props)

}

export default function RoadmapView({ roadmap, questions }: Props) {
  const { syncNow, syncVersion } = useAuth();
  const slugToQuestion = useMemo(() => {
    const map = new Map<string, Question>();
    questions.forEach((q) => map.set(q.slug, q));
    return map;
  }, [questions]);

  const [completed, setCompleted] = useState<Set<number>>(new Set());
  const [starred, setStarred] = useState<Set<number>>(new Set());
  const [notes, setNotes] = useState<Record<number, string>>({});
  const [, setSolvedDates] = useState<Record<number, string>>({});
  const [, setReminders] = useState<Record<number, Reminder>>({});
  const [collapsedPhases, setCollapsedPhases] = useState<Set<string | number>>(
    new Set()
  );
  const [expandedHints, setExpandedHints] = useState<Set<string>>(new Set());
  const [editingNote, setEditingNote] = useState<{
    id: number;
    title: string;
    draft: string;
    confirmDiscard: boolean;
  } | null>(null);

  useEffect(() => {
    setCompleted(loadCompleted());
    setStarred(loadStarred());
    setNotes(loadNotes());
    setSolvedDates(loadSolvedDates());
    setReminders(loadReminders());
  }, []);

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

  const toggleCompleted = useCallback((id: number) => {
    let completing = false;
    setCompleted((prev) => {
      const next = new Set(prev);
      completing = !next.has(id);
      if (completing) next.add(id);
      else next.delete(id);
      saveCompleted(next);
      trackEvent("question_toggle", {
        question_id: id,
        completed: completing,
      });
      return next;
    });
    setSolvedDates((prev) => {
      const next = { ...prev };