feat: expanded sliver app bar (#19827)

alextran1502 · shenlong-tanwen · web-flow · commit feff1899eeef · 2025-07-10T10:13:46.000-05:00
* use mutex * feat: cool app bar * animation * adapt to more pages * animation * better animation * fix: asset count * Revert "fix: asset count" This reverts commit 673a5b2. * fix: asset count * fix: shaky animation on Android * tunning * offset SizedBox to fix scroll jump on multiselect --------- Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
diff --git a/mobile/lib/domain/models/album/album.model.dart b/mobile/lib/domain/models/album/album.model.dart
@@ -11,7 +11,7 @@ enum AlbumUserRole {
 }
 
 // Model for an album stored in the server
-class Album {
+class RemoteAlbum {
   final String id;
   final String name;
   final String ownerId;
@@ -24,7 +24,7 @@ class Album {
   final int assetCount;
   final String ownerName;
 
-  const Album({
+  const RemoteAlbum({
     required this.id,
     required this.name,
     required this.ownerId,
@@ -57,7 +57,7 @@ class Album {
 
   @override
   bool operator ==(Object other) {
-    if (other is! Album) return false;
+    if (other is! RemoteAlbum) return false;
     if (identical(this, other)) return true;
     return id == other.id &&
         name == other.name &&
diff --git a/mobile/lib/domain/services/remote_album.service.dart b/mobile/lib/domain/services/remote_album.service.dart
@@ -8,26 +8,26 @@ class RemoteAlbumService {
 
   const RemoteAlbumService(this._repository);
 
-  Future<List<Album>> getAll() {
+  Future<List<RemoteAlbum>> getAll() {
     return _repository.getAll();
   }
 
-  List<Album> sortAlbums(
-    List<Album> albums,
+  List<RemoteAlbum> sortAlbums(
+    List<RemoteAlbum> albums,
     RemoteAlbumSortMode sortMode, {
     bool isReverse = false,
   }) {
     return sortMode.sortFn(albums, isReverse);
   }
 
-  List<Album> searchAlbums(
-    List<Album> albums,
+  List<RemoteAlbum> searchAlbums(
+    List<RemoteAlbum> albums,
     String query,
     String? userId, [
     QuickFilterMode filterMode = QuickFilterMode.all,
   ]) {
     final lowerQuery = query.toLowerCase();
-    List<Album> filtered = albums;
+    List<RemoteAlbum> filtered = albums;
 
     // Apply text search filter
     if (query.isNotEmpty) {
diff --git a/mobile/lib/domain/services/timeline.service.dart b/mobile/lib/domain/services/timeline.service.dart
@@ -210,6 +210,9 @@ class TimelineService {
   Future<void> preCacheAssets(int index) =>
       _mutex.run(() => _loadAssets(index, math.min(5, _totalAssets - index)));
 
+  BaseAsset getRandomAsset() =>
+      _buffer.elementAt(math.Random().nextInt(_buffer.length));
+
   BaseAsset getAsset(int index) {
     if (!hasRange(index, 1)) {
       throw RangeError(
diff --git a/mobile/lib/infrastructure/repositories/remote_album.repository.dart b/mobile/lib/infrastructure/repositories/remote_album.repository.dart
@@ -9,7 +9,9 @@ class DriftRemoteAlbumRepository extends DriftDatabaseRepository {
   final Drift _db;
   const DriftRemoteAlbumRepository(this._db) : super(_db);
 
-  Future<List<Album>> getAll({Set<SortRemoteAlbumsBy> sortBy = const {}}) {
+  Future<List<RemoteAlbum>> getAll({
+    Set<SortRemoteAlbumsBy> sortBy = const {},
+  }) {
     final assetCount = _db.remoteAlbumAssetEntity.assetId.count();
 
     final query = _db.remoteAlbumEntity.select().join([
@@ -59,8 +61,8 @@ class DriftRemoteAlbumRepository extends DriftDatabaseRepository {
 }
 
 extension on RemoteAlbumEntityData {
-  Album toDto({int assetCount = 0, required String ownerName}) {
-    return Album(
+  RemoteAlbum toDto({int assetCount = 0, required String ownerName}) {
+    return RemoteAlbum(
       id: id,
       name: name,
       ownerId: ownerId,
diff --git a/mobile/lib/presentation/pages/dev/drift_archive.page.dart b/mobile/lib/presentation/pages/dev/drift_archive.page.dart
@@ -1,9 +1,11 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
 
 @RoutePage()
 class DriftArchivePage extends StatelessWidget {
@@ -27,7 +29,12 @@ class DriftArchivePage extends StatelessWidget {
           },
         ),
       ],
-      child: const Timeline(),
+      child: Timeline(
+        appBar: MesmerizingSliverAppBar(
+          title: 'archive'.t(context: context),
+          icon: Icons.archive_outlined,
+        ),
+      ),
     );
   }
 }
diff --git a/mobile/lib/presentation/pages/dev/drift_favorite.page.dart b/mobile/lib/presentation/pages/dev/drift_favorite.page.dart
@@ -1,9 +1,11 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
 
 @RoutePage()
 class DriftFavoritePage extends StatelessWidget {
@@ -27,7 +29,12 @@ class DriftFavoritePage extends StatelessWidget {
           },
         ),
       ],
-      child: const Timeline(),
+      child: Timeline(
+        appBar: MesmerizingSliverAppBar(
+          title: 'favorites'.t(context: context),
+          icon: Icons.favorite_outline,
+        ),
+      ),
     );
   }
 }
diff --git a/mobile/lib/presentation/pages/dev/drift_local_album.page.dart b/mobile/lib/presentation/pages/dev/drift_local_album.page.dart
@@ -103,7 +103,7 @@ class _AlbumList extends ConsumerWidget {
                     ),
                   ),
                   onTap: () =>
-                      context.pushRoute(LocalTimelineRoute(albumId: album.id)),
+                      context.pushRoute(LocalTimelineRoute(album: album)),
                 ),
               );
             },
diff --git a/mobile/lib/presentation/pages/dev/drift_trash.page.dart b/mobile/lib/presentation/pages/dev/drift_trash.page.dart
@@ -1,6 +1,7 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
@@ -27,7 +28,16 @@ class DriftTrashPage extends StatelessWidget {
           },
         ),
       ],
-      child: const Timeline(),
+      child: Timeline(
+        appBar: SliverAppBar(
+          title: Text('trash'.t(context: context)),
+          floating: true,
+          snap: true,
+          pinned: true,
+          centerTitle: true,
+          elevation: 0,
+        ),
+      ),
     );
   }
 }
diff --git a/mobile/lib/presentation/pages/dev/local_timeline.page.dart b/mobile/lib/presentation/pages/dev/local_timeline.page.dart
@@ -1,29 +1,34 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/album/local_album.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
 
 @RoutePage()
 class LocalTimelinePage extends StatelessWidget {
-  final String albumId;
+  final LocalAlbum album;
 
-  const LocalTimelinePage({super.key, required this.albumId});
+  const LocalTimelinePage({super.key, required this.album});
 
   @override
   Widget build(BuildContext context) {
     return ProviderScope(
       overrides: [
         timelineServiceProvider.overrideWith(
           (ref) {
-            final timelineService =
-                ref.watch(timelineFactoryProvider).localAlbum(albumId: albumId);
+            final timelineService = ref
+                .watch(timelineFactoryProvider)
+                .localAlbum(albumId: album.id);
             ref.onDispose(timelineService.dispose);
             return timelineService;
           },
         ),
       ],
-      child: const Timeline(),
+      child: Timeline(
+        appBar: MesmerizingSliverAppBar(title: album.name),
+      ),
     );
   }
 }
diff --git a/mobile/lib/presentation/pages/dev/media_stat.page.dart b/mobile/lib/presentation/pages/dev/media_stat.page.dart
@@ -125,7 +125,7 @@ class LocalMediaSummaryPage extends StatelessWidget {
                         name: album.name,
                         countFuture: countFuture,
                         onTap: () => context.router.push(
-                          LocalTimelineRoute(albumId: album.id),
+                          LocalTimelineRoute(album: album),
                         ),
                       );
                     },
@@ -226,7 +226,7 @@ class RemoteMediaSummaryPage extends StatelessWidget {
                         name: album.name,
                         countFuture: countFuture,
                         onTap: () => context.router.push(
-                          RemoteTimelineRoute(albumId: album.id),
+                          RemoteTimelineRoute(album: album),
                         ),
                       );
                     },
diff --git a/mobile/lib/presentation/pages/dev/remote_timeline.page.dart b/mobile/lib/presentation/pages/dev/remote_timeline.page.dart
@@ -1,14 +1,16 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:flutter/widgets.dart';
+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/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
 
 @RoutePage()
 class RemoteTimelinePage extends StatelessWidget {
-  final String albumId;
+  final RemoteAlbum album;
 
-  const RemoteTimelinePage({super.key, required this.albumId});
+  const RemoteTimelinePage({super.key, required this.album});
 
   @override
   Widget build(BuildContext context) {
@@ -18,13 +20,18 @@ class RemoteTimelinePage extends StatelessWidget {
           (ref) {
             final timelineService = ref
                 .watch(timelineFactoryProvider)
-                .remoteAlbum(albumId: albumId);
+                .remoteAlbum(albumId: album.id);
             ref.onDispose(timelineService.dispose);
             return timelineService;
           },
         ),
       ],
-      child: const Timeline(),
+      child: Timeline(
+        appBar: MesmerizingSliverAppBar(
+          title: album.name,
+          icon: Icons.photo_album_outlined,
+        ),
+      ),
     );
   }
 }
diff --git a/mobile/lib/presentation/pages/drift_album.page.dart b/mobile/lib/presentation/pages/drift_album.page.dart
@@ -475,7 +475,7 @@ class _AlbumList extends StatelessWidget {
 
   final bool isLoading;
   final String? error;
-  final List<Album> albums;
+  final List<RemoteAlbum> albums;
   final String? userId;
 
   @override
@@ -555,7 +555,7 @@ class _AlbumList extends StatelessWidget {
                 ),
               ),
               onTap: () => context.router.push(
-                RemoteTimelineRoute(albumId: album.id),
+                RemoteTimelineRoute(album: album),
               ),
               leadingPadding: const EdgeInsets.only(
                 right: 16,
@@ -573,13 +573,24 @@ class _AlbumList extends StatelessWidget {
                         ),
                       ),
                     )
-                  : const SizedBox(
+                  : SizedBox(
                       width: 80,
                       height: 80,
-                      child: Icon(
-                        Icons.photo_album_rounded,
-                        size: 40,
-                        color: Colors.grey,
+                      child: Container(
+                        decoration: BoxDecoration(
+                          color: context.colorScheme.surfaceContainer,
+                          borderRadius:
+                              const BorderRadius.all(Radius.circular(16)),
+                          border: Border.all(
+                            color: context.colorScheme.outline.withAlpha(50),
+                            width: 1,
+                          ),
+                        ),
+                        child: const Icon(
+                          Icons.photo_album_rounded,
+                          size: 24,
+                          color: Colors.grey,
+                        ),
                       ),
                     ),
             ),
@@ -599,7 +610,7 @@ class _AlbumGrid extends StatelessWidget {
     required this.error,
   });
 
-  final List<Album> albums;
+  final List<RemoteAlbum> albums;
   final String? userId;
   final bool isLoading;
   final String? error;
@@ -674,14 +685,14 @@ class _GridAlbumCard extends StatelessWidget {
     required this.userId,
   });
 
-  final Album album;
+  final RemoteAlbum album;
   final String? userId;
 
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: () => context.router.push(
-        RemoteTimelineRoute(albumId: album.id),
+        RemoteTimelineRoute(album: album),
       ),
       child: Card(
         elevation: 0,
diff --git a/mobile/lib/presentation/pages/drift_library.page.dart b/mobile/lib/presentation/pages/drift_library.page.dart
@@ -27,7 +27,12 @@ class DriftLibraryPage extends ConsumerWidget {
     return const Scaffold(
       body: CustomScrollView(
         slivers: [
-          ImmichSliverAppBar(),
+          ImmichSliverAppBar(
+            snap: false,
+            floating: false,
+            pinned: true,
+            showUploadButton: false,
+          ),
           _ActionButtonGrid(),
           _CollectionCards(),
           _QuickAccessButtonList(),
diff --git a/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart b/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart
@@ -335,7 +335,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     final isDraggingDown = currentExtent < previousExtent;
     previousExtent = currentExtent;
     // Closes the bottom sheet if the user is dragging down
-    if (isDraggingDown && delta.extent < 0.5) {
+    if (isDraggingDown && delta.extent < 0.55) {
       if (dragInProgress) {
         blockGestures = true;
       }
diff --git a/mobile/lib/presentation/widgets/timeline/timeline.widget.dart b/mobile/lib/presentation/widgets/timeline/timeline.widget.dart
diff --git a/mobile/lib/providers/infrastructure/remote_album.provider.dart b/mobile/lib/providers/infrastructure/remote_album.provider.dart
diff --git a/mobile/lib/routing/router.dart b/mobile/lib/routing/router.dart
diff --git a/mobile/lib/routing/router.gr.dart b/mobile/lib/routing/router.gr.dart
diff --git a/mobile/lib/utils/remote_album.utils.dart b/mobile/lib/utils/remote_album.utils.dart
diff --git a/mobile/lib/widgets/common/immich_sliver_app_bar.dart b/mobile/lib/widgets/common/immich_sliver_app_bar.dart
diff --git a/mobile/lib/widgets/common/mesmerizing_sliver_app_bar.dart b/mobile/lib/widgets/common/mesmerizing_sliver_app_bar.dart
