deps(mobile): Upgrade to Expo 52 (#692)

* fix(mobile): Sharing bookmark modal

* WIP: Upgrade to 52

* post ugprade fixes

* more fixes

* fix padding in tabbar

2 files changed, 57 insertions, 46 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
index e1b1bdbc..d573df21 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import {
   Keyboard,
   Pressable,
+  ScrollView,
   Text,
   TouchableWithoutFeedback,
   View,
 } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import TagPill from "@/components/bookmarks/TagPill";
 import FullPageError from "@/components/FullPageError";
@@ -14,10 +14,12 @@ 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 { ChevronRight } from "lucide-react-native";
 
-import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
+import {
+  useAutoRefreshingBookmarkQuery,
+  useUpdateBookmark,
+} from "@hoarder/shared-react/hooks/bookmarks";
 import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
 import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 
@@ -25,32 +27,31 @@ function TagList({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <View className="flex gap-4">
       <Text className="text-lg 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-col gap-2">
+      <View className="flex gap-2">
+        {isBookmarkStillTagging(bookmark) ? (
+          <View className="flex gap-4 pb-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+          </View>
+        ) : bookmark.tags.length > 0 ? (
           <View className="flex flex-row flex-wrap gap-2 rounded-lg bg-background p-4">
             {bookmark.tags.map((t) => (
               <TagPill key={t.id} tag={t} />
             ))}
           </View>
-
-          <Pressable
-            onPress={() =>
-              router.push(`/dashboard/bookmarks/${bookmark.id}/manage_tags`)
-            }
-            className="flex w-full flex-row justify-between gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent"
-          >
-            <Text className="text-lg text-accent-foreground">Manage Tags</Text>
-            <ChevronRight color="rgb(0, 122, 255)" />
-          </Pressable>
-        </View>
-      ) : (
-        <Text className="text-foreground">No tags</Text>
-      )}
+        ) : (
+          <Text className="text-foreground">No tags</Text>
+        )}
+        <Pressable
+          onPress={() =>
+            router.push(`/dashboard/bookmarks/${bookmark.id}/manage_tags`)
+          }
+          className="flex w-full flex-row justify-between gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent"
+        >
+          <Text className="text-lg text-accent-foreground">Manage Tags</Text>
+          <ChevronRight color="rgb(0, 122, 255)" />
+        </Pressable>
+      </View>
     </View>
   );
 }
@@ -133,11 +134,12 @@ const ViewBookmarkPage = () => {
   if (typeof slug !== "string") {
     throw new Error("Unexpected param type");
   }
+
   const {
     data: bookmark,
     isPending,
     refetch,
-  } = api.bookmarks.getBookmark.useQuery({ bookmarkId: slug });
+  } = useAutoRefreshingBookmarkQuery({ bookmarkId: slug });
 
   if (isPending) {
     return <FullPageSpinner />;
@@ -167,6 +169,19 @@ const ViewBookmarkPage = () => {
         options={{
           headerShown: true,
           headerTitle: title ?? "Untitled",
+          headerRight: () => (
+            <Pressable
+              onPress={() => {
+                if (router.canGoBack()) {
+                  router.back();
+                } else {
+                  router.replace("dashboard");
+                }
+              }}
+            >
+              <Text className="text-foreground">Done</Text>
+            </Pressable>
+          ),
         }}
       />
       <ScrollView className="h-screen w-full p-4">
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
index 8429e4ba..3f24237b 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
@@ -8,7 +8,10 @@ import { Input } from "@/components/ui/Input";
 import { useToast } from "@/components/ui/Toast";
 import { Check, Plus } from "lucide-react-native";
 
-import { useUpdateBookmarkTags } from "@hoarder/shared-react/hooks/bookmarks";
+import {
+  useAutoRefreshingBookmarkQuery,
+  useUpdateBookmarkTags,
+} from "@hoarder/shared-react/hooks/bookmarks";
 import { api } from "@hoarder/shared-react/trpc";
 
 const NEW_TAG_ID = "new-tag";
@@ -47,28 +50,21 @@ const ListPickerPage = () => {
       ),
     },
   );
-  const { data: existingTags } = api.bookmarks.getBookmark.useQuery(
-    {
-      bookmarkId,
-    },
-    {
-      select: React.useCallback(
-        (data: { tags: { id: string; name: string }[] }) =>
-          data.tags.map((t) => ({
-            id: t.id,
-            name: t.name,
-            lowered: t.name.toLowerCase(),
-          })),
-        [],
-      ),
-    },
-  );
+  const { data: existingTags } = useAutoRefreshingBookmarkQuery({
+    bookmarkId,
+  });
 
-  const [optimisticTags, setOptimisticTags] = React.useState(
-    existingTags ?? [],
-  );
+  const [optimisticTags, setOptimisticTags] = React.useState<
+    { id: string; name: string; lowered: string }[]
+  >([]);
   React.useEffect(() => {
-    setOptimisticTags(existingTags ?? []);
+    setOptimisticTags(
+      existingTags?.tags.map((t) => ({
+        id: t.id,
+        name: t.name,
+        lowered: t.name.toLowerCase(),
+      })) ?? [],
+    );
   }, [existingTags]);
 
   const { mutate: updateTags } = useUpdateBookmarkTags({