From cc84e0177753af6e0517e855187b022d80be3226 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 23 Nov 2024 19:28:55 +0000
Subject: ui(mobile): Remove the dedicated search page and add a search bar in
 home

---
 apps/mobile/app/dashboard/(tabs)/_layout.tsx |  9 +----
 apps/mobile/app/dashboard/(tabs)/index.tsx   | 30 +++++++++++----
 apps/mobile/app/dashboard/(tabs)/search.tsx  | 56 ----------------------------
 apps/mobile/app/dashboard/_layout.tsx        |  9 +++++
 apps/mobile/app/dashboard/search.tsx         | 55 +++++++++++++++++++++++++++
 5 files changed, 88 insertions(+), 71 deletions(-)
 delete mode 100644 apps/mobile/app/dashboard/(tabs)/search.tsx
 create mode 100644 apps/mobile/app/dashboard/search.tsx

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 (
@@ -19,13 +19,6 @@ export default function TabLayout() {
           tabBarIcon: ({ color }) => <Home color={color} />,
         }}
       />
-      <Tabs.Screen
-        name="search"
-        options={{
-          title: "Search",
-          tabBarIcon: ({ color }) => <Search color={color} />,
-        }}
-      />
       <Tabs.Screen
         name="lists"
         options={{
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>
-  );
-}
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
@@ -57,6 +57,15 @@ export default function Dashboard() {
           headerTransparent: true,
         }}
       />
+      <Stack.Screen
+        name="search"
+        options={{
+          headerTitle: "",
+          headerBackTitle: "",
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name="settings/theme"
         options={{
diff --git a/apps/mobile/app/dashboard/search.tsx b/apps/mobile/app/dashboard/search.tsx
new file mode 100644
index 00000000..884345e7
--- /dev/null
+++ b/apps/mobile/app/dashboard/search.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+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 { 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()} />;
+  }
+
+  return (
+    <CustomSafeAreaView>
+      <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>
+  );
+}
-- 
cgit v1.2.3-70-g09d2