From ae5cd0ee493c14f2c3d6cc30cfd0e393d46b14f4 Mon Sep 17 00:00:00 2001
From: mkljczk <git@mkljczk.pl>
Date: Fri, 7 Mar 2025 11:38:19 +0100
Subject: [PATCH] pl-fe: Fix focused status not reacting to actions on it

Signed-off-by: mkljczk <git@mkljczk.pl>
---
 .../src/features/status/components/thread.tsx | 82 ++++++++-----------
 1 file changed, 35 insertions(+), 47 deletions(-)

diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx
index 21b2c0cfd..b3105c8fc 100644
--- a/packages/pl-fe/src/features/status/components/thread.tsx
+++ b/packages/pl-fe/src/features/status/components/thread.tsx
@@ -325,59 +325,47 @@ const Thread: React.FC<IThread> = ({
     react: handleHotkeyReact,
   };
 
-  const children = useMemo(() => {
-    const focusedStatus = (
-      <div className={clsx({ 'pb-4': hasDescendants })} key={status.id}>
-        {status.deleted ? (
-          <Tombstone id={status.id} onMoveUp={handleMoveUp} onMoveDown={handleMoveDown} deleted />
-        ) : (
-          <HotKeys handlers={handlers}>
-            <div
-              ref={statusRef}
-              className='focusable relative'
-              tabIndex={0}
-              // FIXME: no "reblogged by" text is added for the screen reader
-              aria-label={textForScreenReader(intl, status)}
-            >
+  const focusedStatus = (
+    <div className={clsx({ 'pb-4': hasDescendants })} key={status.id}>
+      {status.deleted ? (
+        <Tombstone id={status.id} onMoveUp={handleMoveUp} onMoveDown={handleMoveDown} deleted />
+      ) : (
+        <HotKeys handlers={handlers}>
+          <div
+            ref={statusRef}
+            className='focusable relative'
+            tabIndex={0}
+            // FIXME: no "reblogged by" text is added for the screen reader
+            aria-label={textForScreenReader(intl, status)}
+          >
 
-              <DetailedStatus
-                status={status}
-                onOpenCompareHistoryModal={handleOpenCompareHistoryModal}
-              />
+            <DetailedStatus
+              status={status}
+              onOpenCompareHistoryModal={handleOpenCompareHistoryModal}
+            />
 
-              <hr className='-mx-4 mb-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />
+            <hr className='-mx-4 mb-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />
 
-              <StatusActionBar
-                status={status}
-                expandable={isModal}
-                space='lg'
-                withLabels
-              />
-            </div>
-          </HotKeys>
-        )}
+            <StatusActionBar
+              status={status}
+              expandable={isModal}
+              space='lg'
+              withLabels
+            />
+          </div>
+        </HotKeys>
+      )}
 
-        {hasDescendants && (
-          <hr className='-mx-4 mt-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />
-        )}
-      </div>
-    );
+      {hasDescendants && (
+        <hr className='-mx-4 mt-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />
+      )}
+    </div>
+  );
 
-    const children: JSX.Element[] = [];
-
-    if (isModal) {
-      // Add padding to the top of the Thread (for Media Modal)
-      children.push(<div key='padding' className='h-4' />);
-    }
-
-    const renderedAncestors = renderChildren(ancestorsIds);
-    const renderedDescendants = renderChildren(descendantsIds);
-
-    children.push(...renderedAncestors, focusedStatus, ...renderedDescendants);
-
-    return children;
-  }, [ancestorsIds, descendantsIds, status.deleted, status.id, isModal]);
+  const renderedAncestors = useMemo(() => [isModal ? <div key='padding' className='h-4' /> : null, ...renderChildren(ancestorsIds)], [ancestorsIds]);
+  const renderedDescendants = useMemo(() => renderChildren(descendantsIds), [descendantsIds]);
 
+  const children: (JSX.Element | null)[] = [...renderedAncestors, focusedStatus, ...renderedDescendants];
 
   return (
     <Stack