From e741d6c6a5cfd1fb99d62e541d88a7074cfc2d6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20H=C3=A4usler?= <hfelix@protonmail.ch>
Date: Sun, 2 Jan 2022 20:58:14 +0100
Subject: [PATCH] Fix preference scaling and improve UX (#2815)

---
 src/main/config.js                            |   2 +
 src/main/windows/setting.js                   |   6 +-
 .../prefComponents/common/compound/index.vue  |   7 +
 src/renderer/prefComponents/editor/config.js  |  14 +
 src/renderer/prefComponents/editor/index.vue  | 286 ++++++++++--------
 src/renderer/prefComponents/general/index.vue | 193 +++++++-----
 src/renderer/prefComponents/image/index.vue   |  37 ++-
 .../prefComponents/markdown/config.js         |  14 -
 .../prefComponents/markdown/index.vue         | 198 ++++++------
 src/renderer/prefComponents/sideBar/index.vue |  16 +-
 .../prefComponents/spellchecker/index.vue     |  68 +++--
 src/renderer/prefComponents/theme/index.vue   |   7 +-
 12 files changed, 492 insertions(+), 356 deletions(-)

diff --git a/src/main/config.js b/src/main/config.js
index 7420487f..4e152ea1 100644
--- a/src/main/config.js
+++ b/src/main/config.js
@@ -19,6 +19,8 @@ export const editorWinOptions = Object.freeze({
 })
 
 export const preferencesWinOptions = Object.freeze({
+  minWidth: 450,
+  minHeight: 350,
   width: 950,
   height: 650,
   webPreferences: {
diff --git a/src/main/windows/setting.js b/src/main/windows/setting.js
index 9facbbbf..dbcd9e21 100644
--- a/src/main/windows/setting.js
+++ b/src/main/windows/setting.js
@@ -4,7 +4,7 @@ import { enable as remoteEnable } from '@electron/remote/main'
 import electronLocalshortcut from '@hfelix/electron-localshortcut'
 import BaseWindow, { WindowLifecycle, WindowType } from './base'
 import { centerWindowOptions } from './utils'
-import { TITLE_BAR_HEIGHT, preferencesWinOptions, isLinux, isOsx, isWindows } from '../config'
+import { TITLE_BAR_HEIGHT, preferencesWinOptions, isLinux, isOsx } from '../config'
 
 class SettingWindow extends BaseWindow {
   /**
@@ -30,9 +30,7 @@ class SettingWindow extends BaseWindow {
 
     // WORKAROUND: Electron has issues with different DPI per monitor when
     // setting a fixed window size.
-    if (isWindows) {
-      winOptions.resizable = true
-    }
+    winOptions.resizable = true
 
     // Enable native or custom/frameless window and titlebar
     const { titleBarStyle, theme } = preferences.getAll()
diff --git a/src/renderer/prefComponents/common/compound/index.vue b/src/renderer/prefComponents/common/compound/index.vue
index e730b5e6..c71ef20f 100644
--- a/src/renderer/prefComponents/common/compound/index.vue
+++ b/src/renderer/prefComponents/common/compound/index.vue
@@ -29,10 +29,17 @@ export default {
     margin: 20px 0;
     color: var(--editorColor);
 
+    & .pref-compound-head h6.title {
+      font-weight: 400;
+      font-size: 1.1em;
+      padding-bottom: 6px;
+    }
+
     & .pref-compound-body {
       padding: 8px 16px 8px 16px;
       margin-top: -12px;
       background: rgba(0, 0, 0, .04);
+      border: 1px solid rgba(255, 255, 255, .03);
     }
 
     & .description {
diff --git a/src/renderer/prefComponents/editor/config.js b/src/renderer/prefComponents/editor/config.js
index 6fc3eaa5..b7f1dff7 100644
--- a/src/renderer/prefComponents/editor/config.js
+++ b/src/renderer/prefComponents/editor/config.js
@@ -1,5 +1,19 @@
 import { ENCODING_NAME_MAP } from 'common/encoding'
 
+export const tabSizeOptions = [{
+  label: '1',
+  value: 1
+}, {
+  label: '2',
+  value: 2
+}, {
+  label: '3',
+  value: 3
+}, {
+  label: '4',
+  value: 4
+}]
+
 export const endOfLineOptions = [{
   label: 'Default',
   value: 'default'
diff --git a/src/renderer/prefComponents/editor/index.vue b/src/renderer/prefComponents/editor/index.vue
index 6a23efd4..4a866eb1 100644
--- a/src/renderer/prefComponents/editor/index.vue
+++ b/src/renderer/prefComponents/editor/index.vue
@@ -1,132 +1,172 @@
 <template>
   <div class="pref-editor">
     <h4>Editor</h4>
-    <range
-      description="Font size in text editor"
-      :value="fontSize"
-      :min="12"
-      :max="32"
-      unit="px"
-      :step="1"
-      :onChange="value => onSelectChange('fontSize', value)"
-    ></range>
-    <range
-      description="Line height in text editor"
-      :value="lineHeight"
-      :min="1.2"
-      :max="2.0"
-      :step="0.1"
-      :onChange="value => onSelectChange('lineHeight', value)"
-    ></range>
-    <font-text-box
-      description="Font for text editor"
-      :value="editorFontFamily"
-      :onChange="value => onSelectChange('editorFontFamily', value)"
-    ></font-text-box>
-    <separator></separator>
-    <range
-      description="Font size in code blocks"
-      :value="codeFontSize"
-      :min="12"
-      :max="28"
-      unit="px"
-      :step="1"
-      :onChange="value => onSelectChange('codeFontSize', value)"
-    ></range>
-    <font-text-box
-      description="Font for code blocks"
-      :onlyMonospace="true"
-      :value="codeFontFamily"
-      :onChange="value => onSelectChange('codeFontFamily', value)"
-    ></font-text-box>
-    <!-- FIXME: Disabled due to #1648. -->
-    <bool
-      v-show="false"
-      description="Show line numbers in code blocks"
-      :bool="codeBlockLineNumbers"
-      :onChange="value => onSelectChange('codeBlockLineNumbers', value)"
-    ></bool>
-    <bool
-      description="Remove leading and trailing empty lines in code blocks"
-      :bool="trimUnnecessaryCodeBlockEmptyLines"
-      :onChange="value => onSelectChange('trimUnnecessaryCodeBlockEmptyLines', value)"
-    ></bool>
-    <separator></separator>
-    <bool
-      description="Automatically close brackets when writing"
-      :bool="autoPairBracket"
-      :onChange="value => onSelectChange('autoPairBracket', value)"
-    ></bool>
-    <bool
-      description="Automatically complete markdown syntax"
-      :bool="autoPairMarkdownSyntax"
-      :onChange="value => onSelectChange('autoPairMarkdownSyntax', value)"
-    ></bool>
-    <bool
-      description="Automatically close quotation marks"
-      :bool="autoPairQuote"
-      :onChange="value => onSelectChange('autoPairQuote', value)"
-    ></bool>
-    <separator></separator>
-    <cur-select
-      description="Line separator type"
-      :value="endOfLine"
-      :options="endOfLineOptions"
-      :onChange="value => onSelectChange('endOfLine', value)"
-    ></cur-select>
-    <separator></separator>
-    <cur-select
-      description="Default encoding"
-      :value="defaultEncoding"
-      :options="defaultEncodingOptions"
-      :onChange="value => onSelectChange('defaultEncoding', value)"
-    ></cur-select>
-    <bool
-      description="Automatically detect file encoding"
-      :bool="autoGuessEncoding"
-      :onChange="value => onSelectChange('autoGuessEncoding', value)"
-    ></bool>
-    <cur-select
-      description="Handling of trailing newline characters"
-      :value="trimTrailingNewline"
-      :options="trimTrailingNewlineOptions"
-      :onChange="value => onSelectChange('trimTrailingNewline', value)"
-    ></cur-select>
-    <separator></separator>
-    <cur-select
-      description="Text direction"
-      :value="textDirection"
-      :options="textDirectionOptions"
-      :onChange="value => onSelectChange('textDirection', value)"
-    ></cur-select>
-    <bool
-      description="Hide hint for selecting type of new paragraph"
-      :bool="hideQuickInsertHint"
-      :onChange="value => onSelectChange('hideQuickInsertHint', value)"
-    ></bool>
-    <bool
-      description="Hide popup when cursor is over link"
-      :bool="hideLinkPopup"
-      :onChange="value => onSelectChange('hideLinkPopup', value)"
-    ></bool>
-    <bool
-      description="Whether to automatically check any related tasks"
-      :bool="autoCheck"
-      :onChange="value => onSelectChange('autoCheck', value)"
-    ></bool>
-    <separator></separator>
-    <text-box
-      description="Maximum width of text editor"
-      notes="Leave empty for theme default, otherwise use number with unit suffix, which is one of 'ch' for characters, 'px' for pixels, or '%' for percentage."
-      :input="editorLineWidth"
-      :regexValidator="/^(?:$|[0-9]+(?:ch|px|%)$)/"
-      :onChange="value => onSelectChange('editorLineWidth', value)"
-    ></text-box>
+    <compound>
+      <template #head>
+        <h6 class="title">Text editor settings:</h6>
+      </template>
+      <template #children>
+        <range
+          description="Font size"
+          :value="fontSize"
+          :min="12"
+          :max="32"
+          unit="px"
+          :step="1"
+          :onChange="value => onSelectChange('fontSize', value)"
+        ></range>
+        <range
+          description="Line height"
+          :value="lineHeight"
+          :min="1.2"
+          :max="2.0"
+          :step="0.1"
+          :onChange="value => onSelectChange('lineHeight', value)"
+        ></range>
+        <font-text-box
+          description="Font family"
+          :value="editorFontFamily"
+          :onChange="value => onSelectChange('editorFontFamily', value)"
+        ></font-text-box>
+        <text-box
+          description="Maximum width of text editor"
+          notes="Leave empty for theme default, otherwise use number with unit suffix, which is one of 'ch' for characters, 'px' for pixels, or '%' for percentage."
+          :input="editorLineWidth"
+          :regexValidator="/^(?:$|[0-9]+(?:ch|px|%)$)/"
+          :onChange="value => onSelectChange('editorLineWidth', value)"
+        ></text-box>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Code block settings:</h6>
+      </template>
+      <template #children>
+        <range
+          description="Font size"
+          :value="codeFontSize"
+          :min="12"
+          :max="28"
+          unit="px"
+          :step="1"
+          :onChange="value => onSelectChange('codeFontSize', value)"
+        ></range>
+        <font-text-box
+          description="Font family"
+          :onlyMonospace="true"
+          :value="codeFontFamily"
+          :onChange="value => onSelectChange('codeFontFamily', value)"
+        ></font-text-box>
+        <!-- FIXME: Disabled due to #1648. -->
+        <bool
+          v-show="false"
+          description="Show line numbers"
+          :bool="codeBlockLineNumbers"
+          :onChange="value => onSelectChange('codeBlockLineNumbers', value)"
+        ></bool>
+        <bool
+          description="Remove leading and trailing empty lines"
+          :bool="trimUnnecessaryCodeBlockEmptyLines"
+          :onChange="value => onSelectChange('trimUnnecessaryCodeBlockEmptyLines', value)"
+        ></bool>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Writing behavior:</h6>
+      </template>
+      <template #children>
+        <bool
+          description="Automatically close brackets when writing"
+          :bool="autoPairBracket"
+          :onChange="value => onSelectChange('autoPairBracket', value)"
+        ></bool>
+        <bool
+          description="Automatically complete markdown syntax"
+          :bool="autoPairMarkdownSyntax"
+          :onChange="value => onSelectChange('autoPairMarkdownSyntax', value)"
+        ></bool>
+        <bool
+          description="Automatically close quotation marks"
+          :bool="autoPairQuote"
+          :onChange="value => onSelectChange('autoPairQuote', value)"
+        ></bool>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">File representation:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="Preferred tab width"
+          :value="tabSize"
+          :options="tabSizeOptions"
+          :onChange="value => onSelectChange('tabSize', value)"
+        ></cur-select>
+        <cur-select
+          description="Line separator type"
+          :value="endOfLine"
+          :options="endOfLineOptions"
+          :onChange="value => onSelectChange('endOfLine', value)"
+        ></cur-select>
+        <cur-select
+          description="Default encoding"
+          :value="defaultEncoding"
+          :options="defaultEncodingOptions"
+          :onChange="value => onSelectChange('defaultEncoding', value)"
+        ></cur-select>
+        <bool
+          description="Automatically detect file encoding"
+          :bool="autoGuessEncoding"
+          :onChange="value => onSelectChange('autoGuessEncoding', value)"
+        ></bool>
+        <cur-select
+          description="Handling of trailing newline characters"
+          :value="trimTrailingNewline"
+          :options="trimTrailingNewlineOptions"
+          :onChange="value => onSelectChange('trimTrailingNewline', value)"
+        ></cur-select>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Misc:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="Text direction"
+          :value="textDirection"
+          :options="textDirectionOptions"
+          :onChange="value => onSelectChange('textDirection', value)"
+        ></cur-select>
+        <bool
+          description="Hide hint for selecting type of new paragraph"
+          :bool="hideQuickInsertHint"
+          :onChange="value => onSelectChange('hideQuickInsertHint', value)"
+        ></bool>
+        <bool
+          description="Hide popup when cursor is over link"
+          :bool="hideLinkPopup"
+          :onChange="value => onSelectChange('hideLinkPopup', value)"
+        ></bool>
+        <bool
+          description="Whether to automatically check any related tasks"
+          :bool="autoCheck"
+          :onChange="value => onSelectChange('autoCheck', value)"
+        ></bool>
+      </template>
+    </compound>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import Compound from '../common/compound'
 import FontTextBox from '../common/fontTextBox'
 import Range from '../common/range'
 import CurSelect from '../common/select'
@@ -134,6 +174,7 @@ import Bool from '../common/bool'
 import Separator from '../common/separator'
 import TextBox from '../common/textBox'
 import {
+  tabSizeOptions,
   endOfLineOptions,
   textDirectionOptions,
   trimTrailingNewlineOptions,
@@ -142,6 +183,7 @@ import {
 
 export default {
   components: {
+    Compound,
     FontTextBox,
     Range,
     CurSelect,
@@ -150,6 +192,7 @@ export default {
     TextBox
   },
   data () {
+    this.tabSizeOptions = tabSizeOptions
     this.endOfLineOptions = endOfLineOptions
     this.textDirectionOptions = textDirectionOptions
     this.trimTrailingNewlineOptions = trimTrailingNewlineOptions
@@ -164,6 +207,7 @@ export default {
       autoPairBracket: state => state.preferences.autoPairBracket,
       autoPairMarkdownSyntax: state => state.preferences.autoPairMarkdownSyntax,
       autoPairQuote: state => state.preferences.autoPairQuote,
+      tabSize: state => state.preferences.tabSize,
       endOfLine: state => state.preferences.endOfLine,
       textDirection: state => state.preferences.textDirection,
       codeFontSize: state => state.preferences.codeFontSize,
diff --git a/src/renderer/prefComponents/general/index.vue b/src/renderer/prefComponents/general/index.vue
index 6f65c834..dc1f632f 100644
--- a/src/renderer/prefComponents/general/index.vue
+++ b/src/renderer/prefComponents/general/index.vue
@@ -2,87 +2,119 @@
   <div class="pref-general">
     <h4>General</h4>
     <compound>
-    <template #head>
-    <bool
-      description="Automatically save document changes"
-      :bool="autoSave"
-      :onChange="value => onSelectChange('autoSave', value)"
-    ></bool>
-    </template>
-    <template #children>
-    <range
-      description="Delay following document edit before automatically saving"
-      :value="autoSaveDelay"
-      :min="1000"
-      :max="10000"
-      unit="ms"
-      :step="100"
-      :onChange="value => onSelectChange('autoSaveDelay', value)"
-    ></range>
-    </template>
+      <template #head>
+        <h6 class="title">Auto Save:</h6>
+      </template>
+      <template #children>
+        <bool
+          description="Automatically save document changes"
+          :bool="autoSave"
+          :onChange="value => onSelectChange('autoSave', value)"
+        ></bool>
+        <range
+          description="Delay following document edit before automatically saving"
+          :value="autoSaveDelay"
+          :min="1000"
+          :max="10000"
+          unit="ms"
+          :step="100"
+          :onChange="value => onSelectChange('autoSaveDelay', value)"
+        ></range>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Window:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          v-if="!isOsx"
+          description="Title bar style"
+          notes="Requires restart."
+          :value="titleBarStyle"
+          :options="titleBarStyleOptions"
+          :onChange="value => onSelectChange('titleBarStyle', value)"
+        ></cur-select>
+        <bool
+          description="Hide scrollbars"
+          :bool="hideScrollbar"
+          :onChange="value => onSelectChange('hideScrollbar', value)"
+        ></bool>
+        <bool
+          description="Open files in new window"
+          :bool="openFilesInNewWindow"
+          :onChange="value => onSelectChange('openFilesInNewWindow', value)"
+        ></bool>
+        <bool
+          description="Open folders in new window"
+          :bool="openFolderInNewWindow"
+          :onChange="value => onSelectChange('openFolderInNewWindow', value)"
+        ></bool>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Sidebar:</h6>
+      </template>
+      <template #children>
+        <bool
+          description="Wrap text in table of contents"
+          :bool="wordWrapInToc"
+          :onChange="value => onSelectChange('wordWrapInToc', value)"
+        ></bool>
+
+        <!-- TODO: The description is very bad and the entry isn't used by the editor. -->
+        <cur-select
+          description="Sort field for files in open folders"
+          :value="fileSortBy"
+          :options="fileSortByOptions"
+          :onChange="value => onSelectChange('fileSortBy', value)"
+          :disable="true"
+        ></cur-select>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Action on startup:</h6>
+      </template>
+      <template #children>
+        <section class="startup-action-ctrl">
+          <el-radio-group v-model="startUpAction">
+            <!--
+              Hide "lastState" for now (#2064).
+            <el-radio class="ag-underdevelop" label="lastState">Restore last editor session</el-radio>
+            -->
+            <el-radio label="folder" style="margin-bottom: 10px;">Open the default directory<span>: {{defaultDirectoryToOpen}}</span></el-radio>
+            <el-button size="small" @click="selectDefaultDirectoryToOpen">Select Folder</el-button>
+            <el-radio label="blank">Open a blank page</el-radio>
+          </el-radio-group>
+        </section>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Misc:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="User interface language"
+          :value="language"
+          :options="languageOptions"
+          :onChange="value => onSelectChange('language', value)"
+          :disable="true"
+        ></cur-select>
+        <bool
+          description="Enable Aidou"
+          :bool="aidou"
+          :onChange="value => onSelectChange('aidou', value)"
+          more="https://github.com/marktext/marktext/blob/develop/docs/FAQ.md#what-is-a-aidou-"
+        ></bool>
+      </template>
     </compound>
-    <cur-select
-      v-if="!isOsx"
-      description="Title bar style"
-      notes="Requires restart."
-      :value="titleBarStyle"
-      :options="titleBarStyleOptions"
-      :onChange="value => onSelectChange('titleBarStyle', value)"
-    ></cur-select>
-    <separator></separator>
-    <bool
-      description="Open files in new window"
-      :bool="openFilesInNewWindow"
-      :onChange="value => onSelectChange('openFilesInNewWindow', value)"
-    ></bool>
-    <bool
-      description="Open folders in new window"
-      :bool="openFolderInNewWindow"
-      :onChange="value => onSelectChange('openFolderInNewWindow', value)"
-    ></bool>
-    <bool
-      description="Hide scrollbars"
-      :bool="hideScrollbar"
-      :onChange="value => onSelectChange('hideScrollbar', value)"
-    ></bool>
-    <bool
-      description="Wrap text in table of contents"
-      :bool="wordWrapInToc"
-      :onChange="value => onSelectChange('wordWrapInToc', value)"
-    ></bool>
-    <bool
-      description="Use Aidou"
-      :bool="aidou"
-      :onChange="value => onSelectChange('aidou', value)"
-      more="https://github.com/marktext/marktext/blob/develop/docs/FAQ.md#what-is-a-aidou-"
-    ></bool>
-    <separator></separator>
-    <cur-select
-      description="Sort field for files in open folders"
-      :value="fileSortBy"
-      :options="fileSortByOptions"
-      :onChange="value => onSelectChange('fileSortBy', value)"
-      :disable="true"
-    ></cur-select>
-    <section class="startup-action-ctrl">
-      <div>Action on startup</div>
-      <el-radio-group v-model="startUpAction">
-        <!--
-          Hide "lastState" for now (#2064).
-        <el-radio class="ag-underdevelop" label="lastState">Open the last window state</el-radio>
-        -->
-        <el-radio label="folder">Open the default directory<span>: {{defaultDirectoryToOpen}}</span></el-radio>
-        <el-button size="small" @click="selectDefaultDirectoryToOpen">Select Folder</el-button>
-        <el-radio label="blank">Open a blank page</el-radio>
-      </el-radio-group>
-    </section>
-    <cur-select
-      description="Language for user interface"
-      :value="language"
-      :options="languageOptions"
-      :onChange="value => onSelectChange('language', value)"
-      :disable="true"
-    ></cur-select>
   </div>
 </template>
 
@@ -156,7 +188,6 @@ export default {
     & .startup-action-ctrl {
       font-size: 14px;
       user-select: none;
-      margin: 20px 0;
       color: var(--editorColor);
       & .el-button--small {
         margin-left: 25px;
diff --git a/src/renderer/prefComponents/image/index.vue b/src/renderer/prefComponents/image/index.vue
index 03d8b783..cf912e1e 100644
--- a/src/renderer/prefComponents/image/index.vue
+++ b/src/renderer/prefComponents/image/index.vue
@@ -9,7 +9,7 @@
       </div>
       <el-radio-group v-model="imageInsertAction">
         <el-radio label="upload">Upload to cloud using selected uploader (must be configured)</el-radio>
-        <el-radio label="folder">Move to designated local folder</el-radio>
+        <el-radio label="folder">Copy to designated relative assets or local folder</el-radio>
         <el-radio label="path">Keep original location</el-radio>
       </el-radio-group>
     </section>
@@ -21,20 +21,27 @@
         <el-button size="mini" @click="modifyImageFolderPath">Modify</el-button>
         <el-button size="mini" @click="openImageFolder">Open Folder</el-button>
       </div>
-      <bool
-        description="Prefer relative assets folder"
-        more="https://github.com/marktext/marktext/blob/develop/docs/IMAGES.md"
-        :bool="imagePreferRelativeDirectory"
-        :onChange="value => onSelectChange('imagePreferRelativeDirectory', value)"
-      ></bool>
-      <text-box
-        description="Relative image folder name"
-        :input="imageRelativeDirectoryName"
-        :regexValidator="/^(?:$|(?![a-zA-Z]:)[^\/\\].*$)/"
-        :defaultValue="relativeDirectoryNamePlaceholder"
-        :onChange="value => onSelectChange('imageRelativeDirectoryName', value)"
-      ></text-box>
     </section>
+
+    <compound>
+      <template #head>
+        <bool
+          description="Prefer relative assets folder"
+          more="https://github.com/marktext/marktext/blob/develop/docs/IMAGES.md"
+          :bool="imagePreferRelativeDirectory"
+          :onChange="value => onSelectChange('imagePreferRelativeDirectory', value)"
+        ></bool>
+      </template>
+      <template #children>
+        <text-box
+          description="Relative image folder name"
+          :input="imageRelativeDirectoryName"
+          :regexValidator="/^(?:$|(?![a-zA-Z]:)[^\/\\].*$)/"
+          :defaultValue="relativeDirectoryNamePlaceholder"
+          :onChange="value => onSelectChange('imageRelativeDirectoryName', value)"
+        ></text-box>
+      </template>
+    </compound>
   </div>
 </template>
 
@@ -42,12 +49,14 @@
 import { mapState } from 'vuex'
 import { shell } from 'electron'
 import Bool from '../common/bool'
+import Compound from '../common/compound'
 import Separator from '../common/separator'
 import TextBox from '../common/textBox'
 
 export default {
   components: {
     Bool,
+    Compound,
     Separator,
     TextBox
   },
diff --git a/src/renderer/prefComponents/markdown/config.js b/src/renderer/prefComponents/markdown/config.js
index 34f07ff9..9ff2816b 100644
--- a/src/renderer/prefComponents/markdown/config.js
+++ b/src/renderer/prefComponents/markdown/config.js
@@ -25,20 +25,6 @@ export const preferHeadingStyleOptions = [{
   value: 'setext'
 }]
 
-export const tabSizeOptions = [{
-  label: '1',
-  value: 1
-}, {
-  label: '2',
-  value: 2
-}, {
-  label: '3',
-  value: 3
-}, {
-  label: '4',
-  value: 4
-}]
-
 export const listIndentationOptions = [{
   label: 'DocFX style',
   value: 'dfm'
diff --git a/src/renderer/prefComponents/markdown/index.vue b/src/renderer/prefComponents/markdown/index.vue
index eedd0944..9bfd0540 100644
--- a/src/renderer/prefComponents/markdown/index.vue
+++ b/src/renderer/prefComponents/markdown/index.vue
@@ -1,100 +1,127 @@
 <template>
   <div class="pref-markdown">
     <h4>Markdown</h4>
-    <bool
-      description="Prefer loose list items"
-      :bool="preferLooseListItem"
-      :onChange="value => onSelectChange('preferLooseListItem', value)"
-      more="https://spec.commonmark.org/0.29/#loose"
-    ></bool>
-    <cus-select
-      description="Preferred marker for bullet lists"
-      :value="bulletListMarker"
-      :options="bulletListMarkerOptions"
-      :onChange="value => onSelectChange('bulletListMarker', value)"
-      more="https://spec.commonmark.org/0.29/#bullet-list-marker"
-    ></cus-select>
-    <cus-select
-      description="Preferred marker for ordered lists"
-      :value="orderListDelimiter"
-      :options="orderListDelimiterOptions"
-      :onChange="value => onSelectChange('orderListDelimiter', value)"
-      more="https://spec.commonmark.org/0.29/#ordered-list"
-    ></cus-select>
-    <cus-select
-      description="Preferred heading style"
-      :value="preferHeadingStyle"
-      :options="preferHeadingStyleOptions"
-      :onChange="value => onSelectChange('preferHeadingStyle', value)"
-      :disable="true"
-    ></cus-select>
-    <cus-select
-      description="Preferred tab width"
-      :value="tabSize"
-      :options="tabSizeOptions"
-      :onChange="value => onSelectChange('tabSize', value)"
-    ></cus-select>
-    <cus-select
-      description="Preferred list indentation"
-      :value="listIndentation"
-      :options="listIndentationOptions"
-      :onChange="value => onSelectChange('listIndentation', value)"
-    ></cus-select>
-    <separator></separator>
-    <h5>Markdown extensions</h5>
-    <cus-select
-      description="Format for front matter"
-      :value="frontmatterType"
-      :options="frontmatterTypeOptions"
-      :onChange="value => onSelectChange('frontmatterType', value)"
-    ></cus-select>
-    <bool
-      description="Use Pandoc-style superscript and subscript"
-      :bool="superSubScript"
-      :onChange="value => onSelectChange('superSubScript', value)"
-      more="https://pandoc.org/MANUAL.html#superscripts-and-subscripts"
-    ></bool>
-    <bool
-      description="Use Pandoc-style footnotes"
-      notes="Requires restart."
-      :bool="footnote"
-      :onChange="value => onSelectChange('footnote', value)"
-      more="https://pandoc.org/MANUAL.html#footnotes"
-    ></bool>
-    <separator></separator>
-    <h5>Compatibility</h5>
-    <bool
-      description="Enable HTML rendering"
-      :bool="isHtmlEnabled"
-      :onChange="value => onSelectChange('isHtmlEnabled', value)"
-    ></bool>
-    <bool
-      description="Enable GitLab compatibility mode"
-      :bool="isGitlabCompatibilityEnabled"
-      :onChange="value => onSelectChange('isGitlabCompatibilityEnabled', value)"
-    ></bool>
-    <separator></separator>
-    <h5>Diagram theme</h5>
-    <cus-select
-      description="Sequence diagram theme"
-      :value="sequenceTheme"
-      :options="sequenceThemeOptions"
-      :onChange="value => onSelectChange('sequenceTheme', value)"
-      more="https://bramp.github.io/js-sequence-diagrams/"
-    ></cus-select>
+    <compound>
+      <template #head>
+        <h6 class="title">Lists:</h6>
+      </template>
+      <template #children>
+        <bool
+          description="Prefer loose list items"
+          :bool="preferLooseListItem"
+          :onChange="value => onSelectChange('preferLooseListItem', value)"
+          more="https://spec.commonmark.org/0.29/#loose"
+        ></bool>
+        <cur-select
+          description="Preferred marker for bullet lists"
+          :value="bulletListMarker"
+          :options="bulletListMarkerOptions"
+          :onChange="value => onSelectChange('bulletListMarker', value)"
+          more="https://spec.commonmark.org/0.29/#bullet-list-marker"
+        ></cur-select>
+        <cur-select
+          description="Preferred marker for ordered lists"
+          :value="orderListDelimiter"
+          :options="orderListDelimiterOptions"
+          :onChange="value => onSelectChange('orderListDelimiter', value)"
+          more="https://spec.commonmark.org/0.29/#ordered-list"
+        ></cur-select>
+        <cur-select
+          description="Preferred list indentation"
+          :value="listIndentation"
+          :options="listIndentationOptions"
+          :onChange="value => onSelectChange('listIndentation', value)"
+        ></cur-select>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Markdown extensions:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="Front matter format"
+          :value="frontmatterType"
+          :options="frontmatterTypeOptions"
+          :onChange="value => onSelectChange('frontmatterType', value)"
+        ></cur-select>
+        <bool
+          description="Enable Pandoc-style superscript and subscript"
+          :bool="superSubScript"
+          :onChange="value => onSelectChange('superSubScript', value)"
+          more="https://pandoc.org/MANUAL.html#superscripts-and-subscripts"
+        ></bool>
+        <bool
+          description="Enable Pandoc-style footnotes"
+          notes="Requires restart."
+          :bool="footnote"
+          :onChange="value => onSelectChange('footnote', value)"
+          more="https://pandoc.org/MANUAL.html#footnotes"
+        ></bool>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Compatibility:</h6>
+      </template>
+      <template #children>
+        <bool
+          description="Enable HTML rendering"
+          :bool="isHtmlEnabled"
+          :onChange="value => onSelectChange('isHtmlEnabled', value)"
+        ></bool>
+        <bool
+          description="Enable GitLab compatibility mode"
+          :bool="isGitlabCompatibilityEnabled"
+          :onChange="value => onSelectChange('isGitlabCompatibilityEnabled', value)"
+        ></bool>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Diagrams:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="Sequence diagram theme"
+          :value="sequenceTheme"
+          :options="sequenceThemeOptions"
+          :onChange="value => onSelectChange('sequenceTheme', value)"
+          more="https://bramp.github.io/js-sequence-diagrams/"
+        ></cur-select>
+      </template>
+    </compound>
+
+    <compound>
+      <template #head>
+        <h6 class="title">Misc:</h6>
+      </template>
+      <template #children>
+        <cur-select
+          description="Preferred heading style"
+          :value="preferHeadingStyle"
+          :options="preferHeadingStyleOptions"
+          :onChange="value => onSelectChange('preferHeadingStyle', value)"
+          :disable="true"
+        ></cur-select>
+      </template>
+    </compound>
   </div>
 </template>
 
 <script>
+import Compound from '../common/compound'
 import Separator from '../common/separator'
 import { mapState } from 'vuex'
 import Bool from '../common/bool'
-import CusSelect from '../common/select'
+import CurSelect from '../common/select'
 import {
   bulletListMarkerOptions,
   orderListDelimiterOptions,
   preferHeadingStyleOptions,
-  tabSizeOptions,
   listIndentationOptions,
   frontmatterTypeOptions,
   sequenceThemeOptions
@@ -102,15 +129,15 @@ import {
 
 export default {
   components: {
+    Compound,
     Separator,
     Bool,
-    CusSelect
+    CurSelect
   },
   data () {
     this.bulletListMarkerOptions = bulletListMarkerOptions
     this.orderListDelimiterOptions = orderListDelimiterOptions
     this.preferHeadingStyleOptions = preferHeadingStyleOptions
-    this.tabSizeOptions = tabSizeOptions
     this.listIndentationOptions = listIndentationOptions
     this.frontmatterTypeOptions = frontmatterTypeOptions
     this.sequenceThemeOptions = sequenceThemeOptions
@@ -122,7 +149,6 @@ export default {
       bulletListMarker: state => state.preferences.bulletListMarker,
       orderListDelimiter: state => state.preferences.orderListDelimiter,
       preferHeadingStyle: state => state.preferences.preferHeadingStyle,
-      tabSize: state => state.preferences.tabSize,
       listIndentation: state => state.preferences.listIndentation,
       frontmatterType: state => state.preferences.frontmatterType,
       superSubScript: state => state.preferences.superSubScript,
diff --git a/src/renderer/prefComponents/sideBar/index.vue b/src/renderer/prefComponents/sideBar/index.vue
index 30aab672..86b3d8a9 100644
--- a/src/renderer/prefComponents/sideBar/index.vue
+++ b/src/renderer/prefComponents/sideBar/index.vue
@@ -74,9 +74,12 @@ export default {
       })
     },
     handleCategoryItemClick (item) {
-      this.$router.push({
-        path: item.path
-      })
+      const { currentCategory } = this
+      if (item.name.toLowerCase() !== currentCategory) {
+        this.$router.push({
+          path: item.path
+        })
+      }
     }
   },
   mounted () {
@@ -88,6 +91,8 @@ export default {
 <style>
   .pref-sidebar {
     -webkit-app-region: drag;
+    display: flex;
+    flex-direction: column;
     background: var(--sideBarBgColor);
     width: var(--prefSideBarWidth);
     height: 100vh;
@@ -96,13 +101,13 @@ export default {
     & h3 {
       margin: 0;
       font-weight: normal;
+      text-align: center;
       color: var(--sideBarColor);
     }
-    padding-left: 30px;
-    padding-right: 30px;
   }
   .search-wrapper {
     -webkit-app-region: no-drag;
+    padding: 0 20px;
     margin: 30px 0;
   }
   .el-autocomplete {
@@ -144,6 +149,7 @@ export default {
   }
   .category {
     -webkit-app-region: no-drag;
+    overflow-y: auto;
     & .item {
       width: 100%;
       height: 50px;
diff --git a/src/renderer/prefComponents/spellchecker/index.vue b/src/renderer/prefComponents/spellchecker/index.vue
index 0bde4cd1..6cac25bb 100644
--- a/src/renderer/prefComponents/spellchecker/index.vue
+++ b/src/renderer/prefComponents/spellchecker/index.vue
@@ -1,34 +1,40 @@
 <template>
   <div class="pref-spellchecker">
     <h4>Spelling</h4>
-    <bool
-      description="Enable spell checker"
-      notes="Feature is experimental."
-      :bool="spellcheckerEnabled"
-      :onChange="handleSpellcheckerEnabled"
-    ></bool>
-    <separator></separator>
-    <bool
-      description="Use Hunspell instead of system spell checker on macOS and Windows 10"
-      notes="Requires restart."
-      :bool="spellcheckerIsHunspell"
-      :disable="!isOsSpellcheckerSupported || !spellcheckerEnabled"
-      :onChange="value => onSelectChange('spellcheckerIsHunspell', value)"
-    ></bool>
-    <bool
-      description="Hide marks for spelling errors"
-      :bool="spellcheckerNoUnderline"
-      :disable="!spellcheckerEnabled"
-      :onChange="value => onSelectChange('spellcheckerNoUnderline', value)"
-    ></bool>
-    <bool
-      v-show="isOsx && !spellcheckerIsHunspell"
-      description="Automatically detect document language (requires showing marks for spelling errors)"
-      :bool="spellcheckerAutoDetectLanguage"
-      :disable="!spellcheckerEnabled"
-      :onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)"
-    ></bool>
+    <compound>
+      <template #head>
+        <bool
+          description="Enable spell checker"
+          :bool="spellcheckerEnabled"
+          :onChange="handleSpellcheckerEnabled"
+        ></bool>
+      </template>
+      <template #children>
+        <bool
+          description="Use Hunspell instead of system spell checker on macOS and Windows 10"
+          notes="Requires restart."
+          :bool="spellcheckerIsHunspell"
+          :disable="!isOsSpellcheckerSupported || !spellcheckerEnabled"
+          :onChange="value => onSelectChange('spellcheckerIsHunspell', value)"
+        ></bool>
+        <bool
+          description="Hide marks for spelling errors"
+          :bool="spellcheckerNoUnderline"
+          :disable="!spellcheckerEnabled"
+          :onChange="value => onSelectChange('spellcheckerNoUnderline', value)"
+        ></bool>
+        <bool
+          v-show="isOsx && !spellcheckerIsHunspell"
+          description="Automatically detect document language (requires showing marks for spelling errors)"
+          :bool="spellcheckerAutoDetectLanguage"
+          :disable="!spellcheckerEnabled"
+          :onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)"
+        ></bool>
+      </template>
+    </compound>
+
     <separator></separator>
+
     <cur-select
       description="Default language for spell checker"
       :value="spellcheckerLanguage"
@@ -48,7 +54,9 @@
     >
       Additional languages may be added through "Language" in your "Time & language" settings.
     </div>
+
     <div v-if="isHunspellSelected && spellcheckerEnabled">
+      <h6 class="title">Hunspell settings:</h6>
       <div class="description">Installed Hunspell dictionaries</div>
       <el-table
         :data="availableDictionaries"
@@ -95,6 +103,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import Compound from '../common/compound'
 import CurSelect from '../common/select'
 import Bool from '../common/bool'
 import Separator from '../common/separator'
@@ -106,6 +115,7 @@ import { downloadHunspellDictionary, deleteHunspellDictionary } from '@/spellche
 export default {
   components: {
     Bool,
+    Compound,
     CurSelect,
     Separator
   },
@@ -293,6 +303,10 @@ export default {
       color: var(--iconColor);
       font-size: 14px;
     }
+    & h6.title {
+      font-weight: 400;
+      font-size: 1.1em;
+    }
   }
   .el-table, .el-table__expanded-cell {
     background: var(--editorBgColor);
diff --git a/src/renderer/prefComponents/theme/index.vue b/src/renderer/prefComponents/theme/index.vue
index b867654e..9ce4d7f4 100644
--- a/src/renderer/prefComponents/theme/index.vue
+++ b/src/renderer/prefComponents/theme/index.vue
@@ -16,8 +16,8 @@
       :options="autoSwitchThemeOptions"
       :onChange="value => onSelectChange('autoSwitchTheme', value)"
     ></cur-select>
-    <separator></separator>
-    <section class="import-themes ag-underdevelop">
+    <separator v-show="false"></separator>
+    <section v-show="false" class="import-themes ag-underdevelop">
       <div>
         <span>Open the themes folder</span>
         <el-button size="small">Open Folder</el-button>
@@ -79,9 +79,8 @@ export default {
 </script>
 
 <style>
-  .pref-theme {
-  }
   .offcial-themes {
+    margin-top: 12px;
     & .theme {
       cursor: pointer;
       width: 248px;