reorganise settings and add collapsing

index.tsx

@@ -1,3 +1,5 @@
+import "./style.css";
+
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
@@ -110,11 +112,20 @@ function InputDeviceComponent() {
 }
 
 function VoiceSettings() {
+    const [showSettings, setShowSettings] = useState(Settings.plugins.VCPanelSettings.uncollapseSettingsByDefault);
     return <div style={{ marginTop: "20px" }}>
-        {Settings.plugins.VCPanelSettings.outputVolume && <OutputVolumeComponent />}
+        <div style={{ marginBottom: "10px" }}>
-        {Settings.plugins.VCPanelSettings.inputVolume && <InputVolumeComponent />}
+            <Link className="vc-panelsettings-underline-on-hover" style={{ color: "var(--header-secondary)" }} onClick={() => { setShowSettings(!showSettings); }}>{!showSettings ? "► Settings" : "▼ Hide"}</Link>
-        {Settings.plugins.VCPanelSettings.outputDevice && <OutputDeviceComponent />}
+        </div>
-        {Settings.plugins.VCPanelSettings.inputDevice && <InputDeviceComponent />}
+
+        {
+            showSettings && <>
+                {Settings.plugins.VCPanelSettings.outputVolume && <OutputVolumeComponent />}
+                {Settings.plugins.VCPanelSettings.inputVolume && <InputVolumeComponent />}
+                {Settings.plugins.VCPanelSettings.outputDevice && <OutputDeviceComponent />}
+                {Settings.plugins.VCPanelSettings.inputDevice && <InputDeviceComponent />}
+            </>
+        }
     </div>;
 }
 
@@ -123,46 +134,67 @@ export default definePlugin({
     description: "Control voice settings right from the voice panel",
     authors: [Devs.nin0dev],
     settings: definePluginSettings({
-        showOutputVolumeHeader: {
+        title1: {
+            type: OptionType.COMPONENT,
+            component: () => <Text style={{ fontWeight: "bold", fontSize: "1.27rem" }}>Appearance</Text>,
+            description: ""
+        },
+        uncollapseSettingsByDefault: {
             type: OptionType.BOOLEAN,
-            default: true,
+            default: false,
-            description: "Show header above output volume slider"
+            description: "Automatically uncollapse voice settings by default"
+        },
+        title2: {
+            type: OptionType.COMPONENT,
+            component: () => <Text style={{ fontWeight: "bold", fontSize: "1.27rem" }}>Settings to show</Text>,
+            description: ""
         },
         outputVolume: {
             type: OptionType.BOOLEAN,
             default: true,
             description: "Show an output volume slider"
         },
-        showInputVolumeHeader: {
-            type: OptionType.BOOLEAN,
-            default: true,
-            description: "Show header above input volume slider"
-        },
         inputVolume: {
             type: OptionType.BOOLEAN,
             default: true,
             description: "Show an input volume slider"
         },
-        showOutputDeviceHeader: {
-            type: OptionType.BOOLEAN,
-            default: false,
-            description: "Show header above output device slider"
-        },
         outputDevice: {
             type: OptionType.BOOLEAN,
             default: true,
             description: "Show an output device selector"
         },
+
+        inputDevice: {
+            type: OptionType.BOOLEAN,
+            default: true,
+            description: "Show an input device selector"
+        },
+        title3: {
+            type: OptionType.COMPONENT,
+            component: () => <Text style={{ fontWeight: "bold", fontSize: "1.27rem" }}>Headers to show</Text>,
+            description: ""
+        },
+        showOutputVolumeHeader: {
+            type: OptionType.BOOLEAN,
+            default: true,
+            description: "Show header above output volume slider"
+        },
+        showInputVolumeHeader: {
+            type: OptionType.BOOLEAN,
+            default: true,
+            description: "Show header above input volume slider"
+        },
+        showOutputDeviceHeader: {
+            type: OptionType.BOOLEAN,
+            default: false,
+            description: "Show header above output device slider"
+        },
         showInputDeviceHeader: {
             type: OptionType.BOOLEAN,
             default: false,
             description: "Show header above input device slider"
         },
-        inputDevice: {
-            type: OptionType.BOOLEAN,
-            default: true,
-            description: "Show an input device selector"
-        }
     }),
     renderVoiceSettings() { return <VoiceSettings />; },
     patches: [

style.css

@@ -0,0 +1,3 @@
+.vc-panelsettings-underline-on-hover:hover {
+    text-decoration: underline;
+}