now change add comment will change annotation color

resources/ui/static/app.js

@@ -444,7 +444,7 @@ const PAGE_IFRAME_ID = "ubinote-page-content";
 
 // the dom id that wraps text for highlight
 // it'll be created on the page iframe
-function getAnnotationOnIframeId(annotationId) {
+function getAnnotationId(annotationId) {
   return "ubinote-annotation-" + annotationId;
 }
 
@@ -456,7 +456,7 @@ function getPopoverId(annotationId) {
 
 function deleteAnnotation(id) {
   // an annotation can be spanned as multiple divs
-  document.getElementById(PAGE_IFRAME_ID).contentDocument.querySelectorAll("#" + getAnnotationOnIframeId(id)).forEach((node) => {
+  document.getElementById(PAGE_IFRAME_ID).contentDocument.querySelectorAll("#" + getAnnotationId(id)).forEach((node) => {
     removeHighlight(node)
   });
   document.getElementById(getPopoverId(id)).remove();
@@ -487,7 +487,7 @@ htmx.defineExtension("ubinote-swap-response", {
       highlightRange(range, node.nodeName,
         {...attrs,
           onclick: `onClickAnnotation("${popoverId}", ${coordinate.start}, ${coordinate.end})`,
-          id: getAnnotationOnIframeId(annotationId)});
+          id: getAnnotationId(annotationId)});
       // these divs are apppend to the document, not iframedocument because it's easier to manage
       // bootstrap, htmx will works on it
       const popoverNode = document.createElement("div");
@@ -508,3 +508,16 @@ htmx.defineExtension("ubinote-swap-response", {
   //  return null;
   //}
 })
+
+window.onload = function () {
+  document.body.addEventListener("trigger-update-annotation-color", function(evt){
+    const iframeDocument = document.getElementById(PAGE_IFRAME_ID).contentDocument;
+    const payload = evt.detail;
+    const annotationId = getAnnotationId(payload["annotation-id"]);
+    // remove ubinote-highlight-xxx class and add the new payload.newClass
+    iframeDocument.querySelectorAll(`#${annotationId}`).forEach((node) => {
+      node.classList.remove(...Array.from(node.classList).filter((cls) => cls.startsWith("ubinote-highlight-")));
+      node.classList.add(payload["new-class"]);
+    })
+  })
+}

src/ubinote/api/comment.clj

@@ -5,6 +5,7 @@
    [toucan2.core :as tc]
    [ubinote.api.util :as api.u]
    [ubinote.ui :as ui]
+   [ubinote.ui.trigger :as ui.trigger]
    [ubinote.util :as u]))
 
 (defmethod ui/render :annotation-comment-edit
@@ -74,18 +75,20 @@
 
 (defn create-comment
   [{:keys [params] :as _req}]
-  (->> (assoc params
-              :creator_id api.u/*current-user-id*)
-       (api.u/decode NewComment)
-       (tc/insert-returning-instance! :m/comment)
-       (merge {:creator_email (:email @api.u/*current-user*)})
-       (ui/render :annotation-comment)
-       ui/render-hiccup-fragment))
+  (let [cmt (api.u/decode NewComment (assoc params
+                                            :creator_id api.u/*current-user-id*))]
+    (->> cmt
+         (tc/insert-returning-instance! :m/comment)
+         (merge {:creator_email (:email @api.u/*current-user*)})
+         (ui/render :annotation-comment)
+         ui/render-hiccup-fragment
+         (ui.trigger/update-annotation-color-if-needed (:annotation_id cmt)))))
 
 (defn delete-comment
   [id _req]
-  (tc/delete! :m/comment id)
-  api.u/generic-200-response)
+  (let [cmt (api.u/check-404 (tc/select-one :m/comment id))]
+   (tc/delete! :m/comment id)
+   (ui.trigger/update-annotation-color-if-needed (:annotation_id cmt) api.u/generic-200-response)))
 
 (defroutes routes
   (POST  "/" [] create-comment)

src/ubinote/api/page.clj

@@ -7,6 +7,7 @@
    [ring.util.response :as response]
    [toucan2.core :as tc]
    [ubinote.api.util :as api.u]
+   [ubinote.models.annotation :as annotation]
    [ubinote.models.common.schema :as schema]
    [ubinote.models.page :as page]
    [ubinote.ui :as ui]
@@ -35,13 +36,12 @@
 (defn render-annotation
   "Options:
   - public?: whether the annotation will be rended on a public page?"
-  [{:keys [id coordinate color comments] :as _annotation} public?]
+  [{:keys [id coordinate comments] :as _annotation} public?]
   [:span
    {;; custom attribute handled by `ubinote-swap-response` extension
     :ubinote-annotation-coordinate (json/generate-string coordinate)
     :ubinote-annotation-id         id
-    :class                         (case color
-                                     "yellow" "ubinote-highlight-yellow")}
+    :class                         (annotation/annotation-color-class (seq comments))}
    ;; the popover when click on highlight
    [:div {:class "border border-black rounded bg-white p-2 position-relative"
           :style "width: 400px;"}

src/ubinote/api/util.clj

@@ -1,5 +1,6 @@
 (ns ubinote.api.util
   (:require
+   [cheshire.core :as json]
    [clojure.string :as str]
    [hiccup2.core :as h]
    [malli.core :as mc]
@@ -97,7 +98,17 @@
 
 (defn htmx-trigger
   [resp trigger]
-  (assert (str/starts-with? trigger "trigger-") "trigger should start with trigger-")
-  (-> resp
-      ->response
-      (response/header "HX-Trigger" trigger)))
+  (let [trigger (cond
+                  (map? trigger)
+                  (do
+                   (assert (every? (comp #(str/starts-with? % "trigger-") name) (keys trigger)) "trigger should start with trigger-")
+                   (json/generate-string trigger))
+
+                  :else
+                  (do
+                   (assert (str/starts-with? trigger "trigger-") "trigger should start with trigger-")
+                   trigger))]
+
+    (-> resp
+        ->response
+        (response/header "HX-Trigger" trigger))))

src/ubinote/models/annotation.clj

@@ -31,3 +31,9 @@
     (let [annotations          (tc/select :m/annotation :page_id [:in (map :id pages)])
           page-id->annotations (group-by :page_id annotations)]
       (map #(assoc % :annotations (get page-id->annotations (:id %))) pages))))
+
+(defn annotation-color-class
+  [has-comments?]
+  (if has-comments?
+    "ubinote-highlight-green"
+    "ubinote-highlight-yellow"))

src/ubinote/ui/template.clj

@@ -89,6 +89,7 @@
     (when cfg/is-dev? [:script {:src "/static/termlog.js"}])
     (when scripts? htmx-js)
     [:script {:src "/static/app.js"}]]
+
    [:body {:hx-boosted "true"}
     (cond-> children
       navbar?

src/ubinote/ui/trigger.clj

@@ -0,0 +1,22 @@
+(ns ubinote.ui.trigger
+  (:require
+   [toucan2.core :as tc]
+   [ubinote.api.util :as api.u]
+   [ubinote.models.annotation :as annotation]))
+
+(defn update-annotation-color-trigger
+  [annotation-id new-class]
+  {:trigger-update-annotation-color {:annotation-id annotation-id
+                                     :new-class     new-class}})
+
+(defn update-annotation-color-if-needed
+  [annotation-id resp]
+  (let [cmt-count (tc/count :m/comment :annotation_id annotation-id)]
+    (cond-> resp
+      ;; removed all comments
+      (zero? cmt-count)
+      (api.u/htmx-trigger (update-annotation-color-trigger annotation-id (annotation/annotation-color-class false)))
+
+      ;; just added a new comment
+      (= 1 cmt-count)
+      (api.u/htmx-trigger (update-annotation-color-trigger annotation-id (annotation/annotation-color-class true))))))