feat(tray-menu): for screenshot

frontend/src/App.tsx

@@ -1,11 +1,11 @@
 import { Route, Router } from "@solidjs/router";
 import { listen } from "@tauri-apps/api/event";
-import { createEffect, onCleanup } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { Login } from "./Login";
 import { ProtectedRoute } from "./ProtectedRoute";
 import { Search } from "./Search";
 import { Settings } from "./Settings";
-import { sendImageFile } from "./network";
+import { sendImage, sendImageFile } from "./network";
 import type { PluginListener } from "@tauri-apps/api/core";
 import { SearchImageContextProvider } from "./contexts/SearchImageContext";
 import { platform } from "@tauri-apps/plugin-os";
@@ -14,6 +14,8 @@ import {
     type ShareEvent,
 } from "tauri-plugin-sharetarget-api";
 import { readFile } from "@tauri-apps/plugin-fs";
+import { ImageViewer } from "./components/ImageViewer";
+import { ImageStatus } from "./components/image-status/ImageStatus";
 
 const currentPlatform = platform();
 console.log("Current Platform: ", currentPlatform);
@@ -65,8 +67,17 @@ export const App = () => {
         };
     });
 
+    const [processingImage, setProcessingImage] = createSignal<
+        Awaited<ReturnType<typeof sendImage>> | undefined
+    >();
+
     return (
         <SearchImageContextProvider>
+            <ImageViewer onSendImage={setProcessingImage} />
+            <ImageStatus
+                processingImage={processingImage}
+                onSetProcessingImage={setProcessingImage}
+            />
             <Router>
                 <Route path="/login" component={Login} />
 

frontend/src/Search.tsx

@@ -16,11 +16,8 @@ import { ItemModal } from "./components/item-modal/ItemModal";
 import type { Shortcut } from "./components/shortcuts/hooks/useShortcutEditor";
 import type { sendImage, UserImage } from "./network";
 import { useSearchImageContext } from "./contexts/SearchImageContext";
-import { platform } from "@tauri-apps/plugin-os";
 import { ImageStatus } from "./components/image-status/ImageStatus";
 
-const currentPlatform = platform();
-
 export const Search = () => {
     const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
     const [searchQuery, setSearchQuery] = createSignal("");
@@ -180,11 +177,6 @@ export const Search = () => {
                 />
             )}
 
-            <Show when={currentPlatform === "linux"}>
-                <button type="button" onClick={() => invoke("take_screenshot")}>
-                    Take Screenshot [wayland :(]
-                </button>
-            </Show>
             <ImageStatus
                 processingImage={processingImage}
                 onSetProcessingImage={setProcessingImage}

frontend/src/components/image-status/ImageStatus.tsx

@@ -17,7 +17,7 @@ export const ImageStatus: Component<ImageStatusProps> = (props) => {
     const { onRefetchImages } = useSearchImageContext();
 
     const onEvent = (e: MessageEvent<EventData>) => {
-        console.log(e.data);
+        console.log("Processing Events: ", e.data);
 
         const processingImage = props.processingImage();
         if (processingImage == null) {
@@ -55,15 +55,5 @@ export const ImageStatus: Component<ImageStatusProps> = (props) => {
         };
     });
 
-    return (
-        <Show when={props.processingImage()}>
-            {(image) => (
-                <div>
-                    <p>
-                        {image().ImageID} - {image().Status}
-                    </p>
-                </div>
-            )}
-        </Show>
-    );
+    return null;
 };