feat: impl InitializingNavigationPane for handling pactus initializ…

…ing panel

- add/create `InitializingNavigationPane` & add each `panItem` for each tabs according to figma design
- add/create `NavigationPaneCubit` for handling selecting tabs index
- add/create `dashboard_navigation_pane.dart` to add specific dashboard navigation panel later
- add `initializingNavigationPane` & `dashboardNavigationPane`
- update `registrationRoutes`
- provide `NavigationPaneCubit` im `main.dart`
- add some variables in arb files & generate translation files
- add `navigationPanelEnableColor` & `navigationPanelDisableColor` to `AppColors`

lib/l10n/app_en.arb

@@ -4,5 +4,12 @@
   "subtitle": "Welcome to Localization",
   "description": "You have pushed the button this many times:",
   "switch_language": "Switch language",
-  "applications": "Applications"
+  "applications": "Applications",
+  "initialize_mode": "Initialize mode",
+  "wallet_seed": "Wallet seed",
+  "confirm_seed": "Confirm seed",
+  "master_password": "Confirm seed",
+  "validator_config": "Validator config",
+  "initializing": "Initializing",
+  "finish": "Finish"
 }

lib/l10n/app_es.arb

@@ -4,5 +4,12 @@
   "subtitle": "Bienvenido a Localización",
   "description": "Has pulsado el botón tantas veces:",
   "switch_language": "Cambiar idioma",
-  "applications": "Applications"
+  "applications": "Applications",
+  "initialize_mode": "Modo de inicialización",
+  "wallet_seed": "Semilla de billetera",
+  "confirm_seed": "Confirmar semilla",
+  "master_password": "Confirmar contraseña maestra",
+  "validator_config": "Configuración del validador",
+  "initializing": "Inicializando",
+  "finish": "Finalizar"
 }

lib/l10n/app_fr.arb

@@ -4,5 +4,12 @@
   "subtitle": "Bienvenue dans Localisation",
   "description": "Vous avez appuyé sur le bouton autant de fois :",
   "switch_language": "Changer de langue",
-  "applications": "Applications"
+  "applications": "Applications",
+  "initialize_mode": "Mode dinitialisation",
+  "wallet_seed": "Graine de portefeuille",
+  "confirm_seed": "Confirmer la graine",
+  "master_password": "Confirmer le mot de passe principal",
+  "validator_config": "Configuration du validateur",
+  "initializing": "Initialisation",
+  "finish": "Terminer"
 }

lib/main.dart

@@ -8,6 +8,7 @@ import 'package:gui/src/features/main/language/core/language_constants.dart';
 import 'package:gui/src/features/main/theme/bloc/theme_bloc.dart';
 import 'package:pactus_gui_widgetbook/app_styles.dart';
 import 'src/features/main/language/presentation/bloc/language_bloc.dart';
+import 'src/features/main/navigation_pan_cubit/presentation/cubits/navigation_pan_cubit.dart';
 
 void main() {
   runApp(
@@ -19,6 +20,9 @@ void main() {
         BlocProvider<AppThemeCubit>(
           create: (_) => AppThemeCubit(),
         ),
+        BlocProvider<NavigationPaneCubit>(
+          create: (_) => NavigationPaneCubit(),
+        ),
       ],
       child: PactusGuiApp(),
     ),

lib/src/core/common/colors/app_colors.dart

@@ -4,4 +4,6 @@ class AppColors {
   AppColors._();
   static const primaryDark = Color(0xFF242424);
   static const splashBackground = Color(0xFF00142E);
+  static const navigationPanelEnableColor = Color(0xFF131440);
+  static const navigationPanelDisableColor = Color(0xFFCBC9C7);
 }

lib/src/core/common/navigation_pans/dashboard_navigation_pane.dart

@@ -0,0 +1,2 @@
+///to-do : add navigation pans of dashboard here
+library;

lib/src/core/common/navigation_pans/initializing_navigation_pane.dart

@@ -0,0 +1,127 @@
+import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:gui/src/core/common/colors/app_colors.dart';
+import 'package:gui/src/core/utils/gen/localization/locale_keys.dart';
+import 'package:gui/src/features/confirmation_seed/presentation/screen/confirmation_seed_page.dart';
+import 'package:gui/src/features/finish/presentation/screen/finish_page.dart';
+import 'package:gui/src/features/initialize_mode/presentation/screen/initialize_mode_page.dart';
+import 'package:gui/src/features/initializing/presentation/screen/initializing_page.dart';
+import 'package:gui/src/features/main/language/core/localization_extension.dart';
+import 'package:gui/src/features/main/navigation_pan_cubit/presentation/cubits/navigation_pan_cubit.dart';
+import 'package:gui/src/features/master_password/presentation/screen/master_password_page.dart';
+import 'package:gui/src/features/restoration_seed/presentation/screen/restoration_seed_page.dart';
+import 'package:gui/src/features/validator_config/presentation/screen/validator_config_page.dart';
+
+class InitializingNavigationPane extends StatelessWidget {
+  const InitializingNavigationPane({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<NavigationPaneCubit, int>(
+      builder: (context, selectedIndex) {
+        return NavigationView(
+          pane: NavigationPane(
+            displayMode: PaneDisplayMode.open,
+            menuButton: const SizedBox(),
+            size: const NavigationPaneSize(
+              openMaxWidth: 209,
+            ),
+            selected: selectedIndex,
+            onChanged: (index) {
+              if (index == selectedIndex + 1 || index == selectedIndex - 1) {
+                context.read<NavigationPaneCubit>().setSelectedIndex(index);
+              }
+            },
+            indicator: const SizedBox(),
+            items: [
+              PaneItem(
+                icon: const SizedBox(),
+                title: Text(
+                  context.tr(LocaleKeys.initialize_mode),
+                  style: TextStyle(
+                    color: selectedIndex == 0 ?
+                    AppColors.navigationPanelEnableColor :
+                    AppColors.navigationPanelDisableColor,
+                  ),
+                ),
+                body: InitializeModePage(),
+              ),
+              PaneItem(
+                icon: const SizedBox(),
+                title: Text(
+                  context.tr(LocaleKeys.wallet_seed),
+                  style: TextStyle(
+                    color: selectedIndex == 1 ?
+                    AppColors.navigationPanelEnableColor :
+                    AppColors.navigationPanelDisableColor,
+                  ),
+                ),
+                body: RestorationSeedPage(),
+              ),
+              PaneItem(
+                icon: const SizedBox(),
+                title: Text(
+                  context.tr(LocaleKeys.confirm_seed),
+                  style: TextStyle(
+                    color: selectedIndex == 2 ?
+                    AppColors.navigationPanelEnableColor :
+                    AppColors.navigationPanelDisableColor,
+                  ),
+                ),
+                body: ConfirmationSeedPage(),
+              ),
+              PaneItem(
+                icon: const SizedBox(),
+                title: Text(
+                  context.tr(LocaleKeys.master_password),
+                  style: TextStyle(
+                    color: selectedIndex == 3 ?
+                    AppColors.navigationPanelEnableColor :
+                    AppColors.navigationPanelDisableColor,
+                  ),
+                ),
+                body: MasterPasswordPage(),
+              ),
+              PaneItem(
+                icon: const SizedBox(),
+                title: Text(
+                  context.tr(LocaleKeys.validator_config),
+                  style: TextStyle(
+                    color: selectedIndex == 4 ?
+                    AppColors.navigationPanelEnableColor :
+                    AppColors.navigationPanelDisableColor,
+                  ),
+                ),
+                body: ValidatorConfigPage(),
+              ),
+              PaneItem(
+                icon: const SizedBox(),
+                title: Text(
+                  context.tr(LocaleKeys.initializing),
+                  style: TextStyle(
+                    color: selectedIndex == 5 ?
+                    AppColors.navigationPanelEnableColor :
+                    AppColors.navigationPanelDisableColor,
+                  ),
+                ),
+                body: InitializingPage(),
+              ),
+              PaneItem(
+                icon: const SizedBox(),
+                title: Text(
+                  context.tr(LocaleKeys.finish),
+                  style: TextStyle(
+                    color: selectedIndex == 6 ?
+                    AppColors.navigationPanelEnableColor :
+                    AppColors.navigationPanelDisableColor,
+                  ),
+                ),
+                body: FinishPage(),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

lib/src/core/router/registration_routes.dart

@@ -1,13 +1,5 @@
 import 'package:go_router/go_router.dart';
-import 'package:gui/src/features/confirmation_seed/presentation/screen/confirmation_seed_page.dart';
-import 'package:gui/src/features/dashboard/presentation/screen/dashboard_page.dart';
-import 'package:gui/src/features/finish/presentation/screen/finish_page.dart';
-import 'package:gui/src/features/initialize_mode/presentation/screen/initialize_mode_page.dart';
-import 'package:gui/src/features/initializing/presentation/screen/initializing_page.dart';
-import 'package:gui/src/features/master_password/presentation/screen/master_password_page.dart';
-import 'package:gui/src/features/password/presentation/screen/password_page.dart';
-import 'package:gui/src/features/restoration_seed/presentation/screen/restoration_seed_page.dart';
-import 'package:gui/src/features/validator_config/presentation/screen/validator_config_page.dart';
+import 'package:gui/src/core/common/navigation_pans/initializing_navigation_pane.dart';
 import 'package:gui/src/features/welcome/presentation/screen/welcome_page.dart';
 import 'route_name.dart';
 
@@ -18,72 +10,9 @@ final List<GoRoute> registrationRoutes = [
     builder: (context, state) => const WelcomePage(),
     routes: [
       GoRoute(
-        path: AppRoute.initializeMode.path,
-        name: AppRoute.initializeMode.name,
-        builder: (context, state) => const InitializeModePage(),
-        routes: [
-          GoRoute(
-            path: AppRoute.restorationSeed.path,
-            name: AppRoute.restorationSeed.name,
-            builder: (context, state) => const RestorationSeedPage(),
-            routes: [
-              GoRoute(
-                path: AppRoute.confirmationSeed.path,
-                name: AppRoute.confirmationSeed.name,
-                builder: (context, state) => const ConfirmationSeedPage(),
-                routes: [
-                  GoRoute(
-                    path: AppRoute.masterPassword.path,
-                    name: AppRoute.masterPassword.name,
-                    builder: (context, state) => const MasterPasswordPage(),
-                    routes: [
-                      GoRoute(
-                        path: AppRoute.validatorConfig.path,
-                        name: AppRoute.validatorConfig.name,
-                        builder: (context, state) =>
-                            const ValidatorConfigPage(),
-                        routes: [
-                          GoRoute(
-                            path: AppRoute.initializing.path,
-                            name: AppRoute.initializing.name,
-                            builder: (context, state) =>
-                                const InitializingPage(),
-                            routes: [
-                              GoRoute(
-                                path: AppRoute.finish.path,
-                                name: AppRoute.finish.name,
-                                builder: (context, state) => const FinishPage(),
-                                routes: [
-                                  GoRoute(
-                                    path: AppRoute.password.path,
-                                    name: AppRoute.password.name,
-                                    builder: (context, state) => PasswordPage(
-                                      fromRegistrationRoute: state
-                                          .matchedLocation
-                                          .contains(AppRoute.finish.name),
-                                    ),
-                                    routes: [
-                                      GoRoute(
-                                        path: AppRoute.dashboard.path,
-                                        name: AppRoute.dashboard.name,
-                                        builder: (context, state) =>
-                                            const DashboardPage(),
-                                      ),
-                                    ],
-                                  ),
-                                ],
-                              ),
-                            ],
-                          ),
-                        ],
-                      ),
-                    ],
-                  ),
-                ],
-              ),
-            ],
-          ),
-        ],
+        path: AppRoute.initializingNavigationPane.path,
+        name: AppRoute.initializingNavigationPane.name,
+        builder: (context, state) => const InitializingNavigationPane(),
       ),
     ],
   ),

lib/src/core/router/route_name.dart

@@ -11,7 +11,9 @@ enum AppRoute {
   password,
   dashboard,
   basicPassword,
-  basicDashboard;
+  basicDashboard,
+  initializingNavigationPane,
+  dashboardNavigationPane;
 
   String get fullPath => '/$name';
   String get path => name;

lib/src/core/utils/gen/localization/codegen_loader.dart

@@ -32,20 +32,41 @@ class CodegenLoader {
     'description': 'You have pushed the button this many times:',
     'switch_language': 'Switch language',
     'applications': 'Applications',
+    'initialize_mode': 'Initialize mode',
+    'wallet_seed': 'Wallet seed',
+    'confirm_seed': 'Confirm seed',
+    'master_password': 'Confirm seed',
+    'validator_config': 'Validator config',
+    'initializing': 'Initializing',
+    'finish': 'Finish',
   };
   static const Map<String, dynamic> frFR = {
     'title': 'Bonjour le monde  !',
     'subtitle': 'Bienvenue dans Localisation',
     'description': 'Vous avez appuyé sur le bouton autant de fois :',
     'switch_language': 'Changer de langue',
     'applications': 'Applications',
+    'initialize_mode': 'Mode dinitialisation',
+    'wallet_seed': 'Graine de portefeuille',
+    'confirm_seed': 'Confirmer la graine',
+    'master_password': 'Confirmer le mot de passe principal',
+    'validator_config': 'Configuration du validateur',
+    'initializing': 'Initialisation',
+    'finish': 'Terminer',
   };
   static const Map<String, dynamic> esES = {
     'title': '¡Hola, Mundo  !',
     'subtitle': 'Bienvenido a Localización',
     'description': 'Has pulsado el botón tantas veces:',
     'switch_language': 'Cambiar idioma',
     'applications': 'Applications',
+    'initialize_mode': 'Modo de inicialización',
+    'wallet_seed': 'Semilla de billetera',
+    'confirm_seed': 'Confirmar semilla',
+    'master_password': 'Confirmar contraseña maestra',
+    'validator_config': 'Configuración del validador',
+    'initializing': 'Inicializando',
+    'finish': 'Finalizar',
   };
 
   static const Map<String, Map<String, dynamic>> mapLocales = {

lib/src/core/utils/gen/localization/locale_keys.dart

@@ -5,4 +5,11 @@ abstract class LocaleKeys {
   static const String description = 'description';
   static const String switch_language = 'switch_language';
   static const String applications = 'applications';
+  static const String initialize_mode = 'initialize_mode';
+  static const String wallet_seed = 'wallet_seed';
+  static const String confirm_seed = 'confirm_seed';
+  static const String master_password = 'master_password';
+  static const String validator_config = 'validator_config';
+  static const String initializing = 'initializing';
+  static const String finish = 'finish';
 }