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

3 files changed, 44 insertions, 4 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",
diff --git a/apps/web/components/dashboard/preview/AttachmentBox.tsx b/apps/web/components/dashboard/preview/AttachmentBox.tsx
index b2460165..a8eaf0f4 100644
--- a/apps/web/components/dashboard/preview/AttachmentBox.tsx
+++ b/apps/web/components/dashboard/preview/AttachmentBox.tsx
@@ -27,7 +27,11 @@ import {
   useReplaceBookmarkAsset,
 } from "@hoarder/shared-react/hooks/bookmarks";
 import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
-import { ZAssetType, ZBookmark } from "@hoarder/shared/types/bookmarks";
+import {
+  BookmarkTypes,
+  ZAssetType,
+  ZBookmark,
+} from "@hoarder/shared/types/bookmarks";
 import {
   humanFriendlyNameForAssertType,
   isAllowedToAttachAsset,
@@ -94,10 +98,12 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
     },
   });
 
-  if (!bookmark.assets.length) {
+  bookmark.assets.sort((a, b) => a.assetType.localeCompare(b.assetType));
+
+  if (bookmark.content.type == BookmarkTypes.ASSET) {
+    // Currently, we don't allow attaching assets to assets types.
     return null;
   }
-  bookmark.assets.sort((a, b) => a.assetType.localeCompare(b.assetType));
 
   return (
     <Collapsible>
diff --git a/apps/web/components/dashboard/preview/TextContentSection.tsx b/apps/web/components/dashboard/preview/TextContentSection.tsx
index 76cb23ea..327436c6 100644
--- a/apps/web/components/dashboard/preview/TextContentSection.tsx
+++ b/apps/web/components/dashboard/preview/TextContentSection.tsx
@@ -1,14 +1,32 @@
+import Image from "next/image";
 import { MarkdownComponent } from "@/components/ui/markdown-component";
 import { ScrollArea } from "@radix-ui/react-scroll-area";
 
+import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
 import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 export function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
   if (bookmark.content.type != BookmarkTypes.TEXT) {
     throw new Error("Invalid content type");
   }
+  const banner = bookmark.assets.find(
+    (asset) => asset.assetType == "bannerImage",
+  );
+
   return (
     <ScrollArea className="h-full">
+      {banner && (
+        <div className="relative h-52 min-w-full">
+          <Image
+            alt="banner"
+            src={getAssetUrl(banner.id)}
+            width={0}
+            height={0}
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
+      )}
       <MarkdownComponent>{bookmark.content.text}</MarkdownComponent>
     </ScrollArea>
   );