refactor(mobile): build context extensions (#4923)

* refactor: move all extensions to separate package

* refactor(mobile): add BuildContext extension

* refactor(mobile): use theme getters from context

* refactor(mobile): use media query size from context

* refactor(mobile): use auto router methods from context

* refactor(mobile): use navigator methods from context

---------

Co-authored-by: shalong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/modules/onboarding/views/permission_onboarding_page.dart

@@ -1,7 +1,7 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/modules/onboarding/providers/gallery_permission.provider.dart';
@@ -11,7 +11,6 @@ import 'package:immich_mobile/shared/ui/immich_title_text.dart';
 import 'package:permission_handler/permission_handler.dart';
 
 class PermissionOnboardingPage extends HookConsumerWidget {
-
   const PermissionOnboardingPage({super.key});
 
   @override
@@ -21,13 +20,10 @@ class PermissionOnboardingPage extends HookConsumerWidget {
     // Navigate to the main Tab Controller when permission is granted
     void goToHome() {
       // Resume backup (if enable) then navigate
-      ref.watch(backupProvider.notifier).resumeBackup()
-        .catchError((error) {
+      ref.watch(backupProvider.notifier).resumeBackup().catchError((error) {
         debugPrint('PermissionOnboardingPage error: $error');
       });
-      AutoRouter.of(context).replace(
-        const TabControllerRoute(),
-      );
+      context.autoReplace(const TabControllerRoute());
     }
 
     // When the permission is denied, we show a request permission page
@@ -38,21 +34,21 @@ class PermissionOnboardingPage extends HookConsumerWidget {
         children: [
           Text(
             'permission_onboarding_request',
-            style: Theme.of(context).textTheme.titleMedium,
+            style: context.textTheme.titleMedium,
             textAlign: TextAlign.center,
           ).tr(),
           const SizedBox(height: 18),
           ElevatedButton(
             onPressed: () => ref
-              .read(galleryPermissionNotifier.notifier)
-              .requestGalleryPermission()
-              .then((permission) async {
-                if (permission.isGranted) {
-                  // If permission is limited, we will show the limited
-                  // permission page
-                  goToHome();
-                }
-              }),
+                .read(galleryPermissionNotifier.notifier)
+                .requestGalleryPermission()
+                .then((permission) async {
+              if (permission.isGranted) {
+                // If permission is limited, we will show the limited
+                // permission page
+                goToHome();
+              }
+            }),
             child: const Text(
               'permission_onboarding_grant_permission',
             ).tr(),
@@ -70,7 +66,7 @@ class PermissionOnboardingPage extends HookConsumerWidget {
         children: [
           Text(
             'permission_onboarding_permission_granted',
-            style: Theme.of(context).textTheme.titleMedium,
+            style: context.textTheme.titleMedium,
             textAlign: TextAlign.center,
           ).tr(),
           const SizedBox(height: 18),
@@ -90,14 +86,15 @@ class PermissionOnboardingPage extends HookConsumerWidget {
         crossAxisAlignment: CrossAxisAlignment.center,
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          const Icon(Icons.warning_outlined,
+          const Icon(
+            Icons.warning_outlined,
             color: Colors.yellow,
             size: 48,
           ),
           const SizedBox(height: 8),
           Text(
             'permission_onboarding_permission_limited',
-            style: Theme.of(context).textTheme.titleMedium,
+            style: context.textTheme.titleMedium,
             textAlign: TextAlign.center,
           ).tr(),
           const SizedBox(height: 18),
@@ -123,14 +120,15 @@ class PermissionOnboardingPage extends HookConsumerWidget {
         crossAxisAlignment: CrossAxisAlignment.center,
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          const Icon(Icons.warning_outlined,
+          const Icon(
+            Icons.warning_outlined,
             color: Colors.red,
             size: 48,
           ),
           const SizedBox(height: 8),
           Text(
             'permission_onboarding_permission_denied',
-            style: Theme.of(context).textTheme.titleMedium,
+            style: context.textTheme.titleMedium,
             textAlign: TextAlign.center,
           ).tr(),
           const SizedBox(height: 18),
@@ -186,13 +184,10 @@ class PermissionOnboardingPage extends HookConsumerWidget {
                   child: const Text('permission_onboarding_log_out').tr(),
                   onPressed: () {
                     ref.read(authenticationProvider.notifier).logout();
-                    AutoRouter.of(context).replace(
-                      const LoginRoute(),
-                    );
+                    context.autoReplace(const LoginRoute());
                   },
                 ),
               ],
-
             ),
           ),
         ),