feat(images): share target working and receiving images!

frontend/src/App.tsx

@@ -1,13 +1,22 @@
 import { Route, Router } from "@solidjs/router";
 import { listen } from "@tauri-apps/api/event";
-import { createEffect, onCleanup } from "solid-js";
+import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
 import { Login } from "./Login";
 import { ProtectedRoute } from "./ProtectedRoute";
 import { Search } from "./Search";
 import { Settings } from "./Settings";
 import { ImageViewer } from "./components/ImageViewer";
+import type { PluginListener } from "@tauri-apps/api/core";
+import {
+    listenForShareEvents,
+    type ShareEvent,
+} from "tauri-plugin-sharetarget-api";
+import { readFile } from "@tauri-apps/plugin-fs";
 
 export const App = () => {
+    const [logs, setLogs] = createSignal<string[]>([]);
+    const [file, setFile] = createSignal<File>();
+
     createEffect(() => {
         // TODO: Don't use window.location.href
         const unlisten = listen("focus-search", () => {
@@ -19,9 +28,40 @@ export const App = () => {
         });
     });
 
+    createEffect(() => {
+        let listener: PluginListener;
+        const setupListener = async () => {
+            listener = await listenForShareEvents(
+                async (intent: ShareEvent) => {
+                    const contents = await readFile(intent.stream).catch(
+                        (error: Error) => {
+                            console.warn("fetching shared content failed:");
+                            throw error;
+                        },
+                    );
+                    setFile(
+                        new File([contents], intent.name ?? "no-name", {
+                            type: intent.content_type,
+                        }),
+                    );
+                    setLogs((l) => [...l, intent.uri]);
+                },
+            );
+        };
+        setupListener();
+        return () => {
+            listener?.unregister();
+        };
+    });
+
     return (
         <>
             <ImageViewer />
+            <p>Hello</p>
+            <Show when={file()}>
+                {(f) => <img alt="my-image" src={URL.createObjectURL(f())} />}
+            </Show>
+            <For each={logs()}>{(log) => <p>{log}</p>}</For>
             <Router>
                 <Route path="/login" component={Login} />