From d4ccd780b2da5b337891ff6af15d3c390c0288ee Mon Sep 17 00:00:00 2001 From: ayangweb <75017711+ayangweb@users.noreply.github.com> Date: Mon, 17 Nov 2025 20:56:44 +0800 Subject: [PATCH] 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 | 2 +- src/components/SearchChat/index.tsx | 23 ++++++++++++++--- src/components/Settings/Advanced/index.tsx | 27 +++++++++++++++++++- src/hooks/useSearch.ts | 2 -- src/hooks/useSyncStore.ts | 4 ++- src/locales/en/translation.json | 4 +++ src/locales/zh/translation.json | 4 +++ src/stores/connectStore.ts | 8 ++++++ 8 files changed, 65 insertions(+), 9 deletions(-) diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md index 3a72ab3a..d5b99336 100644 --- a/docs/content.en/docs/release-notes/_index.md +++ b/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 diff --git a/src/components/SearchChat/index.tsx b/src/components/SearchChat/index.tsx index 8d925460..bd55def6 100644 --- a/src/components/SearchChat/index.tsx +++ b/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>(); 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); } - platformAdapter.setWindowSize(width, height); + 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); diff --git a/src/components/Settings/Advanced/index.tsx b/src/components/Settings/Advanced/index.tsx index 5acc83d0..c3d3a1b6 100644 --- a/src/components/Settings/Advanced/index.tsx +++ b/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 = () => { + + + { + setCompactModeAutoCollapseDelay(!value ? 0 : Number(value)); + }} + /> + ); diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts index f2d7c6fe..5aabee3a 100644 --- a/src/hooks/useSearch.ts +++ b/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; diff --git a/src/hooks/useSyncStore.ts b/src/hooks/useSyncStore.ts index c30d221f..a3ac6e41 100644 --- a/src/hooks/useSyncStore.ts +++ b/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 }) => { diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 5bb9a3df..bdcaa2fa 100644 --- a/src/locales/en/translation.json +++ b/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." } } }, diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json index 544a0144..dfa5bad4 100644 --- a/src/locales/zh/translation.json +++ b/src/locales/zh/translation.json @@ -208,6 +208,10 @@ "medium": "中", "low": "低" } + }, + "compactModeAutoCollapseDelay": { + "title": "紧凑模式自动收起延迟", + "description": "为紧凑模式的自动收起添加延迟，避免输入或清空内容时窗口突然缩小。默认: 10s。" } } }, diff --git a/src/stores/connectStore.ts b/src/stores/connectStore.ts index d9276014..7c0a0934 100644 --- a/src/stores/connectStore.ts +++ b/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()( @@ -149,6 +153,10 @@ export const useConnectStore = create()( setSearchDelay(searchDelay) { return set(() => ({ searchDelay })); }, + compactModeAutoCollapseDelay: 10, + setCompactModeAutoCollapseDelay(compactModeAutoCollapseDelay) { + return set(() => ({ compactModeAutoCollapseDelay })); + }, }), { name: "connect-store",