From 78bb1461a80cc5c200721ff3a4d3a17a13ec6bc8 Mon Sep 17 00:00:00 2001
From: Fabien O'Carroll <fabien@allou.is>
Date: Thu, 19 Sep 2024 14:57:25 +0700
Subject: [PATCH] Focused reply input when clicking comment button in drawer

ref https://linear.app/tryghost/issue/AP-396

We need to use a number instead of boolean here so that the state is always
refreshed, otherwise we can run into issues where we set `focused` to true but
there's no rerender because it was previously set to true, but unfocused
---
 .../src/components/feed/ArticleModal.tsx            | 13 ++++++++++++-
 .../src/components/global/APReplyBox.tsx            |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
index 52986326bb..b045689616 100644
--- a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
+++ b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
@@ -78,6 +78,14 @@ const FeedItemDivider: React.FC = () => (
 const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, allComments, focusReply}) => {
     const MODAL_SIZE_SM = 640;
     const MODAL_SIZE_LG = 2800;
+    const [isFocused, setFocused] = useState(focusReply ? 1 : 0);
+    function setReplyBoxFocused(focused: boolean) {
+        if (focused) {
+            setFocused(prev => prev + 1);
+        } else {
+            setFocused(0);
+        }
+    }
 
     const [modalSize, setModalSize] = useState<number>(MODAL_SIZE_SM);
     const modal = useModal();
@@ -152,8 +160,11 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
                             layout='modal'
                             object={object}
                             type='Note'
+                            onCommentClick={() => {
+                                setReplyBoxFocused(true);
+                            }}
                         />
-                        <APReplyBox focused={focusReply} object={object}/>
+                        <APReplyBox focused={isFocused} object={object}/>
                         <FeedItemDivider />
 
                         {/* {object.content && <div dangerouslySetInnerHTML={({__html: object.content})} className='ap-note-content text-pretty text-[1.5rem] text-grey-900'></div>} */}
diff --git a/apps/admin-x-activitypub/src/components/global/APReplyBox.tsx b/apps/admin-x-activitypub/src/components/global/APReplyBox.tsx
index d0f4a59a67..d9cc81074c 100644
--- a/apps/admin-x-activitypub/src/components/global/APReplyBox.tsx
+++ b/apps/admin-x-activitypub/src/components/global/APReplyBox.tsx
@@ -19,7 +19,7 @@ export interface APTextAreaProps extends HTMLProps<HTMLTextAreaElement> {
     className?: string;
     onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
     object: ObjectProperties;
-    focused: boolean;
+    focused: number;
 }
 
 const APReplyBox: React.FC<APTextAreaProps> = ({