feat(mobile): scrollbar for album page (#25507)

mobile/lib/presentation/pages/drift_album.page.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_selector.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -17,36 +18,63 @@ class DriftAlbumsPage extends ConsumerStatefulWidget {
 }
 
 class _DriftAlbumsPageState extends ConsumerState<DriftAlbumsPage> {
+  final ScrollController _scrollController = ScrollController();
+
   Future<void> onRefresh() async {
     await ref.read(remoteAlbumProvider.notifier).refresh();
   }
 
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final albumCount = ref.watch(remoteAlbumProvider.select((state) => state.albums.length));
+    final showScrollbar = albumCount > 10;
+
+    final scrollView = CustomScrollView(
+      controller: _scrollController,
+      slivers: [
+        ImmichSliverAppBar(
+          snap: false,
+          floating: false,
+          pinned: true,
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.add_rounded, size: 28),
+              onPressed: () => context.pushRoute(const DriftCreateAlbumRoute()),
+            ),
+          ],
+          showUploadButton: false,
+        ),
+        AlbumSelector(
+          onAlbumSelected: (album) {
+            context.router.push(RemoteAlbumRoute(album: album));
+          },
+        ),
+      ],
+    );
+
     return RefreshIndicator(
       onRefresh: onRefresh,
       edgeOffset: 100,
-      child: CustomScrollView(
-        slivers: [
-          ImmichSliverAppBar(
-            snap: false,
-            floating: false,
-            pinned: true,
-            actions: [
-              IconButton(
-                icon: const Icon(Icons.add_rounded, size: 28),
-                onPressed: () => context.pushRoute(const DriftCreateAlbumRoute()),
-              ),
-            ],
-            showUploadButton: false,
-          ),
-          AlbumSelector(
-            onAlbumSelected: (album) {
-              context.router.push(RemoteAlbumRoute(album: album));
-            },
-          ),
-        ],
-      ),
+      child: showScrollbar
+          ? RawScrollbar(
+              controller: _scrollController,
+              interactive: true,
+              thickness: 8,
+              radius: const Radius.circular(4),
+              thumbVisibility: false,
+              thumbColor: context.colorScheme.primary,
+              crossAxisMargin: 4,
+              mainAxisMargin: 60,
+              minThumbLength: 40,
+              child: scrollView,
+            )
+          : scrollView,
     );
   }
 }

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

@@ -138,6 +138,10 @@ class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
         .read(remoteAlbumProvider.notifier)
         .sortAlbums(ref.read(remoteAlbumProvider).albums, sort.mode, isReverse: sort.isReverse);
 
+    if (!mounted) {
+      return;
+    }
+
     setState(() {
       sortedAlbums = sorted;
     });
@@ -149,6 +153,10 @@ class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
 
   Future<void> filterAlbums() async {
     if (filter.query == null) {
+      if (!mounted) {
+        return;
+      }
+
       setState(() {
         shownAlbums = sortedAlbums;
       });
@@ -160,6 +168,10 @@ class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
         .read(remoteAlbumProvider.notifier)
         .searchAlbums(sortedAlbums, filter.query!, filter.userId, filter.mode);
 
+    if (!mounted) {
+      return;
+    }
+
     setState(() {
       shownAlbums = filteredAlbums;
     });