Add "visible" option to mod settings sections (partially addresses #31)

src/bridge/ModConfig.d.ts

@@ -69,6 +69,11 @@ export interface ModConfigBase {
    * The unique identifier of the configuration element.
    */
   id: string;
+
+  /**
+   * Determines if the field is visible or not.
+   */
+  visible?: Binding<boolean>;
 }
 
 /**
@@ -110,11 +115,6 @@ export interface ModConfigFieldBase extends ModConfigBase {
    * The name of the field.
    */
   name: string;
-
-  /**
-   * Determines if the field is visible or not.
-   */
-  visible?: Binding<boolean>;
 }
 
 /**

src/renderer/react/settings/ModSettingsSection.tsx

@@ -4,6 +4,7 @@ import type {
   ModConfigFieldOrSection,
   ModConfigSection,
 } from 'bridge/ModConfig';
+import { parseBinding } from 'renderer/react/BindingsParser';
 import { useSetModConfig } from 'renderer/react/context/ModsContext';
 import ModSettingsField from 'renderer/react/settings/ModSettingsField';
 import { MouseEvent, useCallback } from 'react';
@@ -93,8 +94,13 @@ export default function ModSettingsSection({
     [descendants, mod.config, mod.id, setModConfig],
   );
 
+  const isShown =
+    section.visible == null ||
+    parseBinding<boolean>(section.visible, mod.config);
+
   const areAllDescendantsCheckboxes =
-    descendants.every((child) => child.type === 'checkbox') ?? false;
+    descendants.length > 0 &&
+    (descendants.every((child) => child.type === 'checkbox') ?? false);
 
   const areAllDescendantsChecked =
     areAllDescendantsCheckboxes &&
@@ -118,6 +124,10 @@ export default function ModSettingsSection({
     [setModConfig, mod.id, mod.config, descendants, areAllDescendantsChecked],
   );
 
+  if (!isShown) {
+    return null;
+  }
+
   return (
     <StyledAccordion
       key={section.id ?? 'default'}