From d9d7c5c342c11400edad51acfb0bc0e0316162b7 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Tue, 16 Sep 2025 20:16:55 +0800
Subject: [PATCH] feat(ui): add Claude icon hover effect

Add orange color transition when hovering over Claude button icon for better visual feedback
---
 src/components/AppSwitcher.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index 756a6e9..c09cc46 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -17,7 +17,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
       <button
         type="button"
         onClick={() => handleSwitch("claude")}
-        className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
+        className={`group inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "claude"
             ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100 dark:shadow-none"
             : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
@@ -26,7 +26,9 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
         <ClaudeIcon
           size={16}
           className={
-            activeApp === "claude" ? "text-[#D97757] dark:text-[#D97757]" : ""
+            activeApp === "claude" 
+              ? "text-[#D97757] dark:text-[#D97757] transition-colors duration-200" 
+              : "text-gray-500 dark:text-gray-400 group-hover:text-[#D97757] dark:group-hover:text-[#D97757] transition-colors duration-200"
           }
         />
         <span>Claude</span>