From 4402e6f04170cbb0613d35fe94471162253e91b2 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 19 Apr 2024 20:01:51 +0100
Subject: feature: Download images and screenshots

---
 .../components/dashboard/bookmarks/AssetCard.tsx   |  7 +-
 .../bookmarks/BookmarkLayoutAdaptingCard.tsx       |  2 +-
 .../components/dashboard/bookmarks/LinkCard.tsx    | 11 ++--
 .../components/dashboard/bookmarks/TextCard.tsx    |  2 +-
 .../dashboard/preview/BookmarkPreview.tsx          | 14 ++--
 .../dashboard/preview/LinkContentSection.tsx       | 77 ++++++++++++++++++++++
 .../dashboard/preview/TextContentSection.tsx       | 40 +++--------
 7 files changed, 107 insertions(+), 46 deletions(-)
 create mode 100644 apps/web/components/dashboard/preview/LinkContentSection.tsx

(limited to 'apps/web/components')

diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
index c9a43575..40f435de 100644
--- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import Image from "next/image";
-import { isBookmarkStillTagging } from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
 
 import type {
   ZBookmark,
   ZBookmarkTypeAsset,
 } from "@hoarder/shared/types/bookmarks";
+import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
+import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
 
@@ -24,7 +25,7 @@ function AssetImage({
       return (
         <Image
           alt="asset"
-          src={`/api/assets/${bookmarkedAsset.assetId}`}
+          src={getAssetUrl(bookmarkedAsset.assetId)}
           fill={true}
           className={className}
         />
@@ -35,7 +36,7 @@ function AssetImage({
         <iframe
           title={bookmarkedAsset.assetId}
           className={className}
-          src={`/api/assets/${bookmarkedAsset.assetId}`}
+          src={getAssetUrl(bookmarkedAsset.assetId)}
         />
       );
     }
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
index 42c4db21..d282c3f4 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
@@ -1,7 +1,6 @@
 import type { BookmarksLayoutTypes } from "@/lib/userLocalSettings/types";
 import React from "react";
 import Link from "next/link";
-import { isBookmarkStillTagging } from "@/lib/bookmarkUtils";
 import {
   bookmarkLayoutSwitch,
   useBookmarkLayout,
@@ -10,6 +9,7 @@ import { cn } from "@/lib/utils";
 import dayjs from "dayjs";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
+import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import BookmarkActionBar from "./BookmarkActionBar";
 import TagList from "./TagList";
diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
index ef0ae6f2..3bb1698f 100644
--- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import Link from "next/link";
-import {
-  isBookmarkStillCrawling,
-  isBookmarkStillLoading,
-} from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
 
 import type { ZBookmarkTypeLink } from "@hoarder/shared/types/bookmarks";
+import {
+  getBookmarkLinkImageUrl,
+  isBookmarkStillCrawling,
+  isBookmarkStillLoading,
+} from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
 
@@ -33,7 +34,7 @@ function LinkImage({
   // A dummy white pixel for when there's no image.
   // TODO: Better handling for cards with no images
   const image =
-    link.imageUrl ??
+    getBookmarkLinkImageUrl(link)?.url ??
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=";
   return (
     <Link href={link.url} target="_blank">
diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx
index 9d5c8d8b..74b3e8e5 100644
--- a/apps/web/components/dashboard/bookmarks/TextCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { isBookmarkStillTagging } from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
 import { bookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
 import Markdown from "react-markdown";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
+import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkedTextViewer } from "./BookmarkedTextViewer";
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 29e8e39a..581ec4bd 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -11,20 +11,21 @@ import {
   TooltipPortal,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import {
-  isBookmarkStillCrawling,
-  isBookmarkStillLoading,
-} from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { CalendarDays, ExternalLink } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
+import {
+  isBookmarkStillCrawling,
+  isBookmarkStillLoading,
+} from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import ActionBar from "./ActionBar";
 import { AssetContentSection } from "./AssetContentSection";
 import { EditableTitle } from "./EditableTitle";
+import LinkContentSection from "./LinkContentSection";
 import { NoteEditor } from "./NoteEditor";
 import { TextContentSection } from "./TextContentSection";
 
@@ -90,7 +91,10 @@ export default function BookmarkPreview({
 
   let content;
   switch (bookmark.content.type) {
-    case "link":
+    case "link": {
+      content = <LinkContentSection bookmark={bookmark} />;
+      break;
+    }
     case "text": {
       content = <TextContentSection bookmark={bookmark} />;
       break;
diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx
new file mode 100644
index 00000000..ff08c661
--- /dev/null
+++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ScrollArea } from "@radix-ui/react-scroll-area";
+
+import { ZBookmark, ZBookmarkedLink } from "@hoarder/shared/types/bookmarks";
+
+function ScreenshotSection({ link }: { link: ZBookmarkedLink }) {
+  // eslint-disable-next-line @next/next/no-img-element
+  return <img alt="screenshot" src={`/api/assets/${link.screenshotAssetId}`} />;
+}
+
+function CachedContentSection({ link }: { link: ZBookmarkedLink }) {
+  let content;
+  if (!link.htmlContent) {
+    content = (
+      <div className="text-destructive">Failed to fetch link content ...</div>
+    );
+  } else {
+    content = (
+      <div
+        dangerouslySetInnerHTML={{
+          __html: link.htmlContent || "",
+        }}
+        className="prose mx-auto dark:prose-invert"
+      />
+    );
+  }
+  return content;
+}
+
+export default function LinkContentSection({
+  bookmark,
+}: {
+  bookmark: ZBookmark;
+}) {
+  const [section, setSection] = useState<string>("cached");
+
+  if (bookmark.content.type != "link") {
+    throw new Error("Invalid content type");
+  }
+
+  let content;
+  if (section === "cached") {
+    content = <CachedContentSection link={bookmark.content} />;
+  } else {
+    content = <ScreenshotSection link={bookmark.content} />;
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <Select onValueChange={setSection} value={section}>
+        <SelectTrigger className="w-fit">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="cached">Cached Content</SelectItem>
+            <SelectItem
+              value="screenshot"
+              disabled={!bookmark.content.screenshotAssetId}
+            >
+              Screenshot
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <ScrollArea className="h-full">{content}</ScrollArea>
+    </div>
+  );
+}
diff --git a/apps/web/components/dashboard/preview/TextContentSection.tsx b/apps/web/components/dashboard/preview/TextContentSection.tsx
index a73ad722..eba7d28b 100644
--- a/apps/web/components/dashboard/preview/TextContentSection.tsx
+++ b/apps/web/components/dashboard/preview/TextContentSection.tsx
@@ -4,36 +4,14 @@ import Markdown from "react-markdown";
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 export function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
-  let content;
-  switch (bookmark.content.type) {
-    case "link": {
-      if (!bookmark.content.htmlContent) {
-        content = (
-          <div className="text-destructive">
-            Failed to fetch link content ...
-          </div>
-        );
-      } else {
-        content = (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: bookmark.content.htmlContent || "",
-            }}
-            className="prose mx-auto dark:prose-invert"
-          />
-        );
-      }
-      break;
-    }
-    case "text": {
-      content = (
-        <Markdown className="prose mx-auto dark:prose-invert">
-          {bookmark.content.text}
-        </Markdown>
-      );
-      break;
-    }
+  if (bookmark.content.type != "text") {
+    throw new Error("Invalid content type");
   }
-
-  return <ScrollArea className="h-full">{content}</ScrollArea>;
+  return (
+    <ScrollArea className="h-full">
+      <Markdown className="prose mx-auto dark:prose-invert">
+        {bookmark.content.text}
+      </Markdown>
+    </ScrollArea>
+  );
 }
-- 
cgit v1.2.3-70-g09d2