enhance(ui): remove all of the classic modal components

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

@@ -108,6 +108,10 @@
   []
   (some-> (last @*modals) (:id)))
 
+(defn get-first-modal-id
+  []
+  (some-> (first @*modals) (:id)))
+
 (defn close!
   ([] (close! (get-last-modal-id)))
   ([id] (update-modal! id :open? false)))

src/main/frontend/components/block.cljs

@@ -1189,7 +1189,7 @@
 
                    (if (and (not (util/mobile?))
                             (not (:preview? config))
-                            (not (:modal/show? @state/state))
+                            (not (shui-dialog/has-modal?))
                             (nil? block-type))
                      (block-reference-preview inner
                                               {:repo repo :config config :id block-id})

src/main/frontend/components/cmdk/cmdk.css

@@ -3,4 +3,8 @@
     @apply flex w-full px-3 py-2 gap-2 justify-between
     bg-gray-03 border-t border-gray-05;
   }
+}
+
+.ls-dialog-cmdk {
+  @apply p-0 w-auto !max-w-fit overflow-hidden;
 }

src/main/frontend/components/cmdk/core.cljs

@@ -381,7 +381,7 @@
 (defn- copy-block-ref [state]
   (when-let [block-uuid (some-> state state->highlighted-item :source-block :block/uuid)]
     (editor-handler/copy-block-ref! block-uuid block-ref/->block-ref)
-    (state/close-modal!)))
+    (shui/dialog-close! :ls-dialog-cmdk)))
 
 (defmulti handle-action (fn [action _state _event] action))
 
@@ -395,7 +395,7 @@
   (when-let [page-name (get-highlighted-page-uuid-or-name state)]
     (let [page (db/get-page page-name)]
       (route-handler/redirect-to-page! (:block/uuid page)))
-    (state/close-modal!)))
+    (shui/dialog-close! :ls-dialog-cmdk)))
 
 (defmethod handle-action :open-block [_ state _event]
   (when-let [block-id (some-> state state->highlighted-item :source-block :block/uuid)]
@@ -421,21 +421,21 @@
               (route-handler/redirect-to-page! block-id)
               :else
               (route-handler/redirect-to-page! (:block/uuid page) {:anchor (str "ls-block-" block-id)}))
-            (state/close-modal!)))))))
+            (shui/dialog-close! :ls-dialog-cmdk)))))))
 
 (defmethod handle-action :open-page-right [_ state _event]
   (when-let [page-name (get-highlighted-page-uuid-or-name state)]
     (let [page (db/get-page page-name)]
       (when page
         (editor-handler/open-block-in-sidebar! (:block/uuid page))))
-    (state/close-modal!)))
+    (shui/dialog-close! :ls-dialog-cmdk)))
 
 (defmethod handle-action :open-block-right [_ state _event]
   (when-let [block-uuid (some-> state state->highlighted-item :source-block :block/uuid)]
     (p/let [repo (state/get-current-repo)
             _ (db-async/<get-block repo block-uuid :children? false)]
       (editor-handler/open-block-in-sidebar! block-uuid)
-      (state/close-modal!))))
+      (shui/dialog-close! :ls-dialog-cmdk))))
 
 (defn- open-file
   [file-path]
@@ -466,7 +466,7 @@
       (cond
         (:file-path item) (do
                             (open-file (:file-path item))
-                            (state/close-modal!))
+                            (shui/dialog-close! :ls-dialog-cmdk))
         (and graph-view? page? (not shift?)) (do
                                                (state/add-graph-search-filter! @(::input state))
                                                (reset! (::input state) ""))
@@ -485,7 +485,7 @@
     (when-let [action (:action command)]
       (action)
       (when-not (contains? #{:graph/open :graph/remove :dev/replace-graph-with-db-file :ui/toggle-settings :go/flashcards} (:id command))
-        (state/close-modal!)))))
+        (shui/dialog-close! :ls-dialog-cmdk)))))
 
 (defmethod handle-action :create [_ state _event]
   (let [item (state->highlighted-item state)
@@ -501,7 +501,7 @@
                                                       :create-first-block? false})
                      create-whiteboard? (whiteboard-handler/<create-new-whiteboard-and-redirect! @!input)
                      create-page? (page-handler/<create! @!input {:redirect? true}))]
-      (state/close-modal!)
+      (shui/dialog-close! :ls-dialog-cmdk)
       (when (and create-class? result)
         (state/pub-event! [:class/configure result])))))
 
@@ -527,7 +527,7 @@
 (defmethod handle-action :theme [_ state]
   (when-let [item (some-> state state->highlighted-item)]
     (js/LSPluginCore.selectTheme (bean/->js (:source-theme item)))
-    (state/close-modal!)))
+    (shui/dialog-close!)))
 
 (defmethod handle-action :default [_ state event]
   (when-let [action (state->action state)]
@@ -726,7 +726,7 @@
     (cond
       (and meta? enter?)
       (let [repo (state/get-current-repo)]
-        (state/close-modal!)
+        (shui/dialog-close! :ls-dialog-cmdk)
         (state/sidebar-add-block! repo input :search))
       as-keydown? (if meta?
                     (show-more)

src/main/frontend/components/container.cljs

@@ -831,9 +831,7 @@
   []
   nil)
 
-(rum/defcs ^:large-vars/cleanup-todo root-container <
-  (mixins/modal :modal/show?)
-  rum/reactive
+(rum/defcs ^:large-vars/cleanup-todo root-container < rum/reactive
   (mixins/event-mixin
    (fn [state]
      (mixins/listen state js/window "pointerdown" hide-context-menu-and-clear-selection)
@@ -959,7 +957,6 @@
        [:div#app-single-container]]
 
       (ui/notification)
-      (ui/modal)
 
       (shui-toaster/install-toaster)
       (shui-dialog/install-modals)

src/main/frontend/components/settings.cljs

@@ -457,8 +457,6 @@
                             (notification/show!
                              [:div (t :settings-page/custom-date-format-notification)]
                              :warning false)))
-
-                        (state/close-modal!)
                         (shui/dialog-close-all!)
                         (when-not db-based? (route-handler/redirect! {:to :graphs})))))}
       (for [format (sort (date/journal-title-formatters))]

src/main/frontend/components/shortcut.cljs

@@ -13,6 +13,7 @@
             [frontend.handler.notification :as notification]
             [frontend.modules.shortcut.core :as shortcut]
             [frontend.modules.shortcut.data-helper :as dh]
+            [logseq.shui.dialog.core :as shui-dialog]
             [frontend.util :as util]
             [frontend.modules.shortcut.utils :as shortcut-utils]
             [frontend.modules.shortcut.config :as shortcut-config])
@@ -237,8 +238,8 @@
     ;; TODO: back interaction for the shui dialog
     (rum/use-effect!
      (fn []
-       (let [mid (state/sub :modal/id)
-             mid' (some-> (state/sub :modal/subsets) (last) (:modal/id))
+       (let [mid (shui-dialog/get-first-modal-id)
+             mid' (shui-dialog/get-last-modal-id)
              el (rum/deref *ref-el)]
          (when (or (and (not mid') (= mid modal-id))
                    (= mid' modal-id))

src/main/frontend/extensions/tldraw.cljs

@@ -28,6 +28,7 @@
             [cljs-bean.core :as bean]
             [frontend.db.async :as db-async]
             [logseq.common.util :as common-util]
+            [logseq.shui.ui :as shui]
             [frontend.util.text :as text-util]))
 
 (def tldraw (r/adapt-class (gobj/get TldrawLogseq "App")))
@@ -126,7 +127,8 @@
                           (str (:block/uuid (db/get-page block-id-str)))))
    :exportToImage (fn [page-uuid-str options]
                     (assert (common-util/uuid-string? page-uuid-str))
-                    (state/set-modal! #(export/export-blocks (uuid page-uuid-str) (merge (js->clj options :keywordize-keys true) {:whiteboard? true}))))
+                    (shui/dialog-open!
+                      #(export/export-blocks (uuid page-uuid-str) (merge (js->clj options :keywordize-keys true) {:whiteboard? true}))))
    :isWhiteboardPage (fn [page-name]
                        (when-let [entity (db/get-page page-name)]
                          (model/whiteboard-page? entity)))

src/main/frontend/handler/command_palette.cljs

@@ -56,7 +56,6 @@
 
 (defn invoke-command [{:keys [id action] :as cmd}]
   (add-history cmd)
-  (state/close-modal!)
   (plugin-handler/hook-lifecycle-fn! id action))
 
 (defn top-commands [limit]

src/main/frontend/handler/events.cljs

@@ -395,11 +395,12 @@
     (shui/dialog-open! shell/shell)))
 
 (defmethod handle :go/search [_]
-  (state/set-modal! cmdk/cmdk-modal
-                    {:fullscreen? true
-                     :close-btn?  false
-                     :panel?      false
-                     :label "ls-modal-search"}))
+  (shui/dialog-open!
+    cmdk/cmdk-modal
+    {:id :ls-dialog-cmdk
+     :align :top
+     :content-props {:class "ls-dialog-cmdk"}
+     :close-btn? false}))
 
 (defmethod handle :go/plugins [_]
   (plugin/open-plugins-modal!))

src/main/frontend/routes.cljs

@@ -6,6 +6,7 @@
             [frontend.components.page :as page]
             [frontend.components.all-pages :as all-pages]
             ;; [frontend.components.all-pages2 :as all-pages]
+            [frontend.charlie.db-playground :as db-playground]
             [frontend.components.plugins :as plugins]
             [frontend.components.repo :as repo]
             [frontend.components.settings :as settings]
@@ -97,4 +98,8 @@
    (when config/dev?
      ["/ui"
       {:name :ui
-       :view shui/page}])])
+       :view shui/page}])
+   (when config/dev?
+     ["/db"
+      {:name :db
+       :view db-playground/page}])])

src/main/frontend/state.cljs

@@ -22,6 +22,7 @@
             [frontend.rum :as r]
             [logseq.db.sqlite.util :as sqlite-util]
             [logseq.shui.ui :as shui]
+            [logseq.shui.dialog.core :as shui-dialog]
             [clojure.set :as set]
             [frontend.db.conn-state :as db-conn-state]
             [datascript.core :as d]
@@ -70,14 +71,6 @@
       ;; modals
       :modal/dropdowns                       {}
       :modal/id                              nil
-      :modal/label                           ""
-      :modal/show?                           false
-      :modal/panel-content                   nil
-      :modal/payload                         nil
-      :modal/fullscreen?                     false
-      :modal/close-btn?                      nil
-      :modal/close-backdrop?                 true
-      :modal/subsets                         []
 
       ;; ui
       :ui/viewport                           {}
@@ -1519,60 +1512,10 @@ Similar to re-frame subscriptions"
 
 (defn modal-opened?
   []
-  (:modal/show? @state))
-
-(declare set-modal!)
-(declare close-modal!)
-
-(defn set-modal!
-  ([modal-panel-content]
-   (set-modal! modal-panel-content
-               {:fullscreen? false
-                :close-btn?  true}))
-  ([modal-panel-content {:keys [id label payload fullscreen? close-btn? close-backdrop? center? panel?
-                                container-overflow-visible? style]}]
-   (let [opened? (modal-opened?)
-         style (if container-overflow-visible?
-                 (merge style {:overflow "visible"})
-                 style)]
-     (when opened?
-       (close-modal!))
-     (async/go
-       (when opened?
-         (<! (async/timeout 100)))
-       (swap! state assoc
-              :modal/id id
-              :modal/label (if label (name label) "")
-              :modal/class (if center? "as-center" "")
-              :modal/show? (boolean modal-panel-content)
-              :modal/panel-content modal-panel-content
-              :modal/payload payload
-              :modal/fullscreen? fullscreen?
-              :modal/panel? (if (boolean? panel?) panel? true)
-              :modal/close-btn? close-btn?
-              :modal/close-backdrop? (if (boolean? close-backdrop?) close-backdrop? true)
-              :modal/style style)))
-   nil))
-
-(defn close-dropdowns!
-  []
-  (let [close-fns (vals (:modal/dropdowns @state))]
-    (doseq [f close-fns]
-      (try (f) (catch :default _e nil)))))
-
-(defn close-modal!
-  [& {:keys [force?]
-      :or {force? false}}]
-  (when (or force? (not (:error/multiple-tabs-access-opfs? @state)))
-    (close-dropdowns!)
-    (swap! state assoc
-      :modal/id nil
-      :modal/label ""
-      :modal/payload nil
-      :modal/show? false
-      :modal/fullscreen? false
-      :modal/panel-content nil
-      :modal/dropdowns {})))
+  (shui-dialog/has-modal?))
+
+(defn close-modal! []
+  (shui/dialog-close!))
 
 (defn get-reactive-custom-queries-chan
   []
@@ -2165,7 +2108,7 @@ Similar to re-frame subscriptions"
 
 (defn get-modal-id
   []
-  (:modal/id @state))
+  (shui-dialog/get-last-modal-id))
 
 (defn set-auth-id-token
   [id-token]

src/main/frontend/ui.cljs

@@ -576,97 +576,6 @@
       (first binding)
       (shortcut-utils/decorate-binding binding))))
 
-(rum/defc modal-overlay
-  [state close-fn close-backdrop?]
-  [:div.ui__modal-overlay
-   {:class    (case state
-                "entering" "ease-out duration-300 opacity-0"
-                "entered" "ease-out duration-300 opacity-100"
-                "exiting" "ease-in duration-200 opacity-100"
-                "exited" "ease-in duration-200 opacity-0")
-    :on-click #(when close-backdrop? (close-fn))}
-   [:div.absolute.inset-0.opacity-75]])
-
-(rum/defc modal-panel-content-cp <
-  mixins/component-editing-mode
-  [panel-content close-fn]
-  (panel-content close-fn))
-
-(rum/defc modal-panel
-  [show? panel-content transition-state close-fn fullscreen? close-btn? style]
-  [:div.ui__modal-panel.transform.transition-all.sm:min-w-lg.sm
-   (cond->
-    {:class (case transition-state
-              "entering" "ease-out duration-300 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              "entered" "ease-out duration-300 opacity-100 translate-y-0 sm:scale-100"
-              "exiting" "ease-in duration-200 opacity-100 translate-y-0 sm:scale-100"
-              "exited" "ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95")}
-     (seq style)
-     (assoc :style style))
-   [:div.ui__modal-close-wrap
-    (when-not (false? close-btn?)
-      [:a.ui__modal-close
-       {:aria-label "Close"
-        :type       "button"
-        :on-click   close-fn}
-       [:svg.h-6.w-6
-        {:stroke "currentColor", :view-box "0 0 24 24", :fill "none"}
-        [:path
-         {:d               "M6 18L18 6M6 6l12 12"
-          :stroke-width    "2"
-          :stroke-linejoin "round"
-          :stroke-linecap  "round"}]]])]
-   (when show?
-     [:div (cond-> {:class (if fullscreen? "" "panel-content")}
-             (seq style)
-             (assoc :style style))
-      (modal-panel-content-cp panel-content close-fn)])])
-
-(rum/defc modal < rum/reactive
-  (mixins/event-mixin
-   (fn [state]
-     (mixins/hide-when-esc-or-outside
-      state
-      :on-hide (fn []
-                 (some->
-                  (.querySelector (rum/dom-node state) "button.ui__modal-close")
-                  (.click)))
-      :outside? false)
-     (mixins/on-key-down
-      state
-      {;; enter
-       13 (fn [state e]
-            (when-let [^js enter-el (some-> (rum/dom-node state)
-                                            (.querySelector "button.ui__modal-enter"))]
-              (.preventDefault e)
-              (.click enter-el)))})))
-  []
-  (let [modal-panel-content (state/sub :modal/panel-content)
-        fullscreen? (state/sub :modal/fullscreen?)
-        close-btn? (state/sub :modal/close-btn?)
-        close-backdrop? (state/sub :modal/close-backdrop?)
-        show? (state/sub :modal/show?)
-        label (state/sub :modal/label)
-        style (state/sub :modal/style)
-        class (state/sub :modal/class)
-        close-fn (fn []
-                   (state/close-modal!)
-                   (state/close-settings!))
-        modal-panel-content (or modal-panel-content (fn [_close] [:div]))]
-    [:div.ui__modal
-     {:style {:z-index (if show? 999 -1)
-              :display (if show? "flex" "none")}
-      :label label
-      :class class}
-     (css-transition
-      {:in show? :timeout 0}
-      (fn [state]
-        (modal-overlay state close-fn close-backdrop?)))
-     (css-transition
-      {:in show? :timeout 0}
-      (fn [state]
-        (modal-panel show? modal-panel-content state close-fn fullscreen? close-btn? style)))]))
-
 (defn loading
   ([] (loading (t :loading)))
   ([content] (loading content nil))