enhance(ux): support do not remind me for the shui confirm dialog

deps/shui/src/logseq/shui/dialog/core.cljs

@@ -4,6 +4,7 @@
             [medley.core :as medley]
             [logseq.shui.util :as util]
             [logseq.shui.base.core :as base]
+            [logseq.shui.form.core :as form]
             [promesa.core :as p]))
 
 ;; provider
@@ -176,12 +177,17 @@
        :open open?
        :on-open-change #(update-modal! id :open? %)}
       (alert-dialog-content props
-        (alert-dialog-header
-          (when title (alert-dialog-title title))
-          (when description (alert-dialog-description description)))
+        (when (or title description)
+          (alert-dialog-header
+            {:class "ui__alert-dialog-header"}
+            (when title (alert-dialog-title title))
+            (when description (alert-dialog-description description))))
+
         (when content
           [:div.ui__alert-dialog-main-content content])
+
         (alert-dialog-footer
+          {:class "ui__alert-dialog-footer"}
           (if footer
             footer
             [:<>
@@ -193,34 +199,63 @@
 
 (rum/defc confirm-inner
   [config]
-  (let [{:keys [deferred outside-cancel?]} config
-        *ok-ref (rum/use-ref nil)]
+  (let [{:keys [id deferred outside-cancel? data-reminder]} config
+        reminder? (boolean (and id data-reminder))
+        [ready?, set-ready!] (rum/use-state (not reminder?))
+        *ok-ref (rum/use-ref nil)
+        *reminder-ref (rum/use-ref nil)]
+
+    (rum/use-effect!
+      (fn []
+        (when ready?
+          (js/setTimeout
+            #(some-> (rum/deref *ok-ref) (.focus)) 128)))
+      [ready?])
 
     (rum/use-effect!
       (fn []
-        (js/setTimeout
-          #(some-> (rum/deref *ok-ref) (.focus)) 128))
+        (try
+          (if-let [reminder-v (and reminder? (js/localStorage.getItem (str id)))]
+            (if (< (- (js/Date.now) reminder-v) (* 1000 60 10))
+              (do (detach-modal! id) (p/resolve! deferred true))
+              (set-ready! true))
+            (set-ready! true))
+          (catch js/Error _e
+            (set-ready! true))))
       [])
 
-    (alert-inner
-      (assoc config
-        :overlay-props
-        {:on-click #(when outside-cancel? (close!) (p/reject! deferred nil))}
-
-        :footer
-        [:<>
-         (base/button
-           {:key "cancel"
-            :on-click #(do (close!) (p/reject! deferred false))
-            :variant :outline
-            :size :sm}
-           "Cancel")
-         (base/button
-           {:key "ok"
-            :ref *ok-ref
-            :on-click #(do (close!) (p/resolve! deferred true))
-            :size :sm
-            } "OK")]))))
+    (when ready?
+      (alert-inner
+        (assoc config
+          :data-mode :confirm
+          :overlay-props
+          {:on-click #(when outside-cancel? (close!) (p/reject! deferred nil))}
+
+          :footer
+          [:<>
+           [:span.flex.items-center.pt-1
+            (when (and id data-reminder)
+              [:label.flex.items-center.gap-1.text-sm
+               (form/checkbox {:ref *reminder-ref})
+               [:span.opacity-50 "Don't remind me again"]])]
+           [:span.flex.gap-2
+            (base/button
+              {:key "cancel"
+               :on-click #(do (close!) (p/reject! deferred false))
+               :variant :outline
+               :size :sm}
+              "Cancel")
+            (base/button
+              {:key "ok"
+               :ref *ok-ref
+               :on-click (fn []
+                           (when-let [^js reminder (and id data-reminder (rum/deref *reminder-ref))]
+                             (when (= "checked" (.-state (.-dataset reminder)))
+                               (js/localStorage.setItem (str id) (js/Date.now))))
+                           (close!)
+                           (p/resolve! deferred true))
+               :size :sm
+               } "OK")]])))))
 
 (rum/defc install-modals
   < rum/static

resources/css/shui.css

@@ -253,6 +253,14 @@ div[data-radix-popper-content-wrapper] {
   }
 }
 
+.ui__alert-dialog-content {
+  &[data-mode=confirm] {
+    .ui__alert-dialog-footer {
+      @apply flex justify-between font-normal items-center select-none;
+    }
+  }
+}
+
 .ui__button-shortcut-key {
   @apply text-xs font-normal h-5 w-5 flex items-center justify-center rounded bg-gray-06-alpha;
 
@@ -322,14 +330,14 @@ div[data-radix-popper-content-wrapper] {
 }
 
 .popper-arrow {
-    fill: white;
-    filter: drop-shadow(0 0 3px var(--lx-gray-12));
-    clip-path: inset(0 -10px -10px -10px);
+  fill: white;
+  filter: drop-shadow(0 0 3px var(--lx-gray-12));
+  clip-path: inset(0 -10px -10px -10px);
 }
 
 .dark-theme {
-    .popper-arrow {
-        /* FIXME: set the best color for different themes */
-        fill: none;
-    }
+  .popper-arrow {
+    /* FIXME: set the best color for different themes */
+    fill: none;
+  }
 }

src/main/frontend/components/property_v2.cljs

@@ -360,7 +360,10 @@
         :item-props {:class "opacity-60 focus:opacity-100 focus:!text-red-rx-09"
                      :on-select (fn [^js e]
                                   (util/stop e)
-                                  (-> (shui/dialog-confirm! "Are you sure you want to delete property from this node?")
+                                  (-> (shui/dialog-confirm!
+                                        "Are you sure you want to delete property from this node?"
+                                        {:id :delete-property-from-node
+                                         :data-reminder :ok})
                                     (p/then (fn []
                                               (handle-delete-property! owner-block property {:class-schema? false})
                                               (shui/popup-hide-all!)))

src/main/frontend/ui.css

@@ -211,19 +211,6 @@ html.is-mobile {
   }
 }
 
-.ui__confirm-modal {
-  .sublabel {
-    display: flex;
-    padding: 2px 0;
-    align-items: center;
-    font-size: 14px;
-
-    input[type='checkbox'] {
-      margin-right: 8px;
-    }
-  }
-}
-
 .dropdown-wrapper {
   @apply border min-w-[12rem] rounded-md bg-popover overflow-hidden;