✨ Mark all notifications as read from dashboard (#5805)

* ✨ Mark all notifications as read from dashboard

* ♻️ Mark all notifications as read code review

* ♻️ Mark all notifications as read code review II

backend/src/app/rpc/commands/comments.clj

@@ -797,3 +797,18 @@
                 {:id id}
                 {::db/return-keys false})
     nil))
+
+(def ^:private
+  schema:mark-all-threads-as-read
+  [:map {:title "mark-all-threads-as-read"}
+   [:threads [:vector ::sm/uuid]]])
+
+(sv/defmethod ::mark-all-threads-as-read
+  {::doc/added "1.15"
+   ::sm/params schema:mark-all-threads-as-read}
+  [cfg {:keys [::rpc/profile-id threads] :as params}]
+  (db/tx-run!
+   cfg
+   (fn [{:keys [::db/conn]}]
+     (doseq [thread-id threads]
+       (upsert-comment-thread-status! conn profile-id thread-id)))))

docs/user-guide/the-interface/index.njk

@@ -38,7 +38,7 @@ title: 02· The interface
   <li><strong>Custom fonts:</strong> If you have purchased or own personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.</li>
   <li><strong>Pinned projects:</strong> If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them quickly available at the sidebar.</li>
   <li><strong>User area:</strong> This must be you! Access your profile settings, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :)</li>
-  <li><strong>Comments notifications:</strong> Here you will be able to see if you have unread comments inside the files of the team.</li>
+  <li><strong>Comments notifications:</strong> Here you will be able to see if you have unread comments inside the files of the team. There's also a button to mark all notifications as read.</li>
   <li><strong>Create project:</strong> Create as many projects as you need to organize your designs.</li>
   <li><strong>File card:</strong> Basic information about a file at plain sight. A preview, update info or if it’s added as a Shared Library. From there you can perform several actions over the file (rename, duplicate, move, download, delete).</li>
   <li><strong>Libraries & Templates module:</strong> A curated selection of Libraries & Templates files ready to import.</li>

frontend/src/app/main/data/comments.cljs

@@ -14,8 +14,10 @@
    [app.common.uuid :as uuid]
    [app.main.data.event :as ev]
    [app.main.data.helpers :as dsh]
+   [app.main.data.notifications :as ntf]
    [app.main.data.team :as dtm]
    [app.main.repo :as rp]
+   [app.util.i18n :as i18n :refer [tr]]
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]))
 
@@ -454,6 +456,26 @@
                       (rx/map #(partial fetched-users %))))))
              (rx/catch #(rx/throw {:type :comment-error})))))))
 
+(defn mark-all-threads-as-read
+  "Mark all threads as read"
+  [team-id]
+  (ptk/reify ::mark-all-threads-as-read
+    ev/Event
+    (-data [_] {})
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [threads (-> state :comment-threads vals)]
+        (rx/concat
+         (->> (rp/cmd! :mark-all-threads-as-read {:threads (mapv :id threads)})
+              (rx/map #(retrieve-unread-comment-threads team-id))
+              (rx/catch #(rx/throw {:type :comment-error})))
+         (rx/of (ntf/show {:level :info
+                           :type :toast
+                           :content (tr "dashboard.mark-all-as-read.success")
+                           :timeout 7000})))))))
+
+
+
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Local State

frontend/src/app/main/ui/dashboard/comments.cljs

@@ -63,7 +63,13 @@
         (mf/use-callback
          (fn [thread]
            (st/emit! (-> (dwcm/navigate thread)
-                         (with-meta {::ev/origin "dashboard"})))))]
+                         (with-meta {::ev/origin "dashboard"})))))
+
+        on-read-all
+        (mf/use-callback
+         (mf/deps team-id)
+         (fn []
+           (st/emit! (dcm/mark-all-threads-as-read team-id))))]
 
     (mf/use-effect
      (mf/deps team-id)
@@ -82,6 +88,13 @@
       [:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
        [:div {:class (stl/css :header)}
         [:h3 {:class (stl/css :header-title)} (tr "dashboard.notifications")]
+        (when (seq tgroups)
+          [:> icon-button* {:variant "ghost"
+                            :tab-index (if show? "0" "-1")
+                            :aria-label (tr "label.mark-all-as-read")
+                            :on-click on-read-all
+                            :icon "tick"}])
+
         [:> icon-button* {:variant "ghost"
                           :tab-index (if show? "0" "-1")
                           :aria-label (tr "labels.close")

frontend/translations/en.po

@@ -6966,3 +6966,9 @@ msgstr "Autosaved versions will be kept for %s days."
 #, unused
 msgid "workspace.viewport.click-to-close-path"
 msgstr "Click to close the path"
+
+msgid "dashboard.mark-all-as-read.success"
+msgstr "Marked all notifications as read"
+
+msgid "label.mark-all-as-read"
+msgstr "Mark all as read"

frontend/translations/es.po

@@ -6959,3 +6959,9 @@ msgstr "Los autoguardados duran %s días."
 #, unused
 msgid "workspace.viewport.click-to-close-path"
 msgstr "Pulsar para cerrar la ruta"
+
+msgid "dashboard.mark-all-as-read.success"
+msgstr "Se han marcado todas las noficaciones como leídas"
+
+msgid "label.mark-all-as-read"
+msgstr "Marcar todo como leído"