From db832a9654cb0b9ab24d988aa59b316af0188409 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Wed, 1 Oct 2025 21:33:29 +0800
Subject: [PATCH] fix: eliminate layout shift when switching app types with
 Claude plugin sync

- Separate sync button containers for Codex and Claude modes
- Only render the container in corresponding app type to prevent layout jumping
- Apply same fix pattern as commit 0bcc04a for VS Code sync button
---
 src/components/ProviderList.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/ProviderList.tsx b/src/components/ProviderList.tsx
index 3eebdec..2394183 100644
--- a/src/components/ProviderList.tsx
+++ b/src/components/ProviderList.tsx
@@ -320,11 +320,10 @@ const ProviderList: React.FC<ProviderListProps> = ({
                   </div>
 
                   <div className="flex items-center gap-2 ml-4">
-                    {/* VS Code 按钮占位容器 - 始终保持空间，避免布局跳动 */}
-                    <div className="w-[130px]">
-                      {appType === "codex" &&
-                        provider.category !== "official" &&
-                        isCurrent && (
+                    {/* 同步按钮占位容器 - 只在对应模式下渲染，避免布局跳动 */}
+                    {appType === "codex" ? (
+                      <div className="w-[130px]">
+                        {provider.category !== "official" && isCurrent && (
                           <button
                             onClick={() =>
                               vscodeAppliedFor === provider.id
@@ -348,10 +347,12 @@ const ProviderList: React.FC<ProviderListProps> = ({
                               : t("provider.applyToVSCode")}
                           </button>
                         )}
+                      </div>
+                    ) : null}
 
-                      {appType === "claude" &&
-                        provider.category !== "official" &&
-                        isCurrent && (
+                    {appType === "claude" ? (
+                      <div className="w-[130px]">
+                        {provider.category !== "official" && isCurrent && (
                           <button
                             onClick={() =>
                               claudeApplied
@@ -375,7 +376,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
                               : t("provider.applyToClaudePlugin")}
                           </button>
                         )}
-                    </div>
+                      </div>
+                    ) : null}
                     <button
                       onClick={() => onSwitch(provider.id)}
                       disabled={isCurrent}