ui: Use a masonry library to maintain the order of the bookmark grid

2 files changed, 23 insertions, 4 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
index 433649af..293b7765 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
@@ -5,15 +5,32 @@ import { ZBookmark, ZGetBookmarksRequest } from "@/lib/types/api/bookmarks";
 import { api } from "@/lib/trpc";
 import TextCard from "./TextCard";
 import { Slot } from "@radix-ui/react-slot";
+import Masonry from 'react-masonry-css';
+import resolveConfig from 'tailwindcss/resolveConfig'
+import tailwindConfig from '@/tailwind.config'
+import { useMemo } from "react";
+
+function getBreakpointConfig() {
+  const fullConfig = resolveConfig(tailwindConfig)
+
+  const breakpointColumnsObj: {[key: number]: number, default: number} = {
+    default: 3,
+  };
+  breakpointColumnsObj[parseInt(fullConfig.theme.screens.lg)] = 2;
+  breakpointColumnsObj[parseInt(fullConfig.theme.screens.md)] = 1;
+  breakpointColumnsObj[parseInt(fullConfig.theme.screens.sm)] = 1;
+  return breakpointColumnsObj;
+}
+
 
 function renderBookmark(bookmark: ZBookmark) {
   let comp;
   switch (bookmark.content.type) {
     case "link":
-      comp = <LinkCard key={bookmark.id} bookmark={bookmark} />;
+      comp = <LinkCard bookmark={bookmark} />;
       break;
     case "text":
-      comp = <TextCard key={bookmark.id} bookmark={bookmark} />;
+      comp = <TextCard bookmark={bookmark} />;
       break;
   }
   return (
@@ -36,12 +53,13 @@ export default function BookmarksGrid({
   const { data } = api.bookmarks.getBookmarks.useQuery(query, {
     initialData: { bookmarks: initialBookmarks },
   });
+  const breakpointConfig = useMemo(() => getBreakpointConfig(), []);
   if (data.bookmarks.length == 0) {
     return <p>No bookmarks</p>;
   }
   return (
-    <div className="columns-1 gap-4 transition-all duration-300 md:columns-2 lg:columns-3">
+    <Masonry className="flex gap-4" breakpointCols={breakpointConfig} >
       {data.bookmarks.map((b) => renderBookmark(b))}
-    </div>
+    </Masonry>
   );
 }
diff --git a/packages/web/package.json b/packages/web/package.json
index b25fc2e9..01291dd7 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -49,6 +49,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.50.1",
     "react-markdown": "^9.0.1",
+    "react-masonry-css": "^1.0.16",
     "server-only": "^0.0.1",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.1",