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

1 files changed, 67 insertions, 58 deletions

diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
index 9796ed4f..5c329424 100644
--- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -2,30 +2,70 @@
 
 import Link from "next/link";
 import {
-  ImageCard,
-  ImageCardBanner,
-  ImageCardBody,
-  ImageCardContent,
-  ImageCardFooter,
-  ImageCardTitle,
-} from "@/components/ui/imageCard";
-import {
   isBookmarkStillCrawling,
   isBookmarkStillLoading,
-  isBookmarkStillTagging,
 } from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
 
-import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
+import type { ZBookmarkTypeLink } from "@hoarder/trpc/types/bookmarks";
+
+import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+
+function LinkTitle({ bookmark }: { bookmark: ZBookmarkTypeLink }) {
+  const link = bookmark.content;
+  const parsedUrl = new URL(link.url);
+  return (
+    <Link className="line-clamp-2" href={link.url} target="_blank">
+      {link?.title ?? parsedUrl.host}
+    </Link>
+  );
+}
+
+function LinkImage({
+  bookmark,
+  className,
+}: {
+  bookmark: ZBookmarkTypeLink;
+  className?: string;
+}) {
+  const link = bookmark.content;
+
+  // A dummy white pixel for when there's no image.
+  // TODO: Better handling for cards with no images
+  const image =
+    link.imageUrl ??
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=";
+  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}
+      />
+    </Link>
+  );
+}
 
-import BookmarkActionBar from "./BookmarkActionBar";
-import TagList from "./TagList";
+function LinkUrl({ bookmark }: { bookmark: ZBookmarkTypeLink }) {
+  const link = bookmark.content;
+  const parsedUrl = new URL(link.url);
+  return (
+    <Link
+      className="line-clamp-1 hover:text-foreground"
+      href={link.url}
+      target="_blank"
+    >
+      {parsedUrl.host}
+    </Link>
+  );
+}
 
 export default function LinkCard({
   bookmark: initialData,
   className,
 }: {
-  bookmark: ZBookmark;
+  bookmark: ZBookmarkTypeLink;
   className?: string;
 }) {
   const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
@@ -47,54 +87,23 @@ export default function LinkCard({
       },
     },
   );
-  const link = bookmark.content;
-  if (link.type != "link") {
-    throw new Error("Unexpected bookmark type");
+
+  if (bookmark.content.type !== "link") {
+    throw new Error("Invalid bookmark type");
   }
-  const parsedUrl = new URL(link.url);
 
-  // A dummy white pixel for when there's no image.
-  // TODO: Better handling for cards with no images
-  const image =
-    link.imageUrl ??
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=";
+  const bookmarkLink = { ...bookmark, content: bookmark.content };
 
   return (
-    <ImageCard className={className}>
-      <Link href={link.url} target="_blank">
-        <ImageCardBanner
-          src={isBookmarkStillCrawling(bookmark) ? "/blur.avif" : image}
-        />
-      </Link>
-      <ImageCardContent>
-        <ImageCardTitle>
-          <Link className="line-clamp-2" href={link.url} target="_blank">
-            {link?.title ?? parsedUrl.host}
-          </Link>
-        </ImageCardTitle>
-        {/* There's a hack here. Every tag has the full hight of the container itself. That why, when we enable flex-wrap,
-        the overflowed don't show up. */}
-        <ImageCardBody className="flex h-full flex-wrap space-x-1 overflow-hidden">
-          <TagList
-            bookmark={bookmark}
-            loading={isBookmarkStillTagging(bookmark)}
-          />
-        </ImageCardBody>
-        <ImageCardFooter>
-          <div className="mt-1 flex justify-between text-gray-500">
-            <div className="my-auto">
-              <Link
-                className="line-clamp-1 hover:text-foreground"
-                href={link.url}
-                target="_blank"
-              >
-                {parsedUrl.host}
-              </Link>
-            </div>
-            <BookmarkActionBar bookmark={bookmark} />
-          </div>
-        </ImageCardFooter>
-      </ImageCardContent>
-    </ImageCard>
+    <BookmarkLayoutAdaptingCard
+      title={<LinkTitle bookmark={bookmarkLink} />}
+      footer={<LinkUrl bookmark={bookmarkLink} />}
+      bookmark={bookmarkLink}
+      wrapTags={false}
+      image={(_layout, className) => (
+        <LinkImage className={className} bookmark={bookmarkLink} />
+      )}
+      className={className}
+    />
   );
 }