From 2da2defde7ff5265e5675259704913c6c8ab4688 Mon Sep 17 00:00:00 2001
From: payacom <59262811+payacom@users.noreply.github.com>
Date: Thu, 17 Sep 2026 20:38:08 +0330
Subject: [PATCH] fix(reels): collapse-icons button no longer shifts position
 when toggled
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

My earlier commit (1d1d3cd) made the 3-dot menu conditionally hidden when
collapsed, but placed it *below* the toggle button in the flex column —
removing it shrank the column and pulled the toggle down to the new
bottom edge, so the button visibly jumped lower each time you collapsed.
Reordering so the menu renders *above* the toggle (which is now always
the last child) means removing it no longer changes the toggle's position
at all, matching the already-correct RN ordering (and restoring the exact
stability the file's own prior comment described fixing once already).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/posts/ReelsPostActions.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/posts/ReelsPostActions.tsx b/src/components/posts/ReelsPostActions.tsx
index 0fded7a..6d7ca9f 100644
--- a/src/components/posts/ReelsPostActions.tsx
+++ b/src/components/posts/ReelsPostActions.tsx
@@ -414,11 +414,12 @@ export default function ReelsPostActions({
               onClick={onShareToStory}
             />
           ) : null}
-          {/* دکمه‌ی جمع‌شونده و منوی سه‌نقطه همیشه توی همین جای ثابت رندر می‌شن (مثل
-              اندروید) — قبلاً با AnimatePresence mode="wait" بین دو درختِ جدا سوییچ
-              می‌شد (جمع‌شده: [دکمه، منو] / بازشده: [آیکون‌ها، دکمه، منو]) که باعث می‌شد
-              جای دکمه و منو موقع باز/بسته‌کردن جابه‌جا بشه؛ الان فقط آیکون‌های اکسترا
-              بالای این دو تا اضافه/کم می‌شن، بدون جابه‌جایی */}
+          {/* دکمه‌ی جمع‌شونده همیشه باید آخرین فرزندِ این ستون باشه (نه هرچیزِ دیگه‌ای زیرش)
+              — این ستون absolute + bottom-36 هست، پس لبه‌ی پایینِ خودِ ستون همیشه ثابته،
+              اما وقتی فرزندی که زیرِ دکمه‌ی toggle قرار داره (مثلاً منوی سه‌نقطه) شرطی
+              حذف/اضافه بشه، توتال‌هایتِ ستون تغییر می‌کنه و دکمه‌ی toggle (که دیگه آخرین
+              فرزند نیست) جابه‌جا می‌شه. با آوردنِ منو *قبل* از toggle، دکمه‌ی toggle
+              همیشه آخرین فرزند و جاش کاملاً ثابت می‌مونه، مطابقِ اندروید */}
           <AnimatePresence>
             {expanded ? (
               <motion.div
@@ -433,6 +434,10 @@ export default function ReelsPostActions({
               </motion.div>
             ) : null}
           </AnimatePresence>
+          {/* طبق خواسته‌ی کاربر: با جمع‌کردن آیکون‌ها فقط خودِ دکمه‌ی جمع‌کردن باقی بمونه،
+              پس منوی سه‌نقطه هم باید مثل بقیه‌ی اکشن‌ها مخفی بشه — ولی چون *بالای* toggle
+              می‌آد (نه زیرش)، حذف/اضافه‌شدنش دیگه جای toggle رو عوض نمی‌کنه */}
+          {expanded ? optionsMenu : null}
           <button
             type="button"
             onClick={() => setExpanded(!expanded)}
@@ -447,9 +452,6 @@ export default function ReelsPostActions({
               className={cn("drop-shadow-lg invert", expanded && "opacity-80")}
             />
           </button>
-          {/* طبق خواسته‌ی کاربر: با جمع‌کردن آیکون‌ها فقط خودِ دکمه‌ی جمع‌کردن باقی
-              بمونه، پس منوی سه‌نقطه هم باید مثل بقیه‌ی اکشن‌ها مخفی بشه */}
-          {expanded ? optionsMenu : null}
         </div>
       )}
     </>