feat: auto becomes semi-transparent when it loses focus (#435)

src/components/Search/InputBox.tsx

@@ -133,9 +133,11 @@ export default function ChatInput({
   const setVisibleStartPage = useConnectStore((state) => {
     return state.setVisibleStartPage;
   });
+  const setBlurred = useAppStore((state) => state.setBlurred);
 
   useEffect(() => {
     const handleFocus = () => {
+      setBlurred(false);
       setIsCommandPressed(false);
       setModifierKeyPressed(false);
     };

src/components/SearchChat/index.tsx

@@ -76,6 +76,7 @@ function SearchChat({
     isTyping,
   } = state;
   const [isWin10, setIsWin10] = useState(false);
+  const blurred = useAppStore((state) => state.blurred);
 
   useWindowEvents();
 
@@ -284,6 +285,7 @@ function SearchChat({
           "rounded-xl": !isMobile && !isWin,
           "border border-[#E6E6E6] dark:border-[#272626]": isTauri && isLinux,
           "border-t border-t-[#999] dark:border-t-[#333]": isTauri && isWin10,
+          "opacity-30": blurred,
         }
       )}
     >

src/hooks/useWindowEvents.ts

@@ -6,12 +6,13 @@ import platformAdapter from "@/utils/platformAdapter";
 export function useWindowEvents() {
   const isPinned = useAppStore((state) => state.isPinned);
   const visible = useAppStore((state) => state.visible);
+  const setBlurred = useAppStore((state) => state.setBlurred);
 
   useEffect(() => {
     const handleBlur = async () => {
       console.log("Window blurred");
       if (isPinned || visible) {
-        return;
+        return setBlurred(true);
       }
 
       await platformAdapter.hideWindow();

src/stores/appStore.ts

@@ -66,6 +66,9 @@ export type IAppStore = {
 
   visible: boolean;
   withVisibility: <T>(fn: () => Promise<T>) => Promise<T>;
+
+  blurred: boolean;
+  setBlurred: (blurred: boolean) => void;
 };
 
 export const useAppStore = create<IAppStore>()(
@@ -150,6 +153,9 @@ export const useAppStore = create<IAppStore>()(
 
         return result;
       },
+
+      blurred: false,
+      setBlurred: (blurred: boolean) => set({ blurred }),
     }),
     {
       name: "app-store",