feat(mobile): persist album sorting & layout in settings (#22133)

* fix(mobile): persist album sorting in settings

* fix(mobile): persist album layout

* fix: fixed store model id

* fix: corrupted AppSettingsEnum

* chore: refactor to remove RemoteAlbumSortMode

* refactor: use t instead of tr

mobile/lib/domain/models/store.model.dart

@@ -71,6 +71,7 @@ enum StoreKey<T> {
   readonlyModeEnabled<bool>._(138),
 
   autoPlayVideo<bool>._(139),
+  albumGridView<bool>._(140),
 
   // Experimental stuff
   photoManagerCustomFilter<bool>._(1000),

mobile/lib/domain/services/remote_album.service.dart

@@ -7,6 +7,7 @@ import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/infrastructure/repositories/remote_album.repository.dart';
 import 'package:immich_mobile/models/albums/album_search.model.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
+import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 
 class RemoteAlbumService {
   final DriftRemoteAlbumRepository _repository;
@@ -32,16 +33,16 @@ class RemoteAlbumService {
 
   Future<List<RemoteAlbum>> sortAlbums(
     List<RemoteAlbum> albums,
-    RemoteAlbumSortMode sortMode, {
+    AlbumSortMode sortMode, {
     bool isReverse = false,
   }) async {
     final List<RemoteAlbum> sorted = switch (sortMode) {
-      RemoteAlbumSortMode.created => albums.sortedBy((album) => album.createdAt),
+      AlbumSortMode.created => albums.sortedBy((album) => album.createdAt),
-      RemoteAlbumSortMode.title => albums.sortedBy((album) => album.name),
+      AlbumSortMode.title => albums.sortedBy((album) => album.name),
-      RemoteAlbumSortMode.lastModified => albums.sortedBy((album) => album.updatedAt),
+      AlbumSortMode.lastModified => albums.sortedBy((album) => album.updatedAt),
-      RemoteAlbumSortMode.assetCount => albums.sortedBy((album) => album.assetCount),
+      AlbumSortMode.assetCount => albums.sortedBy((album) => album.assetCount),
-      RemoteAlbumSortMode.mostRecent => await _sortByNewestAsset(albums),
+      AlbumSortMode.mostRecent => await _sortByNewestAsset(albums),
-      RemoteAlbumSortMode.mostOldest => await _sortByOldestAsset(albums),
+      AlbumSortMode.mostOldest => await _sortByOldestAsset(albums),
     };
 
     return (isReverse ? sorted.reversed : sorted).toList();
@@ -211,16 +212,3 @@ class RemoteAlbumService {
     return sorted.reversed.toList();
   }
 }
-
-enum RemoteAlbumSortMode {
-  title("library_page_sort_title"),
-  assetCount("library_page_sort_asset_count"),
-  lastModified("library_page_sort_last_modified"),
-  created("library_page_sort_created"),
-  mostRecent("sort_newest"),
-  mostOldest("sort_oldest");
-
-  final String key;
-
-  const RemoteAlbumSortMode(this.key);
-}

mobile/lib/presentation/widgets/album/album_selector.widget.dart

@@ -7,7 +7,6 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/services/remote_album.service.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
@@ -17,6 +16,9 @@ import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart'
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/album_filter.utils.dart';
 import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
@@ -45,14 +47,28 @@ class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
   List<RemoteAlbum> shownAlbums = [];
 
   AlbumFilter filter = AlbumFilter(query: "", mode: QuickFilterMode.all);
-  AlbumSort sort = AlbumSort(mode: RemoteAlbumSortMode.lastModified, isReverse: true);
+  AlbumSort sort = AlbumSort(mode: AlbumSortMode.lastModified, isReverse: true);
 
   @override
   void initState() {
     super.initState();
 
-    // Load albums when component mounts
     WidgetsBinding.instance.addPostFrameCallback((_) {
+      final appSettings = ref.read(appSettingsServiceProvider);
+      final savedSortMode = appSettings.getSetting(AppSettingsEnum.selectedAlbumSortOrder);
+      final savedIsReverse = appSettings.getSetting(AppSettingsEnum.selectedAlbumSortReverse);
+      final savedIsGrid = appSettings.getSetting(AppSettingsEnum.albumGridView);
+
+      final albumSortMode = AlbumSortMode.values.firstWhere(
+        (e) => e.storeIndex == savedSortMode,
+        orElse: () => AlbumSortMode.lastModified,
+      );
+
+      setState(() {
+        sort = AlbumSort(mode: albumSortMode, isReverse: savedIsReverse);
+        isGrid = savedIsGrid;
+      });
+
       ref.read(remoteAlbumProvider.notifier).refresh();
     });
 
@@ -82,6 +98,7 @@ class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
     setState(() {
       isGrid = !isGrid;
     });
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.albumGridView, isGrid);
   }
 
   void changeFilter(QuickFilterMode mode) {
@@ -97,6 +114,10 @@ class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
       this.sort = sort;
     });
 
+    final appSettings = ref.read(appSettingsServiceProvider);
+    await appSettings.setSetting(AppSettingsEnum.selectedAlbumSortOrder, sort.mode.storeIndex);
+    await appSettings.setSetting(AppSettingsEnum.selectedAlbumSortReverse, sort.isReverse);
+
     await sortAlbums();
   }
 
@@ -181,6 +202,8 @@ class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
             onToggleViewMode: toggleViewMode,
             onSortChanged: changeSort,
             controller: menuController,
+            currentSortMode: sort.mode,
+            currentIsReverse: sort.isReverse,
           ),
           isGrid
               ? _AlbumGrid(albums: shownAlbums, userId: userId, onAlbumSelected: widget.onAlbumSelected)
@@ -192,21 +215,46 @@ class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
 }
 
 class _SortButton extends ConsumerStatefulWidget {
-  const _SortButton(this.onSortChanged, {this.controller});
+  const _SortButton(
+    this.onSortChanged, {
+    required this.initialSortMode,
+    required this.initialIsReverse,
+    this.controller,
+  });
 
   final Future<void> Function(AlbumSort) onSortChanged;
   final MenuController? controller;
+  final AlbumSortMode initialSortMode;
+  final bool initialIsReverse;
 
   @override
   ConsumerState<_SortButton> createState() => _SortButtonState();
 }
 
 class _SortButtonState extends ConsumerState<_SortButton> {
-  RemoteAlbumSortMode albumSortOption = RemoteAlbumSortMode.lastModified;
+  late AlbumSortMode albumSortOption;
-  bool albumSortIsReverse = true;
+  late bool albumSortIsReverse;
   bool isSorting = false;
 
-  Future<void> onMenuTapped(RemoteAlbumSortMode sortMode) async {
+  @override
+  void initState() {
+    super.initState();
+    albumSortOption = widget.initialSortMode;
+    albumSortIsReverse = widget.initialIsReverse;
+  }
+
+  @override
+  void didUpdateWidget(_SortButton oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initialSortMode != widget.initialSortMode || oldWidget.initialIsReverse != widget.initialIsReverse) {
+      setState(() {
+        albumSortOption = widget.initialSortMode;
+        albumSortIsReverse = widget.initialIsReverse;
+      });
+    }
+  }
+
+  Future<void> onMenuTapped(AlbumSortMode sortMode) async {
     final selected = albumSortOption == sortMode;
     // Switch direction
     if (selected) {
@@ -240,7 +288,7 @@ class _SortButtonState extends ConsumerState<_SortButton> {
         padding: const WidgetStatePropertyAll(EdgeInsets.all(4)),
       ),
       consumeOutsideTap: true,
-      menuChildren: RemoteAlbumSortMode.values
+      menuChildren: AlbumSortMode.values
           .map(
             (sortMode) => MenuItemButton(
               leadingIcon: albumSortOption == sortMode
@@ -269,7 +317,7 @@ class _SortButtonState extends ConsumerState<_SortButton> {
                 ),
               ),
               child: Text(
-                sortMode.key.t(context: context),
+                sortMode.label.t(context: context),
                 style: context.textTheme.titleSmall?.copyWith(
                   fontWeight: FontWeight.w600,
                   color: albumSortOption == sortMode
@@ -298,7 +346,7 @@ class _SortButtonState extends ConsumerState<_SortButton> {
                     : const Icon(Icons.keyboard_arrow_up_rounded),
               ),
               Text(
-                albumSortOption.key.t(context: context),
+                albumSortOption.label.t(context: context),
                 style: context.textTheme.bodyLarge?.copyWith(
                   fontWeight: FontWeight.w500,
                   color: context.colorScheme.onSurface.withAlpha(225),
@@ -465,6 +513,8 @@ class _QuickSortAndViewMode extends StatelessWidget {
     required this.isGrid,
     required this.onToggleViewMode,
     required this.onSortChanged,
+    required this.currentSortMode,
+    required this.currentIsReverse,
     this.controller,
   });
 
@@ -472,6 +522,8 @@ class _QuickSortAndViewMode extends StatelessWidget {
   final VoidCallback onToggleViewMode;
   final MenuController? controller;
   final Future<void> Function(AlbumSort) onSortChanged;
+  final AlbumSortMode currentSortMode;
+  final bool currentIsReverse;
 
   @override
   Widget build(BuildContext context) {
@@ -481,7 +533,12 @@ class _QuickSortAndViewMode extends StatelessWidget {
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            _SortButton(onSortChanged, controller: controller),
+            _SortButton(
+              onSortChanged,
+              controller: controller,
+              initialSortMode: currentSortMode,
+              initialIsReverse: currentIsReverse,
+            ),
             IconButton(
               icon: Icon(isGrid ? Icons.view_list_outlined : Icons.grid_view_outlined, size: 24),
               onPressed: onToggleViewMode,

mobile/lib/providers/infrastructure/remote_album.provider.dart

@@ -5,6 +5,7 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/domain/services/remote_album.service.dart';
 import 'package:immich_mobile/models/albums/album_search.model.dart';
+import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 import 'package:logging/logging.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
@@ -70,7 +71,7 @@ class RemoteAlbumNotifier extends Notifier<RemoteAlbumState> {
 
   Future<List<RemoteAlbum>> sortAlbums(
     List<RemoteAlbum> albums,
-    RemoteAlbumSortMode sortMode, {
+    AlbumSortMode sortMode, {
     bool isReverse = false,
   }) async {
     return await _remoteAlbumService.sortAlbums(albums, sortMode, isReverse: isReverse);

mobile/lib/services/app_settings.service.dart

@@ -51,9 +51,10 @@ enum AppSettingsEnum<T> {
   enableBackup<bool>(StoreKey.enableBackup, null, false),
   useCellularForUploadVideos<bool>(StoreKey.useWifiForUploadVideos, null, false),
   useCellularForUploadPhotos<bool>(StoreKey.useWifiForUploadPhotos, null, false),
+  readonlyModeEnabled<bool>(StoreKey.readonlyModeEnabled, "readonlyModeEnabled", false),
+  albumGridView<bool>(StoreKey.albumGridView, "albumGridView", false),
   backupRequireCharging<bool>(StoreKey.backupRequireCharging, null, false),
-  backupTriggerDelay<int>(StoreKey.backupTriggerDelay, null, 30),
+  backupTriggerDelay<int>(StoreKey.backupTriggerDelay, null, 30);
-  readonlyModeEnabled<bool>(StoreKey.readonlyModeEnabled, "readonlyModeEnabled", false);
 
   const AppSettingsEnum(this.storeKey, this.hiveKey, this.defaultValue);
 

mobile/lib/utils/album_filter.utils.dart

@@ -1,5 +1,5 @@
-import 'package:immich_mobile/domain/services/remote_album.service.dart';
 import 'package:immich_mobile/models/albums/album_search.model.dart';
+import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 
 class AlbumFilter {
   String? userId;
@@ -14,12 +14,12 @@ class AlbumFilter {
 }
 
 class AlbumSort {
-  RemoteAlbumSortMode mode;
+  AlbumSortMode mode;
   bool isReverse;
 
   AlbumSort({required this.mode, this.isReverse = false});
 
-  AlbumSort copyWith({RemoteAlbumSortMode? mode, bool? isReverse}) {
+  AlbumSort copyWith({AlbumSortMode? mode, bool? isReverse}) {
     return AlbumSort(mode: mode ?? this.mode, isReverse: isReverse ?? this.isReverse);
   }
 }

mobile/test/domain/services/album.service_test.dart

@@ -2,6 +2,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/services/remote_album.service.dart';
 import 'package:immich_mobile/infrastructure/repositories/remote_album.repository.dart';
+import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
 import 'package:mocktail/mocktail.dart';
 
@@ -76,42 +77,42 @@ void main() {
     test('should sort correctly based on name', () async {
       final albums = [albumB, albumA];
 
-      final result = await sut.sortAlbums(albums, RemoteAlbumSortMode.title);
+      final result = await sut.sortAlbums(albums, AlbumSortMode.title);
       expect(result, [albumA, albumB]);
     });
 
     test('should sort correctly based on createdAt', () async {
       final albums = [albumB, albumA];
 
-      final result = await sut.sortAlbums(albums, RemoteAlbumSortMode.created);
+      final result = await sut.sortAlbums(albums, AlbumSortMode.created);
       expect(result, [albumA, albumB]);
     });
 
     test('should sort correctly based on updatedAt', () async {
       final albums = [albumB, albumA];
 
-      final result = await sut.sortAlbums(albums, RemoteAlbumSortMode.lastModified);
+      final result = await sut.sortAlbums(albums, AlbumSortMode.lastModified);
       expect(result, [albumA, albumB]);
     });
 
     test('should sort correctly based on assetCount', () async {
       final albums = [albumB, albumA];
 
-      final result = await sut.sortAlbums(albums, RemoteAlbumSortMode.assetCount);
+      final result = await sut.sortAlbums(albums, AlbumSortMode.assetCount);
       expect(result, [albumA, albumB]);
     });
 
     test('should sort correctly based on newestAssetTimestamp', () async {
       final albums = [albumB, albumA];
 
-      final result = await sut.sortAlbums(albums, RemoteAlbumSortMode.mostRecent);
+      final result = await sut.sortAlbums(albums, AlbumSortMode.mostRecent);
       expect(result, [albumA, albumB]);
     });
 
     test('should sort correctly based on oldestAssetTimestamp', () async {
       final albums = [albumB, albumA];
 
-      final result = await sut.sortAlbums(albums, RemoteAlbumSortMode.mostOldest);
+      final result = await sut.sortAlbums(albums, AlbumSortMode.mostOldest);
       expect(result, [albumB, albumA]);
     });
   });