feat: Add PDF screenshot generation and display

apps/mobile/components/bookmarks/BookmarkCard.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   ActivityIndicator,
   Alert,
@@ -300,11 +301,15 @@ function AssetCard({
   }
   const title = bookmark.title ?? bookmark.content.fileName;
 
+  const assetImage =
+    bookmark.assets.find((r) => r.assetType == "assetScreenshot")?.id ??
+    bookmark.content.assetId;
+
   return (
     <View className="flex gap-2">
       <Pressable onPress={onOpenBookmark}>
         <BookmarkAssetImage
-          assetId={bookmark.content.assetId}
+          assetId={assetImage}
           className="h-56 min-h-56 w-full object-cover"
         />
       </Pressable>

apps/web/components/admin/AdminActions.tsx

@@ -37,6 +37,21 @@ export default function AdminActions() {
       },
     });
 
+  const { mutate: reprocessAssetsFixMode, isPending: isReprocessingPending } =
+    api.admin.reprocessAssetsFixMode.useMutation({
+      onSuccess: () => {
+        toast({
+          description: "Reprocessing enqueued",
+        });
+      },
+      onError: (e) => {
+        toast({
+          variant: "destructive",
+          description: e.message,
+        });
+      },
+    });
+
   const {
     mutate: reRunInferenceOnAllBookmarks,
     isPending: isInferencePending,
@@ -124,6 +139,13 @@ export default function AdminActions() {
         >
           {t("admin.actions.reindex_all_bookmarks")}
         </ActionButton>
+        <ActionButton
+          variant="destructive"
+          loading={isReprocessingPending}
+          onClick={() => reprocessAssetsFixMode()}
+        >
+          {t("admin.actions.reprocess_assets_fix_mode")}
+        </ActionButton>
         <ActionButton
           variant="destructive"
           loading={isTidyAssetsPending}

apps/web/components/dashboard/bookmarks/AssetCard.tsx

@@ -2,6 +2,8 @@
 
 import Image from "next/image";
 import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { FileText } from "lucide-react";
 
 import type { ZBookmarkTypeAsset } from "@hoarder/shared/types/bookmarks";
 import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
@@ -32,12 +34,28 @@ function AssetImage({
       );
     }
     case "pdf": {
+      const screenshotAssetId = bookmark.assets.find(
+        (r) => r.assetType === "assetScreenshot",
+      )?.id;
+      if (!screenshotAssetId) {
+        return (
+          <div
+            className={cn(className, "flex items-center justify-center")}
+            title="PDF screenshot not available. Run asset preprocessing job to generate one screenshot"
+          >
+            <FileText size={80} />
+          </div>
+        );
+      }
       return (
-        <iframe
-          title={bookmarkedAsset.assetId}
-          className={className}
-          src={getAssetUrl(bookmarkedAsset.assetId)}
-        />
+        <Link href={`/dashboard/preview/${bookmark.id}`}>
+          <Image
+            alt="asset"
+            src={getAssetUrl(screenshotAssetId)}
+            fill={true}
+            className={className}
+          />
+        </Link>
       );
     }
     default: {

apps/web/components/dashboard/preview/AssetContentSection.tsx

@@ -1,42 +1,117 @@
+import { useMemo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useTranslation } from "@/lib/i18n/client";
 
+import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
 import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 
-export function AssetContentSection({ bookmark }: { bookmark: ZBookmark }) {
+// 20 MB
+const BIG_FILE_SIZE = 20 * 1024 * 1024;
+
+function PDFContentSection({ bookmark }: { bookmark: ZBookmark }) {
   if (bookmark.content.type != BookmarkTypes.ASSET) {
     throw new Error("Invalid content type");
   }
+  const { t } = useTranslation();
 
-  switch (bookmark.content.assetType) {
-    case "image": {
-      return (
-        <div className="relative h-full min-w-full">
-          <Link
-            href={`/api/assets/${bookmark.content.assetId}`}
-            target="_blank"
-          >
-            <Image
-              alt="asset"
-              fill={true}
-              className="object-contain"
-              src={`/api/assets/${bookmark.content.assetId}`}
-            />
-          </Link>
-        </div>
-      );
+  const initialSection = useMemo(() => {
+    if (bookmark.content.type != BookmarkTypes.ASSET) {
+      throw new Error("Invalid content type");
     }
-    case "pdf": {
-      return (
-        <iframe
-          title={bookmark.content.assetId}
-          className="h-full w-full"
-          src={`/api/assets/${bookmark.content.assetId}`}
-        />
-      );
+
+    const screenshot = bookmark.assets.find(
+      (item) => item.assetType === "assetScreenshot",
+    );
+    const bigSize =
+      bookmark.content.size && bookmark.content.size > BIG_FILE_SIZE;
+    if (bigSize && screenshot) {
+      return "screenshot";
     }
-    default: {
+    return "pdf";
+  }, [bookmark]);
+  const [section, setSection] = useState(initialSection);
+
+  const screenshot = bookmark.assets.find(
+    (r) => r.assetType === "assetScreenshot",
+  )?.id;
+
+  const content =
+    section === "screenshot" && screenshot ? (
+      <div className="relative h-full min-w-full">
+        <Image
+          alt="screenshot"
+          src={getAssetUrl(screenshot)}
+          fill={true}
+          className="object-contain"
+        />
+      </div>
+    ) : (
+      <iframe
+        title={bookmark.content.assetId}
+        className="h-full w-full"
+        src={getAssetUrl(bookmark.content.assetId)}
+      />
+    );
+
+  return (
+    <div className="flex h-full flex-col items-center gap-2">
+      <div className="flex w-full items-center justify-center gap-4">
+        <Select onValueChange={setSection} value={section}>
+          <SelectTrigger className="w-fit">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="screenshot" disabled={!screenshot}>
+                {t("common.screenshot")}
+              </SelectItem>
+              <SelectItem value="pdf">PDF</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+      {content}
+    </div>
+  );
+}
+
+function ImageContentSection({ bookmark }: { bookmark: ZBookmark }) {
+  if (bookmark.content.type != BookmarkTypes.ASSET) {
+    throw new Error("Invalid content type");
+  }
+  return (
+    <div className="relative h-full min-w-full">
+      <Link href={getAssetUrl(bookmark.content.assetId)} target="_blank">
+        <Image
+          alt="asset"
+          fill={true}
+          className="object-contain"
+          src={getAssetUrl(bookmark.content.assetId)}
+        />
+      </Link>
+    </div>
+  );
+}
+
+export function AssetContentSection({ bookmark }: { bookmark: ZBookmark }) {
+  if (bookmark.content.type != BookmarkTypes.ASSET) {
+    throw new Error("Invalid content type");
+  }
+  switch (bookmark.content.assetType) {
+    case "image":
+      return <ImageContentSection bookmark={bookmark} />;
+    case "pdf":
+      return <PDFContentSection bookmark={bookmark} />;
+    default:
       return <div>Unsupported asset type</div>;
-    }
   }
 }

apps/web/components/dashboard/preview/AttachmentBox.tsx

@@ -45,6 +45,7 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
   const { t } = useTranslation();
   const typeToIcon: Record<ZAssetType, React.ReactNode> = {
     screenshot: <Camera className="size-4" />,
+    assetScreenshot: <Camera className="size-4" />,
     fullPageArchive: <Archive className="size-4" />,
     precrawledArchive: <Archive className="size-4" />,
     bannerImage: <Image className="size-4" />,

apps/web/lib/i18n/locales/ar/translation.json

@@ -153,23 +153,44 @@
     }
   },
   "admin": {
-    "admin_settings": "إعدادات المدير",
+    "admin_settings": "إعدادات المشرف",
     "server_stats": {
       "server_stats": "إحصائيات الخادم",
       "total_users": "إجمالي المستخدمين",
       "total_bookmarks": "إجمالي الإشارات المرجعية",
       "server_version": "إصدار الخادم"
     },
     "background_jobs": {
-      "background_jobs": "المهام التلقائية",
+      "background_jobs": "المهام الخلفية",
       "crawler_jobs": "مهام الاستكشاف",
       "indexing_jobs": "مهام الفهرسة",
-      "inference_jobs": "مهام التحليل الذكي",
-      "tidy_assets_jobs": "مهام تنظيم الملفات",
+      "inference_jobs": "مهام الاستدلال",
+      "tidy_assets_jobs": "مهام تنظيم الوسائط",
       "job": "مهمة",
       "queued": "في قائمة الانتظار",
-      "pending": "معلق",
-      "failed": "فشل"
+      "pending": "قيد الانتظار",
+      "failed": "فشلت"
+    },
+    "actions": {
+      "recrawl_failed_links_only": "إعادة استكشاف الروابط الفاشلة فقط",
+      "recrawl_all_links": "إعادة استكشاف جميع الروابط",
+      "without_inference": "بدون استدلال",
+      "regenerate_ai_tags_for_failed_bookmarks_only": "إعادة إنشاء علامات الذكاء الاصطناعي للإشارات المرجعية الفاشلة فقط",
+      "regenerate_ai_tags_for_all_bookmarks": "إعادة إنشاء علامات الذكاء الاصطناعي لجميع الإشارات المرجعية",
+      "reindex_all_bookmarks": "إعادة فهرسة جميع الإشارات المرجعية",
+      "compact_assets": "ضغط الوسائط",
+      "reprocess_assets_fix_mode": "إعادة معالجة الوسائط (وضع الإصلاح)"
+    },
+    "users_list": {
+      "users_list": "قائمة المستخدمين",
+      "create_user": "إنشاء مستخدم",
+      "change_role": "تغيير الدور",
+      "reset_password": "إعادة تعيين كلمة المرور",
+      "delete_user": "حذف المستخدم",
+      "num_bookmarks": "عدد الإشارات المرجعية",
+      "asset_sizes": "أحجام الوسائط",
+      "local_user": "مستخدم محلي",
+      "confirm_password": "تأكيد كلمة المرور"
     }
   },
   "options": {

apps/web/lib/i18n/locales/da/translation.json

@@ -94,7 +94,8 @@
       "recrawl_all_links": "Gennemsøg alle links",
       "without_inference": "Uden inferens",
       "regenerate_ai_tags_for_all_bookmarks": "Genopret AI-tags for alle bogmærker",
-      "reindex_all_bookmarks": "Genindeksér alle bogmærker"
+      "reindex_all_bookmarks": "Genindeksér alle bogmærker",
+      "reprocess_assets_fix_mode": "Genbehandling af aktiver (Fix Mode)"
     },
     "background_jobs": {
       "inference_jobs": "Inferensopgaver",

apps/web/lib/i18n/locales/de/translation.json

@@ -175,7 +175,8 @@
       "regenerate_ai_tags_for_failed_bookmarks_only": "KI-Tags nur für fehlgeschlagene Lesezeichen neu generieren",
       "regenerate_ai_tags_for_all_bookmarks": "KI-Tags für alle Lesezeichen neu generieren",
       "reindex_all_bookmarks": "Alle Lesezeichen neu indizieren",
-      "compact_assets": "Assets komprimieren"
+      "compact_assets": "Assets komprimieren",
+      "reprocess_assets_fix_mode": "Assets neu verarbeiten (Fix-Modus)"
     },
     "users_list": {
       "users_list": "Benutzerliste",

apps/web/lib/i18n/locales/en/translation.json

@@ -178,7 +178,8 @@
       "regenerate_ai_tags_for_failed_bookmarks_only": "Regenerate AI Tags for Failed Bookmarks Only",
       "regenerate_ai_tags_for_all_bookmarks": "Regenerate AI Tags for All Bookmarks",
       "reindex_all_bookmarks": "Reindex All Bookmarks",
-      "compact_assets": "Compact Assets"
+      "compact_assets": "Compact Assets",
+      "reprocess_assets_fix_mode": "Reprocess Assets (Fix Mode)"
     },
     "users_list": {
       "users_list": "Users List",

apps/web/lib/i18n/locales/es/translation.json

@@ -146,7 +146,8 @@
       "compact_assets": "Optimizar multimedia",
       "without_inference": "Sin inferencia",
       "recrawl_failed_links_only": "Recrawlear solo los enlaces fallidos",
-      "recrawl_all_links": "Recrawlear todos los enlaces"
+      "recrawl_all_links": "Recrawlear todos los enlaces",
+      "reprocess_assets_fix_mode": "Reprocesar assets (modo fijo)"
     },
     "users_list": {
       "users_list": "Lista de usuarios",

apps/web/lib/i18n/locales/fr/translation.json

@@ -146,7 +146,8 @@
       "regenerate_ai_tags_for_failed_bookmarks_only": "Régénérer les tags AI uniquement pour les favoris échoués",
       "regenerate_ai_tags_for_all_bookmarks": "Régénérer les tags AI pour tous les favoris",
       "reindex_all_bookmarks": "Réindexer tous les favoris",
-      "compact_assets": "Compacter les assets"
+      "compact_assets": "Compacter les assets",
+      "reprocess_assets_fix_mode": "Reprocesser les assets (mode fix)"
     },
     "users_list": {
       "users_list": "Liste des utilisateurs",

apps/web/lib/i18n/locales/gl/translation.json

@@ -178,7 +178,8 @@
       "regenerate_ai_tags_for_failed_bookmarks_only": "Rexenerar etiquetas IA so en marcadores errados",
       "regenerate_ai_tags_for_all_bookmarks": "Rexenerar etiquetas IA para todos os marcadores",
       "reindex_all_bookmarks": "Reindexar marcadores",
-      "compact_assets": "Optimizar multimedia"
+      "compact_assets": "Optimizar multimedia",
+      "reprocess_assets_fix_mode": "Reprocesar assets (modo fixo)"
     },
     "users_list": {
       "users_list": "Listado de usuarios",

apps/web/lib/i18n/locales/hr/translation.json

@@ -36,7 +36,8 @@
       "recrawl_all_links": "Ponovno pregledavanje svih veza",
       "regenerate_ai_tags_for_all_bookmarks": "Ponovno generiranje AI oznaka za sve oznake",
       "without_inference": "Bez zaključivanja",
-      "compact_assets": "Kompaktiranje resursa"
+      "compact_assets": "Kompaktiranje resursa",
+      "reprocess_assets_fix_mode": "Ponovno postupanje s resursima (fiksni mod)"
     }
   },
   "layouts": {

apps/web/lib/i18n/locales/hu/translation.json

@@ -258,7 +258,8 @@
       "regenerate_ai_tags_for_all_bookmarks": "Minden könyvjelző MI címkéjének lecserélése",
       "regenerate_ai_tags_for_failed_bookmarks_only": "Hibás könyvjelzők MI címkéjének lecserélése",
       "reindex_all_bookmarks": "Minden könyvjelző újraindexelése",
-      "compact_assets": "Kompakt tulajdonok"
+      "compact_assets": "Kompakt tulajdonok",
+      "reprocess_assets_fix_mode": "Tulajdonok függvényezése (Fix Mod)"
     },
     "users_list": {
       "asset_sizes": "Tulajdon méretek",

apps/web/lib/i18n/locales/it/translation.json

@@ -201,7 +201,8 @@
       "regenerate_ai_tags_for_failed_bookmarks_only": "Rigenera tag AI solo per i segnalibri falliti",
       "regenerate_ai_tags_for_all_bookmarks": "Rigenera tag AI per tutti i segnalibri",
       "compact_assets": "Compatta asset",
-      "reindex_all_bookmarks": "Reindicizza tutti i segnalibri"
+      "reindex_all_bookmarks": "Reindicizza tutti i segnalibri",
+      "reprocess_assets_fix_mode": "Riprocessa asset (modalità fissa)"
     },
     "users_list": {
       "users_list": "Lista utenti",