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

src/main/frontend/components/plugins.cljs

@@ -1029,54 +1029,71 @@
 (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
-        (for [[_ {:keys [key pinned?] :as opts} pid] items
-              :let [pkey (str (name pid) ":" key)]]
-          {:title   key
-           :item    [:div.flex.items-center.item-wrap
-                     (ui-item-renderer pid :toolbar (assoc opts :prefix "pl-" :key (str "pl-" key)))
-                     [:span {:style {:padding-left "2px"}} key]
-                     [:span.pin.flex.items-center.opacity-60
-                      {:class (util/classnames [{:pinned pinned?}])}
-                      (ui/icon (if pinned? "pinned" "pin"))]]
-           :options {:on-click (fn [^js e]
-                                 (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)}})
-        [{:hr true}
-         {:title   (t :plugins)
-          :options {:on-click #(plugin-handler/goto-plugins-dashboard!)
-                    :class    "extra-item mt-2"}
-          :icon    (ui/icon "apps")}
-         {:title   (t :settings)
-          :options {:on-click #(plugin-handler/goto-plugins-settings!)
-                    :class    "extra-item"}
-          :icon    (ui/icon "adjustments")}
-
-         (when badge-updates?
-           {:title   [:div.flex.items-center.space-x-5.leading-none
-                      [:span (t :plugin/found-updates)] (ui/point "bg-red-700" 5 {:style {:margin-top 2}})]
-            :options {:on-click #(open-waiting-updates-modal!)
-                      :class    "extra-item"}
-            :icon    (ui/icon "download")})]
-
-        [{:hr true :key "dropdown-more"}
-         {:title (auto-check-for-updates-control)
-          :options {:no-padding? true}}])
-      {:trigger-class "toolbar-plugins-manager-trigger"})))
+                         (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
+                          :item [:div.flex.items-center.item-wrap
+                                 (ui-item-renderer pid :toolbar (assoc opts :prefix "pl-" :key (str "pl-" key)))
+                                 [:span {:style {:padding-left "2px"}} key]
+                                 [:span.pin.flex.items-center.opacity-60
+                                  {:class (util/classnames [{:pinned pinned?}])}
+                                  (ui/icon (if pinned? "pinned" "pin"))]]
+                          :options {:on-click (fn [^js e]
+                                                (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)))
+                                                  true))}})
+                       [{:hr true}
+                        {:title (t :plugins)
+                         :options {:on-click #(plugin-handler/goto-plugins-dashboard!)
+                                   :class "extra-item mt-2"}
+                         :icon (ui/icon "apps")}
+                        {:title (t :settings)
+                         :options {:on-click #(plugin-handler/goto-plugins-settings!)
+                                   :class "extra-item"}
+                         :icon (ui/icon "adjustments")}
+
+                        (when badge-updates?
+                          {:title [:div.flex.items-center.space-x-5.leading-none
+                                   [:span (t :plugin/found-updates)] (ui/point "bg-red-700" 5 {:style {:margin-top 2}})]
+                           :options {:on-click #(open-waiting-updates-modal!)
+                                     :class "extra-item"}
+                           :icon (ui/icon "download")})]
+
+                       [{:hr true :key "dropdown-more"}
+                        {:title (auto-check-for-updates-control)
+                         :options {:no-padding? true}}])
+                  (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]
@@ -1087,9 +1104,9 @@
       (fn []
         (when-let [^js wrap-el (rum/deref *wrap-el)]
           (when-let [^js header-el (.closest wrap-el ".cp__header")]
-            (let [^js header-l        (.querySelector header-el "* > .l")
-                  ^js header-r        (.querySelector header-el "* > .r")
-                  set-max-width!      #(when (number? %) (set! (.-maxWidth (.-style wrap-el)) (str % "px")))
+            (let [^js header-l (.querySelector header-el "* > .l")
+                  ^js header-r (.querySelector header-el "* > .r")
+                  set-max-width! #(when (number? %) (set! (.-maxWidth (.-style wrap-el)) (str % "px")))
                   calc-wrap-max-width #(let [width-l  (.-offsetWidth header-l)
                                              width-t  (-> (js/document.querySelector "#main-content-container") (.-offsetWidth))
                                              children (to-array (.-children header-r))

src/main/frontend/components/plugins.css

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