ui(mobile): Remove the dedicated search page and add a search bar in home

1 files changed, 23 insertions, 7 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index de418be0..b9ab7d11 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -1,9 +1,11 @@
 import { useRef } from "react";
-import { Platform, View } from "react-native";
+import { Platform, Pressable, Text, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import * as ImagePicker from "expo-image-picker";
+import { router } from "expo-router";
 import NoteEditorModal from "@/components/bookmarks/NewBookmarkModal";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
+import { TailwindResolver } from "@/components/TailwindResolver";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import PageTitle from "@/components/ui/PageTitle";
 import { useToast } from "@/components/ui/Toast";
@@ -11,7 +13,7 @@ import useAppSettings from "@/lib/settings";
 import { useUploadAsset } from "@/lib/upload";
 import { BottomSheetModal } from "@gorhom/bottom-sheet";
 import { MenuView } from "@react-native-menu/menu";
-import { Plus } from "lucide-react-native";
+import { Plus, Search } from "lucide-react-native";
 
 function HeaderRight({
   openNewBookmarkModal,
@@ -83,11 +85,25 @@ export default function Home() {
       <UpdatingBookmarkList
         query={{ archived: false }}
         header={
-          <View className="flex flex-row justify-between">
-            <PageTitle title="Home" />
-            <HeaderRight
-              openNewBookmarkModal={() => newBookmarkModal.current?.present()}
-            />
+          <View className="flex flex-col gap-1">
+            <View className="flex flex-row justify-between">
+              <PageTitle title="Home" className="pb-2" />
+              <HeaderRight
+                openNewBookmarkModal={() => newBookmarkModal.current?.present()}
+              />
+            </View>
+            <Pressable
+              className="flex flex-row items-center gap-1 rounded-lg border border-input bg-background px-4 py-2.5"
+              onPress={() => router.push("/dashboard/search")}
+            >
+              <TailwindResolver
+                className="text-muted-foreground"
+                comp={(styles) => (
+                  <Search size={16} color={styles?.color?.toString()} />
+                )}
+              />
+              <Text className="text-muted-foreground">Search</Text>
+            </Pressable>
           </View>
         }
       />