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>
2025-10-29 17:40:28 +00:00 · 2023-02-05 04:25:11 +01:00
parent 0048662182
commit bb0b2a1f53
16 changed files with 478 additions and 56 deletions
--- a/mobile/lib/modules/favorite/views/favorites_page.dart
+++ b/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()],
+      ),
+    );
+  }
+}