From d627d280eeadefb5c0a245787a5404607f6262cf Mon Sep 17 00:00:00 2001
From: Jaleel Bennett <jaleelbennett58@gmail.com>
Date: Sat, 3 Aug 2024 23:10:54 -0400
Subject: [PATCH] feat(bookmarks-list): updated layout on mobile

---
 app/bookmarks/components/bookmark-button.tsx  |  2 +-
 app/bookmarks/components/bookmark-list.tsx    | 47 +++++++------------
 .../components/bookmarks-display.tsx          |  8 ++--
 3 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/app/bookmarks/components/bookmark-button.tsx b/app/bookmarks/components/bookmark-button.tsx
index 1726143..5ea7bb2 100644
--- a/app/bookmarks/components/bookmark-button.tsx
+++ b/app/bookmarks/components/bookmark-button.tsx
@@ -18,7 +18,7 @@ export async function BookmarkButton({ text = "New" }: { text?: string }) {
       <DialogTrigger>
         <Button
           className={cn(
-            "relative h-10 items-center overflow-hidden rounded-[0.5rem] border border-input/25 bg-[#1d1c20] p-0 dark:border-white/15 dark:bg-[#1a1a1a] dark:text-white",
+            "relative h-10 w-full items-center overflow-hidden rounded-[0.5rem] border border-input/25 bg-[#1d1c20] p-0 dark:border-white/15 dark:bg-[#1a1a1a] dark:text-white md:w-fit",
           )}
         >
           <div className="z-20 flex h-full items-center px-4 py-2 sm:gap-1.5">
diff --git a/app/bookmarks/components/bookmark-list.tsx b/app/bookmarks/components/bookmark-list.tsx
index 4c612a6..80c5cba 100644
--- a/app/bookmarks/components/bookmark-list.tsx
+++ b/app/bookmarks/components/bookmark-list.tsx
@@ -69,12 +69,6 @@ export default function BookmarksList({
   const searchParams = useSearchParams();
   const searchTerm = searchParams.get("search") || "";
 
-  // const [layout, setLayout] = useState<"grid" | "rows">(() => {
-  //   return (localStorage.getItem("layout") as "grid" | "rows") || "grid";
-  // });
-  // const [orderBy, setOrderBy] = useState<OrderBy>(() => {
-  //   return (localStorage.getItem("orderBy") as OrderBy) || "date";
-  // });
   const [layout, setLayout] = useState<"grid" | "rows">("grid");
   const [orderBy, setOrderBy] = useState<OrderBy>("date");
 
@@ -116,25 +110,27 @@ export default function BookmarksList({
   }, [bookmarks, searchTerm, orderBy]);
 
   return (
-    <div className="flex flex-1 flex-col gap-12">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between lg:gap-0">
+    <div className="mx-auto flex w-full max-w-screen-2xl flex-1 flex-col gap-12 lg:px-20">
+      <div className="flex flex-col justify-between gap-4 md:flex-row lg:items-center lg:gap-0">
         <div className="flex flex-col gap-1">
           <Balancer as="h1" className="font-heading text-3xl font-bold">
             Bookmarks
           </Balancer>
-          <Balancer className="text-muted-foreground">
+          {/* <Balancer className="!lg:block !hidden text-muted-foreground">
             Manage your bookmarked articles
-          </Balancer>
+          </Balancer> */}
         </div>
-        <div className="mr-1 flex items-center gap-2">
+        <div className="mr-1 flex flex-col items-center gap-2 md:flex-row md:justify-end">
           <BookmarksSearchBox />
-          <BookmarksDisplayMenu
-            layout={layout}
-            setLayout={setLayout}
-            orderBy={orderBy}
-            setOrderBy={setOrderBy}
-          />
-          <BookmarkButton />
+          <div className="flex w-full gap-2 md:w-fit">
+            <BookmarksDisplayMenu
+              layout={layout}
+              setLayout={setLayout}
+              orderBy={orderBy}
+              setOrderBy={setOrderBy}
+            />
+            <BookmarkButton />
+          </div>
         </div>
       </div>
 
@@ -219,16 +215,7 @@ function BookmarkCard({
       className={cn(
         `relative flex w-full transform-gpu cursor-pointer flex-col gap-2 rounded-xl border bg-white p-2 shadow-sm transition-all duration-200 ease-in-out [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]`,
       )}
-      // onClick={() => {
-      //   Cookies.set(id, bookmark.articleUrl, {
-      //     expires: 1 / 288, // Cookie expires in 5 minutes (1/288 of a day)
-      //     secure: true,
-      //     path: "/",
-      //     sameSite: "strict", // Cookie is sent only when the request is coming from the same origin
-      //   });
-      // }}
     >
-      {/* <Link href={`/article/${id}`} aria-label="article-link"> */}
       <CardContent className="p-2">
         <div className="flex w-full justify-between">
           <div className="flex w-full gap-3">
@@ -479,14 +466,16 @@ function BookmarkCard({
             </AlertDialog>
           </div>
         </div>
-        <Balancer as="h3" className="pt-4 text-xl font-medium">
+        <Balancer
+          as="h3"
+          className={`truncate pt-4 font-semibold leading-6 transition-colors md:text-xl`}
+        >
           {bookmark.title}
         </Balancer>
         <CardDescription className={cn("pt-2")}>
           {extractFirstSentence(bookmark.content)}
         </CardDescription>
       </CardContent>
-      {/* </Link> */}
     </Card>
   );
 }
diff --git a/app/bookmarks/components/bookmarks-display.tsx b/app/bookmarks/components/bookmarks-display.tsx
index d1d70c0..08f3cb6 100644
--- a/app/bookmarks/components/bookmarks-display.tsx
+++ b/app/bookmarks/components/bookmarks-display.tsx
@@ -48,11 +48,13 @@ export function BookmarksDisplayMenu({
       <DropdownMenuTrigger asChild className="bg-background">
         <Button
           className={cn(
-            "gap-2 rounded-[0.5rem] border border-input bg-background py-2 text-sm font-normal text-primary shadow-sm transition-all hover:bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "w-full justify-between gap-2 rounded-[0.5rem] border border-input bg-background py-2 text-sm font-normal text-primary shadow-sm transition-all hover:bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:w-fit",
           )}
         >
-          <Icons.filter className={"h-4 w-4 text-muted-foreground"} />
-          <span>Display</span>
+          <div className="flex items-center gap-2">
+            <Icons.filter className={"h-4 w-4 text-muted-foreground"} />
+            <span>Display</span>
+          </div>
           <Icons.chevronDown
             className={`h-4 w-4 text-muted-foreground transition duration-200 ${
               open ? "rotate-180 transform" : ""