refactor(filters): sort sections by title (#2354)

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/components/filters/FilterSection.tsx

@@ -53,31 +53,42 @@ export const FilterSection = <T extends FilterValue>({
         direction={layout}
         gap={layout === 'horizontal' ? 'normal' : 'condensed'}
       >
-        {(Object.keys(filter.FILTER_TYPES) as T[]).map((type) => {
-          const typeDetails = filter.getTypeDetails(type);
-          const typeTitle = typeDetails.title;
-          const typeDescription = typeDetails.description;
-          const isChecked = filter.isFilterSet(settings, type);
-          const count = filter.getFilterCount(notifications, type);
+        {(Object.keys(filter.FILTER_TYPES) as T[])
+          .sort((a, b) =>
+            filter
+              .getTypeDetails(a)
+              .title.toLocaleLowerCase()
+              .localeCompare(
+                filter.getTypeDetails(b).title.toLocaleLowerCase(),
+              ),
+          )
+          .map((type) => {
+            const typeDetails = filter.getTypeDetails(type);
+            const typeTitle = typeDetails.title;
+            const typeDescription = typeDetails.description;
+            const isChecked = filter.isFilterSet(settings, type);
+            const count = filter.getFilterCount(notifications, type);
 
-          return (
-            <Checkbox
-              checked={isChecked}
-              counter={count}
-              disabled={
-                filter.requiresDetailsNotifications &&
-                !settings.detailedNotifications
-              }
-              key={type as string}
-              label={typeTitle}
-              name={typeTitle}
-              onChange={(evt) =>
-                updateFilter(filterSetting, type, evt.target.checked)
-              }
-              tooltip={typeDescription ? <Text>{typeDescription}</Text> : null}
-            />
-          );
-        })}
+            return (
+              <Checkbox
+                checked={isChecked}
+                counter={count}
+                disabled={
+                  filter.requiresDetailsNotifications &&
+                  !settings.detailedNotifications
+                }
+                key={type as string}
+                label={typeTitle}
+                name={typeTitle}
+                onChange={(evt) =>
+                  updateFilter(filterSetting, type, evt.target.checked)
+                }
+                tooltip={
+                  typeDescription ? <Text>{typeDescription}</Text> : null
+                }
+              />
+            );
+          })}
       </Stack>
     </fieldset>
   );