Static size, move into SaveSelector view, invalidity state, drag event prop intake

src-tauri/tauri.conf.json

@@ -13,8 +13,9 @@
     "windows": [
       {
         "title": "Factorio Achievements Fixer",
-        "width": 800,
-        "height": 600
+        "width": 450,
+        "height": 650,
+        "resizable": false
       }
     ],
     "security": {

src/App.tsx

@@ -1,52 +1,10 @@
-import { invoke } from "@tauri-apps/api/core";
 import "./App.css";
-
-import DragAndDrop from "./components/DragAndDrop";
-import { useEffect, useState } from "preact/hooks";
-import { FolderIcon } from "@heroicons/react/20/solid";
-
-type SaveFile = {
-  name: string;
-  path: string;
-  size: string;
-};
+import SaveSelector from "./views/SaveSelector";
 
 function App() {
-  const [saveFiles, setSaveFiles] = useState<SaveFile[]>([]);
-
-  useEffect(() => {
-    // On startup, find all save files and list them for easy selection
-    invoke<SaveFile[]>("find_save_files").then((files) => {
-      setSaveFiles(files);
-    });
-  }, []);
-
   return (
-    <main class="h-[100vh] w-[100vw] bg-zinc-800 p-4">
-      <DragAndDrop className="mr-1.5 bg-red-500!" onFile={() => {}} />
-      <div className="max-h-[50vh] mt-2.5 overflow-y-auto pr-1.5">
-        {saveFiles.map((file) => {
-          return (
-            <div
-              class="flex items-center justify-between p-1 bg-zinc-700 rounded-lg mb-2 hover:bg-zinc-600 group"
-              title={file.path}
-            >
-              <div class="flex items-center">
-                <FolderIcon class="w-6 h-6 text-zinc-400 ml-0.5 mt-0.5 mr-1.5" />
-                <div>
-                  <p class="text-zinc-400">
-                    <span class="text-sm font-semibold text-zinc-100">
-                      {file.name}
-                    </span>
-                    {"  "}
-                    <span className="text-sm">({file.size})</span>
-                  </p>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
+    <main class="h-[100vh] w-[100vw] bg-zinc-800 p-4 flex flex-col">
+      <SaveSelector />
     </main>
   );
 }

src/components/DragAndDrop.tsx

@@ -1,26 +1,39 @@
 import { useEffect, useState } from "preact/hooks";
+import { exists } from "@tauri-apps/plugin-fs";
 import { listen } from "@tauri-apps/api/event";
 import { open } from "@tauri-apps/plugin-dialog";
 import { FolderArrowDownIcon } from "@heroicons/react/24/outline";
 import { cn } from "../utils";
 import { invoke } from "@tauri-apps/api/core";
 import Monoblock from "./Monoblock";
+import { DragDropEvent } from "@tauri-apps/api/webview";
 
 interface DragAndDropProps {
   className?: string;
   onFile: (path: string) => void;
 }
 
+type HoverState = "off" | "valid" | "invalid";
+
 export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
-  const [isHovering, setIsHovering] = useState(false);
+  const [isHovering, setIsHovering] = useState<HoverState>("off");
+
+  async function isValid(paths: string[]): Promise<boolean> {
+    console.log({ paths });
+    return paths.length === 1 && paths[0].endsWith(".zip") && exists(paths[0]);
+  }
 
   useEffect(() => {
-    const unlistenEnter = listen("tauri://drag-enter", () => {
-      setIsHovering(true);
-    }).then((fn) => fn);
+    const unlistenEnter = listen<DragDropEvent & { type: "enter" }>(
+      "tauri://drag-enter",
+      async (event) => {
+        if (await isValid(event.payload.paths)) setIsHovering("valid");
+        else setIsHovering("invalid");
+      }
+    ).then((fn) => fn);
 
     const unlistenLeave = listen("tauri://drag-leave", () => {
-      setIsHovering(false);
+      setIsHovering("off");
     }).then((fn) => fn);
 
     return () => {
@@ -57,7 +70,16 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
       onClick={onClick}
       className={cn(className, "flex items-center justify-center w-full")}
     >
-      <label className="flex flex-col items-center justify-center w-full h-64 border-2 border-zinc-300 border-dashed rounded-lg cursor-pointer bg-zinc-50 dark:hover:bg-zinc-800 dark:bg-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:hover:border-zinc-500 dark:hover:bg-zinc-600">
+      <label
+        className={cn(
+          "flex flex-col items-center justify-center w-full h-64 border-2  border-dashed rounded-lg cursor-pointer  bg-zinc-700 border-zinc-600",
+          {
+            "hover:bg-zinc-800  hover:border-zinc-500": isHovering === "off",
+            "bg-zinc-800 border-zinc-500": isHovering === "valid",
+            "bg-red-800/25 border-red-700/25": isHovering === "invalid",
+          }
+        )}
+      >
         <div className="flex flex-col items-center justify-center pt-5 pb-6">
           <FolderArrowDownIcon className="w-8 h-8 mb-4 text-zinc-500 dark:text-zinc-400" />
           <p className="mb-2 text-sm text-zinc-500 dark:text-zinc-400">

src/components/Monoblock.tsx

@@ -8,13 +8,13 @@ interface MonoblockProps {
 
 export default function Monoblock({ className, children }: MonoblockProps) {
   return (
-    <div
+    <span
       className={cn(
         "inline-block border-zinc-500 px-0.5 border bg-zinc-800 rounded",
         className
       )}
     >
       {children}
-    </div>
+    </span>
   );
 }

src/views/SaveSelector.tsx

@@ -0,0 +1,50 @@
+import { invoke } from "@tauri-apps/api/core";
+import DragAndDrop from "../components/DragAndDrop";
+import { useEffect, useState } from "preact/hooks";
+import { FolderIcon } from "@heroicons/react/20/solid";
+
+type SaveFile = {
+  name: string;
+  path: string;
+  size: string;
+};
+
+export default function SaveSelector() {
+  const [saveFiles, setSaveFiles] = useState<SaveFile[]>([]);
+
+  useEffect(() => {
+    // On startup, find all save files and list them for easy selection
+    invoke<SaveFile[]>("find_save_files").then((files) => {
+      setSaveFiles(files);
+    });
+  }, []);
+
+  return (
+    <>
+      <DragAndDrop className="mr-1.5 bg-red-500!" onFile={() => {}} />
+      <div className="mt-2.5 overflow-y-auto pr-1.5">
+        {saveFiles.map((file) => {
+          return (
+            <div
+              class="flex items-center justify-between p-1 bg-zinc-700 rounded-lg mb-2 hover:bg-zinc-600 group"
+              title={file.path}
+            >
+              <div class="flex items-center">
+                <FolderIcon class="w-6 h-6 text-zinc-400 ml-0.5 mt-0.5 mr-1.5" />
+                <div>
+                  <p class="text-zinc-400">
+                    <span class="text-sm font-semibold text-zinc-100">
+                      {file.name}
+                    </span>
+                    {"  "}
+                    <span className="text-sm">({file.size})</span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}