From cc6131deadf53f85356430db14afb08baf915867 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 27 Nov 2024 21:09:17 -0800
Subject: [PATCH 1/2] Add char count to alt text input

---
 .../inputs/editor/BottomEditorBar.tsx         |  2 +-
 .../inputs/editor/CharacterCount.tsx          |  7 +-
 .../inputs/editor/UploadPreview.tsx           | 72 +++++++++++--------
 src/lib/consts/general.ts                     |  1 +
 4 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src/components/inputs/editor/BottomEditorBar.tsx b/src/components/inputs/editor/BottomEditorBar.tsx
index 39caa0a8..de9fc48f 100644
--- a/src/components/inputs/editor/BottomEditorBar.tsx
+++ b/src/components/inputs/editor/BottomEditorBar.tsx
@@ -95,7 +95,7 @@ export default function BottomEditorBar(props: Props) {
               languages={languages}
               onSelectLanguages={onSelectLanguages}
             />
-            <CharacterCount charCount={charCount} />
+            <CharacterCount charCount={charCount} max={300} />
           </div>
         </div>
       </div>
diff --git a/src/components/inputs/editor/CharacterCount.tsx b/src/components/inputs/editor/CharacterCount.tsx
index 8f26ceb7..7d02b220 100644
--- a/src/components/inputs/editor/CharacterCount.tsx
+++ b/src/components/inputs/editor/CharacterCount.tsx
@@ -2,17 +2,18 @@ import { CircularProgressbar } from "react-circular-progressbar";
 
 interface Props {
   charCount: number;
+  max: number;
 }
 
 export default function CharacterCount(props: Props) {
-  const { charCount } = props;
-  const percentage = (100 * charCount) / 300;
+  const { charCount, max } = props;
+  const percentage = (100 * charCount) / max;
 
   return (
     <div className="flex gap-2.5">
       {percentage > 100 && (
         <span className="text-status-danger w-8 font-medium">
-          {300 - charCount}
+          {max - charCount}
         </span>
       )}
       <CircularProgressbar
diff --git a/src/components/inputs/editor/UploadPreview.tsx b/src/components/inputs/editor/UploadPreview.tsx
index d7b48608..46c416a8 100644
--- a/src/components/inputs/editor/UploadPreview.tsx
+++ b/src/components/inputs/editor/UploadPreview.tsx
@@ -5,6 +5,8 @@ import Image from "next/image";
 import { SetStateAction, useState } from "react";
 import Textarea from "../textarea/Textarea";
 import { CgClose } from "react-icons/cg";
+import CharacterCount from "./CharacterCount";
+import { MAX_ALT_TEXT_LENGTH } from "@/lib/consts/general";
 
 interface Props {
   images: UploadImage[];
@@ -19,7 +21,7 @@ export default function UploadPreview(props: Props) {
 
   const handleRemove = (image: UploadImage) => {
     onUpdate((prev) =>
-      prev?.filter((prevImage) => prevImage.url !== image.url)
+      prev?.filter((prevImage) => prevImage.url !== image.url),
     );
   };
 
@@ -74,6 +76,7 @@ export default function UploadPreview(props: Props) {
                             <Textarea
                               rows={6}
                               autoFocus={false}
+                              maxLength={MAX_ALT_TEXT_LENGTH}
                               placeholder="Describe what's happening in this image"
                               defaultValue={selectedImage.altText ?? ""}
                               onChange={(e) =>
@@ -81,36 +84,43 @@ export default function UploadPreview(props: Props) {
                               }
                               className="resize-none"
                             />
-                            <div className="mt-2 flex justify-end gap-3">
-                              <Button
-                                onClick={() => {
-                                  setShowAltTextModal(false);
-                                  setAltText("");
-                                }}
-                                className="border-skin-base text-skin-base hover:bg-skin-secondary rounded-full border px-4 py-2 text-sm font-semibold"
-                              >
-                                Cancel
-                              </Button>
-                              <Button
-                                onClick={() => {
-                                  setShowAltTextModal(false);
-                                  onUpdate((prev) =>
-                                    prev?.map((prevImage) =>
-                                      prevImage.url === selectedImage.url
-                                        ? Object.assign(prevImage, {
-                                            altText:
-                                              altText !== selectedImage.altText
-                                                ? altText
-                                                : selectedImage.altText,
-                                          })
-                                        : prevImage
-                                    )
-                                  );
-                                }}
-                                className="bg-primary hover:bg-primary-dark text-skin-icon-inverted rounded-full px-6 py-2 text-sm font-semibold"
-                              >
-                                Save
-                              </Button>
+                            <div className="flex flex-wrap gap-2 items-center justify-between mt-2 ">
+                              <CharacterCount
+                                charCount={altText.length}
+                                max={MAX_ALT_TEXT_LENGTH}
+                              />
+                              <div className="flex justify-end gap-3">
+                                <Button
+                                  onClick={() => {
+                                    setShowAltTextModal(false);
+                                    setAltText("");
+                                  }}
+                                  className="border-skin-base text-skin-base hover:bg-skin-secondary rounded-full border px-4 py-2 text-sm font-semibold"
+                                >
+                                  Cancel
+                                </Button>
+                                <Button
+                                  onClick={() => {
+                                    setShowAltTextModal(false);
+                                    onUpdate((prev) =>
+                                      prev?.map((prevImage) =>
+                                        prevImage.url === selectedImage.url
+                                          ? Object.assign(prevImage, {
+                                              altText:
+                                                altText !==
+                                                selectedImage.altText
+                                                  ? altText
+                                                  : selectedImage.altText,
+                                            })
+                                          : prevImage,
+                                      ),
+                                    );
+                                  }}
+                                  className="bg-primary hover:bg-primary-dark text-skin-icon-inverted rounded-full px-6 py-2 text-sm font-semibold"
+                                >
+                                  Save
+                                </Button>
+                              </div>
                             </div>
                           </div>
                         </div>
diff --git a/src/lib/consts/general.ts b/src/lib/consts/general.ts
index 80c8cd1e..5fc61900 100644
--- a/src/lib/consts/general.ts
+++ b/src/lib/consts/general.ts
@@ -1,2 +1,3 @@
 export const MAX_KNOWN_FOLLOWERS = 3;
 export const DEFAULT_SERVICE = "https://bsky.social";
+export const MAX_ALT_TEXT_LENGTH = 2000;

From f3ac86b36ec02d536894429f9953701943dbb356 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 27 Nov 2024 21:11:01 -0800
Subject: [PATCH 2/2] Slightly increase editor height on large screens

---
 src/components/inputs/editor/Editor.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/inputs/editor/Editor.tsx b/src/components/inputs/editor/Editor.tsx
index 74bdd633..94cde318 100644
--- a/src/components/inputs/editor/Editor.tsx
+++ b/src/components/inputs/editor/Editor.tsx
@@ -40,7 +40,7 @@ export default function Editor(props: Props) {
   const [languages, setLanguages] = useState<Language[]>([]);
   const [images, setImages] = useState<UploadImage[]>();
   const [embedSuggestions, setEmbedSuggestions] = useState<Set<string>>(
-    new Set("")
+    new Set(""),
   );
   const [linkEmbed, setLinkEmbed] = useState("");
   const [linkCard, setLinkCard] = useState<LinkMeta | null>(null);
@@ -49,7 +49,7 @@ export default function Editor(props: Props) {
   const quoteAuthor = quote?.author.displayName || quote?.author.handle;
   const placeholderText = getComposerPlaceholder(
     replyTo ? "reply" : quote ? "quote" : "post",
-    replyAuthor ?? quoteAuthor
+    replyAuthor ?? quoteAuthor,
   );
 
   const editor = useEditor({
@@ -152,7 +152,7 @@ export default function Editor(props: Props) {
           numberOfImages={images?.length ?? 0}
         />
 
-        <ScrollArea.Root className="max-h-[80svh] md:h-[30svh]  my-3 bg-skin-secondary p-3 rounded-2xl overflow-auto">
+        <ScrollArea.Root className="max-h-[80svh] md:h-[32svh]  my-3 bg-skin-secondary p-3 rounded-2xl overflow-auto">
           <ScrollArea.Scrollbar>
             <ScrollArea.Thumb />
           </ScrollArea.Scrollbar>