From dee3fdb77479207af33334e717e697f7c38cd1a3 Mon Sep 17 00:00:00 2001
From: charlie <xyhp915@qq.com>
Date: Wed, 3 Jul 2024 17:52:50 +0800
Subject: [PATCH] enhance(ui): refactor classic dropdown menu with the shui
 popup dropdown

---
 src/main/frontend/components/server.cljs | 75 +++++++++++++-----------
 1 file changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/main/frontend/components/server.cljs b/src/main/frontend/components/server.cljs
index dd13dd518..bbe149b75 100644
--- a/src/main/frontend/components/server.cljs
+++ b/src/main/frontend/components/server.cljs
@@ -144,41 +144,50 @@
       [error])
 
     [:div.cp__server-indicator
-     ;; settings menus
-     (ui/dropdown-with-links
-       (fn [{:keys [toggle-fn]}]
-         [:button.button.icon
-          {:on-click #(toggle-fn)}
-          (ui/icon (if running? "api" "api-off") {:size 22})])
+     [:button.button.icon
+      {:on-click (fn [^js e]
+                   (shui/popup-show!
+                     (.-target e)
+                     (fn [{:keys [_close]}]
+                       (let [items [{:hr? true}
 
-       ;; items
-       (->> [{:hr true}
+                                    (cond
+                                      running?
+                                      {:title "Stop server"
+                                       :options {:on-click #(ipc/ipc :server/do :stop)}
+                                       :icon [:span.text-red-500.flex.items-center (ui/icon "player-stop")]}
 
-             (cond
-               running?
-               {:title   "Stop server"
-                :options {:on-click #(ipc/ipc :server/do :stop)}
-                :icon    [:span.text-red-500.flex.items-center (ui/icon "player-stop")]}
+                                      :else
+                                      {:title "Start server"
+                                       :options {:on-click #(ipc/ipc :server/do :restart)}
+                                       :icon [:span.text-green-500.flex.items-center (ui/icon "player-play")]})
 
-               :else
-               {:title   "Start server"
-                :options {:on-click #(ipc/ipc :server/do :restart)}
-                :icon    [:span.text-green-500.flex.items-center (ui/icon "player-play")]})
+                                    {:title "Authorization tokens"
+                                     :options {:on-click #(shui/dialog-open!
+                                                            (fn []
+                                                              (panel-of-tokens shui/dialog-close!)))}
+                                     :icon (ui/icon "key")}
 
-             {:title   "Authorization tokens"
-              :options {:on-click #(shui/dialog-open!
-                                     (fn []
-                                       (panel-of-tokens shui/dialog-close!)))}
-              :icon (ui/icon "key")}
+                                    {:title "Server configurations"
+                                     :options {:on-click #(shui/dialog-open!
+                                                            (fn []
+                                                              (panel-of-configs shui/dialog-close!)))}
+                                     :icon (ui/icon "server-cog")}]]
 
-             {:title "Server configurations"
-              :options {:on-click #(shui/dialog-open!
-                                     (fn []
-                                       (panel-of-configs shui/dialog-close!)))}
-              :icon (ui/icon "server-cog")}])
-       {:links-header
-        [:div.links-header.flex.justify-center.py-2
-         [:span.ml-1.text-sm
-          (if-not running?
-            (string/upper-case (or (:status server-state) "stopped"))
-            [:a.hover:underline {:href href} href])]]})]))
+                         (cons
+                           [:div.links-header.flex.justify-center.py-2
+                            [:span.ml-1.text-sm.opacity-70
+                             (if-not running?
+                               (string/upper-case (or (:status server-state) "stopped"))
+                               [:a.hover:underline {:href href} href])]]
+                           (for [{:keys [hr? title options icon]} items]
+                             (cond
+                               hr?
+                               (shui/dropdown-menu-separator)
+
+                               :else
+                               (shui/dropdown-menu-item options
+                                 [:span.flex.items-center icon [:span.pl-1 title]]))))))
+                     {:as-dropdown? true
+                      :content-props {:onClick #(shui/popup-hide!)}}))}
+      (ui/icon (if running? "api" "api-off") {:size 22})]]))