improve(electron): polish toolbar ui

src/electron/electron/core.cljs

@@ -21,7 +21,7 @@
   []
   (let [win-opts {:width         980
                   :height        700
-                  :frame         false
+                  :frame         win32?
                   :titleBarStyle (if mac? "hidden" nil)
                   :webPreferences
                   {:nodeIntegration         false

src/main/frontend/components/header.cljs

@@ -151,6 +151,7 @@
                    (remove #(= (:url %) config/local-repo)))]
     (rum/with-context [[t] i18n/*tongue-context*]
       [:div.cp__header#head
+       {:on-double-click #(when (util/electron?) (js/window.apis.toggleMaxOrMinActiveWindow))}
        (left-menu-button {:on-click (fn []
                                       (open-fn)
                                       (state/set-left-sidebar-open! true))})

src/main/frontend/components/header.css

@@ -10,6 +10,8 @@
   width: 100%;
   top: 0;
   left: 0;
+
+  user-select: none;
 }
 
 .cp__header-left-menu {

src/main/frontend/components/sidebar.css

@@ -80,7 +80,7 @@
 }
 
 .cp__sidebar-main-content {
-  padding: 6rem 1.5rem;
+  padding: 5rem 1.5rem;
   max-width: var(--ls-main-content-max-width);
   min-height: 100vh;
   flex: 1;

src/main/frontend/components/theme.css

@@ -95,13 +95,12 @@ html[data-theme=light] {
 html.is-electron {
   --frame-top-height: 24px;
 
-  .theme-inner {
+  .theme-inner {}
-    padding-top: var(--frame-top-height);
-  }
 
   .cp__header {
     height: 2rem;
-    top: var(--frame-top-height);
+    padding-top: var(--frame-top-height);
+    top: 0;
   }
 
   .cp__right-sidebar {
@@ -109,11 +108,30 @@ html.is-electron {
   }
 
   &.is-mac {
-    .ls-window-frame-title-bar {
+    .cp__header {
-      padding-left: 70px;
+      padding-top: calc(var(--frame-top-height) + 12px);
+
+      &-logo {
+        height: var(--frame-top-height);
+      }
+
+      &:before {
+        content: " ";
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 8;
+        -webkit-app-region: drag;
+        width: 100%;
+        height: var(--frame-top-height);
+      }
     }
   }
 
+  #search {
+    -webkit-app-region: drag;
+  }
+
   .ls-window-frame-title-bar {
     background-color: var(--ls-primary-background-color);
     position: fixed;