enhance(ux): support delete button for the icon picker

src/main/frontend/components/block.cljs

@@ -3099,22 +3099,29 @@
       (when (and @*show-left-menu? (not in-whiteboard?) (not table?))
         (block-left-menu config block))
 
-      (when-let [icon (and (ldb/page? block)
-                           (or (get block (pu/get-pid :logseq.property/icon))
-                               (or (when (ldb/class? block)
-                                     {:type :tabler-icon
-                                      :id "hash"})
-                                   (when (ldb/property? block)
-                                     {:type :tabler-icon
-                                      :id "letter-p"}))))]
-        [:div.flex.items-center.page-icon
-         (icon-component/icon-picker icon
-                                    {:on-chosen (fn [_e icon]
-                                                  (db-property-handler/set-block-property!
-                                                   (:db/id block)
-                                                   (pu/get-pid :logseq.property/icon)
-                                                   (select-keys icon [:id :type :color])))
-                                     :icon-props {:size (if (:page-title? config) 38 18)}})])
+      (let [icon' (get block (pu/get-pid :logseq.property/icon))]
+        (when-let [icon (and (ldb/page? block)
+                          (or icon'
+                            (or (when (ldb/class? block)
+                                  {:type :tabler-icon
+                                   :id "hash"})
+                              (when (ldb/property? block)
+                                {:type :tabler-icon
+                                 :id "letter-p"}))))]
+          [:div.flex.items-center.page-icon
+           (icon-component/icon-picker icon
+             {:on-chosen (fn [_e icon]
+                           (if icon
+                             (db-property-handler/set-block-property!
+                               (:db/id block)
+                               (pu/get-pid :logseq.property/icon)
+                               (select-keys icon [:id :type :color]))
+                             ;; del
+                             (db-property-handler/remove-block-property!
+                               (:db/id block)
+                               (pu/get-pid :logseq.property/icon))))
+              :del-btn? (boolean icon')
+              :icon-props {:size (if (:page-title? config) 38 18)}})]))
 
       (if whiteboard-block?
         (block-reference {} (str uuid) nil)

src/main/frontend/components/icon.cljs

@@ -305,7 +305,7 @@
   (rum/local nil ::hover)
   {:init (fn [s]
            (assoc s ::color (atom (storage/get :ls-icon-color-preset))))}
-  [state {:keys [on-chosen] :as opts}]
+  [state {:keys [on-chosen del-btn?] :as opts}]
   (let [*q (::q state)
         *result (::result state)
         *tab (::tab state)
@@ -402,8 +402,15 @@
                  :class (util/classnames [{:active active?} "tab-item"])
                  :on-click #(reset! *tab id)}
                 label)))]
+
          (when (not= :emoji @*tab)
-           (color-picker *color))]
+           (color-picker *color))
+
+         ;; action buttons
+         (when del-btn?
+           (shui/button {:variant :outline :size :sm :data-action "del"
+                         :on-click #(on-chosen nil)}
+             (shui/tabler-icon "trash" {:size 17})))]
 
         ;; preview
         [:div.hover-preview
@@ -417,7 +424,7 @@
             (:native (first (:skins @*hover))))]])]]))
 
 (rum/defc icon-picker
-  [icon-value {:keys [empty-label disabled? initial-open? on-chosen icon-props popup-opts]}]
+  [icon-value {:keys [empty-label disabled? initial-open? del-btn? on-chosen icon-props popup-opts]}]
   (let [*trigger-ref (rum/use-ref nil)
         content-fn
         (if config/publishing?
@@ -426,7 +433,8 @@
             (icon-search
              {:on-chosen (fn [e icon-value]
                            (on-chosen e icon-value)
-                           (shui/popup-hide! id))})))]
+                           (shui/popup-hide! id))
+              :del-btn? del-btn?})))]
     (rum/use-effect!
      (fn []
        (when initial-open?

src/main/frontend/components/icon.css

@@ -105,6 +105,13 @@
       }
     }
   }
+
+  .ui__button {
+    &[data-action=del] {
+      @apply !w-6 !h-6 overflow-hidden rounded-md ml-1 opacity-60
+      hover:text-red-rx-09 hover:opacity-90;
+    }
+  }
 }
 
 .color-picker-presets {

src/main/frontend/components/property.cljs

@@ -10,6 +10,7 @@
             [frontend.components.property.value :as pv]
             [frontend.components.select :as select]
             [frontend.components.svg :as svg]
+            [frontend.handler.property.util :as pu]
             [frontend.config :as config]
             [frontend.db :as db]
             [frontend.db-mixins :as db-mixins]
@@ -241,16 +242,19 @@
                           (icon-component/icon-search
                            {:on-chosen
                             (fn [_e icon]
-                              (when icon
-                                (p/let [_ (db-property-handler/upsert-property! (:db/ident property)
-                                                                                (:block/schema property)
-                                                                                {:properties {:logseq.property/icon icon}})]
-                                  (shui/popup-hide! id))))}))]
+                              (if icon
+                                (db-property-handler/upsert-property! (:db/ident property)
+                                  (:block/schema property)
+                                  {:properties {:logseq.property/icon icon}})
+                                (db-property-handler/remove-block-property! (:db/id property)
+                                  (pu/get-pid :logseq.property/icon)))
+                              (shui/popup-hide! id))
+                            :del-btn? (boolean icon)}))]
 
          (shui/trigger-as
-          :button
-          (-> (when-not config/publishing?
-                {:on-click (fn [^js e]
+           :button
+           (-> (when-not config/publishing?
+                 {:on-click (fn [^js e]
                              (shui/popup-show! (.-target e) content-fn
                                                {:as-dropdown? true :auto-focus? true
                                                 :content-props {:onEscapeKeyDown #(.preventDefault %)}}))})

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

@@ -171,6 +171,7 @@
       (icon-component/icon-picker (:icon form-data)
         {:on-chosen (fn [_e icon] (set-form-data! (assoc form-data :icon icon)))
          :popup-opts {:align "start"}
+         :del-btn? (boolean (:icon form-data))
          :empty-label "?"})
       (shui/input {:ref *input-ref :size "sm" :default-value title :placeholder "name"
                    :disabled disabled? :on-change (fn [^js e] (set-form-data! (assoc form-data :title (util/trim-safe (util/evalue e)))))})]
@@ -223,6 +224,7 @@
         (:icon form-data)
         {:on-chosen (fn [_e icon] (set-form-data! (assoc form-data :icon icon)))
          :empty-label "?"
+         :del-btn? (boolean (:icon form-data))
          :popup-opts {:align "start"}})
 
       (shui/input {:ref *input-ref :size "sm"
@@ -312,6 +314,7 @@
      (shui/button {:size "sm" :variant :outline}
        (icon-component/icon-picker icon {:on-chosen (fn [_e icon] (update-icon! icon))
                                          :popup-opts {:align "start"}
+                                         :del-btn? (boolean icon)
                                          :empty-label "?"}))
      [:strong {:on-click (fn [^js e]
                            (shui/popup-show! (.-target e)