enhance: add shui components to import form

Also tweaked import messages and made shui alias consistent

.clj-kondo/config.edn

@@ -155,6 +155,7 @@
              logseq.outliner.op outliner-op
              logseq.outliner.pipeline outliner-pipeline
              logseq.outliner.datascript-report ds-report
+             logseq.shui.ui shui
              medley.core medley
              "path" node-path
              promesa.core p}}

src/main/frontend/components/cmdk.cljs

@@ -17,8 +17,8 @@
    [frontend.util.page :as page-util]
    [goog.functions :as gfun]
    [goog.object :as gobj]
-   [logseq.shui.core :as shui]
-   [logseq.shui.ui :as shui-ui]
+   [logseq.shui.core :as shui-core]
+   [logseq.shui.ui :as shui]
    [promesa.core :as p]
    [rum.core :as rum]
    [frontend.mixins :as mixins]
@@ -598,15 +598,15 @@
           (if (= show :more)
             [:div.flex.flex-row.gap-1.items-center
              "Show less"
-             (shui/shortcut "mod up" nil)]
+             (shui-core/shortcut "mod up" nil)]
             [:div.flex.flex-row.gap-1.items-center
              "Show more"
-             (shui/shortcut "mod down" nil)])])]
+             (shui-core/shortcut "mod down" nil)])])]
 
       [:div.search-results
        (for [item visible-items
              :let [highlighted? (= item highlighted-item)]]
-         (let [item (shui/list-item (assoc item
+         (let [item (shui-core/list-item (assoc item
                                            :query (when-not (= group :create) @(::input state))
                                            :compact true
                                            :rounded false
@@ -776,10 +776,10 @@
   (rand-nth
    [[:div.flex.flex-row.gap-1.items-center.opacity-50.hover:opacity-100
      [:div "Type"]
-     (shui/shortcut "/")
+     (shui-core/shortcut "/")
      [:div "to filter search results"]]
     [:div.flex.flex-row.gap-1.items-center.opacity-50.hover:opacity-100
-     (shui/shortcut ["mod" "enter"])
+     (shui-core/shortcut ["mod" "enter"])
      [:div "to open search in the sidebar"]]]))
 
 (rum/defcs tip <
@@ -791,7 +791,7 @@
       filter
       [:div.flex.flex-row.gap-1.items-center.opacity-50.hover:opacity-100
        [:div "Type"]
-       (shui/shortcut "esc" {:tiled false})
+       (shui-core/shortcut "esc" {:tiled false})
        [:div "to clear search filter"]]
 
       :else
@@ -799,24 +799,24 @@
 
 (rum/defc hint-button
   [text shortcut opts]
-  (shui-ui/button
-    (merge {:class "hint-button [&>span:first-child]:hover:opacity-100 opacity-40 hover:opacity-80"
-            :variant :ghost
-            :size  :sm}
-      opts)
-    [[:span.opacity-60 text]
+  (shui/button
+   (merge {:class "hint-button [&>span:first-child]:hover:opacity-100 opacity-40 hover:opacity-80"
+           :variant :ghost
+           :size  :sm}
+          opts)
+   [[:span.opacity-60 text]
      ;; shortcut
-     (when (not-empty shortcut)
-       (for [key shortcut]
-         [:div.ui__button-shortcut-key
-          (case key
-            "cmd" [:div (if goog.userAgent/MAC "⌘" "Ctrl")]
-            "shift" [:div "⇧"]
-            "return" [:div "⏎"]
-            "esc" [:div.tracking-tightest {:style {:transform   "scaleX(0.8) scaleY(1.2) "
-                                                   :font-size   "0.5rem"
-                                                   :font-weight "500"}} "ESC"]
-            (cond-> key (string? key) .toUpperCase))]))]))
+    (when (not-empty shortcut)
+      (for [key shortcut]
+        [:div.ui__button-shortcut-key
+         (case key
+           "cmd" [:div (if goog.userAgent/MAC "⌘" "Ctrl")]
+           "shift" [:div "⇧"]
+           "return" [:div "⏎"]
+           "esc" [:div.tracking-tightest {:style {:transform   "scaleX(0.8) scaleY(1.2) "
+                                                  :font-size   "0.5rem"
+                                                  :font-weight "500"}} "ESC"]
+           (cond-> key (string? key) .toUpperCase))]))]))
 
 (rum/defc hints
   [state]
@@ -863,13 +863,13 @@
   [:div.flex.flex-row.gap-1.items-center
    [:div "Search only:"]
    [:div group-name]
-   (shui-ui/button
-     {:variant  :ghost
-      :size     :icon
-      :class    "p-1 scale-75"
-      :on-click (fn []
-                  (reset! (::filter state) nil))}
-     (shui-ui/tabler-icon "x"))])
+   (shui/button
+    {:variant  :ghost
+     :size     :icon
+     :class    "p-1 scale-75"
+     :on-click (fn []
+                 (reset! (::filter state) nil))}
+    (shui/tabler-icon "x"))])
 
 (rum/defcs cmdk < rum/static
   rum/reactive

src/main/frontend/components/commit.cljs

@@ -9,7 +9,7 @@
             [goog.object :as gobj]
             [promesa.core :as p]
             [rum.core :as rum]
-            [logseq.shui.ui :as ui]))
+            [logseq.shui.ui :as shui]))
 
 (defn- commit-all!
   []
@@ -64,9 +64,9 @@
           [:h3#modal-headline.text-lg.leading-6.font-medium
            "No changes to commit!"]]]
         [:div.mt-5.sm:mt-4.flex
-         (ui/button
+         (shui/button
           {:on-click state/close-modal!}
-           "Close")]]
+          "Close")]]
 
        [:<>
         [:div.sm:flex.sm:items-start
@@ -84,9 +84,9 @@
          {:auto-focus true
           :default-value ""}]
         [:div.mt-5.sm:mt-4.flex.justify-end.pt-4
-         (ui/button
-           {:on-click commit-all!}
-           "Commit")]])]))
+         (shui/button
+          {:on-click commit-all!}
+          "Commit")]])]))
 
 (defn show-commit-modal! [e]
   (state/set-modal! add-commit-message)

src/main/frontend/components/db_based/page.cljs

@@ -14,7 +14,7 @@
             [frontend.ui :as ui]
             [frontend.state :as state]
             [rum.core :as rum]
-            [logseq.shui.ui :as shui-ui]
+            [logseq.shui.ui :as shui]
             [frontend.util :as util]
             [clojure.set :as set]
             [clojure.string :as string]))
@@ -147,13 +147,13 @@
      (for [mode modes]
        (let [mode' (keyword (string/lower-case mode))
              selected? (and (= mode' current-mode) (> (count modes) 1))]
-         (shui-ui/button {:class (when-not selected? "opacity-70")
-                          :variant (if selected? :outline :ghost)
-                          :size :sm
-                          :on-click (fn [e]
-                                      (util/stop-propagation e)
-                                      (reset! *mode mode'))}
-                         mode)))]))
+         (shui/button {:class (when-not selected? "opacity-70")
+                       :variant (if selected? :outline :ghost)
+                       :size :sm
+                       :on-click (fn [e]
+                                   (util/stop-propagation e)
+                                   (reset! *mode mode'))}
+                      mode)))]))
 
 (rum/defcs page-info < rum/reactive
   (rum/local false ::hover?)
@@ -211,7 +211,7 @@
                 (mode-switch types *mode)])]
             (when (or @*hover? (not collapsed?))
               [:div.px-1
-               (shui-ui/button
+               (shui/button
                 {:variant :ghost :size :sm :class "fade-link"}
                 (if collapsed?
                   [:span.text-xs.font-normal "Configure"]

src/main/frontend/components/imports.cljs

@@ -36,6 +36,7 @@
             [promesa.core :as p]
             [rum.core :as rum]
             [logseq.common.config :as common-config]
+            [logseq.shui.ui :as shui]
             [lambdaisland.glogi :as log]
             [logseq.db.frontend.validate :as db-validate]))
 
@@ -242,14 +243,15 @@
       [:div.mt-3.text-center.sm:mt-0.sm:text-left
        [:h3#modal-headline.leading-6.font-medium
         "New graph name:"]]]
-     [:input.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2.mb-4
-      {:auto-focus true
+     (shui/input
+      {:class "my-2 mb-4"
+       :auto-focus true
        :default-value graph-input
        :on-change (fn [e]
                     (set-graph-input! (util/evalue e)))
        :on-key-down (fn [e]
                       (when (= "Enter" (util/ekey e))
-                        (on-submit)))}]
+                        (on-submit)))})
 
      [:div.sm:flex.sm:items-start
       [:div.mt-3.text-center.sm:mt-0.sm:text-left
@@ -257,13 +259,14 @@
         "(Optional) Tags to import as tag classes:"]
        [:span.text-xs
         "Tags are case insensitive and separated by commas"]]]
-     [:input.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2.mb-4
-      {:default-value tag-classes-input
+     (shui/input
+      {:class "my-2 mb-4"
+       :default-value tag-classes-input
        :on-change (fn [e]
                     (set-tag-classes-input! (util/evalue e)))
        :on-key-down (fn [e]
                       (when (= "Enter" (util/ekey e))
-                        (on-submit)))}]
+                        (on-submit)))})
 
      [:div.sm:flex.sm:items-start
       [:div.mt-3.text-center.sm:mt-0.sm:text-left
@@ -271,17 +274,16 @@
         "(Optional) Properties whose values are imported as tag classes e.g. 'type':"]
        [:span.text-xs
         "Properties are case insensitive and separated by commas"]]]
-     [:input.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2.mb-4
-      {:default-value property-classes-input
+     (shui/input
+      {:class "my-2 mb-4"
+       :default-value property-classes-input
        :on-change (fn [e]
                     (set-property-classes-input! (util/evalue e)))
        :on-key-down (fn [e]
                       (when (= "Enter" (util/ekey e))
-                        (on-submit)))}]
+                        (on-submit)))})
 
-     [:div.mt-5.sm:mt-4.flex
-      (ui/button "Submit"
-                 {:on-click on-submit})]]))
+     (shui/button {:on-click on-submit} "Submit")]))
 
 (defn- counts-from-entities
   [entities]
@@ -341,7 +343,7 @@
 (defn- import-file-graph
   [*files {:keys [graph-name tag-classes property-classes]} config-file]
   (state/set-state! :graph/importing :file-graph)
-  (state/set-state! [:graph/importing-state :current-page] (str graph-name " Assets"))
+  (state/set-state! [:graph/importing-state :current-page] "Config files")
   (async/go
     (let [start-time (t/now)
           _ (async/<! (p->c (repo-handler/new-db! graph-name {:file-graph-import? true})))
@@ -381,6 +383,7 @@
                                                        {:<save-file (fn [_ path content]
                                                                       (db-editor-handler/save-file! path content))
                                                         :notify-user show-notification})))
+      (state/set-state! [:graph/importing-state :current-page] "Asset files")
       (async/<! (import-from-asset-files! asset-files))
       (async/<! (p->c (gp-exporter/import-from-doc-files! db-conn doc-files <read-file import-options)))
       (async/<! (p->c (import-favorites-from-config-edn! db-conn repo config-file)))

src/main/frontend/components/page.cljs

@@ -37,7 +37,7 @@
             [frontend.search :as search]
             [frontend.state :as state]
             [frontend.ui :as ui]
-            [logseq.shui.ui :as shui-ui]
+            [logseq.shui.ui :as shui]
             [frontend.util :as util]
             [frontend.util.text :as text-util]
             [goog.object :as gobj]
@@ -532,8 +532,8 @@
                    ;; blocks
                    (if loading?
                      [:div.space-y-2
-                      (shui-ui/skeleton {:class "h-6 w-full"})
-                      (shui-ui/skeleton {:class "h-6 w-full"})]
+                      (shui/skeleton {:class "h-6 w-full"})
+                      (shui/skeleton {:class "h-6 w-full"})]
                      (let [_ (and block? page (reset! *current-block-page (:block/name (:block/page page))))
                            _ (when (and block? (not page))
                                (route-handler/redirect-to-page! @*current-block-page))]

src/main/frontend/components/settings.cljs

@@ -1,7 +1,7 @@
 (ns frontend.components.settings
   (:require [clojure.string :as string]
             [electron.ipc :as ipc]
-            [logseq.shui.ui :as shui-ui]
+            [logseq.shui.ui :as shui]
             [frontend.colors :as colors]
             [frontend.components.assets :as assets]
             [frontend.components.file-sync :as fs]
@@ -163,12 +163,12 @@
    [:div.mt-1.sm:mt-0.sm:col-span-2.flex.items-center
     {:style {:display "flex" :gap "0.5rem" :align-items "center"}}
     [:div {:style (when stretch {:width "100%"})}
-     (if action action (shui-ui/button
-                         {:as-child (not (string/blank? href))
-                          :size     :sm
-                          :on-click on-click}
-                         (if (string/blank? href) button-label
-                           (shui-ui/link {:href href} button-label))))]
+     (if action action (shui/button
+                        {:as-child (not (string/blank? href))
+                         :size     :sm
+                         :on-click on-click}
+                        (if (string/blank? href) button-label
+                            (shui/link {:href href} button-label))))]
     (when-not (or (util/mobile?)
                   (mobile-util/native-platform?))
       [:div.text-sm.flex desc])]])
@@ -340,27 +340,27 @@
                                 none? (= color :none)]]
                       [:div.flex.items-center {:style {:height 28}}
                        (ui/tippy
-                         {:html (case color
-                                  :none [:p {:style {:max-width "300px"}}
-                                         "Cancel accent color. This is currently in beta stage and mainly used for compatibility with custom themes."]
-                                  :logseq "Logseq classical color"
-                                  (str (name color) " color") )
-                          :delay [1000, 100]}
-                         (shui-ui/button
-                           {:class      "w-5 h-5 px-1 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
-                            :auto-focus (and _in-modal? active?)
-                            :style      {:background-color (colors/variable color :09)
-                                         :outline-color    (colors/variable color (if active? :07 :06))
-                                         :outline-width    (if active? "4px" "1px")
-                                         :outline-style    :solid
-                                         :opacity          (if active? 1 0.5)}
-                            :variant    :text
-                            :on-click   (fn [_e] (state/set-color-accent! color))}
-                           [:strong
-                            {:class (if none? "h-0.5 w-full bg-red-700"
-                                              "w-2 h-2 rounded-full transition ease-in duration-100")
-                             :style {:background-color (if-not none? (str "var(--rx-" (name color) "-07)") "")
-                                     :opacity          (if (or none? active?) 1 0)}}]))
+                        {:html (case color
+                                 :none [:p {:style {:max-width "300px"}}
+                                        "Cancel accent color. This is currently in beta stage and mainly used for compatibility with custom themes."]
+                                 :logseq "Logseq classical color"
+                                 (str (name color) " color"))
+                         :delay [1000, 100]}
+                        (shui/button
+                         {:class      "w-5 h-5 px-1 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
+                          :auto-focus (and _in-modal? active?)
+                          :style      {:background-color (colors/variable color :09)
+                                       :outline-color    (colors/variable color (if active? :07 :06))
+                                       :outline-width    (if active? "4px" "1px")
+                                       :outline-style    :solid
+                                       :opacity          (if active? 1 0.5)}
+                          :variant    :text
+                          :on-click   (fn [_e] (state/set-color-accent! color))}
+                         [:strong
+                          {:class (if none? "h-0.5 w-full bg-red-700"
+                                      "w-2 h-2 rounded-full transition ease-in duration-100")
+                           :style {:background-color (if-not none? (str "var(--rx-" (name color) "-07)") "")
+                                   :opacity          (if (or none? active?) 1 0)}}]))
                        ])]]
 
     [:<>

src/main/frontend/ui.cljs

@@ -37,8 +37,8 @@
             [medley.core :as medley]
             [promesa.core :as p]
             [rum.core :as rum]
-            [logseq.shui.core :as shui]
-            [logseq.shui.ui :as shui-ui]))
+            [logseq.shui.core :as shui-core]
+            [logseq.shui.ui :as shui]))
 
 (declare icon)
 
@@ -196,7 +196,7 @@
                        (string/split #" "))
                    sequence)]
     [:span.keyboard-shortcut
-     (shui/shortcut sequence opts)]))
+     (shui-core/shortcut sequence opts)]))
 
 (rum/defc menu-link
   [{:keys [only-child? no-padding? class shortcut] :as options} child]
@@ -1026,7 +1026,7 @@
              :options               {:theme (when (= (state/sub :ui/theme) "dark") "dark")}
              :on-tweet-load-success #(reset! *loading? false)})]]))
 
-(def icon shui/icon)
+(def icon shui-core/icon)
 
 (rum/defc button-inner
   [text & {:keys [theme background variant href size class intent small? icon icon-props disabled? button-props]
@@ -1051,10 +1051,10 @@
                       :muted   disabled?}
                 button-props)
 
-        icon (when icon (shui-ui/tabler-icon icon icon-props))
+        icon (when icon (shui/tabler-icon icon icon-props))
         children [icon text]]
 
-    (shui-ui/button props children)))
+    (shui/button props children)))
 
 (defn button
   [text & {:keys []