enhance(ux): simplify to set icon for page block

src/main/frontend/components/property/value.cljs

@@ -26,6 +26,7 @@
             [frontend.handler.property.util :as pu]
             [logseq.db.frontend.property.type :as db-property-type]
             [dommy.core :as d]
+            [goog.dom :as gdom]
             [frontend.search :as search]
             [goog.functions :refer [debounce]]
             [frontend.handler.route :as route-handler]
@@ -51,13 +52,8 @@
 
 (rum/defc icon-row
   [block editing?]
-  (let [icon-value (:logseq.property/icon block)]
-    [:div.col-span-3.flex.flex-row.items-center.gap-2
-     (icon-component/icon-picker icon-value
-       {:disabled? config/publishing?
-        :initial-open? editing?
-        :del-btn? (some? icon-value)
-        :on-chosen (fn [_e icon]
+  (let [icon-value (:logseq.property/icon block)
+        on-chosen! (fn [_e icon]
                      (if icon
                        (db-property-handler/set-block-property!
                          (:db/id block)
@@ -69,7 +65,30 @@
                      ;; close icon picker & select
                      (shui/popup-hide-all!)
                      ;; close page property select modal
-                     (shui/dialog-close!))})]))
+                     (shui/dialog-close!))]
+
+    (rum/use-effect!
+      (fn []
+        (when editing?
+          (shui/popup-hide-all!)
+          (let [^js container (or (some-> js/document.activeElement (.closest ".page"))
+                                (gdom/getElement "main-content-container"))
+                icon (get block (pu/get-pid :logseq.property/icon))]
+            (util/schedule
+              (fn []
+                (when-let [^js target (some-> (.querySelector container (str "#ls-block-" (str (:block/uuid block))))
+                                        (.querySelector ".block-main-container"))]
+                  (shui/popup-show! target
+                    #(icon-component/icon-search {:on-chosen on-chosen! :del-btn? (some? icon)})
+                    {:id :ls-icon-picker
+                     :align :start})))))))
+      [editing?])
+
+    [:div.col-span-3.flex.flex-row.items-center.gap-2
+     (icon-component/icon-picker icon-value
+       {:disabled? config/publishing?
+        :del-btn? (some? icon-value)
+        :on-chosen on-chosen!})]))
 
 (defn- select-type?
   [property type]