enhance(ui): refactor the plugin manager menu with the shui popup

src/main/frontend/components/plugins.cljs

@@ -1029,18 +1029,9 @@
 (rum/defc toolbar-plugins-manager-list
   [updates-coming items]
   (let [badge-updates? (and (not (plugin-handler/get-auto-checking?))
-                            (seq (state/all-available-coming-updates updates-coming)))]
-    (ui/dropdown-with-links
-      (fn [{:keys [toggle-fn]}]
-        [:div.toolbar-plugins-manager
-         {:on-click toggle-fn}
-         [:a.button.relative
-          (ui/icon "puzzle" {:size 20})
-          (when badge-updates?
-            (ui/point "bg-red-600.top-1.right-1.absolute" 4 {:style {:margin-right 2 :margin-top 2}}))]])
-
-      ;; items
-      (concat
+                         (seq (state/all-available-coming-updates updates-coming)))
+        items (fn []
+                (->> (concat
                        (for [[_ {:keys [key pinned?] :as opts} pid] items
                              :let [pkey (str (name pid) ":" key)]]
                          {:title key
@@ -1054,8 +1045,8 @@
                                                 (let [^js target (.-target e)
                                                       user-btn? (boolean (.closest target "div[data-injected-ui]"))]
                                                   (when-not user-btn?
-                                     (plugin-handler/op-pinned-toolbar-item! pkey (if pinned? :remove :add))))
-                                 false)}})
+                                                    (plugin-handler/op-pinned-toolbar-item! pkey (if pinned? :remove :add)))
+                                                  true))}})
                        [{:hr true}
                         {:title (t :plugins)
                          :options {:on-click #(plugin-handler/goto-plugins-dashboard!)
@@ -1076,7 +1067,33 @@
                        [{:hr true :key "dropdown-more"}
                         {:title (auto-check-for-updates-control)
                          :options {:no-padding? true}}])
-      {:trigger-class "toolbar-plugins-manager-trigger"})))
+                  (remove nil?)))]
+
+    [:div.toolbar-plugins-manager
+     {:on-click (fn [^js e]
+                  (shui/popup-show! (.-target e)
+                    (fn [{:keys [id]}]
+                      (for [{:keys [hr item title options icon]} (items)]
+                        (let [on-click' (:on-click options)]
+                          (if hr
+                            (shui/dropdown-menu-separator)
+                            (shui/dropdown-menu-item
+                              (assoc options
+                                :on-click (fn [^js e]
+                                            (when on-click'
+                                              (when-not (false? (on-click' e))
+                                                (shui/popup-hide! id)))))
+                              (or item
+                                [:span.flex.items-center.gap-1.w-full
+                                 icon [:div title]]))))))
+                    {:as-dropdown? true
+                     :content-props {:class "toolbar-plugins-manager-content"}}))}
+
+     [:a.button.relative.toolbar-plugins-manager-trigger
+      (ui/icon "puzzle" {:size 20})
+      (when badge-updates?
+        (ui/point "bg-red-600.top-1.right-1.absolute" 4 {:style {:margin-right 2 :margin-top 2}}))]]
+    ))
 
 (rum/defc header-ui-items-list-wrap
   [children]

src/main/frontend/components/plugins.css

@@ -847,37 +847,33 @@
       color: var(--ls-primary-text-color);
     }
   }
+}
 
 .toolbar-plugins-manager {
-    &-trigger {
-      .menu-links-wrapper {
-        max-height: 80vh;
-      }
+  &-content {
+    @apply max-h-[80vh];
 
-      .menu-link {
-        @apply px-[5px] py-1.5;
+    > .ui__dropdown-menu-item {
+      @apply px-[5px] py-1 text-sm relative w-full;
 
       &.extra-item {
-          @apply opacity-80 px-4 py-1.5;
-
-          .title-wrap {
-            margin-left: 8px !important;
-          }
-
-          &:hover {
-            opacity: 1;
-          }
+        @apply opacity-80 px-4 py-1.5 hover:opacity-100;
       }
     }
 
     .item-wrap {
-        padding-right: 28px;
-        font-size: 14px;
-        position: relative;
+      @apply pr-[28px] text-sm relative w-full;
+
+      .ti {
+        @apply text-[18px];
+      }
+
+      div[data-injected-ui] > a.button {
+        @apply h-auto;
+      }
 
       div[data-injected-ui] :is(.ti, .tie) {
-          position: relative;
-          bottom: -1px;
+        @apply relative bottom-[-2px];
       }
     }
 
@@ -893,17 +889,6 @@
         opacity: 90;
       }
     }
-
-      .menu-links-wrapper {
-        a {
-          @apply !text-popover-foreground/80;
-
-          &.button {
-            @apply h-auto hover:bg-transparent scale-95;
-          }
-        }
-      }
-    }
   }
 }