fix user theme updates, toggles, manual theme saving

packages/pl-fe/src/features/preferences/index.tsx

@@ -1,4 +1,3 @@
-import debounce from 'lodash/debounce';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -23,8 +22,6 @@ import { isStandalone } from 'pl-fe/utils/state';
 
 import ThemeToggle from '../ui/components/theme-toggle';
 
-import type { AppDispatch } from 'pl-fe/store';
-
 const languages = {
   en: 'English',
   ar: 'العربية',
@@ -111,10 +108,6 @@ const messages = defineMessages({
   black: { id: 'theme_toggle.black', defaultMessage: 'Black' },
 });
 
-const debouncedSave = debounce((dispatch: AppDispatch) => {
-  dispatch(saveSettings({ showAlert: true }));
-}, 1000);
-
 const Preferences = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -130,6 +123,10 @@ const Preferences = () => {
     dispatch(changeSetting(path, event.target.value, { showAlert: true }));
   };
 
+  const onThemeSelectChange = (event: React.ChangeEvent<HTMLSelectElement>, path: string[]) => {
+    dispatch(changeSetting(path, event.target.value, { save: false }));
+  };
+
   const onSelectMultiple = (selectedList: string[], path: string[]) => {
     dispatch(changeSetting(path, selectedList.toSorted((a, b) => a.localeCompare(b)), { showAlert: true }));
   };
@@ -138,21 +135,27 @@ const Preferences = () => {
     dispatch(changeSetting(key, checked));
   };
 
+  const onThemeToggleChange = (key: string[], checked: boolean) => {
+    dispatch(changeSetting(key, checked, { save: false }));
+  };
+
   const onBrandColorChange = (newBrandColor: string) => {
     if (newBrandColor === brandColor) return;
 
-    dispatch(changeSetting(['theme', 'brandColor'], newBrandColor, { showAlert: true, save: false }));
-    debouncedSave(dispatch);
+    dispatch(changeSetting(['theme', 'brandColor'], newBrandColor, { save: false }));
   };
 
   const onInterfaceSizeChange = (value: number) => {
-    dispatch(changeSetting(['theme', 'interfaceSize'], INTERFACE_SIZES[value], { showAlert: true, save: false }));
-    debouncedSave(dispatch);
+    dispatch(changeSetting(['theme', 'interfaceSize'], INTERFACE_SIZES[value], { save: false }));
+  };
+
+  const onThemeSave = () => {
+    dispatch(saveSettings({ showAlert: true }));
   };
 
   const onThemeReset = () => {
     dispatch(changeSetting(['themeMode'], plFeConfig.defaultSettings.themeMode, { save: false }));
-    dispatch(changeSetting(['theme'], plFeConfig.defaultSettings.theme, { showAlert: true }));
+    dispatch(changeSetting(['theme'], plFeConfig.defaultSettings.theme, { save: false }));
   };
 
   const displayMediaOptions = React.useMemo(() => ({
@@ -214,7 +217,7 @@ const Preferences = () => {
           </div>
         </ListItem>
         <ListItem label={<FormattedMessage id='preferences.fields.theme.display_background_gradient' defaultMessage='Display background gradient' />}>
-          <SettingToggle settings={settings} settingPath={['theme', 'backgroundGradient']} defaultValue onChange={onToggleChange} />
+          <SettingToggle settings={settings} settingPath={['theme', 'backgroundGradient']} defaultValue onChange={onThemeToggleChange} />
         </ListItem>
         {settings.themeMode === 'system' && (
           <ListItem
@@ -225,16 +228,19 @@ const Preferences = () => {
               className='max-w-[200px]'
               items={systemDarkThemePreferenceOptions}
               defaultValue={settings.theme?.systemDarkThemePreference || 'black'}
-              onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['theme', 'systemDarkThemePreference'])}
+              onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onThemeSelectChange(event, ['theme', 'systemDarkThemePreference'])}
             />
           </ListItem>
         )}
       </List>
 
-      <HStack justifyContent='end'>
+      <HStack justifyContent='end' space={2}>
         <Button theme='secondary' onClick={onThemeReset}>
           <FormattedMessage id='preferences.fields.theme_reset' defaultMessage='Reset theme' />
         </Button>
+        <Button theme='primary' onClick={onThemeSave}>
+          <FormattedMessage id='preferences.fields.theme_save' defaultMessage='Save theme' />
+        </Button>
       </HStack>
 
       <List>

packages/pl-fe/src/features/ui/components/theme-toggle.tsx

@@ -12,7 +12,7 @@ const ThemeToggle: React.FC = () => {
   const { themeMode } = useSettings();
 
   const handleChange = (themeMode: string) => {
-    dispatch(changeSetting(['themeMode'], themeMode));
+    dispatch(changeSetting(['themeMode'], themeMode, { save: false }));
   };
 
   return (