Only scroll view if comment preview click

attestate · Dec 4, 2024 · fa6f3ad · fa6f3ad
1 parent 98b3455
commit fa6f3ad
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
@@ -652,7 +652,7 @@ const row = (
                   >
                     <div
                       class="interaction-element"
-                      onclick="document.querySelector('.comment-preview-0x${story.index}').style.opacity = 0.5, window.addToQueue(new CustomEvent('open-comments-0x${story.index}'));"
+                      onclick="document.querySelector('.comment-preview-0x${story.index}').style.opacity = 0.5, window.addToQueue(new CustomEvent('open-comments-0x${story.index}', { detail: {source: 'comment-preview'}}));"
                       style="margin: 0 5px 5px 5px; padding: 11px; border: var(--border); border-top: 2px dotted rgba(219, 105, 141, 0.075); display: flex;width: 100%; background-color: var(--bg-off-white); border-radius: 2px;"
                     >
                       <div style="width:90%;">

diff --git a/src/web/src/ChatBubble.jsx b/src/web/src/ChatBubble.jsx
@@ -34,7 +34,13 @@ const ChatBubble = ({ allowlist, delegations, storyIndex, commentCount }) => {
       disabled={isDisabled}
       onClick={() => {
         if (isDisabled) return;
-        window.dispatchEvent(new CustomEvent(`open-comments-${storyIndex}`));
+        window.dispatchEvent(
+          new CustomEvent(`open-comments-${storyIndex}`, {
+            detail: {
+              source: "chat-bubble",
+            },
+          }),
+        );
 
         const commentPreview = document.querySelector(
           `.comment-preview-${storyIndex}`,

diff --git a/src/web/src/CommentSection.jsx b/src/web/src/CommentSection.jsx
@@ -96,13 +96,16 @@ const CommentsSection = (props) => {
   const [comments, setComments] = useState([]);
   const [shown, setShown] = useState(false);
   const lastCommentRef = useRef(null);
+  const [source, setSource] = useState(null);
 
   useEffect(() => {
-    const toggle = () => {
+    const toggle = (evt) => {
       const elem = document.querySelector(`.comment-preview-${storyIndex}`);
       if (shown && elem) {
+        setSource(null);
         elem.style.display = "flex";
       } else if (elem) {
+        setSource(evt?.detail?.source);
         elem.style.display = "none";
       }
       setShown(!shown);
@@ -122,7 +125,12 @@ const CommentsSection = (props) => {
   }, [storyIndex]);
 
   useEffect(() => {
-    if (shown && comments.length > 0 && lastCommentRef.current) {
+    if (
+      shown &&
+      comments.length > 0 &&
+      lastCommentRef.current &&
+      source === "comment-preview"
+    ) {
       lastCommentRef.current.scrollIntoView({
         behavior: "instant",
         block: "start",