🐛 Fix comment reply menu

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

@@ -67,6 +67,7 @@
             (update :comment-threads assoc id (dissoc thread :comment))
             (update-in [:workspace-data :pages-index page-id :options :comment-threads-position] assoc id position)
             (update :comments-local assoc :open id)
+            (update :comments-local assoc :options nil)
             (update :comments-local dissoc :draft)
             (update :workspace-drawing dissoc :comment)
             (update-in [:comments id] assoc (:id comment) comment))))
@@ -120,6 +121,7 @@
             (update :comment-threads assoc id (dissoc thread :comment))
             (update-in [:viewer :pages page-id :options :comment-threads-position] assoc id position)
             (update :comments-local assoc :open id)
+            (update :comments-local assoc :options nil)
             (update :comments-local dissoc :draft)
             (update :workspace-drawing dissoc :comment)
             (update-in [:comments id] assoc (:id comment) comment))))
@@ -427,6 +429,7 @@
     (update [_ state]
       (-> state
           (update :comments-local assoc :open id)
+          (update :comments-local assoc :options nil)
           (update :workspace-drawing dissoc :comment)))))
 
 (defn close-thread
@@ -435,7 +438,7 @@
     ptk/UpdateEvent
     (update [_ state]
       (-> state
-          (update :comments-local dissoc :open :draft)
+          (update :comments-local dissoc :open :draft :options)
           (update :workspace-drawing dissoc :comment)))))
 
 (defn update-filters
@@ -490,6 +493,19 @@
           (d/update-in-when [:workspace-drawing :comment] merge data)
           (d/update-in-when [:comments-local :draft] merge data)))))
 
+(defn toggle-comment-options
+  [comment]
+  (ptk/reify ::toggle-comment-options
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:comments-local :options] #(if (=  (:id comment) %) nil (:id comment))))))
+
+(defn hide-comment-options
+  []
+  (ptk/reify ::hide-comment-options
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:comments-local :options] (constantly nil)))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Helpers

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

@@ -27,6 +27,8 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
+(def comments-local-options (l/derived :options refs/comments-local))
+
 (mf/defc resizing-textarea
   {::mf/wrap-props false}
   [props]
@@ -248,25 +250,28 @@
   [{:keys [comment thread users origin] :as props}]
   (let [owner    (get users (:owner-id comment))
         profile  (mf/deref refs/profile)
-        options  (mf/use-state false)
+        options  (mf/deref comments-local-options)
         edition? (mf/use-state false)
 
         on-toggle-options
         (mf/use-fn
+         (mf/deps options)
          (fn [event]
            (dom/stop-propagation event)
-           (swap! options not)))
+           (st/emit! (dcm/toggle-comment-options comment))))
 
         on-hide-options
         (mf/use-fn
+         (mf/deps options)
          (fn [event]
            (dom/stop-propagation event)
-           (reset! options false)))
+           (st/emit! (dcm/hide-comment-options))))
 
         on-edit-clicked
         (mf/use-fn
+         (mf/deps options)
          (fn []
-           (reset! options false)
+           (st/emit! (dcm/hide-comment-options))
            (reset! edition? true)))
 
         on-delete-comment
@@ -282,7 +287,6 @@
                       (dcm/delete-comment-thread-on-viewer thread)
                       (dcm/delete-comment-thread-on-workspace thread))))
 
-
         on-delete-thread
         (mf/use-fn
          (mf/deps thread)
@@ -337,7 +341,7 @@
                         :on-cancel on-cancel}]
          [:span {:class (stl/css :text)} (:content comment)])]]
 
-     [:& dropdown {:show @options
+     [:& dropdown {:show (= options (:id comment))
                    :on-close on-hide-options}
       [:ul {:class (stl/css :comment-options-dropdown)}
        [:li {:class (stl/css :context-menu-option)

frontend/src/app/main/ui/comments.scss

@@ -216,7 +216,8 @@
   .comment-options-dropdown {
     @extend .dropdown-wrapper;
     position: absolute;
-    width: $s-120;
+    width: fit-content;
+    max-width: $s-200;
     right: 0;
     left: unset;
     .context-menu-option {