Feature settings enahancement and bug fixe

lib/app/bloc/app_bloc.dart

@@ -101,6 +101,12 @@ class AppBloc extends Bloc<AppEvent, AppState> {
       final newAppTextScaleFactor = _mapTextScaleFactor(
         userAppSettings.displaySettings.textScaleFactor,
       );
+      // Map language code to Locale
+      final newLocale = Locale(userAppSettings.language);
+
+      print('[AppBloc] _onAppSettingsRefreshed: userAppSettings.fontFamily: ${userAppSettings.displaySettings.fontFamily}');
+      print('[AppBloc] _onAppSettingsRefreshed: userAppSettings.fontWeight: ${userAppSettings.displaySettings.fontWeight}');
+      print('[AppBloc] _onAppSettingsRefreshed: newFontFamily mapped to: $newFontFamily');
 
       emit(
         state.copyWith(
@@ -109,6 +115,7 @@ class AppBloc extends Bloc<AppEvent, AppState> {
           appTextScaleFactor: newAppTextScaleFactor,
           fontFamily: newFontFamily,
           settings: userAppSettings, // Store the fetched settings
+          locale: newLocale, // Store the new locale
         ),
       );
     } on NotFoundException {
@@ -120,6 +127,7 @@ class AppBloc extends Bloc<AppEvent, AppState> {
           themeMode: ThemeMode.system,
           flexScheme: FlexScheme.material,
           appTextScaleFactor: AppTextScaleFactor.medium, // Default enum value
+          locale: const Locale('en'), // Default to English if settings not found
           settings: UserAppSettings(
             id: state.user!.id,
           ), // Provide default settings
@@ -243,26 +251,17 @@ class AppBloc extends Bloc<AppEvent, AppState> {
     }
   }
 
-  String? _mapFontFamily(String fontFamily) {
-    // Assuming 'SystemDefault' means use the theme's default font
-    if (fontFamily == 'SystemDefault') return null;
-
-    // Map specific font family names to GoogleFonts
-    switch (fontFamily) {
-      case 'Roboto':
-        return GoogleFonts.roboto().fontFamily;
-      case 'OpenSans':
-        return GoogleFonts.openSans().fontFamily;
-      case 'Lato':
-        return GoogleFonts.lato().fontFamily;
-      case 'Montserrat':
-        return GoogleFonts.montserrat().fontFamily;
-      case 'Merriweather':
-        return GoogleFonts.merriweather().fontFamily;
-      default:
-        // If an unknown font family is specified, fall back to theme default
-        return null;
+  String? _mapFontFamily(String fontFamilyString) {
+    // If the input is 'SystemDefault', return null so FlexColorScheme uses its default.
+    if (fontFamilyString == 'SystemDefault') {
+      print('[AppBloc] _mapFontFamily: Input is SystemDefault, returning null.');
+      return null;
     }
+    // Otherwise, return the font family string directly.
+    // The GoogleFonts.xyz().fontFamily getters often return strings like "Roboto-Regular",
+    // but FlexColorScheme's fontFamily parameter or GoogleFonts.xyzTextTheme() expect simple names.
+    print('[AppBloc] _mapFontFamily: Input is $fontFamilyString, returning as is.');
+    return fontFamilyString;
   }
 
   // Map AppTextScaleFactor to AppTextScaleFactor (no change needed)

lib/app/bloc/app_state.dart

@@ -27,6 +27,7 @@ class AppState extends Equatable {
     this.fontFamily,
     this.status = AppStatus.initial,
     this.user, // User is now nullable and defaults to null
+    this.locale, // Added locale
   });
 
   /// The index of the currently selected item in the bottom navigation bar.
@@ -54,6 +55,9 @@ class AppState extends Equatable {
   /// User-specific application settings.
   final UserAppSettings settings; // Add settings property
 
+  /// The current application locale.
+  final Locale? locale; // Added locale
+
   /// Creates a copy of the current state with updated values.
   AppState copyWith({
     int? selectedBottomNavigationIndex,
@@ -64,7 +68,9 @@ class AppState extends Equatable {
     AppStatus? status,
     User? user,
     UserAppSettings? settings, // Add settings to copyWith
+    Locale? locale, // Added locale
     bool clearFontFamily = false,
+    bool clearLocale = false, // Added to allow clearing locale
   }) {
     return AppState(
       selectedBottomNavigationIndex:
@@ -76,6 +82,7 @@ class AppState extends Equatable {
       status: status ?? this.status,
       user: user ?? this.user,
       settings: settings ?? this.settings, // Copy settings
+      locale: clearLocale ? null : locale ?? this.locale, // Added locale
     );
   }
 
@@ -89,5 +96,6 @@ class AppState extends Equatable {
     status,
     user,
     settings, // Include settings in props
+    locale, // Added locale to props
   ];
 }

lib/app/view/app.dart

@@ -181,9 +181,13 @@ class _AppViewState extends State<_AppView> {
                 previous.themeMode != current.themeMode ||
                 previous.flexScheme != current.flexScheme ||
                 previous.fontFamily != current.fontFamily ||
-                previous.appTextScaleFactor !=
-                    current.appTextScaleFactor, // Use text scale factor
+                previous.appTextScaleFactor != current.appTextScaleFactor ||
+                previous.locale != current.locale, // Added locale check
         builder: (context, state) {
+          print('[_AppViewState] Building MaterialApp.router');
+          print('[_AppViewState] state.fontFamily: ${state.fontFamily}');
+          print('[_AppViewState] state.settings.displaySettings.fontFamily: ${state.settings.displaySettings.fontFamily}');
+          print('[_AppViewState] state.settings.displaySettings.fontWeight: ${state.settings.displaySettings.fontWeight}');
           return MaterialApp.router(
             debugShowCheckedModeBanner: false,
             themeMode: state.themeMode,
@@ -192,15 +196,18 @@ class _AppViewState extends State<_AppView> {
               scheme: state.flexScheme,
               appTextScaleFactor:
                   state.settings.displaySettings.textScaleFactor,
+              appFontWeight: state.settings.displaySettings.fontWeight, // Added
               fontFamily: state.settings.displaySettings.fontFamily,
             ),
             darkTheme: darkTheme(
               scheme: state.flexScheme,
               appTextScaleFactor:
                   state.settings.displaySettings.textScaleFactor,
+              appFontWeight: state.settings.displaySettings.fontWeight, // Added
               fontFamily: state.settings.displaySettings.fontFamily,
             ),
             routerConfig: _router,
+            locale: state.locale, // Use locale from AppBloc state
             localizationsDelegates: AppLocalizations.localizationsDelegates,
             supportedLocales: AppLocalizations.supportedLocales,
           );

lib/l10n/arb/app_ar.arb

@@ -516,6 +516,18 @@
     "@settingsAppearanceFontFamilySystemDefault": {
         "description": "Label for the system default font family option"
     },
+    "settingsAppearanceThemeSubPageTitle": "إعدادات المظهر",
+    "@settingsAppearanceThemeSubPageTitle": {
+        "description": "Title for the theme settings sub-page under appearance"
+    },
+    "settingsAppearanceFontSubPageTitle": "إعدادات الخط",
+    "@settingsAppearanceFontSubPageTitle": {
+        "description": "Title for the font settings sub-page under appearance"
+    },
+    "settingsLanguageTitle": "اللغة",
+    "@settingsLanguageTitle": {
+        "description": "Title for the language settings page/section"
+    },
     "emailCodeSentPageTitle": "أدخل الرمز",
     "@emailCodeSentPageTitle": {
         "description": "AppBar title for the email code verification page"

lib/l10n/arb/app_en.arb

@@ -516,6 +516,18 @@
     "@settingsAppearanceFontFamilySystemDefault": {
         "description": "Label for the system default font family option"
     },
+    "settingsAppearanceThemeSubPageTitle": "Theme Settings",
+    "@settingsAppearanceThemeSubPageTitle": {
+        "description": "Title for the theme settings sub-page under appearance"
+    },
+    "settingsAppearanceFontSubPageTitle": "Font Settings",
+    "@settingsAppearanceFontSubPageTitle": {
+        "description": "Title for the font settings sub-page under appearance"
+    },
+    "settingsLanguageTitle": "Language",
+    "@settingsLanguageTitle": {
+        "description": "Title for the language settings page/section"
+    },
     "emailCodeSentPageTitle": "Enter Code",
     "@emailCodeSentPageTitle": {
         "description": "AppBar title for the email code verification page"

lib/router/router.dart

@@ -38,8 +38,11 @@ import 'package:ht_main/router/routes.dart';
 import 'package:ht_main/settings/bloc/settings_bloc.dart'; // Added
 import 'package:ht_main/settings/view/appearance_settings_page.dart'; // Added
 import 'package:ht_main/settings/view/feed_settings_page.dart'; // Added
+import 'package:ht_main/settings/view/font_settings_page.dart'; // Added for new page
+import 'package:ht_main/settings/view/language_settings_page.dart'; // Added for new page
 import 'package:ht_main/settings/view/notification_settings_page.dart'; // Added
 import 'package:ht_main/settings/view/settings_page.dart'; // Added
+import 'package:ht_main/settings/view/theme_settings_page.dart'; // Added for new page
 import 'package:ht_shared/ht_shared.dart'; // Shared models, FromJson, ToJson, etc.
 
 /// Creates and configures the GoRouter instance for the application.
@@ -526,22 +529,19 @@ GoRouter createRouter({
                 name: Routes.accountName,
                 builder: (context, state) => const AccountPage(),
                 routes: [
-                  // Sub-route for settings
-                  GoRoute(
-                    path: Routes.settings, // Relative path 'settings'
-                    name: Routes.settingsName,
-                    builder: (context, state) {
-                      // Provide SettingsBloc here for SettingsPage and its children
-                      // Access AppBloc to get the current user ID
+                  // ShellRoute for settings to provide SettingsBloc to children
+                  ShellRoute(
+                    builder: (BuildContext context, GoRouterState state, Widget child) {
+                      // This builder provides SettingsBloc to all routes within this ShellRoute.
+                      // 'child' will be SettingsPage, AppearanceSettingsPage, etc.
                       final appBloc = context.read<AppBloc>();
                       final userId = appBloc.state.user?.id;
 
-                      return BlocProvider(
+                      return BlocProvider<SettingsBloc>(
                         create: (context) {
                           final settingsBloc = SettingsBloc(
                             userAppSettingsRepository:
-                                context
-                                    .read<HtDataRepository<UserAppSettings>>(),
+                                context.read<HtDataRepository<UserAppSettings>>(),
                           );
                           // Only load settings if a userId is available
                           if (userId != null) {
@@ -550,39 +550,55 @@ GoRouter createRouter({
                             );
                           } else {
                             // Handle case where user is unexpectedly null.
-                            // This might involve logging or emitting an error state
-                            // directly in SettingsBloc if it's designed to handle it,
-                            // or simply not loading settings.
-                            // For now, we'll assume router redirects prevent this.
                             print(
-                              'Warning: User ID is null when creating SettingsBloc. Settings will not be loaded.',
+                              'ShellRoute/SettingsBloc: User ID is null when creating SettingsBloc. Settings will not be loaded.',
                             );
                           }
                           return settingsBloc;
                         },
-                        child: const SettingsPage(), // Use the actual page
+                        child: child, // child is the actual page widget (SettingsPage, AppearanceSettingsPage, etc.)
                       );
                     },
-                    // --- Settings Sub-Routes ---
                     routes: [
                       GoRoute(
-                        path: Routes.settingsAppearance, // 'appearance'
-                        name: Routes.settingsAppearanceName,
-                        builder:
-                            (context, state) => const AppearanceSettingsPage(),
-                        // SettingsBloc is inherited from parent route
-                      ),
-                      GoRoute(
-                        path: Routes.settingsFeed, // 'feed'
-                        name: Routes.settingsFeedName,
-                        builder: (context, state) => const FeedSettingsPage(),
-                      ),
-                      GoRoute(
-                        path: Routes.settingsNotifications, // 'notifications'
-                        name: Routes.settingsNotificationsName,
-                        builder:
-                            (context, state) =>
-                                const NotificationSettingsPage(),
+                        path: Routes.settings, // Relative path 'settings' from /account
+                        name: Routes.settingsName,
+                        builder: (context, state) => const SettingsPage(),
+                        // --- Settings Sub-Routes ---
+                        routes: [
+                          GoRoute(
+                            path: Routes.settingsAppearance, // 'appearance' relative to /account/settings
+                            name: Routes.settingsAppearanceName,
+                            builder: (context, state) => const AppearanceSettingsPage(),
+                            routes: [ // Children of AppearanceSettingsPage
+                              GoRoute(
+                                path: Routes.settingsAppearanceTheme, // 'theme' relative to /account/settings/appearance
+                                name: Routes.settingsAppearanceThemeName,
+                                builder: (context, state) => const ThemeSettingsPage(),
+                              ),
+                              GoRoute(
+                                path: Routes.settingsAppearanceFont, // 'font' relative to /account/settings/appearance
+                                name: Routes.settingsAppearanceFontName,
+                                builder: (context, state) => const FontSettingsPage(),
+                              ),
+                            ],
+                          ),
+                          GoRoute(
+                            path: Routes.settingsFeed, // 'feed' relative to /account/settings
+                            name: Routes.settingsFeedName,
+                            builder: (context, state) => const FeedSettingsPage(),
+                          ),
+                          GoRoute(
+                            path: Routes.settingsNotifications, // 'notifications' relative to /account/settings
+                            name: Routes.settingsNotificationsName,
+                            builder: (context, state) => const NotificationSettingsPage(),
+                          ),
+                          GoRoute(
+                            path: Routes.settingsLanguage, // 'language' relative to /account/settings
+                            name: Routes.settingsLanguageName,
+                            builder: (context, state) => const LanguageSettingsPage(),
+                          ),
+                        ],
                       ),
                     ],
                   ),

lib/router/routes.dart

@@ -55,12 +55,24 @@ abstract final class Routes {
   // --- Settings Sub-Routes (relative to /account/settings) ---
   static const settingsAppearance = 'appearance';
   static const settingsAppearanceName = 'settingsAppearance';
+
+  // --- Appearance Sub-Routes (relative to /account/settings/appearance) ---
+  static const settingsAppearanceTheme = 'theme'; // Path: /account/settings/appearance/theme
+  static const settingsAppearanceThemeName = 'settingsAppearanceTheme';
+  static const settingsAppearanceFont = 'font'; // Path: /account/settings/appearance/font
+  static const settingsAppearanceFontName = 'settingsAppearanceFont';
+
   static const settingsFeed = 'feed';
   static const settingsFeedName = 'settingsFeed';
   static const settingsArticle = 'article';
   static const settingsArticleName = 'settingsArticle';
   static const settingsNotifications = 'notifications';
   static const settingsNotificationsName = 'settingsNotifications';
+
+  // --- Language Settings Sub-Route (relative to /account/settings) ---
+  static const settingsLanguage = 'language'; // Path: /account/settings/language
+  static const settingsLanguageName = 'settingsLanguage';
+
   // Add names for notification sub-selection routes if needed later
   // static const settingsNotificationCategories = 'categories';
   // static const settingsNotificationCategoriesName = 'settingsNotificationCategories';

lib/settings/bloc/settings_bloc.dart

@@ -48,6 +48,10 @@ class SettingsBloc extends Bloc<SettingsEvent, SettingsState> {
       _onFeedTileTypeChanged,
       transformer: sequential(),
     );
+    on<SettingsLanguageChanged>(
+      _onLanguageChanged,
+      transformer: sequential(),
+    );
     // SettingsNotificationsEnabledChanged event and handler removed.
   }
 
@@ -156,12 +160,14 @@ class SettingsBloc extends Bloc<SettingsEvent, SettingsState> {
     Emitter<SettingsState> emit,
   ) async {
     if (state.userAppSettings == null) return;
+    print('[SettingsBloc] _onAppFontTypeChanged: Received event.fontType: ${event.fontType}');
 
     final updatedSettings = state.userAppSettings!.copyWith(
       displaySettings: state.userAppSettings!.displaySettings.copyWith(
         fontFamily: event.fontType,
       ),
     );
+    print('[SettingsBloc] _onAppFontTypeChanged: Updated settings.fontFamily: ${updatedSettings.displaySettings.fontFamily}');
     emit(state.copyWith(userAppSettings: updatedSettings, clearError: true));
     await _persistSettings(updatedSettings, emit);
   }
@@ -171,12 +177,14 @@ class SettingsBloc extends Bloc<SettingsEvent, SettingsState> {
     Emitter<SettingsState> emit,
   ) async {
     if (state.userAppSettings == null) return;
+    print('[SettingsBloc] _onAppFontWeightChanged: Received event.fontWeight: ${event.fontWeight}');
 
     final updatedSettings = state.userAppSettings!.copyWith(
       displaySettings: state.userAppSettings!.displaySettings.copyWith(
         fontWeight: event.fontWeight,
       ),
     );
+    print('[SettingsBloc] _onAppFontWeightChanged: Updated settings.fontWeight: ${updatedSettings.displaySettings.fontWeight}');
     emit(state.copyWith(userAppSettings: updatedSettings, clearError: true));
     await _persistSettings(updatedSettings, emit);
   }
@@ -195,4 +203,17 @@ class SettingsBloc extends Bloc<SettingsEvent, SettingsState> {
     emit(state.copyWith(userAppSettings: updatedSettings, clearError: true));
     await _persistSettings(updatedSettings, emit);
   }
+
+  Future<void> _onLanguageChanged(
+    SettingsLanguageChanged event,
+    Emitter<SettingsState> emit,
+  ) async {
+    if (state.userAppSettings == null) return;
+
+    final updatedSettings = state.userAppSettings!.copyWith(
+      language: event.languageCode,
+    );
+    emit(state.copyWith(userAppSettings: updatedSettings, clearError: true));
+    await _persistSettings(updatedSettings, emit);
+  }
 }