fix: save advanced colors tab state in theme context

src/components/Themes/lib/themeCreatorContext.ts

@@ -16,7 +16,7 @@ import type {
     UpdateFontFamilyParams,
     UpdateFontFamilyTypeTitleParams,
 } from './themeCreatorUtils';
-import type {ColorsSettingsType, ThemeCreatorState} from './types';
+import type {AdvancedColorType, ColorsSettingsType, ThemeCreatorState} from './types';
 
 export const ThemeCreatorContext = createContext<ThemeCreatorState>(
     initThemeCreator(DEFAULT_THEME),
@@ -39,6 +39,7 @@ export interface ThemeCreatorMethodsContextType {
     updateAdvancedTypography: () => void;
     openMainSettings: () => void;
     setAdvancedMode: (enabled: boolean) => void;
+    setAdvancedColorType: (type: AdvancedColorType) => void;
     importTheme: (theme: GravityTheme) => void;
     setColorsSettingsType: (type: ColorsSettingsType) => void;
 }
@@ -60,6 +61,7 @@ export const ThemeCreatorMethodsContext = createContext<ThemeCreatorMethodsConte
     updateAdvancedTypography: noop,
     openMainSettings: noop,
     setAdvancedMode: noop,
+    setAdvancedColorType: noop,
     importTheme: noop,
     setColorsSettingsType: noop,
 });

src/components/Themes/lib/themeCreatorUtils.ts

@@ -354,6 +354,7 @@ export function initThemeCreator(inputTheme: GravityTheme): ThemeCreatorState {
         paletteTokens,
         showMainSettings: false,
         advancedModeEnabled: false,
+        advancedColorType: 'basic-palette',
         changesExist: false,
         borders: {
             preset: bordersPreset,

src/components/Themes/lib/types.ts

@@ -81,6 +81,7 @@ export interface ThemeCreatorState {
     paletteTokens: PaletteTokens;
     showMainSettings: boolean;
     advancedModeEnabled: boolean;
+    advancedColorType: AdvancedColorType;
     changesExist: boolean;
 
     borders: BordersOption;

src/components/Themes/ui/ColorsTab/AdvancedSettings/AdvancedSettings.tsx

@@ -1,10 +1,11 @@
 import {CircleQuestion} from '@gravity-ui/icons';
 import {Button, Flex, Icon} from '@gravity-ui/uikit';
 import {useTranslation} from 'next-i18next';
-import {useMemo, useState} from 'react';
+import {useMemo} from 'react';
 
 import {block} from '../../../../../utils';
 import {type TagItem, Tags} from '../../../../Tags/Tags';
+import {useThemeCreator, useThemeCreatorMethods} from '../../../hooks/useThemeCreator';
 import type {AdvancedColorType} from '../../../lib/types';
 import {AdvancedSettingsTable} from '../../AdvancedSettingsTable/AdvancedSettingsTable';
 import {ThemeSection} from '../../ThemeSection';
@@ -13,7 +14,8 @@ const b = block('advanced-color-settings');
 
 export const AdvancedSettings = () => {
     const {t} = useTranslation('themes');
-    const [activeTab, setActiveTab] = useState<AdvancedColorType>('basic-palette');
+    const {advancedColorType} = useThemeCreator();
+    const {setAdvancedColorType} = useThemeCreatorMethods();
 
     const tags: TagItem<AdvancedColorType>[] = useMemo(
         () => [
@@ -63,12 +65,12 @@ export const AdvancedSettings = () => {
                 <Tags
                     className={b('tags')}
                     items={tags}
-                    value={activeTab}
-                    onChange={setActiveTab}
+                    value={advancedColorType}
+                    onChange={setAdvancedColorType}
                 />
             </Flex>
 
-            <AdvancedSettingsTable colorType={activeTab} />
+            <AdvancedSettingsTable colorType={advancedColorType} />
         </ThemeSection>
     );
 };

src/components/Themes/ui/ThemeCreatorContextProvider.tsx

@@ -35,7 +35,7 @@ import {
     updateFontFamilyInTheme,
     updateFontFamilyTypeTitleInTheme,
 } from '../lib/themeCreatorUtils';
-import type {ColorsSettingsType, ThemeCreatorState} from '../lib/types';
+import type {AdvancedColorType, ColorsSettingsType, ThemeCreatorState} from '../lib/types';
 
 type ThemeCreatorAction =
     | {
@@ -104,6 +104,10 @@ type ThemeCreatorAction =
           type: 'setAdvancedMode';
           payload: boolean;
       }
+    | {
+          type: 'setAdvancedColorType';
+          payload: AdvancedColorType;
+      }
     | {
           type: 'setColorsSettingsType';
           payload: ColorsSettingsType;
@@ -157,6 +161,11 @@ const themeCreatorReducer = (
                 ...newState,
                 advancedModeEnabled: action.payload,
             };
+        case 'setAdvancedColorType':
+            return {
+                ...newState,
+                advancedColorType: action.payload,
+            };
         case 'reinitialize':
             return initThemeCreator(action.payload);
         case 'setColorsSettingsType':
@@ -336,6 +345,13 @@ export const ThemeCreatorContextProvider: React.FC<ThemeCreatorProps> = ({
         });
     }, []);
 
+    const setAdvancedColorType = React.useCallback((type: AdvancedColorType) => {
+        dispatchThemeCreator({
+            type: 'setAdvancedColorType',
+            payload: type,
+        });
+    }, []);
+
     const importTheme = React.useCallback((gravityTheme: GravityTheme) => {
         dispatchThemeCreator({
             type: 'reinitialize',
@@ -370,6 +386,7 @@ export const ThemeCreatorContextProvider: React.FC<ThemeCreatorProps> = ({
             updateFontFamily,
             openMainSettings,
             setAdvancedMode,
+            setAdvancedColorType,
             importTheme,
             setColorsSettingsType,
         }),
@@ -390,6 +407,7 @@ export const ThemeCreatorContextProvider: React.FC<ThemeCreatorProps> = ({
             updateFontFamilyTypeTitle,
             openMainSettings,
             setAdvancedMode,
+            setAdvancedColorType,
             importTheme,
             setColorsSettingsType,
         ],