refactor: rename to AlbumSortByOptions

mobile/assets/i18n/en-US.json

@@ -196,9 +196,11 @@
   "library_page_favorites": "Favorites",
   "library_page_new_album": "New album",
   "library_page_sharing": "Sharing",
-  "library_page_sort_created": "Most recently created",
+  "library_page_sort_created": "Created date",
   "library_page_sort_last_modified": "Last modified",
   "library_page_sort_most_recent_photo": "Most recent photo",
+  "library_page_sort_most_oldest_photo": "Oldest photo",
+  "library_page_sort_asset_count": "Number of assets",
   "library_page_sort_title": "Album title",
   "login_disabled": "Login has been disabled",
   "login_form_api_exception": "API exception. Please check the server URL and try again.",

mobile/lib/modules/album/providers/album_sort_by_options.provider.dart

@@ -0,0 +1,135 @@
+import 'package:collection/collection.dart';
+import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
+import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
+import 'package:immich_mobile/shared/models/album.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'album_sort_by_options.provider.g.dart';
+
+typedef AlbumSortFn = List<Album> Function(List<Album> albums, bool isReverse);
+
+class _AlbumSortHandlers {
+  const _AlbumSortHandlers._();
+
+  static const AlbumSortFn created = _sortByCreated;
+  static List<Album> _sortByCreated(List<Album> albums, bool isReverse) {
+    final sorted =
+        albums.where((a) => a.isRemote).sortedBy((album) => album.createdAt);
+    return (isReverse ? sorted.reversed : sorted).toList();
+  }
+
+  static const AlbumSortFn title = _sortByTitle;
+  static List<Album> _sortByTitle(List<Album> albums, bool isReverse) {
+    final sorted =
+        albums.where((a) => a.isRemote).sortedBy((album) => album.name);
+    return (isReverse ? sorted.reversed : sorted).toList();
+  }
+
+  static const AlbumSortFn lastModified = _sortByLastModified;
+  static List<Album> _sortByLastModified(List<Album> albums, bool isReverse) {
+    final sorted =
+        albums.where((a) => a.isRemote).sortedBy((album) => album.modifiedAt);
+    return (isReverse ? sorted.reversed : sorted).toList();
+  }
+
+  static const AlbumSortFn assetCount = _sortByAssetCount;
+  static List<Album> _sortByAssetCount(List<Album> albums, bool isReverse) {
+    final sorted = albums
+        .where((a) => a.isRemote)
+        .sorted((a, b) => a.assetCount.compareTo(b.assetCount));
+    return (isReverse ? sorted.reversed : sorted).toList();
+  }
+
+  static const AlbumSortFn mostRecent = _sortByMostRecent;
+  static List<Album> _sortByMostRecent(List<Album> albums, bool isReverse) {
+    final sorted = albums.where((a) => a.isRemote).sorted((a, b) {
+      if (a.endDate != null && b.endDate != null) {
+        return a.endDate!.compareTo(b.endDate!);
+      }
+      if (a.endDate == null) return 1;
+      if (b.endDate == null) return -1;
+      return 0;
+    });
+    return (isReverse ? sorted.reversed : sorted).toList();
+  }
+
+  static const AlbumSortFn mostOldest = _sortByMostOldest;
+  static List<Album> _sortByMostOldest(List<Album> albums, bool isReverse) {
+    final sorted = albums.where((a) => a.isRemote).sorted((a, b) {
+      if (a.startDate != null && b.startDate != null) {
+        return a.startDate!.compareTo(b.startDate!);
+      }
+      if (a.startDate == null) return 1;
+      if (b.startDate == null) return -1;
+      return 0;
+    });
+    return (isReverse ? sorted.reversed : sorted).toList();
+  }
+}
+
+// Store index allows us to re-arrange the values without affecting the saved prefs
+enum AlbumSortMode {
+  title(1, "library_page_sort_title", _AlbumSortHandlers.title),
+  assetCount(4, "library_page_sort_asset_count", _AlbumSortHandlers.assetCount),
+  lastModified(
+    3,
+    "library_page_sort_last_modified",
+    _AlbumSortHandlers.lastModified,
+  ),
+  created(0, "library_page_sort_created", _AlbumSortHandlers.created),
+  mostRecent(
+    2,
+    "library_page_sort_most_recent_photo",
+    _AlbumSortHandlers.mostRecent,
+  ),
+  mostOldest(
+    5,
+    "library_page_sort_most_oldest_photo",
+    _AlbumSortHandlers.mostOldest,
+  );
+
+  final int storeIndex;
+  final String label;
+  final AlbumSortFn sortFn;
+
+  const AlbumSortMode(this.storeIndex, this.label, this.sortFn);
+}
+
+@riverpod
+class AlbumSortByOptions extends _$AlbumSortByOptions {
+  @override
+  AlbumSortMode build() {
+    final sortOpt = ref
+        .watch(appSettingsServiceProvider)
+        .getSetting(AppSettingsEnum.selectedAlbumSortOrder);
+    return AlbumSortMode.values.firstWhere(
+      (e) => e.index == sortOpt,
+      orElse: () => AlbumSortMode.title,
+    );
+  }
+
+  void changeSortMode(AlbumSortMode sortOption) {
+    state = sortOption;
+    ref.watch(appSettingsServiceProvider).setSetting(
+          AppSettingsEnum.selectedAlbumSortOrder,
+          sortOption.storeIndex,
+        );
+  }
+}
+
+@riverpod
+class AlbumSortOrder extends _$AlbumSortOrder {
+  @override
+  bool build() {
+    return ref
+        .watch(appSettingsServiceProvider)
+        .getSetting(AppSettingsEnum.selectedAlbumSortReverse);
+  }
+
+  void changeSortDirection(bool isReverse) {
+    state = isReverse;
+    ref
+        .watch(appSettingsServiceProvider)
+        .setSetting(AppSettingsEnum.selectedAlbumSortReverse, isReverse);
+  }
+}

mobile/lib/modules/album/providers/album_sort_by_options.provider.g.dart

@@ -0,0 +1,43 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'album_sort_by_options.provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$albumSortByOptionsHash() =>
+    r'8d22fa8b7cbca2d3d7ed20a83bf00211dc948004';
+
+/// See also [AlbumSortByOptions].
+@ProviderFor(AlbumSortByOptions)
+final albumSortByOptionsProvider =
+    AutoDisposeNotifierProvider<AlbumSortByOptions, AlbumSortMode>.internal(
+  AlbumSortByOptions.new,
+  name: r'albumSortByOptionsProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$albumSortByOptionsHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$AlbumSortByOptions = AutoDisposeNotifier<AlbumSortMode>;
+String _$albumSortOrderHash() => r'573dea45b4519e69386fc7104c72522e35713440';
+
+/// See also [AlbumSortOrder].
+@ProviderFor(AlbumSortOrder)
+final albumSortOrderProvider =
+    AutoDisposeNotifierProvider<AlbumSortOrder, bool>.internal(
+  AlbumSortOrder.new,
+  name: r'albumSortOrderProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$albumSortOrderHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$AlbumSortOrder = AutoDisposeNotifier<bool>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member

mobile/lib/modules/album/ui/add_to_album_sliverlist.dart

@@ -1,6 +1,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/album_sort_by_options.provider.dart';
 import 'package:immich_mobile/modules/album/ui/album_thumbnail_listtile.dart';
 import 'package:immich_mobile/shared/models/album.dart';
 
@@ -21,33 +22,44 @@ class AddToAlbumSliverList extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final albumSortMode = ref.watch(albumSortByOptionsProvider);
+    final albumSortIsReverse = ref.watch(albumSortOrderProvider);
+    final sortedAlbums = albumSortMode.sortFn(albums, albumSortIsReverse);
+    final sortedSharedAlbums =
+        albumSortMode.sortFn(sharedAlbums, albumSortIsReverse);
+
     return SliverList(
       delegate: SliverChildBuilderDelegate(
           childCount: albums.length + (sharedAlbums.isEmpty ? 0 : 1),
           (context, index) {
         // Build shared expander
-        if (index == 0 && sharedAlbums.isNotEmpty) {
+        if (index == 0 && sortedSharedAlbums.isNotEmpty) {
           return Padding(
             padding: const EdgeInsets.only(bottom: 8),
             child: ExpansionTile(
               title: Text('common_shared'.tr()),
               tilePadding: const EdgeInsets.symmetric(horizontal: 10.0),
               leading: const Icon(Icons.group),
-              children: sharedAlbums
-                  .map(
-                    (album) => AlbumThumbnailListTile(
-                      album: album,
-                      onTap: enabled ? () => onAddToAlbum(album) : () {},
+              children: [
+                ListView.builder(
+                  shrinkWrap: true,
+                  physics: const ClampingScrollPhysics(),
+                  itemCount: sortedSharedAlbums.length,
+                  itemBuilder: (context, index) => AlbumThumbnailListTile(
+                    album: sortedSharedAlbums[index],
+                    onTap: enabled
+                        ? () => onAddToAlbum(sortedSharedAlbums[index])
+                        : () {},
                   ),
-                  )
-                  .toList(),
+                ),
+              ],
             ),
           );
         }
 
         // Build albums list
         final offset = index - (sharedAlbums.isNotEmpty ? 1 : 0);
-        final album = albums[offset];
+        final album = sortedAlbums[offset];
         return AlbumThumbnailListTile(
           album: album,
           onTap: enabled ? () => onAddToAlbum(album) : () {},

mobile/lib/modules/album/ui/album_thumbnail_card.dart

@@ -110,6 +110,7 @@ class AlbumThumbnailCard extends StatelessWidget {
                         width: cardSize,
                         child: Text(
                           album.name,
+                          overflow: TextOverflow.ellipsis,
                           style: context.textTheme.bodyMedium?.copyWith(
                             color: context.primaryColor,
                             fontWeight: FontWeight.w500,

mobile/lib/modules/album/ui/album_thumbnail_listtile.dart

@@ -68,20 +68,21 @@ class AlbumThumbnailListTile extends StatelessWidget {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             ClipRRect(
-              borderRadius: const BorderRadius.all(Radius.circular(8)),
+              borderRadius: BorderRadius.circular(8),
               child: album.thumbnail.value == null
                   ? buildEmptyThumbnail()
                   : buildAlbumThumbnail(),
             ),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            Padding(
+              padding: const EdgeInsets.only(
+                left: 8.0,
+                right: 8.0,
+              ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Text(
                     album.name,
-                      overflow: TextOverflow.ellipsis,
                     style: const TextStyle(
                       fontWeight: FontWeight.bold,
                     ),
@@ -109,7 +110,6 @@ class AlbumThumbnailListTile extends StatelessWidget {
                 ],
               ),
             ),
-            ),
           ],
         ),
       ),

mobile/lib/modules/album/views/library_page.dart

@@ -1,15 +1,12 @@
-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:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/album/providers/album_sort_by_options.provider.dart';
 import 'package:immich_mobile/modules/album/ui/album_thumbnail_card.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/shared/models/album.dart';
-import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
-import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_app_bar.dart';
 
@@ -21,8 +18,9 @@ class LibraryPage extends HookConsumerWidget {
     final trashEnabled =
         ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
     final albums = ref.watch(albumProvider);
-    var isDarkTheme = context.isDarkTheme;
-    var settings = ref.watch(appSettingsServiceProvider);
+    final isDarkTheme = context.isDarkTheme;
+    final albumSortOption = ref.watch(albumSortByOptionsProvider);
+    final albumSortIsReverse = ref.watch(albumSortOrderProvider);
 
     useEffect(
       () {
@@ -32,64 +30,15 @@ class LibraryPage extends HookConsumerWidget {
       [],
     );
 
-    final selectedAlbumSortOrder =
-        useState(settings.getSetting(AppSettingsEnum.selectedAlbumSortOrder));
-
-    List<Album> sortedAlbums() {
-      // Created.
-      if (selectedAlbumSortOrder.value == 0) {
-        return albums
-            .where((a) => a.isRemote)
-            .sortedBy((album) => album.createdAt)
-            .reversed
-            .toList();
-      }
-      // Album title.
-      if (selectedAlbumSortOrder.value == 1) {
-        return albums.where((a) => a.isRemote).sortedBy((album) => album.name);
-      }
-      // Most recent photo, if unset (e.g. empty album, use modifiedAt / updatedAt).
-      if (selectedAlbumSortOrder.value == 2) {
-        return albums
-            .where((a) => a.isRemote)
-            .sorted(
-              (a, b) => a.lastModifiedAssetTimestamp != null &&
-                      b.lastModifiedAssetTimestamp != null
-                  ? a.lastModifiedAssetTimestamp!
-                      .compareTo(b.lastModifiedAssetTimestamp!)
-                  : a.modifiedAt.compareTo(b.modifiedAt),
-            )
-            .reversed
-            .toList();
-      }
-      // Last modified.
-      if (selectedAlbumSortOrder.value == 3) {
-        return albums
-            .where((a) => a.isRemote)
-            .sortedBy((album) => album.modifiedAt)
-            .reversed
-            .toList();
-      }
-
-      // Fallback: Album title.
-      return albums.where((a) => a.isRemote).sortedBy((album) => album.name);
-    }
-
     Widget buildSortButton() {
-      final options = [
-        "library_page_sort_created".tr(),
-        "library_page_sort_title".tr(),
-        "library_page_sort_most_recent_photo".tr(),
-        "library_page_sort_last_modified".tr(),
-      ];
-
       return PopupMenuButton(
         position: PopupMenuPosition.over,
         itemBuilder: (BuildContext context) {
-          return options.mapIndexed<PopupMenuEntry<int>>((index, option) {
-            final selected = selectedAlbumSortOrder.value == index;
+          return AlbumSortMode.values
+              .map<PopupMenuEntry<AlbumSortMode>>((option) {
+            final selected = albumSortOption == option;
             return PopupMenuItem(
-              value: index,
+              value: option,
               child: Row(
                 children: [
                   Padding(
@@ -101,7 +50,7 @@ class LibraryPage extends HookConsumerWidget {
                     ),
                   ),
                   Text(
-                    option,
+                    option.label.tr(),
                     style: TextStyle(
                       color: selected ? context.primaryColor : null,
                       fontSize: 12.0,
@@ -112,19 +61,31 @@ class LibraryPage extends HookConsumerWidget {
             );
           }).toList();
         },
-        onSelected: (int value) {
-          selectedAlbumSortOrder.value = value;
-          settings.setSetting(AppSettingsEnum.selectedAlbumSortOrder, value);
+        onSelected: (AlbumSortMode value) {
+          final selected = albumSortOption == value;
+          // Switch direction
+          if (selected) {
+            ref
+                .read(albumSortOrderProvider.notifier)
+                .changeSortDirection(!albumSortIsReverse);
+          } else {
+            ref.read(albumSortByOptionsProvider.notifier).changeSortMode(value);
+          }
         },
         child: Row(
           children: [
-            Icon(
-              Icons.swap_vert_rounded,
-              size: 18,
+            Padding(
+              padding: const EdgeInsets.only(right: 5),
+              child: Icon(
+                albumSortIsReverse
+                    ? Icons.arrow_downward_rounded
+                    : Icons.arrow_upward_rounded,
+                size: 14,
                 color: context.primaryColor,
               ),
+            ),
             Text(
-              options[selectedAlbumSortOrder.value],
+              albumSortOption.label.tr(),
               style: context.textTheme.labelLarge?.copyWith(
                 color: context.primaryColor,
               ),
@@ -140,9 +101,8 @@ class LibraryPage extends HookConsumerWidget {
           var cardSize = constraints.maxWidth;
 
           return GestureDetector(
-            onTap: () {
-              context.autoPush(CreateAlbumRoute(isSharedAlbum: false));
-            },
+            onTap: () =>
+                context.autoPush(CreateAlbumRoute(isSharedAlbum: false)),
             child: Padding(
               padding:
                   const EdgeInsets.only(bottom: 32), // Adjust padding to suit
@@ -160,7 +120,7 @@ class LibraryPage extends HookConsumerWidget {
                             : const Color.fromARGB(255, 203, 203, 203),
                       ),
                       color: isDarkTheme ? Colors.grey[900] : Colors.grey[50],
-                      borderRadius: BorderRadius.circular(20),
+                      borderRadius: const BorderRadius.all(Radius.circular(20)),
                     ),
                     child: Center(
                       child: Icon(
@@ -223,7 +183,7 @@ class LibraryPage extends HookConsumerWidget {
       );
     }
 
-    final sorted = sortedAlbums();
+    final sorted = albumSortOption.sortFn(albums, albumSortIsReverse);
 
     final local = albums.where((a) => a.isLocal).toList();
 
@@ -231,7 +191,7 @@ class LibraryPage extends HookConsumerWidget {
       return trashEnabled
           ? InkWell(
               onTap: () => context.autoPush(const TrashRoute()),
-              borderRadius: BorderRadius.circular(12),
+              borderRadius: const BorderRadius.all(Radius.circular(12)),
               child: const Icon(
                 Icons.delete_rounded,
                 size: 25,

mobile/lib/modules/album/views/sharing_page.dart

@@ -3,12 +3,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/modules/album/providers/album_sort_by_options.provider.dart';
 import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
 import 'package:immich_mobile/modules/album/ui/album_thumbnail_card.dart';
 import 'package:immich_mobile/modules/partner/providers/partner.provider.dart';
 import 'package:immich_mobile/modules/partner/ui/partner_list.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/shared/models/album.dart';
 import 'package:immich_mobile/shared/providers/user.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_app_bar.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';
@@ -18,7 +18,10 @@ class SharingPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final List<Album> sharedAlbums = ref.watch(sharedAlbumProvider);
+    final albumSortOption = ref.watch(albumSortByOptionsProvider);
+    final albumSortIsReverse = ref.watch(albumSortOrderProvider);
+    final albums = ref.watch(sharedAlbumProvider);
+    final sharedAlbums = albumSortOption.sortFn(albums, albumSortIsReverse);
     final userId = ref.watch(currentUserProvider)?.id;
     final partner = ref.watch(partnerSharedWithProvider);
 
@@ -68,7 +71,7 @@ class SharingPage extends HookConsumerWidget {
             return ListTile(
               contentPadding: const EdgeInsets.symmetric(horizontal: 12),
               leading: ClipRRect(
-                borderRadius: BorderRadius.circular(8),
+                borderRadius: const BorderRadius.all(Radius.circular(8)),
                 child: ImmichImage(
                   album.thumbnail.value,
                   width: 60,
@@ -167,9 +170,9 @@ class SharingPage extends HookConsumerWidget {
           padding: const EdgeInsets.all(8.0),
           child: Card(
             elevation: 0,
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(20),
-              side: const BorderSide(
+            shape: const RoundedRectangleBorder(
+              borderRadius: BorderRadius.all(Radius.circular(20)),
+              side: BorderSide(
                 color: Colors.grey,
                 width: 0.5,
               ),
@@ -212,7 +215,7 @@ class SharingPage extends HookConsumerWidget {
     Widget sharePartnerButton() {
       return InkWell(
         onTap: () => context.autoPush(const PartnerRoute()),
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: const BorderRadius.all(Radius.circular(12)),
         child: const Icon(
           Icons.swap_horizontal_circle_rounded,
           size: 25,

mobile/lib/modules/settings/services/app_settings.service.dart

@@ -51,6 +51,11 @@ enum AppSettingsEnum<T> {
   mapIncludeArchived<bool>(StoreKey.mapIncludeArchived, null, false),
   mapRelativeDate<int>(StoreKey.mapRelativeDate, null, 0),
   allowSelfSignedSSLCert<bool>(StoreKey.selfSignedCert, null, false),
+  selectedAlbumSortReverse<bool>(
+    StoreKey.selectedAlbumSortReverse,
+    null,
+    false,
+  ),
   ;
 
   const AppSettingsEnum(this.storeKey, this.hiveKey, this.defaultValue);

mobile/lib/shared/models/store.dart

@@ -182,6 +182,7 @@ enum StoreKey<T> {
   mapRelativeDate<int>(119, type: int),
   selfSignedCert<bool>(120, type: bool),
   mapIncludeArchived<bool>(121, type: bool),
+  selectedAlbumSortReverse<bool>(122, type: bool),
   ;
 
   const StoreKey(

mobile/lib/shared/providers/websocket.provider.dart

@@ -1,13 +1,10 @@
-import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
-import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/models/server_info/server_version.model.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
-import 'package:immich_mobile/shared/providers/db.provider.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/services/sync.service.dart';
 import 'package:immich_mobile/utils/debounce.dart';
@@ -17,33 +14,13 @@ import 'package:socket_io_client/socket_io_client.dart';
 
 enum PendingAction {
   assetDelete,
-  assetUploaded,
-  assetHidden,
 }
 
 class PendingChange {
-  final String id;
   final PendingAction action;
   final dynamic value;
 
-  const PendingChange(
-    this.id,
-    this.action,
-    this.value,
-  );
-
-  @override
-  String toString() => 'PendingChange(id: $id, action: $action, value: $value)';
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-
-    return other is PendingChange && other.id == id && other.action == action;
-  }
-
-  @override
-  int get hashCode => id.hashCode ^ action.hashCode;
+  const PendingChange(this.action, this.value);
 }
 
 class WebsocketState {
@@ -154,7 +131,6 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
         socket.on('on_asset_trash', _handleServerUpdates);
         socket.on('on_asset_restore', _handleServerUpdates);
         socket.on('on_asset_update', _handleServerUpdates);
-        socket.on('on_asset_hidden', _handleOnAssetHidden);
         socket.on('on_new_release', _handleReleaseUpdates);
       } catch (e) {
         debugPrint("[WEBSOCKET] Catch Websocket Error - ${e.toString()}");
@@ -187,77 +163,34 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
   }
 
   void addPendingChange(PendingAction action, dynamic value) {
-    final now = DateTime.now();
     state = state.copyWith(
-      pendingChanges: [
-        ...state.pendingChanges,
-        PendingChange(now.millisecondsSinceEpoch.toString(), action, value),
-      ],
+      pendingChanges: [...state.pendingChanges, PendingChange(action, value)],
     );
-    _debounce(handlePendingChanges);
   }
 
-  Future<void> _handlePendingDeletes() async {
+  void handlePendingChanges() {
     final deleteChanges = state.pendingChanges
         .where((c) => c.action == PendingAction.assetDelete)
         .toList();
     if (deleteChanges.isNotEmpty) {
       List<String> remoteIds =
           deleteChanges.map((a) => a.value.toString()).toList();
-      await _ref.read(syncServiceProvider).handleRemoteAssetRemoval(remoteIds);
+      _ref.read(syncServiceProvider).handleRemoteAssetRemoval(remoteIds);
       state = state.copyWith(
         pendingChanges: state.pendingChanges
-            .whereNot((c) => deleteChanges.contains(c))
+            .where((c) => c.action != PendingAction.assetDelete)
             .toList(),
       );
     }
   }
 
-  Future<void> _handlePendingUploaded() async {
-    final uploadedChanges = state.pendingChanges
-        .where((c) => c.action == PendingAction.assetUploaded)
-        .toList();
-    if (uploadedChanges.isNotEmpty) {
-      List<AssetResponseDto?> remoteAssets = uploadedChanges
-          .map((a) => AssetResponseDto.fromJson(a.value))
-          .toList();
-      for (final dto in remoteAssets) {
+  void _handleOnUploadSuccess(dynamic data) {
+    final dto = AssetResponseDto.fromJson(data);
     if (dto != null) {
       final newAsset = Asset.remote(dto);
-          await _ref.watch(assetProvider.notifier).onNewAssetUploaded(newAsset);
+      _ref.watch(assetProvider.notifier).onNewAssetUploaded(newAsset);
     }
   }
-      state = state.copyWith(
-        pendingChanges: state.pendingChanges
-            .whereNot((c) => uploadedChanges.contains(c))
-            .toList(),
-      );
-    }
-  }
-
-  Future<void> _handlingPendingHidden() async {
-    final hiddenChanges = state.pendingChanges
-        .where((c) => c.action == PendingAction.assetHidden)
-        .toList();
-    if (hiddenChanges.isNotEmpty) {
-      List<String> remoteIds =
-          hiddenChanges.map((a) => a.value.toString()).toList();
-      final db = _ref.watch(dbProvider);
-      await db.writeTxn(() => db.assets.deleteAllByRemoteId(remoteIds));
-
-      state = state.copyWith(
-        pendingChanges: state.pendingChanges
-            .whereNot((c) => hiddenChanges.contains(c))
-            .toList(),
-      );
-    }
-  }
-
-  void handlePendingChanges() async {
-    await _handlePendingUploaded();
-    await _handlePendingDeletes();
-    await _handlingPendingHidden();
-  }
 
   void _handleOnConfigUpdate(dynamic _) {
     _ref.read(serverInfoProvider.notifier).getServerFeatures();
@@ -269,14 +202,10 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
     _ref.read(assetProvider.notifier).getAllAsset();
   }
 
-  void _handleOnUploadSuccess(dynamic data) =>
-      addPendingChange(PendingAction.assetUploaded, data);
-
-  void _handleOnAssetDelete(dynamic data) =>
+  void _handleOnAssetDelete(dynamic data) {
     addPendingChange(PendingAction.assetDelete, data);
-
-  void _handleOnAssetHidden(dynamic data) =>
-      addPendingChange(PendingAction.assetHidden, data);
+    _debounce(handlePendingChanges);
+  }
 
   _handleReleaseUpdates(dynamic data) {
     // Json guard

mobile/lib/shared/ui/date_time_picker.dart

@@ -86,14 +86,11 @@ class _DateTimePicker extends HookWidget {
     final timeZones = useMemoized(() => getAllTimeZones(), const []);
 
     void pickDate() async {
-      final now = DateTime.now();
-      // Handles cases where the date from the asset is far off in the future
-      final initialDate = date.value.isAfter(now) ? now : date.value;
       final newDate = await showDatePicker(
         context: context,
-        initialDate: initialDate,
+        initialDate: date.value,
         firstDate: DateTime(1800),
-        lastDate: now,
+        lastDate: DateTime.now(),
       );
       if (newDate == null) {
         return;

mobile/test/album.stub.dart

@@ -0,0 +1,54 @@
+import 'package:immich_mobile/shared/models/album.dart';
+
+import 'asset.stub.dart';
+import 'user.stub.dart';
+
+final class AlbumStub {
+  const AlbumStub._();
+
+  static final emptyAlbum = Album(
+    name: "empty-album",
+    localId: "empty-album-local",
+    remoteId: "empty-album-remote",
+    createdAt: DateTime(2000),
+    modifiedAt: DateTime(2023),
+    shared: false,
+    activityEnabled: false,
+    startDate: DateTime(2020),
+  );
+
+  static final sharedWithUser = Album(
+    name: "empty-album-shared-with-user",
+    localId: "empty-album-shared-with-user-local",
+    remoteId: "empty-album-shared-with-user-remote",
+    createdAt: DateTime(2023),
+    modifiedAt: DateTime(2023),
+    shared: true,
+    activityEnabled: false,
+    endDate: DateTime(2020),
+  )..sharedUsers.addAll([UserStub.admin]);
+
+  static final oneAsset = Album(
+    name: "album-with-single-asset",
+    localId: "album-with-single-asset-local",
+    remoteId: "album-with-single-asset-remote",
+    createdAt: DateTime(2022),
+    modifiedAt: DateTime(2023),
+    shared: false,
+    activityEnabled: false,
+    startDate: DateTime(2020),
+    endDate: DateTime(2023),
+  )..assets.addAll([AssetStub.image1]);
+
+  static final twoAsset = Album(
+    name: "album-with-two-assets",
+    localId: "album-with-two-assets-local",
+    remoteId: "album-with-two-assets-remote",
+    createdAt: DateTime(2001),
+    modifiedAt: DateTime(2010),
+    shared: false,
+    activityEnabled: false,
+    startDate: DateTime(2019),
+    endDate: DateTime(2020),
+  )..assets.addAll([AssetStub.image1, AssetStub.image2]);
+}

mobile/test/album_sort_by_options_provider_test.dart

@@ -0,0 +1,182 @@
+import 'package:collection/collection.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:immich_mobile/modules/album/providers/album_sort_by_options.provider.dart';
+import 'package:immich_mobile/shared/models/album.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/models/user.dart';
+import 'package:isar/isar.dart';
+
+import 'album.stub.dart';
+import 'asset.stub.dart';
+
+void main() {
+  late final Isar db;
+
+  setUpAll(() async {
+    await Isar.initializeIsarCore(download: true);
+    db = await Isar.open(
+      [
+        AssetSchema,
+        AlbumSchema,
+        UserSchema,
+      ],
+      maxSizeMiB: 256,
+      directory: ".",
+    );
+  });
+
+  final albums = [
+    AlbumStub.emptyAlbum,
+    AlbumStub.sharedWithUser,
+    AlbumStub.oneAsset,
+    AlbumStub.twoAsset,
+  ];
+
+  setUp(() {
+    db.writeTxnSync(() {
+      db.clearSync();
+      // Save all assets
+      db.assets.putAllSync([AssetStub.image1, AssetStub.image2]);
+      db.albums.putAllSync(albums);
+      for (final album in albums) {
+        album.sharedUsers.saveSync();
+        album.assets.saveSync();
+      }
+    });
+    expect(db.albums.countSync(), 4);
+    expect(db.assets.countSync(), 2);
+  });
+
+  group("Album sort - Created Time", () {
+    const created = AlbumSortMode.created;
+    test("Created time - ASC", () {
+      final sorted = created.sortFn(albums, false);
+      expect(sorted.isSortedBy((a) => a.createdAt), true);
+    });
+
+    test("Created time - DESC", () {
+      final sorted = created.sortFn(albums, true);
+      expect(
+        sorted.isSorted((b, a) => a.createdAt.compareTo(b.createdAt)),
+        true,
+      );
+    });
+  });
+
+  group("Album sort - Asset count", () {
+    const assetCount = AlbumSortMode.assetCount;
+    test("Asset Count - ASC", () {
+      final sorted = assetCount.sortFn(albums, false);
+      expect(
+        sorted.isSorted((a, b) => a.assetCount.compareTo(b.assetCount)),
+        true,
+      );
+    });
+
+    test("Asset Count - DESC", () {
+      final sorted = assetCount.sortFn(albums, true);
+      expect(
+        sorted.isSorted((b, a) => a.assetCount.compareTo(b.assetCount)),
+        true,
+      );
+    });
+  });
+
+  group("Album sort - Last modified", () {
+    const lastModified = AlbumSortMode.lastModified;
+    test("Last modified - ASC", () {
+      final sorted = lastModified.sortFn(albums, false);
+      expect(
+        sorted.isSorted((a, b) => a.modifiedAt.compareTo(b.modifiedAt)),
+        true,
+      );
+    });
+
+    test("Last modified - DESC", () {
+      final sorted = lastModified.sortFn(albums, true);
+      expect(
+        sorted.isSorted((b, a) => a.modifiedAt.compareTo(b.modifiedAt)),
+        true,
+      );
+    });
+  });
+
+  group("Album sort - Created", () {
+    const created = AlbumSortMode.created;
+    test("Created - ASC", () {
+      final sorted = created.sortFn(albums, false);
+      expect(
+        sorted.isSorted((a, b) => a.createdAt.compareTo(b.createdAt)),
+        true,
+      );
+    });
+
+    test("Created - DESC", () {
+      final sorted = created.sortFn(albums, true);
+      expect(
+        sorted.isSorted((b, a) => a.createdAt.compareTo(b.createdAt)),
+        true,
+      );
+    });
+  });
+
+  group("Album sort - Most Recent", () {
+    const mostRecent = AlbumSortMode.mostRecent;
+
+    test("Most Recent - ASC", () {
+      final sorted = mostRecent.sortFn(albums, false);
+      expect(
+        sorted,
+        [
+          AlbumStub.sharedWithUser,
+          AlbumStub.twoAsset,
+          AlbumStub.oneAsset,
+          AlbumStub.emptyAlbum,
+        ],
+      );
+    });
+
+    test("Most Recent - DESC", () {
+      final sorted = mostRecent.sortFn(albums, true);
+      expect(
+        sorted,
+        [
+          AlbumStub.emptyAlbum,
+          AlbumStub.oneAsset,
+          AlbumStub.twoAsset,
+          AlbumStub.sharedWithUser,
+        ],
+      );
+    });
+  });
+
+  group("Album sort - Most Oldest", () {
+    const mostOldest = AlbumSortMode.mostOldest;
+
+    test("Most Oldest - ASC", () {
+      final sorted = mostOldest.sortFn(albums, false);
+      expect(
+        sorted,
+        [
+          AlbumStub.twoAsset,
+          AlbumStub.emptyAlbum,
+          AlbumStub.oneAsset,
+          AlbumStub.sharedWithUser,
+        ],
+      );
+    });
+
+    test("Most Oldest - DESC", () {
+      final sorted = mostOldest.sortFn(albums, true);
+      expect(
+        sorted,
+        [
+          AlbumStub.sharedWithUser,
+          AlbumStub.oneAsset,
+          AlbumStub.emptyAlbum,
+          AlbumStub.twoAsset,
+        ],
+      );
+    });
+  });
+}

mobile/test/asset.stub.dart

@@ -0,0 +1,37 @@
+import 'package:immich_mobile/shared/models/asset.dart';
+
+final class AssetStub {
+  const AssetStub._();
+
+  static final image1 = Asset(
+    checksum: "image1-checksum",
+    localId: "image1",
+    ownerId: 1,
+    fileCreatedAt: DateTime.now(),
+    fileModifiedAt: DateTime.now(),
+    updatedAt: DateTime.now(),
+    durationInSeconds: 0,
+    type: AssetType.image,
+    fileName: "image1.jpg",
+    isFavorite: true,
+    isArchived: false,
+    isTrashed: false,
+    stackCount: 0,
+  );
+
+  static final image2 = Asset(
+    checksum: "image2-checksum",
+    localId: "image2",
+    ownerId: 1,
+    fileCreatedAt: DateTime(2000),
+    fileModifiedAt: DateTime(2010),
+    updatedAt: DateTime.now(),
+    durationInSeconds: 60,
+    type: AssetType.video,
+    fileName: "image2.jpg",
+    isFavorite: false,
+    isArchived: false,
+    isTrashed: false,
+    stackCount: 0,
+  );
+}

mobile/test/user.stub.dart

@@ -0,0 +1,21 @@
+import 'package:immich_mobile/shared/models/user.dart';
+
+final class UserStub {
+  const UserStub._();
+
+  static final admin = User(
+    id: "admin",
+    updatedAt: DateTime(2021),
+    email: "admin@test.com",
+    name: "admin",
+    isAdmin: true,
+  );
+
+  static final user1 = User(
+    id: "user1",
+    updatedAt: DateTime(2022),
+    email: "user1@test.com",
+    name: "user1",
+    isAdmin: false,
+  );
+}

renovate.json

@@ -62,9 +62,6 @@
       "versioning": "node"
     }
   ],
-  "ignorePaths": [
-    "mobile/openapi/pubspec.yaml"
-  ],
   "ignoreDeps": [
     "http",
     "latlong2",

server/src/domain/metadata/metadata.service.spec.ts

@@ -3,7 +3,6 @@ import {
   assetStub,
   newAlbumRepositoryMock,
   newAssetRepositoryMock,
-  newCommunicationRepositoryMock,
   newCryptoRepositoryMock,
   newJobRepositoryMock,
   newMediaRepositoryMock,
@@ -20,10 +19,8 @@ import { constants } from 'fs/promises';
 import { when } from 'jest-when';
 import { JobName } from '../job';
 import {
-  CommunicationEvent,
   IAlbumRepository,
   IAssetRepository,
-  ICommunicationRepository,
   ICryptoRepository,
   IJobRepository,
   IMediaRepository,
@@ -49,7 +46,6 @@ describe(MetadataService.name, () => {
   let mediaMock: jest.Mocked<IMediaRepository>;
   let personMock: jest.Mocked<IPersonRepository>;
   let storageMock: jest.Mocked<IStorageRepository>;
-  let communicationMock: jest.Mocked<ICommunicationRepository>;
   let sut: MetadataService;
 
   beforeEach(async () => {
@@ -61,7 +57,6 @@ describe(MetadataService.name, () => {
     metadataMock = newMetadataRepositoryMock();
     moveMock = newMoveRepositoryMock();
     personMock = newPersonRepositoryMock();
-    communicationMock = newCommunicationRepositoryMock();
     storageMock = newStorageRepositoryMock();
     mediaMock = newMediaRepositoryMock();
 
@@ -75,7 +70,6 @@ describe(MetadataService.name, () => {
       configMock,
       mediaMock,
       moveMock,
-      communicationMock,
       personMock,
     );
   });
@@ -178,23 +172,6 @@ describe(MetadataService.name, () => {
       expect(assetMock.save).toHaveBeenCalledWith({ id: assetStub.livePhotoMotionAsset.id, isVisible: false });
       expect(albumMock.removeAsset).toHaveBeenCalledWith(assetStub.livePhotoMotionAsset.id);
     });
-
-    it('should notify clients on live photo link', async () => {
-      assetMock.getByIds.mockResolvedValue([
-        {
-          ...assetStub.livePhotoStillAsset,
-          exifInfo: { livePhotoCID: assetStub.livePhotoMotionAsset.id } as ExifEntity,
-        },
-      ]);
-      assetMock.findLivePhotoMatch.mockResolvedValue(assetStub.livePhotoMotionAsset);
-
-      await expect(sut.handleLivePhotoLinking({ id: assetStub.livePhotoStillAsset.id })).resolves.toBe(true);
-      expect(communicationMock.send).toHaveBeenCalledWith(
-        CommunicationEvent.ASSET_HIDDEN,
-        assetStub.livePhotoMotionAsset.ownerId,
-        assetStub.livePhotoMotionAsset.id,
-      );
-    });
   });
 
   describe('handleQueueMetadataExtraction', () => {

server/src/domain/metadata/metadata.service.ts

@@ -9,11 +9,9 @@ import { Subscription } from 'rxjs';
 import { usePagination } from '../domain.util';
 import { IBaseJob, IEntityJob, ISidecarWriteJob, JOBS_ASSET_PAGINATION_SIZE, JobName, QueueName } from '../job';
 import {
-  CommunicationEvent,
   ExifDuration,
   IAlbumRepository,
   IAssetRepository,
-  ICommunicationRepository,
   ICryptoRepository,
   IJobRepository,
   IMediaRepository,
@@ -106,7 +104,6 @@ export class MetadataService {
     @Inject(ISystemConfigRepository) configRepository: ISystemConfigRepository,
     @Inject(IMediaRepository) private mediaRepository: IMediaRepository,
     @Inject(IMoveRepository) moveRepository: IMoveRepository,
-    @Inject(ICommunicationRepository) private communicationRepository: ICommunicationRepository,
     @Inject(IPersonRepository) personRepository: IPersonRepository,
   ) {
     this.configCore = SystemConfigCore.create(configRepository);
@@ -170,9 +167,6 @@ export class MetadataService {
     await this.assetRepository.save({ id: motionAsset.id, isVisible: false });
     await this.albumRepository.removeAsset(motionAsset.id);
 
-    // Notify clients to hide the linked live photo asset
-    this.communicationRepository.send(CommunicationEvent.ASSET_HIDDEN, motionAsset.ownerId, motionAsset.id);
-
     return true;
   }
 

server/src/domain/repositories/communication.repository.ts

@@ -5,7 +5,6 @@ export enum CommunicationEvent {
   ASSET_DELETE = 'on_asset_delete',
   ASSET_TRASH = 'on_asset_trash',
   ASSET_UPDATE = 'on_asset_update',
-  ASSET_HIDDEN = 'on_asset_hidden',
   ASSET_RESTORE = 'on_asset_restore',
   PERSON_THUMBNAIL = 'on_person_thumbnail',
   SERVER_VERSION = 'on_server_version',

server/src/immich/api-v1/asset/asset.service.ts

@@ -336,18 +336,14 @@ export class AssetService {
 
     res.set('Cache-Control', 'private, max-age=86400, no-transform');
     res.header('Content-Type', mimeTypes.lookup(filepath));
-    return new Promise((resolve, reject) => {
     res.sendFile(filepath, options, (error: Error) => {
       if (!error) {
-          resolve();
         return;
       }
 
       if (error.message !== 'Request aborted') {
         this.logger.error(`Unable to send file: ${error.name}`, error.stack);
       }
-        reject(error);
-      });
     });
   }
 

web/package-lock.json

@@ -11866,9 +11866,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
-      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
+      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",

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

@@ -205,13 +205,12 @@
     <section class="px-4 py-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
         <h2>PEOPLE</h2>
-        <div class="flex gap-2 items-center">
+        <div class="flex gap-2">
           {#if people.some((person) => person.isHidden)}
             <CircleIconButton
               title="Show hidden people"
               icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
               padding="1"
-              buttonSize="32"
               on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
             />
           {/if}
@@ -220,7 +219,6 @@
             icon={mdiPencil}
             padding="1"
             size="20"
-            buttonSize="32"
             on:click={() => (showEditFaces = true)}
           />
         </div>
@@ -339,7 +337,7 @@
         </div>
 
         {#if isOwner}
-          <button class="focus:outline-none p-1">
+          <button class="focus:outline-none">
             <Icon path={mdiPencil} size="20" />
           </button>
         {/if}
@@ -351,7 +349,7 @@
             <Icon path={mdiCalendar} size="24" />
           </div>
         </div>
-        <button class="focus:outline-none p-1">
+        <button class="focus:outline-none">
           <Icon path={mdiPencil} size="20" />
         </button>
       </div>
@@ -509,7 +507,7 @@
       </div>
     {:else if !asset.exifInfo?.city && !asset.isReadOnly && $user && asset.ownerId === $user.id}
       <div
-        class="flex justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
+        class="flex justify-between place-items-start gap-4 py-4 rounded-lg pr-2 hover:dark:text-immich-dark-primary hover:text-immich-primary"
         on:click={() => (isShowChangeLocation = true)}
         on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
         tabindex="0"
@@ -523,7 +521,7 @@
 
           <p>Add a location</p>
         </div>
-        <div class="focus:outline-none p-1">
+        <div class="focus:outline-none">
           <Icon path={mdiPencil} size="20" />
         </div>
       </div>

web/src/lib/components/elements/buttons/circle-icon-button.svelte

@@ -11,13 +11,10 @@
   export let forceDark = false;
   export let hideMobile = false;
   export let iconColor = 'currentColor';
-  export let buttonSize: string | undefined = undefined;
 </script>
 
 <button
   {title}
-  style:width={buttonSize ? buttonSize + 'px' : ''}
-  style:height={buttonSize ? buttonSize + 'px' : ''}
   style:background-color={backgroundColor}
   style:--immich-icon-button-hover-color={hoverColor}
   class:dark:text-immich-dark-fg={!forceDark}

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -111,7 +111,7 @@
 
 <section
   transition:fly={{ x: 360, duration: 100, easing: linear }}
-  class="absolute top-0 z-[2001] h-full w-[360px] overflow-x-hidden p-2 bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
+  class="absolute top-0 z-[2001] h-full w-[360px] overflow-x-hidden p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg"
 >
   <div class="flex place-items-center justify-between gap-2">
     {#if !searchFaces}

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -160,7 +160,7 @@
 
 <section
   transition:fly={{ x: 360, duration: 100, easing: linear }}
-  class="absolute top-0 z-[2000] h-full w-[360px] overflow-x-hidden p-2 bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
+  class="absolute top-0 z-[2000] h-full w-[360px] overflow-x-hidden p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg"
 >
   <div class="flex place-items-center justify-between gap-2">
     <div class="flex items-center gap-2">