From ce84ff6f236012169a9ebf65847392ffdadf4115 Mon Sep 17 00:00:00 2001
From: snehasishcodes <snehasishcodes@gmail.com>
Date: Fri, 18 Sep 2026 04:11:54 +0530
Subject: [PATCH] feat(mobile): round search bars and icon buttons to pill
 shape

---
 apps/mobile/app/(tabs)/index.tsx                     | 12 ++++++------
 apps/mobile/app/(tabs)/quick-prompts.tsx             | 12 ++++++------
 apps/mobile/app/notifications.tsx                    |  4 ++--
 .../app/project/[projectId]/[sessionId]/files.tsx    |  2 +-
 .../app/project/[projectId]/[sessionId]/models.tsx   |  8 ++++----
 apps/mobile/app/project/[projectId]/browser.tsx      |  6 +++---
 apps/mobile/app/sessions.tsx                         | 12 ++++++------
 7 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/apps/mobile/app/(tabs)/index.tsx b/apps/mobile/app/(tabs)/index.tsx
index a5ad23c..1c12e37 100644
--- a/apps/mobile/app/(tabs)/index.tsx
+++ b/apps/mobile/app/(tabs)/index.tsx
@@ -427,18 +427,18 @@ export default function HomeScreen() {
           </View>
         </View>
 
-        <View className="flex-row items-center gap-2">
-          <View className="flex-1 flex-row items-center bg-muted/50 rounded-lg px-3 h-10">
+        <View className="flex-row items-center gap-1.5">
+          <View className="flex-1 flex-row items-center gap-2 bg-muted/50 rounded-full pl-4 pr-3 h-11">
             <Search size={18} color={THEME[theme].mutedForeground} />
             <TextInput
-              className="flex-1 text-sm text-foreground ml-2 placeholder:text-muted-foreground/50"
+              className="flex-1 text-sm text-foreground placeholder:text-muted-foreground/50"
               placeholder="Search connections..."
               value={searchQuery}
               onChangeText={setSearchQuery}
               placeholderTextColor={THEME[theme].mutedForeground}
             />
             {searchQuery.length > 0 && (
-              <Pressable onPress={() => setSearchQuery("")}>
+              <Pressable onPress={() => setSearchQuery("")} hitSlop={8} className="p-1">
                 <X size={16} color={THEME[theme].mutedForeground} />
               </Pressable>
             )}
@@ -446,7 +446,7 @@ export default function HomeScreen() {
           <Pressable
             onPress={() => { setShowFilterMenu(!showFilterMenu); setShowSortMenu(false) }}
             className={cn(
-              "h-10 w-10 rounded-lg items-center justify-center",
+              "h-11 w-11 rounded-full items-center justify-center shrink-0",
               showFilterMenu ? "bg-primary/10" : "bg-muted/50"
             )}
           >
@@ -455,7 +455,7 @@ export default function HomeScreen() {
           <Pressable
             onPress={() => { setShowSortMenu(!showSortMenu); setShowFilterMenu(false) }}
             className={cn(
-              "h-10 w-10 rounded-lg items-center justify-center",
+              "h-11 w-11 rounded-full items-center justify-center shrink-0",
               showSortMenu ? "bg-primary/10" : "bg-muted/50"
             )}
           >
diff --git a/apps/mobile/app/(tabs)/quick-prompts.tsx b/apps/mobile/app/(tabs)/quick-prompts.tsx
index b4f6524..c33965f 100644
--- a/apps/mobile/app/(tabs)/quick-prompts.tsx
+++ b/apps/mobile/app/(tabs)/quick-prompts.tsx
@@ -220,18 +220,18 @@ export default function QuickPromptsScreen() {
                     </View>
                 </View>
 
-                <View className="flex-row items-center gap-2">
-                    <View className="flex-1 flex-row items-center bg-muted/50 rounded-lg px-3 h-10">
+                <View className="flex-row items-center gap-1.5">
+                    <View className="flex-1 flex-row items-center gap-2 bg-muted/50 rounded-full pl-4 pr-3 h-11">
                         <Search size={18} color={THEME[theme].mutedForeground} />
                         <TextInput
-                            className="flex-1 text-sm text-foreground ml-2 placeholder:text-muted-foreground/50"
+                            className="flex-1 text-sm text-foreground placeholder:text-muted-foreground/50"
                             placeholder="Search prompts..."
                             value={searchQuery}
                             onChangeText={setSearchQuery}
                             placeholderTextColor={THEME[theme].mutedForeground}
                         />
                         {searchQuery.length > 0 && (
-                            <Pressable onPress={() => setSearchQuery("")}>
+                            <Pressable onPress={() => setSearchQuery("")} hitSlop={8} className="p-1">
                                 <X size={16} color={THEME[theme].mutedForeground} />
                             </Pressable>
                         )}
@@ -239,7 +239,7 @@ export default function QuickPromptsScreen() {
                     <Pressable
                         onPress={() => { setShowFilterMenu(!showFilterMenu); setShowSortMenu(false) }}
                         className={cn(
-                            "h-10 w-10 rounded-lg items-center justify-center",
+                            "h-11 w-11 rounded-full items-center justify-center shrink-0",
                             showFilterMenu ? "bg-primary/10" : "bg-muted/50"
                         )}
                     >
@@ -248,7 +248,7 @@ export default function QuickPromptsScreen() {
                     <Pressable
                         onPress={() => { setShowSortMenu(!showSortMenu); setShowFilterMenu(false) }}
                         className={cn(
-                            "h-10 w-10 rounded-lg items-center justify-center",
+                            "h-11 w-11 rounded-full items-center justify-center shrink-0",
                             showSortMenu ? "bg-primary/10" : "bg-muted/50"
                         )}
                     >
diff --git a/apps/mobile/app/notifications.tsx b/apps/mobile/app/notifications.tsx
index 8ca1a7f..9c24625 100644
--- a/apps/mobile/app/notifications.tsx
+++ b/apps/mobile/app/notifications.tsx
@@ -220,14 +220,14 @@ export default function NotificationsPage() {
               {unreadCount > 0 && (
                 <Pressable
                   onPress={markAllAsRead}
-                  className="h-9 w-9 items-center justify-center rounded-lg bg-muted/50 active:bg-muted"
+                  className="h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted/50 active:bg-muted"
                 >
                   <CheckCheck size={18} color={THEME[theme].foreground} />
                 </Pressable>
               )}
               <Pressable
                 onPress={() => setConfirmClear(true)}
-                className="h-9 w-9 items-center justify-center rounded-lg bg-muted/50 active:bg-muted"
+                className="h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted/50 active:bg-muted"
               >
                 <Trash2 size={17} color={THEME[theme].destructive} />
               </Pressable>
diff --git a/apps/mobile/app/project/[projectId]/[sessionId]/files.tsx b/apps/mobile/app/project/[projectId]/[sessionId]/files.tsx
index 3417311..2d600b9 100644
--- a/apps/mobile/app/project/[projectId]/[sessionId]/files.tsx
+++ b/apps/mobile/app/project/[projectId]/[sessionId]/files.tsx
@@ -161,7 +161,7 @@ export default function FilesPage() {
                 className="flex-row items-center gap-2 border-b border-accent px-4"
                 style={{ paddingTop: insets.top + 10, paddingBottom: 10 }}
             >
-                <Button variant="ghost" className="w-10 h-10" onPress={() => router.back()}>
+                <Button variant="ghost" className="w-10 h-10 rounded-full" onPress={() => router.back()}>
                     <ArrowLeftIcon size={20} color={THEME[theme].foreground} />
                 </Button>
                 <Text className="text-base font-semibold flex-1">Modified files</Text>
diff --git a/apps/mobile/app/project/[projectId]/[sessionId]/models.tsx b/apps/mobile/app/project/[projectId]/[sessionId]/models.tsx
index 391daed..6a942d2 100644
--- a/apps/mobile/app/project/[projectId]/[sessionId]/models.tsx
+++ b/apps/mobile/app/project/[projectId]/[sessionId]/models.tsx
@@ -239,7 +239,7 @@ export default function ModelsPage() {
                 className="flex-row items-center gap-2 border-b border-accent px-4"
                 style={{ paddingTop: insets.top + 10, paddingBottom: 10 }}
             >
-                <Button variant="ghost" className="w-10 h-10" onPress={() => router.back()}>
+                <Button variant="ghost" className="w-10 h-10 rounded-full" onPress={() => router.back()}>
                     <ArrowLeftIcon size={20} color={THEME[theme].foreground} />
                 </Button>
                 <Text className="text-base font-semibold flex-1">Select Model</Text>
@@ -254,14 +254,14 @@ export default function ModelsPage() {
                 ) : null}
             </View>
 
-            <View className="flex-row items-center gap-2 px-4 py-2">
+            <View className="flex-row items-center gap-2.5 px-4 py-2.5">
                 <View className="flex-1 relative">
-                    <View className="absolute left-3 top-0 bottom-0 justify-center z-10">
+                    <View className="absolute left-4 top-0 bottom-0 justify-center z-10">
                         <Icon as={SearchIcon} size={16} className="text-muted-foreground" />
                     </View>
                     <Input
                         placeholder="Search models..."
-                        className="pl-9 h-9 text-sm"
+                        className="pl-10 pr-4 h-11 text-sm rounded-full"
                         value={search}
                         onChangeText={setSearch}
                         autoCapitalize="none"
diff --git a/apps/mobile/app/project/[projectId]/browser.tsx b/apps/mobile/app/project/[projectId]/browser.tsx
index 4b37155..83bcf73 100644
--- a/apps/mobile/app/project/[projectId]/browser.tsx
+++ b/apps/mobile/app/project/[projectId]/browser.tsx
@@ -293,11 +293,11 @@ export default function BrowserPage() {
                 className="flex-row items-center gap-2 border-b border-accent px-4"
                 style={{ paddingTop: insets.top + 10, paddingBottom: 10 }}
             >
-                <Button variant="ghost" className="w-10 h-10" onPress={() => router.back()}>
+                <Button variant="ghost" className="w-10 h-10 rounded-full" onPress={() => router.back()}>
                     <ArrowLeftIcon size={20} color={t.foreground} />
                 </Button>
                 {searchMode ? (
-                    <View className="flex-1 flex-row items-center gap-2 rounded-md border border-border/60 bg-background px-3 h-10">
+                    <View className="flex-1 flex-row items-center gap-2 rounded-full border border-border/60 bg-background pl-4 pr-3 h-11">
                         <RNTextInput
                             className="flex-1 text-base text-foreground"
                             placeholder="Find files..."
@@ -315,7 +315,7 @@ export default function BrowserPage() {
                 ) : (
                     <>
                         <Text className="text-base font-semibold flex-1">Files</Text>
-                        <Button variant="ghost" className="w-10 h-10" onPress={() => setSearchMode(true)}>
+                        <Button variant="ghost" className="w-10 h-10 rounded-full" onPress={() => setSearchMode(true)}>
                             <SearchIcon size={20} color={t.mutedForeground} />
                         </Button>
                     </>
diff --git a/apps/mobile/app/sessions.tsx b/apps/mobile/app/sessions.tsx
index b154963..ac16ccd 100644
--- a/apps/mobile/app/sessions.tsx
+++ b/apps/mobile/app/sessions.tsx
@@ -322,18 +322,18 @@ export default function SessionsScreen() {
           </View>
         </View>
 
-        <View className="flex-row items-center gap-2">
-          <View className="flex-1 flex-row items-center bg-muted/50 rounded-lg px-3 h-10">
+        <View className="flex-row items-center gap-1.5">
+          <View className="flex-1 flex-row items-center gap-2 bg-muted/50 rounded-full pl-4 pr-3 h-11">
             <Search size={18} color={THEME[theme].mutedForeground} />
             <TextInput
-              className="flex-1 text-sm text-foreground ml-2 placeholder:text-muted-foreground/50"
+              className="flex-1 text-sm text-foreground placeholder:text-muted-foreground/50"
               placeholder="Search sessions..."
               value={searchQuery}
               onChangeText={setSearchQuery}
               placeholderTextColor={THEME[theme].mutedForeground}
             />
             {searchQuery.length > 0 && (
-              <Pressable onPress={() => setSearchQuery("")}>
+              <Pressable onPress={() => setSearchQuery("")} hitSlop={8} className="p-1">
                 <X size={16} color={THEME[theme].mutedForeground} />
               </Pressable>
             )}
@@ -341,7 +341,7 @@ export default function SessionsScreen() {
           <Pressable
             onPress={() => { setShowFilterMenu(!showFilterMenu); setShowSortMenu(false) }}
             className={cn(
-              "h-10 w-10 rounded-lg items-center justify-center",
+              "h-11 w-11 rounded-full items-center justify-center shrink-0",
               showFilterMenu ? "bg-primary/10" : "bg-muted/50"
             )}
           >
@@ -350,7 +350,7 @@ export default function SessionsScreen() {
           <Pressable
             onPress={() => { setShowSortMenu(!showSortMenu); setShowFilterMenu(false) }}
             className={cn(
-              "h-10 w-10 rounded-lg items-center justify-center",
+              "h-11 w-11 rounded-full items-center justify-center shrink-0",
               showSortMenu ? "bg-primary/10" : "bg-muted/50"
             )}
           >