feat(mobile): Add support for viewing PDFs (#1519)

* feat(mobile): add react-native-pdf dependency

Add react-native-pdf package to enable PDF viewing functionality
in the mobile app. This will be used to display PDF bookmarks
directly within the app.

Part of #597

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat(mobile): add PDF viewer component with authentication support

Add a dedicated PDFViewer component that handles downloading and
displaying PDF assets with proper authentication headers. Features
include:

- Download progress indication
- Error handling with user-friendly messages
- Automatic cleanup of temporary files
- Proper memory management to prevent leaks
- Content type validation for PDF files

Part of #597

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat(mobile): integrate PDF viewing in bookmark detail view

Integrate the PDFViewer component to display PDF bookmarks inline.
When a bookmark is a PDF asset, it now renders using the dedicated
PDF viewer instead of treating it as an image.

Also adds external PDF opening functionality with platform-specific
handling for iOS and Android, proper filename handling, and temporary
file cleanup.

Additionally fixes dark mode styling for the navigation header to ensure
proper contrast in both light and dark themes.

Part of #597

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* revert the open externally button

* use react query for downloading the pdf

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: MohamedBassem <me@mbassem.com>

1 files changed, 20 insertions, 2 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
index 01ee61de..1cf2ad3d 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
@@ -18,6 +18,7 @@ import {
   BookmarkLinkScreenshotPreview,
 } from "@/components/bookmarks/BookmarkLinkPreview";
 import BookmarkTextMarkdown from "@/components/bookmarks/BookmarkTextMarkdown";
+import { PDFViewer } from "@/components/bookmarks/PDFViewer";
 import FullPageError from "@/components/FullPageError";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import { Button } from "@/components/ui/Button";
@@ -91,6 +92,7 @@ function BookmarkLinkTypeSelector({
 function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
   const router = useRouter();
+
   const { mutate: deleteBookmark, isPending: isDeletionPending } =
     useDeleteBookmark({
       onSuccess: () => {
@@ -304,6 +306,20 @@ function BookmarkAssetView({ bookmark }: { bookmark: ZBookmark }) {
     throw new Error("Wrong content type rendered");
   }
   const assetSource = useAssetUrl(bookmark.content.assetId);
+
+  // Check if this is a PDF asset
+  if (bookmark.content.assetType === "pdf") {
+    return (
+      <View className="flex flex-1">
+        <PDFViewer
+          source={assetSource.uri ?? ""}
+          headers={assetSource.headers}
+        />
+      </View>
+    );
+  }
+
+  // Handle image assets as before
   return (
     <View className="flex flex-1 gap-2">
       <ImageView
@@ -327,6 +343,7 @@ function BookmarkAssetView({ bookmark }: { bookmark: ZBookmark }) {
 export default function ListView() {
   const { slug } = useLocalSearchParams();
   const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
 
   const [bookmarkLinkType, setBookmarkLinkType] =
     useState<BookmarkLinkType>("reader");
@@ -380,10 +397,11 @@ export default function ListView() {
           headerTitle: title ?? "",
           headerBackTitle: "Back",
           headerTransparent: false,
-          headerTintColor: colorScheme === "dark" ? "#ffffff" : undefined,
+          headerShown: true,
           headerStyle: {
-            backgroundColor: colorScheme === "dark" ? "#000000" : undefined,
+            backgroundColor: isDark ? "#000" : "#fff",
           },
+          headerTintColor: isDark ? "#fff" : "#000",
           headerRight: () =>
             bookmark.content.type === BookmarkTypes.LINK ? (
               <BookmarkLinkTypeSelector