enhance: replace emoji-picker with new icon component

src/main/frontend/components/icon.cljs

@@ -94,7 +94,7 @@
     [:div.icon-search.flex.flex-1.flex-col.gap-2
      [:input.form-input.block.w-full.sm:text-sm.sm:leading-5
       {:auto-focus    true
-       :placeholder   "Search icons"
+       :placeholder   "Select icon"
        :default-value ""
        :on-change     (debounce
                        (fn [e]
@@ -126,7 +126,7 @@
           (emojis-cp emojis opts)
           (icons-cp tabler-icons opts))])
 
-     (when @*hover
+     (if @*hover
        [:div.flex.flex-1.flex-row.items-center.gap-2
         [:button.transition-opacity
          {:style {:font-size 32}
@@ -136,4 +136,5 @@
            (ui/icon (:icon @*hover) {:size 32})
            (:native (first (:skins @*hover))))]
 
-        (:name @*hover)])]))
+        (:name @*hover)]
+       [:div {:style {:padding-bottom 32}}])]))

src/main/frontend/components/icon.css

@@ -1,3 +1,7 @@
+.icon-search {
+    width: 300px;
+}
+
 .emojis button:hover, .icons button:hover {
     background-color: var(--ls-quaternary-background-color);
     border-radius: 100%;

src/main/frontend/components/property.cljs

@@ -22,7 +22,7 @@
             [logseq.db.property :as db-property]
             [rum.core :as rum]
             [frontend.handler.route :as route-handler]
-            ))
+            [frontend.components.icon :as icon-component]))
 
 (defn- update-property!
   [property property-name property-schema]
@@ -33,25 +33,33 @@
     :property-schema property-schema}))
 
 (rum/defc icon
-  [block {:keys [_type id]} {:keys [disabled?]}]            ; only :emoji supported yet
+  [block {:keys [type id icon]} {:keys [disabled?]}]
   (let [repo (state/get-current-repo)
         icon-property-id (:block/uuid (db/entity [:block/name "icon"]))]
     (ui/dropdown
      (fn [{:keys [toggle-fn]}]
-       (if id
+       (cond
+         (and (= :emoji type) id)
          [:a {:on-click #(when-not disabled? (toggle-fn))}
           [:em-emoji {:id id}]]
+
+         (and (= :tabler-icon type) icon)
+         [:a {:on-click #(when-not disabled? (toggle-fn))}
+          (ui/icon icon)]
+
+         :else
          [:a.flex.flex-row.items-center {:on-click #(when-not disabled? (toggle-fn))}
-          (ui/icon "point" {:size 16})
+          [:span.bullet-container.cursor
+           [:span.bullet]]
           [:div.ml-1.text-sm "Pick another icon"]]))
      (fn [{:keys [toggle-fn]}]
-       (ui/emoji-picker
-        {:auto-focus true
-         :on-emoji-select (fn [icon]
-                            (when-let [id (.-id icon)]
-                              (property-handler/update-property! repo (:block/uuid block) {:properties {icon-property-id {:type :emoji
-                                                                                                                          :id id}}}))
-                            (toggle-fn))})))))
+       [:div.p-4
+        (icon-component/icon-search
+         {:on-chosen
+          (fn [_e icon]
+            (when icon
+              (property-handler/update-property! repo (:block/uuid block) {:properties {icon-property-id icon}})
+              (toggle-fn)))})]))))
 
 (rum/defcs class-select < (rum/local false ::open?)
   [state *property-schema schema-classes {:keys [multiple-choices? disabled?]
@@ -567,23 +575,27 @@
      (ui/dropdown
       (fn [{:keys [toggle-fn]}]
         [:a.flex {:on-click toggle-fn}
-         (or
-          (when-let [id (:id icon)]
-            (when (= :emoji (:type icon))
-              [:em-emoji {:id id}]))
-          [:span.bullet-container.cursor (when collapsed? {:class "bullet-closed"})
-           [:span.bullet]])])
+         (cond
+           (and (= :emoji (:type icon)) (:id icon))
+           [:em-emoji {:id (:id icon)}]
+
+           (and (= :tabler-icon (:type icon)) (:icon icon))
+           (ui/icon (:icon icon))
+
+           :else
+           [:span.bullet-container.cursor (when collapsed? {:class "bullet-closed"})
+            [:span.bullet]])])
       (fn [{:keys [toggle-fn]}]
-        (ui/emoji-picker
-         {:auto-focus true
-          :on-emoji-select (fn [icon]
-                             (when-let [id (.-id icon)]
-                               (let [icon-property-id (:block/uuid (db/entity [:block/name "icon"]))]
-                                 (property-handler/update-property! repo
-                                                                    (:block/uuid property)
-                                                                    {:properties {icon-property-id {:type :emoji
-                                                                                                    :id id}}})))
-                             (toggle-fn))}))
+        [:div.p-4
+         (icon-component/icon-search
+          {:on-chosen
+           (fn [_e icon]
+             (let [icon-property-id (:block/uuid (db/entity [:block/name "icon"]))]
+               (when icon
+                (property-handler/update-property! repo
+                                                   (:block/uuid property)
+                                                   {:properties {icon-property-id icon}})
+                (toggle-fn))))})])
       {:modal-class (util/hiccup->class
                      "origin-top-right.absolute.left-0.rounded-md.shadow-lg.mt-2")})
      (ui/dropdown