Implement album feature on mobile (#420)

* Refactor sharing to album

* Added library page in the bottom navigation bar

* Refactor SharedAlbumService to album service

* Refactor apiProvider to its file

* Added image grid

* render album thumbnail

* Using the wrap to render thumbnail and album info better

* Navigate to album viewer

* After deletion, navigate to the respective page of the shared and non-shared album

* Correctly remove album in local state

* Refactor create album page

* Implemented create non-shared album

mobile/lib/modules/album/ui/album_action_outlined_button.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class AlbumActionOutlinedButton extends StatelessWidget {
+  final VoidCallback? onPressed;
+  final String labelText;
+  final IconData iconData;
+
+  const AlbumActionOutlinedButton({
+    Key? key,
+    this.onPressed,
+    required this.labelText,
+    required this.iconData,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(right: 8.0),
+      child: OutlinedButton.icon(
+        style: OutlinedButton.styleFrom(
+          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(25),
+          ),
+          side: const BorderSide(
+            width: 1,
+            color: Color.fromARGB(255, 215, 215, 215),
+          ),
+        ),
+        icon: Icon(iconData, size: 15),
+        label: Text(
+          labelText,
+          style: const TextStyle(
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+            color: Colors.black87,
+          ),
+        ),
+        onPressed: onPressed,
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/album_thumbnail_card.dart

@@ -0,0 +1,77 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hive/hive.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:openapi/api.dart';
+import 'package:transparent_image/transparent_image.dart';
+
+class AlbumThumbnailCard extends StatelessWidget {
+  const AlbumThumbnailCard({Key? key, required this.album}) : super(key: key);
+
+  final AlbumResponseDto album;
+
+  @override
+  Widget build(BuildContext context) {
+    var box = Hive.box(userInfoBox);
+
+    return GestureDetector(
+      onTap: () {
+        AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
+      },
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: 32.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(8),
+              child: FadeInImage(
+                width: MediaQuery.of(context).size.width / 2 - 18,
+                height: MediaQuery.of(context).size.width / 2 - 18,
+                fit: BoxFit.cover,
+                placeholder: MemoryImage(kTransparentImage),
+                image: NetworkImage(
+                  '${box.get(serverEndpointKey)}/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG',
+                  headers: {
+                    "Authorization": "Bearer ${box.get(accessTokenKey)}"
+                  },
+                ),
+                fadeInDuration: const Duration(milliseconds: 200),
+                fadeOutDuration: const Duration(milliseconds: 200),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: Text(
+                album.albumName,
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 12,
+                ),
+              ),
+            ),
+            Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  '${album.assets.length} item${album.assets.length > 1 ? 's' : ''}',
+                  style: const TextStyle(
+                    fontSize: 10,
+                  ),
+                ),
+                if (album.shared)
+                  const Text(
+                    ' · Shared',
+                    style: TextStyle(
+                      fontSize: 10,
+                    ),
+                  )
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/album_title_text_field.dart

@@ -0,0 +1,73 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/album_title.provider.dart';
+
+class AlbumTitleTextField extends ConsumerWidget {
+  const AlbumTitleTextField({
+    Key? key,
+    required this.isAlbumTitleEmpty,
+    required this.albumTitleTextFieldFocusNode,
+    required this.albumTitleController,
+    required this.isAlbumTitleTextFieldFocus,
+  }) : super(key: key);
+
+  final ValueNotifier<bool> isAlbumTitleEmpty;
+  final FocusNode albumTitleTextFieldFocusNode;
+  final TextEditingController albumTitleController;
+  final ValueNotifier<bool> isAlbumTitleTextFieldFocus;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return TextField(
+      onChanged: (v) {
+        if (v.isEmpty) {
+          isAlbumTitleEmpty.value = true;
+        } else {
+          isAlbumTitleEmpty.value = false;
+        }
+
+        ref.watch(albumTitleProvider.notifier).setAlbumTitle(v);
+      },
+      focusNode: albumTitleTextFieldFocusNode,
+      style: TextStyle(
+        fontSize: 28,
+        color: Colors.grey[700],
+        fontWeight: FontWeight.bold,
+      ),
+      controller: albumTitleController,
+      onTap: () {
+        isAlbumTitleTextFieldFocus.value = true;
+
+        if (albumTitleController.text == 'Untitled') {
+          albumTitleController.clear();
+        }
+      },
+      decoration: InputDecoration(
+        contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+        suffixIcon: !isAlbumTitleEmpty.value && isAlbumTitleTextFieldFocus.value
+            ? IconButton(
+                onPressed: () {
+                  albumTitleController.clear();
+                  isAlbumTitleEmpty.value = true;
+                },
+                icon: const Icon(Icons.cancel_rounded),
+                splashRadius: 10,
+              )
+            : null,
+        enabledBorder: OutlineInputBorder(
+          borderSide: const BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: const BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        hintText: 'share_add_title'.tr(),
+        focusColor: Colors.grey[300],
+        fillColor: Colors.grey[200],
+        filled: isAlbumTitleTextFieldFocus.value,
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/album_viewer_appbar.dart

@@ -0,0 +1,225 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/immich_colors.dart';
+import 'package:immich_mobile/modules/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/album/providers/album_viewer.provider.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
+import 'package:immich_mobile/modules/album/services/album.service.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
+import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
+import 'package:openapi/api.dart';
+
+class AlbumViewerAppbar extends HookConsumerWidget with PreferredSizeWidget {
+  const AlbumViewerAppbar({
+    Key? key,
+    required this.albumInfo,
+    required this.userId,
+    required this.albumId,
+  }) : super(key: key);
+
+  final AlbumResponseDto albumInfo;
+  final String userId;
+  final String albumId;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isMultiSelectionEnable =
+        ref.watch(assetSelectionProvider).isMultiselectEnable;
+    final selectedAssetsInAlbum =
+        ref.watch(assetSelectionProvider).selectedAssetsInAlbumViewer;
+    final newAlbumTitle = ref.watch(albumViewerProvider).editTitleText;
+    final isEditAlbum = ref.watch(albumViewerProvider).isEditAlbum;
+
+    void _onDeleteAlbumPressed(String albumId) async {
+      ImmichLoadingOverlayController.appLoader.show();
+
+      bool isSuccess =
+          await ref.watch(albumServiceProvider).deleteAlbum(albumId);
+
+      if (isSuccess) {
+        if (albumInfo.shared) {
+          ref.watch(sharedAlbumProvider.notifier).deleteAlbum(albumId);
+          AutoRouter.of(context)
+              .navigate(const TabControllerRoute(children: [SharingRoute()]));
+        } else {
+          ref.watch(albumProvider.notifier).deleteAlbum(albumId);
+          AutoRouter.of(context)
+              .navigate(const TabControllerRoute(children: [LibraryRoute()]));
+        }
+      } else {
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_delete".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+
+      ImmichLoadingOverlayController.appLoader.hide();
+    }
+
+    void _onLeaveAlbumPressed(String albumId) async {
+      ImmichLoadingOverlayController.appLoader.show();
+
+      bool isSuccess =
+          await ref.watch(sharedAlbumProvider.notifier).leaveAlbum(albumId);
+
+      if (isSuccess) {
+        AutoRouter.of(context)
+            .navigate(const TabControllerRoute(children: [SharingRoute()]));
+      } else {
+        Navigator.pop(context);
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_leave".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+
+      ImmichLoadingOverlayController.appLoader.hide();
+    }
+
+    void _onRemoveFromAlbumPressed(String albumId) async {
+      ImmichLoadingOverlayController.appLoader.show();
+
+      bool isSuccess =
+          await ref.watch(sharedAlbumProvider.notifier).removeAssetFromAlbum(
+                albumId,
+                selectedAssetsInAlbum.map((a) => a.id).toList(),
+              );
+
+      if (isSuccess) {
+        Navigator.pop(context);
+        ref.watch(assetSelectionProvider.notifier).disableMultiselection();
+        ref.refresh(sharedAlbumDetailProvider(albumId));
+      } else {
+        Navigator.pop(context);
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_remove".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+
+      ImmichLoadingOverlayController.appLoader.hide();
+    }
+
+    _buildBottomSheetActionButton() {
+      if (isMultiSelectionEnable) {
+        if (albumInfo.ownerId == userId) {
+          return ListTile(
+            leading: const Icon(Icons.delete_sweep_rounded),
+            title: const Text(
+              'album_viewer_appbar_share_remove',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ).tr(),
+            onTap: () => _onRemoveFromAlbumPressed(albumId),
+          );
+        } else {
+          return const SizedBox();
+        }
+      } else {
+        if (albumInfo.ownerId == userId) {
+          return ListTile(
+            leading: const Icon(Icons.delete_forever_rounded),
+            title: const Text(
+              'album_viewer_appbar_share_delete',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ).tr(),
+            onTap: () => _onDeleteAlbumPressed(albumId),
+          );
+        } else {
+          return ListTile(
+            leading: const Icon(Icons.person_remove_rounded),
+            title: const Text(
+              'album_viewer_appbar_share_leave',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ).tr(),
+            onTap: () => _onLeaveAlbumPressed(albumId),
+          );
+        }
+      }
+    }
+
+    void _buildBottomSheet() {
+      showModalBottomSheet(
+        backgroundColor: immichBackgroundColor,
+        isScrollControlled: false,
+        context: context,
+        builder: (context) {
+          return SafeArea(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                _buildBottomSheetActionButton(),
+              ],
+            ),
+          );
+        },
+      );
+    }
+
+    _buildLeadingButton() {
+      if (isMultiSelectionEnable) {
+        return IconButton(
+          onPressed: () => ref
+              .watch(assetSelectionProvider.notifier)
+              .disableMultiselection(),
+          icon: const Icon(Icons.close_rounded),
+          splashRadius: 25,
+        );
+      } else if (isEditAlbum) {
+        return IconButton(
+          onPressed: () async {
+            bool isSuccess = await ref
+                .watch(albumViewerProvider.notifier)
+                .changeAlbumTitle(albumId, userId, newAlbumTitle);
+
+            if (!isSuccess) {
+              ImmichToast.show(
+                context: context,
+                msg: "album_viewer_appbar_share_err_title".tr(),
+                gravity: ToastGravity.BOTTOM,
+                toastType: ToastType.error,
+              );
+            }
+          },
+          icon: const Icon(Icons.check_rounded),
+          splashRadius: 25,
+        );
+      } else {
+        return IconButton(
+          onPressed: () async => await AutoRouter.of(context).pop(),
+          icon: const Icon(Icons.arrow_back_ios_rounded),
+          splashRadius: 25,
+        );
+      }
+    }
+
+    return AppBar(
+      elevation: 0,
+      leading: _buildLeadingButton(),
+      title: isMultiSelectionEnable
+          ? Text('${selectedAssetsInAlbum.length}')
+          : null,
+      centerTitle: false,
+      actions: [
+        IconButton(
+          splashRadius: 25,
+          onPressed: _buildBottomSheet,
+          icon: const Icon(Icons.more_horiz_rounded),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}

mobile/lib/modules/album/ui/album_viewer_editable_title.dart

@@ -0,0 +1,87 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/album_viewer.provider.dart';
+import 'package:openapi/api.dart';
+
+class AlbumViewerEditableTitle extends HookConsumerWidget {
+  final AlbumResponseDto albumInfo;
+  final FocusNode titleFocusNode;
+  const AlbumViewerEditableTitle({
+    Key? key,
+    required this.albumInfo,
+    required this.titleFocusNode,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final titleTextEditController =
+        useTextEditingController(text: albumInfo.albumName);
+
+    void onFocusModeChange() {
+      if (!titleFocusNode.hasFocus && titleTextEditController.text.isEmpty) {
+        ref.watch(albumViewerProvider.notifier).setEditTitleText("Untitled");
+        titleTextEditController.text = "Untitled";
+      }
+    }
+
+    useEffect(
+      () {
+        titleFocusNode.addListener(onFocusModeChange);
+        return () {
+          titleFocusNode.removeListener(onFocusModeChange);
+        };
+      },
+      [],
+    );
+
+    return TextField(
+      onChanged: (value) {
+        if (value.isEmpty) {
+        } else {
+          ref.watch(albumViewerProvider.notifier).setEditTitleText(value);
+        }
+      },
+      focusNode: titleFocusNode,
+      style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+      controller: titleTextEditController,
+      onTap: () {
+        FocusScope.of(context).requestFocus(titleFocusNode);
+
+        ref
+            .watch(albumViewerProvider.notifier)
+            .setEditTitleText(albumInfo.albumName);
+        ref.watch(albumViewerProvider.notifier).enableEditAlbum();
+
+        if (titleTextEditController.text == 'Untitled') {
+          titleTextEditController.clear();
+        }
+      },
+      decoration: InputDecoration(
+        contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+        suffixIcon: titleFocusNode.hasFocus
+            ? IconButton(
+                onPressed: () {
+                  titleTextEditController.clear();
+                },
+                icon: const Icon(Icons.cancel_rounded),
+                splashRadius: 10,
+              )
+            : null,
+        enabledBorder: OutlineInputBorder(
+          borderSide: const BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: const BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        focusColor: Colors.grey[300],
+        fillColor: Colors.grey[200],
+        filled: titleFocusNode.hasFocus,
+        hintText: 'share_add_title'.tr(),
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/album_viewer_thumbnail.dart

@@ -0,0 +1,184 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:openapi/api.dart';
+
+class AlbumViewerThumbnail extends HookConsumerWidget {
+  final AssetResponseDto asset;
+
+  const AlbumViewerThumbnail({Key? key, required this.asset}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final cacheKey = useState(1);
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl =
+        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
+    var deviceId = ref.watch(authenticationProvider).deviceId;
+    final selectedAssetsInAlbumViewer =
+        ref.watch(assetSelectionProvider).selectedAssetsInAlbumViewer;
+    final isMultiSelectionEnable =
+        ref.watch(assetSelectionProvider).isMultiselectEnable;
+
+    _viewAsset() {
+      if (asset.type == AssetTypeEnum.IMAGE) {
+        AutoRouter.of(context).push(
+          ImageViewerRoute(
+            imageUrl:
+                '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
+            heroTag: asset.id,
+            thumbnailUrl: thumbnailRequestUrl,
+            asset: asset,
+          ),
+        );
+      } else {
+        AutoRouter.of(context).push(
+          VideoViewerRoute(
+            videoUrl:
+                '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
+            asset: asset,
+          ),
+        );
+      }
+    }
+
+    BoxBorder drawBorderColor() {
+      if (selectedAssetsInAlbumViewer.contains(asset)) {
+        return Border.all(
+          color: Theme.of(context).primaryColorLight,
+          width: 10,
+        );
+      } else {
+        return const Border();
+      }
+    }
+
+    _enableMultiSelection() {
+      ref.watch(assetSelectionProvider.notifier).enableMultiselection();
+      ref
+          .watch(assetSelectionProvider.notifier)
+          .addAssetsInAlbumViewer([asset]);
+    }
+
+    _disableMultiSelection() {
+      ref.watch(assetSelectionProvider.notifier).disableMultiselection();
+    }
+
+    _buildVideoLabel() {
+      return Positioned(
+        top: 5,
+        right: 5,
+        child: Row(
+          children: [
+            Text(
+              asset.duration.toString().substring(0, 7),
+              style: const TextStyle(
+                color: Colors.white,
+                fontSize: 10,
+              ),
+            ),
+            const Icon(
+              Icons.play_circle_outline_rounded,
+              color: Colors.white,
+            ),
+          ],
+        ),
+      );
+    }
+
+    _buildAssetStoreLocationIcon() {
+      return Positioned(
+        right: 10,
+        bottom: 5,
+        child: Icon(
+          (deviceId != asset.deviceId)
+              ? Icons.cloud_done_outlined
+              : Icons.photo_library_rounded,
+          color: Colors.white,
+          size: 18,
+        ),
+      );
+    }
+
+    _buildAssetSelectionIcon() {
+      bool isSelected = selectedAssetsInAlbumViewer.contains(asset);
+
+      return Positioned(
+        left: 10,
+        top: 5,
+        child: isSelected
+            ? Icon(
+                Icons.check_circle_rounded,
+                color: Theme.of(context).primaryColor,
+              )
+            : const Icon(
+                Icons.check_circle_outline_rounded,
+                color: Colors.white,
+              ),
+      );
+    }
+
+    _buildThumbnailImage() {
+      return Container(
+        decoration: BoxDecoration(border: drawBorderColor()),
+        child: CachedNetworkImage(
+          cacheKey: "${asset.id}-${cacheKey.value}",
+          width: 300,
+          height: 300,
+          memCacheHeight: 200,
+          fit: BoxFit.cover,
+          imageUrl: thumbnailRequestUrl,
+          httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+          fadeInDuration: const Duration(milliseconds: 250),
+          progressIndicatorBuilder: (context, url, downloadProgress) =>
+              Transform.scale(
+            scale: 0.2,
+            child: CircularProgressIndicator(value: downloadProgress.progress),
+          ),
+          errorWidget: (context, url, error) {
+            return Icon(
+              Icons.image_not_supported_outlined,
+              color: Theme.of(context).primaryColor,
+            );
+          },
+        ),
+      );
+    }
+
+    _handleSelectionGesture() {
+      if (selectedAssetsInAlbumViewer.contains(asset)) {
+        ref
+            .watch(assetSelectionProvider.notifier)
+            .removeAssetsInAlbumViewer([asset]);
+
+        if (selectedAssetsInAlbumViewer.isEmpty) {
+          _disableMultiSelection();
+        }
+      } else {
+        ref
+            .watch(assetSelectionProvider.notifier)
+            .addAssetsInAlbumViewer([asset]);
+      }
+    }
+
+    return GestureDetector(
+      onTap: isMultiSelectionEnable ? _handleSelectionGesture : _viewAsset,
+      onLongPress: _enableMultiSelection,
+      child: Stack(
+        children: [
+          _buildThumbnailImage(),
+          _buildAssetStoreLocationIcon(),
+          if (asset.type != AssetTypeEnum.IMAGE) _buildVideoLabel(),
+          if (isMultiSelectionEnable) _buildAssetSelectionIcon(),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/asset_grid_by_month.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/ui/selection_thumbnail_image.dart';
+import 'package:openapi/api.dart';
+
+class AssetGridByMonth extends HookConsumerWidget {
+  final List<AssetResponseDto> assetGroup;
+  const AssetGridByMonth({Key? key, required this.assetGroup})
+      : super(key: key);
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SliverGrid(
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 4,
+        crossAxisSpacing: 5.0,
+        mainAxisSpacing: 5,
+      ),
+      delegate: SliverChildBuilderDelegate(
+        (BuildContext context, int index) {
+          return SelectionThumbnailImage(asset: assetGroup[index]);
+        },
+        childCount: assetGroup.length,
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/month_group_title.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:openapi/api.dart';
+
+class MonthGroupTitle extends HookConsumerWidget {
+  final String month;
+  final List<AssetResponseDto> assetGroup;
+
+  const MonthGroupTitle({
+    Key? key,
+    required this.month,
+    required this.assetGroup,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedDateGroup = ref.watch(assetSelectionProvider).selectedMonths;
+    final selectedAssets =
+        ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum;
+    final isAlbumExist = ref.watch(assetSelectionProvider).isAlbumExist;
+
+    _handleTitleIconClick() {
+      HapticFeedback.heavyImpact();
+
+      if (isAlbumExist) {
+        if (selectedDateGroup.contains(month)) {
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .removeAssetsInMonth(month, []);
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .removeSelectedAdditionalAssets(assetGroup);
+        } else {
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .addAllAssetsInMonth(month, []);
+
+          // Deep clone assetGroup
+          var assetGroupWithNewItems = [...assetGroup];
+
+          for (var selectedAsset in selectedAssets) {
+            assetGroupWithNewItems.removeWhere((a) => a.id == selectedAsset.id);
+          }
+
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .addAdditionalAssets(assetGroupWithNewItems);
+        }
+      } else {
+        if (selectedDateGroup.contains(month)) {
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .removeAssetsInMonth(month, assetGroup);
+        } else {
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .addAllAssetsInMonth(month, assetGroup);
+        }
+      }
+    }
+
+    _getSimplifiedMonth() {
+      var monthAndYear = month.split(',');
+      var yearText = monthAndYear[1].trim();
+      var monthText = monthAndYear[0].trim();
+      var currentYear = DateTime.now().year.toString();
+
+      if (yearText == currentYear) {
+        return monthText;
+      } else {
+        return month;
+      }
+    }
+
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.only(
+          top: 29.0,
+          bottom: 29.0,
+          left: 14.0,
+          right: 8.0,
+        ),
+        child: Row(
+          children: [
+            GestureDetector(
+              onTap: _handleTitleIconClick,
+              child: selectedDateGroup.contains(month)
+                  ? Icon(
+                      Icons.check_circle_rounded,
+                      color: Theme.of(context).primaryColor,
+                    )
+                  : const Icon(
+                      Icons.circle_outlined,
+                      color: Colors.grey,
+                    ),
+            ),
+            GestureDetector(
+              onTap: _handleTitleIconClick,
+              child: Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Text(
+                  _getSimplifiedMonth(),
+                  style: TextStyle(
+                    fontSize: 24,
+                    color: Theme.of(context).primaryColor,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/selection_thumbnail_image.dart

@@ -0,0 +1,171 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:openapi/api.dart';
+
+class SelectionThumbnailImage extends HookConsumerWidget {
+  final AssetResponseDto asset;
+
+  const SelectionThumbnailImage({Key? key, required this.asset})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final cacheKey = useState(1);
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl =
+        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
+    var selectedAsset =
+        ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum;
+    var newAssetsForAlbum =
+        ref.watch(assetSelectionProvider).selectedAdditionalAssetsForAlbum;
+    var isAlbumExist = ref.watch(assetSelectionProvider).isAlbumExist;
+
+    Widget _buildSelectionIcon(AssetResponseDto asset) {
+      var isSelected = selectedAsset.map((item) => item.id).contains(asset.id);
+      var isNewlySelected =
+          newAssetsForAlbum.map((item) => item.id).contains(asset.id);
+
+      if (isSelected && !isAlbumExist) {
+        return Icon(
+          Icons.check_circle,
+          color: Theme.of(context).primaryColor,
+        );
+      } else if (isSelected && isAlbumExist) {
+        return const Icon(
+          Icons.check_circle,
+          color: Color.fromARGB(255, 233, 233, 233),
+        );
+      } else if (isNewlySelected && isAlbumExist) {
+        return Icon(
+          Icons.check_circle,
+          color: Theme.of(context).primaryColor,
+        );
+      } else {
+        return const Icon(
+          Icons.circle_outlined,
+          color: Colors.white,
+        );
+      }
+    }
+
+    BoxBorder drawBorderColor() {
+      var isSelected = selectedAsset.map((item) => item.id).contains(asset.id);
+      var isNewlySelected =
+          newAssetsForAlbum.map((item) => item.id).contains(asset.id);
+
+      if (isSelected && !isAlbumExist) {
+        return Border.all(
+          color: Theme.of(context).primaryColorLight,
+          width: 10,
+        );
+      } else if (isSelected && isAlbumExist) {
+        return Border.all(
+          color: const Color.fromARGB(255, 190, 190, 190),
+          width: 10,
+        );
+      } else if (isNewlySelected && isAlbumExist) {
+        return Border.all(
+          color: Theme.of(context).primaryColorLight,
+          width: 10,
+        );
+      }
+      return const Border();
+    }
+
+    return GestureDetector(
+      onTap: () {
+        var isSelected =
+            selectedAsset.map((item) => item.id).contains(asset.id);
+        var isNewlySelected =
+            newAssetsForAlbum.map((item) => item.id).contains(asset.id);
+
+        if (isAlbumExist) {
+          // Operation for existing album
+          if (!isSelected) {
+            if (isNewlySelected) {
+              ref
+                  .watch(assetSelectionProvider.notifier)
+                  .removeSelectedAdditionalAssets([asset]);
+            } else {
+              ref
+                  .watch(assetSelectionProvider.notifier)
+                  .addAdditionalAssets([asset]);
+            }
+          }
+        } else {
+          // Operation for new album
+          if (isSelected) {
+            ref
+                .watch(assetSelectionProvider.notifier)
+                .removeSelectedNewAssets([asset]);
+          } else {
+            ref.watch(assetSelectionProvider.notifier).addNewAssets([asset]);
+          }
+        }
+      },
+      child: Stack(
+        children: [
+          Container(
+            decoration: BoxDecoration(border: drawBorderColor()),
+            child: CachedNetworkImage(
+              cacheKey: "${asset.id}-${cacheKey.value}",
+              width: 150,
+              height: 150,
+              memCacheHeight: asset.type == AssetTypeEnum.IMAGE ? 150 : 150,
+              fit: BoxFit.cover,
+              imageUrl: thumbnailRequestUrl,
+              httpHeaders: {
+                "Authorization": "Bearer ${box.get(accessTokenKey)}"
+              },
+              fadeInDuration: const Duration(milliseconds: 250),
+              progressIndicatorBuilder: (context, url, downloadProgress) =>
+                  Transform.scale(
+                scale: 0.2,
+                child:
+                    CircularProgressIndicator(value: downloadProgress.progress),
+              ),
+              errorWidget: (context, url, error) {
+                return Icon(
+                  Icons.image_not_supported_outlined,
+                  color: Theme.of(context).primaryColor,
+                );
+              },
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(3.0),
+            child: Align(
+              alignment: Alignment.topLeft,
+              child: _buildSelectionIcon(asset),
+            ),
+          ),
+          if (asset.type != AssetTypeEnum.IMAGE)
+            Positioned(
+              bottom: 5,
+              right: 5,
+              child: Row(
+                children: [
+                  Text(
+                    asset.duration.substring(0, 7),
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 10,
+                    ),
+                  ),
+                  const Icon(
+                    Icons.play_circle_outline_rounded,
+                    color: Colors.white,
+                  ),
+                ],
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/shared_album_thumbnail_image.dart

@@ -0,0 +1,55 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:openapi/api.dart';
+
+class SharedAlbumThumbnailImage extends HookConsumerWidget {
+  final AssetResponseDto asset;
+
+  const SharedAlbumThumbnailImage({Key? key, required this.asset})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final cacheKey = useState(1);
+
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl =
+        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
+
+    return GestureDetector(
+      onTap: () {
+        // debugPrint("View ${asset.id}");
+      },
+      child: Stack(
+        children: [
+          CachedNetworkImage(
+            cacheKey: "${asset.id}-${cacheKey.value}",
+            width: 500,
+            height: 500,
+            memCacheHeight: 500,
+            fit: BoxFit.cover,
+            imageUrl: thumbnailRequestUrl,
+            httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+            fadeInDuration: const Duration(milliseconds: 250),
+            progressIndicatorBuilder: (context, url, downloadProgress) =>
+                Transform.scale(
+              scale: 0.2,
+              child:
+                  CircularProgressIndicator(value: downloadProgress.progress),
+            ),
+            errorWidget: (context, url, error) {
+              return Icon(
+                Icons.image_not_supported_outlined,
+                color: Theme.of(context).primaryColor,
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/modules/album/ui/sharing_sliver_appbar.dart

@@ -0,0 +1,90 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class SharingSliverAppBar extends StatelessWidget {
+  const SharingSliverAppBar({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverAppBar(
+      centerTitle: true,
+      floating: false,
+      pinned: true,
+      snap: false,
+      automaticallyImplyLeading: false,
+      title: Text(
+        'IMMICH',
+        style: TextStyle(
+          fontFamily: 'SnowburstOne',
+          fontWeight: FontWeight.bold,
+          fontSize: 22,
+          color: Theme.of(context).primaryColor,
+        ),
+      ),
+      bottom: PreferredSize(
+        preferredSize: const Size.fromHeight(50.0),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 12.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.only(right: 4.0),
+                  child: TextButton.icon(
+                    style: ButtonStyle(
+                      backgroundColor: MaterialStateProperty.all(
+                        Theme.of(context).primaryColor.withAlpha(20),
+                      ),
+                      // foregroundColor: MaterialStateProperty.all(Colors.white),
+                    ),
+                    onPressed: () {
+                      AutoRouter.of(context)
+                          .push(CreateAlbumRoute(isSharedAlbum: true));
+                    },
+                    icon: const Icon(
+                      Icons.photo_album_outlined,
+                      size: 20,
+                    ),
+                    label: const Text(
+                      "sharing_silver_appbar_create_shared_album",
+                      style:
+                          TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
+                    ).tr(),
+                  ),
+                ),
+              ),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.only(left: 4.0),
+                  child: TextButton.icon(
+                    style: ButtonStyle(
+                      backgroundColor: MaterialStateProperty.all(
+                        Theme.of(context).primaryColor.withAlpha(20),
+                      ),
+                      // foregroundColor: MaterialStateProperty.all(Colors.white),
+                    ),
+                    onPressed: null,
+                    icon: const Icon(
+                      Icons.swap_horizontal_circle_outlined,
+                      size: 20,
+                    ),
+                    label: const Text(
+                      "sharing_silver_appbar_share_partner",
+                      style:
+                          TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
+                    ).tr(),
+                  ),
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}