fix(mobile): search page (#10385)

* refactor(search): hide people/places if empty

* refactor(search): remove unused stack

* refactor(search): fix dropdown menu's width

* feat(search): show camera make/model vertically on mobile devices

* fix: lint errors

mobile/lib/pages/search/search.page.dart

@@ -13,7 +13,7 @@ import 'package:immich_mobile/providers/search/search_page_state.provider.dart';
 import 'package:immich_mobile/widgets/search/curated_people_row.dart';
 import 'package:immich_mobile/widgets/search/curated_places_row.dart';
 import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
-import 'package:immich_mobile/widgets/search/search_row_title.dart';
+import 'package:immich_mobile/widgets/search/search_row_section.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
@@ -31,7 +31,7 @@ class SearchPage extends HookConsumerWidget {
     final curatedPeople = ref.watch(getAllPeopleProvider);
     final isMapEnabled =
         ref.watch(serverInfoProvider.select((v) => v.serverFeatures.map));
-    double imageSize = math.min(context.width / 3, 150);
+    final double imageSize = math.min(context.width / 3, 150);
 
     TextStyle categoryTitleStyle = const TextStyle(
       fontWeight: FontWeight.w500,
@@ -53,16 +53,15 @@ class SearchPage extends HookConsumerWidget {
     }
 
     buildPeople() {
-      return SizedBox(
+      return curatedPeople.widgetWhen(
-        height: imageSize,
-        child: curatedPeople.widgetWhen(
         onError: (error, stack) => const ScaffoldErrorBody(withIcon: false),
-          onData: (people) => Padding(
+        onData: (people) {
-            padding: const EdgeInsets.only(
+          return SearchRowSection(
-              left: 16,
+            onViewAllPressed: () => context.pushRoute(const AllPeopleRoute()),
-              top: 8,
+            title: "search_page_people".tr(),
-            ),
+            isEmpty: people.isEmpty,
             child: CuratedPeopleRow(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
               content: people
                   .map((e) => SearchCuratedContent(label: e.name, id: e.id))
                   .take(12)
@@ -79,17 +78,20 @@ class SearchPage extends HookConsumerWidget {
                 showNameEditModel(person.id, person.label),
               },
             ),
-          ),
+          );
-        ),
+        },
       );
     }
 
     buildPlaces() {
-      return SizedBox(
+      return places.widgetWhen(
-        height: imageSize,
-        child: places.widgetWhen(
         onError: (error, stack) => const ScaffoldErrorBody(withIcon: false),
-          onData: (data) => CuratedPlacesRow(
+        onData: (data) {
+          return SearchRowSection(
+            onViewAllPressed: () => context.pushRoute(const AllPlacesRoute()),
+            title: "search_page_places".tr(),
+            isEmpty: !isMapEnabled && data.isEmpty,
+            child: CuratedPlacesRow(
               isMapEnabled: isMapEnabled,
               content: data,
               imageSize: imageSize,
@@ -114,7 +116,8 @@ class SearchPage extends HookConsumerWidget {
                 );
               },
             ),
-        ),
+          );
+        },
       );
     }
 
@@ -160,24 +163,12 @@ class SearchPage extends HookConsumerWidget {
 
     return Scaffold(
       appBar: const ImmichAppBar(),
-      body: Stack(
+      body: ListView(
-        children: [
-          ListView(
         children: [
           buildSearchButton(),
-              SearchRowTitle(
+          const SizedBox(height: 8.0),
-                title: "search_page_people".tr(),
-                onViewAllPressed: () =>
-                    context.pushRoute(const AllPeopleRoute()),
-              ),
           buildPeople(),
-              SearchRowTitle(
+          const SizedBox(height: 8.0),
-                title: "search_page_places".tr(),
-                onViewAllPressed: () =>
-                    context.pushRoute(const AllPlacesRoute()),
-                top: 0,
-              ),
-              const SizedBox(height: 10.0),
           buildPlaces(),
           const SizedBox(height: 24.0),
           Padding(
@@ -194,8 +185,8 @@ class SearchPage extends HookConsumerWidget {
               Icons.favorite_border_rounded,
               color: categoryIconColor,
             ),
-                title: Text('search_page_favorites', style: categoryTitleStyle)
+            title:
-                    .tr(),
+                Text('search_page_favorites', style: categoryTitleStyle).tr(),
             onTap: () => context.pushRoute(const FavoritesRoute()),
           ),
           const CategoryDivider(),
@@ -221,8 +212,7 @@ class SearchPage extends HookConsumerWidget {
             ).tr(),
           ),
           ListTile(
-                title:
+            title: Text('search_page_videos', style: categoryTitleStyle).tr(),
-                    Text('search_page_videos', style: categoryTitleStyle).tr(),
             leading: Icon(
               Icons.play_circle_outline,
               color: categoryIconColor,
@@ -243,8 +233,6 @@ class SearchPage extends HookConsumerWidget {
           ),
         ],
       ),
-        ],
-      ),
     );
   }
 }

mobile/lib/widgets/search/curated_people_row.dart

@@ -2,11 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/models/search/search_curated_content.model.dart';
-import 'package:immich_mobile/widgets/search/thumbnail_with_info.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
 class CuratedPeopleRow extends StatelessWidget {
+  static const double imageSize = 60.0;
+
   final List<SearchCuratedContent> content;
   final EdgeInsets? padding;
 
@@ -24,40 +25,18 @@ class CuratedPeopleRow extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const imageSize = 60.0;
+    return SizedBox(
-
+      height: imageSize + 30,
-    // Guard empty [content]
+      child: ListView.separated(
-    if (content.isEmpty) {
-      // Return empty thumbnail
-      return Align(
-        alignment: Alignment.centerLeft,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-          child: SizedBox(
-            width: imageSize,
-            height: imageSize,
-            child: ThumbnailWithInfo(
-              textInfo: '',
-              onTap: () {},
-            ),
-          ),
-        ),
-      );
-    }
-
-    return ListView.builder(
         padding: padding,
         scrollDirection: Axis.horizontal,
+        separatorBuilder: (context, index) => const SizedBox(width: 16),
         itemBuilder: (context, index) {
           final person = content[index];
           final headers = {
             "x-immich-user-token": Store.get(StoreKey.accessToken),
           };
-        return Padding(
+          return Column(
-          padding: const EdgeInsets.only(right: 18.0),
-          child: SizedBox(
-            width: imageSize,
-            child: Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               GestureDetector(
@@ -77,35 +56,37 @@ class CuratedPeopleRow extends StatelessWidget {
                   ),
                 ),
               ),
-                if (person.label == "")
+              const SizedBox(height: 8),
-                  GestureDetector(
+              _buildPersonLabel(context, person, index),
+            ],
+          );
+        },
+        itemCount: content.length,
+      ),
+    );
+  }
+
+  Widget _buildPersonLabel(
+    BuildContext context,
+    SearchCuratedContent person,
+    int index,
+  ) {
+    if (person.label.isEmpty) {
+      return GestureDetector(
         onTap: () => onNameTap?.call(person, index),
-                    child: Padding(
-                      padding: const EdgeInsets.only(top: 8.0),
         child: Text(
           "exif_bottom_sheet_person_add_person",
           style: context.textTheme.labelLarge?.copyWith(
             color: context.primaryColor,
           ),
         ).tr(),
-                    ),
+      );
-                  )
+    }
-                else
+    return Text(
-                  Padding(
-                    padding: const EdgeInsets.only(top: 8.0),
-                    child: Text(
       person.label,
       textAlign: TextAlign.center,
       overflow: TextOverflow.ellipsis,
       style: context.textTheme.labelLarge,
-                    ),
-                  ),
-              ],
-            ),
-          ),
-        );
-      },
-      itemCount: content.length,
     );
   }
 }

mobile/lib/widgets/search/curated_places_row.dart

@@ -1,108 +1,34 @@
-import 'package:auto_route/auto_route.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
+import 'package:immich_mobile/models/search/search_curated_content.model.dart';
-import 'package:immich_mobile/widgets/search/curated_row.dart';
+import 'package:immich_mobile/widgets/search/search_map_thumbnail.dart';
 import 'package:immich_mobile/widgets/search/thumbnail_with_info.dart';
-import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
-import 'package:maplibre_gl/maplibre_gl.dart';
-
-class CuratedPlacesRow extends CuratedRow {
-  final bool isMapEnabled;
 
+class CuratedPlacesRow extends StatelessWidget {
   const CuratedPlacesRow({
     super.key,
-    required super.content,
+    required this.content,
+    required this.imageSize,
     this.isMapEnabled = true,
-    super.imageSize,
+    this.onTap,
-    super.onTap,
   });
 
+  final bool isMapEnabled;
+  final List<SearchCuratedContent> content;
+  final double imageSize;
+
+  /// Callback with the content and the index when tapped
+  final Function(SearchCuratedContent, int)? onTap;
+
   @override
   Widget build(BuildContext context) {
     // Calculating the actual index of the content based on the whether map is enabled or not.
     // If enabled, inject map as the first item in the list (index 0) and so the actual content will start from index 1
     final int actualContentIndex = isMapEnabled ? 1 : 0;
-    Widget buildMapThumbnail() {
-      return GestureDetector(
-        onTap: () => context.pushRoute(
-          const MapRoute(),
-        ),
-        child: SizedBox.square(
-          dimension: imageSize,
-          child: Stack(
-            children: [
-              Padding(
-                padding: const EdgeInsets.only(right: 10.0),
-                child: MapThumbnail(
-                  zoom: 2,
-                  centre: const LatLng(
-                    47,
-                    5,
-                  ),
-                  height: imageSize,
-                  width: imageSize,
-                  showAttribution: false,
-                ),
-              ),
-              Padding(
-                padding: const EdgeInsets.only(right: 10.0),
-                child: Container(
-                  decoration: BoxDecoration(
-                    borderRadius: BorderRadius.circular(10),
-                    color: Colors.black,
-                    gradient: LinearGradient(
-                      begin: FractionalOffset.topCenter,
-                      end: FractionalOffset.bottomCenter,
-                      colors: [
-                        Colors.blueGrey.withOpacity(0.0),
-                        Colors.black.withOpacity(0.4),
-                      ],
-                      stops: const [0.0, 0.4],
-                    ),
-                  ),
-                ),
-              ),
-              Align(
-                alignment: Alignment.bottomCenter,
-                child: Padding(
-                  padding: const EdgeInsets.only(bottom: 10),
-                  child: const Text(
-                    "search_page_your_map",
-                    style: TextStyle(
-                      color: Colors.white,
-                      fontWeight: FontWeight.bold,
-                      fontSize: 14,
-                    ),
-                  ).tr(),
-                ),
-              ),
-            ],
-          ),
-        ),
-      );
-    }
 
-    // Return empty thumbnail
+    return SizedBox(
-    if (!isMapEnabled && content.isEmpty) {
-      return Align(
-        alignment: Alignment.centerLeft,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-          child: SizedBox(
-            width: imageSize,
       height: imageSize,
-            child: ThumbnailWithInfo(
+      child: ListView.builder(
-              textInfo: '',
-              onTap: () {},
-            ),
-          ),
-        ),
-      );
-    }
-
-    return ListView.builder(
         scrollDirection: Axis.horizontal,
         padding: const EdgeInsets.symmetric(
           horizontal: 16,
@@ -110,7 +36,9 @@ class CuratedPlacesRow extends CuratedRow {
         itemBuilder: (context, index) {
           // Injecting Map thumbnail as the first element
           if (isMapEnabled && index == 0) {
-          return buildMapThumbnail();
+            return SearchMapThumbnail(
+              size: imageSize,
+            );
           }
           final actualIndex = index - actualContentIndex;
           final object = content[actualIndex];
@@ -130,6 +58,7 @@ class CuratedPlacesRow extends CuratedRow {
           );
         },
         itemCount: content.length + actualContentIndex,
+      ),
     );
   }
 }

mobile/lib/widgets/search/curated_row.dart

@@ -1,66 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/models/search/search_curated_content.model.dart';
-import 'package:immich_mobile/widgets/search/thumbnail_with_info.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
-
-class CuratedRow extends StatelessWidget {
-  final List<SearchCuratedContent> content;
-  final double imageSize;
-
-  /// Callback with the content and the index when tapped
-  final Function(SearchCuratedContent, int)? onTap;
-
-  const CuratedRow({
-    super.key,
-    required this.content,
-    this.imageSize = 200,
-    this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    // Guard empty [content]
-    if (content.isEmpty) {
-      // Return empty thumbnail
-      return Align(
-        alignment: Alignment.centerLeft,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-          child: SizedBox(
-            width: imageSize,
-            height: imageSize,
-            child: ThumbnailWithInfo(
-              textInfo: '',
-              onTap: () {},
-            ),
-          ),
-        ),
-      );
-    }
-
-    return ListView.builder(
-      scrollDirection: Axis.horizontal,
-      padding: const EdgeInsets.symmetric(
-        horizontal: 16,
-      ),
-      itemBuilder: (context, index) {
-        final object = content[index];
-        final thumbnailRequestUrl =
-            '${Store.get(StoreKey.serverEndpoint)}/assets/${object.id}/thumbnail';
-        return SizedBox(
-          width: imageSize,
-          height: imageSize,
-          child: Padding(
-            padding: const EdgeInsets.only(right: 4.0),
-            child: ThumbnailWithInfo(
-              imageUrl: thumbnailRequestUrl,
-              textInfo: object.label,
-              onTap: () => onTap?.call(object, index),
-            ),
-          ),
-        );
-      },
-      itemCount: content.length,
-    );
-  }
-}

mobile/lib/widgets/search/search_filter/camera_picker.dart

@@ -5,6 +5,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/models/search/search_filter.model.dart';
 import 'package:immich_mobile/providers/search/search_filter.provider.dart';
+import 'package:immich_mobile/widgets/search/search_filter/common/dropdown.dart';
 import 'package:openapi/api.dart';
 
 class CameraPicker extends HookConsumerWidget {
@@ -12,6 +13,7 @@ class CameraPicker extends HookConsumerWidget {
 
   final Function(Map<String, String?>) onSelect;
   final SearchCameraFilter? filter;
+
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final makeTextController = useTextEditingController(text: filter?.make);
@@ -32,29 +34,7 @@ class CameraPicker extends HookConsumerWidget {
       ),
     );
 
-    final inputDecorationTheme = InputDecorationTheme(
+    final makeWidget = SearchDropdown(
-      border: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(20),
-      ),
-      contentPadding: const EdgeInsets.only(left: 16),
-    );
-
-    final menuStyle = MenuStyle(
-      shape: WidgetStatePropertyAll<OutlinedBorder>(
-        RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(15),
-        ),
-      ),
-    );
-
-    return Container(
-      padding: const EdgeInsets.only(
-          // bottom: MediaQuery.of(context).viewInsets.bottom,
-          ),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-        children: [
-          DropdownMenu(
       dropdownMenuEntries: switch (make) {
         AsyncError() => [],
         AsyncData(:final value) => value
@@ -67,15 +47,9 @@ class CameraPicker extends HookConsumerWidget {
             .toList(),
         _ => [],
       },
-            width: context.width * 0.45,
-            menuHeight: 400,
       label: const Text('search_filter_camera_make').tr(),
-            inputDecorationTheme: inputDecorationTheme,
       controller: makeTextController,
-            menuStyle: menuStyle,
       leadingIcon: const Icon(Icons.photo_camera_rounded),
-            trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
-            selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
       onSelected: (value) {
         selectedMake.value = value.toString();
         onSelect({
@@ -83,8 +57,9 @@ class CameraPicker extends HookConsumerWidget {
           'model': selectedModel.value,
         });
       },
-          ),
+    );
-          DropdownMenu(
+
+    final modelWidget = SearchDropdown(
       dropdownMenuEntries: switch (models) {
         AsyncError() => [],
         AsyncData(:final value) => value
@@ -97,15 +72,9 @@ class CameraPicker extends HookConsumerWidget {
             .toList(),
         _ => [],
       },
-            width: context.width * 0.45,
-            menuHeight: 400,
       label: const Text('search_filter_camera_model').tr(),
-            inputDecorationTheme: inputDecorationTheme,
       controller: modelTextController,
-            menuStyle: menuStyle,
       leadingIcon: const Icon(Icons.camera),
-            trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
-            selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
       onSelected: (value) {
         selectedModel.value = value.toString();
         onSelect({
@@ -113,9 +82,25 @@ class CameraPicker extends HookConsumerWidget {
           'model': selectedModel.value,
         });
       },
-          ),
+    );
+
+    if (context.isMobile) {
+      return Column(
+        children: [
+          makeWidget,
+          const SizedBox(height: 8),
+          modelWidget,
+        ],
+      );
+    }
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: [
+        Expanded(child: makeWidget),
+        const SizedBox(width: 16),
+        Expanded(child: modelWidget),
       ],
-      ),
     );
   }
 }

mobile/lib/widgets/search/search_filter/common/dropdown.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+class SearchDropdown<T> extends StatelessWidget {
+  const SearchDropdown({
+    super.key,
+    required this.dropdownMenuEntries,
+    required this.controller,
+    this.onSelected,
+    this.label,
+    this.leadingIcon,
+  });
+
+  final List<DropdownMenuEntry<T>> dropdownMenuEntries;
+  final TextEditingController controller;
+  final void Function(T?)? onSelected;
+  final Widget? label;
+  final Widget? leadingIcon;
+
+  @override
+  Widget build(BuildContext context) {
+    final inputDecorationTheme = InputDecorationTheme(
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(20),
+      ),
+      contentPadding: const EdgeInsets.only(left: 16),
+    );
+
+    final menuStyle = MenuStyle(
+      shape: WidgetStatePropertyAll<OutlinedBorder>(
+        RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(15),
+        ),
+      ),
+    );
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return DropdownMenu(
+          leadingIcon: leadingIcon,
+          width: constraints.maxWidth,
+          dropdownMenuEntries: dropdownMenuEntries,
+          label: label,
+          inputDecorationTheme: inputDecorationTheme,
+          menuStyle: menuStyle,
+          trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
+          selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
+          onSelected: onSelected,
+        );
+      },
+    );
+  }
+}

mobile/lib/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart

@@ -38,7 +38,10 @@ class FilterBottomSheetScaffold extends StatelessWidget {
               style: context.textTheme.headlineSmall,
             ),
           ),
-          buildChildWidget(),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: buildChildWidget(),
+          ),
           Padding(
             padding: const EdgeInsets.all(8.0),
             child: Row(

mobile/lib/widgets/search/search_filter/location_picker.dart

@@ -2,9 +2,9 @@ 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/models/search/search_filter.model.dart';
 import 'package:immich_mobile/providers/search/search_filter.provider.dart';
+import 'package:immich_mobile/widgets/search/search_filter/common/dropdown.dart';
 import 'package:openapi/api.dart';
 
 class LocationPicker extends HookConsumerWidget {
@@ -48,24 +48,9 @@ class LocationPicker extends HookConsumerWidget {
       ),
     );
 
-    final inputDecorationTheme = InputDecorationTheme(
-      border: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(20),
-      ),
-      contentPadding: const EdgeInsets.only(left: 16),
-    );
-
-    final menuStyle = MenuStyle(
-      shape: WidgetStatePropertyAll<OutlinedBorder>(
-        RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(15),
-        ),
-      ),
-    );
-
     return Column(
       children: [
-        DropdownMenu(
+        SearchDropdown(
           dropdownMenuEntries: switch (countries) {
             AsyncError() => [],
             AsyncData(:final value) => value
@@ -78,14 +63,8 @@ class LocationPicker extends HookConsumerWidget {
                 .toList(),
             _ => [],
           },
-          menuHeight: 400,
-          width: context.width * 0.9,
           label: const Text('search_filter_location_country').tr(),
-          inputDecorationTheme: inputDecorationTheme,
-          menuStyle: menuStyle,
           controller: countryTextController,
-          trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
-          selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
           onSelected: (value) {
             if (value.toString() == selectedCountry.value) {
               return;
@@ -103,7 +82,7 @@ class LocationPicker extends HookConsumerWidget {
         const SizedBox(
           height: 16,
         ),
-        DropdownMenu(
+        SearchDropdown(
           dropdownMenuEntries: switch (states) {
             AsyncError() => [],
             AsyncData(:final value) => value
@@ -116,14 +95,8 @@ class LocationPicker extends HookConsumerWidget {
                 .toList(),
             _ => [],
           },
-          menuHeight: 400,
-          width: context.width * 0.9,
           label: const Text('search_filter_location_state').tr(),
-          inputDecorationTheme: inputDecorationTheme,
-          menuStyle: menuStyle,
           controller: stateTextController,
-          trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
-          selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
           onSelected: (value) {
             if (value.toString() == selectedState.value) {
               return;
@@ -140,7 +113,7 @@ class LocationPicker extends HookConsumerWidget {
         const SizedBox(
           height: 16,
         ),
-        DropdownMenu(
+        SearchDropdown(
           dropdownMenuEntries: switch (cities) {
             AsyncError() => [],
             AsyncData(:final value) => value
@@ -153,14 +126,8 @@ class LocationPicker extends HookConsumerWidget {
                 .toList(),
             _ => [],
           },
-          menuHeight: 400,
-          width: context.width * 0.9,
           label: const Text('search_filter_location_city').tr(),
-          inputDecorationTheme: inputDecorationTheme,
-          menuStyle: menuStyle,
           controller: cityTextController,
-          trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
-          selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
           onSelected: (value) {
             selectedCity.value = value.toString();
             onSelected({

mobile/lib/widgets/search/search_map_thumbnail.dart

@@ -0,0 +1,76 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class SearchMapThumbnail extends StatelessWidget {
+  const SearchMapThumbnail({
+    super.key,
+    this.size = 60.0,
+  });
+
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () => context.pushRoute(
+        const MapRoute(),
+      ),
+      child: SizedBox.square(
+        dimension: size,
+        child: Stack(
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(right: 10.0),
+              child: MapThumbnail(
+                zoom: 2,
+                centre: const LatLng(
+                  47,
+                  5,
+                ),
+                height: size,
+                width: size,
+                showAttribution: false,
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(right: 10.0),
+              child: Container(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(10),
+                  color: Colors.black,
+                  gradient: LinearGradient(
+                    begin: FractionalOffset.topCenter,
+                    end: FractionalOffset.bottomCenter,
+                    colors: [
+                      Colors.blueGrey.withOpacity(0.0),
+                      Colors.black.withOpacity(0.4),
+                    ],
+                    stops: const [0.0, 0.4],
+                  ),
+                ),
+              ),
+            ),
+            Align(
+              alignment: Alignment.bottomCenter,
+              child: Padding(
+                padding: const EdgeInsets.only(bottom: 10),
+                child: const Text(
+                  "search_page_your_map",
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontWeight: FontWeight.bold,
+                    fontSize: 14,
+                  ),
+                ).tr(),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/search/search_row_section.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/widgets/search/search_row_title.dart';
+
+class SearchRowSection extends StatelessWidget {
+  const SearchRowSection({
+    super.key,
+    required this.onViewAllPressed,
+    required this.title,
+    this.isEmpty = false,
+    required this.child,
+  });
+
+  final Function() onViewAllPressed;
+  final String title;
+  final bool isEmpty;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    if (isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return Column(
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16),
+          child: SearchRowTitle(
+            onViewAllPressed: onViewAllPressed,
+            title: title,
+          ),
+        ),
+        child,
+      ],
+    );
+  }
+}

mobile/lib/widgets/search/search_row_title.dart

@@ -3,26 +3,18 @@ import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 
 class SearchRowTitle extends StatelessWidget {
-  final Function() onViewAllPressed;
-  final String title;
-  final double top;
-
   const SearchRowTitle({
     super.key,
     required this.onViewAllPressed,
     required this.title,
-    this.top = 12,
   });
 
+  final Function() onViewAllPressed;
+  final String title;
+
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Row(
-      padding: EdgeInsets.only(
-        left: 16.0,
-        right: 16.0,
-        top: top,
-      ),
-      child: Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
         Text(
@@ -41,7 +33,6 @@ class SearchRowTitle extends StatelessWidget {
           ).tr(),
         ),
       ],
-      ),
     );
   }
 }