feat: add auto collapse delay for compact mode (#981)

* feat: add auto collapse delay for compact mode

* refactor: change i18n

* docs: update changelog

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

@@ -26,7 +26,7 @@ feat(extension compatibility): minimum_coco_version #946
 feat: add compact mode for window #947
 feat: advanced settings search debounce & local query source weight #950
 feat: add window opacity configuration option #963
-
+feat: add auto collapse delay for compact mode #981
 
 ### 🐛 Bug fix
 

src/components/SearchChat/index.tsx

@@ -103,8 +103,13 @@ function SearchChat({
   const [hideMiddleBorder, setHideMiddleBorder] = useState(false);
 
   const setSuppressErrors = useAppStore((state) => state.setSuppressErrors);
+  let collapseWindowTimer = useRef<ReturnType<typeof setTimeout>>();
 
   const setWindowSize = useCallback(() => {
+    if (collapseWindowTimer.current) {
+      clearTimeout(collapseWindowTimer.current);
+    }
+
     const width = 680;
     let height = 590;
 
@@ -128,12 +133,22 @@ function SearchChat({
       if (windowMode === "compact") {
         height = 84;
       }
-
-      setHideMiddleBorder(height < 590);
-      setSuppressErrors(height < 590);
     }
 
+    if (height < 590) {
+      const { compactModeAutoCollapseDelay } = useConnectStore.getState();
+
+      console.log("compactModeAutoCollapseDelay", compactModeAutoCollapseDelay);
+
+      collapseWindowTimer.current = setTimeout(() => {
+        setHideMiddleBorder(true);
+        setSuppressErrors(true);
+
         platformAdapter.setWindowSize(width, height);
+      }, compactModeAutoCollapseDelay * 1000);
+    } else {
+      platformAdapter.setWindowSize(width, height);
+    }
   }, []);
 
   const debouncedSetWindowSize = debounce(setWindowSize, 50);

src/components/Settings/Advanced/index.tsx

@@ -4,6 +4,7 @@ import {
   AppWindowMac,
   ArrowUpWideNarrow,
   MessageSquareMore,
+  PanelTopClose,
   Search,
   ShieldCheck,
   Unplug,
@@ -59,7 +60,12 @@ const Advanced = () => {
   const setAllowSelfSignature = useConnectStore((state) => {
     return state.setAllowSelfSignature;
   });
-  const { searchDelay, setSearchDelay } = useConnectStore();
+  const {
+    searchDelay,
+    setSearchDelay,
+    compactModeAutoCollapseDelay,
+    setCompactModeAutoCollapseDelay,
+  } = useConnectStore();
 
   const [localSearchResultWeight, setLocalSearchResultWeight] = useState(1);
 
@@ -296,6 +302,25 @@ const Advanced = () => {
             </option>
           </select>
         </SettingsItem>
+
+        <SettingsItem
+          icon={PanelTopClose}
+          title={t(
+            "settings.advanced.other.compactModeAutoCollapseDelay.title"
+          )}
+          description={t(
+            "settings.advanced.other.compactModeAutoCollapseDelay.description"
+          )}
+        >
+          <SettingsInput
+            type="number"
+            min={0}
+            value={compactModeAutoCollapseDelay}
+            onChange={(value) => {
+              setCompactModeAutoCollapseDelay(!value ? 0 : Number(value));
+            }}
+          />
+        </SettingsItem>
       </div>
     </div>
   );

src/hooks/useSearch.ts

@@ -159,8 +159,6 @@ export function useSearch() {
 
   const performSearch = useCallback(
     async (searchInput: string) => {
-      console.log(123);
-
       if (!searchInput) {
         setSearchState((prev) => ({ ...prev, suggests: [] }));
         return;

src/hooks/useSyncStore.ts

@@ -118,7 +118,7 @@ export const useSyncStore = () => {
   const setEndpoint = useAppStore((state) => state.setEndpoint);
   const setLanguage = useAppStore((state) => state.setLanguage);
   const { setWindowMode } = useAppearanceStore();
-  const { setSearchDelay } = useConnectStore();
+  const { setSearchDelay, setCompactModeAutoCollapseDelay } = useConnectStore();
 
   const setServerListSilently = useConnectStore(
     (state) => state.setServerListSilently
@@ -191,6 +191,7 @@ export const useSyncStore = () => {
           querySourceTimeout,
           searchDelay,
           allowSelfSignature,
+          compactModeAutoCollapseDelay,
         } = payload;
         if (isNumber(connectionTimeout)) {
           setConnectionTimeout(connectionTimeout);
@@ -200,6 +201,7 @@ export const useSyncStore = () => {
         }
         setSearchDelay(searchDelay);
         setAllowSelfSignature(allowSelfSignature);
+        setCompactModeAutoCollapseDelay(compactModeAutoCollapseDelay);
       }),
 
       platformAdapter.listenEvent("change-appearance-store", ({ payload }) => {

src/locales/en/translation.json

@@ -208,6 +208,10 @@
             "medium": "Medium",
             "low": "Low"
           }
+        },
+        "compactModeAutoCollapseDelay": {
+          "title": "Compact Mode Auto-Collapse Delay",
+          "description": "Adds a delay before collapsing in Compact Mode to avoid sudden size changes when typing or clearing input. Default: 10s."
         }
       }
     },

src/locales/zh/translation.json

@@ -208,6 +208,10 @@
             "medium": "中",
             "low": "低"
           }
+        },
+        "compactModeAutoCollapseDelay": {
+          "title": "紧凑模式自动收起延迟",
+          "description": "为紧凑模式的自动收起添加延迟，避免输入或清空内容时窗口突然缩小。默认: 10s。"
         }
       }
     },

src/stores/connectStore.ts

@@ -40,6 +40,10 @@ export type IConnectStore = {
   setAllowSelfSignature: (allowSelfSignature: boolean) => void;
   searchDelay: number;
   setSearchDelay: (searchDelay: number) => void;
+  compactModeAutoCollapseDelay: number;
+  setCompactModeAutoCollapseDelay: (
+    compactModeAutoCollapseDelay: number
+  ) => void;
 };
 
 export const useConnectStore = create<IConnectStore>()(
@@ -149,6 +153,10 @@ export const useConnectStore = create<IConnectStore>()(
         setSearchDelay(searchDelay) {
           return set(() => ({ searchDelay }));
         },
+        compactModeAutoCollapseDelay: 10,
+        setCompactModeAutoCollapseDelay(compactModeAutoCollapseDelay) {
+          return set(() => ({ compactModeAutoCollapseDelay }));
+        },
       }),
       {
         name: "connect-store",