From ae837ade02d7f1c0ca8b5944a38c9637187c5929 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 18 Dec 2025 17:34:16 +0800
Subject: [PATCH] fix(ui): restore fade transition for Skills button

The Skills button transition was accidentally removed in commit 1fb2d5e
when adding multi-app support. This restores the smooth fade-in/out
animation when switching between apps that support Skills (Claude/Codex)
and those that don't (Gemini).
---
 src/App.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3564f03f9..cb418c438 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -496,17 +496,21 @@ function App() {
                 <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
 
                 <div className="bg-muted p-1 rounded-xl flex items-center gap-1">
-                  {hasSkillsSupport && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setCurrentView("skills")}
-                      className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                      title={t("skills.manage")}
-                    >
-                      <Wrench className="h-4 w-4" />
-                    </Button>
-                  )}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setCurrentView("skills")}
+                    className={cn(
+                      "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
+                      "transition-all duration-200 ease-in-out overflow-hidden",
+                      hasSkillsSupport
+                        ? "opacity-100 w-8 scale-100 px-2"
+                        : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
+                    )}
+                    title={t("skills.manage")}
+                  >
+                    <Wrench className="h-4 w-4 flex-shrink-0" />
+                  </Button>
                   {/* TODO: Agents 功能开发中，暂时隐藏入口 */}
                   {/* {isClaudeApp && (
                     <Button