Fix highlighting comments

src/views/components/row.mjs

@@ -661,7 +661,7 @@ const row = (
                       class="interaction-element"
                       onclick="(function(){history.replaceState(null,'','#0x${story
                         .lastComment
-                        .index}')})(), document.querySelector('.comment-preview-0x${story.index}').style.opacity = 0.5, window.addToQueue(new CustomEvent('open-comments-0x${story.index}', { detail: {source: 'comment-preview'}}));"
+                        .index}')})(), document.querySelector('.comment-preview-0x${story.index}').style.opacity = 0.5, window.addToQueue(new CustomEvent('open-comments-0x${story.index}', { detail: {source: 'comment-preview'}}));window.dispatchEvent(new HashChangeEvent('hashchange'));"
                       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;"
                     >
                       <a

src/web/src/ChatBubble.jsx

@@ -41,6 +41,7 @@ const ChatBubble = ({ allowlist, delegations, storyIndex, commentCount }) => {
             },
           }),
         );
+        window.dispatchEvent(new HashChangeEvent("hashchange"));
 
         const commentPreview = document.querySelector(
           `.comment-preview-${storyIndex}`,

src/web/src/CommentSection.jsx

@@ -18,14 +18,24 @@ function truncateName(name) {
 }
 
 const Comment = React.forwardRef(({ comment, storyIndex }, ref) => {
+  const [isTargeted, setIsTargeted] = useState(
+    window.location.hash === `#0x${comment.index}`,
+  );
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      setIsTargeted(window.location.hash === `#0x${comment.index}`);
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [comment.index]);
+
   return (
     <span
       ref={ref}
       style={{
-        boxShadow:
-          window.location.hash === `#0x${comment.index}`
-            ? "0 0 0 2px rgb(175, 192, 70, 0.75)"
-            : undefined,
+        boxShadow: isTargeted ? "0 0 0 2px rgb(175, 192, 70, 0.75)" : undefined,
         color: "black",
         border: "var(--border)",
         backgroundColor: "var(--bg-off-white)",
@@ -108,6 +118,14 @@ const CommentsSection = (props) => {
       if (shown && elem) {
         setSource(null);
         elem.style.display = "flex";
+        if (window.location.hash.startsWith("#0x")) {
+          history.replaceState(
+            null,
+            "",
+            window.location.pathname + window.location.search,
+          );
+          window.dispatchEvent(new HashChangeEvent("hashchange"));
+        }
       } else if (elem) {
         setSource(evt?.detail?.source);
         elem.style.display = "none";