fix: Use next/image for serving bookmark images

2 files changed, 42 insertions, 16 deletions

diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
index 3bb1698f..2472fdbe 100644
--- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import Link from "next/link";
 import { api } from "@/lib/trpc";
 
@@ -31,19 +32,35 @@ function LinkImage({
 }) {
   const link = bookmark.content;
 
-  // A dummy white pixel for when there's no image.
-  // TODO: Better handling for cards with no images
-  const image =
-    getBookmarkLinkImageUrl(link)?.url ??
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=";
+  const imgComponent = (url: string, unoptimized: boolean) => (
+    <Image
+      unoptimized={unoptimized}
+      className={className}
+      alt="card banner"
+      fill={true}
+      src={url}
+    />
+  );
+
+  const imageDetails = getBookmarkLinkImageUrl(link);
+
+  let img: React.ReactNode = null;
+  if (isBookmarkStillCrawling(bookmark)) {
+    img = imgComponent("/blur.avif", false);
+  } else if (imageDetails) {
+    img = imgComponent(imageDetails.url, !imageDetails.localAsset);
+  } else {
+    // No image found
+    // A dummy white pixel for when there's no image.
+    img = imgComponent(
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=",
+      true,
+    );
+  }
+
   return (
     <Link href={link.url} target="_blank">
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        className={className}
-        alt="card banner"
-        src={isBookmarkStillCrawling(bookmark) ? "/blur.avif" : image}
-      />
+      <div className="relative size-full flex-1">{img}</div>
     </Link>
   );
 }
diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx
index ff08c661..6c51864f 100644
--- a/apps/web/components/dashboard/preview/LinkContentSection.tsx
+++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import Image from "next/image";
 import {
   Select,
   SelectContent,
@@ -12,8 +13,16 @@ 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}`} />;
+  return (
+    <div className="relative h-full min-w-full">
+      <Image
+        fill={true}
+        alt="screenshot"
+        src={`/api/assets/${link.screenshotAssetId}`}
+        className="object-contain"
+      />
+    </div>
+  );
 }
 
 function CachedContentSection({ link }: { link: ZBookmarkedLink }) {
@@ -32,7 +41,7 @@ function CachedContentSection({ link }: { link: ZBookmarkedLink }) {
       />
     );
   }
-  return content;
+  return <ScrollArea className="h-full">{content}</ScrollArea>;
 }
 
 export default function LinkContentSection({
@@ -54,7 +63,7 @@ export default function LinkContentSection({
   }
 
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div className="flex h-full flex-col items-center gap-2">
       <Select onValueChange={setSection} value={section}>
         <SelectTrigger className="w-fit">
           <SelectValue />
@@ -71,7 +80,7 @@ export default function LinkContentSection({
           </SelectGroup>
         </SelectContent>
       </Select>
-      <ScrollArea className="h-full">{content}</ScrollArea>
+      {content}
     </div>
   );
 }