✨ Add visual indicator for new comments in the workspace (#6728)

* 🎉 Add comment notification to workspace

* 💄 Add info to changelog

* ✨ Add minor efficiency improvements

---------

Co-authored-by: Andrey Antukh <niwi@niwi.nz>

CHANGES.md

@@ -9,7 +9,7 @@
 ### :heart: Community contributions (Thank you!)
 
 ### :sparkles: New features & Enhancements
-
+- Add visual indicator for new comments in the workspace [Taiga #11328](https://tree.taiga.io/project/penpot/issue/11328)
 - On components overrides, separate the content of the text from the rest of properties [Taiga #7434](https://tree.taiga.io/project/penpot/us/7434)
 - Improve dashboard's sidebar [Taiga #10700](https://tree.taiga.io/project/penpot/us/10700)
 

frontend/src/app/main/ui/workspace/right_header.cljs

@@ -113,6 +113,8 @@
   [{:keys [file layout page-id]}]
   (let [file-id           (:id file)
 
+        threads-map       (mf/deref refs/comment-threads)
+
         zoom              (mf/deref refs/selected-zoom)
         read-only?        (mf/use-ctx ctx/workspace-read-only?)
         selected-drawtool (mf/deref refs/selected-drawing-tool)
@@ -131,6 +133,13 @@
         team              (mf/deref refs/team)
         permissions       (get team :permissions)
 
+        has-unread-comments?
+        (mf/with-memo [threads-map file-id]
+          (->> (vals threads-map)
+               (some #(and (= (:file-id %) file-id)
+                           (pos? (:count-unread-comments %))))
+               (boolean)))
+
         display-share-button?
         (and (not (:is-default team))
              (or (:is-admin permissions)
@@ -209,8 +218,11 @@
                 :class (stl/css-case :comments-btn true
                                      :selected (= selected-drawtool :comments))
                 :on-click toggle-comments
-                :data-tool "comments"}
-       i/comments]]
+                :data-tool "comments"
+                :style {:position "relative"}}
+       i/comments
+       (when ^boolean has-unread-comments?
+         [:div {:class (stl/css :unread)}])]]
 
      (when-not ^boolean read-only?
        [:div {:class (stl/css :history-section)}

frontend/src/app/main/ui/workspace/right_header.scss

@@ -232,3 +232,14 @@
     border: none;
   }
 }
+
+.unread {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border: 2px solid var(--color-background-tertiary);
+  border-radius: 50%;
+  background: red;
+  top: 6px;
+  right: 6px;
+}