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/search/views/all_motion_videos_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/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/all_motion_photos.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
@@ -17,7 +17,7 @@ class AllMotionPhotosPage extends HookConsumerWidget {
       appBar: AppBar(
         title: const Text('motion_photos_page_title').tr(),
         leading: IconButton(
-          onPressed: () => AutoRouter.of(context).pop(),
+          onPressed: () => context.autoPop(),
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),

mobile/lib/modules/search/views/all_people_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/search/models/curated_content.dart';
 import 'package:immich_mobile/modules/search/providers/people.provider.dart';
 import 'package:immich_mobile/modules/search/ui/explore_grid.dart';
@@ -19,13 +19,13 @@ class AllPeoplePage extends HookConsumerWidget {
         title: Text(
           'all_people_page_title',
           style: TextStyle(
-            color: Theme.of(context).primaryColor,
+            color: context.primaryColor,
             fontWeight: FontWeight.bold,
             fontSize: 16.0,
           ),
         ).tr(),
         leading: IconButton(
-          onPressed: () => AutoRouter.of(context).pop(),
+          onPressed: () => context.autoPop(),
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),

mobile/lib/modules/search/views/all_videos_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/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/all_video_assets.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
@@ -17,7 +17,7 @@ class AllVideosPage extends HookConsumerWidget {
       appBar: AppBar(
         title: const Text('all_videos_page_title').tr(),
         leading: IconButton(
-          onPressed: () => AutoRouter.of(context).pop(),
+          onPressed: () => context.autoPop(),
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),

mobile/lib/modules/search/views/curated_location_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/search/models/curated_content.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
 import 'package:immich_mobile/modules/search/ui/explore_grid.dart';
@@ -21,13 +21,13 @@ class CuratedLocationPage extends HookConsumerWidget {
         title: Text(
           'curated_location_page_title',
           style: TextStyle(
-            color: Theme.of(context).primaryColor,
+            color: context.primaryColor,
             fontWeight: FontWeight.bold,
             fontSize: 16.0,
           ),
         ).tr(),
         leading: IconButton(
-          onPressed: () => AutoRouter.of(context).pop(),
+          onPressed: () => context.autoPop(),
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),

mobile/lib/modules/search/views/person_result_page.dart

@@ -1,7 +1,7 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/people.provider.dart';
 import 'package:immich_mobile/modules/search/ui/person_name_edit_form.dart';
@@ -40,7 +40,7 @@ class PersonResultPage extends HookConsumerWidget {
 
     void buildBottomSheet() {
       showModalBottomSheet(
-        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+        backgroundColor: context.scaffoldBackgroundColor,
         isScrollControlled: false,
         context: context,
         useSafeArea: true,
@@ -73,13 +73,13 @@ class PersonResultPage extends HookConsumerWidget {
             children: [
               Text(
                 'Add a name',
-                style: Theme.of(context).textTheme.titleSmall?.copyWith(
-                      color: Theme.of(context).colorScheme.secondary,
-                    ),
+                style: context.textTheme.titleSmall?.copyWith(
+                  color: context.themeData.colorScheme.secondary,
+                ),
               ),
               Text(
                 'Find them fast by name with search',
-                style: Theme.of(context).textTheme.labelSmall,
+                style: context.textTheme.labelSmall,
               ),
             ],
           ),
@@ -91,7 +91,7 @@ class PersonResultPage extends HookConsumerWidget {
         children: [
           Text(
             name.value,
-            style: Theme.of(context).textTheme.titleLarge,
+            style: context.textTheme.titleLarge,
           ),
         ],
       );
@@ -101,7 +101,7 @@ class PersonResultPage extends HookConsumerWidget {
       appBar: AppBar(
         title: Text(name.value),
         leading: IconButton(
-          onPressed: () => AutoRouter.of(context).pop(),
+          onPressed: () => context.autoPop(),
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
         actions: [

mobile/lib/modules/search/views/recently_added_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/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/recently_added.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
@@ -17,7 +17,7 @@ class RecentlyAddedPage extends HookConsumerWidget {
       appBar: AppBar(
         title: const Text('recently_added_page_title').tr(),
         leading: IconButton(
-          onPressed: () => AutoRouter.of(context).pop(),
+          onPressed: () => context.autoPop(),
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),

mobile/lib/modules/search/views/search_page.dart

@@ -1,9 +1,9 @@
 import 'dart:math' as math;
-import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/search/models/curated_content.dart';
 import 'package:immich_mobile/modules/search/providers/people.provider.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
@@ -30,15 +30,14 @@ class SearchPage extends HookConsumerWidget {
     final curatedPeople = ref.watch(getCuratedPeopleProvider);
     final isMapEnabled =
         ref.watch(serverInfoProvider.select((v) => v.serverFeatures.map));
-    var isDarkTheme = Theme.of(context).brightness == Brightness.dark;
-    double imageSize = math.min(MediaQuery.of(context).size.width / 3, 150);
+    double imageSize = math.min(context.width / 3, 150);
 
     TextStyle categoryTitleStyle = const TextStyle(
       fontWeight: FontWeight.bold,
       fontSize: 14.0,
     );
 
-    Color categoryIconColor = isDarkTheme ? Colors.white : Colors.black;
+    Color categoryIconColor = context.isDarkTheme ? Colors.white : Colors.black;
 
     useEffect(
       () {
@@ -52,7 +51,7 @@ class SearchPage extends HookConsumerWidget {
       searchFocusNode.unfocus();
       ref.watch(searchPageStateProvider.notifier).disableSearch();
 
-      AutoRouter.of(context).push(
+      context.autoPush(
         SearchResultRoute(
           searchTerm: searchTerm,
         ),
@@ -88,7 +87,7 @@ class SearchPage extends HookConsumerWidget {
                 .take(12)
                 .toList(),
             onTap: (content, index) {
-              AutoRouter.of(context).push(
+              context.autoPush(
                 PersonResultRoute(
                   personId: content.id,
                   personName: content.label,
@@ -121,7 +120,7 @@ class SearchPage extends HookConsumerWidget {
                 .toList(),
             imageSize: imageSize,
             onTap: (content, index) {
-              AutoRouter.of(context).push(
+              context.autoPush(
                 SearchResultRoute(
                   searchTerm: 'm:${content.label}',
                 ),
@@ -148,16 +147,14 @@ class SearchPage extends HookConsumerWidget {
               children: [
                 SearchRowTitle(
                   title: "search_page_people".tr(),
-                  onViewAllPressed: () => AutoRouter.of(context).push(
-                    const AllPeopleRoute(),
-                  ),
+                  onViewAllPressed: () =>
+                      context.autoPush(const AllPeopleRoute()),
                 ),
                 buildPeople(),
                 SearchRowTitle(
                   title: "search_page_places".tr(),
-                  onViewAllPressed: () => AutoRouter.of(context).push(
-                    const CuratedLocationRoute(),
-                  ),
+                  onViewAllPressed: () =>
+                      context.autoPush(const CuratedLocationRoute()),
                   top: 0,
                 ),
                 const SizedBox(height: 10.0),
@@ -167,7 +164,7 @@ class SearchPage extends HookConsumerWidget {
                   padding: const EdgeInsets.symmetric(horizontal: 16),
                   child: Text(
                     'search_page_your_activity',
-                    style: Theme.of(context).textTheme.titleSmall,
+                    style: context.textTheme.titleSmall,
                   ).tr(),
                 ),
                 ListTile(
@@ -178,9 +175,7 @@ class SearchPage extends HookConsumerWidget {
                   title:
                       Text('search_page_favorites', style: categoryTitleStyle)
                           .tr(),
-                  onTap: () => AutoRouter.of(context).push(
-                    const FavoritesRoute(),
-                  ),
+                  onTap: () => context.autoPush(const FavoritesRoute()),
                 ),
                 const CategoryDivider(),
                 ListTile(
@@ -192,16 +187,14 @@ class SearchPage extends HookConsumerWidget {
                     'search_page_recently_added',
                     style: categoryTitleStyle,
                   ).tr(),
-                  onTap: () => AutoRouter.of(context).push(
-                    const RecentlyAddedRoute(),
-                  ),
+                  onTap: () => context.autoPush(const RecentlyAddedRoute()),
                 ),
                 const SizedBox(height: 24.0),
                 Padding(
                   padding: const EdgeInsets.symmetric(horizontal: 16.0),
                   child: Text(
                     'search_page_categories',
-                    style: Theme.of(context).textTheme.titleSmall,
+                    style: context.textTheme.titleSmall,
                   ).tr(),
                 ),
                 ListTile(
@@ -210,7 +203,7 @@ class SearchPage extends HookConsumerWidget {
                     Icons.screenshot,
                     color: categoryIconColor,
                   ),
-                  onTap: () => AutoRouter.of(context).push(
+                  onTap: () => context.autoPush(
                     SearchResultRoute(
                       searchTerm: 'screenshots',
                     ),
@@ -224,7 +217,7 @@ class SearchPage extends HookConsumerWidget {
                     Icons.photo_camera_front_outlined,
                     color: categoryIconColor,
                   ),
-                  onTap: () => AutoRouter.of(context).push(
+                  onTap: () => context.autoPush(
                     SearchResultRoute(
                       searchTerm: 'selfies',
                     ),
@@ -238,9 +231,7 @@ class SearchPage extends HookConsumerWidget {
                     Icons.play_circle_outline,
                     color: categoryIconColor,
                   ),
-                  onTap: () => AutoRouter.of(context).push(
-                    const AllVideosRoute(),
-                  ),
+                  onTap: () => context.autoPush(const AllVideosRoute()),
                 ),
                 const CategoryDivider(),
                 ListTile(
@@ -252,9 +243,7 @@ class SearchPage extends HookConsumerWidget {
                     Icons.motion_photos_on_outlined,
                     color: categoryIconColor,
                   ),
-                  onTap: () => AutoRouter.of(context).push(
-                    const AllMotionPhotosRoute(),
-                  ),
+                  onTap: () => context.autoPush(const AllMotionPhotosRoute()),
                 ),
               ],
             ),

mobile/lib/modules/search/views/search_result_page.dart

@@ -1,8 +1,8 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
 import 'package:immich_mobile/modules/search/providers/search_result_page.provider.dart';
@@ -38,7 +38,6 @@ class SearchResultPage extends HookConsumerWidget {
     final searchTermController = useTextEditingController(text: "");
     final isNewSearch = useState(false);
     final currentSearchTerm = useState(searchTerm);
-    final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
     final isDisplayDateGroup = useState(true);
 
     FocusNode? searchFocusNode;
@@ -112,8 +111,9 @@ class SearchResultPage extends HookConsumerWidget {
           hintStyle: TextStyle(
             fontWeight: FontWeight.bold,
             fontSize: 16.0,
-            color:
-                isDarkTheme ? Colors.grey[500] : Colors.black.withOpacity(0.5),
+            color: context.isDarkTheme
+                ? Colors.grey[500]
+                : Colors.black.withOpacity(0.5),
           ),
         ),
       );
@@ -130,7 +130,7 @@ class SearchResultPage extends HookConsumerWidget {
             Text(
               currentSearchTerm.value,
               style: TextStyle(
-                color: Theme.of(context).primaryColor,
+                color: context.primaryColor,
                 fontSize: 13,
                 fontWeight: FontWeight.bold,
               ),
@@ -138,12 +138,12 @@ class SearchResultPage extends HookConsumerWidget {
             ),
             Icon(
               Icons.close_rounded,
-              color: Theme.of(context).primaryColor,
+              color: context.primaryColor,
               size: 20,
             ),
           ],
         ),
-        backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
+        backgroundColor: context.primaryColor.withAlpha(50),
       );
     }
 
@@ -185,7 +185,7 @@ class SearchResultPage extends HookConsumerWidget {
             if (isNewSearch.value) {
               isNewSearch.value = false;
             } else {
-              AutoRouter.of(context).pop(true);
+              context.autoPop(true);
             }
           },
           icon: const Icon(Icons.arrow_back_ios_rounded),