From 4594823cd498f15471083beb87f81184c513ad8d Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 3 Oct 2024 18:28:21 -0700
Subject: [PATCH] Expand composer editor space

- Pin bottom editor bar to bottom of the page
- Move upload preview to under text editor
- Hide drop zone after adding image
---
 .../inputs/editor/BottomEditorBar.tsx         |   5 +-
 src/components/inputs/editor/Editor.tsx       | 107 ++++++++++--------
 src/components/inputs/editor/TextEdit.tsx     |   2 +-
 src/components/inputs/editor/TopEditorBar.tsx |   2 +-
 .../inputs/editor/UploadPreview.tsx           |   4 +-
 src/lib/hooks/bsky/actor/useSearchUsers.tsx   |   2 +-
 6 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/src/components/inputs/editor/BottomEditorBar.tsx b/src/components/inputs/editor/BottomEditorBar.tsx
index aaecc17c..5ed82a66 100644
--- a/src/components/inputs/editor/BottomEditorBar.tsx
+++ b/src/components/inputs/editor/BottomEditorBar.tsx
@@ -7,7 +7,6 @@ import LanguagePicker from "./LanguagePicker";
 import { useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { BiUpload } from "react-icons/bi";
-import UploadPreview from "./UploadPreview";
 import { RichText } from "@atproto/api";
 import { jsonToText } from "@/lib/utils/text";
 import ThreadGatePicker from "./ThreadGatePicker";
@@ -64,6 +63,7 @@ export default function BottomEditorBar(props: Props) {
           ),
         ];
         onUpdateImages(updatedImages);
+        setShowDropzone(false);
       },
     });
 
@@ -93,9 +93,6 @@ export default function BottomEditorBar(props: Props) {
           </div>
         </div>
       </div>
-      {images && images.length > 0 && (
-        <UploadPreview images={images.slice(0, 4)} onUpdate={onUpdateImages} />
-      )}
       {showDropzone && (
         <div
           {...getRootProps()}
diff --git a/src/components/inputs/editor/Editor.tsx b/src/components/inputs/editor/Editor.tsx
index 8e7949f3..247b24a6 100644
--- a/src/components/inputs/editor/Editor.tsx
+++ b/src/components/inputs/editor/Editor.tsx
@@ -21,6 +21,7 @@ import LinkCard from "./LinkCard";
 import usePublishPost from "@/lib/hooks/bsky/feed/usePublishPost";
 import { ThreadgateSetting } from "../../../../types/feed";
 import { RichText } from "@atproto/api";
+import UploadPreview from "./UploadPreview";
 
 interface Props {
   onCancel: () => void;
@@ -88,7 +89,7 @@ export default function Editor(props: Props) {
     autofocus: true,
     editorProps: {
       attributes: {
-        class: "focus:outline-none h-48 overflow-y-auto text-lg text-skin-base",
+        class: "focus:outline-none overflow-y-auto text-lg text-skin-base",
       },
     },
     onUpdate: ({ editor }) => {
@@ -131,7 +132,7 @@ export default function Editor(props: Props) {
 
   return (
     <section className="border-skin-base animate-fade-up animate-duration-200 bg-skin-base fixed bottom-0 z-50 h-full w-full overflow-auto rounded-t-3xl p-3 shadow-2xl md:h-fit md:max-h-[80svh] md:border-t">
-      <div className="mx-auto max-w-2xl">
+      <div className="flex flex-col h-full mx-auto max-w-2xl">
         <TopEditorBar
           editor={editor}
           hasContent={hasContent}
@@ -141,51 +142,65 @@ export default function Editor(props: Props) {
           onRemoveLabel={() => setLabel("")}
           numberOfImages={images?.length ?? 0}
         />
-        {replyTo && <ReplyToPreview post={replyTo} />}
-        <TextEdit
-          editor={editor}
-          author={author}
-          isReply={replyAuthor ? true : false}
-        />
-        <div className="mb-3">
-          {quote && <QuoteToPreview post={quote} />}
-          {embedSuggestions.size > 0 && (
-            <div className="mb-3 flex flex-col gap-y-3">
-              {Array.from(embedSuggestions).map((link) => (
-                <LinkCardPrompt
-                  key={link}
-                  link={link}
-                  onAddLinkCard={() => {
-                    setLinkEmbed(link);
-                    setEmbedSuggestions(new Set(""));
-                  }}
+        <section className="max-h-[80svh] md:h-[30svh] my-3 overflow-scroll">
+          {replyTo && <ReplyToPreview post={replyTo} />}
+          <TextEdit
+            editor={editor}
+            author={author}
+            isReply={replyAuthor ? true : false}
+          />
+          <div
+            className={`${quote || linkEmbed || (images && images.length > 0) || embedSuggestions.size > 0 ? "mb-3" : ""}`}
+          >
+            {quote && <QuoteToPreview post={quote} />}
+            {embedSuggestions.size > 0 && (
+              <div className="mb-3 flex flex-col gap-y-3">
+                {Array.from(embedSuggestions).map((link) => (
+                  <LinkCardPrompt
+                    key={link}
+                    link={link}
+                    onAddLinkCard={() => {
+                      setLinkEmbed(link);
+                      setEmbedSuggestions(new Set(""));
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+            {linkEmbed !== "" && (
+              <LinkCard
+                link={linkEmbed}
+                onRemoveLinkCard={() => {
+                  setLinkEmbed("");
+                  setLinkCard(null);
+                }}
+                onAddLinkCard={setLinkCard}
+              />
+            )}
+            {images && images.length > 0 && (
+              <div className="my-4">
+                <UploadPreview
+                  images={images.slice(0, 4)}
+                  onUpdate={setImages}
                 />
-              ))}
-            </div>
-          )}
-          {linkEmbed !== "" && (
-            <LinkCard
-              link={linkEmbed}
-              onRemoveLinkCard={() => {
-                setLinkEmbed("");
-                setLinkCard(null);
-              }}
-              onAddLinkCard={setLinkCard}
-            />
-          )}
-        </div>
-        <BottomEditorBar
-          editor={editor}
-          label={label}
-          onSelectLabel={setLabel}
-          text={editor.getJSON()}
-          languages={languages}
-          onSelectLanguages={setLanguages}
-          threadGate={threadGate}
-          onUpdateThreadGate={setThreadGate}
-          images={images}
-          onUpdateImages={setImages}
-        />
+              </div>
+            )}
+          </div>
+        </section>
+        <section className="mt-auto">
+          <BottomEditorBar
+            editor={editor}
+            label={label}
+            onSelectLabel={setLabel}
+            text={editor.getJSON()}
+            languages={languages}
+            onSelectLanguages={setLanguages}
+            threadGate={threadGate}
+            onUpdateThreadGate={setThreadGate}
+            images={images}
+            onUpdateImages={setImages}
+          />
+        </section>
       </div>
     </section>
   );
diff --git a/src/components/inputs/editor/TextEdit.tsx b/src/components/inputs/editor/TextEdit.tsx
index 6a7cb346..734171d8 100644
--- a/src/components/inputs/editor/TextEdit.tsx
+++ b/src/components/inputs/editor/TextEdit.tsx
@@ -14,7 +14,7 @@ export default function TextEdit(props: Props) {
   const { editor, author, isReply } = props;
 
   return (
-    <div className="my-5">
+    <div className="p-3 rounded-2xl bg-skin-secondary overflow-scroll">
       <div className="flex gap-3">
         <Image
           src={
diff --git a/src/components/inputs/editor/TopEditorBar.tsx b/src/components/inputs/editor/TopEditorBar.tsx
index 0f8b06aa..3ec01421 100644
--- a/src/components/inputs/editor/TopEditorBar.tsx
+++ b/src/components/inputs/editor/TopEditorBar.tsx
@@ -83,7 +83,7 @@ export default function TopEditorBar(props: Props) {
         </>
       )}
       {showCancelModal && (
-        <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
+        <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 w-full">
           <h2 className="text-skin-base text-lg font-medium">
             Do you want to discard this draft?
           </h2>
diff --git a/src/components/inputs/editor/UploadPreview.tsx b/src/components/inputs/editor/UploadPreview.tsx
index 7e4a26f8..125d529a 100644
--- a/src/components/inputs/editor/UploadPreview.tsx
+++ b/src/components/inputs/editor/UploadPreview.tsx
@@ -54,14 +54,14 @@ export default function UploadPreview(props: Props) {
                 <Dialog.Portal>
                   <Dialog.Content>
                     {selectedImage && (
-                      <section className="animate-fade-up animate-duration-200 bg-skin-base border-skin-base fixed bottom-0 z-50 flex  h-full w-full flex-col justify-between overflow-scroll rounded-t-3xl p-3 shadow-2xl md:h-fit md:border-t">
+                      <section className="animate-fade-up animate-duration-200 bg-skin-base border-skin-base fixed bottom-0 z-50 flex h-full w-full flex-col justify-between overflow-scroll rounded-t-3xl p-3 shadow-2xl md:h-fit md:border-t">
                         <div>
                           <Image
                             src={selectedImage.url}
                             alt="Uploaded image"
                             width={200}
                             height={200}
-                            className="mx-auto max-h-80  rounded-xl object-cover md:max-w-xl"
+                            className="mx-auto max-h-80 rounded-xl object-cover md:max-w-xl"
                           />
                           <div className="mx-auto mt-3 flex items-center gap-2 md:max-w-xl">
                             <PiWarningCircleFill className="text-skin-base shrink-0 text-2xl" />
diff --git a/src/lib/hooks/bsky/actor/useSearchUsers.tsx b/src/lib/hooks/bsky/actor/useSearchUsers.tsx
index 3d621580..ac1bf40f 100644
--- a/src/lib/hooks/bsky/actor/useSearchUsers.tsx
+++ b/src/lib/hooks/bsky/actor/useSearchUsers.tsx
@@ -20,7 +20,7 @@ export default function useSearchUsers(props: Props) {
         const data = await queryClient.fetchQuery({
           staleTime: 300 * 1000, // 5 minutes
           queryKey: ["followers"],
-          queryFn: () => getFollows({ handle: authorHandle, agent, limit: 8 }),
+          queryFn: () => getFollows({ handle: authorHandle, agent, limit: 5 }),
         });
         return data.data.follows;
       } catch (error) {