feat: sort smart search

Smart search currently returns a list of assets by their score. It would
be nice if we could instead filter assets, and then list them by date.
This is the default behaviour of other platforms.

.github/workflows/test.yml

@@ -511,7 +511,7 @@ jobs:
         run: pnpm install --frozen-lockfile
         if: ${{ !cancelled() }}
       - name: Install Playwright Browsers
-        run: npx playwright install chromium --only-shell
+        run: pnpm exec playwright install chromium --only-shell
         if: ${{ !cancelled() }}
       - name: Docker build
         run: docker compose up -d --build --renew-anon-volumes --force-recreate --remove-orphans --wait --wait-timeout 300

Makefile

@@ -52,7 +52,7 @@ attach-server:
 	docker exec -it docker_immich-server_1 sh
 
 renovate:
-  LOG_LEVEL=debug npx renovate --platform=local --repository-cache=reset
+  LOG_LEVEL=debug pnpm exec renovate --platform=local --repository-cache=reset
 
 # Directories that need to be created for volumes or build output
 VOLUME_DIRS = \

cli/package.json

@@ -45,8 +45,8 @@
     "build": "vite build",
     "build:dev": "vite build --sourcemap true",
     "lint": "eslint \"src/**/*.ts\" --max-warnings 0",
-    "lint:fix": "npm run lint -- --fix",
-    "prepack": "npm run build",
+    "lint:fix": "pnpm run lint --fix",
+    "prepack": "pnpm run build",
     "test": "vitest",
     "test:cov": "vitest --coverage",
     "format": "prettier --check .",

docs/package.json

@@ -8,7 +8,7 @@
     "format:fix": "prettier --write .",
     "start": "docusaurus start --port 3005",
     "copy:openapi": "jq -c < ../open-api/immich-openapi-specs.json > ./static/openapi.json || exit 0",
-    "build": "npm run copy:openapi && docusaurus build",
+    "build": "pnpm run copy:openapi && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

e2e/package.json

@@ -8,16 +8,16 @@
     "test": "vitest --run",
     "test:watch": "vitest",
     "test:maintenance": "vitest --run --config vitest.maintenance.config.ts",
-    "test:web": "npx playwright test --project=web",
-    "test:web:maintenance": "npx playwright test --project=maintenance",
-    "test:web:ui": "npx playwright test --project=ui",
-    "start:web": "npx playwright test --ui --project=web",
-    "start:web:maintenance": "npx playwright test --ui --project=maintenance",
-    "start:web:ui": "npx playwright test --ui --project=ui",
+    "test:web": "pnpm exec playwright test --project=web",
+    "test:web:maintenance": "pnpm exec playwright test --project=maintenance",
+    "test:web:ui": "pnpm exec playwright test --project=ui",
+    "start:web": "pnpm exec playwright test --ui --project=web",
+    "start:web:maintenance": "pnpm exec playwright test --ui --project=maintenance",
+    "start:web:ui": "pnpm exec playwright test --ui --project=ui",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "lint": "eslint \"src/**/*.ts\" --max-warnings 0",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "pnpm run lint --fix",
     "check": "tsc --noEmit"
   },
   "keywords": [],

i18n/en.json

@@ -689,6 +689,7 @@
   "backup_settings_subtitle": "Manage upload settings",
   "backup_upload_details_page_more_details": "Tap for more details",
   "backward": "Backward",
+  "best_match": "Best match",
   "biometric_auth_enabled": "Biometric authentication enabled",
   "biometric_locked_out": "You are locked out of biometric authentication",
   "biometric_no_options": "No biometric options available",
@@ -1945,6 +1946,8 @@
   "search_filter_media_type_title": "Select media type",
   "search_filter_ocr": "Search by OCR",
   "search_filter_people_title": "Select people",
+  "search_filter_sort_order": "Sort Order",
+  "search_filter_sort_order_title": "Select sort order",
   "search_filter_star_rating": "Star Rating",
   "search_filter_tags_title": "Select tags",
   "search_for": "Search for",
@@ -2160,6 +2163,7 @@
   "sort_modified": "Date modified",
   "sort_newest": "Newest photo",
   "sort_oldest": "Oldest photo",
+  "sort_order": "Sort order",
   "sort_people_by_similarity": "Sort people by similarity",
   "sort_recent": "Most recent photo",
   "sort_title": "Title",

mobile/android/app/src/main/kotlin/app/alextran/immich/images/LocalImagesImpl.kt

@@ -48,7 +48,6 @@ fun Bitmap.toNativeBuffer(): Map<String, Long>  {
   try {
     val buffer = NativeBuffer.wrap(pointer, size)
     copyPixelsToBuffer(buffer)
-    recycle()
     return mapOf(
       "pointer" to pointer,
       "width" to width.toLong(),
@@ -57,8 +56,9 @@ fun Bitmap.toNativeBuffer(): Map<String, Long>  {
     )
   } catch (e: Exception) {
     NativeBuffer.free(pointer)
-    recycle()
     throw e
+  } finally {
+    recycle()
   }
 }
 

mobile/lib/infrastructure/repositories/search_api.repository.dart

@@ -37,6 +37,7 @@ class SearchApiRepository extends ApiRepository {
           personIds: filter.people.map((e) => e.id).toList(),
           tagIds: filter.tagIds,
           type: type,
+          order: filter.order,
           page: page,
           size: 100,
         ),
@@ -62,6 +63,7 @@ class SearchApiRepository extends ApiRepository {
         personIds: filter.people.map((e) => e.id).toList(),
         tagIds: filter.tagIds,
         type: type,
+        order: filter.order ?? AssetOrder.desc,
         page: page,
         size: 1000,
       ),

mobile/lib/models/search/search_filter.model.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 
 import 'package:immich_mobile/domain/models/person.model.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:openapi/api.dart' show AssetOrder;
 
 class SearchLocationFilter {
   String? country;
@@ -221,6 +222,7 @@ class SearchFilter {
   SearchDateFilter date;
   SearchRatingFilter rating;
   SearchDisplayFilters display;
+  AssetOrder? order;
 
   // Enum
   AssetType mediaType;
@@ -233,6 +235,7 @@ class SearchFilter {
     this.language,
     this.assetId,
     this.tagIds,
+    this.order,
     required this.people,
     required this.location,
     required this.camera,
@@ -279,6 +282,7 @@ class SearchFilter {
     SearchDisplayFilters? display,
     SearchRatingFilter? rating,
     AssetType? mediaType,
+    AssetOrder? Function()? order,
   }) {
     return SearchFilter(
       context: context ?? this.context,
@@ -295,12 +299,13 @@ class SearchFilter {
       rating: rating ?? this.rating,
       mediaType: mediaType ?? this.mediaType,
       tagIds: tagIds ?? this.tagIds,
+      order: order != null ? order() : this.order,
     );
   }
 
   @override
   String toString() {
-    return 'SearchFilter(context: $context, filename: $filename, description: $description, language: $language, ocr: $ocr, people: $people, location: $location, tagIds: $tagIds, camera: $camera, date: $date, display: $display, rating: $rating, mediaType: $mediaType, assetId: $assetId)';
+    return 'SearchFilter(context: $context, filename: $filename, description: $description, language: $language, ocr: $ocr, people: $people, location: $location, tagIds: $tagIds, camera: $camera, date: $date, display: $display, rating: $rating, mediaType: $mediaType, assetId: $assetId, order: $order)';
   }
 
   @override
@@ -320,7 +325,8 @@ class SearchFilter {
         other.date == date &&
         other.display == display &&
         other.rating == rating &&
-        other.mediaType == mediaType;
+        other.mediaType == mediaType &&
+        other.order == order;
   }
 
   @override
@@ -338,6 +344,7 @@ class SearchFilter {
         date.hashCode ^
         display.hashCode ^
         rating.hashCode ^
-        mediaType.hashCode;
+        mediaType.hashCode ^
+        order.hashCode;
   }
 }

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

@@ -11,6 +11,7 @@ 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/widgets/asset_grid/asset_grid_data_structure.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';
@@ -23,6 +24,8 @@ import 'package:immich_mobile/widgets/search/search_filter/media_type_picker.dar
 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';
+import 'package:immich_mobile/widgets/search/search_filter/sort_order_picker.dart';
+import 'package:openapi/api.dart' show AssetOrder;
 
 @RoutePage()
 class SearchPage extends HookConsumerWidget {
@@ -56,6 +59,7 @@ class SearchPage extends HookConsumerWidget {
     final locationCurrentFilterWidget = useState<Widget?>(null);
     final mediaTypeCurrentFilterWidget = useState<Widget?>(null);
     final displayOptionCurrentFilterWidget = useState<Widget?>(null);
+    final sortOrderCurrentFilterWidget = useState<Widget?>(null);
 
     final isSearching = useState(false);
 
@@ -78,6 +82,8 @@ class SearchPage extends HookConsumerWidget {
       }
 
       isSearching.value = true;
+      ref.read(searchGroupByProvider.notifier).state =
+          filter.value.order != null ? GroupAssetsBy.day : GroupAssetsBy.none;
       ref.watch(paginatedSearchProvider.notifier).clear();
       final hasResult = await ref.watch(paginatedSearchProvider.notifier).search(filter.value);
 
@@ -387,6 +393,37 @@ class SearchPage extends HookConsumerWidget {
       );
     }
 
+    // SORT ORDER
+    showSortOrderPicker() {
+      handleOnSelect(AssetOrder? value) {
+        filter.value = filter.value.copyWith(order: () => value);
+
+        if (value == null) {
+          sortOrderCurrentFilterWidget.value = null;
+        } else if (value == AssetOrder.desc) {
+          sortOrderCurrentFilterWidget.value = Text('newest_first'.tr(), style: context.textTheme.labelLarge);
+        } else {
+          sortOrderCurrentFilterWidget.value = Text('oldest_first'.tr(), style: context.textTheme.labelLarge);
+        }
+      }
+
+      handleClear() {
+        filter.value = filter.value.copyWith(order: () => null);
+        sortOrderCurrentFilterWidget.value = null;
+        search();
+      }
+
+      showFilterBottomSheet(
+        context: context,
+        child: FilterBottomSheetScaffold(
+          title: 'search_filter_sort_order_title'.tr(),
+          onSearch: search,
+          onClear: handleClear,
+          child: SortOrderPicker(onSelect: handleOnSelect, order: filter.value.order),
+        ),
+      );
+    }
+
     handleTextSubmitted(String value) {
       switch (textSearchType.value) {
         case TextSearchType.context:
@@ -594,6 +631,12 @@ class SearchPage extends HookConsumerWidget {
                     label: 'search_filter_display_options'.tr(),
                     currentFilter: displayOptionCurrentFilterWidget.value,
                   ),
+                  SearchFilterChip(
+                    icon: Icons.sort_outlined,
+                    onTap: showSortOrderPicker,
+                    label: 'search_filter_sort_order'.tr(),
+                    currentFilter: sortOrderCurrentFilterWidget.value,
+                  ),
                 ],
               ),
             ),
@@ -601,7 +644,11 @@ class SearchPage extends HookConsumerWidget {
           if (isSearching.value)
             const Expanded(child: Center(child: CircularProgressIndicator()))
           else
-            SearchResultGrid(onScrollEnd: loadMoreSearchResult, isSearching: isSearching.value),
+            SearchResultGrid(
+              onScrollEnd: loadMoreSearchResult,
+              isSearching: isSearching.value,
+              dragScrollLabelEnabled: filter.value.order != null,
+            ),
         ],
       ),
     );
@@ -611,8 +658,14 @@ class SearchPage extends HookConsumerWidget {
 class SearchResultGrid extends StatelessWidget {
   final VoidCallback onScrollEnd;
   final bool isSearching;
+  final bool dragScrollLabelEnabled;
 
-  const SearchResultGrid({super.key, required this.onScrollEnd, this.isSearching = false});
+  const SearchResultGrid({
+    super.key,
+    required this.onScrollEnd,
+    this.isSearching = false,
+    this.dragScrollLabelEnabled = false,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -640,7 +693,7 @@ class SearchResultGrid extends StatelessWidget {
             editEnabled: true,
             favoriteEnabled: true,
             stackEnabled: false,
-            dragScrollLabelEnabled: false,
+            dragScrollLabelEnabled: dragScrollLabelEnabled,
             emptyIndicator: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 16.0),
               child: !isSearching ? const SearchEmptyContent() : const SizedBox.shrink(),

mobile/lib/providers/search/paginated_search.provider.dart

@@ -8,6 +8,8 @@ import 'package:riverpod_annotation/riverpod_annotation.dart';
 
 part 'paginated_search.provider.g.dart';
 
+final searchGroupByProvider = StateProvider<GroupAssetsBy>((ref) => GroupAssetsBy.none);
+
 final paginatedSearchProvider = StateNotifierProvider<PaginatedSearchNotifier, SearchResult>(
   (ref) => PaginatedSearchNotifier(ref.watch(searchServiceProvider)),
 );
@@ -41,6 +43,7 @@ class PaginatedSearchNotifier extends StateNotifier<SearchResult> {
 @riverpod
 Future<RenderList> paginatedSearchRenderList(Ref ref) {
   final result = ref.watch(paginatedSearchProvider);
+  final groupBy = ref.watch(searchGroupByProvider);
   final timelineService = ref.watch(timelineServiceProvider);
-  return timelineService.getTimelineFromAssets(result.assets, GroupAssetsBy.none);
+  return timelineService.getTimelineFromAssets(result.assets, groupBy);
 }

mobile/lib/providers/search/paginated_search.provider.g.dart

@@ -7,7 +7,7 @@ part of 'paginated_search.provider.dart';
 // **************************************************************************
 
 String _$paginatedSearchRenderListHash() =>
-    r'22d715ff7864e5a946be38322ce7813616f899c2';
+    r'bb1ea9153b2a186778420426f1fb1add6d6a9140';
 
 /// See also [paginatedSearchRenderList].
 @ProviderFor(paginatedSearchRenderList)

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

@@ -0,0 +1,42 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:openapi/api.dart' show AssetOrder;
+
+enum _SortOption { bestMatch, newest, oldest }
+
+class SortOrderPicker extends HookWidget {
+  const SortOrderPicker({super.key, required this.onSelect, this.order});
+
+  final Function(AssetOrder?) onSelect;
+  final AssetOrder? order;
+
+  @override
+  Widget build(BuildContext context) {
+    final selected = useState<_SortOption>(switch (order) {
+      AssetOrder.desc => _SortOption.newest,
+      AssetOrder.asc => _SortOption.oldest,
+      _ => _SortOption.bestMatch,
+    });
+
+    return RadioGroup<_SortOption>(
+      onChanged: (value) {
+        if (value == null) return;
+        selected.value = value;
+        onSelect(switch (value) {
+          _SortOption.bestMatch => null,
+          _SortOption.newest => AssetOrder.desc,
+          _SortOption.oldest => AssetOrder.asc,
+        });
+      },
+      groupValue: selected.value,
+      child: Column(
+        children: [
+          RadioListTile(title: const Text('best_match').tr(), value: _SortOption.bestMatch),
+          RadioListTile(title: const Text('newest_first').tr(), value: _SortOption.newest),
+          RadioListTile(title: const Text('oldest_first').tr(), value: _SortOption.oldest),
+        ],
+      ),
+    );
+  }
+}

mobile/openapi/lib/model/smart_search_dto.dart

@@ -30,6 +30,7 @@ class SmartSearchDto {
     this.make,
     this.model,
     this.ocr,
+    this.order,
     this.page,
     this.personIds = const [],
     this.query,
@@ -167,6 +168,15 @@ class SmartSearchDto {
   ///
   String? ocr;
 
+  /// Sort order by date. If not provided, results are sorted by relevance.
+  ///
+  /// Please note: This property should have been non-nullable! Since the specification file
+  /// does not include a default value (using the "default:" property), however, the generated
+  /// source code must fall back to having a nullable type.
+  /// Consider adding a "default:" property in the specification file to hide this note.
+  ///
+  AssetOrder? order;
+
   /// Page number
   ///
   /// Minimum value: 1
@@ -338,6 +348,7 @@ class SmartSearchDto {
     other.make == make &&
     other.model == model &&
     other.ocr == ocr &&
+    other.order == order &&
     other.page == page &&
     _deepEquality.equals(other.personIds, personIds) &&
     other.query == query &&
@@ -377,6 +388,7 @@ class SmartSearchDto {
     (make == null ? 0 : make!.hashCode) +
     (model == null ? 0 : model!.hashCode) +
     (ocr == null ? 0 : ocr!.hashCode) +
+    (order == null ? 0 : order!.hashCode) +
     (page == null ? 0 : page!.hashCode) +
     (personIds.hashCode) +
     (query == null ? 0 : query!.hashCode) +
@@ -397,7 +409,7 @@ class SmartSearchDto {
     (withExif == null ? 0 : withExif!.hashCode);
 
   @override
-  String toString() => 'SmartSearchDto[albumIds=$albumIds, city=$city, country=$country, createdAfter=$createdAfter, createdBefore=$createdBefore, deviceId=$deviceId, isEncoded=$isEncoded, isFavorite=$isFavorite, isMotion=$isMotion, isNotInAlbum=$isNotInAlbum, isOffline=$isOffline, language=$language, lensModel=$lensModel, libraryId=$libraryId, make=$make, model=$model, ocr=$ocr, page=$page, personIds=$personIds, query=$query, queryAssetId=$queryAssetId, rating=$rating, size=$size, state=$state, tagIds=$tagIds, takenAfter=$takenAfter, takenBefore=$takenBefore, trashedAfter=$trashedAfter, trashedBefore=$trashedBefore, type=$type, updatedAfter=$updatedAfter, updatedBefore=$updatedBefore, visibility=$visibility, withDeleted=$withDeleted, withExif=$withExif]';
+  String toString() => 'SmartSearchDto[albumIds=$albumIds, city=$city, country=$country, createdAfter=$createdAfter, createdBefore=$createdBefore, deviceId=$deviceId, isEncoded=$isEncoded, isFavorite=$isFavorite, isMotion=$isMotion, isNotInAlbum=$isNotInAlbum, isOffline=$isOffline, language=$language, lensModel=$lensModel, libraryId=$libraryId, make=$make, model=$model, ocr=$ocr, order=$order, page=$page, personIds=$personIds, query=$query, queryAssetId=$queryAssetId, rating=$rating, size=$size, state=$state, tagIds=$tagIds, takenAfter=$takenAfter, takenBefore=$takenBefore, trashedAfter=$trashedAfter, trashedBefore=$trashedBefore, type=$type, updatedAfter=$updatedAfter, updatedBefore=$updatedBefore, visibility=$visibility, withDeleted=$withDeleted, withExif=$withExif]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
@@ -482,6 +494,11 @@ class SmartSearchDto {
     } else {
     //  json[r'ocr'] = null;
     }
+    if (this.order != null) {
+      json[r'order'] = this.order;
+    } else {
+    //  json[r'order'] = null;
+    }
     if (this.page != null) {
       json[r'page'] = this.page;
     } else {
@@ -599,6 +616,7 @@ class SmartSearchDto {
         make: mapValueOfType<String>(json, r'make'),
         model: mapValueOfType<String>(json, r'model'),
         ocr: mapValueOfType<String>(json, r'ocr'),
+        order: AssetOrder.fromJson(json[r'order']),
         page: num.parse('${json[r'page']}'),
         personIds: json[r'personIds'] is Iterable
             ? (json[r'personIds'] as Iterable).cast<String>().toList(growable: false)

open-api/immich-openapi-specs.json

@@ -22063,6 +22063,14 @@
             "description": "Filter by OCR text content",
             "type": "string"
           },
+          "order": {
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/AssetOrder"
+              }
+            ],
+            "description": "Sort order by date. If not provided, results are sorted by relevance."
+          },
           "page": {
             "description": "Page number",
             "minimum": 1,

open-api/typescript-sdk/src/fetch-client.ts

@@ -1893,6 +1893,8 @@ export type SmartSearchDto = {
     model?: string | null;
     /** Filter by OCR text content */
     ocr?: string;
+    /** Sort order by date. If not provided, results are sorted by relevance. */
+    order?: AssetOrder;
     /** Page number */
     page?: number;
     /** Filter by person IDs */

server/package.json

@@ -9,15 +9,15 @@
     "build": "nest build",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
-    "start": "npm run start:dev",
+    "start": "pnpm run start:dev",
     "nest": "nest",
     "start:dev": "nest start --watch --",
     "start:debug": "nest start --debug 0.0.0.0:9230 --watch --",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\" --max-warnings 0",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "pnpm run lint --fix",
     "check": "tsc --noEmit",
-    "check:code": "npm run format && npm run lint && npm run check",
-    "check:all": "npm run check:code && npm run test:cov",
+    "check:code": "pnpm run format && pnpm run lint && pnpm run check",
+    "check:all": "pnpm run check:code && pnpm run test:cov",
     "test": "vitest --config test/vitest.config.mjs",
     "test:cov": "vitest --config test/vitest.config.mjs --coverage",
     "test:medium": "vitest --config test/vitest.config.medium.mjs",
@@ -28,7 +28,7 @@
     "migrations:run": "node ./dist/bin/migrations.js run",
     "migrations:revert": "node ./dist/bin/migrations.js revert",
     "schema:drop": "node ./dist/bin/migrations.js query 'DROP schema public cascade; CREATE schema public;'",
-    "schema:reset": "npm run schema:drop && npm run migrations:run",
+    "schema:reset": "pnpm run schema:drop && pnpm run migrations:run",
     "sync:open-api": "node ./dist/bin/sync-open-api.js",
     "sync:sql": "node ./dist/bin/sync-sql.js",
     "email:dev": "email dev -p 3050 --dir src/emails"

server/src/dtos/search.dto.ts

@@ -237,6 +237,14 @@ export class SmartSearchDto extends BaseSearchWithResultsDto {
   @Type(() => Number)
   @Optional()
   page?: number;
+
+  @ValidateEnum({
+    enum: AssetOrder,
+    name: 'AssetOrder',
+    optional: true,
+    description: 'Sort order by date. If not provided, results are sorted by relevance.',
+  })
+  order?: AssetOrder;
 }
 
 export class SearchPlacesDto {

server/src/repositories/search.repository.ts

@@ -129,6 +129,7 @@ export type SmartSearchOptions = SearchDateOptions &
   SearchEmbeddingOptions &
   SearchExifOptions &
   SearchOneToOneRelationOptions &
+  SearchOrderOptions &
   SearchStatusOptions &
   SearchUserIdOptions &
   SearchPeopleOptions &
@@ -300,7 +301,12 @@ export class SearchRepository {
       const items = await searchAssetBuilder(trx, options)
         .selectAll('asset')
         .innerJoin('smart_search', 'asset.id', 'smart_search.assetId')
-        .orderBy(sql`smart_search.embedding <=> ${options.embedding}`)
+        .$if(!options.orderDirection, (qb) => qb.orderBy(sql`smart_search.embedding <=> ${options.embedding}`))
+        .$if(!!options.orderDirection, (qb) =>
+          qb
+            .where(sql`(smart_search.embedding <=> ${options.embedding}) <= 0.9`)
+            .orderBy('asset.fileCreatedAt', options.orderDirection as OrderByDirection),
+        )
         .limit(pagination.size + 1)
         .offset((pagination.page - 1) * pagination.size)
         .execute();

server/src/services/search.service.ts

@@ -139,7 +139,7 @@ export class SearchService extends BaseService {
     const size = dto.size || 100;
     const { hasNextPage, items } = await this.searchRepository.searchSmart(
       { page, size },
-      { ...dto, userIds: await userIds, embedding },
+      { ...dto, userIds: await userIds, embedding, orderDirection: dto.order },
     );
 
     return this.mapResponse(items, hasNextPage ? (page + 1).toString() : null, { auth });

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -94,7 +94,7 @@
   const sharedLink = getSharedLink();
 </script>
 
-<CommandPaletteDefaultProvider name={$t('assets')} actions={withoutIcons([Cast, ...Object.values(Actions)])} />
+<CommandPaletteDefaultProvider name={$t('assets')} actions={withoutIcons([Close, Cast, ...Object.values(Actions)])} />
 
 <div
   class="flex h-16 place-items-center justify-between bg-linear-to-b from-black/40 px-3 transition-transform duration-200"

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -432,6 +432,12 @@
   );
 
   const { Tag } = $derived(getAssetActions($t, asset));
+  const showDetailPanel = $derived(
+    asset.hasMetadata &&
+      $slideshowState === SlideshowState.None &&
+      assetViewerManager.isShowDetailPanel &&
+      !assetViewerManager.isShowEditor,
+  );
 </script>
 
 <CommandPaletteDefaultProvider name={$t('assets')} actions={[Tag]} />
@@ -571,25 +577,22 @@
     </div>
   {/if}
 
-  {#if asset.hasMetadata && $slideshowState === SlideshowState.None && assetViewerManager.isShowDetailPanel && !assetViewerManager.isShowEditor}
+  {#if showDetailPanel || assetViewerManager.isShowEditor}
     <div
       transition:fly={{ duration: 150 }}
       id="detail-panel"
-      class="row-start-1 row-span-4 w-90 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light"
+      class="row-start-1 row-span-4 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light"
       translate="yes"
     >
-      <DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} />
-    </div>
-  {/if}
-
-  {#if assetViewerManager.isShowEditor}
-    <div
-      transition:fly={{ duration: 150 }}
-      id="editor-panel"
-      class="row-start-1 row-span-4 w-100 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
-      translate="yes"
-    >
-      <EditorPanel {asset} onClose={closeEditor} />
+      {#if showDetailPanel}
+        <div class="w-90 h-full">
+          <DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} />
+        </div>
+      {:else if assetViewerManager.isShowEditor}
+        <div class="w-100 h-full">
+          <EditorPanel {asset} onClose={closeEditor} />
+        </div>
+      {/if}
     </div>
   {/if}
 

web/src/lib/components/shared-components/gallery-viewer/date-grouped-gallery-viewer.svelte

@@ -0,0 +1,459 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
+  import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import { AssetAction } from '$lib/constants';
+  import Portal from '$lib/elements/Portal.svelte';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
+  import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
+  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
+  import { Route } from '$lib/route';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { handlePromiseError } from '$lib/utils';
+  import { deleteAssets } from '$lib/utils/actions';
+  import { archiveAssets, cancelMultiselect, getNextAsset, getPreviousAsset, navigateToAsset } from '$lib/utils/asset-utils';
+  import { moveFocus } from '$lib/utils/focus-util';
+  import { handleError } from '$lib/utils/handle-error';
+  import type { CommonJustifiedLayout } from '$lib/utils/layout-utils';
+  import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
+  import { navigate } from '$lib/utils/navigation';
+  import { formatGroupTitle, toTimelineAsset } from '$lib/utils/timeline-util';
+  import { AssetVisibility, type AssetResponseDto } from '@immich/sdk';
+  import { modalManager, Text } from '@immich/ui';
+  import { DateTime } from 'luxon';
+  import { debounce } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+
+  type DateGroup = {
+    date: DateTime;
+    title: string;
+    assets: AssetResponseDto[];
+    geometry: CommonJustifiedLayout;
+    offsetTop: number;
+  };
+
+  type Props = {
+    assets: AssetResponseDto[];
+    assetInteraction: AssetInteraction;
+    disableAssetSelect?: boolean;
+    showArchiveIcon?: boolean;
+    viewport: Viewport;
+    onIntersected?: (() => void) | undefined;
+    onReload?: (() => void) | undefined;
+    slidingWindowOffset?: number;
+  };
+
+  let {
+    assets = $bindable(),
+    assetInteraction,
+    disableAssetSelect = false,
+    showArchiveIcon = false,
+    viewport,
+    onIntersected = undefined,
+    onReload = undefined,
+    slidingWindowOffset = 0,
+  }: Props = $props();
+
+  const HEADER_HEIGHT = 48;
+
+  let { isViewing: isViewerOpen, asset: viewingAsset } = assetViewingStore;
+
+  function groupAssetsByDate(items: AssetResponseDto[]): DateGroup[] {
+    const groupEntries: { key: string; assets: AssetResponseDto[] }[] = [];
+
+    for (const asset of items) {
+      const date = DateTime.fromISO(asset.localDateTime, { zone: 'UTC' });
+      const key = date.toISODate() ?? 'unknown';
+      const last = groupEntries.at(-1);
+      if (last && last.key === key) {
+        last.assets.push(asset);
+      } else {
+        groupEntries.push({ key, assets: [asset] });
+      }
+    }
+
+    const groups: DateGroup[] = [];
+    let offsetTop = 0;
+    const rowWidth = Math.floor(viewport.width);
+    const rowHeight = rowWidth < 850 ? 100 : 235;
+
+    for (const { key, assets: groupAssets } of groupEntries) {
+      const date = DateTime.fromISO(key, { zone: 'local' });
+      const geometry = getJustifiedLayoutFromAssets(groupAssets, {
+        spacing: 2,
+        heightTolerance: 0.5,
+        rowHeight,
+        rowWidth,
+      });
+
+      groups.push({
+        date: date as DateTime<true>,
+        title: formatGroupTitle(date),
+        assets: groupAssets,
+        geometry,
+        offsetTop,
+      });
+
+      offsetTop += HEADER_HEIGHT + geometry.containerHeight;
+    }
+
+    return groups;
+  }
+
+  const dateGroups = $derived(groupAssetsByDate(assets));
+  const totalHeight = $derived(
+    dateGroups.length > 0
+      ? dateGroups.at(-1)!.offsetTop + HEADER_HEIGHT + dateGroups.at(-1)!.geometry.containerHeight
+      : 0,
+  );
+
+  let shiftKeyIsDown = $state(false);
+  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
+  let scrollTop = $state(0);
+  let slidingWindow = $derived.by(() => {
+    const top = (scrollTop || 0) - slidingWindowOffset;
+    const bottom = top + viewport.height + slidingWindowOffset;
+    return { top, bottom };
+  });
+
+  const updateSlidingWindow = () => (scrollTop = document.scrollingElement?.scrollTop ?? 0);
+
+  const debouncedOnIntersected = debounce(() => onIntersected?.(), 750, { maxWait: 100, leading: true });
+
+  let lastIntersectedHeight = 0;
+  $effect(() => {
+    if (totalHeight - slidingWindow.bottom <= viewport.height && lastIntersectedHeight !== totalHeight) {
+      debouncedOnIntersected();
+      lastIntersectedHeight = totalHeight;
+    }
+  });
+
+  function isGroupVisible(group: DateGroup): boolean {
+    const groupTop = group.offsetTop;
+    const groupBottom = groupTop + HEADER_HEIGHT + group.geometry.containerHeight;
+    return groupTop < slidingWindow.bottom && groupBottom > slidingWindow.top;
+  }
+
+  function isAssetVisible(group: DateGroup, assetIndex: number): boolean {
+    const assetTop = group.offsetTop + HEADER_HEIGHT + group.geometry.getTop(assetIndex);
+    const assetBottom = assetTop + group.geometry.getHeight(assetIndex);
+    return assetTop < slidingWindow.bottom && assetBottom > slidingWindow.top;
+  }
+
+  const selectAllAssets = () => {
+    assetInteraction.selectAssets(assets.map((a) => toTimelineAsset(a)));
+  };
+
+  const deselectAllAssets = () => {
+    cancelMultiselect(assetInteraction);
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = true;
+    }
+  };
+
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = false;
+    }
+  };
+
+  const handleSelectAssets = (asset: TimelineAsset) => {
+    if (!asset) {
+      return;
+    }
+    const deselect = assetInteraction.hasSelectedAsset(asset.id);
+
+    if (deselect) {
+      for (const candidate of assetInteraction.assetSelectionCandidates) {
+        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
+      }
+      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+    } else {
+      for (const candidate of assetInteraction.assetSelectionCandidates) {
+        assetInteraction.selectAsset(candidate);
+      }
+      assetInteraction.selectAsset(asset);
+    }
+
+    assetInteraction.clearAssetSelectionCandidates();
+    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
+  };
+
+  const handleSelectAssetCandidates = (asset: TimelineAsset | null) => {
+    if (asset) {
+      selectAssetCandidates(asset);
+    }
+    lastAssetMouseEvent = asset;
+  };
+
+  const selectAssetCandidates = (endAsset: TimelineAsset) => {
+    if (!shiftKeyIsDown) {
+      return;
+    }
+
+    const startAsset = assetInteraction.assetSelectionStart;
+    if (!startAsset) {
+      return;
+    }
+
+    let start = assets.findIndex((a) => a.id === startAsset.id);
+    let end = assets.findIndex((a) => a.id === endAsset.id);
+
+    if (start > end) {
+      [start, end] = [end, start];
+    }
+
+    assetInteraction.setAssetSelectionCandidates(assets.slice(start, end + 1).map((a) => toTimelineAsset(a)));
+  };
+
+  const onSelectStart = (event: Event) => {
+    if (assetInteraction.selectionActive && shiftKeyIsDown) {
+      event.preventDefault();
+    }
+  };
+
+  const onDelete = () => {
+    const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
+    handlePromiseError(trashOrDelete(hasTrashedAsset));
+  };
+
+  const trashOrDelete = async (force: boolean = false) => {
+    const forceOrNoTrash = force || !featureFlagsManager.value.trash;
+    const selectedAssets = assetInteraction.selectedAssets;
+
+    if ($showDeleteModal && forceOrNoTrash) {
+      const confirmed = await modalManager.show(AssetDeleteConfirmModal, { size: selectedAssets.length });
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    await deleteAssets(
+      forceOrNoTrash,
+      (assetIds) => (assets = assets.filter((asset) => !assetIds.includes(asset.id))),
+      selectedAssets,
+      onReload,
+    );
+
+    assetInteraction.clearMultiselect();
+  };
+
+  const toggleArchive = async () => {
+    const ids = await archiveAssets(
+      assetInteraction.selectedAssets,
+      assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive,
+    );
+    if (ids) {
+      assets = assets.filter((asset) => !ids.includes(asset.id));
+      deselectAllAssets();
+    }
+  };
+
+  const focusNextAsset = () => moveFocus((element) => element.dataset.thumbnailFocusContainer !== undefined, 'next');
+  const focusPreviousAsset = () =>
+    moveFocus((element) => element.dataset.thumbnailFocusContainer !== undefined, 'previous');
+
+  let isShortcutModalOpen = false;
+
+  const handleOpenShortcutModal = async () => {
+    if (isShortcutModalOpen) {
+      return;
+    }
+    isShortcutModalOpen = true;
+    await modalManager.show(ShortcutsModal, {});
+    isShortcutModalOpen = false;
+  };
+
+  const shortcutList = $derived(
+    (() => {
+      if ($isViewerOpen) {
+        return [];
+      }
+
+      const sc: ShortcutOptions[] = [
+        { shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal },
+        { shortcut: { key: '/' }, onShortcut: () => goto(Route.explore()) },
+        { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets() },
+        { shortcut: { key: 'ArrowRight' }, preventDefault: false, onShortcut: focusNextAsset },
+        { shortcut: { key: 'ArrowLeft' }, preventDefault: false, onShortcut: focusPreviousAsset },
+      ];
+
+      if (assetInteraction.selectionActive) {
+        sc.push(
+          { shortcut: { key: 'Escape' }, onShortcut: deselectAllAssets },
+          { shortcut: { key: 'Delete' }, onShortcut: onDelete },
+          { shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) },
+          { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
+          { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
+        );
+      }
+
+      return sc;
+    })(),
+  );
+
+  const handleRandom = async (): Promise<{ id: string } | undefined> => {
+    if (assets.length === 0) {
+      return;
+    }
+    try {
+      const randomIndex = Math.floor(Math.random() * assets.length);
+      const asset = assets[randomIndex];
+      await navigateToAsset(asset);
+      return asset;
+    } catch (error) {
+      handleError(error, $t('errors.cannot_navigate_next_asset'));
+      return;
+    }
+  };
+
+  const updateCurrentAsset = (asset: AssetResponseDto) => {
+    const index = assets.findIndex((oldAsset) => oldAsset.id === asset.id);
+    assets[index] = asset;
+  };
+
+  const handleAction = async (action: Action) => {
+    switch (action.type) {
+      case AssetAction.ARCHIVE:
+      case AssetAction.DELETE:
+      case AssetAction.TRASH: {
+        const nextAsset = assetCursor.nextAsset ?? assetCursor.previousAsset;
+        assets.splice(
+          assets.findIndex((currentAsset) => currentAsset.id === action.asset.id),
+          1,
+        );
+        if (assets.length === 0) {
+          return await goto(Route.photos());
+        }
+        if (nextAsset) {
+          await navigateToAsset(nextAsset);
+        }
+        break;
+      }
+    }
+  };
+
+  const assetMouseEventHandler = (asset: TimelineAsset | null) => {
+    if (assetInteraction.selectionActive) {
+      handleSelectAssetCandidates(asset);
+    }
+  };
+
+  $effect(() => {
+    if (!lastAssetMouseEvent) {
+      assetInteraction.clearAssetSelectionCandidates();
+    }
+  });
+
+  $effect(() => {
+    if (!shiftKeyIsDown) {
+      assetInteraction.clearAssetSelectionCandidates();
+    }
+  });
+
+  $effect(() => {
+    if (shiftKeyIsDown && lastAssetMouseEvent) {
+      selectAssetCandidates(lastAssetMouseEvent);
+    }
+  });
+
+  const assetCursor = $derived({
+    current: $viewingAsset,
+    nextAsset: getNextAsset(assets, $viewingAsset),
+    previousAsset: getPreviousAsset(assets, $viewingAsset),
+  });
+</script>
+
+<svelte:document
+  onkeydown={onKeyDown}
+  onkeyup={onKeyUp}
+  onselectstart={onSelectStart}
+  use:shortcuts={shortcutList}
+  onscroll={() => updateSlidingWindow()}
+/>
+
+{#if assets.length > 0}
+  <div style:position="relative" style:height={totalHeight + 'px'} style:width={viewport.width + 'px'}>
+    {#each dateGroups as group (group.date.toISODate())}
+      {#if isGroupVisible(group)}
+        <!-- Date header -->
+        <div
+          class="absolute flex items-center px-2"
+          style:top={group.offsetTop + 'px'}
+          style:height={HEADER_HEIGHT + 'px'}
+          style:width="100%"
+        >
+          <Text fontWeight="medium" class="text-sm md:text-base">{group.title}</Text>
+        </div>
+
+        <!-- Thumbnails -->
+        <div
+          class="absolute"
+          style:top={group.offsetTop + HEADER_HEIGHT + 'px'}
+          style:height={group.geometry.containerHeight + 'px'}
+          style:width={group.geometry.containerWidth + 'px'}
+        >
+          {#each group.assets as asset, i (asset.id)}
+            {#if isAssetVisible(group, i)}
+              {@const currentAsset = toTimelineAsset(asset)}
+              <div
+                class="absolute"
+                style:overflow="clip"
+                style:top={group.geometry.getTop(i) + 'px'}
+                style:left={group.geometry.getLeft(i) + 'px'}
+                style:width={group.geometry.getWidth(i) + 'px'}
+                style:height={group.geometry.getHeight(i) + 'px'}
+              >
+                <Thumbnail
+                  readonly={disableAssetSelect}
+                  onClick={() => {
+                    if (assetInteraction.selectionActive) {
+                      handleSelectAssets(currentAsset);
+                      return;
+                    }
+                    void navigateToAsset(asset);
+                  }}
+                  onSelect={() => handleSelectAssets(currentAsset)}
+                  onMouseEvent={() => assetMouseEventHandler(currentAsset)}
+                  {showArchiveIcon}
+                  asset={currentAsset}
+                  selected={assetInteraction.hasSelectedAsset(currentAsset.id)}
+                  selectionCandidate={assetInteraction.hasSelectionCandidate(currentAsset.id)}
+                  thumbnailWidth={group.geometry.getWidth(i)}
+                  thumbnailHeight={group.geometry.getHeight(i)}
+                />
+              </div>
+            {/if}
+          {/each}
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<!-- Overlay Asset Viewer -->
+{#if $isViewerOpen}
+  <Portal target="body">
+    {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+      <AssetViewer
+        cursor={assetCursor}
+        onAction={handleAction}
+        onRandom={handleRandom}
+        onAssetChange={updateCurrentAsset}
+        onClose={() => {
+          assetViewingStore.showAssetViewer(false);
+          handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
+        }}
+      />
+    {/await}
+  </Portal>
+{/if}

web/src/lib/components/shared-components/search-bar/search-sort-section.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import RadioButton from '$lib/elements/RadioButton.svelte';
+  import { Text } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    sortOrder: 'best-match' | 'newest' | 'oldest';
+  }
+
+  let { sortOrder = $bindable() }: Props = $props();
+</script>
+
+<div id="sort-order-selection">
+  <fieldset>
+    <Text class="mb-2" fontWeight="medium">{$t('sort_order')}</Text>
+
+    <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
+      <RadioButton
+        name="sort-order"
+        id="sort-best-match"
+        bind:group={sortOrder}
+        label={$t('best_match')}
+        value="best-match"
+      />
+      <RadioButton
+        name="sort-order"
+        id="sort-newest"
+        bind:group={sortOrder}
+        label={$t('newest_first')}
+        value="newest"
+      />
+      <RadioButton
+        name="sort-order"
+        id="sort-oldest"
+        bind:group={sortOrder}
+        label={$t('oldest_first')}
+        value="oldest"
+      />
+    </div>
+  </fieldset>
+</div>

web/src/lib/modals/AlbumOptionsModal.svelte

@@ -3,7 +3,6 @@
   import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import { AlbumPageViewMode } from '$lib/constants';
   import {
     getAlbumActions,
     handleRemoveUserFromAlbum,
@@ -56,7 +55,7 @@
     sharedLinks = sharedLinks.filter(({ id }) => sharedLink.id !== id);
   };
 
-  const { AddUsers, CreateSharedLink } = $derived(getAlbumActions($t, album, AlbumPageViewMode.OPTIONS));
+  const { AddUsers, CreateSharedLink } = $derived(getAlbumActions($t, album));
 
   let sharedLinks: SharedLinkResponseDto[] = $state([]);
 

web/src/lib/modals/SearchFilterModal.svelte

@@ -16,6 +16,7 @@
     display: SearchDisplayFilters;
     mediaType: MediaType;
     rating?: number;
+    sortOrder: 'best-match' | 'newest' | 'oldest';
   };
 </script>
 
@@ -28,13 +29,14 @@
   import SearchLocationSection from '$lib/components/shared-components/search-bar/search-location-section.svelte';
   import SearchMediaSection from '$lib/components/shared-components/search-bar/search-media-section.svelte';
   import SearchPeopleSection from '$lib/components/shared-components/search-bar/search-people-section.svelte';
+  import SearchSortSection from '$lib/components/shared-components/search-bar/search-sort-section.svelte';
   import SearchRatingsSection from '$lib/components/shared-components/search-bar/search-ratings-section.svelte';
   import SearchTagsSection from '$lib/components/shared-components/search-bar/search-tags-section.svelte';
   import SearchTextSection from '$lib/components/shared-components/search-bar/search-text-section.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { parseUtcDate } from '$lib/utils/date-time';
   import { generateId } from '$lib/utils/generate-id';
-  import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
+  import { AssetOrder, AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
   import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiTune } from '@mdi/js';
   import type { DateTime } from 'luxon';
@@ -111,6 +113,12 @@
           ? MediaType.Video
           : MediaType.All,
     rating: searchQuery.rating,
+    sortOrder:
+      'order' in searchQuery && searchQuery.order
+        ? searchQuery.order === AssetOrder.Asc
+          ? 'oldest'
+          : 'newest'
+        : 'best-match',
   });
 
   const resetForm = () => {
@@ -130,6 +138,7 @@
       },
       mediaType: MediaType.All,
       rating: undefined,
+      sortOrder: 'best-match',
     };
   };
 
@@ -143,6 +152,9 @@
 
     const query = filter.query || undefined;
 
+    const order =
+      filter.sortOrder === 'newest' ? AssetOrder.Desc : filter.sortOrder === 'oldest' ? AssetOrder.Asc : undefined;
+
     let payload: SmartSearchDto | MetadataSearchDto = {
       query: filter.queryType === 'smart' ? query : undefined,
       ocr: filter.queryType === 'ocr' ? query : undefined,
@@ -163,6 +175,7 @@
       tagIds: filter.tagIds === null ? null : filter.tagIds.size > 0 ? [...filter.tagIds] : undefined,
       type,
       rating: filter.rating,
+      order,
     };
 
     onClose(payload);
@@ -218,6 +231,9 @@
 
           <!-- DISPLAY OPTIONS -->
           <SearchDisplaySection bind:filters={filter.display} />
+
+          <!-- SORT ORDER -->
+          <SearchSortSection bind:sortOrder={filter.sortOrder} />
         </div>
       </div>
     </form>

web/src/lib/services/album.service.ts

@@ -1,6 +1,5 @@
 import { goto } from '$app/navigation';
 import ToastAction from '$lib/components/ToastAction.svelte';
-import { AlbumPageViewMode } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -32,7 +31,7 @@ import {
   type UserResponseDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiArrowLeft, mdiLink, mdiPlus, mdiPlusBoxOutline, mdiShareVariantOutline, mdiUpload } from '@mdi/js';
+import { mdiLink, mdiPlus, mdiPlusBoxOutline, mdiShareVariantOutline, mdiUpload } from '@mdi/js';
 import { type MessageFormatter } from 'svelte-i18n';
 import { get } from 'svelte/store';
 
@@ -46,7 +45,7 @@ export const getAlbumsActions = ($t: MessageFormatter) => {
   return { Create };
 };
 
-export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto, viewMode: AlbumPageViewMode) => {
+export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) => {
   const isOwned = get(user).id === album.ownerId;
 
   const Share: ActionItem = {
@@ -73,16 +72,7 @@ export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto, v
     onAction: () => modalManager.show(SharedLinkCreateModal, { albumId: album.id }),
   };
 
-  const Close: ActionItem = {
-    title: $t('go_back'),
-    type: $t('command'),
-    icon: mdiArrowLeft,
-    onAction: () => goto(Route.albums()),
-    $if: () => viewMode === AlbumPageViewMode.VIEW,
-    shortcuts: { key: 'Escape' },
-  };
-
-  return { Share, AddUsers, CreateSharedLink, Close };
+  return { Share, AddUsers, CreateSharedLink };
 };
 
 export const getAlbumAssetsActions = ($t: MessageFormatter, album: AlbumResponseDto, assets: TimelineAsset[]) => {

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -127,10 +127,6 @@
       await handleCloseSelectAssets();
       return;
     }
-    if (viewMode === AlbumPageViewMode.OPTIONS) {
-      viewMode = AlbumPageViewMode.VIEW;
-      return;
-    }
     if ($showAssetViewer) {
       return;
     }
@@ -138,7 +134,7 @@
       cancelMultiselect(assetInteraction);
       return;
     }
-    return;
+    await goto(Route.albums());
   };
 
   const refreshAlbum = async () => {
@@ -305,14 +301,24 @@
       return;
     }
 
-    album.albumUsers = album.albumUsers.map((albumUser) =>
+    const albumUsers = album.albumUsers.map((albumUser) =>
       albumUser.user.id === userId ? { ...albumUser, role } : albumUser,
     );
+    album = { ...album, albumUsers };
   };
 
   const { Cast } = $derived(getGlobalActions($t));
-  const { Share, Close } = $derived(getAlbumActions($t, album, viewMode));
+  const { Share } = $derived(getAlbumActions($t, album));
   const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineInteraction.selectedAssets));
+
+  const Close = $derived({
+    title: $t('go_back'),
+    type: $t('command'),
+    icon: mdiArrowLeft,
+    onAction: handleEscape,
+    $if: () => !$showAssetViewer,
+    shortcuts: { key: 'Escape' },
+  });
 </script>
 
 <OnEvents
@@ -352,7 +358,7 @@
                 id={album.id}
                 albumName={album.albumName}
                 {isOwned}
-                onUpdate={(albumName) => (album.albumName = albumName)}
+                onUpdate={(albumName) => (album = { ...album, albumName })}
               />
 
               {#if album.assetCount > 0}
@@ -401,8 +407,11 @@
                   <ActionButton action={Share} />
                 </div>
               {/if}
-              <!-- ALBUM DESCRIPTION -->
-              <AlbumDescription id={album.id} bind:description={album.description} {isOwned} />
+              <AlbumDescription
+                id={album.id}
+                {isOwned}
+                bind:description={() => album.description, (description) => (album = { ...album, description })}
+              />
             </section>
           {/if}
 

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -5,6 +5,7 @@
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import DateGroupedGalleryViewer from '$lib/components/shared-components/gallery-viewer/date-grouped-gallery-viewer.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
@@ -68,6 +69,7 @@
   let searchQuery = $derived(page.url.searchParams.get(QueryParameter.QUERY));
   let smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
   let terms = $derived(searchQuery ? JSON.parse(searchQuery) : {});
+  let isSortedByDate = $derived(!!terms.order);
 
   const isAllUserOwned = $derived(
     $user && assetInteraction.selectedAssets.every((asset) => asset.ownerId === $user.id),
@@ -196,6 +198,7 @@
       description: $t('description'),
       queryAssetId: $t('query_asset_id'),
       ocr: $t('ocr'),
+      order: $t('sort_order'),
     };
     return keyMap[key] || key;
   }
@@ -296,15 +299,27 @@
 >
   <section id="search-content">
     {#if searchResultAssets.length > 0}
-      <GalleryViewer
-        assets={searchResultAssets}
-        {assetInteraction}
-        onIntersected={loadNextPage}
-        showArchiveIcon={true}
-        {viewport}
-        onReload={onSearchQueryUpdate}
-        slidingWindowOffset={searchResultsElement.offsetTop}
-      />
+      {#if isSortedByDate}
+        <DateGroupedGalleryViewer
+          assets={searchResultAssets}
+          {assetInteraction}
+          onIntersected={loadNextPage}
+          showArchiveIcon={true}
+          {viewport}
+          onReload={onSearchQueryUpdate}
+          slidingWindowOffset={searchResultsElement.offsetTop}
+        />
+      {:else}
+        <GalleryViewer
+          assets={searchResultAssets}
+          {assetInteraction}
+          onIntersected={loadNextPage}
+          showArchiveIcon={true}
+          {viewport}
+          onReload={onSearchQueryUpdate}
+          slidingWindowOffset={searchResultsElement.offsetTop}
+        />
+      {/if}
     {:else if !isLoading}
       <div class="flex min-h-[calc(66vh-11rem)] w-full place-content-center items-center dark:text-white">
         <div class="flex flex-col content-center items-center text-center">