feat: supports setting of out-of-focus transparency on top (#470)

* feat: supports setting of out-of-focus transparency on top

* docs: update changelog

* refactor: optimize translation content

* docs: update changelog

Author: ayangweb

docs/content.en/docs/release-notes/_index.md

@@ -14,6 +14,7 @@ Information about release notes of Coco Server is provided here.
 ### 🚀 Features
 
 - feat: check or enter to close the list of assistants #469
+- feat: add dimness settings for pinned window #470
 
 ### 🐛 Bug fix
 

src/components/SearchChat/index.tsx

@@ -25,6 +25,7 @@ import { DataSource } from "@/types/commands";
 import { useThemeStore } from "@/stores/themeStore";
 import { Get } from "@/api/axiosRequest";
 import { useConnectStore } from "@/stores/connectStore";
+import { useAppearanceStore } from "@/stores/appearance";
 
 interface SearchChatProps {
   isTauri?: boolean;
@@ -300,6 +301,7 @@ function SearchChat({
   const defaultStartupWindow = useStartupStore((state) => {
     return state.defaultStartupWindow;
   });
+  const opacity = useAppearanceStore((state) => state.opacity);
 
   useEffect(() => {
     if (platformAdapter.isTauri()) {
@@ -329,9 +331,9 @@ 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,
         }
       )}
+      style={{ opacity: blurred ? opacity / 100 : 100 }}
     >
       <div
         data-tauri-drag-region={isTauri}

src/components/Settings/Advanced/components/Appearance/index.tsx

@@ -0,0 +1,53 @@
+import SettingsInput from "@/components/Settings/SettingsInput";
+import SettingsItem from "@/components/Settings/SettingsItem";
+import { useAppearanceStore } from "@/stores/appearance";
+import platformAdapter from "@/utils/platformAdapter";
+import { Unplug } from "lucide-react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+const Appearance = () => {
+  const { t } = useTranslation();
+  const opacity = useAppearanceStore((state) => state.opacity);
+  const setOpacity = useAppearanceStore((state) => state.setOpacity);
+
+  useEffect(() => {
+    const unlisten = useAppearanceStore.subscribe((state) => {
+      platformAdapter.emitEvent("change-appearance-store", state);
+    });
+
+    return unlisten;
+  }, []);
+
+  return (
+    <>
+      <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+        {t("settings.advanced.appearance.title")}
+      </h2>
+
+      <SettingsItem
+        icon={Unplug}
+        title={t("settings.advanced.appearance.opacity.title")}
+        description={t("settings.advanced.appearance.opacity.description")}
+      >
+        <SettingsInput
+          type="number"
+          min={10}
+          max={100}
+          value={opacity}
+          onChange={(event) => {
+            const nextOpacity = Number(event.target.value);
+
+            if (nextOpacity < 10 || nextOpacity > 100) {
+              return;
+            }
+
+            return setOpacity(nextOpacity || 30);
+          }}
+        />
+      </SettingsItem>
+    </>
+  );
+};
+
+export default Appearance;

src/components/Settings/Advanced/components/Shortcuts/index.tsx

@@ -26,6 +26,7 @@ import {
 import { ModifierKey } from "@/types/index";
 import platformAdapter from "@/utils/platformAdapter";
 import { useAppStore } from "@/stores/appStore";
+import SettingsInput from "@/components/Settings/SettingsInput";
 
 export const modifierKeys: ModifierKey[] = isMac
   ? ["meta", "ctrl"]
@@ -284,7 +285,11 @@ const Shortcuts = () => {
             }}
           >
             {modifierKeys.map((item) => {
-              return <option value={item}>{formatKey(item)}</option>;
+              return (
+                <option key={item} value={item}>
+                  {formatKey(item)}
+                </option>
+              );
             })}
           </select>
         </SettingsItem>
@@ -302,10 +307,9 @@ const Shortcuts = () => {
               <div className="flex items-center gap-2">
                 <span>{formatKey(modifierKey)}</span>
                 <span>+</span>
-                <input
-                  className="w-20 h-8 px-2 rounded-md border bg-transparent border-black/5 dark:border-white/10 hover:border-[#0072FF] focus:border-[#0072FF] transition"
+                <SettingsInput
                   value={value}
-                  maxLength={1}
+                  max={1}
                   onChange={(event) => {
                     handleChange(event, setValue);
                   }}

src/components/Settings/Advanced/index.tsx

@@ -4,8 +4,10 @@ import SettingsItem from "../SettingsItem";
 import { AppWindowMac, MessageSquareMore, Search, Unplug } from "lucide-react";
 import { useStartupStore } from "@/stores/startupStore";
 import { useEffect } from "react";
-import { emit } from "@tauri-apps/api/event";
 import { useConnectStore } from "@/stores/connectStore";
+import Appearance from "./components/Appearance";
+import SettingsInput from "../SettingsInput";
+import platformAdapter from "@/utils/platformAdapter";
 
 const Advanced = () => {
   const { t } = useTranslation();
@@ -42,11 +44,11 @@ const Advanced = () => {
 
   useEffect(() => {
     const unsubscribeStartup = useStartupStore.subscribe((state) => {
-      emit("change-startup-store", state);
+      platformAdapter.emitEvent("change-startup-store", state);
     });
 
     const unsubscribeConnect = useConnectStore.subscribe((state) => {
-      emit("change-connect-store", state);
+      platformAdapter.emitEvent("change-connect-store", state);
     });
 
     return () => {
@@ -165,12 +167,17 @@ const Advanced = () => {
             "settings.advanced.connect.connectionTimeout.description"
           )}
         >
-          <input
+          <SettingsInput
             type="number"
             min={10}
             value={connectionTimeout}
-            className="w-20 h-8 px-2 rounded-md border bg-transparent border-black/5 dark:border-white/10"
             onChange={(event) => {
+              const nextValue = Number(event.target.value);
+
+              if (nextValue < 10) {
+                return;
+              }
+
               setConnectionTimeout(Number(event.target.value) || 120);
             }}
           />
@@ -181,17 +188,24 @@ const Advanced = () => {
           title={t("settings.advanced.connect.queryTimeout.title")}
           description={t("settings.advanced.connect.queryTimeout.description")}
         >
-          <input
+          <SettingsInput
             type="number"
             min={1}
             value={queryTimeout}
-            className="w-20 h-8 px-2 rounded-md border bg-transparent border-black/5 dark:border-white/10"
             onChange={(event) => {
-              setQueryTimeout(Number(event.target.value) || 500);
+              const nextValue = Number(event.target.value);
+
+              if (nextValue < 1) {
+                return;
+              }
+
+              setQueryTimeout(nextValue || 500);
             }}
           />
         </SettingsItem>
       </div>
+
+      <Appearance />
     </div>
   );
 };

src/components/Settings/SettingsInput.tsx

@@ -0,0 +1,19 @@
+import { Input, InputProps } from "@headlessui/react";
+import clsx from "clsx";
+import { FC } from "react";
+
+const SettingsInput: FC<InputProps> = (props) => {
+  const { className, ...rest } = props;
+
+  return (
+    <Input
+      {...rest}
+      className={clsx(
+        "w-20 h-8 px-2 rounded-md border bg-transparent border-black/5 dark:border-white/10 hover:border-[#0072FF] focus:border-[#0072FF] transition",
+        className
+      )}
+    />
+  );
+};
+
+export default SettingsInput;

src/hooks/useSyncStore.ts

@@ -1,3 +1,4 @@
+import { useAppearanceStore } from "@/stores/appearance";
 import { useConnectStore } from "@/stores/connectStore";
 import { useShortcutsStore } from "@/stores/shortcutsStore";
 import { useStartupStore } from "@/stores/startupStore";
@@ -77,6 +78,7 @@ export const useSyncStore = () => {
   const setQueryTimeout = useConnectStore((state) => {
     return state.setQuerySourceTimeout;
   });
+  const setOpacity = useAppearanceStore((state) => state.setOpacity);
 
   useEffect(() => {
     if (!resetFixedWindow) {
@@ -141,6 +143,12 @@ export const useSyncStore = () => {
         setConnectionTimeout(connectionTimeout);
         setQueryTimeout(querySourceTimeout);
       }),
+
+      platformAdapter.listenEvent("change-appearance-store", ({ payload }) => {
+        const { opacity } = payload;
+
+        setOpacity(opacity);
+      }),
     ]);
 
     return () => {

src/locales/en/translation.json

@@ -162,6 +162,13 @@
           "title": "Query Timeout",
           "description": "Terminates the query if no search results are returned within this time. Default: 500ms."
         }
+      },
+      "appearance": {
+        "title": "Appearance Settings",
+        "opacity": {
+          "title": "Pinned Window Dimness Setting",
+          "description": "Adjusts the opacity level of the Coco AI window when it’s pinned and not in focus. Set a value between 10% and 100%, where 100% means fully opaque (no dimming), and lower values increase transparency, allowing underlying content to show through."
+        }
       }
     },
     "tabs": {

src/locales/zh/translation.json

@@ -162,6 +162,13 @@
           "title": "查询超时",
           "description": "在此时间内未返回搜索结果，则终止查询。默认值：500 毫秒。"
         }
+      },
+      "appearance": {
+        "title": "外观设置",
+        "opacity": {
+          "title": "置顶时失焦透明度",
+          "description": "设置 Coco AI 窗口在置顶且失去焦点时的不透明度（10%–100%，100% 表示完全不透明）。"
+        }
       }
     },
     "tabs": {

src/stores/appearance.ts

@@ -0,0 +1,26 @@
+import { create } from "zustand";
+import { persist, subscribeWithSelector } from "zustand/middleware";
+
+export type IAppearanceStore = {
+  opacity: number;
+  setOpacity: (opacity: number) => void;
+};
+
+export const useAppearanceStore = create<IAppearanceStore>()(
+  subscribeWithSelector(
+    persist(
+      (set) => ({
+        opacity: 30,
+        setOpacity: (opacity) => {
+          return set({ opacity });
+        },
+      }),
+      {
+        name: "startup-store",
+        partialize: (state) => ({
+          opacity: state.opacity,
+        }),
+      }
+    )
+  )
+);