Handle drag and drop of Data dir

Also some general fixes to the data dir picker button.

components/DataDirPicker.tsx

@@ -1,24 +1,32 @@
-import React, { useContext } from "react";
+import React, { useContext, useRef, useState, useEffect } from "react";
 
 import { WorkerPoolContext } from "../lib/WorkerPool";
-import { useAppDispatch } from "../lib/hooks";
-import { clearPlugins, setPending } from "../slices/plugins";
+import { useAppSelector } from "../lib/hooks";
+import { isPlugin, parsePluginFiles } from "../lib/plugins";
 import styles from "../styles/DataDirPicker.module.css";
 
-export const excludedPlugins = [
-  "Skyrim.esm",
-  "Update.esm",
-  "Dawnguard.esm",
-  "HearthFires.esm",
-  "Dragonborn.esm",
-];
-
 type Props = {};
 
 const DataDirPicker: React.FC<Props> = () => {
   const workerPool = useContext(WorkerPoolContext);
-  const dispatch = useAppDispatch();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const plugins = useAppSelector((state) => state.plugins.plugins);
+  const pluginsPending = useAppSelector((state) => state.plugins.pending);
+  const [loading, setLoading] = useState<boolean>(false);
 
+  useEffect(() => {
+    if (pluginsPending === 0 && loading) {
+      setLoading(false);
+    } else if (pluginsPending > 0 && !loading) {
+      setLoading(true);
+    }
+  }, [pluginsPending, loading, setLoading]);
+
+  // It would be nice to open the directory with window.showDirectoryPicker() in supported browsers,
+  // but it does not allow selecting directories under C:\\Program Files and it does not throw any error
+  // that I can catch here when a user tries to select it, so it's basically useless. So instead, I have
+  // to use this non-standard webkitdirectory input attribute that loads all files in a directory instead
+  // of just selecting the directory itself. Yay.
   const onDataDirButtonClick = async (event: {
     target: { files: FileList | null };
   }) => {
@@ -26,47 +34,43 @@ const DataDirPicker: React.FC<Props> = () => {
       return alert("Workers not loaded yet");
     }
     const files = event.target.files ?? [];
-    dispatch(clearPlugins());
     const plugins = [];
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
-      if (
-        file.name.endsWith(".esp") ||
-        file.name.endsWith(".esm") ||
-        file.name.endsWith(".esl")
-      ) {
+      if (isPlugin(file)) {
         plugins.push(file);
       }
     }
-    dispatch(setPending(plugins.length));
-
-    plugins.forEach(async (plugin, index) => {
-      const contents = new Uint8Array(await plugin.arrayBuffer());
-      try {
-        workerPool.pushTask({
-          skipParsing: excludedPlugins.includes(plugin.name),
-          filename: plugin.name,
-          lastModified: plugin.lastModified,
-          contents,
-        });
-      } catch (error) {
-        console.error(error);
-      }
-    });
+    parsePluginFiles(plugins, workerPool);
   };
 
   return (
     <>
       <p className={styles["no-top-margin"]}>
         To see all of the cell edits and conflicts for your current mod load
-        order select your <code>Data</code> directory below to load the plugins.
+        order select or drag-and-drop your <code>Data</code> directory below to
+        load the plugins.
       </p>
       <input
         type="file"
         webkitdirectory=""
         onChange={onDataDirButtonClick}
-        disabled={!workerPool}
+        style={{ display: "none" }}
+        ref={inputRef}
       />
+      {/* input webkitdirectory is buggy, so keep it hidden and control it through a normal button */}
+      <button
+        onClick={() => {
+          if (inputRef.current) {
+            inputRef.current.value = ""; // clear the value so reloading same directory works
+            inputRef.current.click();
+          }
+        }}
+        disabled={!workerPool || loading}
+      >
+        {loading ? "Loading" : plugins.length > 0 ? "Reload" : "Open"} Skyrim
+        Data directory
+      </button>
     </>
   );
 };

components/PluginsList.tsx

@@ -2,9 +2,9 @@ import Link from "next/link";
 import React from "react";
 
 import { useAppSelector, useAppDispatch } from "../lib/hooks";
+import { excludedPlugins } from "../lib/plugins";
 import { togglePlugin } from "../slices/plugins";
 import styles from "../styles/PluginList.module.css";
-import { excludedPlugins } from "./DataDirPicker";
 
 type Props = {};