✨ Click message to open extract dialog

src/App.tsx

@@ -1,28 +1,33 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/tauri";
 import { appWindow } from "@tauri-apps/api/window";
 import "./App.css";
 
 function App() {
   const [name, setName] = useState("");
   const [processing, setProcessing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const extract = (path: string) => {
+    setProcessing(true);
+    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+    invoke("extract", { path })
+      .then(() => {
+        setProcessing(false);
+      })
+      .catch((err) => {
+        window.alert(err);
+        setProcessing(false);
+      });
+  };
 
   useEffect(() => {
     const unlisten = appWindow.onFileDropEvent((e) => {
       if (e.payload.type !== "drop") {
         return;
       }
       for (const path of e.payload.paths) {
-        setProcessing(true);
-        // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-        invoke("extract", { path })
-          .then(() => {
-            setProcessing(false);
-          })
-          .catch((err) => {
-            window.alert(err);
-            setProcessing(false);
-          });
+        extract(path);
       }
     });
     return () => {
@@ -52,7 +57,16 @@ function App() {
       {!processing && (
         <div className="row">
           <h1>
-            <b>Drop here to extract PNA file.</b>
+            <label htmlFor="extract_file">
+              <b>Drop here to extract PNA file.</b>
+            </label>
+            <input
+              ref={inputRef}
+              id="extract_file"
+              className="hidden"
+              type="file"
+              accept=".pna"
+            />
           </h1>
         </div>
       )}

src/styles.css

@@ -88,6 +88,10 @@ button {
   margin-right: 5px;
 }
 
+.hidden {
+  display: none;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     color: #f6f6f6;