Fix UI inconsistencies, various improvements (#357)

* Make version gray in plugin list

* Settings/store icons together & plugin list fix

* Navigation name/icon improvements

* Decky settings overhaul and other fixes

- Revert the tab icon to a plug
- Rename DeckyFlat function to DeckyIcon
- Add DialogBody to settings pages to improve scrolling
- Add remote debugging settings to the developer settings
- Fix React devtools interactions to work more easily
- Add spacing to React devtools description
- Specify Decky vs. plugin store
- Compact version information by update button
- Add current version to bottom of settings
- Remove unnecessary settings icons
- Change CEF debugger icon to Chrome (bug icon too generic, is Chromium)
- Make buttons/dropdowns in settings have fixed width
- Make download icon act/appear similar to Valve's for Deck

* Final UI adjustments

* Switch plugin settings icon to plug

1 files changed, 47 insertions, 30 deletions

diff --git a/frontend/src/components/settings/pages/general/index.tsx b/frontend/src/components/settings/pages/general/index.tsx
index d661b779..e0bd9691 100644
--- a/frontend/src/components/settings/pages/general/index.tsx
+++ b/frontend/src/components/settings/pages/general/index.tsx
@@ -1,10 +1,17 @@
-import { DialogButton, Field, TextField, Toggle } from 'decky-frontend-lib';
+import {
+  DialogBody,
+  DialogButton,
+  DialogControlsSection,
+  DialogControlsSectionHeader,
+  Field,
+  TextField,
+  Toggle,
+} from 'decky-frontend-lib';
 import { useState } from 'react';
-import { FaShapes, FaTools } from 'react-icons/fa';
 
 import { installFromURL } from '../../../../store';
+import { useDeckyState } from '../../../DeckyState';
 import BranchSelect from './BranchSelect';
-import RemoteDebuggingSettings from './RemoteDebugging';
 import StoreSelect from './StoreSelect';
 import UpdaterSettings from './Updater';
 
@@ -16,34 +23,44 @@ export default function GeneralSettings({
   setIsDeveloper: (val: boolean) => void;
 }) {
   const [pluginURL, setPluginURL] = useState('');
+  const { versionInfo } = useDeckyState();
 
   return (
-    <div>
-      <UpdaterSettings />
-      <BranchSelect />
-      <StoreSelect />
-      <RemoteDebuggingSettings />
-      <Field
-        label="Developer mode"
-        description={<span style={{ whiteSpace: 'pre-line' }}>Enables Decky's developer settings.</span>}
-        icon={<FaTools style={{ display: 'block' }} />}
-      >
-        <Toggle
-          value={isDeveloper}
-          onChange={(toggleValue) => {
-            setIsDeveloper(toggleValue);
-          }}
-        />
-      </Field>
-      <Field
-        label="Manual plugin install"
-        description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}
-        icon={<FaShapes style={{ display: 'block' }} />}
-      >
-        <DialogButton disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
-          Install
-        </DialogButton>
-      </Field>
-    </div>
+    <DialogBody>
+      <DialogControlsSection>
+        <DialogControlsSectionHeader>Updates</DialogControlsSectionHeader>
+        <UpdaterSettings />
+      </DialogControlsSection>
+      <DialogControlsSection>
+        <DialogControlsSectionHeader>Beta Participation</DialogControlsSectionHeader>
+        <BranchSelect />
+        <StoreSelect />
+      </DialogControlsSection>
+      <DialogControlsSection>
+        <DialogControlsSectionHeader>Other</DialogControlsSectionHeader>
+        <Field label="Enable Developer Mode">
+          <Toggle
+            value={isDeveloper}
+            onChange={(toggleValue) => {
+              setIsDeveloper(toggleValue);
+            }}
+          />
+        </Field>
+        <Field
+          label="Install plugin from URL"
+          description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}
+        >
+          <DialogButton disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
+            Install
+          </DialogButton>
+        </Field>
+      </DialogControlsSection>
+      <DialogControlsSection>
+        <DialogControlsSectionHeader>About</DialogControlsSectionHeader>
+        <Field label="Decky Version" focusable={true}>
+          <div style={{ color: 'var(--gpSystemLighterGrey)' }}>{versionInfo?.current}</div>
+        </Field>
+      </DialogControlsSection>
+    </DialogBody>
   );
 }