enhance(ui): move http apis server indicator to right side from toolbar

logseq · Mar 6, 2023 · 821e029 · 821e029
1 parent 1df54a6
commit 821e029
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 68 deletions.
diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs
@@ -220,10 +220,7 @@
                                         (mobile-util/native-iphone?))
                                 (state/set-left-sidebar-open! false))
                               (state/pub-event! [:go/search]))}
-              (ui/icon "search" {:size ui/icon-size})])))
-
-       (when (state/feature-http-server-enabled?)
-        (server/server-indicator (state/sub :electron/server)))]]
+              (ui/icon "search" {:size ui/icon-size})])))]]
 
      [:div.r.flex.drag-region
       (when (and current-repo
@@ -241,6 +238,9 @@
       (when config/lsp-enabled?
         (plugins/hook-ui-items :toolbar))
 
+      (when (state/feature-http-server-enabled?)
+        (server/server-indicator (state/sub :electron/server)))
+
       (when (util/electron?)
         (back-and-forward))
 

diff --git a/src/main/frontend/components/server.cljs b/src/main/frontend/components/server.cljs
@@ -1,14 +1,14 @@
 (ns frontend.components.server
   (:require
-   [clojure.string :as string]
-   [rum.core :as rum]
-   [electron.ipc :as ipc]
-   [medley.core :as medley]
-   [promesa.core :as p]
-   [frontend.state :as state]
-   [frontend.util :as util]
-   [frontend.handler.notification :as notification]
-   [frontend.ui :as ui]))
+    [clojure.string :as string]
+    [rum.core :as rum]
+    [electron.ipc :as ipc]
+    [medley.core :as medley]
+    [promesa.core :as p]
+    [frontend.state :as state]
+    [frontend.util :as util]
+    [frontend.handler.notification :as notification]
+    [frontend.ui :as ui]))
 
 (rum/defcs panel-of-tokens
   < rum/reactive
@@ -125,61 +125,62 @@
   [server-state]
 
   (rum/use-effect!
-   (fn []
-     (ipc/ipc :server/load-state)
-     (let [t (js/setTimeout #(when (state/sub [:electron/server :autostart])
-                               (ipc/ipc :server/do :restart)) 1000)]
-       #(js/clearTimeout t)))
-   [])
+    (fn []
+      (ipc/ipc :server/load-state)
+      (let [t (js/setTimeout #(when (state/sub [:electron/server :autostart])
+                                (ipc/ipc :server/do :restart)) 1000)]
+        #(js/clearTimeout t)))
+    [])
 
   (let [{:keys [status error]} server-state
         status   (keyword (util/safe-lower-case status))
-        running? (= :running status)]
+        running? (= :running status)
+        href     (and running? (str "http://" (:host server-state) ":" (:port server-state)))]
 
     (rum/use-effect!
-     #(when error
-        (notification/show! (str "[Server] " error) :error))
-     [error])
+      #(when error
+         (notification/show! (str "[Server] " error) :error))
+      [error])
 
     [:div.cp__server-indicator
-     (ui/icon "api" {:size 24})
-     [:code.text-sm.ml-1
-      (if-not running?
-        (string/upper-case (or (:status server-state) "stopped"))
-        (let [href (str "http://" (:host server-state) ":" (:port server-state))]
-          [:a.hover:underline {:href href} href]))]
-
      ;; settings menus
      (ui/dropdown-with-links
-      (fn [{:keys [toggle-fn]}]
-        [:span.opacity-50.hover:opacity-80.active:opacity-100
-         [:button.button.icon.ml-1
+       (fn [{:keys [toggle-fn]}]
+         [:button.button.icon
           {:on-click #(toggle-fn)}
-          (ui/icon "dots-vertical" {:size 16})]])
-      ;; items
-      (->> [(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")]})
-
-            {:title   "Authorization tokens"
-             :options {:on-click #(state/set-modal!
-                                   (fn [close]
-                                     (panel-of-tokens close))
-                                   {:center? true})}
-             :icon    (ui/icon "key")}
-
-            {:title   "Server configurations"
-             :options {:on-click #(state/set-modal!
-                                   (fn [close]
-                                     (panel-of-configs close))
-                                   {:center? true})}
-             :icon    (ui/icon "server-cog")}])
-      {})]))
+          (ui/icon (if running? "api" "api-off") {:size 22})])
+
+       ;; 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")]}
+
+               :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 #(state/set-modal!
+                                     (fn [close]
+                                       (panel-of-tokens close))
+                                     {:center? true})}
+              :icon    (ui/icon "key")}
+
+             {:title   "Server configurations"
+              :options {:on-click #(state/set-modal!
+                                     (fn [close]
+                                       (panel-of-configs close))
+                                     {:center? true})}
+              :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])]]})]))
 
diff --git a/src/main/frontend/components/server.css b/src/main/frontend/components/server.css
@@ -1,15 +1,8 @@
 .cp__server-indicator {
-  @apply flex items-center px-1 rounded-md
-  dark:border-gray-500;
+  @apply flex items-center rounded-md;
 
   .button.icon {
     width: auto;
     height: auto;
   }
-}
-
-.ls-left-sidebar-open {
-  .cp__server-indicator {
-    @apply ml-[115px];
-  }
 }