enhance: use shui select for class parent

src/main/frontend/components/class.cljs

@@ -5,9 +5,9 @@
             [frontend.handler.route :as route-handler]
             [frontend.state :as state]
             [frontend.ui :as ui]
-            [frontend.util :as util]
             [rum.core :as rum]
-            [frontend.components.block :as block]))
+            [frontend.components.block :as block]
+            [logseq.shui.ui :as shui]))
 
 (rum/defc class-select
   [page class on-select]
@@ -25,40 +25,34 @@
                               classes))
         options (cons (if class
                         {:label "Choose parent class"
-                         :value ""}
+                         :value "Choose"}
                         {:label "Choose parent class"
                          :disabled true
                          :selected true
-                         :value ""})
+                         :value "Choose"})
                       options)]
-    (ui/select options
-               (fn [_e value]
-                 (on-select value))
-               {:on-pointer-down
-                (fn [e]
-                  (when (util/meta-key? e)
-                    (if-let [page (db/entity [:block/uuid (some-> (util/evalue e) uuid)])]
-                      (do
-                        (route-handler/redirect-to-page! (:block/uuid page))
-                        (.preventDefault e))
-                      (js/console.error "No selected option found to navigate to"))))})))
+    (shui/select
+     {:on-value-change on-select
+      :default-value (:block/uuid (:class/parent page))}
+     (shui/select-trigger
+      {:class "!px-2 !py-0 !h-8"}
+      (shui/select-value
+       {:placeholder "Empty"}))
+     (shui/select-content
+      (shui/select-group
+       (for [{:keys [label value disabled]} options]
+         (shui/select-item {:value value :disabled disabled} label)))))))
 
-(rum/defcs page-parent <
-  (rum/local false ::show?)
-  [state page parent]
-  (let [*show? (::show? state)
-        parent-id (:block/uuid parent)]
-    (if (or parent-id @*show?)
-      [:div.w-60
-       (class-select page parent-id (fn [value]
-                                      (if (seq value)
-                                        (db/transact!
-                                         [{:db/id (:db/id page)
-                                           :class/parent [:block/uuid (uuid value)]}])
-                                        (db/transact!
-                                          [[:db.fn/retractAttribute (:db/id page) :class/parent]]))))]
-      [:div.opacity-50.pointer.text-sm.cursor-pointer {:on-click #(reset! *show? true)}
-       "Empty"])))
+(rum/defc page-parent
+  [page parent]
+  (let [parent-id (:block/uuid parent)]
+    (class-select page parent-id (fn [value]
+                                   (if (uuid? value)
+                                     (db/transact!
+                                      [{:db/id (:db/id page)
+                                        :class/parent [:block/uuid value]}])
+                                     (db/transact!
+                                      [[:db.fn/retractAttribute (:db/id page) :class/parent]]))))))
 
 (rum/defcs configure < rum/reactive
   "Configure a class page"

src/main/frontend/components/page.cljs

@@ -539,7 +539,7 @@
             (cond
               (and db-based? (not block?))
               (db-page/page-info page
-                                 (if (ldb/class? page)
+                                 (if (and (ldb/class? page) sidebar?)
                                    (atom true)
                                    (::show-page-info? state)))