fix(mobile): Fix crash when bookmark doesn't have archive or screenshot. Fixes #1584

2 files changed, 65 insertions, 26 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
index 1cf2ad3d..00954dd8 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
@@ -47,41 +47,75 @@ import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks";
 
 type BookmarkLinkType = "browser" | "reader" | "screenshot" | "archive";
 
+function getAvailableViewTypes(bookmark: ZBookmark): BookmarkLinkType[] {
+  if (bookmark.content.type !== BookmarkTypes.LINK) {
+    return [];
+  }
+
+  const availableTypes: BookmarkLinkType[] = ["browser", "reader"];
+
+  if (bookmark.assets.some((asset) => asset.assetType === "screenshot")) {
+    availableTypes.push("screenshot");
+  }
+
+  if (
+    bookmark.assets.some(
+      (asset) =>
+        asset.assetType === "precrawledArchive" ||
+        asset.assetType === "fullPageArchive",
+    )
+  ) {
+    availableTypes.push("archive");
+  }
+
+  return availableTypes;
+}
+
 function BookmarkLinkTypeSelector({
   type,
   onChange,
+  bookmark,
 }: {
   type: BookmarkLinkType;
   onChange: (type: BookmarkLinkType) => void;
+  bookmark: ZBookmark;
 }) {
+  const availableTypes = getAvailableViewTypes(bookmark);
+
+  const allActions = [
+    {
+      id: "reader" as const,
+      title: "Reader View",
+      state: type === "reader" ? ("on" as const) : undefined,
+    },
+    {
+      id: "browser" as const,
+      title: "Browser",
+      state: type === "browser" ? ("on" as const) : undefined,
+    },
+    {
+      id: "screenshot" as const,
+      title: "Screenshot",
+      state: type === "screenshot" ? ("on" as const) : undefined,
+    },
+    {
+      id: "archive" as const,
+      title: "Archived Page",
+      state: type === "archive" ? ("on" as const) : undefined,
+    },
+  ];
+
+  const availableActions = allActions.filter((action) =>
+    availableTypes.includes(action.id),
+  );
+
   return (
     <MenuView
       onPressAction={({ nativeEvent }) => {
         Haptics.selectionAsync();
         onChange(nativeEvent.event as BookmarkLinkType);
       }}
-      actions={[
-        {
-          id: "reader",
-          title: "Reader",
-          state: type === "reader" ? "on" : undefined,
-        },
-        {
-          id: "browser",
-          title: "Browser",
-          state: type === "browser" ? "on" : undefined,
-        },
-        {
-          id: "screenshot",
-          title: "Screenshot",
-          state: type === "screenshot" ? "on" : undefined,
-        },
-        {
-          id: "archive",
-          title: "Archive",
-          state: type === "archive" ? "on" : undefined,
-        },
-      ]}
+      actions={availableActions}
       shouldOpenOnLongPress={false}
     >
       <ChevronDown onPress={() => Haptics.selectionAsync()} color="gray" />
@@ -346,7 +380,7 @@ export default function ListView() {
   const isDark = colorScheme === "dark";
 
   const [bookmarkLinkType, setBookmarkLinkType] =
-    useState<BookmarkLinkType>("reader");
+    useState<BookmarkLinkType>("browser");
 
   if (typeof slug !== "string") {
     throw new Error("Unexpected param type");
@@ -407,6 +441,7 @@ export default function ListView() {
               <BookmarkLinkTypeSelector
                 type={bookmarkLinkType}
                 onChange={(type) => setBookmarkLinkType(type)}
+                bookmark={bookmark}
               />
             ) : undefined,
         }}
diff --git a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
index 5e1e7aa7..03999c3e 100644
--- a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Pressable, View } from "react-native";
+import { Pressable, Text, View } from "react-native";
 import ImageView from "react-native-image-viewing";
 import WebView from "react-native-webview";
 import { WebViewSourceUri } from "react-native-webview/lib/WebViewTypes";
@@ -130,7 +130,9 @@ export function BookmarkLinkArchivePreview({
 
   if (!asset) {
     return (
-      <View className="flex-1 bg-background">Asset has no offline archive</View>
+      <View className="flex-1 bg-background">
+        <Text>Asset has no offline archive</Text>
+      </View>
     );
   }
 
@@ -159,7 +161,9 @@ export function BookmarkLinkScreenshotPreview({
 
   if (!asset) {
     return (
-      <View className="flex-1 bg-background">Asset has no screenshot</View>
+      <View className="flex-1 bg-background">
+        <Text>Asset has no screenshot</Text>
+      </View>
     );
   }