refactor: reorganize frontend code

src/hooks/useDragDropPaths.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { getCurrentWebview } from "@tauri-apps/api/webview";
+
+export function useDragDropPaths(): string[] {
+	const [paths, setPaths] = useState<string[]>([]);
+
+	useEffect(() => {
+		const unlistenPromise = getCurrentWebview().onDragDropEvent(
+			async ({ payload }) => {
+				if (payload.type === "enter") {
+					setPaths(payload.paths);
+				} else if (payload.type === "leave" || payload.type === "drop") {
+					setPaths([]);
+				}
+			},
+		);
+
+		return () => {
+			unlistenPromise.then((unlisten) => unlisten());
+		};
+	}, []);
+
+	return paths;
+}