refactor: clarify show notifications setting (#948)

Author: setchy

src/routes/Settings.test.tsx

@@ -203,7 +203,7 @@ describe('routes/Settings.tsx', () => {
       getByLabelText = getByLabelTextLocal;
     });
 
-    fireEvent.click(getByLabelText('Show notifications'), {
+    fireEvent.click(getByLabelText('Show system notifications'), {
       target: { checked: true },
     });
 

src/routes/Settings.tsx

@@ -148,15 +148,6 @@ export const SettingsRoute: React.FC = () => {
               updateSetting('participating', evt.target.checked)
             }
           />
-
-          <FieldCheckbox
-            name="showNotifications"
-            label="Show notifications"
-            checked={settings.showNotifications}
-            onChange={(evt) =>
-              updateSetting('showNotifications', evt.target.checked)
-            }
-          />
           <FieldCheckbox
             name="showBots"
             label="Show notifications from Bot accounts"
@@ -177,6 +168,14 @@ export const SettingsRoute: React.FC = () => {
           <legend id="system" className="font-semibold  mt-2 mb-1">
             System
           </legend>
+          <FieldCheckbox
+            name="showNotifications"
+            label="Show system notifications"
+            checked={settings.showNotifications}
+            onChange={(evt) =>
+              updateSetting('showNotifications', evt.target.checked)
+            }
+          />
           <FieldCheckbox
             name="playSound"
             label="Play sound"

src/routes/__snapshots__/Settings.test.tsx.snap

@@ -212,7 +212,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           <input
             checked=""
             class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="showNotifications"
+            id="showBots"
             type="checkbox"
           />
         </div>
@@ -221,9 +221,9 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         >
           <label
             class="font-medium text-gray-700 dark:text-gray-200"
-            for="showNotifications"
+            for="showBots"
           >
-            Show notifications
+            Show notifications from Bot accounts
           </label>
         </div>
       </div>
@@ -234,9 +234,8 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           class="flex items-center h-5"
         >
           <input
-            checked=""
             class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="showBots"
+            id="markAsDoneOnOpen"
             type="checkbox"
           />
         </div>
@@ -245,21 +244,32 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         >
           <label
             class="font-medium text-gray-700 dark:text-gray-200"
-            for="showBots"
+            for="markAsDoneOnOpen"
           >
-            Show notifications from Bot accounts
+            Mark as done on open
           </label>
         </div>
       </div>
+    </fieldset>
+    <fieldset
+      class="mb-3"
+    >
+      <legend
+        class="font-semibold  mt-2 mb-1"
+        id="system"
+      >
+        System
+      </legend>
       <div
         class="flex items-start mt-1 mb-3"
       >
         <div
           class="flex items-center h-5"
         >
           <input
+            checked=""
             class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-            id="markAsDoneOnOpen"
+            id="showNotifications"
             type="checkbox"
           />
         </div>
@@ -268,22 +278,12 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         >
           <label
             class="font-medium text-gray-700 dark:text-gray-200"
-            for="markAsDoneOnOpen"
+            for="showNotifications"
           >
-            Mark as done on open
+            Show system notifications
           </label>
         </div>
       </div>
-    </fieldset>
-    <fieldset
-      class="mb-3"
-    >
-      <legend
-        class="font-semibold  mt-2 mb-1"
-        id="system"
-      >
-        System
-      </legend>
       <div
         class="flex items-start mt-1 mb-3"
       >