feature(mobile): sync assets, albums & users to local database on device (#1759)

* feature(mobile): sync assets, albums & users to local database on device

* try to fix tests

* move DB sync operations to new SyncService

* clear db on user logout

* fix reason for endless loading timeline

* fix error when deleting album

* fix thumbnail of device albums

* add a few comments

* fix Hive box not open in album service when loading local assets

* adjust tests to int IDs

* fix bug: show all albums when Recent is selected

* update generated api

* reworked Recents album isAll handling

* guard against wrongly interleaved sync operations

* fix: timeline asset ordering (sort asset state by created at)

* fix: sort assets in albums by created at

mobile/lib/modules/album/views/album_viewer_page.dart

@@ -25,7 +25,7 @@ import 'package:immich_mobile/shared/ui/immich_sliver_persistent_app_bar_delegat
 import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
 
 class AlbumViewerPage extends HookConsumerWidget {
-  final String albumId;
+  final int albumId;
 
   const AlbumViewerPage({Key? key, required this.albumId}) : super(key: key);
 
@@ -101,7 +101,7 @@ class AlbumViewerPage extends HookConsumerWidget {
     Widget buildTitle(Album album) {
       return Padding(
         padding: const EdgeInsets.only(left: 8, right: 8, top: 16),
-        child: userId == album.ownerId
+        child: userId == album.ownerId && album.isRemote
             ? AlbumViewerEditableTitle(
                 album: album,
                 titleFocusNode: titleFocusNode,
@@ -122,9 +122,10 @@ class AlbumViewerPage extends HookConsumerWidget {
     Widget buildAlbumDateRange(Album album) {
       final DateTime startDate = album.assets.first.fileCreatedAt;
       final DateTime endDate = album.assets.last.fileCreatedAt; //Need default.
-      final String startDateText =
-          (startDate.year == endDate.year ? DateFormat.MMMd() : DateFormat.yMMMd())
-              .format(startDate);
+      final String startDateText = (startDate.year == endDate.year
+              ? DateFormat.MMMd()
+              : DateFormat.yMMMd())
+          .format(startDate);
       final String endDateText = DateFormat.yMMMd().format(endDate);
 
       return Padding(
@@ -188,7 +189,7 @@ class AlbumViewerPage extends HookConsumerWidget {
       final bool showStorageIndicator =
           appSettingService.getSetting(AppSettingsEnum.storageIndicator);
 
-      if (album.assets.isNotEmpty) {
+      if (album.sortedAssets.isNotEmpty) {
         return SliverPadding(
           padding: const EdgeInsets.only(top: 10.0),
           sliver: SliverGrid(
@@ -201,8 +202,8 @@ class AlbumViewerPage extends HookConsumerWidget {
             delegate: SliverChildBuilderDelegate(
               (BuildContext context, int index) {
                 return AlbumViewerThumbnail(
-                  asset: album.assets[index],
-                  assetList: album.assets,
+                  asset: album.sortedAssets[index],
+                  assetList: album.sortedAssets,
                   showStorageIndicator: showStorageIndicator,
                 );
               },
@@ -267,17 +268,18 @@ class AlbumViewerPage extends HookConsumerWidget {
               controller: scrollController,
               slivers: [
                 buildHeader(album),
-                SliverPersistentHeader(
-                  pinned: true,
-                  delegate: ImmichSliverPersistentAppBarDelegate(
-                    minHeight: 50,
-                    maxHeight: 50,
-                    child: Container(
-                      color: Theme.of(context).scaffoldBackgroundColor,
-                      child: buildControlButton(album),
+                if (album.isRemote)
+                  SliverPersistentHeader(
+                    pinned: true,
+                    delegate: ImmichSliverPersistentAppBarDelegate(
+                      minHeight: 50,
+                      maxHeight: 50,
+                      child: Container(
+                        color: Theme.of(context).scaffoldBackgroundColor,
+                        child: buildControlButton(album),
+                      ),
                     ),
                   ),
-                ),
                 SliverSafeArea(
                   sliver: buildImageGrid(album),
                 ),

mobile/lib/modules/album/views/library_page.dart

@@ -44,9 +44,13 @@ class LibraryPage extends HookConsumerWidget {
 
     List<Album> sortedAlbums() {
       if (selectedAlbumSortOrder.value == 0) {
-        return albums.sortedBy((album) => album.createdAt).reversed.toList();
+        return albums
+            .where((a) => a.isRemote)
+            .sortedBy((album) => album.createdAt)
+            .reversed
+            .toList();
       }
-      return albums.sortedBy((album) => album.name);
+      return albums.where((a) => a.isRemote).sortedBy((album) => album.name);
     }
 
     Widget buildSortButton() {
@@ -194,6 +198,8 @@ class LibraryPage extends HookConsumerWidget {
 
     final sorted = sortedAlbums();
 
+    final local = albums.where((a) => a.isLocal).toList();
+
     return Scaffold(
       appBar: buildAppBar(),
       body: CustomScrollView(
@@ -270,6 +276,47 @@ class LibraryPage extends HookConsumerWidget {
               ),
             ),
           ),
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.only(
+                top: 12.0,
+                left: 12.0,
+                right: 12.0,
+                bottom: 20.0,
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const Text(
+                    'library_page_device_albums',
+                    style: TextStyle(fontWeight: FontWeight.bold),
+                  ).tr(),
+                ],
+              ),
+            ),
+          ),
+          SliverPadding(
+            padding: const EdgeInsets.all(12.0),
+            sliver: SliverGrid(
+              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+                maxCrossAxisExtent: 250,
+                mainAxisSpacing: 12,
+                crossAxisSpacing: 12,
+                childAspectRatio: .7,
+              ),
+              delegate: SliverChildBuilderDelegate(
+                childCount: local.length,
+                (context, index) => AlbumThumbnailCard(
+                  album: local[index],
+                  onTap: () => AutoRouter.of(context).push(
+                    AlbumViewerRoute(
+                      albumId: local[index].id,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
         ],
       ),
     );

mobile/lib/modules/album/views/sharing_page.dart

@@ -1,23 +1,19 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
 import 'package:immich_mobile/modules/album/ui/sharing_sliver_appbar.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/models/album.dart';
-import 'package:immich_mobile/utils/image_url_builder.dart';
+import 'package:immich_mobile/shared/ui/immich_image.dart';
 
 class SharingPage extends HookConsumerWidget {
   const SharingPage({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var box = Hive.box(userInfoBox);
     final List<Album> sharedAlbums = ref.watch(sharedAlbumProvider);
 
     useEffect(
@@ -39,16 +35,10 @@ class SharingPage extends HookConsumerWidget {
                   const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
               leading: ClipRRect(
                 borderRadius: BorderRadius.circular(8),
-                child: CachedNetworkImage(
+                child: ImmichImage(
+                  album.thumbnail.value,
                   width: 60,
                   height: 60,
-                  fit: BoxFit.cover,
-                  imageUrl: getAlbumThumbnailUrl(album),
-                  cacheKey: getAlbumThumbNailCacheKey(album),
-                  httpHeaders: {
-                    "Authorization": "Bearer ${box.get(accessTokenKey)}"
-                  },
-                  fadeInDuration: const Duration(milliseconds: 200),
                 ),
               ),
               title: Text(