From 330a75a445d2d893744232b488ef563f3f043dfa Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sun, 4 Jan 2026 10:31:12 +0700
Subject: [PATCH] style(sidebar): add hover effect to New Agent button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On hover: white border and light muted background.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/app/src/components/sliding-sidebar.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/sliding-sidebar.tsx b/packages/app/src/components/sliding-sidebar.tsx
index 8cb994281..fb7caf663 100644
--- a/packages/app/src/components/sliding-sidebar.tsx
+++ b/packages/app/src/components/sliding-sidebar.tsx
@@ -241,7 +241,10 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
             {/* Header: New Agent button */}
             <View style={styles.sidebarHeader}>
               <Pressable
-                style={styles.newAgentButton}
+                style={({ hovered }) => [
+                  styles.newAgentButton,
+                  hovered && styles.newAgentButtonHovered,
+                ]}
                 onPress={handleCreateAgentMobile}
               >
                 <Plus size={18} color={theme.colors.foreground} />
@@ -284,10 +287,13 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
       {/* Header: New Agent button */}
       <View style={styles.sidebarHeader}>
         <Pressable
-          style={styles.newAgentButton}
+          style={({ hovered }) => [
+            styles.newAgentButton,
+            hovered && styles.newAgentButtonHovered,
+          ]}
           onPress={handleCreateAgentDesktop}
         >
-          <Plus size={18} color={theme.colors.mutedForeground} />
+          <Plus size={18} color={theme.colors.foreground} />
           <Text style={styles.newAgentButtonText}>New Agent</Text>
         </Pressable>
       </View>
@@ -349,6 +355,10 @@ const styles = StyleSheet.create((theme) => ({
     borderWidth: 1,
     borderColor: theme.colors.border,
   },
+  newAgentButtonHovered: {
+    borderColor: theme.colors.foreground,
+    backgroundColor: theme.colors.muted,
+  },
   newAgentButtonText: {
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.normal,