Source Code added

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

@@ -0,0 +1,25 @@
+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/asyncvalue_extensions.dart';
+import 'package:immich_mobile/widgets/asset_grid/immich_asset_grid.dart';
+import 'package:immich_mobile/providers/search/all_motion_photos.provider.dart';
+
+@RoutePage()
+class AllMotionPhotosPage extends HookConsumerWidget {
+  const AllMotionPhotosPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final motionPhotos = ref.watch(allMotionPhotosProvider);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('search_page_motion_photos').tr(),
+        leading: IconButton(onPressed: () => context.maybePop(), icon: const Icon(Icons.arrow_back_ios_rounded)),
+      ),
+      body: motionPhotos.widgetWhen(onData: (assets) => ImmichAssetGrid(assets: assets)),
+    );
+  }
+}

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

@@ -0,0 +1,31 @@
+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/asyncvalue_extensions.dart';
+import 'package:immich_mobile/models/search/search_curated_content.model.dart';
+import 'package:immich_mobile/providers/search/people.provider.dart';
+import 'package:immich_mobile/widgets/search/explore_grid.dart';
+
+@RoutePage()
+class AllPeoplePage extends HookConsumerWidget {
+  const AllPeoplePage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final curatedPeople = ref.watch(getAllPeopleProvider);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('people').tr(),
+        leading: IconButton(onPressed: () => context.maybePop(), icon: const Icon(Icons.arrow_back_ios_rounded)),
+      ),
+      body: curatedPeople.widgetWhen(
+        onData: (people) => ExploreGrid(
+          isPeople: true,
+          curatedContent: people.map((e) => SearchCuratedContent(label: e.name, id: e.id)).toList(),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,26 @@
+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/asyncvalue_extensions.dart';
+import 'package:immich_mobile/models/search/search_curated_content.model.dart';
+import 'package:immich_mobile/providers/search/search_page_state.provider.dart';
+import 'package:immich_mobile/widgets/search/explore_grid.dart';
+
+@RoutePage()
+class AllPlacesPage extends HookConsumerWidget {
+  const AllPlacesPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    AsyncValue<List<SearchCuratedContent>> places = ref.watch(getAllPlacesProvider);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('places').tr(),
+        leading: IconButton(onPressed: () => context.maybePop(), icon: const Icon(Icons.arrow_back_ios_rounded)),
+      ),
+      body: places.widgetWhen(onData: (data) => ExploreGrid(curatedContent: data)),
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+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/providers/timeline.provider.dart';
+import 'package:immich_mobile/widgets/asset_grid/multiselect_grid.dart';
+
+@RoutePage()
+class AllVideosPage extends HookConsumerWidget {
+  const AllVideosPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('videos').tr(),
+        leading: IconButton(onPressed: () => context.maybePop(), icon: const Icon(Icons.arrow_back_ios_rounded)),
+      ),
+      body: MultiselectGrid(renderListProvider: allVideosTimelineProvider),
+    );
+  }
+}

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

@@ -0,0 +1,384 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:geolocator/geolocator.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/maplibrecontroller_extensions.dart';
+import 'package:immich_mobile/models/map/map_event.model.dart';
+import 'package:immich_mobile/models/map/map_marker.model.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
+import 'package:immich_mobile/providers/db.provider.dart';
+import 'package:immich_mobile/providers/map/map_marker.provider.dart';
+import 'package:immich_mobile/providers/map/map_state.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/debounce.dart';
+import 'package:immich_mobile/utils/immich_loading_overlay.dart';
+import 'package:immich_mobile/utils/map_utils.dart';
+import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_mobile/widgets/map/map_app_bar.dart';
+import 'package:immich_mobile/widgets/map/map_asset_grid.dart';
+import 'package:immich_mobile/widgets/map/map_bottom_sheet.dart';
+import 'package:immich_mobile/widgets/map/map_theme_override.dart';
+import 'package:immich_mobile/widgets/map/positioned_asset_marker_icon.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+@RoutePage()
+class MapPage extends HookConsumerWidget {
+  const MapPage({super.key, this.initialLocation});
+  final LatLng? initialLocation;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final mapController = useRef<MapLibreMapController?>(null);
+    final markers = useRef<List<MapMarker>>([]);
+    final markersInBounds = useRef<List<MapMarker>>([]);
+    final bottomSheetStreamController = useStreamController<MapEvent>();
+    final selectedMarker = useValueNotifier<_AssetMarkerMeta?>(null);
+    final assetsDebouncer = useDebouncer();
+    final layerDebouncer = useDebouncer(interval: const Duration(seconds: 1));
+    final isLoading = useProcessingOverlay();
+    final scrollController = useScrollController();
+    final markerDebouncer = useDebouncer(interval: const Duration(milliseconds: 800));
+    final selectedAssets = useValueNotifier<Set<Asset>>({});
+    const mapZoomToAssetLevel = 12.0;
+
+    // updates the markersInBounds value with the map markers that are visible in the current
+    // map camera bounds
+    Future<void> updateAssetsInBounds() async {
+      // Guard map not created
+      if (mapController.value == null) {
+        return;
+      }
+
+      final bounds = await mapController.value!.getVisibleRegion();
+      final inBounds = markers.value
+          .where((m) => bounds.contains(LatLng(m.latLng.latitude, m.latLng.longitude)))
+          .toList();
+      // Notify bottom sheet to update asset grid only when there are new assets
+      if (markersInBounds.value.length != inBounds.length) {
+        bottomSheetStreamController.add(MapAssetsInBoundsUpdated(inBounds.map((e) => e.assetRemoteId).toList()));
+      }
+      markersInBounds.value = inBounds;
+    }
+
+    // removes all sources and layers and re-adds them with the updated markers
+    Future<void> reloadLayers() async {
+      if (mapController.value != null) {
+        layerDebouncer.run(() => mapController.value!.reloadAllLayersForMarkers(markers.value));
+      }
+    }
+
+    Future<void> loadMarkers() async {
+      try {
+        isLoading.value = true;
+        markers.value = await ref.read(mapMarkersProvider.future);
+        assetsDebouncer.run(updateAssetsInBounds);
+        await reloadLayers();
+      } finally {
+        isLoading.value = false;
+      }
+    }
+
+    useEffect(() {
+      final currentAssetLink = ref.read(currentAssetProvider.notifier).ref.keepAlive();
+
+      loadMarkers();
+      return currentAssetLink.close;
+    }, []);
+
+    // Refetch markers when map state is changed
+    ref.listen(mapStateNotifierProvider, (_, current) {
+      if (current.shouldRefetchMarkers) {
+        markerDebouncer.run(() {
+          ref.invalidate(mapMarkersProvider);
+          // Reset marker
+          selectedMarker.value = null;
+          loadMarkers();
+          ref.read(mapStateNotifierProvider.notifier).setRefetchMarkers(false);
+        });
+      }
+    });
+
+    // updates the selected markers position based on the current map camera
+    Future<void> updateAssetMarkerPosition(MapMarker marker, {bool shouldAnimate = true}) async {
+      final assetPoint = await mapController.value!.toScreenLocation(marker.latLng);
+      selectedMarker.value = _AssetMarkerMeta(point: assetPoint, marker: marker, shouldAnimate: shouldAnimate);
+      (assetPoint, marker, shouldAnimate);
+    }
+
+    // finds the nearest asset marker from the tap point and store it as the selectedMarker
+    Future<void> onMarkerClicked(Point<double> point, LatLng coords) async {
+      // Guard map not created
+      if (mapController.value == null) {
+        return;
+      }
+      final latlngBound = await mapController.value!.getBoundsFromPoint(point, 50);
+      final marker = markersInBounds.value.firstWhereOrNull(
+        (m) => latlngBound.contains(LatLng(m.latLng.latitude, m.latLng.longitude)),
+      );
+
+      if (marker != null) {
+        await updateAssetMarkerPosition(marker);
+      } else {
+        // If no asset was previously selected and no new asset is available, close the bottom sheet
+        if (selectedMarker.value == null) {
+          bottomSheetStreamController.add(const MapCloseBottomSheet());
+        }
+        selectedMarker.value = null;
+      }
+    }
+
+    void onMapCreated(MapLibreMapController controller) async {
+      mapController.value = controller;
+      controller.addListener(() {
+        if (controller.isCameraMoving && selectedMarker.value != null) {
+          updateAssetMarkerPosition(selectedMarker.value!.marker, shouldAnimate: false);
+        }
+      });
+    }
+
+    Future<void> onMarkerTapped() async {
+      final assetId = selectedMarker.value?.marker.assetRemoteId;
+      if (assetId == null) {
+        return;
+      }
+
+      final asset = await ref.read(dbProvider).assets.getByRemoteId(assetId);
+      if (asset == null) {
+        return;
+      }
+
+      // Since we only have a single asset, we can just show GroupAssetBy.none
+      final renderList = await RenderList.fromAssets([asset], GroupAssetsBy.none);
+
+      ref.read(currentAssetProvider.notifier).set(asset);
+      if (asset.isVideo) {
+        ref.read(showControlsProvider.notifier).show = false;
+      }
+      unawaited(context.pushRoute(GalleryViewerRoute(initialIndex: 0, heroOffset: 0, renderList: renderList)));
+    }
+
+    /// BOTTOM SHEET CALLBACKS
+
+    Future<void> onMapMoved() async {
+      assetsDebouncer.run(updateAssetsInBounds);
+    }
+
+    void onBottomSheetScrolled(String assetRemoteId) {
+      final assetMarker = markersInBounds.value.firstWhereOrNull((m) => m.assetRemoteId == assetRemoteId);
+      if (assetMarker != null) {
+        updateAssetMarkerPosition(assetMarker);
+      }
+    }
+
+    void onZoomToAsset(String assetRemoteId) {
+      final assetMarker = markersInBounds.value.firstWhereOrNull((m) => m.assetRemoteId == assetRemoteId);
+      if (mapController.value != null && assetMarker != null) {
+        // Offset the latitude a little to show the marker just above the viewports center
+        final offset = context.isMobile ? 0.02 : 0;
+        final latlng = LatLng(assetMarker.latLng.latitude - offset, assetMarker.latLng.longitude);
+        mapController.value!.animateCamera(
+          CameraUpdate.newLatLngZoom(latlng, mapZoomToAssetLevel),
+          duration: const Duration(milliseconds: 800),
+        );
+      }
+    }
+
+    void onZoomToLocation() async {
+      final (location, error) = await MapUtils.checkPermAndGetLocation(context: context);
+      if (error != null) {
+        if (error == LocationPermission.unableToDetermine && context.mounted) {
+          ImmichToast.show(
+            context: context,
+            gravity: ToastGravity.BOTTOM,
+            toastType: ToastType.error,
+            msg: "map_cannot_get_user_location".tr(),
+          );
+        }
+        return;
+      }
+
+      if (mapController.value != null && location != null) {
+        await mapController.value!.animateCamera(
+          CameraUpdate.newLatLngZoom(LatLng(location.latitude, location.longitude), mapZoomToAssetLevel),
+          duration: const Duration(milliseconds: 800),
+        );
+      }
+    }
+
+    void onAssetsSelected(bool selected, Set<Asset> selection) {
+      selectedAssets.value = selected ? selection : {};
+    }
+
+    return MapThemeOverride(
+      mapBuilder: (style) => context.isMobile
+          // Single-column
+          ? Scaffold(
+              extendBodyBehindAppBar: true,
+              appBar: MapAppBar(selectedAssets: selectedAssets),
+              body: Stack(
+                children: [
+                  _MapWithMarker(
+                    initialLocation: initialLocation,
+                    style: style,
+                    selectedMarker: selectedMarker,
+                    onMapCreated: onMapCreated,
+                    onMapMoved: onMapMoved,
+                    onMapClicked: onMarkerClicked,
+                    onStyleLoaded: reloadLayers,
+                    onMarkerTapped: onMarkerTapped,
+                  ),
+                  // Should be a part of the body and not scaffold::bottomsheet for the
+                  // location button to be hit testable
+                  MapBottomSheet(
+                    mapEventStream: bottomSheetStreamController.stream,
+                    onGridAssetChanged: onBottomSheetScrolled,
+                    onZoomToAsset: onZoomToAsset,
+                    onAssetsSelected: onAssetsSelected,
+                    onZoomToLocation: onZoomToLocation,
+                    selectedAssets: selectedAssets,
+                  ),
+                ],
+              ),
+            )
+          // Two-pane
+          : Row(
+              children: [
+                Expanded(
+                  child: Scaffold(
+                    extendBodyBehindAppBar: true,
+                    appBar: MapAppBar(selectedAssets: selectedAssets),
+                    body: Stack(
+                      children: [
+                        _MapWithMarker(
+                          initialLocation: initialLocation,
+                          style: style,
+                          selectedMarker: selectedMarker,
+                          onMapCreated: onMapCreated,
+                          onMapMoved: onMapMoved,
+                          onMapClicked: onMarkerClicked,
+                          onStyleLoaded: reloadLayers,
+                          onMarkerTapped: onMarkerTapped,
+                        ),
+                        Positioned(
+                          right: 0,
+                          bottom: context.padding.bottom + 16,
+                          child: ElevatedButton(
+                            onPressed: onZoomToLocation,
+                            style: ElevatedButton.styleFrom(shape: const CircleBorder()),
+                            child: const Icon(Icons.my_location),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                Expanded(
+                  child: LayoutBuilder(
+                    builder: (ctx, constraints) => MapAssetGrid(
+                      controller: scrollController,
+                      mapEventStream: bottomSheetStreamController.stream,
+                      onGridAssetChanged: onBottomSheetScrolled,
+                      onZoomToAsset: onZoomToAsset,
+                      onAssetsSelected: onAssetsSelected,
+                      selectedAssets: selectedAssets,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+    );
+  }
+}
+
+class _AssetMarkerMeta {
+  final Point<num> point;
+  final MapMarker marker;
+  final bool shouldAnimate;
+
+  const _AssetMarkerMeta({required this.point, required this.marker, required this.shouldAnimate});
+
+  @override
+  String toString() => '_AssetMarkerMeta(point: $point, marker: $marker, shouldAnimate: $shouldAnimate)';
+}
+
+class _MapWithMarker extends StatelessWidget {
+  final AsyncValue<String> style;
+  final MapCreatedCallback onMapCreated;
+  final OnCameraIdleCallback onMapMoved;
+  final OnMapClickCallback onMapClicked;
+  final OnStyleLoadedCallback onStyleLoaded;
+  final Function()? onMarkerTapped;
+  final ValueNotifier<_AssetMarkerMeta?> selectedMarker;
+  final LatLng? initialLocation;
+
+  const _MapWithMarker({
+    required this.style,
+    required this.onMapCreated,
+    required this.onMapMoved,
+    required this.onMapClicked,
+    required this.onStyleLoaded,
+    required this.selectedMarker,
+    this.onMarkerTapped,
+    this.initialLocation,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (ctx, constraints) => SizedBox(
+        height: constraints.maxHeight,
+        width: constraints.maxWidth,
+        child: Stack(
+          children: [
+            style.widgetWhen(
+              onData: (style) => MapLibreMap(
+                attributionButtonMargins: const Point(8, kToolbarHeight),
+                initialCameraPosition: CameraPosition(
+                  target: initialLocation ?? const LatLng(0, 0),
+                  zoom: initialLocation != null ? 12 : 0,
+                ),
+                styleString: style,
+                // This is needed to update the selectedMarker's position on map camera updates
+                // The changes are notified through the mapController ValueListener which is added in [onMapCreated]
+                trackCameraPosition: true,
+                onMapCreated: onMapCreated,
+                onCameraIdle: onMapMoved,
+                onMapClick: onMapClicked,
+                onStyleLoadedCallback: onStyleLoaded,
+                tiltGesturesEnabled: false,
+                dragEnabled: false,
+                myLocationEnabled: false,
+                attributionButtonPosition: AttributionButtonPosition.topRight,
+                rotateGesturesEnabled: false,
+              ),
+            ),
+            ValueListenableBuilder(
+              valueListenable: selectedMarker,
+              builder: (ctx, value, _) => value != null
+                  ? PositionedAssetMarkerIcon(
+                      point: value.point,
+                      assetRemoteId: value.marker.assetRemoteId,
+                      assetThumbhash: '',
+                      durationInMilliseconds: value.shouldAnimate ? 100 : 0,
+                      onTap: onMarkerTapped,
+                    )
+                  : const SizedBox.shrink(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,163 @@
+import 'dart: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';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/maplibrecontroller_extensions.dart';
+import 'package:immich_mobile/utils/map_utils.dart';
+import 'package:immich_mobile/widgets/map/map_theme_override.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+@RoutePage()
+class MapLocationPickerPage extends HookConsumerWidget {
+  final LatLng initialLatLng;
+
+  const MapLocationPickerPage({super.key, this.initialLatLng = const LatLng(0, 0)});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedLatLng = useValueNotifier<LatLng>(initialLatLng);
+    final controller = useRef<MapLibreMapController?>(null);
+    final marker = useRef<Symbol?>(null);
+
+    Future<void> onStyleLoaded() async {
+      marker.value = await controller.value?.addMarkerAtLatLng(initialLatLng);
+    }
+
+    Future<void> onMapClick(Point<num> point, LatLng centre) async {
+      selectedLatLng.value = centre;
+      await controller.value?.animateCamera(CameraUpdate.newLatLng(centre));
+      if (marker.value != null) {
+        await controller.value?.updateSymbol(marker.value!, SymbolOptions(geometry: centre));
+      }
+    }
+
+    void onClose([LatLng? selected]) {
+      context.maybePop(selected);
+    }
+
+    Future<void> getCurrentLocation() async {
+      var (currentLocation, _) = await MapUtils.checkPermAndGetLocation(context: context);
+
+      if (currentLocation == null) {
+        return;
+      }
+
+      var currentLatLng = LatLng(currentLocation.latitude, currentLocation.longitude);
+      selectedLatLng.value = currentLatLng;
+      await controller.value?.animateCamera(CameraUpdate.newLatLngZoom(currentLatLng, 12));
+    }
+
+    return MapThemeOverride(
+      mapBuilder: (style) => Builder(
+        builder: (ctx) => Scaffold(
+          backgroundColor: ctx.themeData.cardColor,
+          appBar: _AppBar(onClose: onClose),
+          extendBodyBehindAppBar: true,
+          primary: true,
+          body: style.widgetWhen(
+            onData: (style) => Container(
+              clipBehavior: Clip.antiAliasWithSaveLayer,
+              decoration: const BoxDecoration(
+                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)),
+              ),
+              child: MapLibreMap(
+                initialCameraPosition: CameraPosition(
+                  target: initialLatLng,
+                  zoom: (initialLatLng.latitude == 0 && initialLatLng.longitude == 0) ? 1 : 12,
+                ),
+                styleString: style,
+                onMapCreated: (mapController) => controller.value = mapController,
+                onStyleLoadedCallback: onStyleLoaded,
+                onMapClick: onMapClick,
+                dragEnabled: false,
+                tiltGesturesEnabled: false,
+                myLocationEnabled: false,
+                attributionButtonMargins: const Point(20, 15),
+              ),
+            ),
+          ),
+          bottomNavigationBar: _BottomBar(
+            selectedLatLng: selectedLatLng,
+            onUseLocation: () => onClose(selectedLatLng.value),
+            onGetCurrentLocation: getCurrentLocation,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _AppBar extends StatelessWidget implements PreferredSizeWidget {
+  final Function() onClose;
+
+  const _AppBar({required this.onClose});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 25),
+      child: Align(
+        alignment: Alignment.centerLeft,
+        child: ElevatedButton(
+          onPressed: onClose,
+          style: ElevatedButton.styleFrom(shape: const CircleBorder()),
+          child: const Icon(Icons.arrow_back_ios_new_rounded),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(100);
+}
+
+class _BottomBar extends StatelessWidget {
+  final ValueNotifier<LatLng> selectedLatLng;
+  final Function() onUseLocation;
+  final Function() onGetCurrentLocation;
+
+  const _BottomBar({required this.selectedLatLng, required this.onUseLocation, required this.onGetCurrentLocation});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 150 + context.padding.bottom,
+      child: Padding(
+        padding: EdgeInsets.only(bottom: context.padding.bottom),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                const Icon(Icons.public, size: 18),
+                const SizedBox(width: 15),
+                ValueListenableBuilder(
+                  valueListenable: selectedLatLng,
+                  builder: (_, value, __) =>
+                      Text("${value.latitude.toStringAsFixed(4)}, ${value.longitude.toStringAsFixed(4)}"),
+                ),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                ElevatedButton(
+                  onPressed: onUseLocation,
+                  child: const Text("map_location_picker_page_use_location").tr(),
+                ),
+                ElevatedButton(onPressed: onGetCurrentLocation, child: const Icon(Icons.my_location)),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,104 @@
+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/providers/search/people.provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
+import 'package:immich_mobile/widgets/asset_grid/multiselect_grid.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+
+@RoutePage()
+class PersonResultPage extends HookConsumerWidget {
+  final String personId;
+  final String personName;
+
+  const PersonResultPage({super.key, required this.personId, required this.personName});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final name = useState(personName);
+
+    showEditNameDialog() {
+      showDialog(
+        context: context,
+        useRootNavigator: false,
+        builder: (BuildContext context) {
+          return PersonNameEditForm(personId: personId, personName: name.value);
+        },
+      ).then((result) {
+        if (result != null && result.success) {
+          name.value = result.updatedName;
+        }
+      });
+    }
+
+    void buildBottomSheet() {
+      showModalBottomSheet(
+        backgroundColor: context.scaffoldBackgroundColor,
+        isScrollControlled: false,
+        context: context,
+        useSafeArea: true,
+        builder: (context) {
+          return SafeArea(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                ListTile(
+                  leading: const Icon(Icons.edit_outlined),
+                  title: const Text('edit_name', style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+                  onTap: showEditNameDialog,
+                ),
+              ],
+            ),
+          );
+        },
+      );
+    }
+
+    buildTitleBlock() {
+      return GestureDetector(
+        onTap: showEditNameDialog,
+        child: name.value.isEmpty
+            ? Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text('add_a_name', style: context.textTheme.titleMedium?.copyWith(color: context.primaryColor)).tr(),
+                  Text('find_them_fast', style: context.textTheme.labelLarge).tr(),
+                ],
+              )
+            : Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [Text(name.value, style: context.textTheme.titleLarge, overflow: TextOverflow.ellipsis)],
+              ),
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(name.value),
+        leading: IconButton(onPressed: () => context.maybePop(), icon: const Icon(Icons.arrow_back_ios_rounded)),
+        actions: [IconButton(onPressed: buildBottomSheet, icon: const Icon(Icons.more_vert_rounded))],
+      ),
+      body: MultiselectGrid(
+        renderListProvider: personAssetsProvider(personId),
+        topWidget: Padding(
+          padding: const EdgeInsets.only(left: 8.0, top: 24),
+          child: Row(
+            children: [
+              CircleAvatar(
+                radius: 36,
+                backgroundImage: NetworkImage(getFaceThumbnailUrl(personId), headers: ApiService.getRequestHeaders()),
+              ),
+              Expanded(
+                child: Padding(padding: const EdgeInsets.only(left: 16.0, right: 16.0), child: buildTitleBlock()),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,25 @@
+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/asyncvalue_extensions.dart';
+import 'package:immich_mobile/widgets/asset_grid/immich_asset_grid.dart';
+import 'package:immich_mobile/providers/search/recently_taken_asset.provider.dart';
+
+@RoutePage()
+class RecentlyTakenPage extends HookConsumerWidget {
+  const RecentlyTakenPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final recents = ref.watch(recentlyTakenAssetProvider);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('recently_taken_page_title').tr(),
+        leading: IconButton(onPressed: () => context.maybePop(), icon: const Icon(Icons.arrow_back_ios_rounded)),
+      ),
+      body: recents.widgetWhen(onData: (searchResponse) => ImmichAssetGrid(assets: searchResponse)),
+    );
+  }
+}

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

@@ -0,0 +1,760 @@
+import 'dart:async';
+
+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/constants/enums.dart';
+import 'package:immich_mobile/domain/models/person.model.dart';
+import 'package:immich_mobile/entities/asset.entity.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/paginated_search.provider.dart';
+import 'package:immich_mobile/providers/search/search_input_focus.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/asset_grid/multiselect_grid.dart';
+import 'package:immich_mobile/widgets/common/search_field.dart';
+import 'package:immich_mobile/widgets/search/search_filter/camera_picker.dart';
+import 'package:immich_mobile/widgets/search/search_filter/display_option_picker.dart';
+import 'package:immich_mobile/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart';
+import 'package:immich_mobile/widgets/search/search_filter/location_picker.dart';
+import 'package:immich_mobile/widgets/search/search_filter/media_type_picker.dart';
+import 'package:immich_mobile/widgets/search/search_filter/people_picker.dart';
+import 'package:immich_mobile/widgets/search/search_filter/search_filter_chip.dart';
+import 'package:immich_mobile/widgets/search/search_filter/search_filter_utils.dart';
+
+@RoutePage()
+class SearchPage extends HookConsumerWidget {
+  const SearchPage({super.key, this.prefilter});
+
+  final SearchFilter? prefilter;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final textSearchType = useState<TextSearchType>(TextSearchType.context);
+    final searchHintText = useState<String>('sunrise_on_the_beach'.tr());
+    final textSearchController = useTextEditingController();
+    final filter = useState<SearchFilter>(
+      SearchFilter(
+        people: prefilter?.people ?? {},
+        location: prefilter?.location ?? SearchLocationFilter(),
+        camera: prefilter?.camera ?? SearchCameraFilter(),
+        date: prefilter?.date ?? SearchDateFilter(),
+        display: prefilter?.display ?? SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
+        mediaType: prefilter?.mediaType ?? AssetType.other,
+        rating: prefilter?.rating ?? SearchRatingFilter(),
+        language: "${context.locale.languageCode}-${context.locale.countryCode}",
+      ),
+    );
+
+    final previousFilter = useState<SearchFilter?>(null);
+
+    final peopleCurrentFilterWidget = useState<Widget?>(null);
+    final dateRangeCurrentFilterWidget = useState<Widget?>(null);
+    final cameraCurrentFilterWidget = useState<Widget?>(null);
+    final locationCurrentFilterWidget = useState<Widget?>(null);
+    final mediaTypeCurrentFilterWidget = useState<Widget?>(null);
+    final displayOptionCurrentFilterWidget = useState<Widget?>(null);
+
+    final isSearching = useState(false);
+
+    SnackBar searchInfoSnackBar(String message) {
+      return SnackBar(
+        content: Text(message, style: context.textTheme.labelLarge),
+        showCloseIcon: true,
+        behavior: SnackBarBehavior.fixed,
+        closeIconColor: context.colorScheme.onSurface,
+      );
+    }
+
+    search() async {
+      if (filter.value.isEmpty) {
+        return;
+      }
+
+      if (prefilter == null && filter.value == previousFilter.value) {
+        return;
+      }
+
+      isSearching.value = true;
+      ref.watch(paginatedSearchProvider.notifier).clear();
+      final hasResult = await ref.watch(paginatedSearchProvider.notifier).search(filter.value);
+
+      if (!hasResult) {
+        context.showSnackBar(searchInfoSnackBar('search_no_result'.tr()));
+      }
+
+      previousFilter.value = filter.value;
+      isSearching.value = false;
+    }
+
+    loadMoreSearchResult() async {
+      isSearching.value = true;
+      final hasResult = await ref.watch(paginatedSearchProvider.notifier).search(filter.value);
+
+      if (!hasResult) {
+        context.showSnackBar(searchInfoSnackBar('search_no_more_result'.tr()));
+      }
+
+      isSearching.value = false;
+    }
+
+    searchPrefilter() {
+      if (prefilter != null) {
+        Future.delayed(Duration.zero, () {
+          search();
+
+          if (prefilter!.location.city != null) {
+            locationCurrentFilterWidget.value = Text(prefilter!.location.city!, style: context.textTheme.labelLarge);
+          }
+        });
+      }
+    }
+
+    useEffect(() {
+      Future.microtask(() => ref.invalidate(paginatedSearchProvider));
+      searchPrefilter();
+
+      return null;
+    }, []);
+
+    showPeoplePicker() {
+      handleOnSelect(Set<PersonDto> value) {
+        filter.value = filter.value.copyWith(people: value);
+
+        peopleCurrentFilterWidget.value = Text(
+          value.map((e) => e.name != '' ? e.name : 'no_name'.tr()).join(', '),
+          style: context.textTheme.labelLarge,
+        );
+      }
+
+      handleClear() {
+        filter.value = filter.value.copyWith(people: {});
+
+        peopleCurrentFilterWidget.value = null;
+        search();
+      }
+
+      showFilterBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        child: FractionallySizedBox(
+          heightFactor: 0.8,
+          child: FilterBottomSheetScaffold(
+            title: 'search_filter_people_title'.tr(),
+            expanded: true,
+            onSearch: search,
+            onClear: handleClear,
+            child: PeoplePicker(onSelect: handleOnSelect, filter: filter.value.people),
+          ),
+        ),
+      );
+    }
+
+    showLocationPicker() {
+      handleOnSelect(Map<String, String?> value) {
+        filter.value = filter.value.copyWith(
+          location: SearchLocationFilter(country: value['country'], city: value['city'], state: value['state']),
+        );
+
+        final locationText = <String>[];
+        if (value['country'] != null) {
+          locationText.add(value['country']!);
+        }
+
+        if (value['state'] != null) {
+          locationText.add(value['state']!);
+        }
+
+        if (value['city'] != null) {
+          locationText.add(value['city']!);
+        }
+
+        locationCurrentFilterWidget.value = Text(locationText.join(', '), style: context.textTheme.labelLarge);
+      }
+
+      handleClear() {
+        filter.value = filter.value.copyWith(location: SearchLocationFilter());
+
+        locationCurrentFilterWidget.value = null;
+        search();
+      }
+
+      showFilterBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        isDismissible: true,
+        child: FilterBottomSheetScaffold(
+          title: 'search_filter_location_title'.tr(),
+          onSearch: search,
+          onClear: handleClear,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 16.0),
+            child: Container(
+              padding: EdgeInsets.only(bottom: context.viewInsets.bottom),
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                child: LocationPicker(onSelected: handleOnSelect, filter: filter.value.location),
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    showCameraPicker() {
+      handleOnSelect(Map<String, String?> value) {
+        filter.value = filter.value.copyWith(
+          camera: SearchCameraFilter(make: value['make'], model: value['model']),
+        );
+
+        cameraCurrentFilterWidget.value = Text(
+          '${value['make'] ?? ''} ${value['model'] ?? ''}',
+          style: context.textTheme.labelLarge,
+        );
+      }
+
+      handleClear() {
+        filter.value = filter.value.copyWith(camera: SearchCameraFilter());
+
+        cameraCurrentFilterWidget.value = null;
+        search();
+      }
+
+      showFilterBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        isDismissible: true,
+        child: FilterBottomSheetScaffold(
+          title: 'search_filter_camera_title'.tr(),
+          onSearch: search,
+          onClear: handleClear,
+          child: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: CameraPicker(onSelect: handleOnSelect, filter: filter.value.camera),
+          ),
+        ),
+      );
+    }
+
+    showDatePicker() async {
+      final firstDate = DateTime(1900);
+      final lastDate = DateTime.now();
+
+      final date = await showDateRangePicker(
+        context: context,
+        firstDate: firstDate,
+        lastDate: lastDate,
+        currentDate: DateTime.now(),
+        initialDateRange: DateTimeRange(
+          start: filter.value.date.takenAfter ?? lastDate,
+          end: filter.value.date.takenBefore ?? lastDate,
+        ),
+        helpText: 'search_filter_date_title'.tr(),
+        cancelText: 'cancel'.tr(),
+        confirmText: 'select'.tr(),
+        saveText: 'save'.tr(),
+        errorFormatText: 'invalid_date_format'.tr(),
+        errorInvalidText: 'invalid_date'.tr(),
+        fieldStartHintText: 'start_date'.tr(),
+        fieldEndHintText: 'end_date'.tr(),
+        initialEntryMode: DatePickerEntryMode.calendar,
+        keyboardType: TextInputType.text,
+      );
+
+      if (date == null) {
+        filter.value = filter.value.copyWith(date: SearchDateFilter());
+
+        dateRangeCurrentFilterWidget.value = null;
+        unawaited(search());
+        return;
+      }
+
+      filter.value = filter.value.copyWith(
+        date: SearchDateFilter(
+          takenAfter: date.start,
+          takenBefore: date.end.add(const Duration(hours: 23, minutes: 59, seconds: 59)),
+        ),
+      );
+
+      // If date range is less than 24 hours, set the end date to the end of the day
+      if (date.end.difference(date.start).inHours < 24) {
+        dateRangeCurrentFilterWidget.value = Text(
+          DateFormat.yMMMd().format(date.start.toLocal()),
+          style: context.textTheme.labelLarge,
+        );
+      } else {
+        dateRangeCurrentFilterWidget.value = Text(
+          'search_filter_date_interval'.tr(
+            namedArgs: {
+              "start": DateFormat.yMMMd().format(date.start.toLocal()),
+              "end": DateFormat.yMMMd().format(date.end.toLocal()),
+            },
+          ),
+          style: context.textTheme.labelLarge,
+        );
+      }
+
+      unawaited(search());
+    }
+
+    // MEDIA PICKER
+    showMediaTypePicker() {
+      handleOnSelected(AssetType assetType) {
+        filter.value = filter.value.copyWith(mediaType: assetType);
+
+        mediaTypeCurrentFilterWidget.value = Text(
+          assetType == AssetType.image
+              ? 'image'.tr()
+              : assetType == AssetType.video
+              ? 'video'.tr()
+              : 'all'.tr(),
+          style: context.textTheme.labelLarge,
+        );
+      }
+
+      handleClear() {
+        filter.value = filter.value.copyWith(mediaType: AssetType.other);
+
+        mediaTypeCurrentFilterWidget.value = null;
+        search();
+      }
+
+      showFilterBottomSheet(
+        context: context,
+        child: FilterBottomSheetScaffold(
+          title: 'search_filter_media_type_title'.tr(),
+          onSearch: search,
+          onClear: handleClear,
+          child: MediaTypePicker(onSelect: handleOnSelected, filter: filter.value.mediaType),
+        ),
+      );
+    }
+
+    // DISPLAY OPTION
+    showDisplayOptionPicker() {
+      handleOnSelect(Map<DisplayOption, bool> value) {
+        final filterText = <String>[];
+        value.forEach((key, value) {
+          switch (key) {
+            case DisplayOption.notInAlbum:
+              filter.value = filter.value.copyWith(display: filter.value.display.copyWith(isNotInAlbum: value));
+              if (value) {
+                filterText.add('search_filter_display_option_not_in_album'.tr());
+              }
+              break;
+            case DisplayOption.archive:
+              filter.value = filter.value.copyWith(display: filter.value.display.copyWith(isArchive: value));
+              if (value) {
+                filterText.add('archive'.tr());
+              }
+              break;
+            case DisplayOption.favorite:
+              filter.value = filter.value.copyWith(display: filter.value.display.copyWith(isFavorite: value));
+              if (value) {
+                filterText.add('favorite'.tr());
+              }
+              break;
+          }
+        });
+
+        if (filterText.isEmpty) {
+          displayOptionCurrentFilterWidget.value = null;
+          return;
+        }
+
+        displayOptionCurrentFilterWidget.value = Text(filterText.join(', '), style: context.textTheme.labelLarge);
+      }
+
+      handleClear() {
+        filter.value = filter.value.copyWith(
+          display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
+        );
+
+        displayOptionCurrentFilterWidget.value = null;
+        search();
+      }
+
+      showFilterBottomSheet(
+        context: context,
+        child: FilterBottomSheetScaffold(
+          title: 'display_options'.tr(),
+          onSearch: search,
+          onClear: handleClear,
+          child: DisplayOptionPicker(onSelect: handleOnSelect, filter: filter.value.display),
+        ),
+      );
+    }
+
+    handleTextSubmitted(String value) {
+      switch (textSearchType.value) {
+        case TextSearchType.context:
+          filter.value = filter.value.copyWith(filename: '', context: value, description: '', ocr: '');
+
+          break;
+        case TextSearchType.filename:
+          filter.value = filter.value.copyWith(filename: value, context: '', description: '', ocr: '');
+
+          break;
+        case TextSearchType.description:
+          filter.value = filter.value.copyWith(filename: '', context: '', description: value, ocr: '');
+          break;
+        case TextSearchType.ocr:
+          filter.value = filter.value.copyWith(filename: '', context: '', description: '', ocr: value);
+          break;
+      }
+
+      search();
+    }
+
+    IconData getSearchPrefixIcon() => switch (textSearchType.value) {
+      TextSearchType.context => Icons.image_search_rounded,
+      TextSearchType.filename => Icons.abc_rounded,
+      TextSearchType.description => Icons.text_snippet_outlined,
+      TextSearchType.ocr => Icons.document_scanner_outlined,
+    };
+
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      appBar: AppBar(
+        automaticallyImplyLeading: true,
+        actions: [
+          Padding(
+            padding: const EdgeInsets.only(right: 16.0),
+            child: MenuAnchor(
+              style: MenuStyle(
+                elevation: const WidgetStatePropertyAll(1),
+                shape: WidgetStateProperty.all(
+                  const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(24))),
+                ),
+                padding: const WidgetStatePropertyAll(EdgeInsets.all(4)),
+              ),
+              builder: (BuildContext context, MenuController controller, Widget? child) {
+                return IconButton(
+                  onPressed: () {
+                    if (controller.isOpen) {
+                      controller.close();
+                    } else {
+                      controller.open();
+                    }
+                  },
+                  icon: const Icon(Icons.more_vert_rounded),
+                  tooltip: 'show_text_search_menu'.tr(),
+                );
+              },
+              menuChildren: [
+                MenuItemButton(
+                  child: ListTile(
+                    leading: const Icon(Icons.image_search_rounded),
+                    title: Text(
+                      'search_by_context'.tr(),
+                      style: context.textTheme.bodyLarge?.copyWith(
+                        fontWeight: FontWeight.w500,
+                        color: textSearchType.value == TextSearchType.context ? context.colorScheme.primary : null,
+                      ),
+                    ),
+                    selectedColor: context.colorScheme.primary,
+                    selected: textSearchType.value == TextSearchType.context,
+                  ),
+                  onPressed: () {
+                    textSearchType.value = TextSearchType.context;
+                    searchHintText.value = 'sunrise_on_the_beach'.tr();
+                  },
+                ),
+                MenuItemButton(
+                  child: ListTile(
+                    leading: const Icon(Icons.abc_rounded),
+                    title: Text(
+                      'search_filter_filename'.tr(),
+                      style: context.textTheme.bodyLarge?.copyWith(
+                        fontWeight: FontWeight.w500,
+                        color: textSearchType.value == TextSearchType.filename ? context.colorScheme.primary : null,
+                      ),
+                    ),
+                    selectedColor: context.colorScheme.primary,
+                    selected: textSearchType.value == TextSearchType.filename,
+                  ),
+                  onPressed: () {
+                    textSearchType.value = TextSearchType.filename;
+                    searchHintText.value = 'file_name_or_extension'.tr();
+                  },
+                ),
+                MenuItemButton(
+                  child: ListTile(
+                    leading: const Icon(Icons.text_snippet_outlined),
+                    title: Text(
+                      'search_by_description'.tr(),
+                      style: context.textTheme.bodyLarge?.copyWith(
+                        fontWeight: FontWeight.w500,
+                        color: textSearchType.value == TextSearchType.description ? context.colorScheme.primary : null,
+                      ),
+                    ),
+                    selectedColor: context.colorScheme.primary,
+                    selected: textSearchType.value == TextSearchType.description,
+                  ),
+                  onPressed: () {
+                    textSearchType.value = TextSearchType.description;
+                    searchHintText.value = 'search_by_description_example'.tr();
+                  },
+                ),
+                MenuItemButton(
+                  child: ListTile(
+                    leading: const Icon(Icons.document_scanner_outlined),
+                    title: Text(
+                      'search_filter_ocr'.tr(),
+                      style: context.textTheme.bodyLarge?.copyWith(
+                        fontWeight: FontWeight.w500,
+                        color: textSearchType.value == TextSearchType.ocr ? context.colorScheme.primary : null,
+                      ),
+                    ),
+                    selectedColor: context.colorScheme.primary,
+                    selected: textSearchType.value == TextSearchType.ocr,
+                  ),
+                  onPressed: () {
+                    textSearchType.value = TextSearchType.ocr;
+                    searchHintText.value = 'search_by_ocr_example'.tr();
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+        title: Container(
+          decoration: BoxDecoration(
+            border: Border.all(color: context.colorScheme.onSurface.withAlpha(0), width: 0),
+            borderRadius: const BorderRadius.all(Radius.circular(24)),
+            gradient: LinearGradient(
+              colors: [
+                context.colorScheme.primary.withValues(alpha: 0.075),
+                context.colorScheme.primary.withValues(alpha: 0.09),
+                context.colorScheme.primary.withValues(alpha: 0.075),
+              ],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+            ),
+          ),
+          child: SearchField(
+            hintText: searchHintText.value,
+            key: const Key('search_text_field'),
+            controller: textSearchController,
+            contentPadding: prefilter != null ? const EdgeInsets.only(left: 24) : const EdgeInsets.all(8),
+            prefixIcon: prefilter != null ? null : Icon(getSearchPrefixIcon(), color: context.colorScheme.primary),
+            onSubmitted: handleTextSubmitted,
+            focusNode: ref.watch(searchInputFocusProvider),
+          ),
+        ),
+      ),
+      body: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(top: 12.0),
+            child: SizedBox(
+              height: 50,
+              child: ListView(
+                key: const Key('search_filter_chip_list'),
+                shrinkWrap: true,
+                scrollDirection: Axis.horizontal,
+                padding: const EdgeInsets.symmetric(horizontal: 16),
+                children: [
+                  SearchFilterChip(
+                    icon: Icons.people_alt_outlined,
+                    onTap: showPeoplePicker,
+                    label: 'people'.tr(),
+                    currentFilter: peopleCurrentFilterWidget.value,
+                  ),
+                  SearchFilterChip(
+                    icon: Icons.location_on_outlined,
+                    onTap: showLocationPicker,
+                    label: 'search_filter_location'.tr(),
+                    currentFilter: locationCurrentFilterWidget.value,
+                  ),
+                  SearchFilterChip(
+                    icon: Icons.camera_alt_outlined,
+                    onTap: showCameraPicker,
+                    label: 'camera'.tr(),
+                    currentFilter: cameraCurrentFilterWidget.value,
+                  ),
+                  SearchFilterChip(
+                    icon: Icons.date_range_outlined,
+                    onTap: showDatePicker,
+                    label: 'search_filter_date'.tr(),
+                    currentFilter: dateRangeCurrentFilterWidget.value,
+                  ),
+                  SearchFilterChip(
+                    key: const Key('media_type_chip'),
+                    icon: Icons.video_collection_outlined,
+                    onTap: showMediaTypePicker,
+                    label: 'search_filter_media_type'.tr(),
+                    currentFilter: mediaTypeCurrentFilterWidget.value,
+                  ),
+                  SearchFilterChip(
+                    icon: Icons.display_settings_outlined,
+                    onTap: showDisplayOptionPicker,
+                    label: 'search_filter_display_options'.tr(),
+                    currentFilter: displayOptionCurrentFilterWidget.value,
+                  ),
+                ],
+              ),
+            ),
+          ),
+          if (isSearching.value)
+            const Expanded(child: Center(child: CircularProgressIndicator()))
+          else
+            SearchResultGrid(onScrollEnd: loadMoreSearchResult, isSearching: isSearching.value),
+        ],
+      ),
+    );
+  }
+}
+
+class SearchResultGrid extends StatelessWidget {
+  final VoidCallback onScrollEnd;
+  final bool isSearching;
+
+  const SearchResultGrid({super.key, required this.onScrollEnd, this.isSearching = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Padding(
+        padding: const EdgeInsets.only(top: 8.0),
+        child: NotificationListener<ScrollEndNotification>(
+          onNotification: (notification) {
+            final isBottomSheetNotification =
+                notification.context?.findAncestorWidgetOfExactType<DraggableScrollableSheet>() != null;
+
+            final metrics = notification.metrics;
+            final isVerticalScroll = metrics.axis == Axis.vertical;
+
+            if (metrics.pixels >= metrics.maxScrollExtent && isVerticalScroll && !isBottomSheetNotification) {
+              onScrollEnd();
+            }
+
+            return true;
+          },
+          child: MultiselectGrid(
+            renderListProvider: paginatedSearchRenderListProvider,
+            archiveEnabled: true,
+            deleteEnabled: true,
+            editEnabled: true,
+            favoriteEnabled: true,
+            stackEnabled: false,
+            dragScrollLabelEnabled: false,
+            emptyIndicator: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              child: !isSearching ? const SearchEmptyContent() : const SizedBox.shrink(),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class SearchEmptyContent extends StatelessWidget {
+  const SearchEmptyContent({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return NotificationListener<ScrollNotification>(
+      onNotification: (_) => true,
+      child: ListView(
+        shrinkWrap: false,
+        children: [
+          const SizedBox(height: 40),
+          Center(
+            child: Image.asset(
+              context.isDarkTheme ? 'assets/polaroid-dark.png' : 'assets/polaroid-light.png',
+              height: 125,
+            ),
+          ),
+          const SizedBox(height: 16),
+          Center(child: Text('search_page_search_photos_videos'.tr(), style: context.textTheme.labelLarge)),
+          const SizedBox(height: 32),
+          const QuickLinkList(),
+        ],
+      ),
+    );
+  }
+}
+
+class QuickLinkList extends StatelessWidget {
+  const QuickLinkList({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: const BorderRadius.all(Radius.circular(20)),
+        border: Border.all(color: context.colorScheme.outline.withAlpha(10), width: 1),
+        gradient: LinearGradient(
+          colors: [
+            context.colorScheme.primary.withAlpha(10),
+            context.colorScheme.primary.withAlpha(15),
+            context.colorScheme.primary.withAlpha(20),
+          ],
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+        ),
+      ),
+      child: ListView(
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        children: [
+          QuickLink(
+            title: 'recently_taken'.tr(),
+            icon: Icons.schedule_outlined,
+            isTop: true,
+            onTap: () => context.pushRoute(const RecentlyTakenRoute()),
+          ),
+          QuickLink(
+            title: 'videos'.tr(),
+            icon: Icons.play_circle_outline_rounded,
+            onTap: () => context.pushRoute(const AllVideosRoute()),
+          ),
+          QuickLink(
+            title: 'favorites'.tr(),
+            icon: Icons.favorite_border_rounded,
+            isBottom: true,
+            onTap: () => context.pushRoute(const FavoritesRoute()),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class QuickLink extends StatelessWidget {
+  final String title;
+  final IconData icon;
+  final VoidCallback onTap;
+  final bool isTop;
+  final bool isBottom;
+
+  const QuickLink({
+    super.key,
+    required this.title,
+    required this.icon,
+    required this.onTap,
+    this.isTop = false,
+    this.isBottom = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final borderRadius = BorderRadius.only(
+      topLeft: Radius.circular(isTop ? 20 : 0),
+      topRight: Radius.circular(isTop ? 20 : 0),
+      bottomLeft: Radius.circular(isBottom ? 20 : 0),
+      bottomRight: Radius.circular(isBottom ? 20 : 0),
+    );
+
+    return ListTile(
+      shape: RoundedRectangleBorder(borderRadius: borderRadius),
+      leading: Icon(icon, size: 26),
+      title: Text(title, style: context.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w500)),
+      onTap: onTap,
+    );
+  }
+}