feat(mobile): Library page rework (album sorting, favorites) (#1501)

* Add album sorting

* Change AppBar to match photos page behaviour

* Add buttons

* First crude implementation of the favorites page

* Clean up

* Add favorite button

* i18n

* Add star indicator to thumbnail

* Add favorite logic to separate provider and fix favorite behavior in album

* Review feedback (Add isFavorite variable)

* dev: style buttons

* dev: styled drop down button

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

mobile/lib/modules/favorite/providers/favorite_provider.dart

@@ -0,0 +1,52 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/providers/asset.provider.dart';
+
+class FavoriteSelectionNotifier extends StateNotifier<Set<String>> {
+  FavoriteSelectionNotifier(this.ref) : super({}) {
+    state = ref.watch(assetProvider).allAssets
+        .where((asset) => asset.isFavorite)
+        .map((asset) => asset.id)
+        .toSet();
+  }
+
+  final Ref ref;
+
+  void _setFavoriteForAssetId(String id, bool favorite) {
+    if (!favorite) {
+      state = state.difference({id});
+    } else {
+      state = state.union({id});
+    }
+  }
+
+  bool _isFavorite(String id) {
+    return state.contains(id);
+  }
+
+  Future<void> toggleFavorite(Asset asset) async {
+    if (!asset.isRemote) return; // TODO support local favorite assets
+
+    _setFavoriteForAssetId(asset.id, !_isFavorite(asset.id));
+
+    await ref.watch(assetProvider.notifier).toggleFavorite(
+      asset,
+      state.contains(asset.id),
+    );
+  }
+}
+
+final favoriteProvider =
+    StateNotifierProvider<FavoriteSelectionNotifier, Set<String>>((ref) {
+  return FavoriteSelectionNotifier(ref);
+});
+
+final favoriteAssetProvider = StateProvider((ref) {
+  final favorites = ref.watch(favoriteProvider);
+
+  return ref
+      .watch(assetProvider)
+      .allAssets
+      .where((element) => favorites.contains(element.id))
+      .toList();
+});

mobile/lib/modules/favorite/ui/favorite_image.dart

@@ -0,0 +1,36 @@
+
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/immich_image.dart';
+
+class FavoriteImage extends HookConsumerWidget {
+  final Asset asset;
+  final List<Asset> assets;
+
+  const FavoriteImage(this.asset, this.assets, {super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    void viewAsset() {
+      AutoRouter.of(context).push(
+        GalleryViewerRoute(
+          asset: asset,
+          assetList: assets,
+        ),
+      );
+    }
+
+    return GestureDetector(
+      onTap: viewAsset,
+      child: ImmichImage(
+        asset,
+        width: 300,
+        height: 300,
+      ),
+    );
+  }
+
+}

mobile/lib/modules/favorite/views/favorites_page.dart

@@ -0,0 +1,68 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/favorite/providers/favorite_provider.dart';
+import 'package:immich_mobile/modules/favorite/ui/favorite_image.dart';
+import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
+import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
+
+class FavoritesPage extends HookConsumerWidget {
+  const FavoritesPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    AppBar buildAppBar() {
+      return AppBar(
+        leading: IconButton(
+          onPressed: () => AutoRouter.of(context).pop(),
+          icon: const Icon(Icons.arrow_back_ios_rounded),
+        ),
+        centerTitle: true,
+        automaticallyImplyLeading: false,
+        title: const Text(
+          'favorites_page_title',
+          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+        ).tr(),
+      );
+    }
+
+    Widget buildImageGrid() {
+      final appSettingService = ref.watch(appSettingsServiceProvider);
+
+      if (ref.watch(favoriteAssetProvider).isNotEmpty) {
+        return SliverPadding(
+          padding: const EdgeInsets.only(top: 10.0),
+          sliver: SliverGrid(
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount:
+                  appSettingService.getSetting(AppSettingsEnum.tilesPerRow),
+              crossAxisSpacing: 5.0,
+              mainAxisSpacing: 5,
+            ),
+            delegate: SliverChildBuilderDelegate(
+              (
+                BuildContext context,
+                int index,
+              ) {
+                return FavoriteImage(
+                  ref.watch(favoriteAssetProvider)[index],
+                  ref.watch(favoriteAssetProvider),
+                );
+              },
+              childCount: ref.watch(favoriteAssetProvider).length,
+            ),
+          ),
+        );
+      }
+      return const SliverToBoxAdapter();
+    }
+
+    return Scaffold(
+      appBar: buildAppBar(),
+      body: CustomScrollView(
+        slivers: [buildImageGrid()],
+      ),
+    );
+  }
+}