@admin-layout/tailwind-design-pro 12.0.16-alpha.9 → 12.0.16-alpha.91

package/lib/components/SettingDrawer/SettingDrawer.js

@@ -1,270 +1,5 @@
-import {jsx,Fragment,jsxs}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {useSelector}from'@xstate/react';import {useTranslation}from'react-i18next';import isBrowser from'../../utils/isBrowser/index.js';import {parse}from'qs';import clsx from'clsx';import {defaultSettings,compareAndSaveSettingsDifferences}from'@admin-layout/client';import ThemeColor from'./ThemeColor.js';import CheckBoxTheme from'./CheckBoxTheme.js';import LayoutChange from'./LayoutChange.js';import RegionalSettings from'./RegionalSettings.js';import InvitationSettings from'./InvitationSettings.js';import {ThemeSelector}from'./ThemeSelector.js';import NavigationModes from'./NavigationsModes.js';import {icons}from'../../icons.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 {WebFontsSelector}from'./WebFontsSelector.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../hooks/useMediaQuery.js';let oldSetting = {};
-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) => {
-  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 (defaultSettings[key] || defaultSettings[key] === undefined) {
-        replaceSetting[key] = params[key];
-        if (key.includes('Render')) {
-          replaceSetting[key] = params[key] === 'false' ? false : undefined;
-        }
-      }
-    });
-    if (onSettingChange) {
-      onSettingChange({
-        ...settings,
-        ...replaceSetting
-      });
-    }
-    // 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 (defaultSettings.navTheme !== settings.navTheme && settings.navTheme) {
-    updateTheme(settings.navTheme === 'realDark', settings.primaryColor, publicPath);
-  }
-};
-const getThemeList = (settings, location) => {
-  const {
-    t
-  } = useTranslation('settings');
-  const {
-    isMobile
-  } = useMediaQuery();
-  const currentRoute = location?.pathname || '/';
-  const routeSettings = settings?.routeSettings?.[currentRoute] || settings?.routeSettings?.['/'] || settings;
-  const deviceType = isMobile ? 'mobile' : 'desktop';
-  const deviceLayout = routeSettings?.layout?.[deviceType] || {};
-  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'
-}];
-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 {useThemeList,initState,parseSettingPath}from'./utils/helper.js';function SettingDrawer(props) {
   const {
-    settings,
     onSettingChange,
     hideLoading,
     hideColors,
@@ -275,102 +10,140 @@ const SettingDrawer = props => {
     colorList,
     navTheme,
     pathname,
-    location
+    location,
+    fullMenuData,
+    routePattern
   } = props;
   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 {
     t
   } = useTranslation('settings');
-  const state = useSelector(actor, state => state);
-  const btnRef = useRef();
-  const settingState = state?.context;
-  const currentRoute = location?.pathname || '/';
-  // const routeSettings =
-  //     settingState?.routeSettings?.[currentRoute] || settingState?.routeSettings?.['/'] || settingState;
-  const deviceType = isMobile ? 'mobile' : 'desktop';
-  // const deviceLayout = routeSettings?.layout?.[deviceType] || {};
-  const themeList = getThemeList(settingState, location);
-  /**
-   * Modify settings
-   * @param key
-   * @param value
-   */
-  const handleSettingChange = (key, value) => {
-    // If the key is a layout setting, update it in the device-specific path
-    if (key.startsWith('layout.')) {
-      const layoutKey = key.replace('layout.', '');
+  // State
+  const [show, setShow] = useState(false);
+  const [activeDeviceTab, setActiveDeviceTab] = useState(isMobile ? 'mobile' : 'desktop');
+  const [applyToAllRoutes, setApplyToAllRoutes] = useState(false);
+  // Selectors - guard actor so that useSelector isn't called with undefined/invalid actor
+  const settingState = actor ? useSelector(actor, state => state.context.public) : {};
+  const changedSettings = actor ? useSelector(actor, state => state.context.internal.changedSettings) : {};
+  // 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 = useThemeList(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;
+    if (prevSettings) {
+      const prevString = JSON.stringify(prevSettings);
+      const currentString = JSON.stringify(currentSettings);
+      const hasChanged = prevString !== currentString;
+      if (hasChanged) {
+        console.log('🔍 What changed in PUBLIC settings:', {
+          changedKeys: Object.keys(currentSettings).filter(key => {
+            const prevValue = JSON.stringify(prevSettings[key]);
+            const currentValue = JSON.stringify(currentSettings[key]);
+            return prevValue !== currentValue;
+          })
+        });
+      }
+    }
+    prevSettingsRef.current = JSON.parse(JSON.stringify(currentSettings));
+  }, [settingState]);
+  useEffect(() => {
+    if (isBrowser()) {
+      const hasUrlParams = !!window.location.search;
+      const shouldInit = !hasInitializedRef.current || hasUrlParams;
+      if (shouldInit) {
+        console.log('🔥 Calling initState:', {
+          reason: !hasInitializedRef.current ? 'first mount' : 'has URL params'
+        });
+        initState(settingState, onSettingChange, props.publicPath, undefined);
+        hasInitializedRef.current = true;
+      } else {
+        console.log('⏭️ Skipping initState - already initialized and no URL params');
+      }
+    }
+  }, [settingState, props.publicPath]);
+  useEffect(() => {
+    setActiveDeviceTab(isMobile ? 'mobile' : 'desktop');
+  }, [isMobile]);
+  useEffect(() => {
+    if (actor) {
       actor.send({
-        type: 'UPDATE',
-        value: {
-          [`routeSettings.${currentRoute}.layout.${deviceType}.${layoutKey}`]: value
-        }
+        type: 'UISETTING_UPDATE_DEVICE_TYPE',
+        deviceType: activeDeviceTab
+      });
+    }
+  }, [activeDeviceTab, actor]);
+  // 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
       });
-    } else {
       actor.send({
-        type: 'UPDATE',
+        type: 'UISETTING_UPDATE',
         value: {
           [key]: value
         }
       });
+      return;
     }
-  };
-  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 modifiedSettings = compareAndSaveSettingsDifferences(settingState, defaultSettings);
-      const settings = JSON.stringify(modifiedSettings, null, 2);
-      await navigator.clipboard.writeText(settings);
-      setCopiedModified(true);
-      setTimeout(() => setCopiedModified(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy modified settings:', err);
-    }
-  };
-  useEffect(() => {
-    // Only update if there's a meaningful difference
-    if (JSON.stringify(settingState) !== JSON.stringify(settings)) {
-      oldSetting = {
-        ...defaultSettings,
-        ...settings
-      };
-      if (isBrowser()) {
-        // Compare settings with oldSetting to determine if initialization is needed
-        if (JSON.stringify(settings) !== JSON.stringify(oldSetting)) {
-          initState(settings, onSettingChange, props.publicPath);
-        }
-      }
-    }
-  }, [settings]); // Only depend on settings
-  const currentPathname = isBrowser() ? window.location.pathname : pathname || '';
+    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: settings?.showSettingPanel && jsxs(Fragment, {
+    children: settingState?.showSettingPanel && jsxs(Fragment, {
       children: [jsx("button", {
         ref: btnRef,
         onClick: () => setShow(!show),
         style: {
-          backgroundColor: settings?.primaryColor,
+          backgroundColor: settingState?.primaryColor,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center'
@@ -385,19 +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
+          }), 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]",
@@ -408,8 +182,9 @@ const SettingDrawer = props => {
             children: jsx(CheckBoxTheme, {
               list: themeList.themeList,
               changeSetting: handleSettingChange,
-              settings: settingState,
-              ...props
+              settings: settingsForComponents,
+              location: location,
+              applyToAllRoutes: applyToAllRoutes
             })
           }), jsxs("div", {
             className: "mt-8",
@@ -417,9 +192,9 @@ const SettingDrawer = props => {
               className: "text-black dark:text-white",
               children: t('Select Theme')
             }), jsx(ThemeSelector, {
-              value: settingState.theme || 'default',
+              value: getThemeValue(),
               onChange: value => handleSettingChange('theme', value),
-              options: themeOptions
+              options: THEME_OPTIONS
             })]
           }), jsxs("div", {
             className: "mt-8 dark:border-[#2a2b2a]",
@@ -429,7 +204,10 @@ const SettingDrawer = props => {
             }), jsx(ThemeColor, {
               color: colorList || themeList.colorList[navTheme === 'realDark' ? 'dark' : 'light'],
               changeSetting: handleSettingChange,
-              settings: settingState
+              settings: settingsForComponents,
+              location: location,
+              routePattern: routePattern,
+              applyToAllRoutes: applyToAllRoutes
             })]
           }), jsxs("div", {
             className: "mt-8",
@@ -437,92 +215,64 @@ const SettingDrawer = props => {
               className: "text-black dark:text-white",
               children: t('Font Family')
             }), jsx(WebFontsSelector, {
-              value: settingState.fontFamily || 'Poppins, sans-serif',
+              value: getFontFamilyValue(),
               onChange: value => handleSettingChange('fontFamily', value),
-              options: fontOptions
+              options: FONT_OPTIONS
             })]
           })]
         }), jsxs("div", {
           className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
           children: [jsx(NavigationModes, {
-            settings: settingState,
+            settings: settingsForComponents,
             changeSetting: handleSettingChange,
-            ...props
+            applyToAllRoutes: applyToAllRoutes,
+            location: location,
+            routePattern: routePattern
           }), jsx("div", {
             className: "mt-8",
             children: jsx(LayoutChange, {
-              settings: settingState,
+              settings: settingsForComponents,
               changeSetting: handleSettingChange,
-              ...props
+              applyToAllRoutes: applyToAllRoutes,
+              location: location,
+              routePattern: routePattern
             })
           }), jsx("div", {
             className: "mt-8",
             children: jsx(InvitationSettings, {
-              settings: settingState,
+              settings: settingsForComponents,
               changeSetting: handleSettingChange,
-              location: location
+              location: location,
+              routePattern: routePattern,
+              applyToAllRoutes: applyToAllRoutes
             })
           })]
-        }), jsxs("div", {
+        }), jsx("div", {
           className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
-          children: [jsx("p", {
-            className: "mb-2 text-black dark:text-white",
-            children: t('regional_rettings')
-          }), jsx(RegionalSettings, {
-            settings: settingState,
+          children: jsx(RegionalSettings, {
+            settings: settingsForComponents,
             changeSetting: handleSettingChange,
-            ...props
-          })]
+            applyToAllRoutes: applyToAllRoutes,
+            location: location,
+            routePattern: routePattern
+          })
         }), jsx("div", {
           className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
           children: jsx(AdditionalSettingsSlot, {
-            settings: settingState,
+            settings: settingsForComponents,
             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", {
-              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(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