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

1 files changed, 55 insertions, 0 deletions

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>
+  );
+}