Monaco editor refactoring (#4225)

* monaco editor refactoring

Signed-off-by: Roman <ixrock@gmail.com>

* clean up / responding to comments

Signed-off-by: Roman <ixrock@gmail.com>

* move custom monaco themes to own folder

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint

Signed-off-by: Roman <ixrock@gmail.com>

* removed unused rules from webpack's config (renderer)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+preferences/editor.tsx

@@ -22,10 +22,10 @@ import { observer } from "mobx-react";
 import React from "react";
 import { UserStore } from "../../../common/user-store";
 import { FormSwitch, Switcher } from "../switch";
+import { Select } from "../select";
 import { SubTitle } from "../layout/sub-title";
-import { Input } from "../input";
-import { isNumber } from "../input/input_validators";
-import { Select, SelectOption } from "../select";
+import { SubHeader } from "../layout/sub-header";
+import { Input, InputValidators } from "../input";
 
 enum EditorLineNumbersStyles {
   on = "On",
@@ -35,50 +35,60 @@ enum EditorLineNumbersStyles {
 }
 
 export const Editor = observer(() => {
-  const userStore = UserStore.getInstance();
+  const editorConfiguration = UserStore.getInstance().editorConfiguration;
 
   return (
     <section id="editor">
       <h2 data-testid="editor-configuration-header">Editor configuration</h2>
+
+      <SubTitle title="Minimap"/>
       <section>
-        <FormSwitch
-          control={
-            <Switcher
-              checked={userStore.editorConfiguration.miniMap.enabled}
-              onChange={v => userStore.enableEditorMinimap(v.target.checked)}
-              name="minimap"
+        <div className="flex gaps justify-space-between">
+          <div className="flex gaps align-center">
+            <FormSwitch
+              label={<SubHeader compact>Show minimap</SubHeader>}
+              control={
+                <Switcher
+                  checked={editorConfiguration.minimap.enabled}
+                  onChange={(evt, checked) => editorConfiguration.minimap.enabled = checked}
+                />
+              }
             />
-          }
-          label="Show minimap"
-        />
+          </div>
+          <div className="flex gaps align-center">
+            <SubHeader compact>Position</SubHeader>
+            <Select
+              themeName="lens"
+              options={["left", "right"]}
+              value={editorConfiguration.minimap.side}
+              onChange={({ value }) => editorConfiguration.minimap.side = value}
+            />
+          </div>
+        </div>
       </section>
+
       <section>
         <SubTitle title="Line numbers"/>
         <Select
-          options={Object.entries(EditorLineNumbersStyles).map(entry => ({ label: entry[1], value: entry[0] }))}
-          value={userStore.editorConfiguration?.lineNumbers}
-          onChange={({ value }: SelectOption) => userStore.setEditorLineNumbers(value)}
+          options={Object.entries(EditorLineNumbersStyles).map(([value, label]) => ({ label, value }))}
+          value={editorConfiguration.lineNumbers}
+          onChange={({ value }) => editorConfiguration.lineNumbers = value}
           themeName="lens"
         />
       </section>
+
       <section>
         <SubTitle title="Tab size"/>
         <Input
           theme="round-black"
+          type="number"
           min={1}
-          max={10}
-          validators={[isNumber]}
-          value={userStore.editorConfiguration.tabSize?.toString()}
-          onChange={value => {
-            const n = Number(value);
-
-            if (!isNaN(n)) {
-              userStore.setEditorTabSize(n);
-            }
-          }}
+          validators={InputValidators.isNumber}
+          value={editorConfiguration.tabSize.toString()}
+          onChange={value => editorConfiguration.tabSize = Number(value)}
         />
       </section>
     </section>
   );
 });
-
+