ui(mobile): Replace bottom sheet with native screens (#690)

* Remove bottom sheet from bookmark info page

* Remove bottom sheet from manage lists page

* Remove bottom sheet from new list page

* Remove bottom sheet from new bookmark page

* Drop bottom-sheets

* Improve the look of the modals

* Make the search page fade from bottom

4 files changed, 302 insertions, 27 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug].tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
index 9459488a..87330a88 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug].tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import {
   Alert,
   Keyboard,
@@ -12,8 +12,6 @@ import WebView from "react-native-webview";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import BookmarkAssetImage from "@/components/bookmarks/BookmarkAssetImage";
 import BookmarkTextMarkdown from "@/components/bookmarks/BookmarkTextMarkdown";
-import ListPickerModal from "@/components/bookmarks/ListPickerModal";
-import ViewBookmarkModal from "@/components/bookmarks/ViewBookmarkModal";
 import FullPageError from "@/components/FullPageError";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import { Button } from "@/components/ui/Button";
@@ -23,13 +21,7 @@ import { Input } from "@/components/ui/Input";
 import { useToast } from "@/components/ui/Toast";
 import { useAssetUrl } from "@/lib/hooks";
 import { api } from "@/lib/trpc";
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
-import {
-  ArrowUpFromLine,
-  ClipboardList,
-  Globe,
-  Trash2,
-} from "lucide-react-native";
+import { ClipboardList, Globe, Info, Trash2 } from "lucide-react-native";
 
 import {
   useDeleteBookmark,
@@ -40,8 +32,6 @@ import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
   const router = useRouter();
-  const viewBookmarkModal = useRef<BottomSheetModal>(null);
-  const manageListsSheetRef = useRef<BottomSheetModal>(null);
   const { mutate: deleteBookmark, isPending: isDeletionPending } =
     useDeleteBookmark({
       onSuccess: () => {
@@ -84,7 +74,8 @@ function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
         />
       ),
       shouldRender: true,
-      onClick: () => manageListsSheetRef.current?.present(),
+      onClick: () =>
+        router.push(`/dashboard/bookmarks/${bookmark.id}/manage_lists`),
       disabled: false,
     },
     {
@@ -92,13 +83,11 @@ function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
       icon: (
         <TailwindResolver
           className="text-foreground"
-          comp={(styles) => (
-            <ArrowUpFromLine color={styles?.color?.toString()} />
-          )}
+          comp={(styles) => <Info color={styles?.color?.toString()} />}
         />
       ),
       shouldRender: true,
-      onClick: () => viewBookmarkModal.current?.present(),
+      onClick: () => router.push(`/dashboard/bookmarks/${bookmark.id}/info`),
       disabled: false,
     },
     {
@@ -130,16 +119,6 @@ function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
   ];
   return (
     <View>
-      <ViewBookmarkModal
-        bookmark={bookmark}
-        ref={viewBookmarkModal}
-        snapPoints={["95%"]}
-      />
-      <ListPickerModal
-        ref={manageListsSheetRef}
-        snapPoints={["50%", "90%"]}
-        bookmarkId={bookmark.id}
-      />
       <View className="flex flex-row items-center justify-between px-10 pb-2 pt-4">
         {actions.map(
           (a) =>
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
new file mode 100644
index 00000000..5d15ab6b
--- /dev/null
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { Stack, useLocalSearchParams } from "expo-router";
+import TagPill from "@/components/bookmarks/TagPill";
+import FullPageError from "@/components/FullPageError";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import { Input } from "@/components/ui/Input";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { api } from "@/lib/trpc";
+
+import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
+import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
+import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
+
+function TagList({ bookmark }: { bookmark: ZBookmark }) {
+  return (
+    <View className="flex flex-row items-center gap-4">
+      <Text className="text-foreground">Tags</Text>
+      {isBookmarkStillTagging(bookmark) ? (
+        <>
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-full" />
+        </>
+      ) : bookmark.tags.length > 0 ? (
+        <View className="flex flex-row flex-wrap gap-2">
+          {bookmark.tags.map((t) => (
+            <TagPill key={t.id} tag={t} />
+          ))}
+        </View>
+      ) : (
+        <Text className="text-foreground">No tags</Text>
+      )}
+    </View>
+  );
+}
+
+function NotesEditor({ bookmark }: { bookmark: ZBookmark }) {
+  const { mutate, isPending } = useUpdateBookmark();
+  return (
+    <View className="flex flex-row items-center gap-4">
+      <Text className="text-foreground">Notes</Text>
+
+      <Input
+        className="flex-1"
+        editable={!isPending}
+        multiline={true}
+        numberOfLines={3}
+        loading={isPending}
+        placeholder="Notes"
+        textAlignVertical="top"
+        onEndEditing={(ev) =>
+          mutate({
+            bookmarkId: bookmark.id,
+            note: ev.nativeEvent.text,
+          })
+        }
+        defaultValue={bookmark.note ?? ""}
+      />
+    </View>
+  );
+}
+
+const ViewBookmarkPage = () => {
+  const { slug } = useLocalSearchParams();
+  if (typeof slug !== "string") {
+    throw new Error("Unexpected param type");
+  }
+  const {
+    data: bookmark,
+    isPending,
+    refetch,
+  } = api.bookmarks.getBookmark.useQuery({ bookmarkId: slug });
+
+  if (isPending) {
+    return <FullPageSpinner />;
+  }
+
+  if (!bookmark) {
+    return (
+      <FullPageError error="Bookmark not found" onRetry={() => refetch()} />
+    );
+  }
+
+  let title = null;
+  switch (bookmark.content.type) {
+    case BookmarkTypes.LINK:
+      title = bookmark.title ?? bookmark.content.title;
+      break;
+    case BookmarkTypes.TEXT:
+      title = bookmark.title;
+      break;
+    case BookmarkTypes.ASSET:
+      title = bookmark.title ?? bookmark.content.fileName;
+      break;
+  }
+  return (
+    <CustomSafeAreaView>
+      <Stack.Screen
+        options={{
+          headerShown: true,
+          headerTitle: title ?? "Untitled",
+        }}
+      />
+      <View className="w-full p-4">
+        <View className="gap-4 px-4">
+          <TagList bookmark={bookmark} />
+          <NotesEditor bookmark={bookmark} />
+        </View>
+      </View>
+    </CustomSafeAreaView>
+  );
+};
+
+export default ViewBookmarkPage;
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx
new file mode 100644
index 00000000..b38261df
--- /dev/null
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import { FlatList, Pressable, Text, View } from "react-native";
+import Checkbox from "expo-checkbox";
+import { useLocalSearchParams } from "expo-router";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import { useToast } from "@/components/ui/Toast";
+
+import {
+  useAddBookmarkToList,
+  useBookmarkLists,
+  useRemoveBookmarkFromList,
+} from "@hoarder/shared-react/hooks/lists";
+import { api } from "@hoarder/shared-react/trpc";
+
+const ListPickerPage = () => {
+  const { slug: bookmarkId } = useLocalSearchParams();
+  if (typeof bookmarkId !== "string") {
+    throw new Error("Unexpected param type");
+  }
+  const { toast } = useToast();
+  const onError = () => {
+    toast({
+      message: "Something went wrong",
+      variant: "destructive",
+      showProgress: false,
+    });
+  };
+  const { data: existingLists } = api.lists.getListsOfBookmark.useQuery(
+    {
+      bookmarkId,
+    },
+    {
+      select: (data) => new Set(data.lists.map((l) => l.id)),
+    },
+  );
+  const { data } = useBookmarkLists();
+
+  const { mutate: addToList } = useAddBookmarkToList({
+    onSuccess: () => {
+      toast({
+        message: `The bookmark has been added to the list!`,
+        showProgress: false,
+      });
+    },
+    onError,
+  });
+
+  const { mutate: removeToList } = useRemoveBookmarkFromList({
+    onSuccess: () => {
+      toast({
+        message: `The bookmark has been removed from the list!`,
+        showProgress: false,
+      });
+    },
+    onError,
+  });
+
+  const toggleList = (listId: string) => {
+    if (!existingLists) {
+      return;
+    }
+    if (existingLists.has(listId)) {
+      removeToList({ bookmarkId, listId });
+    } else {
+      addToList({ bookmarkId, listId });
+    }
+  };
+
+  const { allPaths } = data ?? {};
+  return (
+    <CustomSafeAreaView>
+      <FlatList
+        className="h-full"
+        contentContainerStyle={{
+          gap: 5,
+        }}
+        renderItem={(l) => (
+          <View className="mx-2 flex flex-row items-center rounded-xl border border-input bg-white px-4 py-2 dark:bg-accent">
+            <Pressable
+              key={l.item[l.item.length - 1].id}
+              onPress={() => toggleList(l.item[l.item.length - 1].id)}
+              className="flex w-full flex-row justify-between"
+            >
+              <Text className="text-lg text-accent-foreground">
+                {l.item.map((item) => `${item.icon} ${item.name}`).join(" / ")}
+              </Text>
+              <Checkbox
+                value={
+                  existingLists &&
+                  existingLists.has(l.item[l.item.length - 1].id)
+                }
+                onValueChange={() => {
+                  toggleList(l.item[l.item.length - 1].id);
+                }}
+              />
+            </Pressable>
+          </View>
+        )}
+        data={allPaths}
+      />
+    </CustomSafeAreaView>
+  );
+};
+
+export default ListPickerPage;
diff --git a/apps/mobile/app/dashboard/bookmarks/new.tsx b/apps/mobile/app/dashboard/bookmarks/new.tsx
new file mode 100644
index 00000000..06a16a40
--- /dev/null
+++ b/apps/mobile/app/dashboard/bookmarks/new.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { Text, View } from "react-native";
+import { router } from "expo-router";
+import { Button } from "@/components/ui/Button";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import { Input } from "@/components/ui/Input";
+import { useToast } from "@/components/ui/Toast";
+
+import { useCreateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
+import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
+
+const NoteEditorPage = () => {
+  const dismiss = () => {
+    router.back();
+  };
+
+  const [text, setText] = useState("");
+  const [error, setError] = useState<string | undefined>();
+  const { toast } = useToast();
+
+  const { mutate: createBookmark } = useCreateBookmark({
+    onSuccess: (resp) => {
+      if (resp.alreadyExists) {
+        toast({
+          message: "Bookmark already exists",
+        });
+      }
+      setText("");
+      dismiss();
+    },
+    onError: (e) => {
+      let message;
+      if (e.data?.zodError) {
+        const zodError = e.data.zodError;
+        message = JSON.stringify(zodError);
+      } else {
+        message = `Something went wrong: ${e.message}`;
+      }
+      setError(message);
+    },
+  });
+
+  const onSubmit = () => {
+    const data = text.trim();
+    try {
+      const url = new URL(data);
+      if (url.protocol != "http:" && url.protocol != "https:") {
+        throw new Error(`Unsupported URL protocol: ${url.protocol}`);
+      }
+      createBookmark({ type: BookmarkTypes.LINK, url: data });
+    } catch (e: unknown) {
+      createBookmark({ type: BookmarkTypes.TEXT, text: data });
+    }
+  };
+
+  return (
+    <CustomSafeAreaView>
+      <View className="gap-2 px-4">
+        {error && (
+          <Text className="w-full text-center text-red-500">{error}</Text>
+        )}
+        <Input
+          onChangeText={setText}
+          multiline
+          placeholder="What's on your mind?"
+          autoFocus
+          autoCapitalize={"none"}
+          textAlignVertical="top"
+        />
+        <Button onPress={onSubmit} label="Save" />
+      </View>
+    </CustomSafeAreaView>
+  );
+};
+
+export default NoteEditorPage;