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

4 files changed, 56 insertions, 39 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index cf7e473f..cf1eb01f 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Tabs } from "expo-router";
 import { StyledTabs } from "@/components/navigation/tabs";
-import { ClipboardList, Home, Search, Settings } from "lucide-react-native";
+import { ClipboardList, Home, Settings } from "lucide-react-native";
 
 export default function TabLayout() {
   return (
@@ -20,13 +20,6 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="search"
-        options={{
-          title: "Search",
-          tabBarIcon: ({ color }) => <Search color={color} />,
-        }}
-      />
-      <Tabs.Screen
         name="lists"
         options={{
           title: "Lists",
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>
         }
       />
diff --git a/apps/mobile/app/dashboard/_layout.tsx b/apps/mobile/app/dashboard/_layout.tsx
index a1a25398..609f06f5 100644
--- a/apps/mobile/app/dashboard/_layout.tsx
+++ b/apps/mobile/app/dashboard/_layout.tsx
@@ -58,6 +58,15 @@ export default function Dashboard() {
         }}
       />
       <Stack.Screen
+        name="search"
+        options={{
+          headerTitle: "",
+          headerBackTitle: "",
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
         name="settings/theme"
         options={{
           title: "Theme",
diff --git a/apps/mobile/app/dashboard/(tabs)/search.tsx b/apps/mobile/app/dashboard/search.tsx
index d29c3b05..884345e7 100644
--- a/apps/mobile/app/dashboard/(tabs)/search.tsx
+++ b/apps/mobile/app/dashboard/search.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { View } from "react-native";
+import { Pressable, Text, View } from "react-native";
+import { router } from "expo-router";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
-import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useDebounce } from "use-debounce";
@@ -27,30 +27,29 @@ export default function Search() {
     return <FullPageError error={error.message} onRetry={() => refetch()} />;
   }
 
-  if (!data) {
-    return <FullPageSpinner />;
-  }
-
   return (
     <CustomSafeAreaView>
-      <BookmarkList
-        bookmarks={data.bookmarks}
-        header={
-          <View>
-            <PageTitle title="Search" />
-            <Input
-              placeholder="Search"
-              className="mx-1"
-              value={search}
-              onChangeText={setSearch}
-              autoFocus
-              autoCapitalize="none"
-            />
-          </View>
-        }
-        onRefresh={onRefresh}
-        isRefreshing={isPending}
-      />
+      <View className="flex flex-row items-center gap-3 p-3">
+        <Input
+          placeholder="Search"
+          className="flex-1"
+          value={search}
+          onChangeText={setSearch}
+          autoFocus
+          autoCapitalize="none"
+        />
+        <Pressable onPress={() => router.back()}>
+          <Text className="text-foreground">Cancel</Text>
+        </Pressable>
+      </View>
+      {!data && <FullPageSpinner />}
+      {data && (
+        <BookmarkList
+          bookmarks={data.bookmarks}
+          onRefresh={onRefresh}
+          isRefreshing={isPending}
+        />
+      )}
     </CustomSafeAreaView>
   );
 }