feat(post): clicking "+" button next to "omitted replies" message shows all replies

2026-08-03 07:41:04 +02:00 · 2024-07-01 10:26:38 +02:00
parent 06e18289a4
commit d78ce84db4
41 changed files with 132 additions and 80 deletions
@@ -202,5 +202,6 @@
  "loading": "جار التحميل",
  "posted_by": "نشر بواسطة",
  "by": "بواسطة",
-  "last_reply_by": "آخر رد بواسطة"
+  "last_reply_by": "آخر رد بواسطة",
  "showing_all_replies": "عرض جميع الردود."
 }
@@ -202,5 +202,6 @@
  "loading": "লোড হচ্ছে",
  "posted_by": "পোস্ট করেছেন",
  "by": "দ্বারা",
-  "last_reply_by": "শেষ উত্তর দেননি"
+  "last_reply_by": "শেষ উত্তর দেননি",
  "showing_all_replies": "সব উত্তর দেখাচ্ছি।"
 }
@@ -202,5 +202,6 @@
  "loading": "Načítání",
  "posted_by": "Publikoval(a)",
  "by": "od",
-  "last_reply_by": "Poslední odpověď od"
+  "last_reply_by": "Poslední odpověď od",
  "showing_all_replies": "Zobrazuji všechny odpovědi."
 }
@@ -202,5 +202,6 @@
  "loading": "Indlæser",
  "posted_by": "Skrevet af",
  "by": "af",
-  "last_reply_by": "Seneste svar fra"
+  "last_reply_by": "Seneste svar fra",
  "showing_all_replies": "Viser alle svar."
 }
@@ -202,5 +202,6 @@
  "loading": "Laden",
  "posted_by": "Geschrieben von",
  "by": "von",
-  "last_reply_by": "Letzte Antwort von"
+  "last_reply_by": "Letzte Antwort von",
  "showing_all_replies": "Zeige alle Antworten."
 }
@@ -202,5 +202,6 @@
  "loading": "Φόρτωση",
  "posted_by": "Δημοσιεύτηκε από",
  "by": "από",
-  "last_reply_by": "Τελευταία απάντηση από"
+  "last_reply_by": "Τελευταία απάντηση από",
  "showing_all_replies": "Εμφανίζονται όλες οι απαντήσεις."
 }
@@ -202,5 +202,6 @@
  "loading": "Loading",
  "posted_by": "Posted by",
  "by": "by",
-  "last_reply_by": "Last reply by"
+  "last_reply_by": "Last reply by",
  "showing_all_replies": "Showing all replies."
 }
@@ -202,5 +202,6 @@
  "loading": "Cargando",
  "posted_by": "Publicado por",
  "by": "por",
-  "last_reply_by": "Última respuesta de"
+  "last_reply_by": "Última respuesta de",
  "showing_all_replies": "Mostrando todas las respuestas."
 }
@@ -202,5 +202,6 @@
  "loading": "در حال بارگذاری",
  "posted_by": "ارسال شده توسط",
  "by": "توسط",
-  "last_reply_by": "آخرین پاسخ توسط"
+  "last_reply_by": "آخرین پاسخ توسط",
  "showing_all_replies": "نمایش تمام پاسخ‌ها."
 }
@@ -202,5 +202,6 @@
  "loading": "Lataa",
  "posted_by": "Lähettäjä",
  "by": "kirjoittanut",
-  "last_reply_by": "Viimeisin vastaus"
+  "last_reply_by": "Viimeisin vastaus",
  "showing_all_replies": "Näytetään kaikki vastaukset."
 }
@@ -202,5 +202,6 @@
  "loading": "Naglo-load",
  "posted_by": "Nai-post ni",
  "by": "ni",
-  "last_reply_by": "Huling sagot ni"
+  "last_reply_by": "Huling sagot ni",
  "showing_all_replies": "Nagpapakita ng lahat ng mga sagot."
 }
@@ -202,5 +202,6 @@
  "loading": "Chargement",
  "posted_by": "Posté par",
  "by": "par",
-  "last_reply_by": "Dernière réponse par"
+  "last_reply_by": "Dernière réponse par",
  "showing_all_replies": "Affichage de toutes les réponses."
 }
@@ -202,5 +202,6 @@
  "loading": "טוען",
  "posted_by": "פורסם על ידי",
  "by": "על ידי",
-  "last_reply_by": "תגובה אחרונה מאת"
+  "last_reply_by": "תגובה אחרונה מאת",
  "showing_all_replies": "מציג את כל התגובות."
 }
@@ -202,5 +202,6 @@
  "loading": "लोड हो रहा है",
  "posted_by": "द्वारा लिखित",
  "by": "द्वारा",
-  "last_reply_by": "अंतिम उत्तर दिया गया है"
+  "last_reply_by": "अंतिम उत्तर दिया गया है",
  "showing_all_replies": "सभी उत्तर दिखा रहा है।"
 }
@@ -202,5 +202,6 @@
  "loading": "Betöltés",
  "posted_by": "Írta",
  "by": "által",
-  "last_reply_by": "Utolsó válasz írta"
+  "last_reply_by": "Utolsó válasz írta",
  "showing_all_replies": "Az összes válasz megjelenítése."
 }
@@ -202,5 +202,6 @@
  "loading": "Memuat",
  "posted_by": "Diposting oleh",
  "by": "oleh",
-  "last_reply_by": "Balasan terakhir oleh"
+  "last_reply_by": "Balasan terakhir oleh",
  "showing_all_replies": "Menampilkan semua balasan."
 }
@@ -202,5 +202,6 @@
  "loading": "Caricamento",
  "posted_by": "Pubblicato da",
  "by": "da",
-  "last_reply_by": "Ultima risposta da"
+  "last_reply_by": "Ultima risposta da",
  "showing_all_replies": "Mostrando tutte le risposte."
 }
@@ -202,5 +202,6 @@
  "loading": "読み込み中",
  "posted_by": "投稿者",
  "by": "によって",
-  "last_reply_by": "最後の返信者"
+  "last_reply_by": "最後の返信者",
  "showing_all_replies": "すべての返信を表示しています。"
 }
@@ -202,5 +202,6 @@
  "loading": "로딩 중",
  "posted_by": "작성자",
  "by": "작성자:",
-  "last_reply_by": "마지막 답글 작성자:"
+  "last_reply_by": "마지막 답글 작성자:",
  "showing_all_replies": "모든 답글을 표시합니다."
 }
@@ -202,5 +202,6 @@
  "loading": "लोड होत आहे",
  "posted_by": "ने टप्पल केला",
  "by": "व्यक्ती",
-  "last_reply_by": "शेवटचा प्रतिसाद व्यक्ती"
+  "last_reply_by": "शेवटचा प्रतिसाद व्यक्ती",
  "showing_all_replies": "सर्व प्रतिसाद दाखवत आहे."
 }
@@ -202,5 +202,6 @@
  "loading": "Laden",
  "posted_by": "Geplaatst door",
  "by": "door",
-  "last_reply_by": "Laatste reactie door"
+  "last_reply_by": "Laatste reactie door",
  "showing_all_replies": "Alle antwoorden weergeven."
 }
@@ -202,5 +202,6 @@
  "loading": "Laster",
  "posted_by": "Skrevet av",
  "by": "av",
-  "last_reply_by": "Siste svar fra"
+  "last_reply_by": "Siste svar fra",
  "showing_all_replies": "Viser alle svar."
 }
@@ -202,5 +202,6 @@
  "loading": "Ładowanie",
  "posted_by": "Opublikowane przez",
  "by": "przez",
-  "last_reply_by": "Ostatnia odpowiedź od"
+  "last_reply_by": "Ostatnia odpowiedź od",
  "showing_all_replies": "Wyświetlanie wszystkich odpowiedzi."
 }
@@ -202,5 +202,6 @@
  "loading": "Carregando",
  "posted_by": "Postado por",
  "by": "por",
-  "last_reply_by": "Última resposta por"
+  "last_reply_by": "Última resposta por",
  "showing_all_replies": "Mostrando todas as respostas."
 }
@@ -202,5 +202,6 @@
  "loading": "Încărcare",
  "posted_by": "Postat de",
  "by": "de către",
-  "last_reply_by": "Ultima răspuns de la"
+  "last_reply_by": "Ultima răspuns de la",
  "showing_all_replies": "Afișare toate răspunsurile."
 }
@@ -202,5 +202,6 @@
  "loading": "Загрузка",
  "posted_by": "Опубликовано",
  "by": "от",
-  "last_reply_by": "Последний ответ от"
+  "last_reply_by": "Последний ответ от",
  "showing_all_replies": "Показываются все ответы."
 }
@@ -202,5 +202,6 @@
  "loading": "Ngarkimi",
  "posted_by": "Postuar nga",
  "by": "nga",
-  "last_reply_by": "Përgjigje e fundit nga"
+  "last_reply_by": "Përgjigje e fundit nga",
  "showing_all_replies": "Duke treguar të gjitha përgjigjet."
 }
@@ -202,5 +202,6 @@
  "loading": "Laddar",
  "posted_by": "Postat av",
  "by": "av",
-  "last_reply_by": "Senaste svar av"
+  "last_reply_by": "Senaste svar av",
  "showing_all_replies": "Visar alla svar."
 }
@@ -202,5 +202,6 @@
  "loading": "లోడ్ అవుతోంది",
  "posted_by": "పోస్ట్ చేసినవాడు",
  "by": "ద్వారా",
-  "last_reply_by": "చివరి సమాధానం ఇచ్చింది"
+  "last_reply_by": "చివరి సమాధానం ఇచ్చింది",
  "showing_all_replies": "అన్ని సమాధానాలను చూపుతుంది."
 }
@@ -202,5 +202,6 @@
  "loading": "กำลังโหลด",
  "posted_by": "โพสต์โดย",
  "by": "โดย",
-  "last_reply_by": "การตอบคำถามล่าสุดโดย"
+  "last_reply_by": "การตอบคำถามล่าสุดโดย",
  "showing_all_replies": "กำลังแสดงคำตอบทั้งหมด"
 }
@@ -202,5 +202,6 @@
  "loading": "Yükleniyor",
  "posted_by": "Tarafından gönderildi",
  "by": "tarafından",
-  "last_reply_by": "Son cevap"
+  "last_reply_by": "Son cevap",
  "showing_all_replies": "Tüm yanıtlar gösteriliyor."
 }
@@ -202,5 +202,6 @@
  "loading": "Завантаження",
  "posted_by": "Опубліковано",
  "by": "від",
-  "last_reply_by": "Остання відповідь від"
+  "last_reply_by": "Остання відповідь від",
  "showing_all_replies": "Показуються всі відповіді."
 }
@@ -202,5 +202,6 @@
  "loading": "لوڈ ہو رہا ہے",
  "posted_by": "پوسٹ کیا گیا",
  "by": "کے ذریعے",
-  "last_reply_by": "آخری جواب دیا گیا"
+  "last_reply_by": "آخری جواب دیا گیا",
  "showing_all_replies": "تمام جوابات دکھا رہا ہے۔"
 }
@@ -202,5 +202,6 @@
  "loading": "Đang tải",
  "posted_by": "Được đăng bởi",
  "by": "bởi",
-  "last_reply_by": "Trả lời cuối cùng bởi"
+  "last_reply_by": "Trả lời cuối cùng bởi",
  "showing_all_replies": "Đang hiển thị tất cả các phản hồi."
 }
@@ -202,5 +202,6 @@
  "loading": "加载中",
  "posted_by": "由...发布",
  "by": "由...发布",
-  "last_reply_by": "最后回复者"
+  "last_reply_by": "最后回复者",
  "showing_all_replies": "显示所有回复。"
 }
@@ -23,9 +23,20 @@ import PostMenuDesktop from './post-menu-desktop';
 import ReplyQuotePreview from '../reply-quote-preview';
 import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
 import { create } from 'zustand';
 import _ from 'lodash';
-const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
+interface ShowOmittedRepliesState {
  showOmittedReplies: boolean;
  setShowOmittedReplies: (showOmittedReplies: boolean) => void;
 }
 const useShowOmittedReplies = create<ShowOmittedRepliesState>((set) => ({
  showOmittedReplies: false,
  setShowOmittedReplies: (showOmittedReplies: boolean) => set({ showOmittedReplies }),
 }));
 const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }: PostProps) => {
  const { t } = useTranslation();
  const { author, cid, locked, pinned, parentCid, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp } = post || {};
  const title = post?.title?.trim();
@@ -36,6 +47,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
  const { isDescription, isRules } = post || {}; // custom properties, not from api
  const stateString = useStateString(post);
  const isReply = parentCid;
  const { showOmittedReplies } = useShowOmittedReplies();
  const params = useParams();
  const location = useLocation();
@@ -49,7 +61,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
  const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress });
  const handleUserAddressClick = useAuthorAddressClick();
-  let numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
+  const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
  return (
    <div className={styles.postInfo}>
@@ -87,13 +99,13 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
                <span
                  title='Highlight posts by this user address'
                  className={styles.userAddress}
-                  onClick={() => handleUserAddressClick(shortAddress || accountShortAddress)}
+                  onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
                >
                  {shortAddress || accountShortAddress}
                </span>
              }
              content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
-              showTooltip={isInPostPageView}
+              showTooltip={isInPostPageView || showOmittedReplies || postReplyCount < 6}
            />
            ){' '}
          </>
@@ -279,7 +291,7 @@ const PostMessage = ({ post }: PostProps) => {
  );
 };
-const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
+const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
  let post = reply;
  // handle pending mod or author edit
  const { editedComment } = useEditedComment({ comment: reply });
@@ -287,7 +299,7 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
    post = editedComment;
  }
-  const { cid, content, link, subplebbitAddress } = post || {};
+  const { author, cid, content, link, postCid, subplebbitAddress } = post || {};
  const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
  const { hidden } = useHide({ cid });
@@ -297,9 +309,10 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
      <div
        className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
        data-cid={cid}
-        data-author-address={post?.author?.shortAddress}
+        data-author-address={author?.shortAddress}
        data-post-cid={postCid}
      >
-        <PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
+        <PostInfo openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
        {link && !hidden && isValidURL(link) && <PostMedia post={post} />}
        {content && !hidden && <PostMessage post={post} />}
      </div>
@@ -308,7 +321,8 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
 };
 const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
-  const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
+  const { t } = useTranslation();
  const { author, cid, content, link, pinned, postCid, replyCount, subplebbitAddress } = post || {};
  const { isDescription, isRules } = post || {}; // custom properties, not from api
  const params = useParams();
  const location = useLocation();
@@ -323,6 +337,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
  const totallinksCount = useCountLinksInReplies(post);
  const repliesCount = pinned ? replyCount : replyCount - 5;
  const linksCount = pinned ? totallinksCount : totallinksCount - visiblelinksCount;
  const { showOmittedReplies, setShowOmittedReplies } = useShowOmittedReplies();
  // scroll to reply if pathname is reply permalink (backlink)
  const replyRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -348,7 +363,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
            <span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
          </span>
        )}
-        <div data-cid={cid} data-author-address={post?.author?.shortAddress}>
+        <div data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
          {link && !isHidden && isValidURL(link) && <PostMedia post={post} />}
          <PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} roles={roles} />
          {!isHidden && !content && <div className={styles.spacer} />}
@@ -356,10 +371,13 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
        </div>
        {!isHidden && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
          <span className={styles.summary}>
-            <span className={styles.expandButtonWrapper}>
+            <span
-              <span className={styles.expandButton} />
+              className={`${showOmittedReplies ? styles.hideOmittedReplies : styles.showOmittedReplies} ${styles.omittedRepliesButtonWrapper}`}
-            </span>
+              onClick={() => setShowOmittedReplies(!showOmittedReplies)}
-            {linksCount > 0 ? (
+            />
            {showOmittedReplies ? (
              t('showing_all_replies')
            ) : linksCount > 0 ? (
              <Trans
                i18nKey={'replies_and_links_omitted'}
                shouldUnescape={true}
@@ -378,9 +396,9 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
          !isRules &&
          replies &&
          showReplies &&
-          (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
+          (showAllReplies || showOmittedReplies ? replies : replies.slice(-5)).map((reply, index) => (
            <div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
-              <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} />
+              <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} postReplyCount={replyCount} />
            </div>
          ))}
      </div>
@@ -21,9 +21,9 @@ import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
 import _ from 'lodash';
-const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
+const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: PostProps) => {
  const { t } = useTranslation();
-  const { author, cid, link, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp } = post || {};
+  const { author, cid, link, locked, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = post || {};
  const title = post?.title?.trim();
  const { isDescription, isRules } = post || {}; // custom properties, not from api
  const { address, shortAddress } = author || {};
@@ -49,7 +49,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
  const stateString = useStateString(post);
  const handleUserAddressClick = useAuthorAddressClick();
-  const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
+  const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
  return (
    <>
@@ -79,13 +79,13 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
                  <span
                    title='Highlight posts by this user address'
                    className={styles.userAddress}
-                    onClick={() => handleUserAddressClick(shortAddress || accountShortAddress)}
+                    onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
                  >
                    {shortAddress || accountShortAddress}
                  </span>
                }
                content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
-                showTooltip={isInPostPageView}
+                showTooltip={isInPostPageView || postReplyCount < 6}
              />
              ){' '}
            </>
@@ -234,14 +234,14 @@ const PostMessageMobile = ({ post }: PostProps) => {
  );
 };
-const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
+const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
  let post = reply;
  // handle pending mod or author edit
  const { editedComment } = useEditedComment({ comment: reply });
  if (editedComment) {
    post = editedComment;
  }
-  const { cid, content, subplebbitAddress } = post || {};
+  const { author, cid, content, postCid, subplebbitAddress } = post || {};
  const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
  const { hidden } = useHide({ cid });
@@ -251,9 +251,10 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
        <div
          className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
          data-cid={cid}
-          data-author-address={post?.author?.shortAddress}
+          data-author-address={author?.shortAddress}
          data-post-cid={postCid}
        >
-          <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
+          <PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
          {content && !hidden && <PostMessageMobile post={post} />}
          <ReplyBacklinks post={reply} />
        </div>
@@ -264,7 +265,7 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
 const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
  const { t } = useTranslation();
-  const { cid, content, pinned, replyCount, subplebbitAddress } = post || {};
+  const { author, cid, content, pinned, postCid, replyCount, subplebbitAddress } = post || {};
  const { isDescription, isRules } = post || {}; // custom properties, not from api
  const params = useParams();
  const location = useLocation();
@@ -306,8 +307,8 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
          )}
          <div className={showReplies ? styles.thread : styles.quotePreview}>
            <div className={styles.postContainer}>
-              <div className={styles.postOp} data-cid={cid} data-author-address={post?.author?.shortAddress}>
+              <div className={styles.postOp} data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
-                <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
+                <PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={replyCount} roles={roles} />
                {content && <PostMessageMobile post={post} />}
              </div>
              {!isInPostView && !isInPendingPostView && showReplies && (
@@ -333,7 +334,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
              showReplies &&
              (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
                <div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
-                  <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} />
+                  <Reply openReplyModal={openReplyModal} postReplyCount={replyCount} reply={reply} roles={roles} />
                </div>
              ))}
          </div>
@@ -1,11 +1,7 @@
 import { useParams } from 'react-router-dom';
 const useAuthorAddressClick = () => {
-  const { commentCid } = useParams<{ commentCid: string }>();
+  const handleUserAddressClick = (shortAddress: string, postCid: string) => {
  const handleUserAddressClick = (shortAddress: string) => {
    // Select the elements corresponding to the clicked short address
-    const elements = document.querySelectorAll(`[data-author-address="${shortAddress}"]`);
+    const elements = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`);
    // Check if the clicked address is already highlighted
    const isAlreadyHighlighted = Array.from(elements).some((element) => element.classList.contains('highlight'));
@@ -21,7 +17,7 @@ const useAuthorAddressClick = () => {
    // Highlight the new elements, excluding the element matching the cid if it is the OP post
    elements.forEach((element) => {
-      if (element.getAttribute('data-cid') !== commentCid) {
+      if (element.getAttribute('data-cid') !== element.getAttribute('data-post-cid')) {
        element.classList.add('highlight');
      }
    });
@@ -103,7 +103,6 @@
  --post-menu-desktop-btn-opacity: 0.8;
  --post-menu-desktop-button-color-hover: red;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png");
  /* post form */
  --post-form-toggle-font-size: 22px;
@@ -309,7 +308,6 @@
  --post-menu-desktop-btn-opacity: 0.8;
  --post-menu-desktop-button-color-hover: #d00;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-blue.png");
  /* post form */
  --post-form-toggle-font-size: 22px;
@@ -496,7 +494,6 @@
  --post-menu-desktop-btn-opacity: 0.8;
  --post-menu-desktop-button-color-hover: red;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png");
  /* post form */
  --post-form-toggle-font-size: 22px;
@@ -679,7 +676,6 @@
  --post-menu-desktop-btn-opacity: 0.8;
  --post-menu-desktop-button-color-hover: #d00;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-blue.png");
  /* post form */
  --post-form-toggle-font-size: 22px;
@@ -867,7 +863,6 @@
  --post-menu-desktop-btn-opacity: 0.8;
  --post-menu-desktop-button-color-hover: #81a2be;
  --post-greentext-color: #b5bd68;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-dark.png");
  /* post form */
  --post-form-toggle-font-size: 22px;
@@ -1069,7 +1064,6 @@
  --post-menu-desktop-btn-opacity: 0.8;
  --post-menu-desktop-button-color-hover: #FF3300;
  --post-greentext-color: #789922;
  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-photon.png");
  /* post mobile */
  --post-mobile-background-color: #eee;
@@ -179,14 +179,13 @@
  color: var(--post-mobile-abbr-text-color);
 }
-.postDesktop .summary .expandButtonWrapper {
+.postDesktop .summary .omittedRepliesButtonWrapper {
  position: absolute;
  top: 8px;
  left: 2px;
 }
-.postDesktop .summary .expandButton {
+.postDesktop .summary .omittedRepliesButtonWrapper {
  background-image: var(--post-replies-expand-button-background-image);
  background-repeat: no-repeat;
  background-position: center;
  width: 18px;
@@ -196,6 +195,14 @@
  cursor: pointer;
 }
 .postDesktop .summary .hideOmittedReplies {
  background-image: var(--post-hide-button-background-image);
 }
 .postDesktop .summary .showOmittedReplies {
  background-image: var(--post-unhide-button-background-image);
 }
 .postDesktop .summary a {
  color: var(--post-link-text-color);
  text-decoration: var(--post-content-link-text-decoration);
@@ -17,6 +17,7 @@ export interface PostProps {
  index?: number;
  isHidden?: boolean;
  post?: any;
  postReplyCount?: number;
  reply?: any;
  roles?: Role[];
  showAllReplies?: boolean;