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/ui/curated_people_row.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.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/ui/thumbnail_with_info.dart';
 import 'package:immich_mobile/shared/models/store.dart';
@@ -85,7 +86,7 @@ class CuratedPeopleRow extends StatelessWidget {
                         "Add name",
                         style: TextStyle(
                           fontWeight: FontWeight.bold,
-                          color: Theme.of(context).primaryColor,
+                          color: context.primaryColor,
                         ),
                       ),
                     ),

mobile/lib/modules/search/ui/curated_places_row.dart

@@ -1,5 +1,5 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/map/ui/map_thumbnail.dart';
 import 'package:immich_mobile/modules/search/ui/curated_row.dart';
 import 'package:immich_mobile/modules/search/ui/thumbnail_with_info.dart';
@@ -25,7 +25,7 @@ class CuratedPlacesRow extends CuratedRow {
     final int actualContentIndex = isMapEnabled ? 1 : 0;
     Widget buildMapThumbnail() {
       return GestureDetector(
-        onTap: () => AutoRouter.of(context).push(
+        onTap: () => context.autoPush(
           const MapRoute(),
         ),
         child: SizedBox(
@@ -43,7 +43,7 @@ class CuratedPlacesRow extends CuratedRow {
                   ),
                   height: imageSize,
                   showAttribution: false,
-                  isDarkTheme: Theme.of(context).brightness == Brightness.dark,
+                  isDarkTheme: context.isDarkTheme,
                 ),
               ),
               Padding(

mobile/lib/modules/search/ui/explore_grid.dart

@@ -1,5 +1,5 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.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/ui/thumbnail_with_info.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -50,13 +50,13 @@ class ExploreGrid extends StatelessWidget {
           borderRadius: 0,
           onTap: () {
             isPeople
-                ? AutoRouter.of(context).push(
+                ? context.autoPush(
                     PersonResultRoute(
                       personId: content.id,
                       personName: content.label,
                     ),
                   )
-                : AutoRouter.of(context).push(
+                : context.autoPush(
                     SearchResultRoute(searchTerm: 'm:${content.label}'),
                   );
           },

mobile/lib/modules/search/ui/immich_search_bar.dart

@@ -2,6 +2,7 @@ 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/search/providers/search_page_state.provider.dart';
 
 class ImmichSearchBar extends HookConsumerWidget
@@ -57,11 +58,11 @@ class ImmichSearchBar extends HookConsumerWidget
         },
         decoration: InputDecoration(
           hintText: 'search_bar_hint'.tr(),
-          hintStyle: Theme.of(context).textTheme.titleSmall?.copyWith(
-                color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
-                fontWeight: FontWeight.w500,
-                fontSize: 14,
-              ),
+          hintStyle: context.textTheme.titleSmall?.copyWith(
+            color: context.themeData.colorScheme.onSurface.withOpacity(0.5),
+            fontWeight: FontWeight.w500,
+            fontSize: 14,
+          ),
           enabledBorder: const UnderlineInputBorder(
             borderSide: BorderSide(color: Colors.transparent),
           ),

mobile/lib/modules/search/ui/person_name_edit_form.dart

@@ -1,6 +1,7 @@
 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/search/providers/people.provider.dart';
 
 class PersonNameEditFormResult {
@@ -71,7 +72,7 @@ class PersonNameEditForm extends HookConsumerWidget {
           child: Text(
             "Save",
             style: TextStyle(
-              color: Theme.of(context).primaryColor,
+              color: context.primaryColor,
               fontWeight: FontWeight.bold,
             ),
           ),

mobile/lib/modules/search/ui/search_row_title.dart

@@ -1,5 +1,6 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 
 class SearchRowTitle extends StatelessWidget {
   final Function() onViewAllPressed;
@@ -26,14 +27,14 @@ class SearchRowTitle extends StatelessWidget {
         children: [
           Text(
             title,
-            style: Theme.of(context).textTheme.titleSmall,
+            style: context.textTheme.titleSmall,
           ),
           TextButton(
             onPressed: onViewAllPressed,
             child: Text(
               'search_page_view_all_button',
               style: TextStyle(
-                color: Theme.of(context).primaryColor,
+                color: context.primaryColor,
                 fontWeight: FontWeight.bold,
                 fontSize: 14.0,
               ),

mobile/lib/modules/search/ui/search_suggestion_list.dart

@@ -1,6 +1,7 @@
 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/providers/search_page_state.provider.dart';
 
 class SearchSuggestionList extends ConsumerWidget {
@@ -13,17 +14,16 @@ class SearchSuggestionList extends ConsumerWidget {
     final searchTerm = ref.watch(searchPageStateProvider).searchTerm;
     final searchSuggestion =
         ref.watch(searchPageStateProvider).searchSuggestion;
-    var isDarkTheme = Theme.of(context).brightness == Brightness.dark;
 
     return Container(
       color: searchTerm.isEmpty
           ? Colors.black.withOpacity(0.5)
-          : Theme.of(context).scaffoldBackgroundColor,
+          : context.scaffoldBackgroundColor,
       child: CustomScrollView(
         slivers: [
           SliverToBoxAdapter(
             child: Container(
-              color: isDarkTheme ? Colors.grey[800] : Colors.grey[100],
+              color: context.isDarkTheme ? Colors.grey[800] : Colors.grey[100],
               child: Padding(
                 padding: const EdgeInsets.all(16.0),
                 child: RichText(
@@ -31,14 +31,14 @@ class SearchSuggestionList extends ConsumerWidget {
                     children: [
                       TextSpan(
                         text: 'search_suggestion_list_smart_search_hint_1'.tr(),
-                        style: Theme.of(context).textTheme.bodyMedium,
+                        style: context.textTheme.bodyMedium,
                       ),
                       TextSpan(
                         text: 'search_suggestion_list_smart_search_hint_2'.tr(),
-                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                              color: Theme.of(context).primaryColor,
-                              fontWeight: FontWeight.bold,
-                            ),
+                        style: context.textTheme.bodyMedium?.copyWith(
+                          color: context.primaryColor,
+                          fontWeight: FontWeight.bold,
+                        ),
                       ),
                     ],
                   ),

mobile/lib/modules/search/ui/thumbnail_with_info.dart

@@ -1,7 +1,8 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/shared/models/store.dart';
-import 'package:immich_mobile/utils/capitalize.dart';
+import 'package:immich_mobile/extensions/string_extensions.dart';
 
 // ignore: must_be_immutable
 class ThumbnailWithInfo extends StatelessWidget {
@@ -22,8 +23,8 @@ class ThumbnailWithInfo extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var isDarkMode = Theme.of(context).brightness == Brightness.dark;
-    var textAndIconColor = isDarkMode ? Colors.grey[100] : Colors.grey[700];
+    var textAndIconColor =
+        context.isDarkTheme ? Colors.grey[100] : Colors.grey[700];
     return GestureDetector(
       onTap: () {
         onTap();
@@ -34,7 +35,7 @@ class ThumbnailWithInfo extends StatelessWidget {
           Container(
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(borderRadius),
-              color: isDarkMode ? Colors.grey[900] : Colors.grey[100],
+              color: context.isDarkTheme ? Colors.grey[900] : Colors.grey[100],
             ),
             child: imageUrl != null
                 ? ClipRRect(