Fix issues of CollapseBox in settings pagesv1.0.5-beta.18

8 files changed, 582 insertions, 685 deletions

diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx
index 348d31dd8..91eed1300 100644
--- a/frontend/src/pages/Settings/General/index.tsx
+++ b/frontend/src/pages/Settings/General/index.tsx
@@ -65,24 +65,20 @@ const SettingsGeneralView: FunctionComponent = () => {
         <Message>Reverse proxy support</Message>
       </Section>
       <Section header="Security">
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Selector
-              label="Authentication"
-              clearable
-              options={securityOptions}
-              placeholder="No Authentication"
-              settingKey="settings-auth-type"
-              beforeStaged={(v) => (v === null ? "None" : v)}
-            ></Selector>
-          </CollapseBox.Control>
-          <CollapseBox.Content on={(k) => k !== "" && k !== "None"}>
-            <Text label="Username" settingKey="settings-auth-username"></Text>
-            <Password
-              label="Password"
-              settingKey="settings-auth-password"
-            ></Password>
-          </CollapseBox.Content>
+        <Selector
+          label="Authentication"
+          clearable
+          options={securityOptions}
+          placeholder="No Authentication"
+          settingKey="settings-auth-type"
+          beforeStaged={(v) => (v === null ? "None" : v)}
+        ></Selector>
+        <CollapseBox settingKey="settings-auth-type">
+          <Text label="Username" settingKey="settings-auth-username"></Text>
+          <Password
+            label="Password"
+            settingKey="settings-auth-password"
+          ></Password>
         </CollapseBox>
         <Text
           label="API Key"
@@ -118,38 +114,37 @@ const SettingsGeneralView: FunctionComponent = () => {
         ></Text>
       </Section>
       <Section header="Proxy">
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Selector
-              clearable
-              settingKey="settings-proxy-type"
-              placeholder="No Proxy"
-              options={proxyOptions}
-              beforeStaged={(v) => (v === null ? "None" : v)}
-            ></Selector>
-          </CollapseBox.Control>
-          <CollapseBox.Content on={(k) => k !== "" && k !== "None"}>
-            <Text label="Host" settingKey="settings-proxy-url"></Text>
-            <Number label="Port" settingKey="settings-proxy-port"></Number>
-            <Text label="Username" settingKey="settings-proxy-username"></Text>
-            <Password
-              label="Password"
-              settingKey="settings-proxy-password"
-            ></Password>
-            <Message>
-              You only need to enter a username and password if one is required.
-              Leave them blank otherwise
-            </Message>
-            <Chips
-              label="Ignored Addresses"
-              settingKey="settings-proxy-exclude"
-            ></Chips>
-            <Message>
-              List of excluded domains or IP addresses. Asterisk(wildcard),
-              regex and CIDR are unsupported. You can use '.domain.com' to
-              include all subdomains.
-            </Message>
-          </CollapseBox.Content>
+        <Selector
+          clearable
+          settingKey="settings-proxy-type"
+          placeholder="No Proxy"
+          options={proxyOptions}
+          beforeStaged={(v) => (v === null ? "None" : v)}
+        ></Selector>
+        <CollapseBox
+          settingKey="settings-proxy-type"
+          on={(k) => k !== null && k !== "None"}
+        >
+          <Text label="Host" settingKey="settings-proxy-url"></Text>
+          <Number label="Port" settingKey="settings-proxy-port"></Number>
+          <Text label="Username" settingKey="settings-proxy-username"></Text>
+          <Password
+            label="Password"
+            settingKey="settings-proxy-password"
+          ></Password>
+          <Message>
+            You only need to enter a username and password if one is required.
+            Leave them blank otherwise
+          </Message>
+          <Chips
+            label="Ignored Addresses"
+            settingKey="settings-proxy-exclude"
+          ></Chips>
+          <Message>
+            List of excluded domains or IP addresses. Asterisk(wildcard), regex
+            and CIDR are unsupported. You can use '.domain.com' to include all
+            subdomains.
+          </Message>
         </CollapseBox>
       </Section>
       <Section header="Updates" hidden={!Environment.canUpdate}>
diff --git a/frontend/src/pages/Settings/Languages/index.tsx b/frontend/src/pages/Settings/Languages/index.tsx
index c455fb41b..2fc744588 100644
--- a/frontend/src/pages/Settings/Languages/index.tsx
+++ b/frontend/src/pages/Settings/Languages/index.tsx
@@ -64,41 +64,36 @@ const SettingsLanguagesView: FunctionComponent = () => {
         <Table></Table>
       </Section>
       <Section header="Default Settings">
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Check
-              label="Series"
-              settingKey="settings-general-serie_default_enabled"
-            ></Check>
-            <Message>
-              Apply only to Series added to Bazarr after enabling this option.
-            </Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content indent>
-            <ProfileSelector
-              label="Profile"
-              placeholder="Select a profile"
-              settingKey="settings-general-serie_default_profile"
-            ></ProfileSelector>
-          </CollapseBox.Content>
+        <Check
+          label="Series"
+          settingKey="settings-general-serie_default_enabled"
+        ></Check>
+        <Message>
+          Apply only to Series added to Bazarr after enabling this option.
+        </Message>
+
+        <CollapseBox indent settingKey="settings-general-serie_default_enabled">
+          <ProfileSelector
+            label="Profile"
+            placeholder="Select a profile"
+            settingKey="settings-general-serie_default_profile"
+          ></ProfileSelector>
         </CollapseBox>
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Check
-              label="Movies"
-              settingKey="settings-general-movie_default_enabled"
-            ></Check>
-            <Message>
-              Apply only to Movies added to Bazarr after enabling this option.
-            </Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content indent>
-            <ProfileSelector
-              label="Profile"
-              placeholder="Select a profile"
-              settingKey="settings-general-movie_default_profile"
-            ></ProfileSelector>
-          </CollapseBox.Content>
+
+        <Check
+          label="Movies"
+          settingKey="settings-general-movie_default_enabled"
+        ></Check>
+        <Message>
+          Apply only to Movies added to Bazarr after enabling this option.
+        </Message>
+
+        <CollapseBox indent settingKey="settings-general-movie_default_enabled">
+          <ProfileSelector
+            label="Profile"
+            placeholder="Select a profile"
+            settingKey="settings-general-movie_default_profile"
+          ></ProfileSelector>
         </CollapseBox>
       </Section>
     </Layout>
diff --git a/frontend/src/pages/Settings/Radarr/index.tsx b/frontend/src/pages/Settings/Radarr/index.tsx
index 246ee2f7b..f76cb8dba 100644
--- a/frontend/src/pages/Settings/Radarr/index.tsx
+++ b/frontend/src/pages/Settings/Radarr/index.tsx
@@ -22,71 +22,67 @@ const SettingsRadarrView: FunctionComponent = () => {
 
   return (
     <Layout name="Radarr">
-      <CollapseBox>
-        <CollapseBox.Control>
-          <Section header="Use Radarr">
-            <Check label="Enabled" settingKey={moviesEnabledKey}></Check>
-          </Section>
-        </CollapseBox.Control>
-        <CollapseBox.Content indent={false}>
-          <Section header="Host">
-            <Text label="Address" settingKey="settings-radarr-ip"></Text>
-            <Message>Hostname or IPv4 Address</Message>
-            <Number label="Port" settingKey="settings-radarr-port"></Number>
-            <Text
-              label="Base URL"
-              icon="/"
-              settingKey="settings-radarr-base_url"
-              override={baseUrlOverride}
-              beforeStaged={(v) => "/" + v}
-            ></Text>
-            <Text label="API Key" settingKey="settings-radarr-apikey"></Text>
-            <Check label="SSL" settingKey="settings-radarr-ssl"></Check>
-            <URLTestButton category="radarr"></URLTestButton>
-          </Section>
-          <Section header="Options">
-            <Slider
-              label="Minimum Score"
-              settingKey="settings-general-minimum_score_movie"
-            ></Slider>
-            <Chips
-              label="Excluded Tags"
-              settingKey="settings-radarr-excluded_tags"
-            ></Chips>
-            <Message>
-              Movies with those tags (case sensitive) in Radarr will be excluded
-              from automatic download of subtitles.
-            </Message>
-            <Check
-              label="Download Only Monitored"
-              settingKey="settings-radarr-only_monitored"
-            ></Check>
-            <Message>
-              Automatic download of subtitles will only happen for monitored
-              movies in Radarr.
-            </Message>
+      <Section header="Use Radarr">
+        <Check label="Enabled" settingKey={moviesEnabledKey}></Check>
+      </Section>
+      <CollapseBox settingKey={moviesEnabledKey}>
+        <Section header="Host">
+          <Text label="Address" settingKey="settings-radarr-ip"></Text>
+          <Message>Hostname or IPv4 Address</Message>
+          <Number label="Port" settingKey="settings-radarr-port"></Number>
+          <Text
+            label="Base URL"
+            icon="/"
+            settingKey="settings-radarr-base_url"
+            override={baseUrlOverride}
+            beforeStaged={(v) => "/" + v}
+          ></Text>
+          <Text label="API Key" settingKey="settings-radarr-apikey"></Text>
+          <Check label="SSL" settingKey="settings-radarr-ssl"></Check>
+          <URLTestButton category="radarr"></URLTestButton>
+        </Section>
+        <Section header="Options">
+          <Slider
+            label="Minimum Score"
+            settingKey="settings-general-minimum_score_movie"
+          ></Slider>
+          <Chips
+            label="Excluded Tags"
+            settingKey="settings-radarr-excluded_tags"
+          ></Chips>
+          <Message>
+            Movies with those tags (case sensitive) in Radarr will be excluded
+            from automatic download of subtitles.
+          </Message>
+          <Check
+            label="Download Only Monitored"
+            settingKey="settings-radarr-only_monitored"
+          ></Check>
+          <Message>
+            Automatic download of subtitles will only happen for monitored
+            movies in Radarr.
+          </Message>
 
-            <Check
-              label="Defer searching of subtitles until scheduled task execution"
-              settingKey="settings-radarr-defer_search_signalr"
-            ></Check>
-            <Message>
-              If enabled, this option will prevent Bazarr from searching
-              subtitles as soon as movies are imported.
-            </Message>
-            <Message>
-              Search can be triggered using this command
-              <Code>
-                curl -d "radarr_moviefile_id=$radarr_moviefile_id" -H
-                "x-api-key: ###############################" -X POST
-                http://localhost:6767/api/webhooks/radarr
-              </Code>
-            </Message>
-          </Section>
-          <Section header="Path Mappings">
-            <PathMappingTable type="radarr"></PathMappingTable>
-          </Section>
-        </CollapseBox.Content>
+          <Check
+            label="Defer searching of subtitles until scheduled task execution"
+            settingKey="settings-radarr-defer_search_signalr"
+          ></Check>
+          <Message>
+            If enabled, this option will prevent Bazarr from searching subtitles
+            as soon as movies are imported.
+          </Message>
+          <Message>
+            Search can be triggered using this command
+            <Code>
+              curl -d "radarr_moviefile_id=$radarr_moviefile_id" -H "x-api-key:
+              ###############################" -X POST
+              http://localhost:6767/api/webhooks/radarr
+            </Code>
+          </Message>
+        </Section>
+        <Section header="Path Mappings">
+          <PathMappingTable type="radarr"></PathMappingTable>
+        </Section>
       </CollapseBox>
     </Layout>
   );
diff --git a/frontend/src/pages/Settings/Scheduler/index.tsx b/frontend/src/pages/Settings/Scheduler/index.tsx
index 3575c8f0a..c885f6854 100644
--- a/frontend/src/pages/Settings/Scheduler/index.tsx
+++ b/frontend/src/pages/Settings/Scheduler/index.tsx
@@ -50,70 +50,77 @@ const SettingsSchedulerView: FunctionComponent = () => {
         ></Selector>
       </Section>
       <Section header="Disk Indexing">
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Selector
-              label="Update all Episode Subtitles from Disk"
-              settingKey="settings-sonarr-full_update"
-              options={diskUpdateOptions}
-            ></Selector>
-          </CollapseBox.Control>
-          <CollapseBox.Content on={(k) => k === "Weekly"}>
-            <Selector
-              label="Day of The Week"
-              settingKey="settings-sonarr-full_update_day"
-              options={dayOptions}
-            ></Selector>
-          </CollapseBox.Content>
-          <CollapseBox.Content on={(k) => k === "Daily" || k === "Weekly"}>
-            <Selector
-              label="Time of The Day"
-              settingKey="settings-sonarr-full_update_hour"
-              options={timeOptions}
-            ></Selector>
-          </CollapseBox.Content>
+        <Selector
+          label="Update all Episode Subtitles from Disk"
+          settingKey="settings-sonarr-full_update"
+          options={diskUpdateOptions}
+        ></Selector>
 
-          <Check
-            label="Use cached ffprobe results"
-            settingKey="settings-sonarr-use_ffprobe_cache"
-          ></Check>
-          <Message>
-            If disabled, Bazarr will use ffprobe to index video file properties
-            on each run. This will result in higher disk I/O.
-          </Message>
+        <CollapseBox
+          settingKey="settings-sonarr-full_update"
+          on={(k) => k === "Weekly"}
+        >
+          <Selector
+            label="Day of The Week"
+            settingKey="settings-sonarr-full_update_day"
+            options={dayOptions}
+          ></Selector>
         </CollapseBox>
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Selector
-              label="Update all Movie Subtitles from Disk"
-              settingKey="settings-radarr-full_update"
-              options={diskUpdateOptions}
-            ></Selector>
-          </CollapseBox.Control>
-          <CollapseBox.Content on={(k) => k === "Weekly"}>
-            <Selector
-              label="Day of The Week"
-              settingKey="settings-radarr-full_update_day"
-              options={dayOptions}
-            ></Selector>
-          </CollapseBox.Content>
-          <CollapseBox.Content on={(k) => k === "Daily" || k === "Weekly"}>
-            <Selector
-              label="Time of The Day"
-              settingKey="settings-radarr-full_update_hour"
-              options={timeOptions}
-            ></Selector>
-          </CollapseBox.Content>
+        <CollapseBox
+          settingKey="settings-sonarr-full_update"
+          on={(k) => k === "Daily" || k === "Weekly"}
+        >
+          <Selector
+            label="Time of The Day"
+            settingKey="settings-sonarr-full_update_hour"
+            options={timeOptions}
+          ></Selector>
+        </CollapseBox>
+
+        <Check
+          label="Use cached ffprobe results"
+          settingKey="settings-sonarr-use_ffprobe_cache"
+        ></Check>
+        <Message>
+          If disabled, Bazarr will use ffprobe to index video file properties on
+          each run. This will result in higher disk I/O.
+        </Message>
+
+        <Selector
+          label="Update all Movie Subtitles from Disk"
+          settingKey="settings-radarr-full_update"
+          options={diskUpdateOptions}
+        ></Selector>
 
-          <Check
-            label="Use cached ffprobe results"
-            settingKey="settings-radarr-use_ffprobe_cache"
-          ></Check>
-          <Message>
-            If disabled, Bazarr will use ffprobe to index video file properties
-            on each run. This will result in higher disk I/O.
-          </Message>
+        <CollapseBox
+          settingKey="settings-radarr-full_update"
+          on={(k) => k === "Weekly"}
+        >
+          <Selector
+            label="Day of The Week"
+            settingKey="settings-radarr-full_update_day"
+            options={dayOptions}
+          ></Selector>
         </CollapseBox>
+        <CollapseBox
+          settingKey="settings-radarr-full_update"
+          on={(k) => k === "Daily" || k === "Weekly"}
+        >
+          <Selector
+            label="Time of The Day"
+            settingKey="settings-radarr-full_update_hour"
+            options={timeOptions}
+          ></Selector>
+        </CollapseBox>
+
+        <Check
+          label="Use cached ffprobe results"
+          settingKey="settings-radarr-use_ffprobe_cache"
+        ></Check>
+        <Message>
+          If disabled, Bazarr will use ffprobe to index video file properties on
+          each run. This will result in higher disk I/O.
+        </Message>
       </Section>
       <Section header="Search and Upgrade Subtitles">
         <Selector
@@ -135,28 +142,31 @@ const SettingsSchedulerView: FunctionComponent = () => {
         ></Selector>
       </Section>
       <Section header="Backup">
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Selector
-              label="Backup config and database"
-              settingKey="settings-backup-frequency"
-              options={backupOptions}
-            ></Selector>
-          </CollapseBox.Control>
-          <CollapseBox.Content on={(k) => k === "Weekly"}>
-            <Selector
-              label="Day of The Week"
-              settingKey="settings-backup-day"
-              options={dayOptions}
-            ></Selector>
-          </CollapseBox.Content>
-          <CollapseBox.Content on={(k) => k === "Daily" || k === "Weekly"}>
-            <Selector
-              label="Time of The Day"
-              settingKey="settings-backup-hour"
-              options={timeOptions}
-            ></Selector>
-          </CollapseBox.Content>
+        <Selector
+          label="Backup config and database"
+          settingKey="settings-backup-frequency"
+          options={backupOptions}
+        ></Selector>
+
+        <CollapseBox
+          settingKey="settings-backup-frequency"
+          on={(k) => k === "Weekly"}
+        >
+          <Selector
+            label="Day of The Week"
+            settingKey="settings-backup-day"
+            options={dayOptions}
+          ></Selector>
+        </CollapseBox>
+        <CollapseBox
+          settingKey="settings-backup-frequency"
+          on={(k) => k === "Daily" || k === "Weekly"}
+        >
+          <Selector
+            label="Time of The Day"
+            settingKey="settings-backup-hour"
+            options={timeOptions}
+          ></Selector>
         </CollapseBox>
       </Section>
     </Layout>
diff --git a/frontend/src/pages/Settings/Sonarr/index.tsx b/frontend/src/pages/Settings/Sonarr/index.tsx
index fc951a746..f388dc039 100644
--- a/frontend/src/pages/Settings/Sonarr/index.tsx
+++ b/frontend/src/pages/Settings/Sonarr/index.tsx
@@ -24,88 +24,84 @@ const SettingsSonarrView: FunctionComponent = () => {
 
   return (
     <Layout name="Sonarr">
-      <CollapseBox>
-        <CollapseBox.Control>
-          <Section header="Use Sonarr">
-            <Check label="Enabled" settingKey={seriesEnabledKey}></Check>
-          </Section>
-        </CollapseBox.Control>
-        <CollapseBox.Content indent={false}>
-          <Section header="Host">
-            <Text label="Address" settingKey="settings-sonarr-ip"></Text>
-            <Message>Hostname or IPv4 Address</Message>
-            <Number label="Port" settingKey="settings-sonarr-port"></Number>
-            <Text
-              label="Base URL"
-              icon="/"
-              settingKey="settings-sonarr-base_url"
-              override={baseUrlOverride}
-              beforeStaged={(v) => "/" + v}
-            ></Text>
-            <Text label="API Key" settingKey="settings-sonarr-apikey"></Text>
-            <Check label="SSL" settingKey="settings-sonarr-ssl"></Check>
-            <URLTestButton category="sonarr"></URLTestButton>
-          </Section>
-          <Section header="Options">
-            <Slider
-              label="Minimum Score"
-              settingKey="settings-general-minimum_score"
-            ></Slider>
-            <Chips
-              label="Excluded Tags"
-              settingKey="settings-sonarr-excluded_tags"
-            ></Chips>
-            <Message>
-              Episodes from series with those tags (case sensitive) in Sonarr
-              will be excluded from automatic download of subtitles.
-            </Message>
-            <MultiSelector
-              label="Excluded Series Types"
-              placeholder="Select series types"
-              settingKey="settings-sonarr-excluded_series_types"
-              options={seriesTypeOptions}
-            ></MultiSelector>
-            <Message>
-              Episodes from series with those types in Sonarr will be excluded
-              from automatic download of subtitles.
-            </Message>
-            <Check
-              label="Download Only Monitored"
-              settingKey="settings-sonarr-only_monitored"
-            ></Check>
-            <Message>
-              Automatic download of subtitles will only happen for monitored
-              episodes in Sonarr.
-            </Message>
-            <Check
-              label="Defer searching of subtitles until scheduled task execution"
-              settingKey="settings-sonarr-defer_search_signalr"
-            ></Check>
-            <Message>
-              If enabled, this option will prevent Bazarr from searching
-              subtitles as soon as episodes are imported.
-            </Message>
-            <Message>
-              Search can be triggered using this command
-              <Code>
-                curl -d "sonarr_episodefile_id=$sonarr_episodefile_id" -H
-                "x-api-key: ###############################" -X POST
-                http://localhost:6767/api/webhooks/sonarr
-              </Code>
-            </Message>
-            <Check
-              label="Exclude season zero (extras)"
-              settingKey="settings-sonarr-exclude_season_zero"
-            ></Check>
-            <Message>
-              Episodes from season zero (extras) from automatic download of
-              subtitles.
-            </Message>
-          </Section>
-          <Section header="Path Mappings">
-            <PathMappingTable type="sonarr"></PathMappingTable>
-          </Section>
-        </CollapseBox.Content>
+      <Section header="Use Sonarr">
+        <Check label="Enabled" settingKey={seriesEnabledKey}></Check>
+      </Section>
+      <CollapseBox settingKey={seriesEnabledKey}>
+        <Section header="Host">
+          <Text label="Address" settingKey="settings-sonarr-ip"></Text>
+          <Message>Hostname or IPv4 Address</Message>
+          <Number label="Port" settingKey="settings-sonarr-port"></Number>
+          <Text
+            label="Base URL"
+            icon="/"
+            settingKey="settings-sonarr-base_url"
+            override={baseUrlOverride}
+            beforeStaged={(v) => "/" + v}
+          ></Text>
+          <Text label="API Key" settingKey="settings-sonarr-apikey"></Text>
+          <Check label="SSL" settingKey="settings-sonarr-ssl"></Check>
+          <URLTestButton category="sonarr"></URLTestButton>
+        </Section>
+        <Section header="Options">
+          <Slider
+            label="Minimum Score"
+            settingKey="settings-general-minimum_score"
+          ></Slider>
+          <Chips
+            label="Excluded Tags"
+            settingKey="settings-sonarr-excluded_tags"
+          ></Chips>
+          <Message>
+            Episodes from series with those tags (case sensitive) in Sonarr will
+            be excluded from automatic download of subtitles.
+          </Message>
+          <MultiSelector
+            label="Excluded Series Types"
+            placeholder="Select series types"
+            settingKey="settings-sonarr-excluded_series_types"
+            options={seriesTypeOptions}
+          ></MultiSelector>
+          <Message>
+            Episodes from series with those types in Sonarr will be excluded
+            from automatic download of subtitles.
+          </Message>
+          <Check
+            label="Download Only Monitored"
+            settingKey="settings-sonarr-only_monitored"
+          ></Check>
+          <Message>
+            Automatic download of subtitles will only happen for monitored
+            episodes in Sonarr.
+          </Message>
+          <Check
+            label="Defer searching of subtitles until scheduled task execution"
+            settingKey="settings-sonarr-defer_search_signalr"
+          ></Check>
+          <Message>
+            If enabled, this option will prevent Bazarr from searching subtitles
+            as soon as episodes are imported.
+          </Message>
+          <Message>
+            Search can be triggered using this command
+            <Code>
+              curl -d "sonarr_episodefile_id=$sonarr_episodefile_id" -H
+              "x-api-key: ###############################" -X POST
+              http://localhost:6767/api/webhooks/sonarr
+            </Code>
+          </Message>
+          <Check
+            label="Exclude season zero (extras)"
+            settingKey="settings-sonarr-exclude_season_zero"
+          ></Check>
+          <Message>
+            Episodes from season zero (extras) from automatic download of
+            subtitles.
+          </Message>
+        </Section>
+        <Section header="Path Mappings">
+          <PathMappingTable type="sonarr"></PathMappingTable>
+        </Section>
       </CollapseBox>
     </Layout>
   );
diff --git a/frontend/src/pages/Settings/Subtitles/index.tsx b/frontend/src/pages/Settings/Subtitles/index.tsx
index 73b6517d5..c845c1e36 100644
--- a/frontend/src/pages/Settings/Subtitles/index.tsx
+++ b/frontend/src/pages/Settings/Subtitles/index.tsx
@@ -36,53 +36,47 @@ const SettingsSubtitlesView: FunctionComponent = () => {
   return (
     <Layout name="Subtitles">
       <Section header="Subtitles Options">
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Selector
-              label="Subtitle Folder"
-              options={folderOptions}
-              settingKey="settings-general-subfolder"
-            ></Selector>
-            <Message>
-              Choose the folder you wish to store/read the subtitles
-            </Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content on={(k) => k !== "" && k !== "current"}>
-            <Text
-              label="Custom Subtitles Folder"
-              settingKey="settings-general-subfolder_custom"
-            ></Text>
-          </CollapseBox.Content>
+        <Selector
+          label="Subtitle Folder"
+          options={folderOptions}
+          settingKey="settings-general-subfolder"
+        ></Selector>
+        <Message>
+          Choose the folder you wish to store/read the subtitles
+        </Message>
+        <CollapseBox
+          settingKey="settings-general-subfolder"
+          on={(k) => k !== "" && k !== "current"}
+        >
+          <Text
+            label="Custom Subtitles Folder"
+            settingKey="settings-general-subfolder_custom"
+          ></Text>
         </CollapseBox>
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Check
-              label="Upgrade Previously Downloaded Subtitles"
-              settingKey="settings-general-upgrade_subs"
-            ></Check>
-            <Message>
-              Schedule a task to upgrade subtitles previously downloaded by
-              Bazarr.
-            </Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content>
-            <Slider
-              settingKey="settings-general-days_to_upgrade_subs"
-              max={30}
-              mb="lg"
-            ></Slider>
-            <Message>
-              Number of days to go back in history to upgrade subtitles
-            </Message>
-            <Check
-              label="Upgrade Manually Downloaded or Translated Subtitles"
-              settingKey="settings-general-upgrade_manual"
-            ></Check>
-            <Message>
-              Enable or disable upgrade of manually downloaded or translated
-              subtitles.
-            </Message>
-          </CollapseBox.Content>
+        <Check
+          label="Upgrade Previously Downloaded Subtitles"
+          settingKey="settings-general-upgrade_subs"
+        ></Check>
+        <Message>
+          Schedule a task to upgrade subtitles previously downloaded by Bazarr.
+        </Message>
+        <CollapseBox settingKey="settings-general-upgrade_subs">
+          <Slider
+            settingKey="settings-general-days_to_upgrade_subs"
+            max={30}
+            mb="lg"
+          ></Slider>
+          <Message>
+            Number of days to go back in history to upgrade subtitles
+          </Message>
+          <Check
+            label="Upgrade Manually Downloaded or Translated Subtitles"
+            settingKey="settings-general-upgrade_manual"
+          ></Check>
+          <Message>
+            Enable or disable upgrade of manually downloaded or translated
+            subtitles.
+          </Message>
         </CollapseBox>
         <Selector
           label="Hearing-impaired subtitles extension"
@@ -95,73 +89,71 @@ const SettingsSubtitlesView: FunctionComponent = () => {
         </Message>
       </Section>
       <Section header="Anti-Captcha Options">
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Selector
-              clearable
-              placeholder="Select a provider"
-              settingKey="settings-general-anti_captcha_provider"
-              beforeStaged={(v) => (v === undefined ? "None" : v)}
-              options={antiCaptchaOption}
-            ></Selector>
-            <Message>Choose the anti-captcha provider you want to use</Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content eventKey="anti-captcha">
-            <Anchor href="http://getcaptchasolution.com/eixxo1rsnw">
-              Anti-Captcha.com
-            </Anchor>
-            <Text
-              label="Account Key"
-              settingKey="settings-anticaptcha-anti_captcha_key"
-            ></Text>
-          </CollapseBox.Content>
-          <CollapseBox.Content eventKey="death-by-captcha">
-            <Anchor href="https://www.deathbycaptcha.com">
-              DeathByCaptcha.com
-            </Anchor>
-            <Text
-              label="Username"
-              settingKey="settings-deathbycaptcha-username"
-            ></Text>
-            <Password
-              label="Password"
-              settingKey="settings-deathbycaptcha-password"
-            ></Password>
-          </CollapseBox.Content>
+        <Selector
+          clearable
+          placeholder="Select a provider"
+          settingKey="settings-general-anti_captcha_provider"
+          beforeStaged={(v) => (v === undefined ? "None" : v)}
+          options={antiCaptchaOption}
+        ></Selector>
+        <Message>Choose the anti-captcha provider you want to use</Message>
+        <CollapseBox
+          settingKey="settings-general-anti_captcha_provider"
+          on={(value) => value === "anti-captcha"}
+        >
+          <Anchor href="http://getcaptchasolution.com/eixxo1rsnw">
+            Anti-Captcha.com
+          </Anchor>
+          <Text
+            label="Account Key"
+            settingKey="settings-anticaptcha-anti_captcha_key"
+          ></Text>
+        </CollapseBox>
+        <CollapseBox
+          settingKey="settings-general-anti_captcha_provider"
+          on={(value) => value === "death-by-captcha"}
+        >
+          <Anchor href="https://www.deathbycaptcha.com">
+            DeathByCaptcha.com
+          </Anchor>
+          <Text
+            label="Username"
+            settingKey="settings-deathbycaptcha-username"
+          ></Text>
+          <Password
+            label="Password"
+            settingKey="settings-deathbycaptcha-password"
+          ></Password>
         </CollapseBox>
       </Section>
       <Section header="Performance / Optimization">
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Check
-              label="Adaptive Searching"
-              settingKey="settings-general-adaptive_searching"
-            ></Check>
-            <Message>
-              When searching for subtitles, Bazarr will reduce search frequency
-              to limit call to providers.
-            </Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content>
-            <Selector
-              settingKey="settings-general-adaptive_searching_delay"
-              beforeStaged={(v) => (v === undefined ? "3w" : v)}
-              options={adaptiveSearchingDelayOption}
-            ></Selector>
-            <Message>
-              In order to reduce search frequency, how many weeks must Bazarr
-              wait after initial search.
-            </Message>
-            <Selector
-              settingKey="settings-general-adaptive_searching_delta"
-              beforeStaged={(v) => (v === undefined ? "1w" : v)}
-              options={adaptiveSearchingDeltaOption}
-            ></Selector>
-            <Message>
-              How often should Bazarr search for subtitles when in adaptive
-              search mode.
-            </Message>
-          </CollapseBox.Content>
+        <Check
+          label="Adaptive Searching"
+          settingKey="settings-general-adaptive_searching"
+        ></Check>
+        <Message>
+          When searching for subtitles, Bazarr will reduce search frequency to
+          limit call to providers.
+        </Message>
+        <CollapseBox settingKey="settings-general-adaptive_searching">
+          <Selector
+            settingKey="settings-general-adaptive_searching_delay"
+            beforeStaged={(v) => (v === undefined ? "3w" : v)}
+            options={adaptiveSearchingDelayOption}
+          ></Selector>
+          <Message>
+            In order to reduce search frequency, how many weeks must Bazarr wait
+            after initial search.
+          </Message>
+          <Selector
+            settingKey="settings-general-adaptive_searching_delta"
+            beforeStaged={(v) => (v === undefined ? "1w" : v)}
+            options={adaptiveSearchingDeltaOption}
+          ></Selector>
+          <Message>
+            How often should Bazarr search for subtitles when in adaptive search
+            mode.
+          </Message>
         </CollapseBox>
         <Check
           label="Search Enabled Providers Simultaneously"
@@ -171,48 +163,43 @@ const SettingsSubtitlesView: FunctionComponent = () => {
           Search multiple providers at once (Don't choose this on low powered
           devices)
         </Message>
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Check
-              label="Use Embedded Subtitles"
-              settingKey="settings-general-use_embedded_subs"
-            ></Check>
-            <Message>
-              Use embedded subtitles in media files when determining missing
-              ones.
-            </Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content>
-            <Check
-              label="Ignore Embedded PGS Subtitles"
-              settingKey="settings-general-ignore_pgs_subs"
-            ></Check>
-            <Message>
-              Ignores PGS Subtitles in Embedded Subtitles detection.
-            </Message>
-            <Check
-              label="Ignore Embedded VobSub Subtitles"
-              settingKey="settings-general-ignore_vobsub_subs"
-            ></Check>
-            <Message>
-              Ignores VobSub Subtitles in Embedded Subtitles detection.
-            </Message>
-            <Check
-              label="Ignore Embedded ASS Subtitles"
-              settingKey="settings-general-ignore_ass_subs"
-            ></Check>
-            <Message>
-              Ignores ASS Subtitles in Embedded Subtitles detection.
-            </Message>
-            <Check
-              label="Show Only Desired Languages"
-              settingKey="settings-general-embedded_subs_show_desired"
-            ></Check>
-            <Message>
-              Hide embedded subtitles for languages that are not currently
-              desired.
-            </Message>
-          </CollapseBox.Content>
+        <Check
+          label="Use Embedded Subtitles"
+          settingKey="settings-general-use_embedded_subs"
+        ></Check>
+        <Message>
+          Use embedded subtitles in media files when determining missing ones.
+        </Message>
+        <CollapseBox settingKey="settings-general-use_embedded_subs">
+          <Check
+            label="Ignore Embedded PGS Subtitles"
+            settingKey="settings-general-ignore_pgs_subs"
+          ></Check>
+          <Message>
+            Ignores PGS Subtitles in Embedded Subtitles detection.
+          </Message>
+          <Check
+            label="Ignore Embedded VobSub Subtitles"
+            settingKey="settings-general-ignore_vobsub_subs"
+          ></Check>
+          <Message>
+            Ignores VobSub Subtitles in Embedded Subtitles detection.
+          </Message>
+          <Check
+            label="Ignore Embedded ASS Subtitles"
+            settingKey="settings-general-ignore_ass_subs"
+          ></Check>
+          <Message>
+            Ignores ASS Subtitles in Embedded Subtitles detection.
+          </Message>
+          <Check
+            label="Show Only Desired Languages"
+            settingKey="settings-general-embedded_subs_show_desired"
+          ></Check>
+          <Message>
+            Hide embedded subtitles for languages that are not currently
+            desired.
+          </Message>
         </CollapseBox>
       </Section>
       <Section header="Post-Processing">
@@ -288,159 +275,130 @@ const SettingsSubtitlesView: FunctionComponent = () => {
           Reverses the punctuation in right-to-left subtitles for problematic
           playback devices.
         </Message>
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Check
-              label="Permission (chmod)"
-              settingKey="settings-general-chmod_enabled"
-            ></Check>
-          </CollapseBox.Control>
-          <CollapseBox.Content>
-            <Text placeholder="0777" settingKey="settings-general-chmod"></Text>
-            <Message>Must be 4 digit octal</Message>
-          </CollapseBox.Content>
+        <Check
+          label="Permission (chmod)"
+          settingKey="settings-general-chmod_enabled"
+        ></Check>
+        <CollapseBox settingKey="settings-general-chmod_enabled">
+          <Text placeholder="0777" settingKey="settings-general-chmod"></Text>
+          <Message>Must be 4 digit octal</Message>
         </CollapseBox>
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Check
-              label="Automatic Subtitles Synchronization"
-              settingKey="settings-subsync-use_subsync"
-            ></Check>
-            <Message>
-              Enable the automatic subtitles synchronization after downloading a
-              subtitles.
-            </Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content>
-            <Check label="Debug" settingKey="settings-subsync-debug"></Check>
-            <Message>
-              Do not actually sync the subtitles but generate a .tar.gz file to
-              be able to open an issue for ffsubsync. This file will reside
-              alongside the media file.
-            </Message>
-            <CollapseBox>
-              <CollapseBox.Control>
-                <Check
-                  label="Series Score Threshold"
-                  settingKey="settings-subsync-use_subsync_threshold"
-                ></Check>
-              </CollapseBox.Control>
-              <CollapseBox.Content indent={false}>
-                <Slider settingKey="settings-subsync-subsync_threshold"></Slider>
-              </CollapseBox.Content>
-            </CollapseBox>
-            <CollapseBox>
-              <CollapseBox.Control>
-                <Check
-                  label="Movies Score Threshold"
-                  settingKey="settings-subsync-use_subsync_movie_threshold"
-                ></Check>
-              </CollapseBox.Control>
-              <CollapseBox.Content indent={false}>
-                <Slider settingKey="settings-subsync-subsync_movie_threshold"></Slider>
-              </CollapseBox.Content>
-            </CollapseBox>
-          </CollapseBox.Content>
+        <Check
+          label="Automatic Subtitles Synchronization"
+          settingKey="settings-subsync-use_subsync"
+        ></Check>
+        <Message>
+          Enable the automatic subtitles synchronization after downloading a
+          subtitles.
+        </Message>
+        <CollapseBox settingKey="settings-subsync-use_subsync">
+          <Check label="Debug" settingKey="settings-subsync-debug"></Check>
+          <Message>
+            Do not actually sync the subtitles but generate a .tar.gz file to be
+            able to open an issue for ffsubsync. This file will reside alongside
+            the media file.
+          </Message>
+          <Check
+            label="Series Score Threshold"
+            settingKey="settings-subsync-use_subsync_threshold"
+          ></Check>
+          <CollapseBox settingKey="settings-subsync-use_subsync_threshold">
+            <Slider settingKey="settings-subsync-subsync_threshold"></Slider>
+          </CollapseBox>
+          <Check
+            label="Movies Score Threshold"
+            settingKey="settings-subsync-use_subsync_movie_threshold"
+          ></Check>
+          <CollapseBox settingKey="settings-subsync-use_subsync_movie_threshold">
+            <Slider settingKey="settings-subsync-subsync_movie_threshold"></Slider>
+          </CollapseBox>
         </CollapseBox>
-        <CollapseBox>
-          <CollapseBox.Control>
-            <Check
-              settingKey="settings-general-use_postprocessing"
-              label="Custom Post-Processing"
-            ></Check>
-            <Message>
-              Enable the post-processing execution after downloading a
-              subtitles.
-            </Message>
-          </CollapseBox.Control>
-          <CollapseBox.Content>
-            <CollapseBox>
-              <CollapseBox.Control>
-                <Check
-                  settingKey="settings-general-use_postprocessing_threshold"
-                  label="Series Score Threshold"
-                ></Check>
-              </CollapseBox.Control>
-              <CollapseBox.Content indent={false}>
-                <Slider settingKey="settings-general-postprocessing_threshold"></Slider>
-              </CollapseBox.Content>
-            </CollapseBox>
-            <CollapseBox>
-              <CollapseBox.Control>
-                <Check
-                  settingKey="settings-general-use_postprocessing_threshold_movie"
-                  label="Movies Score Threshold"
-                ></Check>
-              </CollapseBox.Control>
-              <CollapseBox.Content indent={false}>
-                <Slider settingKey="settings-general-postprocessing_threshold_movie"></Slider>
-              </CollapseBox.Content>
-            </CollapseBox>
-            <Text
-              label="Command"
-              settingKey="settings-general-postprocessing_cmd"
-            ></Text>
-            <Message>Variables you can use in your command</Message>
-            <Message>
-              <b>{"{{directory}}"}</b> Full path of the episode file parent
-              directory
-            </Message>
-            <Message>
-              <b>{"{{episode}}"}</b> Full path of the episode file
-            </Message>
-            <Message>
-              <b>{"{{episode_name}}"}</b> Filename of the episode without parent
-              directory or extension
-            </Message>
-            <Message>
-              <b>{"{{subtitles}}"}</b> Full path of the subtitles file
-            </Message>
-            <Message>
-              <b>{"{{subtitles_language}}"}</b> Language of the subtitles file
-              (may include HI or forced)
-            </Message>
-            <Message>
-              <b>{"{{subtitles_language_code2}}"}</b> 2-letter ISO-639 language
-              code of the subtitles language (may include :hi or :forced)
-            </Message>
-            <Message>
-              <b>{"{{subtitles_language_code2_dot}}"}</b> 2-letter ISO-639
-              language code of the subtitles language (same as previous but with
-              dot separator instead of colon)
-            </Message>
-            <Message>
-              <b>{"{{subtitles_language_code3}}"}</b> 3-letter ISO-639 language
-              code of the subtitles language (may include :hi or :forced)
-            </Message>
-            <Message>
-              <b>{"{{subtitles_language_code3_dot}}"}</b> 3-letter ISO-639
-              language code of the subtitles language (same as previous but with
-              dot separator instead of colon)
-            </Message>
-            <Message>
-              <b>{"{{episode_language}}"}</b> Audio language of the episode file
-            </Message>
-            <Message>
-              <b>{"{{episode_language_code2}}"}</b> 2-letter ISO-639 language
-              code of the episode audio language
-            </Message>
-            <Message>
-              <b>{"{{episode_language_code3}}"}</b> 3-letter ISO-639 language
-              code of the episode audio language
-            </Message>
-            <Message>
-              <b>{"{{score}}"}</b> Score of the subtitle file
-            </Message>
-            <Message>
-              <b>{"{{subtitle_id}}"}</b> Provider ID of the subtitle file
-            </Message>
-            <Message>
-              <b>{"{{series_id}}"}</b> Sonarr series ID (Empty if movie)
-            </Message>
-            <Message>
-              <b>{"{{episode_id}}"}</b> Sonarr episode ID or Radarr movie ID
-            </Message>
-          </CollapseBox.Content>
+        <Check
+          settingKey="settings-general-use_postprocessing"
+          label="Custom Post-Processing"
+        ></Check>
+        <Message>
+          Enable the post-processing execution after downloading a subtitles.
+        </Message>
+        <CollapseBox settingKey="settings-general-use_postprocessing">
+          <Check
+            settingKey="settings-general-use_postprocessing_threshold"
+            label="Series Score Threshold"
+          ></Check>
+          <CollapseBox settingKey="settings-general-use_postprocessing">
+            <Slider settingKey="settings-general-postprocessing_threshold"></Slider>
+          </CollapseBox>
+          <Check
+            settingKey="settings-general-use_postprocessing_threshold_movie"
+            label="Movies Score Threshold"
+          ></Check>
+          <CollapseBox settingKey="settings-general-use_postprocessing_threshold_movie">
+            <Slider settingKey="settings-general-postprocessing_threshold_movie"></Slider>
+          </CollapseBox>
+          <Text
+            label="Command"
+            settingKey="settings-general-postprocessing_cmd"
+          ></Text>
+          <Message>Variables you can use in your command</Message>
+          <Message>
+            <b>{"{{directory}}"}</b> Full path of the episode file parent
+            directory
+          </Message>
+          <Message>
+            <b>{"{{episode}}"}</b> Full path of the episode file
+          </Message>
+          <Message>
+            <b>{"{{episode_name}}"}</b> Filename of the episode without parent
+            directory or extension
+          </Message>
+          <Message>
+            <b>{"{{subtitles}}"}</b> Full path of the subtitles file
+          </Message>
+          <Message>
+            <b>{"{{subtitles_language}}"}</b> Language of the subtitles file
+            (may include HI or forced)
+          </Message>
+          <Message>
+            <b>{"{{subtitles_language_code2}}"}</b> 2-letter ISO-639 language
+            code of the subtitles language (may include :hi or :forced)
+          </Message>
+          <Message>
+            <b>{"{{subtitles_language_code2_dot}}"}</b> 2-letter ISO-639
+            language code of the subtitles language (same as previous but with
+            dot separator instead of colon)
+          </Message>
+          <Message>
+            <b>{"{{subtitles_language_code3}}"}</b> 3-letter ISO-639 language
+            code of the subtitles language (may include :hi or :forced)
+          </Message>
+          <Message>
+            <b>{"{{subtitles_language_code3_dot}}"}</b> 3-letter ISO-639
+            language code of the subtitles language (same as previous but with
+            dot separator instead of colon)
+          </Message>
+          <Message>
+            <b>{"{{episode_language}}"}</b> Audio language of the episode file
+          </Message>
+          <Message>
+            <b>{"{{episode_language_code2}}"}</b> 2-letter ISO-639 language code
+            of the episode audio language
+          </Message>
+          <Message>
+            <b>{"{{episode_language_code3}}"}</b> 3-letter ISO-639 language code
+            of the episode audio language
+          </Message>
+          <Message>
+            <b>{"{{score}}"}</b> Score of the subtitle file
+          </Message>
+          <Message>
+            <b>{"{{subtitle_id}}"}</b> Provider ID of the subtitle file
+          </Message>
+          <Message>
+            <b>{"{{series_id}}"}</b> Sonarr series ID (Empty if movie)
+          </Message>
+          <Message>
+            <b>{"{{episode_id}}"}</b> Sonarr episode ID or Radarr movie ID
+          </Message>
         </CollapseBox>
       </Section>
     </Layout>
diff --git a/frontend/src/pages/Settings/components/collapse.tsx b/frontend/src/pages/Settings/components/collapse.tsx
index 1296e44b2..c47b94e06 100644
--- a/frontend/src/pages/Settings/components/collapse.tsx
+++ b/frontend/src/pages/Settings/components/collapse.tsx
@@ -1,75 +1,31 @@
 import { Collapse } from "@mantine/core";
-import {
-  createContext,
-  Dispatch,
-  FunctionComponent,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
-
-type SupportType = string | boolean;
-
-const CollapseContext = createContext<
-  [SupportType, Dispatch<SupportType> | undefined]
->([false, undefined]);
-
-const CollapseUpdateContext = createContext<Dispatch<SupportType> | undefined>(
-  undefined
-);
-
-export function useCollapse() {
-  return useContext(CollapseUpdateContext);
-}
-
-interface CollapseBoxType {
-  Control: typeof CollapseBoxControl;
-  Content: typeof CollapseBoxContent;
-}
-
-const CollapseBox: CollapseBoxType & FunctionComponent = ({ children }) => {
-  const state = useState<boolean | string>(false);
-
-  return (
-    <CollapseContext.Provider value={state}>
-      {children}
-    </CollapseContext.Provider>
-  );
-};
-
-const CollapseBoxControl: FunctionComponent = ({ children }) => {
-  const context = useContext(CollapseContext);
-  return (
-    <CollapseUpdateContext.Provider value={context[1]}>
-      {children}
-    </CollapseUpdateContext.Provider>
-  );
-};
+import { FunctionComponent, useMemo, useRef } from "react";
+import { useSettingValue } from "./hooks";
 
 interface ContentProps {
-  on?: (k: string) => boolean;
-  eventKey?: string;
+  settingKey: string;
+  on?: (k: unknown) => boolean;
   indent?: boolean;
-  children: JSX.Element | JSX.Element[];
 }
 
-const CollapseBoxContent: FunctionComponent<ContentProps> = ({
+const CollapseBox: FunctionComponent<ContentProps> = ({
   on,
-  eventKey,
   indent,
   children,
+  settingKey,
 }) => {
-  const [value] = useContext(CollapseContext);
+  const value = useSettingValue(settingKey);
 
-  const open = useMemo(() => {
-    if (on && typeof value === "string") {
-      return on(value);
-    } else if (eventKey) {
-      return value === eventKey;
+  const onRef = useRef(on);
+  onRef.current = on;
+
+  const open = useMemo<boolean>(() => {
+    if (onRef.current) {
+      return onRef.current(value);
     } else {
-      return value === true;
+      return Boolean(value);
     }
-  }, [on, value, eventKey]);
+  }, [value]);
 
   return (
     <Collapse in={open} pl={indent ? "md" : undefined}>
@@ -78,7 +34,4 @@ const CollapseBoxContent: FunctionComponent<ContentProps> = ({
   );
 };
 
-CollapseBox.Control = CollapseBoxControl;
-CollapseBox.Content = CollapseBoxContent;
-
 export default CollapseBox;
diff --git a/frontend/src/pages/Settings/components/forms.tsx b/frontend/src/pages/Settings/components/forms.tsx
index fac10a946..e0d880db9 100644
--- a/frontend/src/pages/Settings/components/forms.tsx
+++ b/frontend/src/pages/Settings/components/forms.tsx
@@ -22,8 +22,8 @@ import {
   TextInput,
   TextInputProps,
 } from "@mantine/core";
-import { FunctionComponent, ReactText, useCallback, useEffect } from "react";
-import { useCollapse, useSettingValue } from ".";
+import { FunctionComponent, ReactText, useCallback } from "react";
+import { useSettingValue } from ".";
 import { FormKey, useFormActions } from "../utilities/FormValues";
 import { OverrideFuncType } from "./hooks";
 
@@ -71,15 +71,12 @@ export const Text: FunctionComponent<TextProps> = ({
   const value = useSettingValue<ReactText>(settingKey, override);
   const { setValue } = useFormActions();
 
-  const collapse = useCollapse();
-
   return (
     <TextInput
       {...props}
       value={value ?? undefined}
       onChange={(e) => {
         const val = e.currentTarget.value;
-        collapse && collapse(val.toString());
         const value = beforeStaged ? beforeStaged(val) : val;
         setValue(value, settingKey, location);
       }}
@@ -124,12 +121,9 @@ export const Check: FunctionComponent<CheckProps> = ({
   settingKey,
   location,
 }) => {
-  const collapse = useCollapse();
   const value = useSettingValue<boolean>(settingKey, override);
   const { setValue } = useFormActions();
 
-  useEffect(() => collapse && collapse(value ?? false), [collapse, value]);
-
   return (
     <Switch
       id={settingKey}