From 8a2bd84f6928f54b6928d49894554dce795d3431 Mon Sep 17 00:00:00 2001
From: Lorenzo <aegroto@users.noreply.github.com>
Date: Sun, 17 Nov 2024 00:04:49 +0100
Subject: [PATCH] fix: upvote widget not rendered when comment is collapsed
 (#1583)

* fix: upvote widget not rendered when comment is collapsed

* fix: restored missing conditional on handleShortPress

* chore: icon horizontal space maintained even if the comment is collapsed

* chore: 'rendered' argument renamed to 'visible'

* chore: collapsed condition merged with the 'disabled' variable

* reduce unecessary code

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: k00b <k00b@stacker.news>
---
 components/comment.js |  2 +-
 components/upvote.js  | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/comment.js b/components/comment.js
index 62e455f3..e5989728 100644
--- a/components/comment.js
+++ b/components/comment.js
@@ -149,7 +149,7 @@ export default function Comment ({
             ? <Boost item={item} className={styles.upvote} />
             : item.meDontLikeSats > item.meSats
               ? <DownZap width={24} height={24} className={styles.dontLike} item={item} />
-              : pin ? <Pin width={22} height={22} className={styles.pin} /> : <UpVote item={item} className={styles.upvote} />}
+              : pin ? <Pin width={22} height={22} className={styles.pin} /> : <UpVote item={item} className={styles.upvote} collapsed={collapse === 'yep'} />}
         <div className={`${itemStyles.hunk} ${styles.hunk}`}>
           <div className='d-flex align-items-center'>
             {item.user?.meMute && !includeParent && collapse === 'yep'
diff --git a/components/upvote.js b/components/upvote.js
index d152e368..9db08819 100644
--- a/components/upvote.js
+++ b/components/upvote.js
@@ -103,7 +103,7 @@ export const nextTip = (meSats, { tipDefault, turboTipping, tipRandom, tipRandom
   return defaultTipIncludingRandom({ tipDefault, tipRandom, tipRandomMin, tipRandomMax })
 }
 
-export default function UpVote ({ item, className }) {
+export default function UpVote ({ item, className, collapsed }) {
   const showModal = useShowModal()
   const [voteShow, _setVoteShow] = useState(false)
   const [tipShow, _setTipShow] = useState(false)
@@ -150,8 +150,8 @@ export default function UpVote ({ item, className }) {
 
   const zap = useZap()
 
-  const disabled = useMemo(() => item?.mine || item?.meForward || item?.deletedAt,
-    [item?.mine, item?.meForward, item?.deletedAt])
+  const disabled = useMemo(() => collapsed || item?.mine || item?.meForward || item?.deletedAt,
+    [collapsed, item?.mine, item?.meForward, item?.deletedAt])
 
   const [meSats, overlayText, color, nextColor] = useMemo(() => {
     const meSats = (me ? item?.meSats : item?.meAnonSats) || 0
@@ -244,9 +244,7 @@ export default function UpVote ({ item, className }) {
         onShortPress={handleShortPress}
       >
         <ActionTooltip notForm disable={disabled} overlayText={overlayText}>
-          <div
-            className={classNames(disabled && styles.noSelfTips, styles.upvoteWrapper)}
-          >
+          <div className={classNames(disabled && styles.noSelfTips, styles.upvoteWrapper)}>
             <UpBolt
               onPointerEnter={() => setHover(true)}
               onMouseLeave={() => setHover(false)}