Refactor settings fix

app/components-react/windows/Settings.tsx

@@ -46,7 +46,10 @@ export const SETTINGS_CONFIG: Record<ESettingsCategory, ISettingsConfig> = {
   },
   [ESettingsCategory.Advanced]: { icon: 'fas fa-cogs', component: pages.AdvancedSettings },
   [ESettingsCategory.Developer]: { icon: 'far fa-file-code', component: pages.DeveloperSettings },
-  [ESettingsCategory.SceneCollections]: { icon: 'icon-themes', component: pages.OverlaySettings },
+  [ESettingsCategory.SceneCollections]: {
+    icon: 'icon-themes',
+    component: pages.SceneCollectionsSettings,
+  },
   [ESettingsCategory.Notifications]: {
     icon: 'icon-notifications',
     component: pages.NotificationSettings,
@@ -62,8 +65,6 @@ export const SETTINGS_CONFIG: Record<ESettingsCategory, ISettingsConfig> = {
   [ESettingsCategory.GetSupport]: { icon: 'icon-question', component: pages.Support },
   [ESettingsCategory.AI]: { icon: 'icon-ai', component: pages.AISettings },
   [ESettingsCategory.Ultra]: { icon: 'icon-ultra', component: pages.Ultra },
-  // This isn't shown but is required for TS
-  [ESettingsCategory.StreamSecond]: { icon: '', component: () => <></> },
 };
 
 export default function Settings() {

app/components-react/windows/settings/Developer.tsx

@@ -182,42 +182,46 @@ export function DualOutputDeveloperSettings(p: { collection?: string }) {
       </span>
       <div>
         <h4>{$t('Convert to Vanilla Scene')}</h4>
-        <Button
-          className="button--soft-warning"
-          style={{ marginRight: '16px' }}
-          onClick={() => convertDualOutputCollection()}
-          disabled={busy}
-        >
-          {$t('Convert')}
-        </Button>
-        {!p.collection && (
+        <div style={{ display: 'flex', justifyContent: 'space-evenly', paddingBottom: '16px' }}>
           <Button
             className="button--soft-warning"
-            onClick={() => convertDualOutputCollection(false, true)}
+            style={{ marginRight: '16px' }}
+            onClick={() => convertDualOutputCollection()}
             disabled={busy}
           >
-            {$t('Convert and Export Overlay')}
+            {$t('Convert')}
           </Button>
-        )}
+          {!p.collection && (
+            <Button
+              className="button--soft-warning"
+              onClick={() => convertDualOutputCollection(false, true)}
+              disabled={busy}
+            >
+              {$t('Convert and Export Overlay')}
+            </Button>
+          )}
+        </div>
       </div>
       {!p.collection && (
         <div style={{ marginTop: '10px' }}>
           <h4>{$t('Assign Vertical Sources to Horizontal Display')}</h4>
-          <Button
-            className="button--soft-warning"
-            style={{ marginRight: '16px' }}
-            onClick={() => convertDualOutputCollection(true)}
-            disabled={busy}
-          >
-            {$t('Assign')}
-          </Button>
-          <Button
-            className="button--soft-warning"
-            onClick={() => convertDualOutputCollection(true, true)}
-            disabled={busy}
-          >
-            {$t('Assign and Export Overlay')}
-          </Button>
+          <div style={{ display: 'flex', justifyContent: 'space-evenly', paddingBottom: '16px' }}>
+            <Button
+              className="button--soft-warning"
+              style={{ marginRight: '16px' }}
+              onClick={() => convertDualOutputCollection(true)}
+              disabled={busy}
+            >
+              {$t('Assign')}
+            </Button>
+            <Button
+              className="button--soft-warning"
+              onClick={() => convertDualOutputCollection(true, true)}
+              disabled={busy}
+            >
+              {$t('Assign and Export Overlay')}
+            </Button>
+          </div>
         </div>
       )}
       <div style={{ color: error ? 'red' : 'var(--teal)' }}>{message}</div>
@@ -322,14 +326,16 @@ function AppPlatformDeveloperSettings() {
           <p style={{ wordWrap: 'break-word' }}>{loadedUnpackedApp.appPath}</p>
           <h4>{$t('Token')}</h4>
           <p style={{ wordWrap: 'break-word' }}>{loadedUnpackedApp.appToken}</p>
-          <Button onClick={reloadApp} type="primary" disabled={loading}>
-            {$t('Reload')}
-            {loading && <i className="fa fa-spinner fa-pulse" />}
-          </Button>
-          <Button onClick={unloadApp} type="primary" disabled={loading}>
-            {$t('Unload')}
-            {loading && <i className="fa fa-spinner fa-pulse" />}
-          </Button>
+          <div style={{ display: 'flex', justifyContent: 'space-evenly', paddingBottom: '16px' }}>
+            <Button onClick={reloadApp} type="primary" disabled={loading}>
+              {$t('Reload')}
+              {loading && <i className="fa fa-spinner fa-pulse" />}
+            </Button>
+            <Button onClick={unloadApp} type="primary" disabled={loading}>
+              {$t('Unload')}
+              {loading && <i className="fa fa-spinner fa-pulse" />}
+            </Button>
+          </div>
         </>
       )}
       {!loadedUnpackedApp && (

app/components-react/windows/settings/SceneCollections.tsx

@@ -10,7 +10,7 @@ import { DualOutputDeveloperSettings } from './Developer';
 import { ObsSettingsSection } from './ObsSettings';
 import { CheckboxInput, SwitchInput, ListInput } from 'components-react/shared/inputs';
 
-export function OverlaySettings() {
+export function SceneCollectionsSettings() {
   const {
     SceneCollectionsService,
     OverlaysPersistenceService,
@@ -116,24 +116,26 @@ export function OverlaySettings() {
   return (
     <>
       <ObsSettingsSection>
-        <Button onClick={createSceneCollection}>{$t('Create Scene Collection')}</Button>
-        <Button onClick={loadWidget}>{$t('Import Widget File in Current Scene')}</Button>
-        <br />
+        <div style={{ display: 'flex', justifyContent: 'space-evenly', paddingBottom: '16px' }}>
+          <Button onClick={createSceneCollection}>{$t('Create Scene Collection')}</Button>
+          <Button onClick={loadWidget}>{$t('Import Widget File in Current Scene')}</Button>
+        </div>
       </ObsSettingsSection>
       <ObsSettingsSection>
         <p>
           {$t(
             'This feature is intended for overlay designers to export their work for our Overlay Library. Not all sources will be exported, use at your own risk.',
           )}
         </p>
-        <Button onClick={saveOverlay}>{$t('Export Overlay File')}</Button>
-        <Button onClick={loadOverlay}>{$t('Import Overlay File')}</Button>
+        <div style={{ display: 'flex', justifyContent: 'space-evenly', paddingBottom: '16px' }}>
+          <Button onClick={saveOverlay}>{$t('Export Overlay File')}</Button>
+          <Button onClick={loadOverlay}>{$t('Import Overlay File')}</Button>
+        </div>
         <SwitchInput
           label={$t('Enable Designer Mode')}
           value={designerMode}
           onChange={setDesignerMode}
         />
-        <br />
         {message}
       </ObsSettingsSection>
       <ObsSettingsSection>

app/services/settings/settings.ts

@@ -48,7 +48,6 @@ export enum ESettingsCategory {
   GetSupport = 'Get Support',
   InstalledApps = 'Installed Apps',
   Stream = 'Stream',
-  StreamSecond = 'StreamSecond',
   General = 'General',
   Mobile = 'Mobile',
   Hotkeys = 'Hotkeys',
@@ -325,7 +324,7 @@ export class SettingsService extends StatefulService<ISettingsServiceState> {
     }
   }
 
-  private fetchSettingsFromObs(categoryName: TCategoryName): ISettingsCategory {
+  private fetchSettingsFromObs(categoryName: TCategoryName | 'StreamSecond'): ISettingsCategory {
     const settingsMetadata = obs.NodeObs.OBS_settings_getSettings(categoryName);
     let settings = settingsMetadata.data;
     if (!settings) settings = [];
@@ -444,7 +443,6 @@ export class SettingsService extends StatefulService<ISettingsServiceState> {
       settingsFormData[categoryName] = this.fetchSettingsFromObs(categoryName);
     });
     // These settings are not displayed in the menu but are still needed for dual output
-    settingsFormData.Stream = this.fetchSettingsFromObs('Stream');
     settingsFormData.StreamSecond = this.fetchSettingsFromObs('StreamSecond');
 
     this.SET_SETTINGS(settingsFormData);