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

3 files changed, 34 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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e33a74c..eaa8e381 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -299,6 +299,9 @@ importers:
       react-markdown:
         specifier: ^9.0.1
         version: 9.0.1(@types/react@18.2.58)(react@18.2.0)
+      react-masonry-css:
+        specifier: ^1.0.16
+        version: 1.0.16(react@18.2.0)
       server-only:
         specifier: ^0.0.1
         version: 0.0.1
@@ -8273,6 +8276,14 @@ packages:
       - supports-color
     dev: false
 
+  /react-masonry-css@1.0.16(react@18.2.0):
+    resolution: {integrity: sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==}
+    peerDependencies:
+      react: '>=16.0.0'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-refresh@0.13.0:
     resolution: {integrity: sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==}
     engines: {node: '>=0.10.0'}