@umituz/react-native-settings 1.6.2 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.6.2",
+  "version": "1.8.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -41,7 +41,7 @@ export { LanguageSelectionScreen } from './presentation/screens/LanguageSelectio
 // PRESENTATION LAYER - Types
 // =============================================================================
 
-export type { SettingsConfig } from './presentation/screens/types';
+export type { SettingsConfig, CustomSettingsSection } from './presentation/screens/types';
 
 // =============================================================================
 // PRESENTATION LAYER - Components

package/src/presentation/screens/SettingsScreen.tsx

@@ -1,82 +1,29 @@
 /**
  * Settings Screen
- * Modern settings screen with user profile header and organized sections
+ * Presentation layer - Composition only, no business logic
  */
 
-import React, { useMemo, useState } from "react";
-import {
-  View,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Alert,
-  DeviceEventEmitter,
-} from "react-native";
+import React from "react";
+import { View, ScrollView, StatusBar, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useNavigation, CommonActions } from "@react-navigation/native";
+import { useNavigation } from "@react-navigation/native";
 import {
   useDesignSystemTheme,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system-theme";
-import { Palette, Bell, Info, FileText } from "lucide-react-native";
 import { useLocalization } from "@umituz/react-native-localization";
-import { SettingItem } from "../components/SettingItem";
-import { SettingsSection } from "../components/SettingsSection";
 import { SettingsFooter } from "../components/SettingsFooter";
 import { UserProfileHeader } from "../components/UserProfileHeader";
-import { SettingsConfig } from "./types";
-
-// Optional notification service
-let notificationService: any = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  notificationService = require("@umituz/react-native-notifications")
-    .notificationService;
-} catch {
-  // Package not available
-}
-
-// Optional onboarding store
-let useOnboardingStore: any = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const onboardingPackage = require("@umituz/react-native-onboarding");
-  useOnboardingStore = onboardingPackage.useOnboardingStore;
-} catch {
-  // Package not available
-}
-
-/**
- * Check if navigation screen exists
- */
-const hasNavigationScreen = (
-  navigation: any,
-  screenName: string,
-): boolean => {
-  try {
-    const state = navigation.getState();
-    if (!state) return false;
-
-    const checkRoutes = (routes: any[]): boolean => {
-      if (!routes || !Array.isArray(routes)) return false;
-
-      for (const route of routes) {
-        if (route.name === screenName) return true;
-        if (route.state?.routes && checkRoutes(route.state.routes)) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    return checkRoutes(state.routes || []);
-  } catch {
-    return false;
-  }
-};
+import { SettingsSection } from "../components/SettingsSection";
+import { AppearanceSection } from "./components/AppearanceSection";
+import { NotificationsSection } from "./components/NotificationsSection";
+import { AboutLegalSection } from "./components/AboutLegalSection";
+import { normalizeSettingsConfig } from "./utils/normalizeConfig";
+import { useFeatureDetection } from "./hooks/useFeatureDetection";
+import type { CustomSettingsSection } from "./types";
 
 export interface SettingsScreenProps {
-  config?: SettingsConfig;
+  config?: any;
   /** Show user profile header */
   showUserProfile?: boolean;
   /** User profile props */
@@ -92,6 +39,8 @@ export interface SettingsScreenProps {
   showFooter?: boolean;
   /** Custom footer text */
   footerText?: string;
+  /** Custom sections to render */
+  customSections?: CustomSettingsSection[];
 }
 
 export const SettingsScreen: React.FC<SettingsScreenProps> = ({
@@ -100,67 +49,26 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   userProfile,
   showFooter = true,
   footerText,
+  customSections = [],
 }) => {
   const navigation = useNavigation();
   const { themeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
-  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
 
   const isDark = themeMode === "dark";
   const colors = tokens.colors;
 
-  const features = useMemo(() => {
-    const appearanceConfig = config?.appearance ?? "auto";
-    const notificationsConfig = config?.notifications ?? "auto";
-    const aboutConfig = config?.about ?? "auto";
-    const legalConfig = config?.legal ?? "auto";
-
-    return {
-      appearance:
-        appearanceConfig === true ||
-        (appearanceConfig === "auto" &&
-          hasNavigationScreen(navigation, "Appearance")),
-      notifications:
-        notificationsConfig === true ||
-        (notificationsConfig === "auto" &&
-          notificationService !== null &&
-          hasNavigationScreen(navigation, "Notifications")),
-      about:
-        aboutConfig === true ||
-        (aboutConfig === "auto" && hasNavigationScreen(navigation, "About")),
-      legal:
-        legalConfig === true ||
-        (legalConfig === "auto" && hasNavigationScreen(navigation, "Legal")),
-    };
-  }, [config, navigation]);
-
-  const handleNotificationsToggle = async (value: boolean) => {
-    if (notificationService && !value) {
-      const hasPermissions = await notificationService.hasPermissions();
-      if (!hasPermissions) {
-        await notificationService.requestPermissions();
-      }
-    }
-    setNotificationsEnabled(value);
-  };
-
-  const handleNotificationsPress = async () => {
-    if (notificationService) {
-      const hasPermissions = await notificationService.hasPermissions();
-      if (!hasPermissions) {
-        await notificationService.requestPermissions();
-      }
-    }
-    navigation.navigate("Notifications" as never);
-  };
+  const normalizedConfig = normalizeSettingsConfig(config);
+  const features = useFeatureDetection(normalizedConfig, navigation);
 
   const hasAnyFeatures =
     features.appearance ||
     features.notifications ||
     features.about ||
-    features.legal;
+    features.legal ||
+    customSections.length > 0;
 
   return (
     <View style={[styles.container, { backgroundColor: colors.backgroundPrimary }]}>
@@ -189,49 +97,35 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
         )}
 
         {features.appearance && (
-          <SettingsSection title={t("settings.sections.app.title")}>
-            <SettingItem
-              icon={Palette}
-              title={t("settings.appearance.title")}
-              value={t("settings.appearance.description")}
-              onPress={() => navigation.navigate("Appearance" as never)}
-            />
-          </SettingsSection>
+          <AppearanceSection config={normalizedConfig.appearance.config} />
         )}
 
         {features.notifications && (
-          <SettingsSection title={t("settings.sections.general")}>
-            <SettingItem
-              icon={Bell}
-              title={t("settings.notifications.title")}
-              showSwitch={true}
-              switchValue={notificationsEnabled}
-              onSwitchChange={handleNotificationsToggle}
-              isLast={true}
-            />
-          </SettingsSection>
+          <NotificationsSection config={normalizedConfig.notifications.config} />
         )}
 
         {(features.about || features.legal) && (
-          <SettingsSection title={t("settings.sections.about")}>
-            {features.about && (
-              <SettingItem
-                icon={Info}
-                title={t("settings.about.title")}
-                value={t("settings.about.description")}
-                onPress={() => navigation.navigate("About" as never)}
-              />
-            )}
-            {features.legal && (
-              <SettingItem
-                icon={FileText}
-                title={t("settings.legal.title")}
-                value={t("settings.legal.description")}
-                onPress={() => navigation.navigate("Legal" as never)}
-                isLast={true}
-              />
-            )}
-          </SettingsSection>
+          <AboutLegalSection
+            showAbout={features.about}
+            showLegal={features.legal}
+            aboutConfig={normalizedConfig.about.config}
+            legalConfig={normalizedConfig.legal.config}
+          />
+        )}
+
+        {customSections && customSections.length > 0 && (
+          <>
+            {customSections
+              .sort((a, b) => (a.order ?? 999) - (b.order ?? 999))
+              .map((section, index) => (
+                <SettingsSection
+                  key={section.id || `custom-${index}`}
+                  title={section.title}
+                >
+                  {section.content}
+                </SettingsSection>
+              ))}
+          </>
         )}
 
         {!hasAnyFeatures && (

package/src/presentation/screens/components/AboutLegalSection.tsx

@@ -0,0 +1,66 @@
+/**
+ * About & Legal Section Component
+ * Single Responsibility: Render about and legal settings section
+ */
+
+import React from "react";
+import { Info, FileText } from "lucide-react-native";
+import { useNavigation } from "@react-navigation/native";
+import { useLocalization } from "@umituz/react-native-localization";
+import { SettingItem } from "../../components/SettingItem";
+import { SettingsSection } from "../../components/SettingsSection";
+import type { AboutConfig, LegalConfig } from "../types";
+
+interface AboutLegalSectionProps {
+  showAbout: boolean;
+  showLegal: boolean;
+  aboutConfig?: AboutConfig;
+  legalConfig?: LegalConfig;
+}
+
+export const AboutLegalSection: React.FC<AboutLegalSectionProps> = ({
+  showAbout,
+  showLegal,
+  aboutConfig,
+  legalConfig,
+}) => {
+  const navigation = useNavigation();
+  const { t } = useLocalization();
+
+  if (!showAbout && !showLegal) {
+    return null;
+  }
+
+  const aboutRoute = aboutConfig?.route || "About";
+  const aboutTitle = aboutConfig?.title || t("settings.about.title");
+  const aboutDescription =
+    aboutConfig?.description || t("settings.about.description");
+
+  const legalRoute = legalConfig?.route || "Legal";
+  const legalTitle = legalConfig?.title || t("settings.legal.title");
+  const legalDescription =
+    legalConfig?.description || t("settings.legal.description");
+
+  return (
+    <SettingsSection title={t("settings.sections.about")}>
+      {showAbout && (
+        <SettingItem
+          icon={Info}
+          title={aboutTitle}
+          value={aboutDescription}
+          onPress={() => navigation.navigate(aboutRoute as never)}
+        />
+      )}
+      {showLegal && (
+        <SettingItem
+          icon={FileText}
+          title={legalTitle}
+          value={legalDescription}
+          onPress={() => navigation.navigate(legalRoute as never)}
+          isLast={true}
+        />
+      )}
+    </SettingsSection>
+  );
+};
+

package/src/presentation/screens/components/AppearanceSection.tsx

@@ -0,0 +1,39 @@
+/**
+ * Appearance Section Component
+ * Single Responsibility: Render appearance settings section
+ */
+
+import React from "react";
+import { Palette } from "lucide-react-native";
+import { useNavigation } from "@react-navigation/native";
+import { useLocalization } from "@umituz/react-native-localization";
+import { SettingItem } from "../../components/SettingItem";
+import { SettingsSection } from "../../components/SettingsSection";
+import type { AppearanceConfig } from "../types";
+
+interface AppearanceSectionProps {
+  config?: AppearanceConfig;
+}
+
+export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
+  config,
+}) => {
+  const navigation = useNavigation();
+  const { t } = useLocalization();
+
+  const route = config?.route || "Appearance";
+  const title = config?.title || t("settings.appearance.title");
+  const description = config?.description || t("settings.appearance.description");
+
+  return (
+    <SettingsSection title={t("settings.sections.app.title")}>
+      <SettingItem
+        icon={Palette}
+        title={title}
+        value={description}
+        onPress={() => navigation.navigate(route as never)}
+      />
+    </SettingsSection>
+  );
+};
+

package/src/presentation/screens/components/NotificationsSection.tsx

@@ -0,0 +1,92 @@
+/**
+ * Notifications Section Component
+ * Single Responsibility: Render notifications settings section
+ */
+
+import React, { useState, useEffect } from "react";
+import { Bell } from "lucide-react-native";
+import { useNavigation } from "@react-navigation/native";
+import { useLocalization } from "@umituz/react-native-localization";
+import { SettingItem } from "../../components/SettingItem";
+import { SettingsSection } from "../../components/SettingsSection";
+import type { NotificationsConfig } from "../types";
+
+// Optional notification service
+let notificationService: any = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  notificationService = require("@umituz/react-native-notifications")
+    .notificationService;
+} catch {
+  // Package not available
+}
+
+interface NotificationsSectionProps {
+  config?: NotificationsConfig;
+}
+
+export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
+  config,
+}) => {
+  const navigation = useNavigation();
+  const { t } = useLocalization();
+  const [notificationsEnabled, setNotificationsEnabled] = useState(
+    config?.initialValue ?? true,
+  );
+
+  useEffect(() => {
+    if (config?.initialValue !== undefined) {
+      setNotificationsEnabled(config.initialValue);
+    }
+  }, [config?.initialValue]);
+
+  const handleToggle = async (value: boolean) => {
+    if (notificationService && !value) {
+      const hasPermissions = await notificationService.hasPermissions();
+      if (!hasPermissions) {
+        await notificationService.requestPermissions();
+      }
+    }
+
+    setNotificationsEnabled(value);
+    config?.onToggleChange?.(value);
+  };
+
+  const handlePress = async () => {
+    if (notificationService) {
+      const hasPermissions = await notificationService.hasPermissions();
+      if (!hasPermissions) {
+        await notificationService.requestPermissions();
+      }
+    }
+    navigation.navigate((config?.route || "Notifications") as never);
+  };
+
+  const title = config?.title || t("settings.notifications.title");
+  const description = config?.description || t("settings.notifications.description");
+  const showToggle = config?.showToggle ?? true;
+
+  return (
+    <SettingsSection title={t("settings.sections.general")}>
+      {showToggle ? (
+        <SettingItem
+          icon={Bell}
+          title={title}
+          showSwitch={true}
+          switchValue={notificationsEnabled}
+          onSwitchChange={handleToggle}
+          isLast={true}
+        />
+      ) : (
+        <SettingItem
+          icon={Bell}
+          title={title}
+          value={description}
+          onPress={handlePress}
+          isLast={true}
+        />
+      )}
+    </SettingsSection>
+  );
+};
+

package/src/presentation/screens/components/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Settings Screen Components
+ * Barrel export for all section components
+ */
+
+export { AppearanceSection } from "./AppearanceSection";
+export { NotificationsSection } from "./NotificationsSection";
+export { AboutLegalSection } from "./AboutLegalSection";
+

package/src/presentation/screens/hooks/useFeatureDetection.ts

@@ -0,0 +1,100 @@
+/**
+ * Feature Detection Hook
+ * Single Responsibility: Detect which features should be shown
+ */
+
+import { useMemo } from "react";
+import type { NormalizedConfig } from "../utils/normalizeConfig";
+
+// Optional notification service
+let notificationService: any = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  notificationService = require("@umituz/react-native-notifications")
+    .notificationService;
+} catch {
+  // Package not available
+}
+
+/**
+ * Check if navigation screen exists
+ */
+function hasNavigationScreen(
+  navigation: any,
+  screenName: string,
+): boolean {
+  try {
+    const state = navigation.getState();
+    if (!state) return false;
+
+    const checkRoutes = (routes: any[]): boolean => {
+      if (!routes || !Array.isArray(routes)) return false;
+
+      for (const route of routes) {
+        if (route.name === screenName) return true;
+        if (route.state?.routes && checkRoutes(route.state.routes)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    return checkRoutes(state.routes || []);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Hook to detect which features should be shown
+ */
+export function useFeatureDetection(
+  normalizedConfig: NormalizedConfig,
+  navigation: any,
+) {
+  return useMemo(() => {
+    const { appearance, notifications, about, legal, account, support, developer } =
+      normalizedConfig;
+
+    return {
+      appearance:
+        appearance.enabled &&
+        (appearance.config?.enabled === true ||
+          (appearance.config?.enabled !== false &&
+            hasNavigationScreen(
+              navigation,
+              appearance.config?.route || "Appearance",
+            ))),
+      notifications:
+        notifications.enabled &&
+        (notifications.config?.enabled === true ||
+          (notifications.config?.enabled !== false &&
+            notificationService !== null &&
+            hasNavigationScreen(
+              navigation,
+              notifications.config?.route || "Notifications",
+            ))),
+      about:
+        about.enabled &&
+        (about.config?.enabled === true ||
+          (about.config?.enabled !== false &&
+            hasNavigationScreen(navigation, about.config?.route || "About"))),
+      legal:
+        legal.enabled &&
+        (legal.config?.enabled === true ||
+          (legal.config?.enabled !== false &&
+            hasNavigationScreen(navigation, legal.config?.route || "Legal"))),
+      account:
+        account.enabled &&
+        (account.config?.enabled === true ||
+          (account.config?.enabled !== false &&
+            hasNavigationScreen(
+              navigation,
+              account.config?.route || "AccountSettings",
+            ))),
+      support: support.enabled,
+      developer: developer.enabled && __DEV__,
+    };
+  }, [normalizedConfig, navigation]);
+}
+

package/src/presentation/screens/types.ts

@@ -1,35 +1,245 @@
 /**
- * Settings Configuration
+ * Settings Configuration Types
  * 
- * Controls which settings features are visible in the SettingsScreen.
- * Each feature can be:
+ * Comprehensive configuration system for SettingsScreen
+ * Supports built-in features and custom sections
+ */
+
+import type { ComponentType, ReactNode } from "react";
+
+/**
+ * Feature visibility configuration
  * - true: Always show (if navigation screen exists)
  * - false: Never show
  * - 'auto': Automatically detect (check if navigation screen exists and package is available)
  */
+export type FeatureVisibility = boolean | "auto";
+
+/**
+ * Appearance Settings Configuration
+ */
+export interface AppearanceConfig {
+  /** Show appearance section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for appearance screen */
+  route?: string;
+  /** Show language selection */
+  showLanguage?: boolean;
+  /** Show theme toggle */
+  showTheme?: boolean;
+  /** Custom appearance title */
+  title?: string;
+  /** Custom appearance description */
+  description?: string;
+}
+
+/**
+ * Notifications Settings Configuration
+ */
+export interface NotificationsConfig {
+  /** Show notifications section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for notifications screen */
+  route?: string;
+  /** Show notifications toggle switch */
+  showToggle?: boolean;
+  /** Initial notifications state */
+  initialValue?: boolean;
+  /** Custom toggle handler */
+  onToggleChange?: (value: boolean) => void;
+  /** Custom notifications title */
+  title?: string;
+  /** Custom notifications description */
+  description?: string;
+}
+
+/**
+ * About Settings Configuration
+ */
+export interface AboutConfig {
+  /** Show about section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for about screen */
+  route?: string;
+  /** Custom about title */
+  title?: string;
+  /** Custom about description */
+  description?: string;
+}
+
+/**
+ * Legal Settings Configuration
+ */
+export interface LegalConfig {
+  /** Show legal section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for legal screen */
+  route?: string;
+  /** Custom legal title */
+  title?: string;
+  /** Custom legal description */
+  description?: string;
+}
+
+/**
+ * Account Settings Configuration
+ */
+export interface AccountConfig {
+  /** Show account section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for account screen */
+  route?: string;
+  /** Custom account title */
+  title?: string;
+  /** Custom account description */
+  description?: string;
+}
+
+/**
+ * Support Settings Configuration
+ */
+export interface SupportConfig {
+  /** Show support section */
+  enabled?: FeatureVisibility;
+  /** Support items configuration */
+  items?: {
+    /** Live support configuration */
+    liveSupport?: {
+      enabled?: boolean;
+      route?: string;
+      title?: string;
+      description?: string;
+    };
+    /** Help support configuration */
+    helpSupport?: {
+      enabled?: boolean;
+      route?: string;
+      title?: string;
+      description?: string;
+    };
+  };
+  /** Custom support section title */
+  title?: string;
+}
+
+/**
+ * Developer Settings Configuration
+ */
+export interface DeveloperConfig {
+  /** Show developer section (only in __DEV__ mode) */
+  enabled?: boolean;
+  /** Developer settings items */
+  items?: Array<{
+    title: string;
+    description?: string;
+    route?: string;
+    onPress?: () => void;
+    icon?: ComponentType<{ size?: number; color?: string }>;
+    iconColor?: string;
+    titleColor?: string;
+  }>;
+  /** Custom developer section title */
+  title?: string;
+}
+
+/**
+ * Main Settings Configuration
+ * 
+ * Controls which settings features are visible in the SettingsScreen.
+ * Each feature can be configured with:
+ * - Simple: boolean | 'auto' (quick setup)
+ * - Advanced: Detailed config object (full control)
+ * 
+ * @example
+ * // Simple configuration
+ * const config: SettingsConfig = {
+ *   appearance: true,
+ *   notifications: 'auto',
+ *   about: false,
+ * };
+ * 
+ * @example
+ * // Advanced configuration
+ * const config: SettingsConfig = {
+ *   appearance: {
+ *     enabled: true,
+ *     route: 'CustomAppearance',
+ *     showLanguage: true,
+ *     showTheme: true,
+ *   },
+ *   notifications: {
+ *     enabled: 'auto',
+ *     showToggle: true,
+ *     initialValue: false,
+ *     onToggleChange: (value) => console.log(value),
+ *   },
+ *   support: {
+ *     enabled: true,
+ *     items: {
+ *       liveSupport: {
+ *         enabled: true,
+ *         route: 'ChatSupport',
+ *         title: 'Live Chat',
+ *       },
+ *     },
+ *   },
+ * };
+ */
 export interface SettingsConfig {
   /**
-   * Show Appearance settings (Theme & Language)
+   * Appearance settings (Theme & Language)
    * @default 'auto'
    */
-  appearance?: boolean | 'auto';
+  appearance?: FeatureVisibility | AppearanceConfig;
 
   /**
-   * Show Notifications settings
+   * Notifications settings
    * @default 'auto'
    */
-  notifications?: boolean | 'auto';
+  notifications?: FeatureVisibility | NotificationsConfig;
 
   /**
-   * Show About settings
+   * About settings
    * @default 'auto'
    */
-  about?: boolean | 'auto';
+  about?: FeatureVisibility | AboutConfig;
 
   /**
-   * Show Legal settings (Terms, Privacy Policy)
+   * Legal settings (Terms, Privacy Policy)
    * @default 'auto'
    */
-  legal?: boolean | 'auto';
+  legal?: FeatureVisibility | LegalConfig;
+
+  /**
+   * Account settings
+   * @default false
+   */
+  account?: FeatureVisibility | AccountConfig;
+
+  /**
+   * Support settings
+   * @default false
+   */
+  support?: FeatureVisibility | SupportConfig;
+
+  /**
+   * Developer settings (only shown in __DEV__ mode)
+   * @default false
+   */
+  developer?: boolean | DeveloperConfig;
 }
 
+/**
+ * Custom Settings Section
+ * Allows apps to add custom sections to the settings screen
+ */
+export interface CustomSettingsSection {
+  /** Section title */
+  title: string;
+  /** Section content (React nodes) */
+  content: ReactNode;
+  /** Section order (lower = higher in list) */
+  order?: number;
+  /** Section ID for identification */
+  id?: string;
+}

package/src/presentation/screens/utils/normalizeConfig.ts

@@ -0,0 +1,89 @@
+/**
+ * Config Normalization Utilities
+ * Single Responsibility: Normalize config values to consistent format
+ */
+
+import type {
+  FeatureVisibility,
+  AppearanceConfig,
+  NotificationsConfig,
+  AboutConfig,
+  LegalConfig,
+  AccountConfig,
+  SupportConfig,
+  DeveloperConfig,
+} from "../types";
+
+export interface NormalizedConfig {
+  appearance: {
+    enabled: boolean;
+    config?: AppearanceConfig;
+  };
+  notifications: {
+    enabled: boolean;
+    config?: NotificationsConfig;
+  };
+  about: {
+    enabled: boolean;
+    config?: AboutConfig;
+  };
+  legal: {
+    enabled: boolean;
+    config?: LegalConfig;
+  };
+  account: {
+    enabled: boolean;
+    config?: AccountConfig;
+  };
+  support: {
+    enabled: boolean;
+    config?: SupportConfig;
+  };
+  developer: {
+    enabled: boolean;
+    config?: DeveloperConfig;
+  };
+}
+
+/**
+ * Normalize a config value to enabled boolean and optional config object
+ */
+function normalizeConfigValue<T>(
+  value: FeatureVisibility | T | undefined,
+  defaultValue: FeatureVisibility,
+): { enabled: boolean; config?: T } {
+  if (value === undefined) {
+    return { enabled: defaultValue === true };
+  }
+
+  if (typeof value === "boolean" || value === "auto") {
+    return { enabled: value === true };
+  }
+
+  // It's a config object
+  const config = value as T;
+  const enabled =
+    (config as { enabled?: FeatureVisibility })?.enabled ?? defaultValue;
+  return {
+    enabled: enabled === true,
+    config,
+  };
+}
+
+/**
+ * Normalize entire SettingsConfig to consistent format
+ */
+export function normalizeSettingsConfig(
+  config: any,
+): NormalizedConfig {
+  return {
+    appearance: normalizeConfigValue(config?.appearance, "auto"),
+    notifications: normalizeConfigValue(config?.notifications, "auto"),
+    about: normalizeConfigValue(config?.about, "auto"),
+    legal: normalizeConfigValue(config?.legal, "auto"),
+    account: normalizeConfigValue(config?.account, false),
+    support: normalizeConfigValue(config?.support, false),
+    developer: normalizeConfigValue(config?.developer, false),
+  };
+}
+