feature(mobile): Show the view bookmark modal for links as well

2 files changed, 56 insertions, 5 deletions

diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index 0b787372..14eb3cf3 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -9,7 +9,6 @@ import {
   View,
 } from "react-native";
 import * as Haptics from "expo-haptics";
-import * as WebBrowser from "expo-web-browser";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
 import { BottomSheetModal } from "@gorhom/bottom-sheet";
@@ -176,6 +175,7 @@ function TagList({ bookmark }: { bookmark: ZBookmark }) {
 
 function LinkCard({
   bookmark,
+  onOpenBookmark,
 }: {
   bookmark: ZBookmark;
   onOpenBookmark: () => void;
@@ -221,11 +221,11 @@ function LinkCard({
 
   return (
     <View className="flex gap-2">
-      {imageComp}
+      <Pressable onPress={onOpenBookmark}>{imageComp}</Pressable>
       <View className="flex gap-2 p-2">
         <Text
           className="line-clamp-2 text-xl font-bold text-foreground"
-          onPress={() => WebBrowser.openBrowserAsync(url)}
+          onPress={onOpenBookmark}
         >
           {bookmark.title ?? bookmark.content.title ?? parsedUrl.host}
         </Text>
diff --git a/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx b/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx
index 6bec88af..059b990e 100644
--- a/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx
+++ b/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import { Keyboard, Pressable, Text } from "react-native";
 import ImageView from "react-native-image-viewing";
+import * as WebBrowser from "expo-web-browser";
 import { useAssetUrl } from "@/lib/hooks";
+import { cn } from "@/lib/utils";
 import {
   BottomSheetBackdrop,
   BottomSheetModal,
@@ -10,6 +12,7 @@ import {
   BottomSheetView,
   TouchableWithoutFeedback,
 } from "@gorhom/bottom-sheet";
+import { ExternalLink } from "lucide-react-native";
 
 import {
   useUpdateBookmark,
@@ -18,6 +21,8 @@ import {
 import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
 import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 
+import { TailwindResolver } from "../TailwindResolver";
+import { buttonVariants } from "../ui/Button";
 import { Input } from "../ui/Input";
 import PageTitle from "../ui/PageTitle";
 import { Skeleton } from "../ui/Skeleton";
@@ -74,6 +79,51 @@ function NotesEditor({ bookmark }: { bookmark: ZBookmark }) {
   );
 }
 
+function BookmarkLinkView({ bookmark }: { bookmark: ZBookmark }) {
+  const [imageZoom, setImageZoom] = useState(false);
+  if (bookmark.content.type !== BookmarkTypes.LINK) {
+    throw new Error("Wrong content type rendered");
+  }
+  const url = new URL(bookmark.content.url);
+
+  const imageAssetId =
+    bookmark.content.imageAssetId ?? bookmark.content.screenshotAssetId ?? "";
+  const assetSource = useAssetUrl(imageAssetId);
+  return (
+    <BottomSheetView className="flex gap-2">
+      <Pressable
+        className={cn(
+          buttonVariants({ variant: "default" }),
+          "flex w-fit flex-row items-center gap-2",
+        )}
+        onPress={() => WebBrowser.openBrowserAsync(url.toString())}
+      >
+        <Text className="text-background">{url.host}</Text>
+        <TailwindResolver
+          className="color-background"
+          comp={(styles) => (
+            <ExternalLink size={20} color={styles?.color?.toString()} />
+          )}
+        />
+      </Pressable>
+      <ImageView
+        visible={imageZoom}
+        imageIndex={0}
+        onRequestClose={() => setImageZoom(false)}
+        doubleTapToZoomEnabled={true}
+        images={[assetSource]}
+      />
+
+      <Pressable onPress={() => setImageZoom(true)}>
+        <BookmarkAssetImage
+          assetId={imageAssetId}
+          className="h-56 min-h-56 w-full object-cover"
+        />
+      </Pressable>
+    </BottomSheetView>
+  );
+}
+
 function BookmarkTextView({ bookmark }: { bookmark: ZBookmark }) {
   if (bookmark.content.type !== BookmarkTypes.TEXT) {
     throw new Error("Wrong content type rendered");
@@ -162,7 +212,8 @@ const ViewBookmarkModal = React.forwardRef<
   let title = null;
   switch (bookmark.content.type) {
     case BookmarkTypes.LINK:
-      comp = null;
+      title = bookmark.title ?? bookmark.content.title;
+      comp = <BookmarkLinkView bookmark={bookmark} />;
       break;
     case BookmarkTypes.TEXT:
       title = bookmark.title;
@@ -188,7 +239,7 @@ const ViewBookmarkModal = React.forwardRef<
       <BottomSheetScrollView className="flex flex-1">
         <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
           <BottomSheetView className="flex flex-1">
-            <PageTitle title={title ?? "Untitled"} />
+            <PageTitle title={title ?? "Untitled"} className="line-clamp-2" />
             <BottomSheetView className="gap-4 px-4">
               {comp}
               <TagList bookmark={bookmark} />