feat: add light tray icon & keydown listen (#72)

src-tauri/src/lib.rs

@@ -234,6 +234,7 @@ fn handle_hide_coco(app: &AppHandle) {
 
 fn enable_tray(app: &mut tauri::App) {
     use tauri::{
+        image::Image,
         menu::{MenuBuilder, MenuItem},
         tray::TrayIconBuilder,
     };
@@ -256,7 +257,8 @@ fn enable_tray(app: &mut tauri::App) {
         .unwrap();
 
     let _tray = TrayIconBuilder::new()
-        .icon(app.default_window_icon().unwrap().clone())
+        // .icon(app.default_window_icon().unwrap().clone())
+        .icon(Image::from_bytes(include_bytes!("../icons/light@2x.png")).expect("REASON"))
         .menu(&menu)
         .on_menu_event(|app, event| match event.id.as_ref() {
             "open" => {

src/components/SearchChat/ChatSwitch.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { Bot, Search } from "lucide-react";
+import { listen } from "@tauri-apps/api/event";
 
 interface ChatSwitchProps {
   isChatMode: boolean;
@@ -7,17 +8,22 @@ interface ChatSwitchProps {
 }
 
 const ChatSwitch: React.FC<ChatSwitchProps> = ({ isChatMode, onChange }) => {
-  useEffect(() => {
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.metaKey && event.key === "t") {
-        event.preventDefault();
-        console.log("Switch mode triggered");
-        handleToggle();
-      }
-    };
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.metaKey && event.key === "t") {
+      event.preventDefault();
+      console.log("Switch mode triggered");
+      handleToggle();
+    }
+  };
+
+  useEffect(() => {
+    const unlisten = listen("tauri://focus", () => {
+      window.addEventListener("keydown", handleKeydown);
+    });
 
-    window.addEventListener("keydown", handleKeydown);
     return () => {
+      unlisten.then((unlistenFn) => unlistenFn());
+
       window.removeEventListener("keydown", handleKeydown);
     };
   }, [isChatMode]);

src/components/SearchChat/DropdownList.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { isTauri } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
 interface DropdownListProps {
   selected: (item: any) => void;
   suggests: any[];
@@ -47,10 +48,10 @@ function DropdownList({ selected, suggests }: DropdownListProps) {
     } else if (e.key === "Meta") {
       e.preventDefault();
       setShowIndex(true);
-    } 
-    
+    }
+
     if (e.key === "Enter" && selectedItem !== null) {
-      console.log("Enter key pressed",  selectedItem);
+      console.log("Enter key pressed", selectedItem);
       const item = suggests[selectedItem];
       if (item?._source?.url) {
         handleOpenURL(item?._source?.url);
@@ -80,10 +81,14 @@ function DropdownList({ selected, suggests }: DropdownListProps) {
   };
 
   useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
+    const unlisten = listen("tauri://focus", () => {
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keyup", handleKeyUp);
+    });
 
     return () => {
+      unlisten.then((unlistenFn) => unlistenFn());
+
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
     };

src/components/SearchChat/InputBox.tsx

@@ -36,6 +36,50 @@ export default function ChatInput({
 
   const [isCommandPressed, setIsCommandPressed] = useState(false);
 
+  const handleKeyDown = (e: any) => {
+    if (e.code === "MetaLeft" || e.code === "MetaRight") {
+      setIsCommandPressed(true);
+    }
+
+    if (e.metaKey) {
+      switch (e.code) {
+        case "KeyI":
+          if (isChatMode) {
+            textareaRef.current?.focus();
+          } else {
+            inputRef.current?.focus();
+          }
+          break;
+        case "KeyM":
+          console.log("KeyM");
+          break;
+        case "Enter":
+          isChatMode && handleSubmit();
+          break;
+        case "KeyO":
+          console.log("KeyO");
+          break;
+        case "KeyU":
+          console.log("KeyU");
+          break;
+        case "KeyN":
+          console.log("KeyN");
+          break;
+        case "KeyG":
+          console.log("KeyG");
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  const handleKeyUp = (e: any) => {
+    if (e.code === "MetaLeft" || e.code === "MetaRight") {
+      setIsCommandPressed(false);
+    }
+  };
+
   useEffect(() => {
     const unlisten = listen("tauri://focus", () => {
       console.log("Window focused!");
@@ -44,62 +88,14 @@ export default function ChatInput({
       } else {
         inputRef.current?.focus();
       }
+  
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keyup", handleKeyUp);
     });
 
     return () => {
       unlisten.then((unlistenFn) => unlistenFn());
-    };
-  }, [isChatMode]);
 
-  useEffect(() => {
-    const handleKeyDown = (e: any) => {
-      if (e.code === "MetaLeft" || e.code === "MetaRight") {
-        setIsCommandPressed(true);
-      }
-
-      if (e.metaKey) {
-        switch (e.code) {
-          case "KeyI":
-            if (isChatMode) {
-              textareaRef.current?.focus();
-            } else {
-              inputRef.current?.focus();
-            }
-            break;
-          case "KeyM":
-            console.log("KeyM");
-            break;
-          case "Enter":
-            isChatMode && handleSubmit();
-            break;
-          case "KeyO":
-            console.log("KeyO");
-            break;
-          case "KeyU":
-            console.log("KeyU");
-            break;
-          case "KeyN":
-            console.log("KeyN");
-            break;
-          case "KeyG":
-            console.log("KeyG");
-            break;
-          default:
-            break;
-        }
-      }
-    };
-
-    const handleKeyUp = (e: any) => {
-      if (e.code === "MetaLeft" || e.code === "MetaRight") {
-        setIsCommandPressed(false);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-
-    return () => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
     };

src/components/Settings/GeneralSettings.tsx

@@ -5,6 +5,7 @@ import {
   isEnabled,
   // enable, disable
 } from "@tauri-apps/plugin-autostart";
+import { listen } from "@tauri-apps/api/event";
 
 import SettingsItem from "./SettingsItem";
 import SettingsSelect from "./SettingsSelect";
@@ -111,26 +112,30 @@ export default function GeneralSettings() {
     getCurrentShortcut();
   }, []);
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    e.preventDefault();
+    setPressedKeys((prev) => new Set(prev).add(e.code));
+  };
+
+  const handleKeyUp = (e: KeyboardEvent) => {
+    setPressedKeys((prev) => {
+      const next = new Set(prev);
+      next.delete(e.code);
+      return next;
+    });
+  };
+
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      e.preventDefault();
-      setPressedKeys((prev) => new Set(prev).add(e.code));
-    };
-
-    const handleKeyUp = (e: KeyboardEvent) => {
-      setPressedKeys((prev) => {
-        const next = new Set(prev);
-        next.delete(e.code);
-        return next;
-      });
-    };
-
-    if (listening) {
-      window.addEventListener("keydown", handleKeyDown);
-      window.addEventListener("keyup", handleKeyUp);
-    }
+    const unlisten = listen("tauri://focus", () => {
+      if (listening) {
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+      }
+    });
 
     return () => {
+      unlisten.then((unlistenFn) => unlistenFn());
+
       if (listening) {
         window.removeEventListener("keydown", handleKeyDown);
         window.removeEventListener("keyup", handleKeyUp);

src/hooks/useEscape.ts

@@ -1,19 +1,30 @@
-import { invoke } from "@tauri-apps/api/core";
 import { useEffect } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
 
 const useEscape = () => {
-  const handleEscape = (event: KeyboardEvent) => {
+  const handleEscape = async (event: KeyboardEvent) => {
     if (event.key === "Escape") {
       event.preventDefault();
-
-      invoke("hide");
+      // Hide the Tauri app window when 'Esc' is pressed
+      await invoke("hide_coco");
+      console.log("App window hidden successfully.");
     }
   };
 
-  useEffect(() => {
-    window.addEventListener("keydown", handleEscape);
 
-    return () => window.removeEventListener("keydown", handleEscape);
+  useEffect(() => {
+    const unlisten = listen("tauri://focus", () => {
+      // Add event listener for keydown
+      window.addEventListener("keydown", handleEscape);
+    });
+
+    // Cleanup event listener on component unmount
+    return () => {
+      unlisten.then((unlistenFn) => unlistenFn());
+
+      window.removeEventListener("keydown", handleEscape);
+    };
   }, []);
 };
 

src/routes/Layout.tsx

@@ -1,26 +1,9 @@
-import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
-import { invoke } from "@tauri-apps/api/core";
+
+import useEscape from "../hooks/useEscape";
 
 export default function Layout() {
-
-  useEffect(() => {
-    const handleKeyDown = async (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        // Hide the Tauri app window when 'Esc' is pressed
-        await invoke("hide_coco");
-        console.log("App window hidden successfully.");
-      }
-    };
-
-    // Add event listener for keydown
-    window.addEventListener("keydown", handleKeyDown);
-
-    // Cleanup event listener on component unmount
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
+  useEscape();
 
   return <Outlet />;
 }