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

1 files changed, 30 insertions, 24 deletions

diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx
index 42d09c23..c715c8ab 100644
--- a/apps/web/components/dashboard/bookmarks/TextCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx
@@ -3,14 +3,14 @@
 import { useState } from "react";
 import { isBookmarkStillTagging } from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
+import { bookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
 import Markdown from "react-markdown";
 
 import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
-import BookmarkActionBar from "./BookmarkActionBar";
 import { BookmarkedTextViewer } from "./BookmarkedTextViewer";
-import TagList from "./TagList";
+import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
 
 export default function TextCard({
   bookmark: initialData,
@@ -50,28 +50,34 @@ export default function TextCard({
         open={previewModalOpen}
         setOpen={setPreviewModalOpen}
       />
-      <div
-        className={cn(
-          className,
-          cn(
-            "flex h-min max-h-96 flex-col gap-y-1 overflow-hidden rounded-lg p-2 shadow-md",
-          ),
-        )}
-      >
-        <Markdown className="prose grow overflow-hidden dark:prose-invert">
-          {bookmarkedText.text}
-        </Markdown>
-        <div className="mt-4 flex flex-none 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>
+      <BookmarkLayoutAdaptingCard
+        content={
+          <Markdown className="prose dark:prose-invert">
+            {bookmarkedText.text}
+          </Markdown>
+        }
+        footer={null}
+        wrapTags={true}
+        bookmark={bookmark}
+        className={className}
+        fitHeight={true}
+        image={(layout, className) =>
+          bookmarkLayoutSwitch(layout, {
+            grid: null,
+            masonry: null,
+            list: (
+              <div
+                className={cn(
+                  "flex size-full items-center justify-center bg-accent text-center",
+                  className,
+                )}
+              >
+                Note
+              </div>
+            ),
+          })
+        }
+      />
     </>
   );
 }