ui(settings): optimize layout (#2604)

* ui(settings): optimize layout

* ui: fixed width of settings modal

* fix(ui): border color of settings header

src/main/frontend/components/settings.cljs

@@ -37,10 +37,10 @@
            :on-change (fn [e]
                         (reset! email (util/evalue e)))}]]]]
       (ui/button
-       "Submit"
-       :on-click
-       (fn []
-         (user-handler/set-email! @email)))
+        "Submit"
+        :on-click
+        (fn []
+          (user-handler/set-email! @email)))
 
       [:hr]
 
@@ -61,10 +61,10 @@
            :on-change (fn [e]
                         (reset! cors (util/evalue e)))}]]]]
       (ui/button
-       "Submit"
-       :on-click
-       (fn []
-         (user-handler/set-cors! @cors)))
+        "Submit"
+        :on-click
+        (fn []
+          (user-handler/set-cors! @cors)))
 
       [:hr]
 
@@ -83,16 +83,19 @@
      detail-text]]])
 
 (rum/defcs app-updater < rum/reactive
-  [state]
+  [state version]
   (let [update-pending? (state/sub :electron/updater-pending?)
         {:keys [type payload]} (state/sub :electron/updater)]
     [:span.cp__settings-app-updater
 
-     (ui/button
-      (if update-pending? "Checking ..." "Check for updates")
-      :class "text-sm p-1 mr-3"
-      :disabled update-pending?
-      :on-click #(js/window.apis.checkForUpdates false))
+     [:div.ctls.flex.items-center
+      (ui/button
+        (if update-pending? "Checking ..." "Check for updates")
+        :class "text-sm p-1 mr-3"
+        :disabled update-pending?
+        :on-click #(js/window.apis.checkForUpdates false))
+
+      [:span version]]
 
      (when-not (or update-pending?
                    (string/blank? type))
@@ -123,21 +126,21 @@
 (rum/defc delete-account-confirm
   [close-fn]
   (rum/with-context [[t] i18n/*tongue-context*]
-    [:div
-     (ui/admonition
-      :important
-      [:p.text-gray-700 (t :user/delete-account-notice)])
-     [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-      [:span.flex.w-full.rounded-md.sm:ml-3.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type     "button"
-         :on-click user-handler/delete-account!}
-        (t :user/delete-account)]]
-      [:span.mt-3.flex.w-full.rounded-md.sm:mt-0.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type     "button"
-         :on-click close-fn}
-        "Cancel"]]]]))
+                    [:div
+                     (ui/admonition
+                       :important
+                       [:p.text-gray-700 (t :user/delete-account-notice)])
+                     [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
+                      [:span.flex.w-full.rounded-md.sm:ml-3.sm:w-auto
+                       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
+                        {:type     "button"
+                         :on-click user-handler/delete-account!}
+                        (t :user/delete-account)]]
+                      [:span.mt-3.flex.w-full.rounded-md.sm:mt-0.sm:w-auto
+                       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
+                        {:type     "button"
+                         :on-click close-fn}
+                        "Cancel"]]]]))
 
 (rum/defc outdenting-hint
   []
@@ -149,16 +152,16 @@
      [:a.text-sm
       {:target "_blank" :href "https://discuss.logseq.com/t/whats-your-preferred-outdent-behavior-the-direct-one-or-the-logical-one/978"}
       "→ Learn more"]]
-    [:img {:src "https://discuss.logseq.com/uploads/default/original/1X/e8ea82f63a5e01f6d21b5da827927f538f3277b9.gif"
-           :width 500
+    [:img {:src    "https://discuss.logseq.com/uploads/default/original/1X/e8ea82f63a5e01f6d21b5da827927f538f3277b9.gif"
+           :width  500
            :height 500}]]])
 
 (defn edit-config-edn []
   (rum/with-context [[t] i18n/*tongue-context*]
-    [:div.text-sm
-     [:a {:href     (rfe/href :file {:path (config/get-config-path)})
-          :on-click #(js/setTimeout (fn [] (ui-handler/toggle-settings-modal!)))}
-      (t :settings-page/edit-config-edn)]]))
+                    [:div.text-sm
+                     [:a.text-xs {:href     (rfe/href :file {:path (config/get-config-path)})
+                                  :on-click #(js/setTimeout (fn [] (ui-handler/toggle-settings-modal!)))}
+                      (t :settings-page/edit-config-edn)]]))
 
 (defn show-brackets-row [t show-brackets?]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
@@ -173,15 +176,37 @@
    [:div {:style {:text-align "right"}}
     (ui/keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-brackets))]])
 
+(rum/defcs current-graph
+  [state t]
+
+  (when-let [current-repo (state/sub :git/current-repo)]
+    (let [repo-list (state/sub [:me :repos])]
+
+      [:div.it.sm:grid.sm:grid-cols-5.sm:gap-4.sm:items-start.sm:grid-rows-1
+       [:label.block.text-sm.font-medium.leading-5.opacity-70.sm:col-span-1
+        {:for "input_current_graph"}
+        (t :settings-page/current-graph)]
+       [:div.mt-1.sm:mt-0.sm:col-span-4
+        [:div.max-w-lg.rounded-md
+         [:select#input_current_graph.form-select.is-small
+          {:value     current-repo
+           :disabled  true
+           :on-change #()}
+          (for [it repo-list]
+            (when-let [url (and (not= (:url it) "local") (:url it))]
+              [:option {:key url :value url} (util/node-path.basename url)]))]
+
+         [:div.inline-flex.items-center.pl-5 (edit-config-edn)]]]])))
+
 (defn language-row [t preferred-language]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+  [:div.it.sm:grid.sm:grid-cols-5.sm:gap-4.sm:items-start
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "preferred_language"}
     (t :language)]
-   [:div.mt-1.sm:mt-0.sm:col-span-2
+   [:div.mt-1.sm:mt-0.sm:col-span-4
     [:div.max-w-lg.rounded-md
      [:select.form-select.is-small
-      {:value preferred-language
+      {:value     preferred-language
        :on-change (fn [e]
                     (let [lang-code (util/evalue e)]
                       (state/set-preferred-language! lang-code)
@@ -192,11 +217,11 @@
           [:option {:key lang-code :value lang-code} lang-label]))]]]])
 
 (defn theme-modes-row [t switch-theme system-theme? dark?]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4
+  [:div.it.sm:grid.sm:grid-cols-5.sm:gap-4
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "toggle_theme"}
     (t :right-side-bar/switch-theme (string/capitalize switch-theme))]
-   [:div.flex.flex-row.mt-1.sm:mt-0.sm:col-span-1
+   [:div.flex.flex-row.mt-1.sm:mt-0.sm:col-span-4
     [:div.rounded-md.sm:max-w-xs
 
      [:ul.theme-modes-options
@@ -205,10 +230,10 @@
       [:li {:on-click (partial state/use-theme-mode! "dark")
             :class    (classnames [{:active (and (not system-theme?) dark?)}])} [:i.mode-dark] [:strong "dark"]]
       [:li {:on-click (partial state/use-theme-mode! "system")
-            :class    (classnames [{:active system-theme?}])} [:i.mode-system] [:strong "system"]]]]]
+            :class    (classnames [{:active system-theme?}])} [:i.mode-system] [:strong "system"]]]]
 
-   [:div {:style {:text-align "right"}}
-    (ui/keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))]])
+    [:div.pl-16
+     (ui/keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))]]])
 
 (defn file-format-row [t preferred-format]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
@@ -218,7 +243,7 @@
    [:div.mt-1.sm:mt-0.sm:col-span-2
     [:div.max-w-lg.rounded-md
      [:select.form-select.is-small
-      {:value (name preferred-format)
+      {:value     (name preferred-format)
        :on-change (fn [e]
                     (let [format (-> (util/evalue e)
                                      (string/lower-case)
@@ -235,14 +260,14 @@
    [:div.mt-1.sm:mt-0.sm:col-span-2
     [:div.max-w-lg.rounded-md
      [:select.form-select.is-small
-      {:value preferred-date-format
+      {:value     preferred-date-format
        :on-change (fn [e]
                     (let [format (util/evalue e)]
                       (when-not (string/blank? format)
                         (config-handler/set-config! :journal/page-title-format format)
                         (notification/show!
-                         [:div "You need to re-index your graph to make the change works"]
-                         :success)
+                          [:div "You need to re-index your graph to make the change works"]
+                          :success)
                         (state/close-modal!)
                         (route-handler/redirect! {:to :repos}))))}
       (for [format (sort (date/journal-title-formatters))]
@@ -256,7 +281,7 @@
    [:div.mt-1.sm:mt-0.sm:col-span-2
     [:div.max-w-lg.rounded-md
      [:select.form-select.is-small
-      {:value (name preferred-workflow)
+      {:value     (name preferred-workflow)
        :on-change (fn [e]
                     (-> (util/evalue e)
                         string/lower-case
@@ -270,10 +295,10 @@
 (defn outdenting-row [t logical-outdenting?]
   (toggle "preferred_outdenting"
           [(t :settings-page/preferred-outdenting)
-           (ui/tippy {:html (outdenting-hint)
-                      :class "tippy-hover ml-2"
+           (ui/tippy {:html        (outdenting-hint)
+                      :class       "tippy-hover ml-2"
                       :interactive true
-                      :disabled false}
+                      :disabled    false}
                      (svg/info))]
           logical-outdenting?
           config-handler/toggle-logical-outdenting!))
@@ -329,10 +354,10 @@
        [:div.max-w-lg.rounded-md.sm:max-w-xs
         [:input#home-default-page.form-input.is-small.transition.duration-150.ease-in-out
          {:default-value (state/sub-default-home-page)
-          :on-blur update-home-page
-          :on-key-press (fn [e]
-                          (when (= "Enter" (util/ekey e))
-                            (update-home-page e)))}]]]])])
+          :on-blur       update-home-page
+          :on-key-press  (fn [e]
+                           (when (= "Enter" (util/ekey e))
+                             (update-home-page e)))}]]]])])
 
 (defn enable-all-pages-public-row [t enable-all-pages-public?]
   (toggle "all pages public"
@@ -358,21 +383,22 @@
             (let [value (not enable-encryption?)]
               (config-handler/set-config! :feature/enable-encryption? value)))))
 
-(defn keyboard-shortcuts-row [t]
+(rum/defc keyboard-shortcuts-row
+  [t]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "customize_shortcuts"}
     (t :settings-page/customize-shortcuts)]
-   [:div.mt-1.sm:mt-0.sm:col-span-2
-    [:div
-     (ui/button
-      (t :settings-page/shortcut-settings)
-      :class "text-sm p-1"
-      :style {:margin-top "0px"}
-      :on-click
-      (fn []
-        (state/close-settings!)
-        (route-handler/redirect! {:to :shortcut-setting})))]]])
+   (let [h (fn []
+             (state/close-settings!)
+             (route-handler/redirect! {:to :shortcut-setting}))]
+     [:div.mt-1.sm:mt-0.sm:col-span-2
+      [:div
+       (ui/button
+         (t :settings-page/shortcut-settings)
+         :class "text-sm p-1"
+         :style {:margin-top "0px"}
+         :on-click h)]])])
 
 (defn zotero-settings-row [t]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
@@ -382,13 +408,13 @@
    [:div.mt-1.sm:mt-0.sm:col-span-2
     [:div
      (ui/button
-      "Zotero settings"
-      :class "text-sm p-1"
-      :style {:margin-top "0px"}
-      :on-click
-      (fn []
-        (state/close-settings!)
-        (route-handler/redirect! {:to :zotero-setting})))]]])
+       "Zotero settings"
+       :class "text-sm p-1"
+       :style {:margin-top "0px"}
+       :on-click
+       (fn []
+         (state/close-settings!)
+         (route-handler/redirect! {:to :zotero-setting})))]]])
 
 (defn auto-push-row [t current-repo enable-git-auto-push?]
   (when (string/starts-with? current-repo "https://")
@@ -404,28 +430,29 @@
           (t :settings-page/disable-sentry)
           (not instrument-disabled?)
           (fn [] (instrument/disable-instrument
-                  (not instrument-disabled?)))
+                   (not instrument-disabled?)))
           [:span.text-sm.opacity-50 "Logseq will never collect your local graph database or sell your data."]))
 
 (defn clear-cache-row [t]
-  [:div.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center.sm:pt-5
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center.sm:pt-5
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "clear_cache"}
     (t :settings-page/clear-cache)]
    [:div.mt-1.sm:mt-0.sm:col-span-2
     [:div.max-w-lg.rounded-md.sm:max-w-xs
      (ui/button
-      (t :settings-page/clear)
-      :class "text-sm p-1"
-      :on-click handler/clear-cache!)]]])
+       (t :settings-page/clear)
+       :class "text-sm p-1"
+       :on-click handler/clear-cache!)]]])
 
 (defn version-row [t version]
-  [:div.it.app-updater.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+  [:div.it.app-updater.sm:grid.sm:grid-cols-5.sm:gap-4.sm:items-center
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     (t :settings-page/current-version)]
-   [:div.wrap.sm:mt-0.sm:col-span-2
-    (when (util/electron?) (app-updater))
-    [:span.ver version]]])
+   [:div.wrap.sm:mt-0.sm:col-span-4
+    (if (util/electron?)
+      (app-updater version)
+      [:span.ver version])]])
 
 (defn developer-mode-row [t developer-mode?]
   (toggle "developer_mode"
@@ -439,8 +466,11 @@
                      (js/logseq.api.relaunch)))))
           [:div.text-sm.opacity-50 (t :settings-page/developer-mode-desc)]))
 
-(rum/defcs settings < rum/reactive
-  []
+(rum/defcs settings
+  < (rum/local :general ::active)
+    rum/reactive
+  [state]
+
   (let [preferred-format (state/get-preferred-format)
         preferred-date-format (state/get-date-formatter)
         preferred-workflow (state/get-preferred-workflow)
@@ -463,81 +493,108 @@
         theme (state/sub :ui/theme)
         dark? (= "dark" theme)
         system-theme? (state/sub :ui/system-theme?)
-        switch-theme (if dark? "white" "dark")]
-    (rum/with-context [[t] i18n/*tongue-context*]
+        switch-theme (if dark? "white" "dark")
+        *active (::active state)]
+
+    (rum/with-context
+      [[t] i18n/*tongue-context*]
+
       [:div#settings.cp__settings-main
-       [:div.panel-wrap
+       [:header
         [:h1.title (t :settings)]]
 
-       (when current-repo
-         [[:div.panel-wrap
-           (edit-config-edn)]])
-
-       [:hr]
-
-       [:div.panel-wrap
-        (theme-modes-row t switch-theme system-theme? dark?)
-        (language-row t preferred-language)
-        (file-format-row t preferred-format)
-        (date-format-row t preferred-date-format)
-        (workflow-row t preferred-workflow)
-        ;; (enable-block-timestamps-row t enable-block-timestamps?)
-        (show-brackets-row t show-brackets?)
-        (outdenting-row t logical-outdenting?)
-        (tooltip-row t enable-tooltip?)
-        (timetracking-row t enable-timetracking?)
-        (journal-row t enable-journals?)
-        (enable-all-pages-public-row t enable-all-pages-public?)
-        (encryption-row t enable-encryption?)
-        (keyboard-shortcuts-row t)
-        (zotero-settings-row t)
-        (auto-push-row t current-repo enable-git-auto-push?)]
-
-       [:hr] ;; Outside of panel wrap so that it is wider
-
-       [:div.panel-wrap
-        (clear-cache-row t)
-        (version-row t version)
-        (usage-diagnostics-row t instrument-disabled?)
-        (developer-mode-row t developer-mode?)
-
-        (when logged?
-          [:div
-           [:div.mt-6.sm:mt-5.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center.sm:pt-5
-            [:label.block.text-sm.font-medium.leading-5.sm:mt-px..opacity-70
-             {:for "cors"}
-             (t :settings-page/custom-cors-proxy-server)]
-            [:div.mt-1.sm:mt-0.sm:col-span-2
-             [:div.max-w-lg.rounded-md.sm:max-w-xs
-              [:input#pat.form-input.is-small.transition.duration-150.ease-in-out
-               {:default-value cors-proxy
-                :on-blur       (fn [event]
-                                 (when-let [server (util/evalue event)]
-                                   (user-handler/set-cors! server)
-                                   (notification/show! "Custom CORS proxy updated successfully!" :success)))
-                :on-key-press  (fn [event]
-                                 (let [k (gobj/get event "key")]
-                                   (if (= "Enter" k)
+       [:div.cp__settings-inner.md:flex
+
+        [:aside.md:w-40
+         [:ul
+          (for [[label text icon] [[:general (t :settings-page/tab-general) (svg/adjustments 16)]
+                                   [:editor (t :settings-page/tab-editor) (svg/icon-editor 16)]
+                                   [:shortcuts (t :settings-page/tab-shortcuts) (svg/icon-cmd 18)]
+                                   [:advanced (t :settings-page/tab-advanced) (svg/icon-cli 16)]]]
+
+            [:li
+             {:class    (util/classnames [{:active (= label @*active)}])
+              :on-click #(reset! *active label)}
+
+             [:a.flex.items-center
+              [[:i.flex.items-center icon] [:strong text]]]])]]
+
+        [:article
+
+         (case @*active
+
+           :general
+           [:div.panel-wrap.is-general
+            (version-row t version)
+            (current-graph t)
+            (language-row t preferred-language)
+            (theme-modes-row t switch-theme system-theme? dark?)]
+
+           :editor
+           [:div.panel-wrap.is-editor
+            (file-format-row t preferred-format)
+            (date-format-row t preferred-date-format)
+            (workflow-row t preferred-workflow)
+            ;; (enable-block-timestamps-row t enable-block-timestamps?)
+            (show-brackets-row t show-brackets?)
+            (outdenting-row t logical-outdenting?)
+            (tooltip-row t enable-tooltip?)
+            (timetracking-row t enable-timetracking?)
+            (journal-row t enable-journals?)
+            (enable-all-pages-public-row t enable-all-pages-public?)
+            (encryption-row t enable-encryption?)
+            (zotero-settings-row t)
+            (auto-push-row t current-repo enable-git-auto-push?)]
+
+           :shortcuts
+           [:div.panel-wrap
+            (keyboard-shortcuts-row t)]
+
+           :advanced
+           [:div.panel-wrap.is-advanced
+            (clear-cache-row t)
+            (usage-diagnostics-row t instrument-disabled?)
+            (developer-mode-row t developer-mode?)
+
+            (when logged?
+              [:div
+               [:div.mt-6.sm:mt-5.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center.sm:pt-5
+                [:label.block.text-sm.font-medium.leading-5.sm:mt-px..opacity-70
+                 {:for "cors"}
+                 (t :settings-page/custom-cors-proxy-server)]
+                [:div.mt-1.sm:mt-0.sm:col-span-2
+                 [:div.max-w-lg.rounded-md.sm:max-w-xs
+                  [:input#pat.form-input.is-small.transition.duration-150.ease-in-out
+                   {:default-value cors-proxy
+                    :on-blur       (fn [event]
                                      (when-let [server (util/evalue event)]
                                        (user-handler/set-cors! server)
-                                       (notification/show! "Custom CORS proxy updated successfully!" :success)))))}]]]]
-           (ui/admonition
-            :important
-            [:p (t :settings-page/dont-use-other-peoples-proxy-servers)
-             [:a {:href   "https://github.com/isomorphic-git/cors-proxy"
-                  :target "_blank"}
-              "https://github.com/isomorphic-git/cors-proxy"]])])
-
-        (when logged?
-          [:div
-           [:hr]
-           [:div.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center.sm:pt-5
-            [:label.block.text-sm.font-medium.leading-5.opacity-70.text-red-600.dark:text-red-400
-             {:for "delete account"}
-             (t :user/delete-account)]
-            [:div.mt-1.sm:mt-0.sm:col-span-2
-             [:div.max-w-lg.rounded-md.sm:max-w-xs
-              (ui/button (t :user/delete-your-account)
-                         :on-click (fn []
-                                     (ui-handler/toggle-settings-modal!)
-                                     (js/setTimeout #(state/set-modal! delete-account-confirm))))]]]])]])))
+                                       (notification/show! "Custom CORS proxy updated successfully!" :success)))
+                    :on-key-press  (fn [event]
+                                     (let [k (gobj/get event "key")]
+                                       (if (= "Enter" k)
+                                         (when-let [server (util/evalue event)]
+                                           (user-handler/set-cors! server)
+                                           (notification/show! "Custom CORS proxy updated successfully!" :success)))))}]]]]
+               (ui/admonition
+                 :important
+                 [:p (t :settings-page/dont-use-other-peoples-proxy-servers)
+                  [:a {:href   "https://github.com/isomorphic-git/cors-proxy"
+                       :target "_blank"}
+                   "https://github.com/isomorphic-git/cors-proxy"]])])
+
+            (when logged?
+              [:div
+               [:hr]
+               [:div.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center.sm:pt-5
+                [:label.block.text-sm.font-medium.leading-5.opacity-70.text-red-600.dark:text-red-400
+                 {:for "delete account"}
+                 (t :user/delete-account)]
+                [:div.mt-1.sm:mt-0.sm:col-span-2
+                 [:div.max-w-lg.rounded-md.sm:max-w-xs
+                  (ui/button (t :user/delete-your-account)
+                             :on-click (fn []
+                                         (ui-handler/toggle-settings-modal!)
+                                         (js/setTimeout #(state/set-modal! delete-account-confirm))))]]]])]
+
+           nil)]]])))

src/main/frontend/components/settings.css

@@ -1,16 +1,77 @@
 .cp__settings {
-  > h1.title {
-    margin-bottom: 0;
-  }
+
   &-main {
+    > header {
+      padding: 10px;
+      padding-top: 0;
+      border-bottom: 1px solid var(--ls-quaternary-background-color);
 
-    hr {
-      margin: 1rem 0;
-      opacity: .5;
+      h1 {
+        font-size: 22px;
+        margin: 0;
+      }
+    }
+  }
+
+  &-inner {
+    > aside {
+      border-right: 1px solid var(--ls-quaternary-background-color);
+
+      ul {
+        padding: 12px;
+        padding-left: 5px;
+        margin: 0;
+
+        > li {
+          list-style: none;
+          padding: 0;
+          margin: 5px 0;
+          border-radius: 4px;
+
+          > a {
+            padding: 10px;
+            user-select: none;
+            color: var(--ls-primary-text-color);
+
+            > i {
+              width: 20px;
+              height: 20px;
+              overflow: hidden;
+              opacity: .6;
+            }
+
+            > strong {
+              font-size: 14px;
+              font-weight: normal;
+              padding-left: 5px;
+              opacity: .9;
+            }
+          }
+
+          &.active {
+            background-color: var(--ls-quaternary-background-color);
+
+            i {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+
+    > article {
+      flex: 1;
+      padding: 0 12px 12px;
+      max-height: 70vh;
+      overflow: auto;
     }
 
     .panel-wrap {
-      padding: 0 12px;
+      padding: 12px;
+
+      @screen sm {
+        width: 600px;
+      }
 
       > .it {
         margin-bottom: 0;
@@ -37,6 +98,7 @@
           padding-top: 15px;
           align-items: start;
 
+
           > .wrap {
             display: block;
 
@@ -48,13 +110,27 @@
         }
 
         .form-select, .form-input {
-          width: 68%;
+          width: 55%;
+          display: inline-block;
         }
 
         &:first-of-type {
           padding-top: 14px;
         }
       }
+
+      &.is-general {
+        > .it {
+          margin-bottom: 8px;
+        }
+
+      }
+
+      &.is-advanced {
+        > .it {
+          margin-bottom: 8px;
+        }
+      }
     }
 
     .admonitionblock {
@@ -118,7 +194,10 @@
     position: relative;
     margin-bottom: -5px;
 
-    button.check-update {
+    .ctls {
+      position: relative;
+      top: -8px;
+
       &:disabled {
         cursor: progress;
       }
@@ -126,8 +205,9 @@
 
     .update-state {
       padding: 15px;
-      background-color: var(--ls-secondary-background-color);
+      background-color: var(--ls-quaternary-background-color);
       border-radius: 4px;
+      margin-bottom: -8px;
 
       > p {
         margin: 0;
@@ -145,7 +225,7 @@
           margin-right: 2px;
         }
 
-        &:hover { 
+        &:hover {
           text-decoration: underline;
         }
       }

src/main/frontend/components/svg.cljs

@@ -619,7 +619,24 @@
     [:path {:d "M512 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z m0-844.8c-206.506667 0-375.466667 168.96-375.466667 375.466667 0 206.506667 168.96 375.466667 375.466667 375.466667 206.506667 0 375.466667-168.96 375.466667-375.466667 0-206.506667-168.96-375.466667-375.466667-375.466667z" :p-id "2326" :fill "currentColor"}]
     [:path {:d "M512 796.714667a46.08 46.08 0 0 1-46.933333-46.933334v-269.056c0-26.624 20.352-46.933333 46.933333-46.933333 26.581333 0 46.933333 20.309333 46.933333 46.933333v269.056c0 26.624-20.352 46.933333-46.933333 46.933334zM512 364.928a46.08 46.08 0 0 1-46.933333-46.933333V274.218667c0-26.624 20.352-46.933333 46.933333-46.933334 26.581333 0 46.933333 20.309333 46.933333 46.933334v43.776c0 26.624-21.888 46.933333-46.933333 46.933333z" :p-id "2327" :fill "currentColor"}]]))
 
+(defn icon-cmd
+  ([] (icon-cmd 16))
+  ([size]
+   [:svg {:viewBox "0 0 1024 1024" :width size :height size}
+    [:path {:d "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" :fill "currentColor"}]
+    [:path {:d "M370.8 554.4c-54.6 0-98.8 44.2-98.8 98.8s44.2 98.8 98.8 98.8 98.8-44.2 98.8-98.8v-42.4h84.7v42.4c0 54.6 44.2 98.8 98.8 98.8s98.8-44.2 98.8-98.8-44.2-98.8-98.8-98.8h-42.4v-84.7h42.4c54.6 0 98.8-44.2 98.8-98.8 0-54.6-44.2-98.8-98.8-98.8s-98.8 44.2-98.8 98.8v42.4h-84.7v-42.4c0-54.6-44.2-98.8-98.8-98.8S272 316.2 272 370.8s44.2 98.8 98.8 98.8h42.4v84.7h-42.4z m42.4 98.8c0 23.4-19 42.4-42.4 42.4s-42.4-19-42.4-42.4 19-42.4 42.4-42.4h42.4v42.4z m197.6-282.4c0-23.4 19-42.4 42.4-42.4s42.4 19 42.4 42.4-19 42.4-42.4 42.4h-42.4v-42.4z m0 240h42.4c23.4 0 42.4 19 42.4 42.4s-19 42.4-42.4 42.4-42.4-19-42.4-42.4v-42.4zM469.6 469.6h84.7v84.7h-84.7v-84.7z m-98.8-56.4c-23.4 0-42.4-19-42.4-42.4s19-42.4 42.4-42.4 42.4 19 42.4 42.4v42.4h-42.4z" :fill "currentColor"}]]))
+
+(defn icon-editor
+  ([] (icon-editor 16))
+  ([size]
+   [:svg {:viewBox "0 0 1024 1024" :width size :height size}
+    [:path {:d "M934.443 258.719L496.176 696.983h-157.92V539.059L776.523 100.8c6.165-6.165 14.235-9.175 22.315-9.175 8.1 0 16.185 3.01 22.35 9.175l113.255 113.247c6.17 6.17 9.175 14.24 9.175 22.335 0 8.072-3.005 16.17-9.175 22.337z m-135.585-74.977L417.216 565.378v52.65h52.64l381.642-381.647-52.64-52.639z m-289.519 39.485H180.337v631.676h631.681V525.899c0-21.79 17.665-39.475 39.48-39.475 21.805 0 39.48 17.685 39.48 39.475v355.324c0 29.075-23.57 52.645-52.64 52.645H154.017c-29.07 0-52.64-23.57-52.64-52.645V196.902c0-29.07 23.57-52.64 52.64-52.64h355.322c21.805 0 39.48 17.685 39.48 39.48s-17.675 39.485-39.48 39.485z" :fill "currentColor"}]]))
 
+(defn icon-cli
+  ([] (icon-cli 16))
+  ([size]
+   [:svg {:viewBox "0 0 1024 1024" :width size :height size}
+    [:path {:d "M324.608 312.32l-60.416 60.416 140.288 140.288-139.264 139.264 60.416 60.416 199.68-199.68-200.704-200.704z m193.536 345.088h235.52v97.28h-235.52v-97.28zM28.672 76.8v870.4h967.68v-870.4H28.672z m870.4 774.144H124.928V173.056h774.144v677.888z" :fill "currentColor"}]]))
 
 (defn view-list
   ([] (view-list 16))

src/main/frontend/dicts.cljs

@@ -231,6 +231,11 @@
         :settings-page/disable-developer-mode "Disable developer mode"
         :settings-page/developer-mode-desc "Developer mode helps contributors and extension developers test their integrations with Logseq more efficiently."
         :settings-page/current-version "Current version"
+        :settings-page/current-graph "Current graph"
+        :settings-page/tab-general "General"
+        :settings-page/tab-editor "Editor"
+        :settings-page/tab-shortcuts "Shortcuts"
+        :settings-page/tab-advanced "Advanced"
         :logseq "Logseq"
         :on "ON"
         :more-options "More options"
@@ -903,6 +908,11 @@
            :settings-page/disable-developer-mode "禁用开发者模式"
            :settings-page/developer-mode-desc "开发者模式帮助贡献者和扩展开发者更有效地测试他们与 Logseq 的集成。"
            :settings-page/current-version "当前版本"
+           :settings-page/current-graph "当前仓库"
+           :settings-page/tab-general "常规"
+           :settings-page/tab-editor "编辑器"
+           :settings-page/tab-shortcuts "快捷键"
+           :settings-page/tab-advanced "高级设置"
            :logseq "Logseq"
            :on "已打开"
            :more-options "更多选项"
@@ -1158,6 +1168,10 @@
              :settings-page/enable-developer-mode "啟用開發者模式"
              :settings-page/disable-developer-mode "禁用開發者模式"
              :settings-page/developer-mode-desc "開發者模式幫助貢獻者和擴展開發者更有效地測試他們與 Logseq 的集成。"
+             :settings-page/tab-general "常規"
+             :settings-page/tab-editor "編輯器"
+             :settings-page/tab-shortcuts "快捷鍵"
+             :settings-page/tab-advanced "高級設置"
              :logseq "Logseq"
              :on "已打開"
              :more-options "更多選項"

src/main/frontend/ui.css

@@ -86,7 +86,7 @@
     .panel-content {
       overflow-y: auto;
       max-height: 85vh;
-      max-width: 768px;
+      max-width: 96vw;
       padding: 2rem;
     }
   }