SoapboxConfig: fix theme selector

app/soapbox/features/soapbox_config/index.tsx

@@ -10,7 +10,7 @@ import HStack from 'soapbox/components/ui/hstack/hstack';
 import Stack from 'soapbox/components/ui/stack/stack';
 import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import { Checkbox } from 'soapbox/features/forms';
-import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
+import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 
@@ -48,6 +48,7 @@ type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
 type ColorValueGetter = (color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => any;
 type Template = ImmutableMap<string, any>;
 type ConfigPath = Array<string | number>;
+type ThemeChangeHandler = (theme: string) => void;
 
 const templates: Record<string, Template> = {
   promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
@@ -109,6 +110,12 @@ const SoapboxConfig: React.FC = () => {
     };
   };
 
+  const handleThemeChange = (path: ConfigPath): ThemeChangeHandler => {
+    return theme => {
+      setConfig(path, theme);
+    };
+  };
+
   const handleColorChange = (path: ConfigPath, getValue: ColorValueGetter): ColorChangeHandler => {
     return (color, event) => {
       setConfig(path, getValue(color, event));
@@ -196,12 +203,10 @@ const SoapboxConfig: React.FC = () => {
               <div className='input with_label toggle'>
                 <div className='label_input'>
                   <label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
-                  <ThemeToggle />
-                  {/* <ThemeToggle
-                    onToggle={handleChange(['defaultSettings', 'themeMode'], value => value)}
-                    themeMode={soapbox.defaultSettings.get('themeMode')}
-                    intl={intl}
-                  /> */}
+                  <ThemeSelector
+                    value={soapbox.defaultSettings.get('themeMode')}
+                    onChange={handleThemeChange(['defaultSettings', 'themeMode'])}
+                  />
                 </div>
               </div>
             </Stack>

app/soapbox/features/ui/components/theme-selector.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Icon } from 'soapbox/components/ui';
+
+const messages = defineMessages({
+  light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
+  dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
+  system: { id: 'theme_toggle.system', defaultMessage: 'System' },
+});
+
+interface IThemeSelector {
+  value: string,
+  onChange: (value: string) => void,
+}
+
+/** Pure theme selector. */
+const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const themeIconSrc = useMemo(() => {
+    switch (value) {
+    case 'system':
+      return require('@tabler/icons/icons/device-desktop.svg');
+    case 'light':
+      return require('@tabler/icons/icons/sun.svg');
+    case 'dark':
+      return require('@tabler/icons/icons/moon.svg');
+    default:
+      return null;
+    }
+  }, [value]);
+
+  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = e => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <label>
+      <div className='relative rounded-md shadow-sm'>
+        <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
+          <Icon src={themeIconSrc} className='h-4 w-4 text-gray-400' />
+        </div>
+
+        <select
+          onBlur={handleChange}
+          defaultValue={value}
+          className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
+        >
+          <option value='system'>{intl.formatMessage(messages.system)}</option>
+          <option value='light'>{intl.formatMessage(messages.light)}</option>
+          <option value='dark'>{intl.formatMessage(messages.dark)}</option>
+        </select>
+
+        <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
+          <Icon src={require('@tabler/icons/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
+        </div>
+      </div>
+    </label>
+  );
+};
+
+export default ThemeSelector;

app/soapbox/features/ui/components/theme-toggle.tsx

@@ -1,65 +1,25 @@
-import React, { useMemo } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { changeSetting } from 'soapbox/actions/settings';
-import { Icon } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
 
-const messages = defineMessages({
-  light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
-  dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
-  system: { id: 'theme_toggle.system', defaultMessage: 'System' },
-});
+import ThemeSelector from './theme-selector';
 
-interface IThemeToggle {
-  showLabel?: boolean,
-}
-
-const ThemeToggle = ({ showLabel }: IThemeToggle) => {
-  const intl = useIntl();
+/** Stateful theme selector. */
+const ThemeToggle: React.FC = () => {
   const dispatch = useDispatch();
   const themeMode = useSettings().get('themeMode');
 
-  const onToggle = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    dispatch(changeSetting(['themeMode'], event.target.value));
+  const handleChange = (themeMode: string) => {
+    dispatch(changeSetting(['themeMode'], themeMode));
   };
 
-  const themeIconSrc = useMemo(() => {
-    switch (themeMode) {
-    case 'system':
-      return require('@tabler/icons/icons/device-desktop.svg');
-    case 'light':
-      return require('@tabler/icons/icons/sun.svg');
-    case 'dark':
-      return require('@tabler/icons/icons/moon.svg');
-    default:
-      return null;
-    }
-  }, [themeMode]);
-
   return (
-    <label>
-      <div className='relative rounded-md shadow-sm'>
-        <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
-          <Icon src={themeIconSrc} className='h-4 w-4 text-gray-400' />
-        </div>
-
-        <select
-          onChange={onToggle}
-          defaultValue={themeMode}
-          className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
-        >
-          <option value='system'>{intl.formatMessage(messages.system)}</option>
-          <option value='light'>{intl.formatMessage(messages.light)}</option>
-          <option value='dark'>{intl.formatMessage(messages.dark)}</option>
-        </select>
-
-        <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
-          <Icon src={require('@tabler/icons/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
-        </div>
-      </div>
-    </label>
+    <ThemeSelector
+      value={themeMode}
+      onChange={handleChange}
+    />
   );
 };