Experiment show replies count for questions

cheeaun · Nov 30, 2023 · 89fb1bb · 89fb1bb
1 parent d27de23
commit 89fb1bb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/src/components/status.css b/src/components/status.css
@@ -520,6 +520,14 @@
   color: inherit;
 } */
 
+.status .content-comment-hint {
+  margin-top: 0.25em;
+  font-size: 90%;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
 .status.compact-thread .spoiler-badge {
   font-size: smaller;
   color: var(--button-bg-color);

diff --git a/src/components/status.jsx b/src/components/status.jsx
@@ -65,6 +65,7 @@ import MenuLink from './menu-link';
 import RelativeTime from './relative-time';
 import TranslationBlock from './translation-block';
 
+const SHOW_COMMENT_COUNT_LIMIT = 280;
 const INLINE_TRANSLATE_LIMIT = 140;
 const throttle = pThrottle({
   limit: 1,
@@ -1021,6 +1022,40 @@ function Status({
     repliesCount,
     visibility,
   ]);
+  const showCommentCount = useMemo(() => {
+    if (
+      card ||
+      poll ||
+      sensitive ||
+      spoilerText ||
+      mediaAttachments?.length ||
+      isThread ||
+      withinContext ||
+      inReplyToId ||
+      repliesCount <= 0
+    ) {
+      return false;
+    }
+    const questionRegex = /[??？︖❓❔⁇⁈⁉¿‽؟]/;
+    const containsQuestion = questionRegex.test(content);
+    if (!containsQuestion) return false;
+    const contentLength = htmlContentLength(content);
+    if (contentLength > 0 && contentLength <= SHOW_COMMENT_COUNT_LIMIT) {
+      return true;
+    }
+  }, [
+    card,
+    poll,
+    sensitive,
+    spoilerText,
+    mediaAttachments,
+    reblog,
+    isThread,
+    withinContext,
+    inReplyToId,
+    repliesCount,
+    content,
+  ]);
 
   return (
     <article
@@ -1184,7 +1219,7 @@ function Status({
                     : ''
                 }`}
               >
-                {showCommentHint ? (
+                {showCommentHint && !showCommentCount ? (
                   <Icon
                     icon="comment2"
                     size="s"
@@ -1516,6 +1551,11 @@ function Status({
               <Card card={card} instance={currentInstance} />
             )}
         </div>
+        {!isSizeLarge && showCommentCount && (
+          <div class="content-comment-hint insignificant">
+            <Icon icon="comment2" alt="Replies" /> {repliesCount}
+          </div>
+        )}
         {isSizeLarge && (
           <>
             <div class="extra-meta">