fix(mobile): Allow expanding the text by clicking on bookmark card

1 files changed, 82 insertions, 0 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug].tsx b/apps/mobile/app/dashboard/bookmarks/[slug].tsx
new file mode 100644
index 00000000..c7b0cead
--- /dev/null
+++ b/apps/mobile/app/dashboard/bookmarks/[slug].tsx
@@ -0,0 +1,82 @@
+import { View } from "react-native";
+import { Stack, useLocalSearchParams } from "expo-router";
+import BookmarkAssetImage from "@/components/bookmarks/BookmarkAssetImage";
+import BookmarkTextMarkdown from "@/components/bookmarks/BookmarkTextMarkdown";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import PageTitle from "@/components/ui/PageTitle";
+import { api } from "@/lib/trpc";
+
+import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
+
+function BookmarkTextView({ bookmark }: { bookmark: ZBookmark }) {
+  if (bookmark.content.type !== BookmarkTypes.TEXT) {
+    throw new Error("Wrong content type rendered");
+  }
+  const content = bookmark.content.text;
+
+  return (
+    <View className="flex gap-2">
+      <BookmarkTextMarkdown text={content} />
+    </View>
+  );
+}
+
+function BookmarkAssetView({ bookmark }: { bookmark: ZBookmark }) {
+  if (bookmark.content.type !== BookmarkTypes.ASSET) {
+    throw new Error("Wrong content type rendered");
+  }
+  return (
+    <View className="flex gap-2">
+      <BookmarkAssetImage
+        assetId={bookmark.content.assetId}
+        className="h-56 min-h-56 w-full object-cover"
+      />
+    </View>
+  );
+}
+
+export default function BookmarkView() {
+  const { slug } = useLocalSearchParams();
+  if (typeof slug !== "string") {
+    throw new Error("Unexpected param type");
+  }
+
+  const { data: bookmark } = api.bookmarks.getBookmark.useQuery({
+    bookmarkId: slug,
+  });
+
+  let comp;
+  let title = null;
+  if (bookmark) {
+    switch (bookmark.content.type) {
+      case BookmarkTypes.LINK:
+        comp = null;
+        break;
+      case BookmarkTypes.TEXT:
+        title = bookmark.title;
+        comp = <BookmarkTextView bookmark={bookmark} />;
+        break;
+      case BookmarkTypes.ASSET:
+        title = bookmark.title ?? bookmark.content.fileName;
+        comp = <BookmarkAssetView bookmark={bookmark} />;
+        break;
+    }
+  } else {
+    comp = <FullPageSpinner />;
+  }
+
+  return (
+    <CustomSafeAreaView>
+      <Stack.Screen
+        options={{
+          headerTitle: "",
+          headerBackTitle: "Back",
+          headerTransparent: true,
+        }}
+      />
+      <PageTitle title={title ?? "Untitled"} />
+      <View className="px-4 py-2">{comp}</View>
+    </CustomSafeAreaView>
+  );
+}