feat(tray-menu): for screenshot

frontend/src-tauri/Cargo.toml

@@ -18,7 +18,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["macos-private-api"] }
+tauri = { version = "2", features = ["macos-private-api", "tray-icon"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 notify = "6.1.1"

frontend/src-tauri/src/lib.rs

@@ -18,15 +18,19 @@ use window::setup_window;
 
 #[cfg(any(target_os = "linux", target_os = "macos", target_os = "windows"))]
 pub fn desktop() {
+    use tauri::{
+        menu::{Menu, MenuItem},
+        tray::TrayIconBuilder,
+    };
+
     let watcher_state = new_shared_watcher_state();
 
-    let bruh = tauri::Builder::default()
+    tauri::Builder::default()
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_log::Builder::new().build())
         .plugin(tauri_plugin_fs::init())
-        .plugin(tauri_plugin_store::Builder::new().build());
-
-    bruh.plugin(tauri_plugin_http::init())
+        .plugin(tauri_plugin_store::Builder::new().build())
+        .plugin(tauri_plugin_http::init())
         .manage(watcher_state)
         .invoke_handler(tauri::generate_handler![
             commands::handle_selected_folder,
@@ -40,6 +44,28 @@ pub fn desktop() {
         ])
         .setup(|app| {
             setup_window(app)?;
+
+            let quit_i = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
+            let take_screenshot =
+                MenuItem::with_id(app, "screenshot", "Screenshot", true, None::<&str>)?;
+
+            let menu = Menu::with_items(app, &[&quit_i, &take_screenshot])?;
+
+            TrayIconBuilder::new()
+                .menu(&menu)
+                .on_menu_event(|app, event| match event.id.as_ref() {
+                    "quit" => {
+                        app.exit(0);
+                    }
+                    "screenshot" => {
+                        let _ = screenshot::take_area_screenshot(app);
+                    }
+                    _ => {
+                        log::info!("{}", event.id().0)
+                    }
+                })
+                .build(app)?;
+
             shortcut::enable_shortcut(app);
 
             Ok(())

frontend/src-tauri/src/screenshot.rs

@@ -51,7 +51,7 @@ fn screenshot(path: &PathBuf) -> Result<Output, String> {
 }
 
 /// Takes a screenshot of a selected area and returns the image data as base64
-#[cfg(target_os = "linux")]
+#[cfg(any(target_os = "linux", target_os = "macos"))]
 pub fn take_area_screenshot<R: Runtime>(app: &AppHandle<R>) -> Result<String, String> {
     // Create a temporary file path
     let temp_dir = std::env::temp_dir();

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;
 };