From 81eda4d0d34de71413418ddd983cfad658c69876 Mon Sep 17 00:00:00 2001
From: Mohamed Elhefni <elhefnymohamed446@gmail.com>
Date: Mon, 8 Jan 2024 12:09:15 +0200
Subject: [PATCH] chore(web): move keybind mode setting to Genral section in
 settings modal

---
 .../web/src/settings/SettingsModal.svelte     | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index 000ea304..8fa29255 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/packages/web/src/settings/SettingsModal.svelte
@@ -111,16 +111,32 @@ ORDER BY
           />
 
           <div class="heading">SQL editor</div>
-          <FormSelectField
-            label="SQL commands case"
-            name="sqlEditor.sqlCommandsCase"
-            isNative
-            defaultValue="upperCase"
-            options={[
-              { value: 'upperCase', label: 'UPPER CASE' },
-              { value: 'lowerCase', label: 'lower case' },
-            ]}
-          />
+
+          <div class="flex">
+            <div class="col-3">
+              <FormSelectField
+                label="SQL commands case"
+                name="sqlEditor.sqlCommandsCase"
+                isNative
+                defaultValue="upperCase"
+                options={[
+                  { value: 'upperCase', label: 'UPPER CASE' },
+                  { value: 'lowerCase', label: 'lower case' },
+                ]}
+              />
+            </div>
+            <div class="col-3">
+              <FormFieldTemplateLarge label="Editor keybinds" type="combo">
+                <SelectField
+                  isNative
+                  defaultValue="default"
+                  options={EDITOR_KEYBINDINGS_MODES.map(mode => ({ label: mode.label, value: mode.value }))}
+                  value={$currentEditorKeybindigMode}
+                  on:change={e => ($currentEditorKeybindigMode = e.detail)}
+                />
+              </FormFieldTemplateLarge>
+            </div>
+          </div>
         </svelte:fragment>
         <svelte:fragment slot="2">
           <div class="heading">Connection</div>
@@ -220,20 +236,6 @@ ORDER BY
             </div>
           </div>
 
-          <div class="flex">
-            <div class="col-3">
-              <FormFieldTemplateLarge label="Mode" type="combo">
-                <SelectField
-                  isNative
-                  notSelected="(use Default)"
-                  options={EDITOR_KEYBINDINGS_MODES.map(mode => ({ label: mode.label, value: mode.value }))}
-                  value={$currentEditorKeybindigMode}
-                  on:change={e => ($currentEditorKeybindigMode = e.detail)}
-                />
-              </FormFieldTemplateLarge>
-            </div>
-          </div>
-
           <div class="editor">
             <SqlEditor value={sqlPreview} readOnly />
           </div>