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

3 files changed, 24 insertions, 71 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/(tabs)/search.tsx b/apps/mobile/app/dashboard/(tabs)/search.tsx
deleted file mode 100644
index d29c3b05..00000000
--- a/apps/mobile/app/dashboard/(tabs)/search.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useState } from "react";
-import { View } from "react-native";
-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";
-
-export default function Search() {
-  const [search, setSearch] = useState("");
-
-  const [query] = useDebounce(search, 10);
-
-  const onRefresh = api.useUtils().bookmarks.searchBookmarks.invalidate;
-
-  const { data, error, refetch, isPending } =
-    api.bookmarks.searchBookmarks.useQuery(
-      { text: query },
-      { placeholderData: keepPreviousData },
-    );
-
-  if (error) {
-    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}
-      />
-    </CustomSafeAreaView>
-  );
-}