Handle drag and drop of Data dir

Also some general fixes to the data dir picker button.

pages/index.tsx

@@ -5,6 +5,7 @@ import "mapbox-gl/dist/mapbox-gl.css";
 
 import Map from "../components/Map";
 import { useAppDispatch } from "../lib/hooks";
+import { isPlugin, isPluginPath, parsePluginFiles } from "../lib/plugins";
 import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
 import { WorkerPool, WorkerPoolContext } from "../lib/WorkerPool";
 
@@ -94,9 +95,109 @@ const Home: NextPage = () => {
             evt.preventDefault();
 
             if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
-              const file = evt.dataTransfer.items[0].getAsFile();
-              if (file) {
-                dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+              const item = evt.dataTransfer.items[0];
+              if (item.kind === "file") {
+                // Gotta love all these competing web file system standards...
+                if (
+                  (
+                    item as DataTransferItem & {
+                      getAsFileSystemHandle?: () => Promise<FileSystemHandle>;
+                    }
+                  ).getAsFileSystemHandle
+                ) {
+                  const entry = await (
+                    item as DataTransferItem & {
+                      getAsFileSystemHandle: () => Promise<FileSystemHandle>;
+                    }
+                  ).getAsFileSystemHandle();
+                  if (entry.kind === "file") {
+                    const file = await (
+                      entry as FileSystemFileHandle
+                    ).getFile();
+                    dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+                    return;
+                  } else if (entry.kind === "directory") {
+                    const plugins: { getFile: () => Promise<File> }[] = [];
+                    const values = (
+                      entry as FileSystemDirectoryHandle & { values: any }
+                    ).values();
+                    // I'm scared of yield and generators so I'm just going to do a lame while loop
+                    while (true) {
+                      const next = await values.next();
+                      if (next.done) {
+                        break;
+                      }
+                      if (
+                        next.value.kind == "file" &&
+                        isPluginPath(next.value.name)
+                      ) {
+                        plugins.push(next.value);
+                      }
+                    }
+                    const pluginFiles = await Promise.all(
+                      plugins.map(async (plugin) => plugin.getFile())
+                    );
+                    if (workerPool) {
+                      parsePluginFiles(pluginFiles, workerPool);
+                    } else {
+                      alert("Workers not loaded yet");
+                    }
+                  }
+                } else if (
+                  (
+                    item as DataTransferItem & {
+                      webkitGetAsEntry?: FileSystemEntry | null;
+                    }
+                  ).webkitGetAsEntry
+                ) {
+                  const entry = item.webkitGetAsEntry();
+                  if (entry?.isFile) {
+                    (entry as FileSystemFileEntry).file(async (file) => {
+                      dispatch(
+                        setPluginsTxtAndApplyLoadOrder(await file.text())
+                      );
+                    });
+                  } else if (entry?.isDirectory) {
+                    const reader = (
+                      entry as FileSystemDirectoryEntry
+                    ).createReader();
+                    const plugins = await new Promise<FileSystemFileEntry[]>(
+                      (resolve, reject) => {
+                        const plugins: FileSystemFileEntry[] = [];
+                        reader.readEntries((entries) => {
+                          entries.forEach((entry) => {
+                            if (entry?.isFile && isPluginPath(entry.name)) {
+                              plugins.push(entry as FileSystemFileEntry);
+                            }
+                          });
+                          resolve(plugins);
+                        }, reject);
+                      }
+                    );
+                    const pluginFiles = await Promise.all(
+                      plugins.map(
+                        (plugin) =>
+                          new Promise<File>((resolve, reject) =>
+                            plugin.file((file) => resolve(file), reject)
+                          )
+                      )
+                    );
+                    if (workerPool) {
+                      parsePluginFiles(pluginFiles, workerPool);
+                    } else {
+                      alert("Workers not loaded yet");
+                    }
+                  }
+                } else {
+                  const file = item.getAsFile();
+                  if (file) {
+                    dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+                  }
+                }
+              } else if (item.kind === "string") {
+                item.getAsString((str) => {
+                  dispatch(setPluginsTxtAndApplyLoadOrder(str));
+                });
               }
             }
           }}