@admin-layout/tailwind-design-pro 12.0.16-alpha.87 → 12.0.16-alpha.89

package/lib/components/SettingDrawer/SettingDrawer.js

@@ -1,305 +1,4 @@
-import {jsx,Fragment,jsxs}from'react/jsx-runtime';import {useSelector}from'@xstate/react';import clsx from'clsx';import {parse}from'qs';import*as React from'react';import {useState,useRef,useEffect}from'react';import {useTranslation}from'react-i18next';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../hooks/useMediaQuery.js';import {icons}from'../../icons.js';import isBrowser from'../../utils/isBrowser/index.js';import {getDefaultApplyToAllRoutes,getSettingValue}from'../../utils/settingsUtils.js';import'@common-stack/components-pro';import {AdditionalSettingsSlot}from'../Layout/slot-fill/AdditionalSettings.js';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import CheckBoxTheme from'./CheckBoxTheme.js';import InvitationSettings from'./InvitationSettings.js';import LayoutChange from'./LayoutChange.js';import MenuVisibilitySettings from'./MenuVisibilitySettings.js';import NavigationModes from'./NavigationsModes.js';import RegionalSettings from'./RegionalSettings.js';import ThemeColor from'./ThemeColor.js';import {ThemeSelector}from'./ThemeSelector.js';import {WebFontsSelector}from'./WebFontsSelector.js';import {useWriteSettingsMutation,useResetApplicationUiSettingsMutation}from'common/lib/generated/generated.js';import {ConfigCollectionName,ConfigFragmentName}from'common/lib/generated/generated-models.js';import {generateCdecodeUri,DEFAULT_CONTRIBUTION_TENANT_ID}from'@adminide-stack/core';import {config}from'../../config/env-config.js';const updateTheme = (dark, color, publicPath = '/theme') => {
-  // ssr
-  if (typeof window === 'undefined' || !window.umi_plugin_ant_themeVar) {
-    return;
-  }
-  const href = dark ? `${publicPath}/dark` : `${publicPath}/`;
-  // If it is DARK, and is color = daybreak, there is no need to splice
-  let colorFileName = dark && color ? `-${encodeURIComponent(color)}` : encodeURIComponent(color || '');
-  if (color === 'daybreak' && dark) {
-    colorFileName = '';
-  }
-  const dom = document.getElementById('theme-style');
-  // If these two are empty
-  if (!href && !colorFileName) {
-    if (dom) {
-      dom.remove();
-      localStorage.removeItem('site-theme');
-    }
-    return;
-  }
-  const url = `${href}${colorFileName || ''}.css`;
-  if (dom) {
-    dom.onload = () => {
-      window.setTimeout(() => {});
-    };
-    dom.href = url;
-  } else {
-    const style = document.createElement('link');
-    style.type = 'text/css';
-    style.rel = 'stylesheet';
-    style.id = 'theme-style';
-    style.onload = () => {
-      window.setTimeout(() => {});
-    };
-    style.href = url;
-    if (document.body.append) {
-      document.body.append(style);
-    } else {
-      document.body.appendChild(style);
-    }
-  }
-  // localStorage.setItem('site-theme', dark ? 'dark' : 'light');
-};
-const initState = (settings, onSettingChange, publicPath, oldSetting) => {
-  if (!isBrowser()) {
-    return;
-  }
-  let loadedStyle = false;
-  if (window.location.search) {
-    const params = parse(window.location.search.replace('?', ''));
-    const replaceSetting = {};
-    Object.keys(params).forEach(key => {
-      if (settings[key] !== undefined || settings[key] === undefined) {
-        replaceSetting[key] = params[key];
-        if (key.includes('Render')) {
-          replaceSetting[key] = params[key] === 'false' ? false : undefined;
-        }
-      }
-    });
-    // Only call onSettingChange if we have actual URL parameters to apply
-    if (onSettingChange && Object.keys(replaceSetting).length > 0) {
-      console.log('✅ initState: Calling onSettingChange with URL params:', replaceSetting);
-      onSettingChange({
-        ...settings,
-        ...replaceSetting
-      });
-    } else {
-      console.log('⏭️ initState: Skipping onSettingChange - no valid URL params to apply');
-    }
-    // Set the topic in the URL and load it once.
-    if (oldSetting?.navTheme !== params.navTheme && params.navTheme) {
-      updateTheme(settings.navTheme === 'realDark', params.primaryColor, publicPath);
-      loadedStyle = true;
-    }
-  }
-  if (loadedStyle) {
-    return;
-  }
-  // If there is no topic in the URL, and no load in the URL is loaded.
-  if (oldSetting?.navTheme !== settings.navTheme && settings.navTheme) {
-    updateTheme(settings.navTheme === 'realDark', settings.primaryColor, publicPath);
-  }
-};
-const getThemeList = (settings, location, routePattern) => {
-  const {
-    t
-  } = useTranslation('settings');
-  const {
-    isMobile
-  } = useMediaQuery();
-  const currentRoute = routePattern || location?.pathname || '/';
-  const deviceType = isMobile ? 'mobile' : 'desktop';
-  // Helper function to get value from settings with route/device override support
-  const getUILayoutValue = path => {
-    const routeDeviceKey = `[${currentRoute}][${deviceType}]`;
-    const uiOverride = settings?.uiSettings?.[routeDeviceKey];
-    if (uiOverride) {
-      const value = path.split('.').reduce((obj, key) => obj?.[key], uiOverride);
-      if (value !== undefined) return value;
-    }
-    return path.split('.').reduce((obj, key) => obj?.[key], settings);
-  };
-  const deviceLayout = {
-    navigationMode: getUILayoutValue('navigationMode'),
-    sideMenuType: getUILayoutValue('sideMenuType'),
-    contentWidth: getUILayoutValue('contentWidth'),
-    fixedHeader: getUILayoutValue('fixedHeader'),
-    fixedSidebar: getUILayoutValue('fixedSidebar'),
-    splitMenus: getUILayoutValue('splitMenus')
-  };
-  let list = [];
-  const defaultList = [
-  //@sri following are needed otherwise we need make above plugin to work
-  {
-    key: 'dust',
-    fileName: 'dust.css',
-    modifyVars: {
-      '@primary-color': '#F5222D'
-    }
-  }, {
-    key: 'volcano',
-    fileName: 'volcano.css',
-    modifyVars: {
-      '@primary-color': '#FA541C'
-    }
-  }, {
-    key: 'sunset',
-    fileName: 'sunset.css',
-    modifyVars: {
-      '@primary-color': '#FAAD14'
-    }
-  }, {
-    key: 'cyan',
-    fileName: 'cyan.css',
-    modifyVars: {
-      '@primary-color': '#13C2C2'
-    }
-  }, {
-    key: 'green',
-    fileName: 'green.css',
-    modifyVars: {
-      '@primary-color': '#52C41A'
-    }
-  }, {
-    key: 'geekblue',
-    fileName: 'geekblue.css',
-    modifyVars: {
-      '@primary-color': '#2F54EB'
-    }
-  }, {
-    key: 'purple',
-    fileName: 'purple.css',
-    modifyVars: {
-      '@primary-color': '#722ED1'
-    }
-  }];
-  // ssr
-  if (typeof window === 'undefined') {
-    list = defaultList;
-  } else {
-    list = window.umi_plugin_ant_themeVar || defaultList;
-  }
-  const themeList = [{
-    key: 'light',
-    title: t('light')
-  }];
-  const darkColorList = [{
-    key: 'daybreak',
-    color: '#1890ff',
-    theme: 'dark'
-  }];
-  const lightColorList = [{
-    key: 'daybreak',
-    color: '#1890ff',
-    theme: 'dark'
-  }];
-  if (deviceLayout.navigationMode !== 'mixed') {
-    themeList.push({
-      key: 'dark',
-      title: t('dark')
-    });
-  }
-  if (list.find(item => item.theme === 'dark')) {
-    themeList.push({
-      key: 'realDark',
-      title: t('dark')
-    });
-  }
-  // insert  theme color List
-  list.forEach(item => {
-    const color = (item.modifyVars || {})['@primary-color'];
-    if (item.theme === 'dark' && color) {
-      darkColorList.push({
-        color,
-        ...item
-      });
-    }
-    if (!item.theme || item.theme === 'light') {
-      lightColorList.push({
-        color,
-        ...item
-      });
-    }
-  });
-  return {
-    colorList: {
-      dark: darkColorList,
-      light: lightColorList
-    },
-    themeList
-  };
-};
-const themeOptions = [{
-  key: 'default',
-  title: 'Default'
-}, {
-  key: 'github',
-  title: 'Github Theme'
-}, {
-  key: 'slack',
-  title: 'Slack Theme'
-}, {
-  key: 'airbnb',
-  title: 'Airbnb Theme'
-}, {
-  key: 'spotify',
-  title: 'Spotify Theme'
-}];
-const fontOptions = [{
-  key: 'Poppins, sans-serif',
-  title: 'Poppins'
-}, {
-  key: 'Roboto, sans-serif',
-  title: 'Roboto'
-}, {
-  key: 'Open Sans, sans-serif',
-  title: 'Open Sans'
-}, {
-  key: 'Montserrat, sans-serif',
-  title: 'Montserrat'
-}, {
-  key: 'Lato, sans-serif',
-  title: 'Lato'
-}, {
-  key: 'Nunito, sans-serif',
-  title: 'Nunito'
-}, {
-  key: 'Ubuntu, sans-serif',
-  title: 'Ubuntu'
-}, {
-  key: 'Inter, sans-serif',
-  title: 'Inter'
-}, {
-  key: 'Arial, sans-serif',
-  title: 'Arial'
-}, {
-  key: 'Helvetica, sans-serif',
-  title: 'Helvetica'
-}, {
-  key: 'Tahoma, sans-serif',
-  title: 'Tahoma'
-}, {
-  key: 'Trebuchet MS, sans-serif',
-  title: 'Trebuchet MS'
-}, {
-  key: 'Georgia, serif',
-  title: 'Georgia'
-}, {
-  key: 'Bookman, serif',
-  title: 'Bookman'
-}, {
-  key: 'Geneva, sans-serif',
-  title: 'Geneva'
-}, {
-  key: 'Lucida Console, monospace',
-  title: 'Lucida Console'
-}, {
-  key: 'Courier New, monospace',
-  title: 'Courier New'
-}, {
-  key: 'Lucida Sans, sans-serif',
-  title: 'Lucida Sans'
-}];
-function parseSettingPath(path, value) {
-  const keys = path.split('.');
-  // Base case: no nesting
-  if (keys.length === 1) {
-    return {
-      [path]: value
-    };
-  }
-  // Build nested object
-  let result = {};
-  let current = result;
-  for (let i = 0; i < keys.length - 1; i++) {
-    current[keys[i]] = {};
-    current = current[keys[i]];
-  }
-  current[keys[keys.length - 1]] = value;
-  return result;
-}
-const SettingDrawer = props => {
+import {jsx,Fragment,jsxs}from'react/jsx-runtime';import {useSelector}from'@xstate/react';import clsx from'clsx';import*as React from'react';import {useRef,useState,useEffect}from'react';import {useTranslation}from'react-i18next';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../hooks/useMediaQuery.js';import {icons}from'../../icons.js';import isBrowser from'../../utils/isBrowser/index.js';import {getDefaultApplyToAllRoutes,getSettingValue}from'../../utils/settingsUtils.js';import'@common-stack/components-pro';import {AdditionalSettingsSlot}from'../Layout/slot-fill/AdditionalSettings.js';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import {ApplyToAllRoutesToggle}from'./components/ApplyToAllRoutesToggle.js';import {CheckBoxTheme}from'./components/CheckBoxTheme.js';import {DeviceTabs}from'./components/DeviceTabs.js';import {InvitationSettings}from'./components/InvitationSettings.js';import {LayoutChange}from'./components/LayoutChange.js';import {MenuVisibilitySettings}from'./components/MenuVisibilitySettings.js';import {NavigationModes}from'./components/NavigationsModes.js';import {RegionalSettings}from'./components/RegionalSettings.js';import {SettingsActions}from'./components/SettingsActions.js';import {SettingsDrawerHeader}from'./components/SettingsDrawerHeader.js';import {ThemeColor}from'./components/ThemeColor.js';import {ThemeSelector}from'./components/ThemeSelector.js';import {WebFontsSelector}from'./components/WebFontsSelector.js';import {useSettingsOperations}from'./hooks/useSettingsOperations.js';import {THEME_OPTIONS,FONT_OPTIONS}from'./utils/constants.js';import {getThemeList,initState,parseSettingPath}from'./utils/helper.js';function SettingDrawer(props) {
   const {
     onSettingChange,
     hideLoading,
@@ -315,48 +14,55 @@ const SettingDrawer = props => {
     fullMenuData,
     routePattern
   } = props;
-  // Don't use useLayoutSettings() - it pulls from Redux which may be stale
-  // Use settingState from XState actor instead (line 393)
   const {
     CloseIcon,
-    Settings5FillIcon,
-    CopyIcon,
-    CheckIcon
+    Settings5FillIcon
   } = icons;
-  const [show, setShow] = useState(false);
+  // Refs
+  const hasInitializedRef = useRef(false);
+  const btnRef = useRef();
+  const prevSettingsRef = useRef();
+  // Hooks
   const {
     isMobile
   } = useMediaQuery();
-  const [copied, setCopied] = useState(false);
-  const [copiedModified, setCopiedModified] = useState(false);
-  const [activeDeviceTab, setActiveDeviceTab] = useState(isMobile ? 'mobile' : 'desktop');
-  const [applyToAllRoutes, setApplyToAllRoutes] = useState(false);
   const {
     t
   } = useTranslation('settings');
-  // Track if we've already initialized to prevent loops
-  const hasInitializedRef = useRef(false);
-  const resource = generateCdecodeUri(DEFAULT_CONTRIBUTION_TENANT_ID, {
-    resourceType: ConfigCollectionName.Applications,
-    resourceId: config.APPLICATION_ID,
-    idField: 'appId'
-  }, {}, ConfigFragmentName.UiSettings);
-  const [writeSettingsMutation, {
-    client
-  }] = useWriteSettingsMutation();
-  const [resetApplicationSettings] = useResetApplicationUiSettingsMutation();
-  const btnRef = useRef();
-  // REVOLUTIONARY APPROACH: Use stable selectors instead of raw context access
-  // This completely eliminates the infinite loop problem because:
-  // 1. selectPublicSettings only returns context.public (no internal state)
-  // 2. useSelector memoizes the result - only re-renders if PUBLIC settings actually change
-  // 3. configModel reference changes are isolated in context.internal, never seen here
-  // 4. No filtering logic needed - separation is built into the machine
+  // State
+  const [show, setShow] = useState(false);
+  const [activeDeviceTab, setActiveDeviceTab] = useState(isMobile ? 'mobile' : 'desktop');
+  const [applyToAllRoutes, setApplyToAllRoutes] = useState(false);
+  // Selectors
   const settingState = useSelector(actor, state => state.context.public);
   const changedSettings = useSelector(actor, state => state.context.internal.changedSettings);
-  useSelector(actor, state => state.context.internal.deviceType);
-  // Track previous settings to detect meaningful changes
-  const prevSettingsRef = useRef();
+  // Custom hooks
+  const {
+    copied,
+    copiedModified,
+    handleCopySettings,
+    handleCopyModifiedSettings,
+    handleSaveSettings,
+    handleResetSettings
+  } = useSettingsOperations({
+    actor,
+    settingState,
+    changedSettings
+  });
+  // Computed values
+  const currentRoute = routePattern || location?.pathname || '/';
+  const deviceType = activeDeviceTab;
+  const currentPathname = isBrowser() ? window.location.pathname : pathname || '';
+  const themeList = getThemeList(settingState, location, routePattern);
+  // Derived state
+  const defaultApplyToAllRoutes = React.useMemo(() => {
+    return getDefaultApplyToAllRoutes(settingState, currentRoute, deviceType);
+  }, [settingState, currentRoute, deviceType]);
+  const settingsForComponents = settingState;
+  // Effects
+  useEffect(() => {
+    setApplyToAllRoutes(defaultApplyToAllRoutes);
+  }, [defaultApplyToAllRoutes]);
   useEffect(() => {
     const prevSettings = prevSettingsRef.current;
     const currentSettings = settingState;
@@ -376,172 +82,9 @@ const SettingDrawer = props => {
     }
     prevSettingsRef.current = JSON.parse(JSON.stringify(currentSettings));
   }, [settingState]);
-  const currentRoute = routePattern || location?.pathname || '/';
-  // Use activeDeviceTab instead of isMobile for device type
-  const deviceType = activeDeviceTab;
-  // Calculate the default value for applyToAllRoutes based on what overrides exist
-  const defaultApplyToAllRoutes = React.useMemo(() => {
-    return getDefaultApplyToAllRoutes(settingState, currentRoute, deviceType);
-  }, [settingState, currentRoute, deviceType]);
-  // Update applyToAllRoutes when route or device changes
-  useEffect(() => {
-    setApplyToAllRoutes(defaultApplyToAllRoutes);
-  }, [defaultApplyToAllRoutes]);
-  // Pass settingState directly - child components will use getSettingValue internally
-  // with the applyToAllRoutes prop to get the correct scoped values
-  const settingsForComponents = settingState;
-  // Helper to get theme value with overrides applied
-  const getThemeValue = () => getSettingValue(settingState, 'theme', applyToAllRoutes, currentRoute, deviceType, 'default');
-  // Helper to get font family value with overrides applied
-  const getFontFamilyValue = () => getSettingValue(settingState, 'fontFamily', applyToAllRoutes, currentRoute, deviceType, 'Poppins, sans-serif');
-  const themeList = getThemeList(settingState, location, routePattern);
-  const handleSettingChange = (key, value) => {
-    // Menu visibility and applyToAllRoutes are always global
-    const isGlobalSetting = key === 'hiddenMenuKeys' || key === 'hiddenMenuCategories' || key === 'applyToAllRoutes';
-    if (isGlobalSetting) {
-      console.log('🌐 Sending GLOBAL setting to actor:', {
-        key,
-        value
-      });
-      actor.send({
-        type: 'UISETTING_UPDATE',
-        value: {
-          [key]: value
-        }
-      });
-      return;
-    }
-    const bracketKey = applyToAllRoutes ? `[${deviceType}]` : `[${currentRoute}][${deviceType}]`;
-    const settingObject = parseSettingPath(key, value);
-    const nestedValue = {
-      [bracketKey]: settingObject
-    };
-    console.log('0️⃣ handleSettingChange with value: ', nestedValue);
-    actor.send({
-      type: 'UISETTING_UPDATE',
-      value: nestedValue
-    });
-  };
-  const handleCopySettings = async () => {
-    if (!isBrowser()) return;
-    try {
-      const settings = JSON.stringify(settingState, null, 2);
-      await navigator.clipboard.writeText(settings);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy settings:', err);
-    }
-  };
-  const handleCopyModifiedSettings = async () => {
-    if (!isBrowser()) return;
-    try {
-      const settingsCookie = document.cookie.split(';').find(cookie => cookie.startsWith(' settings='));
-      if (!settingsCookie) {
-        console.log('settings Cookie not found, ', settingsCookie);
-        return;
-      }
-      const settingsValue = settingsCookie.split('=')[1];
-      const decodedComponent = decodeURIComponent(settingsValue);
-      const parsedSettings = JSON.parse(atob(decodedComponent));
-      console.log('Settings in cookies : ', parsedSettings);
-      navigator.clipboard.writeText(JSON.stringify(parsedSettings, null, 2));
-    } catch (err) {
-      console.error('Failed to copy modified settings:', err);
-    }
-  };
-  const handleSaveSettings = async () => {
-    if (!isBrowser()) return;
-    try {
-      // Transform changedSettings to wrap in uilayout structure for backend
-      const wrappedSettings = {};
-      Object.keys(changedSettings || {}).forEach(key => {
-        const value = changedSettings[key];
-        // Skip route paths
-        if (key.startsWith('/')) return;
-        // Check if it's a bracket key like [device].settingName or [route][device].settingName
-        if (key.startsWith('[')) {
-          // Extract bracket pattern and setting name
-          // e.g., "[desktop].theme" or "[/route][desktop].navTheme"
-          const match = key.match(/^(\[.+?\](?:\[.+?\])?)\.(.+)$/);
-          if (match) {
-            const bracketKey = match[1]; // e.g., "[desktop]" or "[/route][desktop]"
-            const settingName = match[2]; // e.g., "theme"
-            // Wrap in uilayout structure: [desktop].uilayout.theme
-            const wrappedKey = `${bracketKey}.uilayout.${settingName}`;
-            wrappedSettings[wrappedKey] = value;
-          } else {
-            // If pattern doesn't match, keep as is
-            wrappedSettings[key] = value;
-          }
-        } else {
-          // Non-bracket keys (like hiddenMenuKeys) - keep as is
-          wrappedSettings[key] = value;
-        }
-      });
-      // Prepare mutation variables
-      const variables = {
-        editingUri: resource,
-        settings: wrappedSettings
-      };
-      const response = await writeSettingsMutation({
-        variables
-      });
-      if (response.data) {
-        console.log('Settings saved successfully');
-        // Reset XState changedSettings (this will disable save button)
-        actor.send({
-          type: 'UISETTING_RESET_CHANGED_SETTINGS'
-        });
-      }
-    } catch (err) {
-      console.error('Failed to save settings:', err);
-    }
-  };
-  const handleResetSettings = async () => {
-    if (!isBrowser()) return;
-    const confirmed = window.confirm('Are you sure you want to reset all settings? This will delete all customizations from database and cookies, then reload the page.');
-    if (!confirmed) return;
-    try {
-      console.log('🔥 Resetting all settings...');
-      // Step 1: Delete uiSettings from database using the resetApplicationSettings mutation
-      try {
-        await resetApplicationSettings({
-          variables: {
-            appId: config.APPLICATION_ID
-          }
-        });
-        console.log('✅ Database uiSettings deleted');
-      } catch (dbErr) {
-        console.error('⚠️ Failed to delete database uiSettings:', dbErr);
-        // Continue anyway to clear cookies
-      }
-      // Step 2: Clear cookies by sending DELETE request
-      try {
-        const response = await fetch('/resources/settings', {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        });
-        const result = await response.json();
-        console.log('✅ Settings cookies cleared');
-      } catch (cookieErr) {
-        console.error('⚠️ Failed to clear cookies:', cookieErr);
-      }
-      // Step 3: Reset XState machine
-      actor.send({
-        type: 'UISETTING_RESET_CHANGED_SETTINGS'
-      });
-    } catch (err) {
-      console.error('❌ Error resetting settings:', err);
-      alert('Failed to reset settings. Please try again.');
-    }
-  };
   useEffect(() => {
     if (isBrowser()) {
       const hasUrlParams = !!window.location.search;
-      // Only call initState on first mount OR if there are URL params
       const shouldInit = !hasInitializedRef.current || hasUrlParams;
       if (shouldInit) {
         console.log('🔥 Calling initState:', {
@@ -553,12 +96,10 @@ const SettingDrawer = props => {
         console.log('⏭️ Skipping initState - already initialized and no URL params');
       }
     }
-  }, [settingState, props.publicPath]); // settingState only changes when PUBLIC settings change
-  // Update activeDeviceTab when isMobile changes
+  }, [settingState, props.publicPath]);
   useEffect(() => {
     setActiveDeviceTab(isMobile ? 'mobile' : 'desktop');
   }, [isMobile]);
-  // Update machine when device tab changes
   useEffect(() => {
     if (actor) {
       actor.send({
@@ -567,7 +108,35 @@ const SettingDrawer = props => {
       });
     }
   }, [activeDeviceTab, actor]);
-  const currentPathname = isBrowser() ? window.location.pathname : pathname || '';
+  // Helper functions
+  function handleSettingChange(key, value) {
+    const isGlobalSetting = key === 'hiddenMenuKeys' || key === 'hiddenMenuCategories' || key === 'applyToAllRoutes' || key === 'fixedHeader' || key === 'fixedSidebar' || key === 'splitMenus' || key === 'upperMenuDividerName' || key === 'middleMenuDividerName' || key === 'lowerMenuDividerName';
+    if (isGlobalSetting) {
+      console.log('🌐 Sending GLOBAL setting to actor:', {
+        key,
+        value
+      });
+      actor.send({
+        type: 'UISETTING_UPDATE',
+        value: {
+          [key]: value
+        }
+      });
+      return;
+    }
+    const bracketKey = applyToAllRoutes ? `[${deviceType}]` : `[${currentRoute}][${deviceType}]`;
+    const settingObject = parseSettingPath(key, value);
+    const nestedValue = {
+      [bracketKey]: settingObject
+    };
+    console.log('0️⃣ handleSettingChange with value: ', nestedValue);
+    actor.send({
+      type: 'UISETTING_UPDATE',
+      value: nestedValue
+    });
+  }
+  const getThemeValue = () => getSettingValue(settingState, 'theme', applyToAllRoutes, currentRoute, deviceType, 'default');
+  const getFontFamilyValue = () => getSettingValue(settingState, 'fontFamily', applyToAllRoutes, currentRoute, deviceType, 'Poppins, sans-serif');
   return jsx(Fragment, {
     children: settingState?.showSettingPanel && jsxs(Fragment, {
       children: [jsx("button", {
@@ -589,120 +158,20 @@ const SettingDrawer = props => {
         })
       }), jsxs("div", {
         className: clsx('fixed right-0 top-0 w-[20rem] transition-all duration-500 overflow-hidden overflow-y-auto z-50 p-4 min-h-full max-h-full', 'bg-white dark:bg-[#1f1f1f]', show ? 'opacity-100 visible' : 'w-0 opacity-0 invisible', 'shadow-lg'),
-        children: [jsxs("div", {
-          className: "flex flex-row items-center",
-          children: [jsx("p", {
-            className: "text-2xl mb-0 text-black dark:text-white",
-            children: t('setting')
-          }), jsx("div", {
-            className: "flex-grow"
-          }), jsx("button", {
-            onClick: () => setShow(false),
-            className: "bg-transparent border-none rounded-lg w-10 h-10 cursor-pointer mb-2 hover:bg-gray-200 dark:hover:bg-[#2a2a2a]",
-            children: jsx(CloseIcon, {
-              fontSize: '36px'
-            })
-          })]
+        children: [jsx(SettingsDrawerHeader, {
+          onClose: () => setShow(false)
         }), jsxs("div", {
           className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
           children: [jsx(MenuVisibilitySettings, {
             fullMenuData: fullMenuData,
             settings: settingState,
             changeSetting: handleSettingChange
-          }), jsxs("div", {
-            className: "flex items-center justify-between",
-            children: [jsxs("div", {
-              children: [jsx("p", {
-                className: "text-sm text-black dark:text-white font-medium",
-                children: "Apply to All Routes"
-              }), jsx("p", {
-                className: "text-xs text-gray-600 dark:text-gray-400",
-                children: "When enabled, route-specific settings will apply to all routes instead of just the current route"
-              })]
-            }), jsxs("label", {
-              className: "relative inline-flex items-center cursor-pointer",
-              children: [jsx("input", {
-                type: "checkbox",
-                className: "sr-only peer",
-                checked: applyToAllRoutes,
-                onChange: e => setApplyToAllRoutes(e.target.checked)
-              }), jsx("div", {
-                className: "w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
-              })]
-            })]
-          }), jsx("div", {
-            className: "mt-4",
-            children: jsxs("div", {
-              className: "flex mb-4",
-              children: [jsx("button", {
-                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-l-lg border border-r-0 border-gray-300 ${activeDeviceTab === 'desktop' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'}`,
-                onClick: () => setActiveDeviceTab('desktop'),
-                children: jsxs("span", {
-                  className: "flex items-center justify-center",
-                  children: [jsxs("svg", {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    className: "mr-1",
-                    children: [jsx("rect", {
-                      x: "2",
-                      y: "3",
-                      width: "20",
-                      height: "14",
-                      rx: "2",
-                      ry: "2"
-                    }), jsx("line", {
-                      x1: "8",
-                      y1: "21",
-                      x2: "16",
-                      y2: "21"
-                    }), jsx("line", {
-                      x1: "12",
-                      y1: "17",
-                      x2: "12",
-                      y2: "21"
-                    })]
-                  }), t('desktop_tab')]
-                })
-              }), jsx("button", {
-                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-r-lg border border-gray-300 ${activeDeviceTab === 'mobile' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'}`,
-                onClick: () => setActiveDeviceTab('mobile'),
-                children: jsxs("span", {
-                  className: "flex items-center justify-center",
-                  children: [jsxs("svg", {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    className: "mr-1",
-                    children: [jsx("rect", {
-                      x: "5",
-                      y: "2",
-                      width: "14",
-                      height: "20",
-                      rx: "2",
-                      ry: "2"
-                    }), jsx("line", {
-                      x1: "12",
-                      y1: "18",
-                      x2: "12",
-                      y2: "18"
-                    })]
-                  }), t('mobile_tab')]
-                })
-              })]
-            })
+          }), jsx(ApplyToAllRoutesToggle, {
+            checked: applyToAllRoutes,
+            onChange: setApplyToAllRoutes
+          }), jsx(DeviceTabs, {
+            activeTab: activeDeviceTab,
+            onTabChange: setActiveDeviceTab
           })]
         }), jsxs("div", {
           className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
@@ -726,7 +195,7 @@ const SettingDrawer = props => {
             }), jsx(ThemeSelector, {
               value: getThemeValue(),
               onChange: value => handleSettingChange('theme', value),
-              options: themeOptions
+              options: THEME_OPTIONS
             })]
           }), jsxs("div", {
             className: "mt-8 dark:border-[#2a2b2a]",
@@ -749,7 +218,7 @@ const SettingDrawer = props => {
             }), jsx(WebFontsSelector, {
               value: getFontFamilyValue(),
               onChange: value => handleSettingChange('fontFamily', value),
-              options: fontOptions
+              options: FONT_OPTIONS
             })]
           })]
         }), jsxs("div", {
@@ -792,62 +261,16 @@ const SettingDrawer = props => {
             onSettingsChange: handleSettingChange,
             pathname: currentPathname
           })
-        }), jsxs("div", {
-          className: "bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 mt-4",
-          children: [jsx("p", {
-            className: "text-sm text-yellow-700 dark:text-yellow-200",
-            children: "Setting panel shows in development environment only, please manually modify"
-          }), jsxs("div", {
-            className: "flex flex-wrap gap-2 mt-2",
-            children: [jsx("button", {
-              disabled: !changedSettings || Object.keys(changedSettings).length === 0,
-              className: clsx('flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2', !changedSettings || Object.keys(changedSettings).length === 0 ? 'border-gray-300 text-gray-500 bg-gray-50 cursor-not-allowed dark:border-gray-600 dark:text-gray-400 dark:bg-gray-800' : 'border-yellow-300 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 active:bg-yellow-200 dark:border-yellow-600 dark:text-yellow-200 dark:bg-yellow-900/50 dark:hover:bg-yellow-900'),
-              onClick: handleSaveSettings,
-              children: jsx("span", {
-                children: !changedSettings || Object.keys(changedSettings).length === 0 ? 'No Changes' : 'Save Settings'
-              })
-            }), jsx("button", {
-              className: clsx('flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2', copied ? 'border-green-300 text-green-700 bg-green-50 dark:border-green-600 dark:text-green-200 dark:bg-green-900' : 'border-yellow-300 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 active:bg-yellow-200 dark:border-yellow-600 dark:text-yellow-200 dark:bg-yellow-900/50 dark:hover:bg-yellow-900'),
-              onClick: handleCopySettings,
-              children: copied ? jsxs(Fragment, {
-                children: [jsx(CheckIcon, {
-                  className: "w-4 h-4"
-                }), jsx("span", {
-                  children: "Copied!"
-                })]
-              }) : jsxs(Fragment, {
-                children: [jsx(CopyIcon, {
-                  className: "w-4 h-4"
-                }), jsx("span", {
-                  children: "Copy All Settings"
-                })]
-              })
-            }), jsx("button", {
-              className: clsx('flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2', copiedModified ? 'border-green-300 text-green-700 bg-green-50 dark:border-green-600 dark:text-green-200 dark:bg-green-900' : 'border-blue-300 text-blue-700 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 dark:border-blue-600 dark:text-blue-200 dark:bg-blue-900/50 dark:hover:bg-blue-900'),
-              onClick: handleCopyModifiedSettings,
-              children: copiedModified ? jsxs(Fragment, {
-                children: [jsx(CheckIcon, {
-                  className: "w-4 h-4"
-                }), jsx("span", {
-                  children: "Copied!"
-                })]
-              }) : jsxs(Fragment, {
-                children: [jsx(CopyIcon, {
-                  className: "w-4 h-4"
-                }), jsx("span", {
-                  children: "Copy Modified Settings"
-                })]
-              })
-            }), jsx("button", {
-              className: "flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border border-red-300 text-red-700 bg-red-50 hover:bg-red-100 active:bg-red-200 dark:border-red-600 dark:text-red-200 dark:bg-red-900/50 dark:hover:bg-red-900 text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500",
-              onClick: handleResetSettings,
-              children: jsx("span", {
-                children: "\uD83D\uDD04 Reset All Settings"
-              })
-            })]
-          })]
+        }), jsx(SettingsActions, {
+          hasChanges: changedSettings && Object.keys(changedSettings).length > 0,
+          copied: copied,
+          copiedModified: copiedModified,
+          onSave: handleSaveSettings,
+          onCopyAll: handleCopySettings,
+          onCopyModified: handleCopyModifiedSettings,
+          onReset: handleResetSettings
         })]
       })]
     })
   });
-};export{SettingDrawer};//# sourceMappingURL=SettingDrawer.js.map
+}export{SettingDrawer};//# sourceMappingURL=SettingDrawer.js.map