enhance(ui): refactor the diff modal with the shui dialog component

src/main/frontend/components/diff.cljs

@@ -5,6 +5,7 @@
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
+            [logseq.shui.ui :as shui]
             [medley.core :as medley]
             [rum.core :as rum]))
 
@@ -35,12 +36,13 @@
     (reset! db-value db-content))
   [:div.cp__diff-file
    [:div.cp__diff-file-header
-    [:span.cp__diff-file-header-content.pl-1.font-medium
-     (str "File " path "has been modified on the disk.")]]
+    [:span.cp__diff-file-header-content.pl-1
+     (shui/tabler-icon "info-triangle")
+     [:span (str "File " path "has been modified on the disk.")]]]
    [:div.p-4
     (when (not= (string/trim disk-content) (string/trim db-content))
       (ui/foldable
-       [:span.text-sm.font-medium.ml-1 "Check diff"]
+       (shui/button {:variant :link :class "!px-0"} "Check diff")
        (fn []
          (let [local-content (or db-content "")
                content (or disk-content "")
@@ -72,7 +74,7 @@
                      (file/alter-file repo path value
                                       {:re-render-root? true
                                        :skip-compare? true}))
-                   (state/close-modal!)))]
+                   (shui/dialog-close!)))]
 
      [:div.flex-1.mt-8.sm:ml-4.sm:mt-0
       [:div.mb-2 "In Logseq:"]
@@ -89,4 +91,4 @@
                      (file/alter-file repo path value
                                       {:re-render-root? true
                                        :skip-compare? true}))
-                   (state/close-modal!)))]]]])
+                   (shui/dialog-close!)))]]]])

src/main/frontend/components/diff.css

@@ -1,25 +1,21 @@
 .cp__diff-file {
-    @apply mb-3;
+  @apply mb-3;
 
-    textarea {
-        min-height: 20vh;
+  textarea {
+    @apply min-h-[20vh];
 
-        @screen sm {
-            min-height: 50vh;
-        }
+    @screen sm {
+      @apply min-h-[40vh];
     }
- }
+  }
+}
 
 .cp__diff-file-header {
-  background-color: var(--ls-secondary-background-color);
-  padding: 5px 10px;
-  display: flex;
-  align-items: center;
+  @apply px-1 py-2 bg-yellow-rx-04 rounded mt-4 font-medium;
 }
 
 .cp__diff-file-header-content {
-    @apply truncate;
-    overflow-wrap: break-word;
+  @apply truncate break-all flex items-center space-x-1 opacity-70;
 }
 
 .cp__diff-file-header-type {

src/main/frontend/handler/events.cljs

@@ -396,8 +396,9 @@
 
 (defmethod handle :file/not-matched-from-disk [[_ path disk-content db-content]]
   (when-let [repo (state/get-current-repo)]
-    (state/set-modal! #(diff/local-file repo path disk-content db-content)
-                      {:label "diff__cp"})))
+    (shui/dialog-open!
+      #(diff/local-file repo path disk-content db-content)
+      {:label "diff__cp"})))
 
 
 (defmethod handle :modal/display-file-version-selector  [[_ versions path  get-content]]

src/main/logseq/api.cljs

@@ -742,7 +742,7 @@
             opts (bean/->clj opts)]
       (when block
         (p/do!
-          (when (and db-base? (not (nil? (:properties opts))))
+          (when (and db-base? (some? (:properties opts)))
             (api-block/save-db-based-block-properties! block (:properties opts)))
           (editor-handler/save-block! repo
             (sdk-utils/uuid-or-throw-error block-uuid) content