feat: add editor screen

apps/desktop2/src/routes/editor/-components/media.tsx

@@ -0,0 +1,78 @@
+import { useArk } from "@lume/ark";
+import { AddMediaIcon, LoaderIcon } from "@lume/icons";
+import { cn, insertImage, isImagePath } from "@lume/utils";
+import { useEffect, useState } from "react";
+import { useSlateStatic } from "slate-react";
+import { toast } from "sonner";
+import { getCurrent } from "@tauri-apps/api/window";
+import { UnlistenFn } from "@tauri-apps/api/event";
+
+export function MediaButton({ className }: { className?: string }) {
+  const ark = useArk();
+  const editor = useSlateStatic();
+
+  const [loading, setLoading] = useState(false);
+
+  const uploadToNostrBuild = async () => {
+    try {
+      setLoading(true);
+
+      const image = await ark.upload();
+
+      if (image) {
+        insertImage(editor, image);
+      }
+
+      setLoading(false);
+    } catch (e) {
+      setLoading(false);
+      toast.error(`Upload failed, error: ${e}`);
+    }
+  };
+
+  useEffect(() => {
+    let unlisten: UnlistenFn = undefined;
+
+    async function listenFileDrop() {
+      const window = getCurrent();
+      if (!unlisten) {
+        unlisten = await window.listen("tauri://file-drop", async (event) => {
+          // @ts-ignore, lfg !!!
+          const items: string[] = event.payload.paths;
+          // start loading
+          setLoading(true);
+          // upload all images
+          for (const item of items) {
+            if (isImagePath(item)) {
+              const image = await ark.upload(item);
+              insertImage(editor, image);
+            }
+          }
+          // stop loading
+          setLoading(false);
+        });
+      }
+    }
+
+    listenFileDrop();
+
+    return () => {
+      if (unlisten) unlisten();
+    };
+  }, []);
+
+  return (
+    <button
+      type="button"
+      onClick={() => uploadToNostrBuild()}
+      disabled={loading}
+      className={cn("inline-flex items-center justify-center", className)}
+    >
+      {loading ? (
+        <LoaderIcon className="size-5 animate-spin" />
+      ) : (
+        <AddMediaIcon className="size-5" />
+      )}
+    </button>
+  );
+}