feature: Allow attaching custom banners to notes. Fixes: #106

1 files changed, 17 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx
index 9d6c1df1..14a4f905 100644
--- a/apps/web/components/dashboard/bookmarks/TextCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx
@@ -1,10 +1,13 @@
 "use client";
 
+import Image from "next/image";
+import Link from "next/link";
 import { MarkdownComponent } from "@/components/ui/markdown-component";
 import { bookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
 
 import type { ZBookmarkTypeText } from "@hoarder/shared/types/bookmarks";
+import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
 import { getSourceUrl } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
@@ -19,6 +22,8 @@ export default function TextCard({
 }) {
   const bookmarkedText = bookmark.content;
 
+  const banner = bookmark.assets.find((a) => a.assetType == "bannerImage");
+
   return (
     <>
       <BookmarkLayoutAdaptingCard
@@ -38,7 +43,18 @@ export default function TextCard({
             grid: null,
             masonry: null,
             compact: null,
-            list: (
+            list: banner ? (
+              <div className="relative size-full flex-1">
+                <Link href={`/dashboard/preview/${bookmark.id}`}>
+                  <Image
+                    alt="card banner"
+                    fill={true}
+                    className={cn("flex-1", className)}
+                    src={getAssetUrl(banner.id)}
+                  />
+                </Link>
+              </div>
+            ) : (
               <div
                 className={cn(
                   "flex size-full items-center justify-center bg-accent text-center",