From 2dad01ceb946f302f32c9eeb6af3aac6eb39e6df Mon Sep 17 00:00:00 2001
From: Ahmad Mujahid <me@ahmadmu.com>
Date: Fri, 21 Jun 2024 09:45:20 +0400
Subject: [PATCH 1/5] Allow the user to expand the textarea in the list mode to
 support larger notes

---
 .../web/components/dashboard/bookmarks/EditorCard.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index 9899d5d3..41e22c26 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -9,7 +9,10 @@ import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/use-toast";
 import BookmarkAlreadyExistsToast from "@/components/utils/BookmarkAlreadyExistsToast";
 import { useClientConfig } from "@/lib/clientConfig";
-import { useBookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout";
+import {
+  useBookmarkLayout,
+  useBookmarkLayoutSwitch,
+} from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
@@ -48,6 +51,7 @@ export default function EditorCard({ className }: { className?: string }) {
     React.useState<MultiUrlImportState | null>(null);
 
   const demoMode = !!useClientConfig().demoMode;
+  const bookmarkLayout = useBookmarkLayout();
   const formSchema = z.object({
     text: z.string(),
   });
@@ -163,7 +167,10 @@ export default function EditorCard({ className }: { className?: string }) {
             <Textarea
               ref={inputRef}
               disabled={isPending}
-              className="h-full w-full resize-none border-none text-lg focus-visible:ring-0"
+              className={cn(
+                "h-full w-full border-none text-lg focus-visible:ring-0",
+                { "resize-none": bookmarkLayout !== "list" },
+              )}
               placeholder={
                 "Paste a link or an image, write a note or drag and drop an image in here ..."
               }

From 1e153e5649409e37cc67831233474ff950b2f1ac Mon Sep 17 00:00:00 2001
From: Ahmad Mujahid <me@ahmadmu.com>
Date: Fri, 21 Jun 2024 10:08:26 +0400
Subject: [PATCH 2/5] Expand the textarea to a max of half the screen size in
 the list layout only

---
 .../components/dashboard/bookmarks/EditorCard.tsx  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index 41e22c26..aac780f7 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -188,6 +188,20 @@ export default function EditorCard({ className }: { className?: string }) {
                 }
                 handlePaste(e);
               }}
+              onInput={(e: React.FormEvent<HTMLTextAreaElement>) => {
+                // Expand the textarea to a max of half the screen size in the list layout only
+                if (bookmarkLayout === "list") {
+                  const target = e.target as HTMLTextAreaElement;
+                  const maxHeight = window.innerHeight * 0.5;
+                  target.style.height = "auto";
+
+                  if (target.scrollHeight <= maxHeight) {
+                    target.style.height = `${target.scrollHeight}px`;
+                  } else {
+                    target.style.height = `${maxHeight}px`;
+                  }
+                }
+              }}
               {...textFieldProps}
             />
           </FormControl>

From 9cd8f9d002af2f7ae3b966615e0dd06ad6a777c0 Mon Sep 17 00:00:00 2001
From: Ahmad Mujahid <me@ahmadmu.com>
Date: Fri, 21 Jun 2024 10:25:37 +0400
Subject: [PATCH 3/5] Move onInput to a separate method

---
 .../dashboard/bookmarks/EditorCard.tsx        | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index aac780f7..bfb8412f 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -103,6 +103,21 @@ export default function EditorCard({ className }: { className?: string }) {
     setMultiUrlImportState({ urls, text });
   }
 
+  const onInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    // Expand the textarea to a max of half the screen size in the list layout only
+    if (bookmarkLayout === "list") {
+      const target = e.target as HTMLTextAreaElement;
+      const maxHeight = window.innerHeight * 0.5;
+      target.style.height = "auto";
+
+      if (target.scrollHeight <= maxHeight) {
+        target.style.height = `${target.scrollHeight}px`;
+      } else {
+        target.style.height = `${maxHeight}px`;
+      }
+    }
+  };
+
   const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = (data) => {
     const text = data.text.trim();
     try {
@@ -188,20 +203,7 @@ export default function EditorCard({ className }: { className?: string }) {
                 }
                 handlePaste(e);
               }}
-              onInput={(e: React.FormEvent<HTMLTextAreaElement>) => {
-                // Expand the textarea to a max of half the screen size in the list layout only
-                if (bookmarkLayout === "list") {
-                  const target = e.target as HTMLTextAreaElement;
-                  const maxHeight = window.innerHeight * 0.5;
-                  target.style.height = "auto";
-
-                  if (target.scrollHeight <= maxHeight) {
-                    target.style.height = `${target.scrollHeight}px`;
-                  } else {
-                    target.style.height = `${maxHeight}px`;
-                  }
-                }
-              }}
+              onInput={onInput}
               {...textFieldProps}
             />
           </FormControl>

From 9e15056601ab20af1619d9da34924de18152ad35 Mon Sep 17 00:00:00 2001
From: Ahmad Mujahid <me@ahmadmu.com>
Date: Sat, 22 Jun 2024 17:42:15 +0400
Subject: [PATCH 4/5] Restoring the textfield to its original state after
 submitting

---
 apps/web/components/dashboard/bookmarks/EditorCard.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index bfb8412f..1a6a2110 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -125,8 +125,13 @@ export default function EditorCard({ className }: { className?: string }) {
     } catch (e) {
       // Not a URL
       mutate({ type: "text", text });
+    } finally {
+      if (inputRef?.current?.style) {
+        inputRef.current.style.height = "auto";
+      }
     }
   };
+
   const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
     toast({
       description: Object.values(errors)

From 08d492c175a762370c617813240f6bee8ccc609e Mon Sep 17 00:00:00 2001
From: Ahmad Mujahid <me@ahmadmu.com>
Date: Sat, 22 Jun 2024 17:44:11 +0400
Subject: [PATCH 5/5] Moving the reset form to the mutate onSuccess event to
 not reset the height on a fail request

---
 apps/web/components/dashboard/bookmarks/EditorCard.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index 1a6a2110..3006a964 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -74,6 +74,9 @@ export default function EditorCard({ className }: { className?: string }) {
         });
       }
       form.reset();
+      if (inputRef?.current?.style) {
+        inputRef.current.style.height = "auto";
+      }
     },
     onError: (e) => {
       toast({ description: e.message, variant: "destructive" });
@@ -125,10 +128,6 @@ export default function EditorCard({ className }: { className?: string }) {
     } catch (e) {
       // Not a URL
       mutate({ type: "text", text });
-    } finally {
-      if (inputRef?.current?.style) {
-        inputRef.current.style.height = "auto";
-      }
     }
   };