@admin-layout/tailwind-design-pro 12.0.16-alpha.7 → 12.0.16-alpha.71

package/lib/components/SettingDrawer/SettingDrawer.js

@@ -1,5 +1,4 @@
-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') => {
+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;
@@ -42,7 +41,7 @@ const updateTheme = (dark, color, publicPath = '/theme') => {
   }
   // localStorage.setItem('site-theme', dark ? 'dark' : 'light');
 };
-const initState = (settings, onSettingChange, publicPath) => {
+const initState = (settings, onSettingChange, publicPath, oldSetting) => {
   if (!isBrowser()) {
     return;
   }
@@ -51,21 +50,25 @@ const initState = (settings, onSettingChange, publicPath) => {
     const params = parse(window.location.search.replace('?', ''));
     const replaceSetting = {};
     Object.keys(params).forEach(key => {
-      if (defaultSettings[key] || defaultSettings[key] === undefined) {
+      if (settings[key] !== undefined || settings[key] === undefined) {
         replaceSetting[key] = params[key];
         if (key.includes('Render')) {
           replaceSetting[key] = params[key] === 'false' ? false : undefined;
         }
       }
     });
-    if (onSettingChange) {
+    // 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) {
+    if (oldSetting?.navTheme !== params.navTheme && params.navTheme) {
       updateTheme(settings.navTheme === 'realDark', params.primaryColor, publicPath);
       loadedStyle = true;
     }
@@ -74,21 +77,37 @@ const initState = (settings, onSettingChange, publicPath) => {
     return;
   }
   // If there is no topic in the URL, and no load in the URL is loaded.
-  if (defaultSettings.navTheme !== settings.navTheme && settings.navTheme) {
+  if (oldSetting?.navTheme !== settings.navTheme && settings.navTheme) {
     updateTheme(settings.navTheme === 'realDark', settings.primaryColor, publicPath);
   }
 };
-const getThemeList = (settings, location) => {
+const getThemeList = (settings, location, routePattern) => {
   const {
     t
   } = useTranslation('settings');
   const {
     isMobile
   } = useMediaQuery();
-  const currentRoute = location?.pathname || '/';
-  const routeSettings = settings?.routeSettings?.[currentRoute] || settings?.routeSettings?.['/'] || settings;
+  const currentRoute = routePattern || location?.pathname || '/';
   const deviceType = isMobile ? 'mobile' : 'desktop';
-  const deviceLayout = routeSettings?.layout?.[deviceType] || {};
+  // 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
@@ -264,7 +283,6 @@ const fontOptions = [{
 }];
 const SettingDrawer = props => {
   const {
-    settings,
     onSettingChange,
     hideLoading,
     hideColors,
@@ -275,8 +293,12 @@ const SettingDrawer = props => {
     colorList,
     navTheme,
     pathname,
-    location
+    location,
+    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,
@@ -289,41 +311,122 @@ const SettingDrawer = props => {
   } = 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');
-  const state = useSelector(actor, state => state);
+  // 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();
-  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);
+  // 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
+  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();
+  useEffect(() => {
+    const prevSettings = prevSettingsRef.current;
+    const currentSettings = settingState;
+    if (prevSettings) {
+      const prevString = JSON.stringify(prevSettings);
+      const currentString = JSON.stringify(currentSettings);
+      const hasChanged = prevString !== currentString;
+      console.log('⚡ SettingDrawer - PUBLIC settings update:', {
+        hasChanged,
+        prevKeys: prevSettings ? Object.keys(prevSettings).length : 0,
+        currentKeys: currentSettings ? Object.keys(currentSettings).length : 0
+      });
+      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]);
+  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);
   /**
    * 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.', '');
-      actor.send({
-        type: 'UPDATE',
-        value: {
-          [`routeSettings.${currentRoute}.layout.${deviceType}.${layoutKey}`]: value
-        }
+    // Menu visibility and applyToAllRoutes are always global
+    const isGlobalSetting = key === 'hiddenMenuKeys' || key === 'hiddenMenuCategories' || key === 'applyToAllRoutes';
+    // If this is a global setting, save as global
+    if (isGlobalSetting) {
+      console.log('🌐 Sending GLOBAL setting to actor:', {
+        key,
+        value
       });
-    } else {
       actor.send({
-        type: 'UPDATE',
+        type: 'UISETTING_UPDATE',
         value: {
           [key]: value
         }
       });
+      return;
+    }
+    // Extract the setting name from the key
+    // Key is just "settingName" (no uilayout wrapper)
+    const settingName = key;
+    // Build the correct bracket pattern based on applyToAllRoutes
+    let fullKey;
+    if (applyToAllRoutes) {
+      // Apply to all routes: [device].settingName
+      fullKey = `[${deviceType}].${settingName}`;
+    } else {
+      // Route-specific: [route][device].settingName
+      fullKey = `[${currentRoute}][${deviceType}].${settingName}`;
     }
+    console.log('📤 Sending SCOPED setting to actor:', {
+      fullKey,
+      value,
+      eventType: 'UISETTING_UPDATE'
+    });
+    actor.send({
+      type: 'UISETTING_UPDATE',
+      value: {
+        [fullKey]: value
+      }
+    });
   };
   const handleCopySettings = async () => {
     if (!isBrowser()) return;
@@ -339,38 +442,152 @@ const SettingDrawer = props => {
   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);
+      const settingsCookie = document.cookie.split(';').find(cookie => cookie.startsWith(' settings='));
+      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);
     }
   };
-  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);
+  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(() => {
+    // REVOLUTIONARY: No filtering needed! settingState already contains ONLY public settings
+    // The XState machine now has a separated structure:
+    // - context.public = user-facing settings (what we're using)
+    // - context.internal = machine state (never exposed)
+    //
+    // This completely eliminates the loop problem at the architectural level.
+    if (isBrowser()) {
+      const hasUrlParams = !!window.location.search;
+      console.log('🔄 SettingDrawer useEffect - PUBLIC settings:', {
+        hasUrlParams,
+        hasInitialized: hasInitializedRef.current,
+        settingsKeys: settingState ? Object.keys(settingState).length : 0
+      });
+      // Only call initState on first mount OR if there are URL params
+      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');
       }
     }
-  }, [settings]); // Only depend on settings
+  }, [settingState, props.publicPath]); // settingState only changes when PUBLIC settings change
+  // Update activeDeviceTab when isMobile changes
+  useEffect(() => {
+    setActiveDeviceTab(isMobile ? 'mobile' : 'desktop');
+  }, [isMobile]);
+  // Update machine when device tab changes
+  useEffect(() => {
+    if (actor) {
+      actor.send({
+        type: 'UISETTING_UPDATE_DEVICE_TYPE',
+        deviceType: activeDeviceTab
+      });
+    }
+  }, [activeDeviceTab, actor]);
   const currentPathname = isBrowser() ? window.location.pathname : pathname || '';
   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'
@@ -399,6 +616,107 @@ const SettingDrawer = props => {
               fontSize: '36px'
             })
           })]
+        }), 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')]
+                })
+              })]
+            })
+          })]
         }), jsxs("div", {
           className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
           children: [jsx("p", {
@@ -408,7 +726,9 @@ const SettingDrawer = props => {
             children: jsx(CheckBoxTheme, {
               list: themeList.themeList,
               changeSetting: handleSettingChange,
-              settings: settingState,
+              settings: settingsForComponents,
+              location: location,
+              applyToAllRoutes: applyToAllRoutes,
               ...props
             })
           }), jsxs("div", {
@@ -417,7 +737,7 @@ 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
             })]
@@ -429,7 +749,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,7 +760,7 @@ 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
             })]
@@ -445,38 +768,40 @@ const SettingDrawer = props => {
         }), jsxs("div", {
           className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
           children: [jsx(NavigationModes, {
-            settings: settingState,
+            settings: settingsForComponents,
             changeSetting: handleSettingChange,
+            applyToAllRoutes: applyToAllRoutes,
             ...props
           }), jsx("div", {
             className: "mt-8",
             children: jsx(LayoutChange, {
-              settings: settingState,
+              settings: settingsForComponents,
               changeSetting: handleSettingChange,
+              applyToAllRoutes: applyToAllRoutes,
               ...props
             })
           }), 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,
+            applyToAllRoutes: applyToAllRoutes,
             ...props
-          })]
+          })
         }), 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
           })
@@ -488,6 +813,13 @@ const SettingDrawer = props => {
           }), 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, {
@@ -519,6 +851,12 @@ const SettingDrawer = props => {
                   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"
+              })
             })]
           })]
         })]