feat(editor): add highlightGutter & highlightLine settings

src/main/store/module/preferences.ts

@@ -24,7 +24,9 @@ export default new Store<PreferencesStore>({
       trailingComma: 'none',
       semi: false,
       singleQuote: true,
-      theme: 'github'
+      theme: 'chrome',
+      highlightLine: false,
+      highlightGutter: false
     }
   }
 })

src/renderer/components/editor/TheEditor.vue

@@ -115,7 +115,9 @@ const init = async () => {
     printMargin: false,
     tabSize: appStore.editor.tabSize,
     wrap: appStore.editor.wrap,
-    showInvisibles: appStore.editor.showInvisibles
+    showInvisibles: appStore.editor.showInvisibles,
+    highlightGutterLine: appStore.editor.highlightGutter,
+    highlightActiveLine: appStore.editor.highlightLine
   })
 
   setValue()

src/renderer/components/preferences/EditorPreferences.vue

@@ -31,6 +31,18 @@
           name="showInvisibles"
         />
       </AppFormItem>
+      <AppFormItem label="Highlight Line">
+        <AppCheckbox
+          v-model="appStore.editor.highlightLine"
+          name="showInvisibles"
+        />
+      </AppFormItem>
+      <AppFormItem label="Highlight Gutter">
+        <AppCheckbox
+          v-model="appStore.editor.highlightGutter"
+          name="showInvisibles"
+        />
+      </AppFormItem>
       <h4>Prettier</h4>
       <AppFormItem label="Trailing Comma">
         <AppSelect

src/renderer/components/ui/form/AppForm.vue

@@ -12,5 +12,6 @@
   display: flex;
   flex-flow: column;
   gap: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
 }
 </style>

src/renderer/components/ui/form/AppFormItem.vue

@@ -28,7 +28,7 @@ defineProps<Props>()
 <style lang="scss" scoped>
 .form-item {
   display: grid;
-  grid-template-columns: 120px 1fr;
+  grid-template-columns: 150px 1fr;
   .inner {
     display: flex;
     flex-flow: column;

src/renderer/components/ui/menu/AppMenu.vue

@@ -64,7 +64,6 @@ provide('items', items.value)
 <style lang="scss" scoped>
 .menu {
   width: 100%;
-  height: 300px;
   display: grid;
   grid-template-columns: 150px 1fr;
   gap: var(--spacing-sm);

src/renderer/store/app.ts

@@ -16,7 +16,9 @@ const EDITOR_DEFAULTS: EditorSettings = {
   trailingComma: 'none',
   semi: false,
   singleQuote: true,
-  theme: 'chrome'
+  theme: 'chrome',
+  highlightLine: false,
+  highlightGutter: false
 }
 
 export const useAppStore = defineStore('app', {

src/shared/types/main/store.d.ts

@@ -1,3 +1,5 @@
+import type { EditorSettings } from '../renderer/store/app'
+
 export interface AppStore {
   bounds: object
   selectedFolderId?: string
@@ -10,20 +12,9 @@ export interface AppStore {
   notifySupport: boolean
 }
 
-interface Editor {
-  fontFamily: string
-  fontSize: number
-  showInvisibles: boolean
-  tabSize: number
-  wrap: string
-  trailingComma: 'all' | 'none' | 'es5'
-  semi: boolean
-  singleQuote: boolean
-  theme: string
-}
 export interface PreferencesStore {
   storagePath: string
   backupPath: string
-  editor: Editor
+  editor: EditorSettings
   theme: string
 }

src/shared/types/renderer/store/app.d.ts

@@ -42,6 +42,8 @@ export interface EditorSettings {
   semi: boolean
   singleQuote: boolean
   theme: ThemeEditor
+  highlightLine: boolean
+  highlightGutter: boolean
 }
 
 export interface State {