fix: prevent shaking when switching between chat and search pages (#955)

RainyNight9 · web-flow · commit e92eee1ecf8c · 2025-10-30T10:19:05.000+08:00
* fix: prevent shaking when switching between chat and search pages in compact mode

* docs: add release note
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -34,6 +34,7 @@ fix(Window Management): Next/Previous Desktop do not work #926
 fix: fix page rapidly flickering issue #935
 fix(view extension): broken search bar UI when opening extensions via hotkey #938
 fix: allow deletion after selecting all text #943
+fix: prevent shaking when switching between chat and search pages #955
 
 ### ✈️ Improvements
 
diff --git a/src/components/Common/ChatSwitch.tsx b/src/components/Common/ChatSwitch.tsx
@@ -29,7 +29,7 @@ const ChatSwitch: React.FC<ChatSwitchProps> = ({ isChatMode, onChange }) => {
     <div
       role="switch"
       aria-checked={isChatMode}
-      className={`relative flex items-center justify-between w-10 h-[18px] rounded-full cursor-pointer transition-colors duration-300 ${
+      className={`relative flex items-center justify-between w-10 h-[20px] rounded-full cursor-pointer transition-colors duration-300 ${
         isChatMode ? "bg-[#0072ff]" : "bg-[var(--coco-primary-color)]"
       }`}
       onClick={handleToggle}
@@ -39,8 +39,8 @@ const ChatSwitch: React.FC<ChatSwitchProps> = ({ isChatMode, onChange }) => {
         {!isChatMode ? <Search className="w-4 h-4 text-white" /> : <div></div>}
       </div>
       <div
-        className={`absolute top-[1px] h-4 w-4 bg-white rounded-full shadow-md transform transition-transform duration-300 ${
-          isChatMode ? "translate-x-6" : "translate-x-0"
+        className={`absolute top-[1px] left-[1px] h-[18px] w-[18px] bg-white rounded-full shadow-md transform transition-transform duration-300 ${
+          isChatMode ? "translate-x-5" : "translate-x-0"
         }`}
       ></div>
     </div>
diff --git a/src/components/SearchChat/index.tsx b/src/components/SearchChat/index.tsx
@@ -114,7 +114,7 @@ function SearchChat({
         if (searchBar && filterBar) {
           height = searchBar.clientHeight + filterBar.clientHeight + 16;
         } else {
-          height = 82;
+          height = 84;
         }
 
         height = Math.min(height, 88);
@@ -278,6 +278,8 @@ function SearchChat({
   });
 
   const opacity = useAppearanceStore((state) => state.opacity);
+  const windowMode = useAppearanceStore((state) => state.windowMode);
+  const isCompact = windowMode === "compact";
 
   useEffect(() => {
     if (isTauri) {
@@ -338,10 +340,11 @@ function SearchChat({
       <div
         data-tauri-drag-region={isTauri}
         className={clsx(
-          "p-2 w-full flex justify-center transition-all duration-500 border-[#E6E6E6] dark:border-[#272626]",
-          [isTransitioned ? "border-t" : "border-b"],
+          "p-2 w-full flex justify-center transition-all duration-500",
+          !isCompact && "border-[#E6E6E6] dark:border-[#272626]",
+          !isCompact && [isTransitioned ? "border-t" : "border-b"],
           {
-            "min-h-[82px]": visibleSearchBar() && visibleFilterBar(),
+            "min-h-[84px]": visibleSearchBar() && visibleFilterBar(),
           }
         )}
       >
