From 8a1309536b76ba86872ca2e78aa695d9fd80c8cc Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 5 Oct 2024 20:08:50 +0000
Subject: feature: Allow attaching custom banners to notes. Fixes: #106

---
 .../web/components/dashboard/preview/AttachmentBox.tsx | 12 +++++++++---
 .../dashboard/preview/TextContentSection.tsx           | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

(limited to 'apps/web/components/dashboard/preview')

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>
   );
-- 
cgit v1.2.3-70-g09d2