enhance: tiny improvements to Settings (#3279)

This PR looks more substantial than it really is. The key changes in UX are:

Add buttons for Edit custom.css and Customize config.edn to the Settings modal.
Consolidate the Customize Shortcuts settings tab with the General tab.
(Reasoning: Since the former only had one item, it didn't warrant a whole separate tab.)

Beyond that, all of the other changes are small refactors (e.g. extracting repetitive code into reusable functions, fixing inconsistent whitespace) or tiny tweaks to copy (i.e. making text more concise / easier to read on the page).

src/main/frontend/components/settings.cljs

@@ -39,10 +39,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]
 
@@ -63,10 +63,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]
 
@@ -78,12 +78,13 @@
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for label-for}
     name]
-   [:div.mt-1.sm:mt-0.sm:col-span-2
-    [:div.rounded-md
-     {:style {:display "flex" :gap "1rem" :align-items "center"}}
+   [:div.rounded-md.sm:max-w-tss.sm:col-span-2
+    [:div.rounded-md {:style {:display "flex" :gap "1rem" :align-items "center"}}
      (ui/toggle state on-toggle true)
      detail-text]]])
 
+
+
 (rum/defcs app-updater < rum/reactive
   [state version]
   (let [update-pending? (state/sub :electron/updater-pending?)
@@ -91,20 +92,23 @@
     [:span.cp__settings-app-updater
 
      [: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]]
+      [:div.mt-1.sm:mt-0.sm:col-span-2
+       {:style {:display "flex" :gap "0.5rem" :align-items "center"}}
+       [:div (ui/button
+              (if update-pending? "Checking ..." "Check for updates")
+              :class "text-sm p-1 mr-1"
+              :disabled update-pending?
+              :on-click #(js/window.apis.checkForUpdates false))]
+
+       [:div.text-sm.opacity-50 (str "Version " version)]]]
 
      (when-not (or update-pending?
                    (string/blank? type))
-       [:div.update-state
+       [:div.update-state.text-sm
         (case type
           "update-not-available"
-          [:p "😀 Your app is up-to-date!"]
+          [:p "Your app is up-to-date 🎉"]
 
           "update-available"
           (let [{:keys [name url]} payload]
@@ -158,25 +162,51 @@
            :width  500
            :height 500}]]])
 
+(defn row-with-button-action
+  [{:keys [left-label action button-label href on-click desc -for]}]
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+
+     ;; left column
+   [:label.block.text-sm.font-medium.leading-5.opacity-70
+    {:for -for}
+    left-label]
+
+     ;; right column
+   [:div.mt-1.sm:mt-0.sm:col-span-2
+    {:style {:display "flex" :gap "0.5rem" :align-items "center"}}
+    [:div (if action action (ui/button
+                             button-label
+                             :class    "text-sm p-1"
+                             :href     href
+                             :on-click on-click))]
+    [:div.text-sm desc]]])
+
+
 (defn edit-config-edn []
   (rum/with-context [[t] i18n/*tongue-context*]
-    [:div
-     [: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)]]))
+    (row-with-button-action
+     {:left-label   "Custom configuration"
+      :button-label (t :settings-page/edit-config-edn)
+      :href         (rfe/href :file {:path (config/get-config-path)})
+      :on-click     #(js/setTimeout (fn [] (ui-handler/toggle-settings-modal!)))
+      :-for         "config_edn"})))
+
+(defn edit-custom-css []
+  (rum/with-context [[t] i18n/*tongue-context*]
+    (row-with-button-action
+     {:left-label   "Custom theme"
+      :button-label (t :settings-page/edit-custom-css)
+      :href         (rfe/href :file {:path (config/get-custom-css-path)})
+      :on-click     #(js/setTimeout (fn [] (ui-handler/toggle-settings-modal!)))
+      :-for         "customize_css"})))
 
 (defn show-brackets-row [t show-brackets?]
-  [: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 "show_brackets"}
-    (t :settings-page/show-brackets)]
-   [:div
-    [:div.rounded-md.sm:max-w-xs
-     (ui/toggle show-brackets?
-                config-handler/toggle-ui-show-brackets!
-                true)]]
-   [:div {:style {:text-align "right"}}
-    (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-brackets))]])
+  (toggle "show_brackets"
+          (t :settings-page/show-brackets)
+          show-brackets?
+          config-handler/toggle-ui-show-brackets!
+          [:span {:text-align "right"}
+           (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-brackets))]))
 
 (rum/defcs switch-spell-check-row < rum/reactive
   [state t]
@@ -229,64 +259,42 @@
                               (state/set-state! [:electron/user-cfgs :git/auto-commit-seconds] value)
                               (ipc/ipc "userAppCfgs" :git/auto-commit-seconds value))))}]]]]))
 
-(rum/defc app-auto-update-row < rum/reactive
-  [t]
+(rum/defc app-auto-update-row < rum/reactive [t]
   (let [enabled? (state/sub [:electron/user-cfgs :auto-update])
         enabled? (if (nil? enabled?) true enabled?)]
-
-    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
-     [:label.block.text-sm.font-medium.leading-5.opacity-70
-      (t :settings-page/auto-updater)]
-     [:div
-      [:div.rounded-md.sm:max-w-xs
-       (ui/toggle
-        enabled?
-        (fn []
-          (state/set-state! [:electron/user-cfgs :auto-update] (not enabled?))
-          (ipc/ipc "userAppCfgs" :auto-update (not enabled?)))
-        true)]]]))
-
-(rum/defcs graph-config
-  [state t]
-  (when-let [current-repo (state/sub :git/current-repo)]
-    (edit-config-edn)))
+    (toggle "usage-diagnostics"
+            (t :settings-page/auto-updater)
+            enabled?
+            #((state/set-state! [:electron/user-cfgs :auto-update] (not enabled?))
+              (ipc/ipc "userAppCfgs" :auto-update (not enabled?))))))
 
 (defn language-row [t preferred-language]
-  [: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-4
-    [:div.max-w-lg.rounded-md
-     [:select.form-select.is-small
-      {:value     preferred-language
-       :on-change (fn [e]
+  (let [on-change (fn [e]
                     (let [lang-code (util/evalue e)]
                       (state/set-preferred-language! lang-code)
-                      (ui-handler/re-render-root!)))}
-      (for [language dicts/languages]
-        (let [lang-code (name (:value language))
-              lang-label (:label language)]
-          [:option {:key lang-code :value lang-code} lang-label]))]]]])
+                      (ui-handler/re-render-root!)))
+        action [:select.form-select.is-small {:value     preferred-language
+                                              :on-change on-change}
+                (for [language dicts/languages]
+                  (let [lang-code (name (:value language))
+                        lang-label (:label language)]
+                    [:option {:key lang-code :value lang-code} lang-label]))]]
+    (row-with-button-action {:left-label (t :language)
+                             :-for       "preferred_language"
+                             :action     action})))
 
 (defn theme-modes-row [t switch-theme system-theme? dark?]
-  [: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-4
-    [:div.rounded-md.sm:max-w-xs
-
-     [:ul.theme-modes-options
-      [:li {:on-click (partial state/use-theme-mode! "light")
-            :class    (classnames [{:active (and (not system-theme?) (not dark?))}])} [:i.mode-light] [:strong "light"]]
-      [: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"]]]]
-
-    [:div.pl-16
-     (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))]]])
+  (let [pick-theme [:ul.theme-modes-options
+                    [:li {:on-click (partial state/use-theme-mode! "light")
+                          :class    (classnames [{:active (and (not system-theme?) (not dark?))}])} [:i.mode-light] [:strong "light"]]
+                    [: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"]]]]
+    (row-with-button-action {:left-label (t :right-side-bar/switch-theme (string/capitalize switch-theme))
+                             :-for       "toggle_theme"
+                             :action     pick-theme
+                             :desc       (ui/render-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
@@ -374,8 +382,7 @@
   (toggle "enable_timetracking"
           (t :settings-page/enable-timetracking)
           enable-timetracking?
-          (fn []
-            (let [value (not enable-timetracking?)]
+          #((let [value (not enable-timetracking?)]
               (config-handler/set-config! :feature/enable-timetracking? value)))))
 
 (defn update-home-page
@@ -437,28 +444,19 @@
 
 (defn encryption-row [t enable-encryption?]
   (toggle "enable_encryption"
-          (str (t :settings-page/enable-encryption) "\n(experimental!)")
+          (t :settings-page/enable-encryption)
           enable-encryption?
-          (fn []
-            (let [value (not enable-encryption?)]
-              (config-handler/set-config! :feature/enable-encryption? value)))))
-
-(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)]
-   (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)]])])
+          #((let [value (not enable-encryption?)]
+              (config-handler/set-config! :feature/enable-encryption? value)))
+          [:div.text-sm.opacity-50 "⚠️ This feature is experimental"]))
+
+(rum/defc keyboard-shortcuts-row [t]
+  (row-with-button-action
+   {:left-label   (t :settings-page/customize-shortcuts)
+    :button-label (t :settings-page/shortcut-settings)
+    :on-click      #((state/close-settings!)
+                     (route-handler/redirect! {:to :shortcut-setting}))
+    :-for         "customize_shortcuts"}))
 
 (defn zotero-settings-row [t]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
@@ -468,13 +466,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://")
@@ -490,29 +488,19 @@
           (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.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
-   [: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!)]]])
+  (row-with-button-action {:left-label   (t :settings-page/clear-cache)
+                           :button-label (t :settings-page/clear)
+                           :on-click     handler/clear-cache!
+                           :-for         "clear_cache"}))
 
 (defn version-row [t version]
-  [: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-4
-    (if (util/electron?)
-      (app-updater version)
-      [:span.ver version])]])
+  (row-with-button-action {:left-label (t :settings-page/current-version)
+                           :action     (app-updater version)
+                           :-for       "current-version"}))
 
 (defn developer-mode-row [t developer-mode?]
   (toggle "developer_mode"
@@ -575,11 +563,11 @@
 
         [:aside.md:w-64
          [:ul
-          (for [[label text icon] [[:general (t :settings-page/tab-general) (ui/icon "adjustments" {:style {:font-size 20}})]
-                                   [:editor (t :settings-page/tab-editor) (ui/icon "writing" {:style {:font-size 20}})]
-                                   [:shortcuts (t :settings-page/tab-shortcuts) (ui/icon "command" {:style {:font-size 20}})]
-                                   [:git (t :settings-page/tab-version-control) (ui/icon "history" {:style {:font-size 20}})]
-                                   [:advanced (t :settings-page/tab-advanced) (ui/icon "bulb" {:style {:font-size 20}})]]]
+          (for [[label text icon]
+                [[:general (t :settings-page/tab-general) (ui/icon "adjustments" {:style {:font-size 20}})]
+                 [:editor (t :settings-page/tab-editor) (ui/icon "writing" {:style {:font-size 20}})]
+                 [:git (t :settings-page/tab-version-control) (ui/icon "history" {:style {:font-size 20}})]
+                 [:advanced (t :settings-page/tab-advanced) (ui/icon "bulb" {:style {:font-size 20}})]]]
 
             [:li
              {:class    (util/classnames [{:active (= label @*active)}])
@@ -597,7 +585,11 @@
            [:div.panel-wrap.is-general
             (version-row t version)
             (language-row t preferred-language)
-            (theme-modes-row t switch-theme system-theme? dark?)]
+            (theme-modes-row t switch-theme system-theme? dark?)
+            (when-let [current-repo (state/sub :git/current-repo)]
+              [(edit-config-edn)
+               (edit-custom-css)])
+            (keyboard-shortcuts-row t)]
 
            :editor
            [:div.panel-wrap.is-editor
@@ -612,27 +604,29 @@
             (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?)
+            (enable-all-pages-public-row t enable-all-pages-public?)
             (zotero-settings-row t)
             (auto-push-row t current-repo enable-git-auto-push?)]
 
-           :shortcuts
-           [:div.panel-wrap
-            (keyboard-shortcuts-row t)]
-
            :git
            [:div.panel-wrap
             [:div.text-sm.my-4
-             [:a {:href "https://git-scm.com/"
-                  :target "_blank"} "Git"]
-             " is used for pages version control, you can click the vertical three dots menu to check the page's history."]
+             [:span.text-sm.opacity-50.my-4
+              "You can view a page's edit history by clicking the three vertical dots "
+              "in the top-right corner and selecting \"Check page's history\". "
+              "Logseq uses "]
+             [:a {:href "https://git-scm.com/" :target "_blank"}
+              "Git"]
+             [:span.text-sm.opacity-50.my-4
+              " for version control."]]
+            [:br]
             (switch-git-auto-commit-row t)
             (git-auto-commit-seconds t)
 
             (ui/admonition
              :warning
-             [:p "You need to restart the app after updating the settings."])]
+             [:p "You need to restart the app after updating the Git settings."])]
 
            :advanced
            [:div.panel-wrap.is-advanced
@@ -668,8 +662,6 @@
                       :target "_blank"}
                   "https://github.com/isomorphic-git/cors-proxy"]])])
 
-            (graph-config t)
-
             (when logged?
               [:div
                [:hr]
@@ -680,8 +672,8 @@
                 [: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))))]]]])]
+                             :on-click (fn []
+                                         (ui-handler/toggle-settings-modal!)
+                                         (js/setTimeout #(state/set-modal! delete-account-confirm))))]]]])]
 
            nil)]]])))

src/main/frontend/components/settings.css

@@ -111,7 +111,8 @@
         }
 
         .form-select, .form-input {
-          width: 55%;
+          width: 100%;
+          max-width: 200px;
           display: inline-block;
 
           &:hover {
@@ -207,7 +208,6 @@
 
     .ctls {
       position: relative;
-      top: -8px;
 
       &:disabled {
         cursor: progress;
@@ -215,10 +215,11 @@
     }
 
     .update-state {
-      padding: 15px;
+      padding: 6px 10px;
       background-color: var(--ls-quaternary-background-color);
       border-radius: 4px;
-      margin-bottom: -8px;
+      margin-top: 10px;
+      width: fit-content;
 
       > p {
         margin: 0;
@@ -244,6 +245,10 @@
   }
 }
 
+/* Styles for the category icon on the left of settings-modal */
+.cp__settings-inner > aside ul > li > a > i {
+  margin-right: 4px;
+}
 
 svg.git {
     margin-left: -4px;

src/main/frontend/dicts.cljs

@@ -214,31 +214,32 @@
         :content/open-in-sidebar "Open in sidebar"
         :content/copy-as-json "Copy as JSON"
         :content/click-to-edit "Click to edit"
-        :settings-page/edit-config-edn "Edit config.edn for current graph"
+        :settings-page/edit-config-edn "Edit config.edn"
+        :settings-page/edit-custom-css "Edit custom.css"
         :settings-page/show-brackets "Show brackets"
         :settings-page/spell-checker "Spell checker"
         :settings-page/auto-updater "Auto updater"
         :settings-page/disable-sentry "Send usage data and diagnostics to Logseq"
-        :settings-page/preferred-outdenting "Enable logical outdenting"
+        :settings-page/preferred-outdenting "Logical outdenting"
         :settings-page/custom-date-format "Preferred date format"
         :settings-page/preferred-file-format "Preferred file format"
         :settings-page/preferred-workflow "Preferred workflow"
-        :settings-page/enable-timetracking "Enable timetracking"
-        :settings-page/enable-tooltip "Enable tooltips"
         :settings-page/enable-shortcut-tooltip "Enable shortcut tooltip"
-        :settings-page/enable-journals "Enable journals"
-        :settings-page/enable-all-pages-public "Enable all pages public when publishing"
-        :settings-page/enable-encryption "Enable encryption feature"
+        :settings-page/enable-timetracking "Timetracking"
+        :settings-page/enable-tooltip "Tooltips"
+        :settings-page/enable-journals "Journals"
+        :settings-page/enable-all-pages-public "All pages public when publishing"
+        :settings-page/enable-encryption "Encryption"
         :settings-page/customize-shortcuts "Keyboard shortcuts"
         :settings-page/shortcut-settings "Customize shortcuts"
         :settings-page/home-default-page "Set the default home page"
-        :settings-page/enable-block-time "Enable block timestamps"
+        :settings-page/enable-block-time "Block timestamps"
         :settings-page/dont-use-other-peoples-proxy-servers "Don't use other people's proxy servers. It's very dangerous, which could make your token and notes stolen. Logseq will not be responsible for this loss if you use other people's proxy servers. You can deploy it yourself, check "
         :settings-page/clear-cache "Clear cache"
         :settings-page/clear "Clear"
         :settings-page/custom-cors-proxy-server "Custom CORS proxy server"
         :settings-page/developer-mode "Developer mode"
-        :settings-page/enable-developer-mode "Enable developer mode"
+        :settings-page/enable-developer-mode "Developer mode"
         :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"