From 53e621ba53696c53cfa37d0cecc6071498fcd53a Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Sun, 25 Aug 2024 22:58:31 +0200
Subject: [PATCH] reorganise settings

---
 client/src/Popups/Settings.tsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/src/Popups/Settings.tsx b/client/src/Popups/Settings.tsx
index 11aa6c87..019f2ec3 100644
--- a/client/src/Popups/Settings.tsx
+++ b/client/src/Popups/Settings.tsx
@@ -70,15 +70,26 @@ const SettingsPopup: FC<{
         </select>
       </p>
 
-      <h2>User settings</h2>
-      <p><i>These settings are not preserved unless you opt-in to save them.</i></p>
+      <h2>Editor settings</h2>
       <p>
         <label htmlFor="abbreviationCharacter">Lead character to trigger unicode input mode</label>
         <input id="abbreviationCharacter" type="text"
           onChange={(ev) => {modifyPreferences("abbreviationCharacter", ev.target.value)}}
           value={preferences.abbreviationCharacter} />
       </p>
-      <p className="flex">
+      <p>
+        <Switch id="wordWrap" onChange={() => {modifyPreferences("wordWrap", !preferences.wordWrap)}}
+        checked={preferences.wordWrap} />
+        <label htmlFor="wordWrap">Wrap code</label>
+      </p>
+      <p>
+        <Switch id="acceptSuggestionOnEnter" onChange={() => {modifyPreferences("acceptSuggestionOnEnter", !preferences.acceptSuggestionOnEnter)}}
+        checked={preferences.acceptSuggestionOnEnter} />
+        <label htmlFor="acceptSuggestionOnEnter">Accept Suggestion on Enter</label>
+      </p>
+
+      <h2>User settings</h2>
+      <p>
         <label htmlFor="theme">Theme: </label>
         <select
             id="theme"
@@ -109,16 +120,9 @@ const SettingsPopup: FC<{
         checked={preferences.compress} />
         <label htmlFor="compress">Compress code in URL (if shorter)</label>
       </p>
-      <p>
-        <Switch id="wordWrap" onChange={() => {modifyPreferences("wordWrap", !preferences.wordWrap)}}
-        checked={preferences.wordWrap} />
-        <label htmlFor="wordWrap">Wrap code</label>
-      </p>
-      <p>
-        <Switch id="acceptSuggestionOnEnter" onChange={() => {modifyPreferences("acceptSuggestionOnEnter", !preferences.acceptSuggestionOnEnter)}}
-        checked={preferences.acceptSuggestionOnEnter} />
-        <label htmlFor="acceptSuggestionOnEnter">Accept Suggestion on Enter</label>
-      </p>
+
+      <h2>Save</h2>
+      <p><i>Editor settings and User settings are not preserved unless you opt-in to save them.</i></p>
       <p>
         <Switch id="savingAllowed" onChange={() => {modifyPreferences("saveInLocalStore", !preferences.saveInLocalStore)}} checked={preferences.saveInLocalStore} />
         <label htmlFor="savingAllowed">Save my settings (in the browser store)</label>