Function DropZone

src/components/dropzone/DropZone.tsx:24–299

({ children }: DropZoneProps)

}

export function DropZone({ children }: DropZoneProps) {
  const [isDragOver, setIsDragOver] = useState(false);
  const [isPanelDismissed, setIsPanelDismissed] = useState(false);
  const [isUrlModalOpen, setIsUrlModalOpen] = useState(false);
  const { handleDrop, handleDragOver, handleBrowse } = useFileDropzone();
  const { loadFromUrl, loadFromManifest, urlLoading, urlProgress, setUrlLoading, setUrlProgress } = useUrlLoader();
  const {
    data: {
      error,
      reconstruction,
      touchMode,
      hasUrlLoadRequest,
    },
    actions: {
      setError,
    },
  } = useDropZoneStoreFacade();
  const configInputRef = useRef<HTMLInputElement>(null);
  const manifestInputRef = useRef<HTMLInputElement>(null);
  const isMobile = useIsMobile();

  // Handle URL loading from modal
  const handleUrlLoad = useCallback(async (url: string) => {
    // Set loading state IMMEDIATELY so UI responds instantly
    setUrlLoading(true);
    setUrlProgress({ percent: 0, message: 'Starting...' });
    setIsUrlModalOpen(false);
    // Yield to React to paint loading UI before starting heavy work
    await new Promise(resolve => setTimeout(resolve, 0));
    await loadFromUrl(url);
  }, [loadFromUrl, setUrlLoading, setUrlProgress]);

  // Handle manifest JSON file selection
  const handleManifestFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    // Set loading state IMMEDIATELY so UI responds instantly
    setUrlLoading(true);
    setUrlProgress({ percent: 0, message: 'Loading manifest...' });
    // Yield to React to paint loading UI before starting heavy work
    await new Promise(resolve => setTimeout(resolve, 0));

    try {
      const result = parseManifestContent(await file.text());
      if (!result.success) {
        setError(result.errorMessage);
        setUrlLoading(false);
        return;
      }

      await loadFromManifest(result.manifest);
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Unknown error';
      setError(`Failed to load manifest: ${message}`);
      setUrlLoading(false);
    }