ui(mobile): Replace bottom sheet with native screens

apps/mobile/app/_layout.tsx

@@ -12,7 +12,6 @@ import { StyledStack } from "@/components/navigation/stack";
 import { Providers } from "@/lib/providers";
 import useAppSettings from "@/lib/settings";
 import { cn } from "@/lib/utils";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { useColorScheme } from "nativewind";
 
 export default function RootLayout() {
@@ -37,44 +36,45 @@ export default function RootLayout() {
     <ShareIntentProvider>
       <Providers>
         <GestureHandlerRootView style={{ flex: 1 }}>
-          <BottomSheetModalProvider>
-            <View
-              className={cn(
-                "w-full flex-1 bg-gray-100 text-foreground dark:bg-background",
-                colorScheme == "dark" ? "dark" : "light",
-              )}
+          <View
+            className={cn(
+              "w-full flex-1 bg-gray-100 text-foreground dark:bg-background",
+              colorScheme == "dark" ? "dark" : "light",
+            )}
+          >
+            <StyledStack
+              contentClassName="bg-gray-100 dark:bg-background"
+              screenOptions={{
+                headerShown: false,
+                headerTransparent: true,
+              }}
             >
-              <StyledStack
-                contentClassName="bg-gray-100 dark:bg-background"
-                screenOptions={{
-                  headerShown: false,
-                  headerTransparent: true,
+              <Stack.Screen name="index" />
+              <Stack.Screen
+                name="signin"
+                options={{
+                  headerShown: true,
+                  headerBackVisible: true,
+                  headerBackTitle: "Back",
+                  title: "",
                 }}
-              >
-                <Stack.Screen name="index" />
-                <Stack.Screen
-                  name="signin"
-                  options={{
-                    headerShown: true,
-                    headerBackVisible: true,
-                    headerBackTitle: "Back",
-                    title: "",
-                  }}
-                />
-                <Stack.Screen name="server-address" />
-                <Stack.Screen name="sharing" />
-                <Stack.Screen
-                  name="test-connection"
-                  options={{
-                    title: "Test Connection",
-                    headerShown: true,
-                    presentation: "modal",
-                  }}
-                />
-              </StyledStack>
-              <StatusBar style="auto" />
-            </View>
-          </BottomSheetModalProvider>
+              />
+              <Stack.Screen name="server-address" />
+              <Stack.Screen
+                name="sharing"
+                options={{ presentation: "modal" }}
+              />
+              <Stack.Screen
+                name="test-connection"
+                options={{
+                  title: "Test Connection",
+                  headerShown: true,
+                  presentation: "modal",
+                }}
+              />
+            </StyledStack>
+            <StatusBar style="auto" />
+          </View>
         </GestureHandlerRootView>
       </Providers>
     </ShareIntentProvider>

apps/mobile/app/dashboard/(tabs)/index.tsx

@@ -1,17 +1,14 @@
-import { useRef } from "react";
 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";
 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, Search } from "lucide-react-native";
 
@@ -77,19 +74,18 @@ function HeaderRight({
 }
 
 export default function Home() {
-  const newBookmarkModal = useRef<BottomSheetModal>(null);
-
   return (
     <CustomSafeAreaView>
-      <NoteEditorModal ref={newBookmarkModal} snapPoints={["90%", "60%"]} />
       <UpdatingBookmarkList
         query={{ archived: false }}
         header={
           <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()}
+                openNewBookmarkModal={() =>
+                  router.push("/dashboard/bookmarks/new")
+                }
               />
             </View>
             <Pressable

apps/mobile/app/dashboard/(tabs)/lists.tsx

@@ -1,15 +1,13 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { FlatList, Pressable, Text, View } from "react-native";
 import * as Haptics from "expo-haptics";
-import { Link } from "expo-router";
+import { Link, router } from "expo-router";
 import FullPageError from "@/components/FullPageError";
-import NewListModal from "@/components/lists/NewListModal";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
 import { ChevronRight, Plus } from "lucide-react-native";
 
 import { useBookmarkLists } from "@hoarder/shared-react/hooks/lists";
@@ -72,7 +70,6 @@ export default function Lists() {
     {},
   );
   const apiUtils = api.useUtils();
-  const newListModal = useRef<BottomSheetModal>(null);
 
   useEffect(() => {
     setRefreshing(isPending);
@@ -117,14 +114,13 @@ export default function Lists() {
 
   return (
     <CustomSafeAreaView>
-      <NewListModal ref={newListModal} snapPoints={["90%"]} />
       <FlatList
         className="h-full"
         ListHeaderComponent={
           <View className="flex flex-row justify-between">
             <PageTitle title="Lists" />
             <HeaderRight
-              openNewListModal={() => newListModal.current?.present()}
+              openNewListModal={() => router.push("/dashboard/lists/new")}
             />
           </View>
         }

apps/mobile/app/dashboard/_layout.tsx

@@ -49,6 +49,49 @@ export default function Dashboard() {
           headerTransparent: true,
         }}
       />
+      <Stack.Screen
+        name="bookmarks/[slug]/index"
+        options={{
+          headerTitle: "",
+          headerBackTitle: "Back",
+          headerTransparent: true,
+        }}
+      />
+      <Stack.Screen
+        name="bookmarks/new"
+        options={{
+          headerTitle: "New Bookmark",
+          headerBackTitle: "Back",
+          headerTransparent: true,
+          presentation: "modal",
+        }}
+      />
+      <Stack.Screen
+        name="bookmarks/[slug]/manage_lists"
+        options={{
+          headerTitle: "Manage Lists",
+          headerBackTitle: "Back",
+          headerTransparent: true,
+          presentation: "modal",
+        }}
+      />
+      <Stack.Screen
+        name="bookmarks/[slug]/info"
+        options={{
+          headerBackTitle: "Back",
+          headerTransparent: true,
+          presentation: "modal",
+        }}
+      />
+      <Stack.Screen
+        name="lists/new"
+        options={{
+          headerTitle: "New List",
+          headerBackTitle: "Back",
+          headerTransparent: true,
+          presentation: "modal",
+        }}
+      />
       <Stack.Screen
         name="archive"
         options={{
@@ -64,6 +107,8 @@ export default function Dashboard() {
           headerBackTitle: "",
           headerTransparent: true,
           headerShown: false,
+          animation: "fade_from_bottom",
+          animationDuration: 100,
         }}
       />
       <Stack.Screen

apps/mobile/app/dashboard/bookmarks/[slug].tsx → 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,21 +74,20 @@ function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
         />
       ),
       shouldRender: true,
-      onClick: () => manageListsSheetRef.current?.present(),
+      onClick: () =>
+        router.push(`/dashboard/bookmarks/${bookmark.id}/manage_lists`),
       disabled: false,
     },
     {
       id: "open",
       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) =>