Highlight preview comment

attestate · Dec 5, 2024 · 537d468 · 537d468
1 parent b20679a
commit 537d468
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
@@ -659,14 +659,14 @@ const row = (
                   >
                     <div
                       class="interaction-element"
-                      onclick="(function(){const orig=window.location.href; history.replaceState(null,'',window.location.pathname + window.location.search + '#open-comment-0x${story
+                      onclick="(function(){history.replaceState(null,'','#0x${story
                         .lastComment
-                        .index}'); history.replaceState(null,'',orig)})(), 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'}}));"
                       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
                         class="comment-preview-anchor"
-                        href="#open-comment-0x${story.lastComment.index}"
+                        href="#0x${story.lastComment.index}"
                         style="width: 100%; display: flex; pointer-events: none;"
                       >
                         <div style="width:90%;">

diff --git a/src/web/src/CommentSection.jsx b/src/web/src/CommentSection.jsx
@@ -17,11 +17,15 @@ function truncateName(name) {
   return name.slice(0, maxLength) + "...";
 }
 
-const Comment = React.forwardRef(({ comment, index }, ref) => {
+const Comment = React.forwardRef(({ comment, storyIndex }, ref) => {
   return (
     <span
       ref={ref}
       style={{
+        boxShadow:
+          window.location.hash === `#0x${comment.index}`
+            ? "0 0 0 2px rgb(175, 192, 70, 0.75)"
+            : undefined,
         color: "black",
         border: "var(--border)",
         backgroundColor: "var(--bg-off-white)",
@@ -147,7 +151,7 @@ const CommentsSection = (props) => {
             ref={index === comments.length - 1 ? lastCommentRef : null}
             key={comment.index}
             comment={comment}
-            index={storyIndex}
+            storyIndex={storyIndex}
           />
         ))}
       <CommentInput {...props} style={{ margin: "1rem 0" }} />