Highlight multiple comments

When a user gets a notification for multiple replies for a post or a
comment, those comments are now highlighted after navigating to the
post page.

core/notification.go

@@ -8,6 +8,7 @@ import (
 	"errors"
 	"fmt"
 	"log"
+	"net/url"
 	"slices"
 	"strconv"
 	"strings"
@@ -332,6 +333,17 @@ func (n *Notification) MarshalJSON() ([]byte, error) {
 		view.SeenAt = n.SeenAt
 		view.CreatedAt = n.CreatedAt
 		view.UpdatedAt = n.updatedAt
+		if view.CreatedAt != view.UpdatedAt && (n.Type == NotificationTypeNewComment || n.Type == NotificationTypeCommentReply) && view.ToURL != "" {
+			url, err := url.Parse(view.ToURL)
+			if err != nil {
+				return nil, fmt.Errorf("error parsing notification view url: %w", err)
+			}
+			q := url.Query()
+			q.Add("highlightFrom", strconv.FormatInt(view.CreatedAt.Unix(), 10))
+			q.Add("highlightTo", strconv.FormatInt(view.UpdatedAt.Unix(), 10))
+			url.RawQuery = q.Encode()
+			view.ToURL = url.String()
+		}
 		return json.Marshal(view)
 	}
 

ui/src/pages/Post/Comment.jsx

@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import Dropdown from '../../components/Dropdown';
 import MarkdownBody from '../../components/MarkdownBody';
 import ModalConfirm from '../../components/Modal/ModalConfirm';
@@ -233,6 +234,19 @@ const Comment = ({
     }
   }, [focused, focusId]);
 
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+
+  const highlighted = (() => {
+    const ts = new Date(comment.createdAt).getTime() / 1000,
+      from = parseInt(params.get('highlightFrom')),
+      to = parseInt(params.get('highlightTo'));
+    if (isNaN(to)) {
+      return ts >= from;
+    }
+    return ts >= from && ts <= to;
+  })();
+
   const [reportModalOpen, setReportModalOpen] = useState(false); // for mobile
 
   const [mutedUserHidden, setMutedUserHidden] = useState(comment.isAuthorMuted);
@@ -521,7 +535,7 @@ const Comment = ({
           <div
             className={
               'post-comment-text' +
-              (focused ? ' is-focused' : '') +
+              (focused || highlighted ? ' is-focused' : '') +
               (deleted && !purged ? ' is-red' : '')
             }
             onClick={handleCommentTextClick}