feature(web): Allow changing the bookmark grid layout (#98)

1 files changed, 54 insertions, 42 deletions

diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
index 8997a7e2..3bda1ee8 100644
--- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
@@ -3,12 +3,48 @@
 import Image from "next/image";
 import { isBookmarkStillTagging } from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
-import { cn } from "@/lib/utils";
 
-import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
+import type {
+  ZBookmark,
+  ZBookmarkTypeAsset,
+} from "@hoarder/trpc/types/bookmarks";
 
-import BookmarkActionBar from "./BookmarkActionBar";
-import TagList from "./TagList";
+import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+
+function AssetImage({
+  bookmark,
+  className,
+}: {
+  bookmark: ZBookmarkTypeAsset;
+  className?: string;
+}) {
+  const bookmarkedAsset = bookmark.content;
+  switch (bookmarkedAsset.assetType) {
+    case "image": {
+      return (
+        <Image
+          alt="asset"
+          src={`/api/assets/${bookmarkedAsset.assetId}`}
+          fill={true}
+          className={className}
+        />
+      );
+    }
+    case "pdf": {
+      return (
+        <iframe
+          title={bookmarkedAsset.assetId}
+          className={className}
+          src={`/api/assets/${bookmarkedAsset.assetId}`}
+        />
+      );
+    }
+    default: {
+      const _exhaustiveCheck: never = bookmarkedAsset.assetType;
+      return <span />;
+    }
+  }
+}
 
 export default function AssetCard({
   bookmark: initialData,
@@ -35,49 +71,25 @@ export default function AssetCard({
       },
     },
   );
-  const bookmarkedAsset = bookmark.content;
-  if (bookmarkedAsset.type != "asset") {
+
+  if (bookmark.content.type != "asset") {
     throw new Error("Unexpected bookmark type");
   }
 
+  const bookmarkedAsset = { ...bookmark, content: bookmark.content };
+
   return (
-    <div
-      className={cn(
-        className,
-        cn(
-          "flex h-min max-h-96 flex-col gap-y-1 overflow-hidden rounded-lg shadow-md",
-        ),
-      )}
-    >
-      {bookmarkedAsset.assetType == "image" && (
-        <div className="relative h-56 max-h-56">
-          <Image
-            alt="asset"
-            src={`/api/assets/${bookmarkedAsset.assetId}`}
-            fill={true}
-            className="rounded-t-lg object-cover"
-          />
+    <BookmarkLayoutAdaptingCard
+      title={bookmarkedAsset.content.fileName}
+      footer={null}
+      bookmark={bookmarkedAsset}
+      className={className}
+      wrapTags={true}
+      image={(_layout, className) => (
+        <div className="relative size-full flex-1">
+          <AssetImage bookmark={bookmarkedAsset} className={className} />
         </div>
       )}
-      {bookmarkedAsset.assetType == "pdf" && (
-        <iframe
-          title={bookmarkedAsset.assetId}
-          className="h-56 max-h-56 w-full"
-          src={`/api/assets/${bookmarkedAsset.assetId}`}
-        />
-      )}
-      <div className="flex flex-col gap-y-1 overflow-hidden p-2">
-        <div className="flex h-full flex-wrap gap-1 overflow-hidden">
-          <TagList
-            bookmark={bookmark}
-            loading={isBookmarkStillTagging(bookmark)}
-          />
-        </div>
-        <div className="flex w-full justify-between">
-          <div />
-          <BookmarkActionBar bookmark={bookmark} />
-        </div>
-      </div>
-    </div>
+    />
   );
 }