Source Code added

mobile/lib/widgets/activities/activity_text_field.dart

@@ -0,0 +1,85 @@
+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/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/activity.provider.dart';
+import 'package:immich_mobile/providers/album/current_album.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class ActivityTextField extends HookConsumerWidget {
+  final bool isEnabled;
+  final String? likeId;
+  final Function(String) onSubmit;
+
+  const ActivityTextField({required this.onSubmit, this.isEnabled = true, this.likeId, super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final album = ref.watch(currentAlbumProvider)!;
+    final asset = ref.watch(currentAssetProvider);
+    final activityNotifier = ref.read(albumActivityProvider(album.remoteId!, asset?.remoteId).notifier);
+    final user = ref.watch(currentUserProvider);
+    final inputController = useTextEditingController();
+    final inputFocusNode = useFocusNode();
+    final liked = likeId != null;
+
+    // Show keyboard immediately on activities open
+    useEffect(() {
+      inputFocusNode.requestFocus();
+      return null;
+    }, []);
+
+    // Pass text to callback and reset controller
+    void onEditingComplete() {
+      onSubmit(inputController.text);
+      inputController.clear();
+      inputFocusNode.unfocus();
+    }
+
+    Future<void> addLike() async {
+      await activityNotifier.addLike();
+    }
+
+    Future<void> removeLike() async {
+      if (liked) {
+        await activityNotifier.removeActivity(likeId!);
+      }
+    }
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 10),
+      child: TextField(
+        controller: inputController,
+        enabled: isEnabled,
+        focusNode: inputFocusNode,
+        textInputAction: TextInputAction.send,
+        autofocus: false,
+        decoration: InputDecoration(
+          border: InputBorder.none,
+          focusedBorder: InputBorder.none,
+          prefixIcon: user != null
+              ? Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 15),
+                  child: UserCircleAvatar(user: user, size: 30, radius: 15),
+                )
+              : null,
+          suffixIcon: Padding(
+            padding: const EdgeInsets.only(right: 10),
+            child: IconButton(
+              icon: Icon(liked ? Icons.thumb_up : Icons.thumb_up_off_alt),
+              onPressed: liked ? removeLike : addLike,
+            ),
+          ),
+          suffixIconColor: liked ? context.primaryColor : null,
+          hintText: !isEnabled ? 'shared_album_activities_input_disable'.tr() : 'say_something'.tr(),
+          hintStyle: TextStyle(fontWeight: FontWeight.normal, fontSize: 14, color: Colors.grey[600]),
+        ),
+        onEditingComplete: onEditingComplete,
+        onTapOutside: (_) => inputFocusNode.unfocus(),
+      ),
+    );
+  }
+}

mobile/lib/widgets/activities/activity_tile.dart

@@ -0,0 +1,113 @@
+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/extensions/datetime_extensions.dart';
+import 'package:immich_mobile/models/activities/activity.model.dart';
+import 'package:immich_mobile/providers/activity_service.provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class ActivityTile extends HookConsumerWidget {
+  final Activity activity;
+  final bool isBottomSheet;
+
+  const ActivityTile(this.activity, {super.key, this.isBottomSheet = false});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetProvider);
+    final isLike = activity.type == ActivityType.like;
+    // Asset thumbnail is displayed when we are accessing activities from the album page
+    // currentAssetProvider will not be set until we open the gallery viewer
+    final showAssetThumbnail = asset == null && activity.assetId != null && !isBottomSheet;
+
+    onTap() async {
+      final activityService = ref.read(activityServiceProvider);
+      final route = await activityService.buildAssetViewerRoute(activity.assetId!, ref);
+      if (route != null) {
+        await context.pushRoute(route);
+      }
+    }
+
+    return ListTile(
+      minVerticalPadding: 15,
+      leading: isLike
+          ? Container(
+              width: isBottomSheet ? 30 : 44,
+              alignment: Alignment.center,
+              child: Icon(Icons.thumb_up, color: context.primaryColor),
+            )
+          : isBottomSheet
+          ? UserCircleAvatar(user: activity.user, size: 30, radius: 15)
+          : UserCircleAvatar(user: activity.user),
+      title: _ActivityTitle(
+        userName: activity.user.name,
+        createdAt: activity.createdAt.timeAgo(),
+        leftAlign: isBottomSheet ? false : (isLike || showAssetThumbnail),
+      ),
+      // No subtitle for like, so center title
+      titleAlignment: !isLike ? ListTileTitleAlignment.top : ListTileTitleAlignment.center,
+      trailing: showAssetThumbnail ? _ActivityAssetThumbnail(activity.assetId!, onTap) : null,
+      subtitle: !isLike ? Text(activity.comment!) : null,
+    );
+  }
+}
+
+class _ActivityTitle extends StatelessWidget {
+  final String userName;
+  final String createdAt;
+  final bool leftAlign;
+
+  const _ActivityTitle({required this.userName, required this.createdAt, required this.leftAlign});
+
+  @override
+  Widget build(BuildContext context) {
+    final textColor = context.isDarkTheme ? Colors.white : Colors.black;
+    final textStyle = context.textTheme.bodyMedium?.copyWith(color: textColor.withValues(alpha: 0.6));
+
+    return Row(
+      mainAxisAlignment: leftAlign ? MainAxisAlignment.start : MainAxisAlignment.spaceBetween,
+      mainAxisSize: leftAlign ? MainAxisSize.min : MainAxisSize.max,
+      children: [
+        Text(userName, style: textStyle, overflow: TextOverflow.ellipsis),
+        if (leftAlign) Text(" • ", style: textStyle),
+        Expanded(
+          child: Text(
+            createdAt,
+            style: textStyle,
+            overflow: TextOverflow.ellipsis,
+            textAlign: leftAlign ? TextAlign.left : TextAlign.right,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ActivityAssetThumbnail extends StatelessWidget {
+  final String assetId;
+  final GestureTapCallback? onTap;
+
+  const _ActivityAssetThumbnail(this.assetId, this.onTap);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        width: 40,
+        height: 30,
+        decoration: BoxDecoration(
+          borderRadius: const BorderRadius.all(Radius.circular(4)),
+          image: DecorationImage(
+            image: ImmichRemoteThumbnailProvider(assetId: assetId),
+            fit: BoxFit.cover,
+          ),
+        ),
+        child: const SizedBox.shrink(),
+      ),
+    );
+  }
+}

mobile/lib/widgets/activities/comment_bubble.dart

@@ -0,0 +1,143 @@
+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/extensions/datetime_extensions.dart';
+import 'package:immich_mobile/models/activities/activity.model.dart';
+import 'package:immich_mobile/providers/activity.provider.dart';
+import 'package:immich_mobile/providers/activity_service.provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/activities/dismissible_activity.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class CommentBubble extends ConsumerWidget {
+  final Activity activity;
+  final bool isAssetActivity;
+
+  const CommentBubble({super.key, required this.activity, this.isAssetActivity = false});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final user = ref.watch(currentUserProvider);
+    final album = ref.watch(currentRemoteAlbumProvider)!;
+    final isOwn = activity.user.id == user?.id;
+    final canDelete = isOwn || album.ownerId == user?.id;
+    final showThumbnail = !isAssetActivity && activity.assetId != null && activity.assetId!.isNotEmpty;
+    final isLike = activity.type == ActivityType.like;
+    final bgColor = isOwn ? context.colorScheme.primaryContainer : context.colorScheme.surfaceContainer;
+
+    final activityNotifier = ref.read(
+      albumActivityProvider(album.id, isAssetActivity ? activity.assetId : null).notifier,
+    );
+
+    Future<void> openAssetViewer() async {
+      final activityService = ref.read(activityServiceProvider);
+      final route = await activityService.buildAssetViewerRoute(activity.assetId!, ref);
+      if (route != null) await context.pushRoute(route);
+    }
+
+    // avatar (hidden for own messages)
+    Widget avatar = const SizedBox.shrink();
+    if (!isOwn) {
+      avatar = UserCircleAvatar(user: activity.user, size: 28, radius: 14);
+    }
+
+    // Thumbnail with tappable behavior and optional heart overlay
+    Widget? thumbnail;
+    if (showThumbnail) {
+      thumbnail = ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 150, maxHeight: 150),
+        child: Stack(
+          children: [
+            GestureDetector(
+              onTap: openAssetViewer,
+              child: ClipRRect(
+                borderRadius: const BorderRadius.all(Radius.circular(10)),
+                child: Image(
+                  image: ImmichRemoteThumbnailProvider(assetId: activity.assetId!),
+                  fit: BoxFit.cover,
+                ),
+              ),
+            ),
+            if (isLike)
+              Positioned(
+                right: 6,
+                bottom: 6,
+                child: Container(
+                  padding: const EdgeInsets.all(4),
+                  decoration: BoxDecoration(color: context.colorScheme.surfaceContainer, shape: BoxShape.circle),
+                  child: Icon(Icons.thumb_up, color: context.primaryColor, size: 18),
+                ),
+              ),
+          ],
+        ),
+      );
+    }
+
+    // Likes widget
+    Widget? likes;
+    if (isLike && !showThumbnail) {
+      likes = Container(
+        padding: const EdgeInsets.all(8),
+        decoration: BoxDecoration(color: context.colorScheme.surfaceContainer, shape: BoxShape.circle),
+        child: Icon(Icons.thumb_up, color: context.primaryColor, size: 18),
+      );
+    }
+
+    // Comment bubble, comment-only
+    Widget? commentBubble;
+    if (activity.comment != null && activity.comment!.isNotEmpty) {
+      commentBubble = ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.5),
+        child: Container(
+          padding: const EdgeInsets.all(10),
+          decoration: BoxDecoration(color: bgColor, borderRadius: const BorderRadius.all(Radius.circular(12))),
+          child: Text(
+            activity.comment ?? '',
+            style: context.textTheme.bodyLarge?.copyWith(color: context.colorScheme.onSurface),
+          ),
+        ),
+      );
+    }
+
+    // Combined content widgets
+    final List<Widget> contentChildren = [thumbnail, likes, commentBubble].whereType<Widget>().toList();
+
+    return DismissibleActivity(
+      onDismiss: canDelete ? (id) async => await activityNotifier.removeActivity(id) : null,
+      activity.id,
+      Align(
+        alignment: isOwn ? Alignment.centerRight : Alignment.centerLeft,
+        child: ConstrainedBox(
+          constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.86),
+          child: Container(
+            margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                if (!isOwn) ...[avatar, const SizedBox(width: 8)],
+                // Content column
+                Column(
+                  crossAxisAlignment: isOwn ? CrossAxisAlignment.end : CrossAxisAlignment.start,
+                  children: [
+                    ...contentChildren.map((w) => Padding(padding: const EdgeInsets.only(bottom: 8.0), child: w)),
+                    Text(
+                      '${activity.user.name} • ${activity.createdAt.timeAgo()}',
+                      style: context.textTheme.labelMedium?.copyWith(
+                        color: context.colorScheme.onSurface.withValues(alpha: 0.6),
+                      ),
+                    ),
+                  ],
+                ),
+                if (isOwn) const SizedBox(width: 8),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/activities/dismissible_activity.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/widgets/activities/activity_tile.dart';
+import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
+
+/// Wraps an [ActivityTile] and makes it dismissible
+class DismissibleActivity extends StatelessWidget {
+  final String activityId;
+  final Widget body;
+  final Function(String)? onDismiss;
+
+  const DismissibleActivity(this.activityId, this.body, {this.onDismiss, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    if (onDismiss == null) {
+      return body;
+    }
+
+    return Dismissible(
+      key: Key(activityId),
+      dismissThresholds: const {DismissDirection.horizontal: 0.7},
+      direction: DismissDirection.horizontal,
+      confirmDismiss: (direction) => onDismiss != null
+          ? showDialog(
+              context: context,
+              builder: (context) => ConfirmDialog(
+                onOk: () {},
+                title: "shared_album_activity_remove_title",
+                content: "shared_album_activity_remove_content",
+                ok: "delete",
+              ),
+            )
+          : Future.value(false),
+      onDismissed: (_) async => onDismiss?.call(activityId),
+      // LTR
+      background: _DismissBackground(withDeleteIcon: onDismiss != null),
+      // RTL
+      secondaryBackground: _DismissBackground(
+        withDeleteIcon: onDismiss != null,
+        alignment: AlignmentDirectional.centerEnd,
+      ),
+      child: body,
+    );
+  }
+}
+
+class _DismissBackground extends StatelessWidget {
+  final AlignmentDirectional alignment;
+  final bool withDeleteIcon;
+
+  const _DismissBackground({required this.withDeleteIcon, this.alignment = AlignmentDirectional.centerStart});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      alignment: alignment,
+      color: withDeleteIcon ? Colors.red[400] : Colors.grey[600],
+      child: withDeleteIcon
+          ? const Padding(
+              padding: EdgeInsets.all(15),
+              child: Icon(Icons.delete_sweep_rounded, color: Colors.black),
+            )
+          : null,
+    );
+  }
+}

mobile/lib/widgets/album/add_to_album_bottom_sheet.dart

@@ -0,0 +1,98 @@
+import 'package:auto_route/auto_route.dart';
+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/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/album/album.provider.dart';
+import 'package:immich_mobile/services/album.service.dart';
+import 'package:immich_mobile/widgets/album/add_to_album_sliverlist.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/entities/album.entity.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/widgets/common/drag_sheet.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class AddToAlbumBottomSheet extends HookConsumerWidget {
+  /// The asset to add to an album
+  final List<Asset> assets;
+
+  const AddToAlbumBottomSheet({super.key, required this.assets});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albums = ref.watch(albumProvider).where((a) => a.isRemote).toList();
+    final albumService = ref.watch(albumServiceProvider);
+
+    useEffect(() {
+      // Fetch album updates, e.g., cover image
+      ref.read(albumProvider.notifier).refreshRemoteAlbums();
+
+      return null;
+    }, []);
+
+    void addToAlbum(Album album) async {
+      final result = await albumService.addAssets(album, assets);
+
+      if (result != null) {
+        if (result.alreadyInAlbum.isNotEmpty) {
+          ImmichToast.show(
+            context: context,
+            msg: 'add_to_album_bottom_sheet_already_exists'.tr(namedArgs: {"album": album.name}),
+          );
+        } else {
+          ImmichToast.show(
+            context: context,
+            msg: 'add_to_album_bottom_sheet_added'.tr(namedArgs: {"album": album.name}),
+          );
+        }
+      }
+      context.pop();
+    }
+
+    return Card(
+      elevation: 0,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
+      ),
+      child: CustomScrollView(
+        slivers: [
+          SliverPadding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            sliver: SliverToBoxAdapter(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const SizedBox(height: 12),
+                  const Align(alignment: Alignment.center, child: CustomDraggingHandle()),
+                  const SizedBox(height: 12),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text('add_to_album'.tr(), style: context.textTheme.displayMedium),
+                      TextButton.icon(
+                        icon: Icon(Icons.add, color: context.primaryColor),
+                        label: Text('common_create_new_album'.tr(), style: TextStyle(color: context.primaryColor)),
+                        onPressed: () {
+                          context.pushRoute(CreateAlbumRoute(assets: assets));
+                        },
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ),
+          SliverPadding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            sliver: AddToAlbumSliverList(
+              albums: albums,
+              sharedAlbums: albums.where((a) => a.shared).toList(),
+              onAddToAlbum: addToAlbum,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/album/add_to_album_sliverlist.dart

@@ -0,0 +1,65 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
+import 'package:immich_mobile/widgets/album/album_thumbnail_listtile.dart';
+import 'package:immich_mobile/entities/album.entity.dart';
+
+class AddToAlbumSliverList extends HookConsumerWidget {
+  /// The asset to add to an album
+  final List<Album> albums;
+  final List<Album> sharedAlbums;
+  final void Function(Album) onAddToAlbum;
+  final bool enabled;
+
+  const AddToAlbumSliverList({
+    super.key,
+    required this.onAddToAlbum,
+    required this.albums,
+    required this.sharedAlbums,
+    this.enabled = true,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albumSortMode = ref.watch(albumSortByOptionsProvider);
+    final albumSortIsReverse = ref.watch(albumSortOrderProvider);
+    final sortedAlbums = albumSortMode.sortFn(albums, albumSortIsReverse);
+    final sortedSharedAlbums = albumSortMode.sortFn(sharedAlbums, albumSortIsReverse);
+
+    return SliverList(
+      delegate: SliverChildBuilderDelegate(childCount: albums.length + (sharedAlbums.isEmpty ? 0 : 1), (
+        context,
+        index,
+      ) {
+        // Build shared expander
+        if (index == 0 && sortedSharedAlbums.isNotEmpty) {
+          return Padding(
+            padding: const EdgeInsets.only(bottom: 8),
+            child: ExpansionTile(
+              title: Text('shared'.tr()),
+              tilePadding: const EdgeInsets.symmetric(horizontal: 10.0),
+              leading: const Icon(Icons.group),
+              children: [
+                ListView.builder(
+                  shrinkWrap: true,
+                  physics: const ClampingScrollPhysics(),
+                  itemCount: sortedSharedAlbums.length,
+                  itemBuilder: (context, index) => AlbumThumbnailListTile(
+                    album: sortedSharedAlbums[index],
+                    onTap: enabled ? () => onAddToAlbum(sortedSharedAlbums[index]) : () {},
+                  ),
+                ),
+              ],
+            ),
+          );
+        }
+
+        // Build albums list
+        final offset = index - (sharedAlbums.isNotEmpty ? 1 : 0);
+        final album = sortedAlbums[offset];
+        return AlbumThumbnailListTile(album: album, onTap: enabled ? () => onAddToAlbum(album) : () {});
+      }),
+    );
+  }
+}

mobile/lib/widgets/album/album_action_filled_button.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class AlbumActionFilledButton extends StatelessWidget {
+  final VoidCallback? onPressed;
+  final String labelText;
+  final IconData iconData;
+
+  const AlbumActionFilledButton({super.key, this.onPressed, required this.labelText, required this.iconData});
+
+  @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: 16),
+          shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
+          side: BorderSide(color: context.colorScheme.surfaceContainerHighest, width: 1),
+          backgroundColor: context.colorScheme.surfaceContainerHigh,
+        ),
+        icon: Icon(iconData, size: 18, color: context.primaryColor),
+        label: Text(labelText, style: context.textTheme.labelLarge?.copyWith()),
+        onPressed: onPressed,
+      ),
+    );
+  }
+}

mobile/lib/widgets/album/album_thumbnail_card.dart

@@ -0,0 +1,111 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/album.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
+
+class AlbumThumbnailCard extends ConsumerWidget {
+  final Function()? onTap;
+
+  /// Whether or not to show the owner of the album (or "Owned")
+  /// in the subtitle of the album
+  final bool showOwner;
+  final bool showTitle;
+
+  const AlbumThumbnailCard({super.key, required this.album, this.onTap, this.showOwner = false, this.showTitle = true});
+
+  final Album album;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        var cardSize = constraints.maxWidth;
+
+        buildEmptyThumbnail() {
+          return Container(
+            height: cardSize,
+            width: cardSize,
+            decoration: BoxDecoration(color: context.colorScheme.surfaceContainerHigh),
+            child: Center(
+              child: Icon(Icons.no_photography, size: cardSize * .15, color: context.colorScheme.primary),
+            ),
+          );
+        }
+
+        buildAlbumThumbnail() => ImmichThumbnail(asset: album.thumbnail.value, width: cardSize, height: cardSize);
+
+        buildAlbumTextRow() {
+          // Add the owner name to the subtitle
+          String? owner;
+          if (showOwner) {
+            if (album.ownerId == ref.read(currentUserProvider)?.id) {
+              owner = 'owned'.tr();
+            } else if (album.ownerName != null) {
+              owner = 'shared_by_user'.t(context: context, args: {'user': album.ownerName!});
+            }
+          }
+
+          return Text.rich(
+            TextSpan(
+              children: [
+                TextSpan(
+                  text: 'items_count'.t(context: context, args: {'count': album.assetCount}),
+                ),
+                if (owner != null) const TextSpan(text: ' • '),
+                if (owner != null) TextSpan(text: owner),
+              ],
+              style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+            ),
+            overflow: TextOverflow.fade,
+          );
+        }
+
+        return GestureDetector(
+          onTap: onTap,
+          child: Flex(
+            direction: Axis.vertical,
+            children: [
+              Flexible(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    SizedBox(
+                      width: cardSize,
+                      height: cardSize,
+                      child: ClipRRect(
+                        borderRadius: const BorderRadius.all(Radius.circular(20)),
+                        child: album.thumbnail.value == null ? buildEmptyThumbnail() : buildAlbumThumbnail(),
+                      ),
+                    ),
+                    if (showTitle) ...[
+                      Padding(
+                        padding: const EdgeInsets.only(top: 8.0),
+                        child: SizedBox(
+                          width: cardSize,
+                          child: Text(
+                            album.name,
+                            overflow: TextOverflow.ellipsis,
+                            style: context.textTheme.titleSmall?.copyWith(
+                              color: context.colorScheme.onSurface,
+                              fontWeight: FontWeight.w500,
+                            ),
+                          ),
+                        ),
+                      ),
+                      buildAlbumTextRow(),
+                    ],
+                  ],
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/widgets/album/album_thumbnail_listtile.dart

@@ -0,0 +1,96 @@
+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:immich_mobile/entities/album.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+import 'package:openapi/api.dart';
+
+class AlbumThumbnailListTile extends StatelessWidget {
+  const AlbumThumbnailListTile({super.key, required this.album, this.onTap});
+
+  final Album album;
+  final void Function()? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    var cardSize = 68.0;
+
+    buildEmptyThumbnail() {
+      return Container(
+        decoration: BoxDecoration(color: context.isDarkTheme ? Colors.grey[800] : Colors.grey[200]),
+        child: SizedBox(
+          height: cardSize,
+          width: cardSize,
+          child: const Center(child: Icon(Icons.no_photography)),
+        ),
+      );
+    }
+
+    buildAlbumThumbnail() {
+      return CachedNetworkImage(
+        width: cardSize,
+        height: cardSize,
+        fit: BoxFit.cover,
+        fadeInDuration: const Duration(milliseconds: 200),
+        imageUrl: getAlbumThumbnailUrl(album, type: AssetMediaSize.thumbnail),
+        httpHeaders: ApiService.getRequestHeaders(),
+        cacheKey: getAlbumThumbNailCacheKey(album, type: AssetMediaSize.thumbnail),
+        errorWidget: (context, url, error) => const Icon(Icons.image_not_supported_outlined),
+      );
+    }
+
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap:
+          onTap ??
+          () {
+            context.pushRoute(AlbumViewerRoute(albumId: album.id));
+          },
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: 12.0),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ClipRRect(
+              borderRadius: const BorderRadius.all(Radius.circular(8)),
+              child: album.thumbnail.value == null ? buildEmptyThumbnail() : buildAlbumThumbnail(),
+            ),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      album.name,
+                      overflow: TextOverflow.ellipsis,
+                      style: const TextStyle(fontWeight: FontWeight.bold),
+                    ),
+                    Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Text(
+                          'items_count'.t(context: context, args: {'count': album.assetCount}),
+                          style: const TextStyle(fontSize: 12),
+                        ),
+                        if (album.shared) ...[
+                          const Text(' • ', style: TextStyle(fontSize: 12)),
+                          Text('shared'.tr(), style: const TextStyle(fontSize: 12)),
+                        ],
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/album/album_title_text_field.dart

@@ -0,0 +1,74 @@
+import 'package:easy_localization/easy_localization.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/providers/album/album_title.provider.dart';
+
+class AlbumTitleTextField extends ConsumerWidget {
+  const AlbumTitleTextField({
+    super.key,
+    required this.isAlbumTitleEmpty,
+    required this.albumTitleTextFieldFocusNode,
+    required this.albumTitleController,
+    required this.isAlbumTitleTextFieldFocus,
+  });
+
+  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: context.colorScheme.onSurface, 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: Icon(Icons.cancel_rounded, color: context.primaryColor),
+                splashRadius: 10,
+              )
+            : null,
+        enabledBorder: const OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.all(Radius.circular(10)),
+        ),
+        focusedBorder: const OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.all(Radius.circular(10)),
+        ),
+        hintText: 'add_a_title'.tr(),
+        hintStyle: context.themeData.inputDecorationTheme.hintStyle?.copyWith(
+          fontSize: 28,
+          fontWeight: FontWeight.bold,
+        ),
+        focusColor: Colors.grey[300],
+        fillColor: context.colorScheme.surfaceContainerHigh,
+        filled: isAlbumTitleTextFieldFocus.value,
+      ),
+    );
+  }
+}

mobile/lib/widgets/album/album_viewer_appbar.dart

@@ -0,0 +1,307 @@
+import 'dart:async';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/activity_statistics.provider.dart';
+import 'package:immich_mobile/providers/album/album.provider.dart';
+import 'package:immich_mobile/providers/album/album_viewer.provider.dart';
+import 'package:immich_mobile/providers/album/current_album.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class AlbumViewerAppbar extends HookConsumerWidget implements PreferredSizeWidget {
+  const AlbumViewerAppbar({
+    super.key,
+    required this.userId,
+    required this.titleFocusNode,
+    required this.descriptionFocusNode,
+    this.onAddPhotos,
+    this.onAddUsers,
+    required this.onActivities,
+  });
+
+  final String userId;
+  final FocusNode titleFocusNode;
+  final FocusNode descriptionFocusNode;
+  final void Function()? onAddPhotos;
+  final void Function()? onAddUsers;
+  final void Function() onActivities;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albumState = useState(ref.read(currentAlbumProvider));
+    final album = albumState.value;
+    ref.listen(currentAlbumProvider, (_, newAlbum) {
+      final oldAlbum = albumState.value;
+      if (oldAlbum != null && newAlbum != null && oldAlbum.id == newAlbum.id) {
+        return;
+      }
+
+      albumState.value = newAlbum;
+    });
+
+    if (album == null) {
+      return const SizedBox();
+    }
+
+    final albumViewer = ref.watch(albumViewerProvider);
+    final newAlbumTitle = albumViewer.editTitleText;
+    final newAlbumDescription = albumViewer.editDescriptionText;
+    final isEditAlbum = albumViewer.isEditAlbum;
+
+    final comments = album.shared ? ref.watch(activityStatisticsProvider(album.remoteId!)) : 0;
+
+    deleteAlbum() async {
+      final bool success = await ref.watch(albumProvider.notifier).deleteAlbum(album);
+
+      unawaited(context.navigateTo(const TabControllerRoute(children: [AlbumsRoute()])));
+
+      if (!success) {
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_delete".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+    }
+
+    Future<void> onDeleteAlbumPressed() {
+      return showDialog<void>(
+        context: context,
+        barrierDismissible: false, // user must tap button!
+        builder: (BuildContext context) {
+          return AlertDialog(
+            title: const Text('delete_album').tr(),
+            content: const Text('album_viewer_appbar_delete_confirm').tr(),
+            actions: <Widget>[
+              TextButton(
+                onPressed: () => context.pop('Cancel'),
+                child: Text(
+                  'cancel',
+                  style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold),
+                ).tr(),
+              ),
+              TextButton(
+                onPressed: () {
+                  context.pop('Confirm');
+                  deleteAlbum();
+                },
+                child: Text(
+                  'confirm',
+                  style: TextStyle(fontWeight: FontWeight.bold, color: context.colorScheme.error),
+                ).tr(),
+              ),
+            ],
+          );
+        },
+      );
+    }
+
+    void onLeaveAlbumPressed() async {
+      bool isSuccess = await ref.watch(albumProvider.notifier).leaveAlbum(album);
+
+      if (isSuccess) {
+        unawaited(context.navigateTo(const TabControllerRoute(children: [AlbumsRoute()])));
+      } else {
+        context.pop();
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_leave".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+    }
+
+    buildBottomSheetActions() {
+      return [
+        album.ownerId == userId
+            ? ListTile(
+                leading: const Icon(Icons.delete_forever_rounded),
+                title: const Text('delete_album', style: TextStyle(fontWeight: FontWeight.w500)).tr(),
+                onTap: onDeleteAlbumPressed,
+              )
+            : ListTile(
+                leading: const Icon(Icons.person_remove_rounded),
+                title: const Text(
+                  'album_viewer_appbar_share_leave',
+                  style: TextStyle(fontWeight: FontWeight.w500),
+                ).tr(),
+                onTap: onLeaveAlbumPressed,
+              ),
+      ];
+      // }
+    }
+
+    void onSortOrderToggled() async {
+      final updatedAlbum = await ref.read(albumProvider.notifier).toggleSortOrder(album);
+
+      if (updatedAlbum == null) {
+        ImmichToast.show(
+          context: context,
+          msg: "error_change_sort_album".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+
+      context.pop();
+    }
+
+    void buildBottomSheet() {
+      final ownerActions = [
+        ListTile(
+          leading: const Icon(Icons.person_add_alt_rounded),
+          onTap: () {
+            context.pop();
+            final onAddUsers = this.onAddUsers;
+            if (onAddUsers != null) {
+              onAddUsers();
+            }
+          },
+          title: const Text("album_viewer_page_share_add_users", style: TextStyle(fontWeight: FontWeight.w500)).tr(),
+        ),
+        ListTile(
+          leading: const Icon(Icons.swap_vert_rounded),
+          onTap: onSortOrderToggled,
+          title: const Text("change_display_order", style: TextStyle(fontWeight: FontWeight.w500)).tr(),
+        ),
+        ListTile(
+          leading: const Icon(Icons.link_rounded),
+          onTap: () {
+            context.pushRoute(SharedLinkEditRoute(albumId: album.remoteId));
+            context.pop();
+          },
+          title: const Text("control_bottom_app_bar_share_link", style: TextStyle(fontWeight: FontWeight.w500)).tr(),
+        ),
+        ListTile(
+          leading: const Icon(Icons.settings_rounded),
+          onTap: () => context.navigateTo(const AlbumOptionsRoute()),
+          title: const Text("options", style: TextStyle(fontWeight: FontWeight.w500)).tr(),
+        ),
+      ];
+
+      final commonActions = [
+        ListTile(
+          leading: const Icon(Icons.add_photo_alternate_outlined),
+          onTap: () {
+            context.pop();
+            final onAddPhotos = this.onAddPhotos;
+            if (onAddPhotos != null) {
+              onAddPhotos();
+            }
+          },
+          title: const Text("add_photos", style: TextStyle(fontWeight: FontWeight.w500)).tr(),
+        ),
+      ];
+      showModalBottomSheet(
+        backgroundColor: context.scaffoldBackgroundColor,
+        isScrollControlled: false,
+        context: context,
+        builder: (context) {
+          return SafeArea(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 24.0),
+              child: ListView(
+                shrinkWrap: true,
+                children: [
+                  ...buildBottomSheetActions(),
+                  if (onAddPhotos != null) ...commonActions,
+                  if (onAddPhotos != null && userId == album.ownerId) ...ownerActions,
+                ],
+              ),
+            ),
+          );
+        },
+      );
+    }
+
+    Widget buildActivitiesButton() {
+      return IconButton(
+        onPressed: onActivities,
+        icon: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            const Icon(Icons.mode_comment_outlined),
+            if (comments != 0)
+              Padding(
+                padding: const EdgeInsets.only(left: 5),
+                child: Text(
+                  comments.toString(),
+                  style: TextStyle(fontWeight: FontWeight.bold, color: context.primaryColor),
+                ),
+              ),
+          ],
+        ),
+      );
+    }
+
+    buildLeadingButton() {
+      if (isEditAlbum) {
+        return IconButton(
+          onPressed: () async {
+            if (newAlbumTitle.isNotEmpty) {
+              bool isSuccess = await ref.watch(albumViewerProvider.notifier).changeAlbumTitle(album, newAlbumTitle);
+              if (!isSuccess) {
+                ImmichToast.show(
+                  context: context,
+                  msg: "album_viewer_appbar_share_err_title".tr(),
+                  gravity: ToastGravity.BOTTOM,
+                  toastType: ToastType.error,
+                );
+              }
+              titleFocusNode.unfocus();
+            } else if (newAlbumDescription.isNotEmpty) {
+              bool isSuccessDescription = await ref
+                  .watch(albumViewerProvider.notifier)
+                  .changeAlbumDescription(album, newAlbumDescription);
+              if (!isSuccessDescription) {
+                ImmichToast.show(
+                  context: context,
+                  msg: "album_viewer_appbar_share_err_description".tr(),
+                  gravity: ToastGravity.BOTTOM,
+                  toastType: ToastType.error,
+                );
+              }
+              descriptionFocusNode.unfocus();
+            } else {
+              titleFocusNode.unfocus();
+              descriptionFocusNode.unfocus();
+              ref.read(albumViewerProvider.notifier).disableEditAlbum();
+            }
+          },
+          icon: const Icon(Icons.check_rounded),
+          splashRadius: 25,
+        );
+      } else {
+        return IconButton(
+          onPressed: context.maybePop,
+          icon: const Icon(Icons.arrow_back_ios_rounded),
+          splashRadius: 25,
+        );
+      }
+    }
+
+    return AppBar(
+      elevation: 0,
+      backgroundColor: context.scaffoldBackgroundColor,
+      leading: buildLeadingButton(),
+      centerTitle: false,
+      actions: [
+        if (album.shared && (album.activityEnabled || comments != 0)) buildActivitiesButton(),
+        if (album.isRemote) ...[
+          IconButton(splashRadius: 25, onPressed: buildBottomSheet, icon: const Icon(Icons.more_horiz_rounded)),
+        ],
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}

mobile/lib/widgets/album/album_viewer_editable_description.dart

@@ -0,0 +1,82 @@
+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/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/album/album_viewer.provider.dart';
+
+class AlbumViewerEditableDescription extends HookConsumerWidget {
+  final String albumDescription;
+  final FocusNode descriptionFocusNode;
+  const AlbumViewerEditableDescription({super.key, required this.albumDescription, required this.descriptionFocusNode});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albumViewerState = ref.watch(albumViewerProvider);
+
+    final descriptionTextEditController = useTextEditingController(
+      text: albumViewerState.isEditAlbum && albumViewerState.editDescriptionText.isNotEmpty
+          ? albumViewerState.editDescriptionText
+          : albumDescription,
+    );
+
+    void onFocusModeChange() {
+      if (!descriptionFocusNode.hasFocus && descriptionTextEditController.text.isEmpty) {
+        ref.watch(albumViewerProvider.notifier).setEditDescriptionText("");
+        descriptionTextEditController.text = "";
+      }
+    }
+
+    useEffect(() {
+      descriptionFocusNode.addListener(onFocusModeChange);
+      return () {
+        descriptionFocusNode.removeListener(onFocusModeChange);
+      };
+    }, []);
+
+    return Material(
+      color: Colors.transparent,
+      child: TextField(
+        onChanged: (value) {
+          if (value.isEmpty) {
+          } else {
+            ref.watch(albumViewerProvider.notifier).setEditDescriptionText(value);
+          }
+        },
+        focusNode: descriptionFocusNode,
+        style: context.textTheme.bodyLarge,
+        maxLines: 3,
+        minLines: 1,
+        controller: descriptionTextEditController,
+        onTap: () {
+          context.focusScope.requestFocus(descriptionFocusNode);
+
+          ref.watch(albumViewerProvider.notifier).setEditDescriptionText(albumDescription);
+          ref.watch(albumViewerProvider.notifier).enableEditAlbum();
+
+          if (descriptionTextEditController.text == '') {
+            descriptionTextEditController.clear();
+          }
+        },
+        decoration: InputDecoration(
+          contentPadding: const EdgeInsets.all(8),
+          suffixIcon: descriptionFocusNode.hasFocus
+              ? IconButton(
+                  onPressed: () {
+                    descriptionTextEditController.clear();
+                  },
+                  icon: Icon(Icons.cancel_rounded, color: context.primaryColor),
+                  splashRadius: 10,
+                )
+              : null,
+          enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
+          focusedBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
+          focusColor: Colors.grey[300],
+          fillColor: context.scaffoldBackgroundColor,
+          filled: descriptionFocusNode.hasFocus,
+          hintText: 'add_a_description'.tr(),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/album/album_viewer_editable_title.dart

@@ -0,0 +1,81 @@
+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/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/album/album_viewer.provider.dart';
+
+class AlbumViewerEditableTitle extends HookConsumerWidget {
+  final String albumName;
+  final FocusNode titleFocusNode;
+  const AlbumViewerEditableTitle({super.key, required this.albumName, required this.titleFocusNode});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albumViewerState = ref.watch(albumViewerProvider);
+
+    final titleTextEditController = useTextEditingController(
+      text: albumViewerState.isEditAlbum && albumViewerState.editTitleText.isNotEmpty
+          ? albumViewerState.editTitleText
+          : 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 Material(
+      color: Colors.transparent,
+      child: TextField(
+        onChanged: (value) {
+          if (value.isEmpty) {
+          } else {
+            ref.watch(albumViewerProvider.notifier).setEditTitleText(value);
+          }
+        },
+        focusNode: titleFocusNode,
+        style: context.textTheme.headlineLarge?.copyWith(fontWeight: FontWeight.w700),
+        controller: titleTextEditController,
+        onTap: () {
+          context.focusScope.requestFocus(titleFocusNode);
+
+          ref.watch(albumViewerProvider.notifier).setEditTitleText(albumName);
+          ref.watch(albumViewerProvider.notifier).enableEditAlbum();
+
+          if (titleTextEditController.text == 'Untitled') {
+            titleTextEditController.clear();
+          }
+        },
+        decoration: InputDecoration(
+          contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 0),
+          suffixIcon: titleFocusNode.hasFocus
+              ? IconButton(
+                  onPressed: () {
+                    titleTextEditController.clear();
+                  },
+                  icon: Icon(Icons.cancel_rounded, color: context.primaryColor),
+                  splashRadius: 10,
+                )
+              : null,
+          enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
+          focusedBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
+          focusColor: Colors.grey[300],
+          fillColor: context.scaffoldBackgroundColor,
+          filled: titleFocusNode.hasFocus,
+          hintText: 'add_a_title'.tr(),
+          hintStyle: context.themeData.inputDecorationTheme.hintStyle?.copyWith(fontSize: 28),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/album/remote_album_shared_user_icons.dart

@@ -0,0 +1,47 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/remote_album.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class RemoteAlbumSharedUserIcons extends ConsumerWidget {
+  const RemoteAlbumSharedUserIcons({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currentAlbum = ref.watch(currentRemoteAlbumProvider);
+    if (currentAlbum == null) {
+      return const SizedBox();
+    }
+
+    final sharedUsersAsync = ref.watch(remoteAlbumSharedUsersProvider(currentAlbum.id));
+
+    return sharedUsersAsync.maybeWhen(
+      data: (sharedUsers) {
+        if (sharedUsers.isEmpty) {
+          return const SizedBox();
+        }
+
+        return GestureDetector(
+          onTap: () => context.pushRoute(DriftAlbumOptionsRoute(album: currentAlbum)),
+          child: SizedBox(
+            height: 50,
+            child: ListView.builder(
+              scrollDirection: Axis.horizontal,
+              itemBuilder: ((context, index) {
+                return Padding(
+                  padding: const EdgeInsets.only(right: 4.0),
+                  child: UserCircleAvatar(user: sharedUsers[index], radius: 18, size: 36, hasBorder: true),
+                );
+              }),
+              itemCount: sharedUsers.length,
+            ),
+          ),
+        );
+      },
+      orElse: () => const SizedBox(),
+    );
+  }
+}

mobile/lib/widgets/album/shared_album_thumbnail_image.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
+
+class SharedAlbumThumbnailImage extends HookConsumerWidget {
+  final Asset asset;
+
+  const SharedAlbumThumbnailImage({super.key, required this.asset});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return GestureDetector(
+      onTap: () {
+        // debugPrint("View ${asset.id}");
+      },
+      child: Stack(children: [ImmichThumbnail(asset: asset, width: 500, height: 500)]),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/asset_drag_region.dart

@@ -0,0 +1,207 @@
+// Based on https://stackoverflow.com/a/52625182
+
+import 'dart:async';
+
+import 'package:collection/collection.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+class AssetDragRegion extends StatefulWidget {
+  final Widget child;
+
+  final void Function(AssetIndex valueKey)? onStart;
+  final void Function(AssetIndex valueKey)? onAssetEnter;
+  final void Function()? onEnd;
+  final void Function()? onScrollStart;
+  final void Function(ScrollDirection direction)? onScroll;
+
+  const AssetDragRegion({
+    super.key,
+    required this.child,
+    this.onStart,
+    this.onAssetEnter,
+    this.onEnd,
+    this.onScrollStart,
+    this.onScroll,
+  });
+  @override
+  State createState() => _AssetDragRegionState();
+}
+
+class _AssetDragRegionState extends State<AssetDragRegion> {
+  late AssetIndex? assetUnderPointer;
+  late AssetIndex? anchorAsset;
+
+  // Scroll related state
+  static const double scrollOffset = 0.10;
+  double? topScrollOffset;
+  double? bottomScrollOffset;
+  Timer? scrollTimer;
+  late bool scrollNotified;
+
+  @override
+  void initState() {
+    super.initState();
+    assetUnderPointer = null;
+    anchorAsset = null;
+    scrollNotified = false;
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    topScrollOffset = null;
+    bottomScrollOffset = null;
+  }
+
+  @override
+  void dispose() {
+    scrollTimer?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return RawGestureDetector(
+      gestures: {
+        _CustomLongPressGestureRecognizer: GestureRecognizerFactoryWithHandlers<_CustomLongPressGestureRecognizer>(
+          () => _CustomLongPressGestureRecognizer(),
+          _registerCallbacks,
+        ),
+      },
+      child: widget.child,
+    );
+  }
+
+  void _registerCallbacks(_CustomLongPressGestureRecognizer recognizer) {
+    recognizer.onLongPressMoveUpdate = (details) => _onLongPressMove(details);
+    recognizer.onLongPressStart = (details) => _onLongPressStart(details);
+    recognizer.onLongPressUp = _onLongPressEnd;
+  }
+
+  AssetIndex? _getValueKeyAtPositon(Offset position) {
+    final box = context.findAncestorRenderObjectOfType<RenderBox>();
+    if (box == null) return null;
+
+    final hitTestResult = BoxHitTestResult();
+    final local = box.globalToLocal(position);
+    if (!box.hitTest(hitTestResult, position: local)) return null;
+
+    return (hitTestResult.path.firstWhereOrNull((hit) => hit.target is _AssetIndexProxy)?.target as _AssetIndexProxy?)
+        ?.index;
+  }
+
+  void _onLongPressStart(LongPressStartDetails event) {
+    /// Calculate widget height and scroll offset when long press starting instead of in [initState]
+    /// or [didChangeDependencies] as the grid might still be rendering into view to get the actual size
+    final height = context.size?.height;
+    if (height != null && (topScrollOffset == null || bottomScrollOffset == null)) {
+      topScrollOffset = height * scrollOffset;
+      bottomScrollOffset = height - topScrollOffset!;
+    }
+
+    final initialHit = _getValueKeyAtPositon(event.globalPosition);
+    anchorAsset = initialHit;
+    if (initialHit == null) return;
+
+    if (anchorAsset != null) {
+      widget.onStart?.call(anchorAsset!);
+    }
+  }
+
+  void _onLongPressEnd() {
+    scrollNotified = false;
+    scrollTimer?.cancel();
+    widget.onEnd?.call();
+  }
+
+  void _onLongPressMove(LongPressMoveUpdateDetails event) {
+    if (anchorAsset == null) return;
+    if (topScrollOffset == null || bottomScrollOffset == null) return;
+
+    final currentDy = event.localPosition.dy;
+
+    if (currentDy > bottomScrollOffset!) {
+      scrollTimer ??= Timer.periodic(
+        const Duration(milliseconds: 50),
+        (_) => widget.onScroll?.call(ScrollDirection.forward),
+      );
+    } else if (currentDy < topScrollOffset!) {
+      scrollTimer ??= Timer.periodic(
+        const Duration(milliseconds: 50),
+        (_) => widget.onScroll?.call(ScrollDirection.reverse),
+      );
+    } else {
+      scrollTimer?.cancel();
+      scrollTimer = null;
+    }
+
+    final currentlyTouchingAsset = _getValueKeyAtPositon(event.globalPosition);
+    if (currentlyTouchingAsset == null) return;
+
+    if (assetUnderPointer != currentlyTouchingAsset) {
+      if (!scrollNotified) {
+        scrollNotified = true;
+        widget.onScrollStart?.call();
+      }
+
+      widget.onAssetEnter?.call(currentlyTouchingAsset);
+      assetUnderPointer = currentlyTouchingAsset;
+    }
+  }
+}
+
+class _CustomLongPressGestureRecognizer extends LongPressGestureRecognizer {
+  @override
+  void rejectGesture(int pointer) {
+    acceptGesture(pointer);
+  }
+}
+
+class AssetIndexWrapper extends SingleChildRenderObjectWidget {
+  final int rowIndex;
+  final int sectionIndex;
+
+  const AssetIndexWrapper({required Widget super.child, required this.rowIndex, required this.sectionIndex, super.key});
+
+  @override
+  // ignore: library_private_types_in_public_api
+  _AssetIndexProxy createRenderObject(BuildContext context) {
+    return _AssetIndexProxy(
+      index: AssetIndex(rowIndex: rowIndex, sectionIndex: sectionIndex),
+    );
+  }
+
+  @override
+  void updateRenderObject(
+    BuildContext context,
+    // ignore: library_private_types_in_public_api
+    _AssetIndexProxy renderObject,
+  ) {
+    renderObject.index = AssetIndex(rowIndex: rowIndex, sectionIndex: sectionIndex);
+  }
+}
+
+class _AssetIndexProxy extends RenderProxyBox {
+  AssetIndex index;
+
+  _AssetIndexProxy({required this.index});
+}
+
+class AssetIndex {
+  final int rowIndex;
+  final int sectionIndex;
+
+  const AssetIndex({required this.rowIndex, required this.sectionIndex});
+
+  @override
+  bool operator ==(covariant AssetIndex other) {
+    if (identical(this, other)) return true;
+
+    return other.rowIndex == rowIndex && other.sectionIndex == sectionIndex;
+  }
+
+  @override
+  int get hashCode => rowIndex.hashCode ^ sectionIndex.hashCode;
+}

mobile/lib/widgets/asset_grid/asset_grid_data_structure.dart

@@ -0,0 +1,307 @@
+import 'dart:math';
+
+import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:isar/isar.dart';
+import 'package:logging/logging.dart';
+
+final log = Logger('AssetGridDataStructure');
+
+enum RenderAssetGridElementType { assets, assetRow, groupDividerTitle, monthTitle }
+
+class RenderAssetGridElement {
+  final RenderAssetGridElementType type;
+  final String? title;
+  final DateTime date;
+  final int count;
+  final int offset;
+  final int totalCount;
+
+  const RenderAssetGridElement(
+    this.type, {
+    this.title,
+    required this.date,
+    this.count = 0,
+    this.offset = 0,
+    this.totalCount = 0,
+  });
+}
+
+enum GroupAssetsBy { day, month, auto, none }
+
+class RenderList {
+  final List<RenderAssetGridElement> elements;
+  final List<Asset>? allAssets;
+  final QueryBuilder<Asset, Asset, QAfterSortBy>? query;
+  final int totalAssets;
+
+  /// reference to batch of assets loaded from DB with offset [_bufOffset]
+  List<Asset> _buf = [];
+
+  /// global offset of assets in [_buf]
+  int _bufOffset = 0;
+
+  RenderList(this.elements, this.query, this.allAssets) : totalAssets = allAssets?.length ?? query!.countSync();
+
+  bool get isEmpty => totalAssets == 0;
+
+  /// Loads the requested assets from the database to an internal buffer if not cached
+  /// and returns a slice of that buffer
+  List<Asset> loadAssets(int offset, int count) {
+    assert(offset >= 0);
+    assert(count > 0);
+    assert(offset + count <= totalAssets);
+    if (allAssets != null) {
+      // if we already loaded all assets (e.g. from search result)
+      // simply return the requested slice of that array
+      return allAssets!.slice(offset, offset + count);
+    } else if (query != null) {
+      // general case: we have the query to load assets via offset from the DB on demand
+      if (offset < _bufOffset || offset + count > _bufOffset + _buf.length) {
+        // the requested slice (offset:offset+count) is not contained in the cache buffer `_buf`
+        // thus, fill the buffer with a new batch of assets that at least contains the requested
+        // assets and some more
+
+        final bool forward = _bufOffset < offset;
+        // if the requested offset is greater than the cached offset, the user scrolls forward "down"
+        const batchSize = 256;
+        const oppositeSize = 64;
+
+        // make sure to load a meaningful amount of data (and not only the requested slice)
+        // otherwise, each call to [loadAssets] would result in DB call trashing performance
+        // fills small requests to [batchSize], adds some legroom into the opposite scroll direction for large requests
+        final len = max(batchSize, count + oppositeSize);
+        // when scrolling forward, start shortly before the requested offset...
+        // when scrolling backward, end shortly after the requested offset...
+        // ... to guard against the user scrolling in the other direction
+        // a tiny bit resulting in a another required load from the DB
+        final start = max(0, forward ? offset - oppositeSize : (len > batchSize ? offset : offset + count - len));
+        // load the calculated batch (start:start+len) from the DB and put it into the buffer
+        _buf = query!.offset(start).limit(len).findAllSync();
+        _bufOffset = start;
+      }
+      assert(_bufOffset <= offset);
+      assert(_bufOffset + _buf.length >= offset + count);
+      // return the requested slice from the buffer (we made sure before that the assets are loaded!)
+      return _buf.slice(offset - _bufOffset, offset - _bufOffset + count);
+    }
+    throw Exception("RenderList has neither assets nor query");
+  }
+
+  /// Returns the requested asset either from cached buffer or directly from the database
+  Asset loadAsset(int index) {
+    if (allAssets != null) {
+      // all assets are already loaded (e.g. from search result)
+      return allAssets![index];
+    } else if (query != null) {
+      // general case: we have the DB query to load asset(s) on demand
+      if (index >= _bufOffset && index < _bufOffset + _buf.length) {
+        // lucky case: the requested asset is already cached in the buffer!
+        return _buf[index - _bufOffset];
+      }
+      // request the asset from the database (not changing the buffer!)
+      final asset = query!.offset(index).findFirstSync();
+      if (asset == null) {
+        throw Exception("Asset at index $index does no longer exist in database");
+      }
+      return asset;
+    }
+    throw Exception("RenderList has neither assets nor query");
+  }
+
+  static Future<RenderList> fromQuery(QueryBuilder<Asset, Asset, QAfterSortBy> query, GroupAssetsBy groupBy) =>
+      _buildRenderList(null, query, groupBy);
+
+  static Future<RenderList> _buildRenderList(
+    List<Asset>? assets,
+    QueryBuilder<Asset, Asset, QAfterSortBy>? query,
+    GroupAssetsBy groupBy,
+  ) async {
+    final List<RenderAssetGridElement> elements = [];
+
+    const pageSize = 50000;
+    const sectionSize = 60; // divides evenly by 2,3,4,5,6
+
+    if (groupBy == GroupAssetsBy.none) {
+      final int total = assets?.length ?? query!.countSync();
+
+      final dateLoader = query != null ? DateBatchLoader(query: query, batchSize: 1000 * sectionSize) : null;
+
+      for (int i = 0; i < total; i += sectionSize) {
+        final date = assets != null ? assets[i].fileCreatedAt : await dateLoader?.getDate(i);
+
+        final int count = i + sectionSize > total ? total - i : sectionSize;
+        if (date == null) break;
+        elements.add(
+          RenderAssetGridElement(
+            RenderAssetGridElementType.assets,
+            date: date,
+            count: count,
+            totalCount: total,
+            offset: i,
+          ),
+        );
+      }
+      return RenderList(elements, query, assets);
+    }
+
+    final formatSameYear = groupBy == GroupAssetsBy.month ? DateFormat.MMMM() : DateFormat.MMMEd();
+    final formatOtherYear = groupBy == GroupAssetsBy.month ? DateFormat.yMMMM() : DateFormat.yMMMEd();
+    final currentYear = DateTime.now().year;
+    final formatMergedSameYear = DateFormat.MMMd();
+    final formatMergedOtherYear = DateFormat.yMMMd();
+
+    int offset = 0;
+    DateTime? last;
+    DateTime? current;
+    int lastOffset = 0;
+    int count = 0;
+    int monthCount = 0;
+    int lastMonthIndex = 0;
+
+    String formatDateRange(DateTime from, DateTime to) {
+      final startDate = (from.year == currentYear ? formatMergedSameYear : formatMergedOtherYear).format(from);
+      final endDate = (to.year == currentYear ? formatMergedSameYear : formatMergedOtherYear).format(to);
+      if (DateTime(from.year, from.month, from.day) == DateTime(to.year, to.month, to.day)) {
+        // format range with time when both dates are on the same day
+        final startTime = DateFormat.Hm().format(from);
+        final endTime = DateFormat.Hm().format(to);
+        return "$startDate $startTime - $endTime";
+      }
+      return "$startDate - $endDate";
+    }
+
+    void mergeMonth() {
+      if (last != null && groupBy == GroupAssetsBy.auto && monthCount <= 30 && elements.length > lastMonthIndex + 1) {
+        // merge all days into a single section
+        assert(elements[lastMonthIndex].date.month == last.month);
+        final e = elements[lastMonthIndex];
+
+        elements[lastMonthIndex] = RenderAssetGridElement(
+          RenderAssetGridElementType.monthTitle,
+          date: e.date,
+          count: monthCount,
+          totalCount: monthCount,
+          offset: e.offset,
+          title: formatDateRange(e.date, elements.last.date),
+        );
+        elements.removeRange(lastMonthIndex + 1, elements.length);
+      }
+    }
+
+    void addElems(DateTime d, DateTime? prevDate) {
+      final bool newMonth = last == null || last.year != d.year || last.month != d.month;
+      if (newMonth) {
+        mergeMonth();
+        lastMonthIndex = elements.length;
+        monthCount = 0;
+      }
+      for (int j = 0; j < count; j += sectionSize) {
+        final type = j == 0
+            ? (groupBy != GroupAssetsBy.month && newMonth
+                  ? RenderAssetGridElementType.monthTitle
+                  : RenderAssetGridElementType.groupDividerTitle)
+            : (groupBy == GroupAssetsBy.auto
+                  ? RenderAssetGridElementType.groupDividerTitle
+                  : RenderAssetGridElementType.assets);
+        final sectionCount = j + sectionSize > count ? count - j : sectionSize;
+        assert(sectionCount > 0 && sectionCount <= sectionSize);
+        elements.add(
+          RenderAssetGridElement(
+            type,
+            date: d,
+            count: sectionCount,
+            totalCount: groupBy == GroupAssetsBy.auto ? sectionCount : count,
+            offset: lastOffset + j,
+            title: j == 0
+                ? (d.year == currentYear ? formatSameYear.format(d) : formatOtherYear.format(d))
+                : (groupBy == GroupAssetsBy.auto ? formatDateRange(d, prevDate ?? d) : null),
+          ),
+        );
+      }
+      monthCount += count;
+    }
+
+    DateTime? prevDate;
+    while (true) {
+      // this iterates all assets (only their createdAt property) in batches
+      // memory usage is okay, however runtime is linear with number of assets
+      // TODO replace with groupBy once Isar supports such queries
+      final dates = assets != null
+          ? assets.map((a) => a.fileCreatedAt)
+          : await query!.offset(offset).limit(pageSize).fileCreatedAtProperty().findAll();
+      int i = 0;
+      for (final date in dates) {
+        final d = DateTime(date.year, date.month, groupBy == GroupAssetsBy.month ? 1 : date.day);
+        current ??= d;
+        if (current != d) {
+          addElems(current, prevDate);
+          last = current;
+          current = d;
+          lastOffset = offset + i;
+          count = 0;
+        }
+        prevDate = date;
+        count++;
+        i++;
+      }
+
+      if (assets != null || dates.length != pageSize) break;
+      offset += pageSize;
+    }
+    if (count > 0 && current != null) {
+      addElems(current, prevDate);
+      mergeMonth();
+    }
+    assert(elements.every((e) => e.count <= sectionSize), "too large section");
+    return RenderList(elements, query, assets);
+  }
+
+  static RenderList empty() => RenderList([], null, []);
+
+  static Future<RenderList> fromAssets(List<Asset> assets, GroupAssetsBy groupBy) =>
+      _buildRenderList(assets, null, groupBy);
+
+  /// Deletes an asset from the render list and clears the buffer
+  /// This is only a workaround for deleted images still appearing in the gallery
+  void deleteAsset(Asset deleteAsset) {
+    allAssets?.remove(deleteAsset);
+    _buf.clear();
+    _bufOffset = 0;
+  }
+}
+
+class DateBatchLoader {
+  final QueryBuilder<Asset, Asset, QAfterSortBy> query;
+  final int batchSize;
+
+  List<DateTime> _buffer = [];
+  int _bufferStart = 0;
+
+  DateBatchLoader({required this.query, required this.batchSize});
+
+  Future<DateTime?> getDate(int index) async {
+    if (!_isIndexInBuffer(index)) {
+      await _loadBatch(index);
+    }
+
+    if (_isIndexInBuffer(index)) {
+      return _buffer[index - _bufferStart];
+    }
+
+    return null;
+  }
+
+  Future<void> _loadBatch(int targetIndex) async {
+    final batchStart = (targetIndex ~/ batchSize) * batchSize;
+
+    _buffer = await query.offset(batchStart).limit(batchSize).fileCreatedAtProperty().findAll();
+
+    _bufferStart = batchStart;
+  }
+
+  bool _isIndexInBuffer(int index) {
+    return index >= _bufferStart && index < _bufferStart + _buffer.length;
+  }
+}

mobile/lib/widgets/asset_grid/control_bottom_app_bar.dart

@@ -0,0 +1,388 @@
+import 'dart:io';
+
+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/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/album/album.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/widgets/album/add_to_album_sliverlist.dart';
+import 'package:immich_mobile/widgets/album/add_to_album_bottom_sheet.dart';
+import 'package:immich_mobile/models/asset_selection_state.dart';
+import 'package:immich_mobile/widgets/asset_grid/delete_dialog.dart';
+import 'package:immich_mobile/widgets/asset_grid/upload_dialog.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/widgets/common/drag_sheet.dart';
+import 'package:immich_mobile/entities/album.entity.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/utils/draggable_scroll_controller.dart';
+
+final controlBottomAppBarNotifier = ControlBottomAppBarNotifier();
+
+class ControlBottomAppBarNotifier with ChangeNotifier {
+  void minimize() {
+    notifyListeners();
+  }
+}
+
+class ControlBottomAppBar extends HookConsumerWidget {
+  final void Function(bool shareLocal) onShare;
+  final void Function()? onFavorite;
+  final void Function()? onArchive;
+  final void Function([bool force])? onDelete;
+  final void Function([bool force])? onDeleteServer;
+  final void Function(bool onlyBackedUp)? onDeleteLocal;
+  final Function(Album album) onAddToAlbum;
+  final void Function() onCreateNewAlbum;
+  final void Function() onUpload;
+  final void Function()? onStack;
+  final void Function()? onEditTime;
+  final void Function()? onEditLocation;
+  final void Function()? onRemoveFromAlbum;
+  final void Function()? onToggleLocked;
+  final void Function()? onDownload;
+
+  final bool enabled;
+  final bool unfavorite;
+  final bool unarchive;
+  final AssetSelectionState selectionAssetState;
+  final List<Asset> selectedAssets;
+
+  const ControlBottomAppBar({
+    super.key,
+    required this.onShare,
+    this.onFavorite,
+    this.onArchive,
+    this.onDelete,
+    this.onDeleteServer,
+    this.onDeleteLocal,
+    required this.onAddToAlbum,
+    required this.onCreateNewAlbum,
+    required this.onUpload,
+    this.onDownload,
+    this.onStack,
+    this.onEditTime,
+    this.onEditLocation,
+    this.onRemoveFromAlbum,
+    this.onToggleLocked,
+    this.selectionAssetState = const AssetSelectionState(),
+    this.selectedAssets = const [],
+    this.enabled = true,
+    this.unarchive = false,
+    this.unfavorite = false,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final hasRemote = selectionAssetState.hasRemote || selectionAssetState.hasMerged;
+    final hasLocal = selectionAssetState.hasLocal || selectionAssetState.hasMerged;
+    final trashEnabled = ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
+    final albums = ref.watch(albumProvider).where((a) => a.isRemote).toList();
+    final sharedAlbums = ref.watch(albumProvider).where((a) => a.shared).toList();
+    const bottomPadding = 0.24;
+    final scrollController = useDraggableScrollController();
+    final isInLockedView = ref.watch(inLockedViewProvider);
+
+    void minimize() {
+      scrollController.animateTo(bottomPadding, duration: const Duration(milliseconds: 300), curve: Curves.easeOut);
+    }
+
+    useEffect(() {
+      controlBottomAppBarNotifier.addListener(minimize);
+      return () {
+        controlBottomAppBarNotifier.removeListener(minimize);
+      };
+    }, []);
+
+    void showForceDeleteDialog(Function(bool) deleteCb, {String? alertMsg}) {
+      showDialog(
+        context: context,
+        builder: (BuildContext context) {
+          return DeleteDialog(alert: alertMsg, onDelete: () => deleteCb(true));
+        },
+      );
+    }
+
+    /// Show existing AddToAlbumBottomSheet
+    void showAddToAlbumBottomSheet() {
+      showModalBottomSheet(
+        elevation: 0,
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(15.0))),
+        context: context,
+        builder: (BuildContext _) {
+          return AddToAlbumBottomSheet(assets: selectedAssets);
+        },
+      );
+    }
+
+    void handleRemoteDelete(bool force, Function(bool) deleteCb, {String? alertMsg}) {
+      if (!force) {
+        deleteCb(force);
+        return;
+      }
+      return showForceDeleteDialog(deleteCb, alertMsg: alertMsg);
+    }
+
+    List<Widget> renderActionButtons() {
+      return [
+        ControlBoxButton(
+          iconData: Platform.isAndroid ? Icons.share_rounded : Icons.ios_share_rounded,
+          label: "share".tr(),
+          onPressed: enabled ? () => onShare(true) : null,
+        ),
+        if (!isInLockedView && hasRemote)
+          ControlBoxButton(
+            iconData: Icons.link_rounded,
+            label: "share_link".tr(),
+            onPressed: enabled ? () => onShare(false) : null,
+          ),
+        if (!isInLockedView && hasRemote && albums.isNotEmpty)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 100),
+            child: ControlBoxButton(
+              iconData: Icons.photo_album,
+              label: "add_to_album".tr(),
+              onPressed: enabled ? showAddToAlbumBottomSheet : null,
+            ),
+          ),
+        if (hasRemote && onArchive != null)
+          ControlBoxButton(
+            iconData: unarchive ? Icons.unarchive_outlined : Icons.archive_outlined,
+            label: (unarchive ? "unarchive" : "archive").tr(),
+            onPressed: enabled ? onArchive : null,
+          ),
+        if (hasRemote && onFavorite != null)
+          ControlBoxButton(
+            iconData: unfavorite ? Icons.favorite_border_rounded : Icons.favorite_rounded,
+            label: (unfavorite ? "unfavorite" : "favorite").tr(),
+            onPressed: enabled ? onFavorite : null,
+          ),
+        if (hasRemote && onDownload != null)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 90),
+            child: ControlBoxButton(iconData: Icons.download, label: "download".tr(), onPressed: onDownload),
+          ),
+        if (hasLocal && hasRemote && onDelete != null && !isInLockedView)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 90),
+            child: ControlBoxButton(
+              iconData: Icons.delete_sweep_outlined,
+              label: "delete".tr(),
+              onPressed: enabled ? () => handleRemoteDelete(!trashEnabled, onDelete!) : null,
+              onLongPressed: enabled ? () => showForceDeleteDialog(onDelete!) : null,
+            ),
+          ),
+        if (hasRemote && onDeleteServer != null && !isInLockedView)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 85),
+            child: ControlBoxButton(
+              iconData: Icons.cloud_off_outlined,
+              label: trashEnabled
+                  ? "control_bottom_app_bar_trash_from_immich".tr()
+                  : "control_bottom_app_bar_delete_from_immich".tr(),
+              onPressed: enabled
+                  ? () => handleRemoteDelete(!trashEnabled, onDeleteServer!, alertMsg: "delete_dialog_alert_remote")
+                  : null,
+              onLongPressed: enabled
+                  ? () => showForceDeleteDialog(onDeleteServer!, alertMsg: "delete_dialog_alert_remote")
+                  : null,
+            ),
+          ),
+        if (isInLockedView)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 110),
+            child: ControlBoxButton(
+              iconData: Icons.delete_forever,
+              label: "delete_dialog_title".tr(),
+              onPressed: enabled
+                  ? () => showForceDeleteDialog(onDeleteServer!, alertMsg: "delete_dialog_alert_remote")
+                  : null,
+            ),
+          ),
+        if (hasLocal && onDeleteLocal != null && !isInLockedView)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 95),
+            child: ControlBoxButton(
+              iconData: Icons.no_cell_outlined,
+              label: "control_bottom_app_bar_delete_from_local".tr(),
+              onPressed: enabled
+                  ? () {
+                      if (!selectionAssetState.hasLocal) {
+                        return onDeleteLocal?.call(true);
+                      }
+
+                      showDialog(
+                        context: context,
+                        builder: (BuildContext context) {
+                          return DeleteLocalOnlyDialog(onDeleteLocal: onDeleteLocal!);
+                        },
+                      );
+                    }
+                  : null,
+            ),
+          ),
+        if (hasRemote && onEditTime != null)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 95),
+            child: ControlBoxButton(
+              iconData: Icons.edit_calendar_outlined,
+              label: "control_bottom_app_bar_edit_time".tr(),
+              onPressed: enabled ? onEditTime : null,
+            ),
+          ),
+        if (hasRemote && onEditLocation != null)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 90),
+            child: ControlBoxButton(
+              iconData: Icons.edit_location_alt_outlined,
+              label: "control_bottom_app_bar_edit_location".tr(),
+              onPressed: enabled ? onEditLocation : null,
+            ),
+          ),
+        if (hasRemote)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 100),
+            child: ControlBoxButton(
+              iconData: isInLockedView ? Icons.lock_open_rounded : Icons.lock_outline_rounded,
+              label: isInLockedView ? "remove_from_locked_folder".tr() : "move_to_locked_folder".tr(),
+              onPressed: enabled ? onToggleLocked : null,
+            ),
+          ),
+        if (!selectionAssetState.hasLocal && selectionAssetState.selectedCount > 1 && onStack != null)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 90),
+            child: ControlBoxButton(
+              iconData: Icons.filter_none_rounded,
+              label: "stack".tr(),
+              onPressed: enabled ? onStack : null,
+            ),
+          ),
+        if (onRemoveFromAlbum != null)
+          ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 90),
+            child: ControlBoxButton(
+              iconData: Icons.remove_circle_outline,
+              label: 'remove_from_album'.tr(),
+              onPressed: enabled ? onRemoveFromAlbum : null,
+            ),
+          ),
+        if (selectionAssetState.hasLocal)
+          ControlBoxButton(
+            iconData: Icons.backup_outlined,
+            label: "upload".tr(),
+            onPressed: enabled
+                ? () => showDialog(
+                    context: context,
+                    builder: (BuildContext context) {
+                      return UploadDialog(onUpload: onUpload);
+                    },
+                  )
+                : null,
+          ),
+      ];
+    }
+
+    getInitialSize() {
+      if (isInLockedView) {
+        return bottomPadding;
+      }
+      if (hasRemote) {
+        return 0.35;
+      }
+      return bottomPadding;
+    }
+
+    getMaxChildSize() {
+      if (isInLockedView) {
+        return bottomPadding;
+      }
+      if (hasRemote) {
+        return 0.65;
+      }
+      return bottomPadding;
+    }
+
+    return DraggableScrollableSheet(
+      initialChildSize: getInitialSize(),
+      minChildSize: bottomPadding,
+      maxChildSize: getMaxChildSize(),
+      snap: true,
+      controller: scrollController,
+      builder: (BuildContext context, ScrollController scrollController) {
+        return Card(
+          color: context.colorScheme.surfaceContainerHigh,
+          surfaceTintColor: context.colorScheme.surfaceContainerHigh,
+          elevation: 6.0,
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12)),
+          ),
+          margin: const EdgeInsets.all(0),
+          child: CustomScrollView(
+            controller: scrollController,
+            slivers: [
+              SliverToBoxAdapter(
+                child: Column(
+                  children: <Widget>[
+                    const SizedBox(height: 12),
+                    const CustomDraggingHandle(),
+                    const SizedBox(height: 12),
+                    SizedBox(
+                      height: 120,
+                      child: ListView(
+                        shrinkWrap: true,
+                        scrollDirection: Axis.horizontal,
+                        children: renderActionButtons(),
+                      ),
+                    ),
+                    if (hasRemote && !isInLockedView) ...[
+                      const Divider(indent: 16, endIndent: 16, thickness: 1),
+                      _AddToAlbumTitleRow(onCreateNewAlbum: enabled ? onCreateNewAlbum : null),
+                    ],
+                  ],
+                ),
+              ),
+              if (hasRemote && !isInLockedView)
+                SliverPadding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  sliver: AddToAlbumSliverList(
+                    albums: albums,
+                    sharedAlbums: sharedAlbums,
+                    onAddToAlbum: onAddToAlbum,
+                    enabled: enabled,
+                  ),
+                ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _AddToAlbumTitleRow extends StatelessWidget {
+  const _AddToAlbumTitleRow({required this.onCreateNewAlbum});
+
+  final VoidCallback? onCreateNewAlbum;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text("add_to_album", style: context.textTheme.titleSmall).tr(),
+          TextButton.icon(
+            onPressed: onCreateNewAlbum,
+            icon: Icon(Icons.add, color: context.primaryColor),
+            label: Text(
+              "common_create_new_album",
+              style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 14),
+            ).tr(),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/delete_dialog.dart

@@ -0,0 +1,81 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
+
+class DeleteDialog extends ConfirmDialog {
+  const DeleteDialog({super.key, String? alert, required Function onDelete})
+    : super(
+        title: "delete_dialog_title",
+        content: alert ?? "delete_dialog_alert",
+        cancel: "cancel",
+        ok: "delete",
+        onOk: onDelete,
+      );
+}
+
+class DeleteLocalOnlyDialog extends StatelessWidget {
+  final void Function(bool onlyMerged) onDeleteLocal;
+
+  const DeleteLocalOnlyDialog({super.key, required this.onDeleteLocal});
+
+  @override
+  Widget build(BuildContext context) {
+    void onDeleteBackedUpOnly() {
+      context.pop(true);
+      onDeleteLocal(true);
+    }
+
+    void onForceDelete() {
+      context.pop(false);
+      onDeleteLocal(false);
+    }
+
+    return AlertDialog(
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
+      title: const Text("delete_dialog_title").tr(),
+      content: const Text("delete_dialog_alert_local_non_backed_up").tr(),
+      actions: [
+        SizedBox(
+          width: double.infinity,
+          height: 48,
+          child: FilledButton(
+            onPressed: () => context.pop(),
+            style: FilledButton.styleFrom(
+              backgroundColor: context.colorScheme.surfaceDim,
+              foregroundColor: context.primaryColor,
+            ),
+            child: const Text("cancel", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+          ),
+        ),
+        const SizedBox(height: 8),
+        SizedBox(
+          width: double.infinity,
+          height: 48,
+
+          child: FilledButton(
+            onPressed: onDeleteBackedUpOnly,
+            style: FilledButton.styleFrom(
+              backgroundColor: context.colorScheme.errorContainer,
+              foregroundColor: context.colorScheme.onErrorContainer,
+            ),
+            child: const Text(
+              "delete_local_dialog_ok_backed_up_only",
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ).tr(),
+          ),
+        ),
+        const SizedBox(height: 8),
+        SizedBox(
+          width: double.infinity,
+          height: 48,
+          child: FilledButton(
+            onPressed: onForceDelete,
+            style: FilledButton.styleFrom(backgroundColor: Colors.red[400], foregroundColor: Colors.white),
+            child: const Text("delete_local_dialog_ok_force", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+          ),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/asset_grid/disable_multi_select_button.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class DisableMultiSelectButton extends ConsumerWidget {
+  const DisableMultiSelectButton({super.key, required this.onPressed, required this.selectedItemCount});
+
+  final Function onPressed;
+  final int selectedItemCount;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Align(
+      alignment: Alignment.topLeft,
+      child: Padding(
+        padding: const EdgeInsets.only(left: 16.0, top: 8.0),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 4.0),
+          child: ElevatedButton.icon(
+            onPressed: () => onPressed(),
+            icon: Icon(Icons.close_rounded, color: context.colorScheme.onPrimary),
+            label: Text(
+              '$selectedItemCount',
+              style: context.textTheme.titleMedium?.copyWith(height: 2.5, color: context.colorScheme.onPrimary),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/draggable_scrollbar.dart

@@ -0,0 +1,559 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+/// Build the Scroll Thumb and label using the current configuration
+typedef ScrollThumbBuilder =
+    Widget Function(
+      Color backgroundColor,
+      Animation<double> thumbAnimation,
+      Animation<double> labelAnimation,
+      double height, {
+      Text? labelText,
+      BoxConstraints? labelConstraints,
+    });
+
+/// Build a Text widget using the current scroll offset
+typedef LabelTextBuilder = Text Function(double offsetY);
+
+/// A widget that will display a BoxScrollView with a ScrollThumb that can be dragged
+/// for quick navigation of the BoxScrollView.
+class DraggableScrollbar extends StatefulWidget {
+  /// The view that will be scrolled with the scroll thumb
+  final CustomScrollView child;
+
+  /// A function that builds a thumb using the current configuration
+  final ScrollThumbBuilder scrollThumbBuilder;
+
+  /// The height of the scroll thumb
+  final double heightScrollThumb;
+
+  /// The background color of the label and thumb
+  final Color backgroundColor;
+
+  /// The amount of padding that should surround the thumb
+  final EdgeInsetsGeometry? padding;
+
+  /// Determines how quickly the scrollbar will animate in and out
+  final Duration scrollbarAnimationDuration;
+
+  /// How long should the thumb be visible before fading out
+  final Duration scrollbarTimeToFade;
+
+  /// Build a Text widget from the current offset in the BoxScrollView
+  final LabelTextBuilder? labelTextBuilder;
+
+  /// Determines box constraints for Container displaying label
+  final BoxConstraints? labelConstraints;
+
+  /// The ScrollController for the BoxScrollView
+  final ScrollController controller;
+
+  /// Determines scrollThumb displaying. If you draw own ScrollThumb and it is true you just don't need to use animation parameters in [scrollThumbBuilder]
+  final bool alwaysVisibleScrollThumb;
+
+  DraggableScrollbar({
+    super.key,
+    this.alwaysVisibleScrollThumb = false,
+    required this.heightScrollThumb,
+    required this.backgroundColor,
+    required this.scrollThumbBuilder,
+    required this.child,
+    required this.controller,
+    this.padding,
+    this.scrollbarAnimationDuration = const Duration(milliseconds: 300),
+    this.scrollbarTimeToFade = const Duration(milliseconds: 600),
+    this.labelTextBuilder,
+    this.labelConstraints,
+  }) : assert(child.scrollDirection == Axis.vertical);
+
+  DraggableScrollbar.rrect({
+    super.key,
+    Key? scrollThumbKey,
+    this.alwaysVisibleScrollThumb = false,
+    required this.child,
+    required this.controller,
+    this.heightScrollThumb = 48.0,
+    this.backgroundColor = Colors.white,
+    this.padding,
+    this.scrollbarAnimationDuration = const Duration(milliseconds: 300),
+    this.scrollbarTimeToFade = const Duration(milliseconds: 600),
+    this.labelTextBuilder,
+    this.labelConstraints,
+  }) : assert(child.scrollDirection == Axis.vertical),
+       scrollThumbBuilder = _thumbRRectBuilder(alwaysVisibleScrollThumb);
+
+  DraggableScrollbar.arrows({
+    super.key,
+    Key? scrollThumbKey,
+    this.alwaysVisibleScrollThumb = false,
+    required this.child,
+    required this.controller,
+    this.heightScrollThumb = 48.0,
+    this.backgroundColor = Colors.white,
+    this.padding,
+    this.scrollbarAnimationDuration = const Duration(milliseconds: 300),
+    this.scrollbarTimeToFade = const Duration(milliseconds: 600),
+    this.labelTextBuilder,
+    this.labelConstraints,
+  }) : assert(child.scrollDirection == Axis.vertical),
+       scrollThumbBuilder = _thumbArrowBuilder(alwaysVisibleScrollThumb);
+
+  DraggableScrollbar.semicircle({
+    super.key,
+    Key? scrollThumbKey,
+    this.alwaysVisibleScrollThumb = false,
+    required this.child,
+    required this.controller,
+    this.heightScrollThumb = 48.0,
+    this.backgroundColor = Colors.white,
+    this.padding,
+    this.scrollbarAnimationDuration = const Duration(milliseconds: 300),
+    this.scrollbarTimeToFade = const Duration(milliseconds: 600),
+    this.labelTextBuilder,
+    this.labelConstraints,
+  }) : assert(child.scrollDirection == Axis.vertical),
+       scrollThumbBuilder = _thumbSemicircleBuilder(heightScrollThumb * 0.6, scrollThumbKey, alwaysVisibleScrollThumb);
+
+  @override
+  DraggableScrollbarState createState() => DraggableScrollbarState();
+
+  static buildScrollThumbAndLabel({
+    required Widget scrollThumb,
+    required Color backgroundColor,
+    required Animation<double>? thumbAnimation,
+    required Animation<double>? labelAnimation,
+    required Text? labelText,
+    required BoxConstraints? labelConstraints,
+    required bool alwaysVisibleScrollThumb,
+  }) {
+    var scrollThumbAndLabel = labelText == null
+        ? scrollThumb
+        : Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              ScrollLabel(
+                animation: labelAnimation,
+                backgroundColor: backgroundColor,
+                constraints: labelConstraints,
+                child: labelText,
+              ),
+              scrollThumb,
+            ],
+          );
+
+    if (alwaysVisibleScrollThumb) {
+      return scrollThumbAndLabel;
+    }
+    return SlideFadeTransition(animation: thumbAnimation!, child: scrollThumbAndLabel);
+  }
+
+  static ScrollThumbBuilder _thumbSemicircleBuilder(double width, Key? scrollThumbKey, bool alwaysVisibleScrollThumb) {
+    return (
+      Color backgroundColor,
+      Animation<double> thumbAnimation,
+      Animation<double> labelAnimation,
+      double height, {
+      Text? labelText,
+      BoxConstraints? labelConstraints,
+    }) {
+      final scrollThumb = CustomPaint(
+        key: scrollThumbKey,
+        foregroundPainter: ArrowCustomPainter(Colors.white),
+        child: Material(
+          elevation: 4.0,
+          color: backgroundColor,
+          borderRadius: BorderRadius.only(
+            topLeft: Radius.circular(height),
+            bottomLeft: Radius.circular(height),
+            topRight: const Radius.circular(4.0),
+            bottomRight: const Radius.circular(4.0),
+          ),
+          child: Container(constraints: BoxConstraints.tight(Size(width, height))),
+        ),
+      );
+
+      return buildScrollThumbAndLabel(
+        scrollThumb: scrollThumb,
+        backgroundColor: backgroundColor,
+        thumbAnimation: thumbAnimation,
+        labelAnimation: labelAnimation,
+        labelText: labelText,
+        labelConstraints: labelConstraints,
+        alwaysVisibleScrollThumb: alwaysVisibleScrollThumb,
+      );
+    };
+  }
+
+  static ScrollThumbBuilder _thumbArrowBuilder(bool alwaysVisibleScrollThumb) {
+    return (
+      Color backgroundColor,
+      Animation<double> thumbAnimation,
+      Animation<double> labelAnimation,
+      double height, {
+      Text? labelText,
+      BoxConstraints? labelConstraints,
+    }) {
+      final scrollThumb = ClipPath(
+        clipper: const ArrowClipper(),
+        child: Container(
+          height: height,
+          width: 20.0,
+          decoration: BoxDecoration(
+            color: backgroundColor,
+            borderRadius: const BorderRadius.all(Radius.circular(12.0)),
+          ),
+        ),
+      );
+
+      return buildScrollThumbAndLabel(
+        scrollThumb: scrollThumb,
+        backgroundColor: backgroundColor,
+        thumbAnimation: thumbAnimation,
+        labelAnimation: labelAnimation,
+        labelText: labelText,
+        labelConstraints: labelConstraints,
+        alwaysVisibleScrollThumb: alwaysVisibleScrollThumb,
+      );
+    };
+  }
+
+  static ScrollThumbBuilder _thumbRRectBuilder(bool alwaysVisibleScrollThumb) {
+    return (
+      Color backgroundColor,
+      Animation<double> thumbAnimation,
+      Animation<double> labelAnimation,
+      double height, {
+      Text? labelText,
+      BoxConstraints? labelConstraints,
+    }) {
+      final scrollThumb = Material(
+        elevation: 4.0,
+        color: backgroundColor,
+        borderRadius: const BorderRadius.all(Radius.circular(7.0)),
+        child: Container(constraints: BoxConstraints.tight(Size(16.0, height))),
+      );
+
+      return buildScrollThumbAndLabel(
+        scrollThumb: scrollThumb,
+        backgroundColor: backgroundColor,
+        thumbAnimation: thumbAnimation,
+        labelAnimation: labelAnimation,
+        labelText: labelText,
+        labelConstraints: labelConstraints,
+        alwaysVisibleScrollThumb: alwaysVisibleScrollThumb,
+      );
+    };
+  }
+}
+
+class ScrollLabel extends StatelessWidget {
+  final Animation<double>? animation;
+  final Color backgroundColor;
+  final Text child;
+
+  final BoxConstraints? constraints;
+  static const BoxConstraints _defaultConstraints = BoxConstraints.tightFor(width: 72.0, height: 28.0);
+
+  const ScrollLabel({
+    super.key,
+    required this.child,
+    required this.animation,
+    required this.backgroundColor,
+    this.constraints = _defaultConstraints,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return FadeTransition(
+      opacity: animation!,
+      child: Container(
+        margin: const EdgeInsets.only(right: 12.0),
+        child: Material(
+          elevation: 4.0,
+          color: backgroundColor,
+          borderRadius: const BorderRadius.all(Radius.circular(16.0)),
+          child: Container(constraints: constraints ?? _defaultConstraints, alignment: Alignment.center, child: child),
+        ),
+      ),
+    );
+  }
+}
+
+class DraggableScrollbarState extends State<DraggableScrollbar> with TickerProviderStateMixin {
+  late double _barOffset;
+  late double _viewOffset;
+  late bool _isDragInProcess;
+
+  late AnimationController _thumbAnimationController;
+  late Animation<double> _thumbAnimation;
+  late AnimationController _labelAnimationController;
+  late Animation<double> _labelAnimation;
+  Timer? _fadeoutTimer;
+
+  @override
+  void initState() {
+    super.initState();
+    _barOffset = 0.0;
+    _viewOffset = 0.0;
+    _isDragInProcess = false;
+
+    _thumbAnimationController = AnimationController(vsync: this, duration: widget.scrollbarAnimationDuration);
+
+    _thumbAnimation = CurvedAnimation(parent: _thumbAnimationController, curve: Curves.fastOutSlowIn);
+
+    _labelAnimationController = AnimationController(vsync: this, duration: widget.scrollbarAnimationDuration);
+
+    _labelAnimation = CurvedAnimation(parent: _labelAnimationController, curve: Curves.fastOutSlowIn);
+  }
+
+  @override
+  void dispose() {
+    _thumbAnimationController.dispose();
+    _labelAnimationController.dispose();
+    _fadeoutTimer?.cancel();
+    super.dispose();
+  }
+
+  double get barMaxScrollExtent => context.size!.height - widget.heightScrollThumb;
+
+  double get barMinScrollExtent => 0;
+
+  double get viewMaxScrollExtent => widget.controller.position.maxScrollExtent;
+
+  double get viewMinScrollExtent => widget.controller.position.minScrollExtent;
+
+  @override
+  Widget build(BuildContext context) {
+    Text? labelText;
+    if (widget.labelTextBuilder != null && _isDragInProcess) {
+      labelText = widget.labelTextBuilder!(_viewOffset + _barOffset + widget.heightScrollThumb / 2);
+    }
+
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        //print("LayoutBuilder constraints=$constraints");
+
+        return NotificationListener<ScrollNotification>(
+          onNotification: (ScrollNotification notification) {
+            changePosition(notification);
+            return false;
+          },
+          child: Stack(
+            children: <Widget>[
+              RepaintBoundary(child: widget.child),
+              RepaintBoundary(
+                child: GestureDetector(
+                  onVerticalDragStart: _onVerticalDragStart,
+                  onVerticalDragUpdate: _onVerticalDragUpdate,
+                  onVerticalDragEnd: _onVerticalDragEnd,
+                  child: Container(
+                    alignment: Alignment.topRight,
+                    margin: EdgeInsets.only(top: _barOffset),
+                    padding: widget.padding,
+                    child: widget.scrollThumbBuilder(
+                      widget.backgroundColor,
+                      _thumbAnimation,
+                      _labelAnimation,
+                      widget.heightScrollThumb,
+                      labelText: labelText,
+                      labelConstraints: widget.labelConstraints,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  //scroll bar has received notification that it's view was scrolled
+  //so it should also changes his position
+  //but only if it isn't dragged
+  changePosition(ScrollNotification notification) {
+    if (_isDragInProcess) {
+      return;
+    }
+
+    setState(() {
+      if (notification is ScrollUpdateNotification) {
+        _barOffset += getBarDelta(notification.scrollDelta!, barMaxScrollExtent, viewMaxScrollExtent);
+
+        if (_barOffset < barMinScrollExtent) {
+          _barOffset = barMinScrollExtent;
+        }
+        if (_barOffset > barMaxScrollExtent) {
+          _barOffset = barMaxScrollExtent;
+        }
+
+        _viewOffset += notification.scrollDelta!;
+        if (_viewOffset < widget.controller.position.minScrollExtent) {
+          _viewOffset = widget.controller.position.minScrollExtent;
+        }
+        if (_viewOffset > viewMaxScrollExtent) {
+          _viewOffset = viewMaxScrollExtent;
+        }
+      }
+
+      if (notification is ScrollUpdateNotification || notification is OverscrollNotification) {
+        if (_thumbAnimationController.status != AnimationStatus.forward) {
+          _thumbAnimationController.forward();
+        }
+
+        _fadeoutTimer?.cancel();
+        _fadeoutTimer = Timer(widget.scrollbarTimeToFade, () {
+          _thumbAnimationController.reverse();
+          _labelAnimationController.reverse();
+          _fadeoutTimer = null;
+        });
+      }
+    });
+  }
+
+  double getBarDelta(double scrollViewDelta, double barMaxScrollExtent, double viewMaxScrollExtent) {
+    return scrollViewDelta * barMaxScrollExtent / viewMaxScrollExtent;
+  }
+
+  double getScrollViewDelta(double barDelta, double barMaxScrollExtent, double viewMaxScrollExtent) {
+    return barDelta * viewMaxScrollExtent / barMaxScrollExtent;
+  }
+
+  void _onVerticalDragStart(DragStartDetails details) {
+    setState(() {
+      _isDragInProcess = true;
+      _labelAnimationController.forward();
+      _fadeoutTimer?.cancel();
+    });
+  }
+
+  void _onVerticalDragUpdate(DragUpdateDetails details) {
+    setState(() {
+      if (_thumbAnimationController.status != AnimationStatus.forward) {
+        _thumbAnimationController.forward();
+      }
+      if (_isDragInProcess) {
+        _barOffset += details.delta.dy;
+
+        if (_barOffset < barMinScrollExtent) {
+          _barOffset = barMinScrollExtent;
+        }
+        if (_barOffset > barMaxScrollExtent) {
+          _barOffset = barMaxScrollExtent;
+        }
+
+        double viewDelta = getScrollViewDelta(details.delta.dy, barMaxScrollExtent, viewMaxScrollExtent);
+
+        _viewOffset = widget.controller.position.pixels + viewDelta;
+        if (_viewOffset < widget.controller.position.minScrollExtent) {
+          _viewOffset = widget.controller.position.minScrollExtent;
+        }
+        if (_viewOffset > viewMaxScrollExtent) {
+          _viewOffset = viewMaxScrollExtent;
+        }
+        widget.controller.jumpTo(_viewOffset);
+      }
+    });
+  }
+
+  void _onVerticalDragEnd(DragEndDetails details) {
+    _fadeoutTimer = Timer(widget.scrollbarTimeToFade, () {
+      _thumbAnimationController.reverse();
+      _labelAnimationController.reverse();
+      _fadeoutTimer = null;
+    });
+    setState(() {
+      _isDragInProcess = false;
+    });
+  }
+}
+
+/// Draws 2 triangles like arrow up and arrow down
+class ArrowCustomPainter extends CustomPainter {
+  Color color;
+
+  ArrowCustomPainter(this.color);
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()..color = color;
+    const width = 12.0;
+    const height = 8.0;
+    final baseX = size.width / 2;
+    final baseY = size.height / 2;
+
+    canvas.drawPath(_trianglePath(Offset(baseX, baseY - 2.0), width, height, true), paint);
+    canvas.drawPath(_trianglePath(Offset(baseX, baseY + 2.0), width, height, false), paint);
+  }
+
+  static Path _trianglePath(Offset o, double width, double height, bool isUp) {
+    return Path()
+      ..moveTo(o.dx, o.dy)
+      ..lineTo(o.dx + width, o.dy)
+      ..lineTo(o.dx + (width / 2), isUp ? o.dy - height : o.dy + height)
+      ..close();
+  }
+}
+
+///This cut 2 lines in arrow shape
+class ArrowClipper extends CustomClipper<Path> {
+  const ArrowClipper();
+  @override
+  Path getClip(Size size) {
+    Path path = Path();
+    path.lineTo(0.0, size.height);
+    path.lineTo(size.width, size.height);
+    path.lineTo(size.width, 0.0);
+    path.lineTo(0.0, 0.0);
+    path.close();
+
+    double arrowWidth = 8.0;
+    double startPointX = (size.width - arrowWidth) / 2;
+    double startPointY = size.height / 2 - arrowWidth / 2;
+    path.moveTo(startPointX, startPointY);
+    path.lineTo(startPointX + arrowWidth / 2, startPointY - arrowWidth / 2);
+    path.lineTo(startPointX + arrowWidth, startPointY);
+    path.lineTo(startPointX + arrowWidth, startPointY + 1.0);
+    path.lineTo(startPointX + arrowWidth / 2, startPointY - arrowWidth / 2 + 1.0);
+    path.lineTo(startPointX, startPointY + 1.0);
+    path.close();
+
+    startPointY = size.height / 2 + arrowWidth / 2;
+    path.moveTo(startPointX + arrowWidth, startPointY);
+    path.lineTo(startPointX + arrowWidth / 2, startPointY + arrowWidth / 2);
+    path.lineTo(startPointX, startPointY);
+    path.lineTo(startPointX, startPointY - 1.0);
+    path.lineTo(startPointX + arrowWidth / 2, startPointY + arrowWidth / 2 - 1.0);
+    path.lineTo(startPointX + arrowWidth, startPointY - 1.0);
+    path.close();
+
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
+}
+
+class SlideFadeTransition extends StatelessWidget {
+  final Animation<double> animation;
+  final Widget child;
+
+  const SlideFadeTransition({super.key, required this.animation, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: animation,
+      builder: (context, child) => animation.value == 0.0 ? const SizedBox() : child!,
+      child: SlideTransition(
+        position: Tween(begin: const Offset(0.3, 0.0), end: const Offset(0.0, 0.0)).animate(animation),
+        child: FadeTransition(opacity: animation, child: child),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/draggable_scrollbar_custom.dart

@@ -0,0 +1,490 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
+
+/// Build the Scroll Thumb and label using the current configuration
+typedef ScrollThumbBuilder =
+    Widget Function(
+      Color backgroundColor,
+      Animation<double> thumbAnimation,
+      Animation<double> labelAnimation,
+      double height, {
+      Text? labelText,
+      BoxConstraints? labelConstraints,
+    });
+
+/// Build a Text widget using the current scroll offset
+typedef LabelTextBuilder = Text Function(int item);
+
+/// A widget that will display a BoxScrollView with a ScrollThumb that can be dragged
+/// for quick navigation of the BoxScrollView.
+class DraggableScrollbar extends StatefulWidget {
+  /// The view that will be scrolled with the scroll thumb
+  final ScrollablePositionedList child;
+
+  final ItemPositionsListener itemPositionsListener;
+
+  /// A function that builds a thumb using the current configuration
+  final ScrollThumbBuilder scrollThumbBuilder;
+
+  /// The height of the scroll thumb
+  final double heightScrollThumb;
+
+  /// The background color of the label and thumb
+  final Color backgroundColor;
+
+  /// The amount of padding that should surround the thumb
+  final EdgeInsetsGeometry? padding;
+
+  /// The height offset of the thumb/bar from the bottom of the page
+  final double? heightOffset;
+
+  /// Determines how quickly the scrollbar will animate in and out
+  final Duration scrollbarAnimationDuration;
+
+  /// How long should the thumb be visible before fading out
+  final Duration scrollbarTimeToFade;
+
+  /// Build a Text widget from the current offset in the BoxScrollView
+  final LabelTextBuilder? labelTextBuilder;
+
+  /// Determines box constraints for Container displaying label
+  final BoxConstraints? labelConstraints;
+
+  /// The ScrollController for the BoxScrollView
+  final ItemScrollController controller;
+
+  /// Determines scrollThumb displaying. If you draw own ScrollThumb and it is true you just don't need to use animation parameters in [scrollThumbBuilder]
+  final bool alwaysVisibleScrollThumb;
+
+  final Function(bool scrolling) scrollStateListener;
+
+  DraggableScrollbar.semicircle({
+    super.key,
+    Key? scrollThumbKey,
+    this.alwaysVisibleScrollThumb = false,
+    required this.child,
+    required this.controller,
+    required this.itemPositionsListener,
+    required this.scrollStateListener,
+    this.heightScrollThumb = 48.0,
+    this.backgroundColor = Colors.white,
+    this.padding,
+    this.heightOffset,
+    this.scrollbarAnimationDuration = const Duration(milliseconds: 300),
+    this.scrollbarTimeToFade = const Duration(milliseconds: 600),
+    this.labelTextBuilder,
+    this.labelConstraints,
+  }) : assert(child.scrollDirection == Axis.vertical),
+       scrollThumbBuilder = _thumbSemicircleBuilder(heightScrollThumb * 0.6, scrollThumbKey, alwaysVisibleScrollThumb);
+
+  @override
+  DraggableScrollbarState createState() => DraggableScrollbarState();
+
+  static buildScrollThumbAndLabel({
+    required Widget scrollThumb,
+    required Color backgroundColor,
+    required Animation<double>? thumbAnimation,
+    required Animation<double>? labelAnimation,
+    required Text? labelText,
+    required BoxConstraints? labelConstraints,
+    required bool alwaysVisibleScrollThumb,
+  }) {
+    var scrollThumbAndLabel = labelText == null
+        ? scrollThumb
+        : Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              ScrollLabel(
+                animation: labelAnimation,
+                backgroundColor: backgroundColor,
+                constraints: labelConstraints,
+                child: labelText,
+              ),
+              scrollThumb,
+            ],
+          );
+
+    if (alwaysVisibleScrollThumb) {
+      return scrollThumbAndLabel;
+    }
+    return SlideFadeTransition(animation: thumbAnimation!, child: scrollThumbAndLabel);
+  }
+
+  static ScrollThumbBuilder _thumbSemicircleBuilder(double width, Key? scrollThumbKey, bool alwaysVisibleScrollThumb) {
+    return (
+      Color backgroundColor,
+      Animation<double> thumbAnimation,
+      Animation<double> labelAnimation,
+      double height, {
+      Text? labelText,
+      BoxConstraints? labelConstraints,
+    }) {
+      final scrollThumb = CustomPaint(
+        key: scrollThumbKey,
+        foregroundPainter: ArrowCustomPainter(Colors.white),
+        child: Material(
+          elevation: 4.0,
+          color: backgroundColor,
+          borderRadius: BorderRadius.only(
+            topLeft: Radius.circular(height),
+            bottomLeft: Radius.circular(height),
+            topRight: const Radius.circular(4.0),
+            bottomRight: const Radius.circular(4.0),
+          ),
+          child: Container(constraints: BoxConstraints.tight(Size(width, height))),
+        ),
+      );
+
+      return buildScrollThumbAndLabel(
+        scrollThumb: scrollThumb,
+        backgroundColor: backgroundColor,
+        thumbAnimation: thumbAnimation,
+        labelAnimation: labelAnimation,
+        labelText: labelText,
+        labelConstraints: labelConstraints,
+        alwaysVisibleScrollThumb: alwaysVisibleScrollThumb,
+      );
+    };
+  }
+}
+
+class ScrollLabel extends StatelessWidget {
+  final Animation<double>? animation;
+  final Color backgroundColor;
+  final Text child;
+
+  final BoxConstraints? constraints;
+  static const BoxConstraints _defaultConstraints = BoxConstraints.tightFor(width: 72.0, height: 28.0);
+
+  const ScrollLabel({
+    super.key,
+    required this.child,
+    required this.animation,
+    required this.backgroundColor,
+    this.constraints = _defaultConstraints,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return FadeTransition(
+      opacity: animation!,
+      child: Container(
+        margin: const EdgeInsets.only(right: 12.0),
+        child: Material(
+          elevation: 4.0,
+          color: backgroundColor,
+          borderRadius: const BorderRadius.all(Radius.circular(16.0)),
+          child: Container(
+            constraints: constraints ?? _defaultConstraints,
+            padding: const EdgeInsets.symmetric(horizontal: 10.0),
+            alignment: Alignment.center,
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class DraggableScrollbarState extends State<DraggableScrollbar> with TickerProviderStateMixin {
+  late double _barOffset;
+  late bool _isDragInProcess;
+  late int _currentItem;
+
+  late AnimationController _thumbAnimationController;
+  late Animation<double> _thumbAnimation;
+  late AnimationController _labelAnimationController;
+  late Animation<double> _labelAnimation;
+  Timer? _fadeoutTimer;
+
+  @override
+  void initState() {
+    super.initState();
+    _barOffset = 0.0;
+    _isDragInProcess = false;
+    _currentItem = 0;
+
+    _thumbAnimationController = AnimationController(vsync: this, duration: widget.scrollbarAnimationDuration);
+
+    _thumbAnimation = CurvedAnimation(parent: _thumbAnimationController, curve: Curves.fastOutSlowIn);
+
+    _labelAnimationController = AnimationController(vsync: this, duration: widget.scrollbarAnimationDuration);
+
+    _labelAnimation = CurvedAnimation(parent: _labelAnimationController, curve: Curves.fastOutSlowIn);
+  }
+
+  @override
+  void dispose() {
+    _thumbAnimationController.dispose();
+    _labelAnimationController.dispose();
+    _fadeoutTimer?.cancel();
+    super.dispose();
+  }
+
+  double get barMaxScrollExtent => (context.size?.height ?? 0) - widget.heightScrollThumb - (widget.heightOffset ?? 0);
+
+  double get barMinScrollExtent => 0;
+
+  int get maxItemCount => widget.child.itemCount;
+
+  @override
+  Widget build(BuildContext context) {
+    Text? labelText;
+    if (widget.labelTextBuilder != null && _isDragInProcess) {
+      labelText = widget.labelTextBuilder!(_currentItem);
+    }
+
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        //print("LayoutBuilder constraints=$constraints");
+
+        return NotificationListener<ScrollNotification>(
+          onNotification: (ScrollNotification notification) {
+            changePosition(notification);
+            return false;
+          },
+          child: Stack(
+            children: <Widget>[
+              RepaintBoundary(child: widget.child),
+              RepaintBoundary(
+                child: GestureDetector(
+                  onVerticalDragStart: _onVerticalDragStart,
+                  onVerticalDragUpdate: _onVerticalDragUpdate,
+                  onVerticalDragEnd: _onVerticalDragEnd,
+                  child: Container(
+                    alignment: Alignment.topRight,
+                    margin: EdgeInsets.only(top: _barOffset),
+                    padding: widget.padding,
+                    child: widget.scrollThumbBuilder(
+                      widget.backgroundColor,
+                      _thumbAnimation,
+                      _labelAnimation,
+                      widget.heightScrollThumb,
+                      labelText: labelText,
+                      labelConstraints: widget.labelConstraints,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  // scroll bar has received notification that it's view was scrolled
+  // so it should also changes his position
+  // but only if it isn't dragged
+  changePosition(ScrollNotification notification) {
+    if (_isDragInProcess) {
+      return;
+    }
+
+    setState(() {
+      try {
+        int firstItemIndex = widget.itemPositionsListener.itemPositions.value.first.index;
+
+        if (notification is ScrollUpdateNotification) {
+          _barOffset = (firstItemIndex / maxItemCount) * barMaxScrollExtent;
+
+          if (_barOffset < barMinScrollExtent) {
+            _barOffset = barMinScrollExtent;
+          }
+          if (_barOffset > barMaxScrollExtent) {
+            _barOffset = barMaxScrollExtent;
+          }
+        }
+
+        if (notification is ScrollUpdateNotification || notification is OverscrollNotification) {
+          if (_thumbAnimationController.status != AnimationStatus.forward) {
+            _thumbAnimationController.forward();
+          }
+
+          if (itemPosition < maxItemCount) {
+            _currentItem = itemPosition;
+          }
+
+          _fadeoutTimer?.cancel();
+          _fadeoutTimer = Timer(widget.scrollbarTimeToFade, () {
+            _thumbAnimationController.reverse();
+            _labelAnimationController.reverse();
+            _fadeoutTimer = null;
+          });
+        }
+      } catch (_) {}
+    });
+  }
+
+  void _onVerticalDragStart(DragStartDetails details) {
+    setState(() {
+      _isDragInProcess = true;
+      _labelAnimationController.forward();
+      _fadeoutTimer?.cancel();
+    });
+
+    widget.scrollStateListener(true);
+  }
+
+  int get itemPosition {
+    int numberOfItems = widget.child.itemCount;
+    return ((_barOffset / barMaxScrollExtent) * numberOfItems).toInt();
+  }
+
+  void _jumpToBarPosition() {
+    if (itemPosition > maxItemCount - 1) {
+      return;
+    }
+
+    _currentItem = itemPosition;
+
+    /// If the bar is at the bottom but the item position is still smaller than the max item count (due to rounding error)
+    /// jump to the end of the list
+    if (barMaxScrollExtent - _barOffset < 10 && itemPosition < maxItemCount) {
+      widget.controller.jumpTo(index: maxItemCount);
+
+      return;
+    }
+
+    widget.controller.jumpTo(index: itemPosition);
+  }
+
+  Timer? dragHaltTimer;
+  int lastTimerPosition = 0;
+
+  void _onVerticalDragUpdate(DragUpdateDetails details) {
+    setState(() {
+      if (_thumbAnimationController.status != AnimationStatus.forward) {
+        _thumbAnimationController.forward();
+      }
+      if (_isDragInProcess) {
+        _barOffset += details.delta.dy;
+
+        if (_barOffset < barMinScrollExtent) {
+          _barOffset = barMinScrollExtent;
+        }
+        if (_barOffset > barMaxScrollExtent) {
+          _barOffset = barMaxScrollExtent;
+        }
+
+        if (itemPosition != lastTimerPosition) {
+          lastTimerPosition = itemPosition;
+          dragHaltTimer?.cancel();
+          widget.scrollStateListener(true);
+
+          dragHaltTimer = Timer(const Duration(milliseconds: 500), () {
+            widget.scrollStateListener(false);
+          });
+        }
+
+        _jumpToBarPosition();
+      }
+    });
+  }
+
+  void _onVerticalDragEnd(DragEndDetails details) {
+    _fadeoutTimer = Timer(widget.scrollbarTimeToFade, () {
+      _thumbAnimationController.reverse();
+      _labelAnimationController.reverse();
+      _fadeoutTimer = null;
+    });
+
+    setState(() {
+      _jumpToBarPosition();
+      _isDragInProcess = false;
+    });
+
+    widget.scrollStateListener(false);
+  }
+}
+
+/// Draws 2 triangles like arrow up and arrow down
+class ArrowCustomPainter extends CustomPainter {
+  Color color;
+
+  ArrowCustomPainter(this.color);
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()..color = color;
+    const width = 12.0;
+    const height = 8.0;
+    final baseX = size.width / 2;
+    final baseY = size.height / 2;
+
+    canvas.drawPath(_trianglePath(Offset(baseX, baseY - 2.0), width, height, true), paint);
+    canvas.drawPath(_trianglePath(Offset(baseX, baseY + 2.0), width, height, false), paint);
+  }
+
+  static Path _trianglePath(Offset o, double width, double height, bool isUp) {
+    return Path()
+      ..moveTo(o.dx, o.dy)
+      ..lineTo(o.dx + width, o.dy)
+      ..lineTo(o.dx + (width / 2), isUp ? o.dy - height : o.dy + height)
+      ..close();
+  }
+}
+
+///This cut 2 lines in arrow shape
+class ArrowClipper extends CustomClipper<Path> {
+  const ArrowClipper();
+  @override
+  Path getClip(Size size) {
+    Path path = Path();
+    path.lineTo(0.0, size.height);
+    path.lineTo(size.width, size.height);
+    path.lineTo(size.width, 0.0);
+    path.lineTo(0.0, 0.0);
+    path.close();
+
+    double arrowWidth = 8.0;
+    double startPointX = (size.width - arrowWidth) / 2;
+    double startPointY = size.height / 2 - arrowWidth / 2;
+    path.moveTo(startPointX, startPointY);
+    path.lineTo(startPointX + arrowWidth / 2, startPointY - arrowWidth / 2);
+    path.lineTo(startPointX + arrowWidth, startPointY);
+    path.lineTo(startPointX + arrowWidth, startPointY + 1.0);
+    path.lineTo(startPointX + arrowWidth / 2, startPointY - arrowWidth / 2 + 1.0);
+    path.lineTo(startPointX, startPointY + 1.0);
+    path.close();
+
+    startPointY = size.height / 2 + arrowWidth / 2;
+    path.moveTo(startPointX + arrowWidth, startPointY);
+    path.lineTo(startPointX + arrowWidth / 2, startPointY + arrowWidth / 2);
+    path.lineTo(startPointX, startPointY);
+    path.lineTo(startPointX, startPointY - 1.0);
+    path.lineTo(startPointX + arrowWidth / 2, startPointY + arrowWidth / 2 - 1.0);
+    path.lineTo(startPointX + arrowWidth, startPointY - 1.0);
+    path.close();
+
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
+}
+
+class SlideFadeTransition extends StatelessWidget {
+  final Animation<double> animation;
+  final Widget child;
+
+  const SlideFadeTransition({super.key, required this.animation, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: animation,
+      builder: (context, child) => animation.value == 0.0 ? const SizedBox() : child!,
+      child: SlideTransition(
+        position: Tween(begin: const Offset(0.3, 0.0), end: const Offset(0.0, 0.0)).animate(animation),
+        child: FadeTransition(opacity: animation, child: child),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/group_divider_title.dart

@@ -0,0 +1,84 @@
+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/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+
+class GroupDividerTitle extends HookConsumerWidget {
+  const GroupDividerTitle({
+    super.key,
+    required this.text,
+    required this.multiselectEnabled,
+    required this.onSelect,
+    required this.onDeselect,
+    required this.selected,
+  });
+
+  final String text;
+  final bool multiselectEnabled;
+  final Function onSelect;
+  final Function onDeselect;
+  final bool selected;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final appSettingService = ref.watch(appSettingsServiceProvider);
+    final groupBy = useState(GroupAssetsBy.day);
+
+    useEffect(() {
+      groupBy.value = GroupAssetsBy.values[appSettingService.getSetting<int>(AppSettingsEnum.groupAssetsBy)];
+      return null;
+    }, []);
+
+    void handleTitleIconClick() {
+      ref.read(hapticFeedbackProvider.notifier).heavyImpact();
+      if (selected) {
+        onDeselect();
+      } else {
+        onSelect();
+      }
+    }
+
+    return Padding(
+      padding: EdgeInsets.only(
+        top: groupBy.value == GroupAssetsBy.month ? 32.0 : 16.0,
+        bottom: 16.0,
+        left: 12.0,
+        right: 12.0,
+      ),
+      child: Row(
+        children: [
+          Text(
+            text,
+            style: groupBy.value == GroupAssetsBy.month
+                ? context.textTheme.bodyLarge?.copyWith(fontSize: 24.0)
+                : context.textTheme.labelLarge?.copyWith(
+                    color: context.textTheme.labelLarge?.color?.withAlpha(250),
+                    fontWeight: FontWeight.w500,
+                  ),
+          ),
+          const Spacer(),
+          GestureDetector(
+            onTap: handleTitleIconClick,
+            child: multiselectEnabled && selected
+                ? Icon(
+                    Icons.check_circle_rounded,
+                    color: context.primaryColor,
+                    semanticLabel: "unselect_all_in".tr(namedArgs: {"group": text}),
+                  )
+                : Icon(
+                    Icons.check_circle_outline_rounded,
+                    color: context.colorScheme.onSurfaceSecondary,
+                    semanticLabel: "select_all_in".tr(namedArgs: {"group": text}),
+                  ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/immich_asset_grid.dart

@@ -0,0 +1,135 @@
+import 'dart:math';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
+import 'package:immich_mobile/providers/timeline.provider.dart';
+import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/widgets/asset_grid/immich_asset_grid_view.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
+
+class ImmichAssetGrid extends HookConsumerWidget {
+  final int? assetsPerRow;
+  final double margin;
+  final bool? showStorageIndicator;
+  final ImmichAssetGridSelectionListener? listener;
+  final bool selectionActive;
+  final List<Asset>? assets;
+  final RenderList? renderList;
+  final Future<void> Function()? onRefresh;
+  final Set<Asset>? preselectedAssets;
+  final bool canDeselect;
+  final bool? dynamicLayout;
+  final bool showMultiSelectIndicator;
+  final void Function(Iterable<ItemPosition> itemPositions)? visibleItemsListener;
+  final Widget? topWidget;
+  final bool shrinkWrap;
+  final bool showDragScroll;
+  final bool showDragScrollLabel;
+  final bool showStack;
+
+  const ImmichAssetGrid({
+    super.key,
+    this.assets,
+    this.onRefresh,
+    this.renderList,
+    this.assetsPerRow,
+    this.showStorageIndicator,
+    this.listener,
+    this.margin = 2.0,
+    this.selectionActive = false,
+    this.preselectedAssets,
+    this.canDeselect = true,
+    this.dynamicLayout,
+    this.showMultiSelectIndicator = true,
+    this.visibleItemsListener,
+    this.topWidget,
+    this.shrinkWrap = false,
+    this.showDragScroll = true,
+    this.showDragScrollLabel = true,
+    this.showStack = false,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    var settings = ref.watch(appSettingsServiceProvider);
+
+    final perRow = useState(assetsPerRow ?? settings.getSetting(AppSettingsEnum.tilesPerRow)!);
+    final scaleFactor = useState(7.0 - perRow.value);
+    final baseScaleFactor = useState(7.0 - perRow.value);
+
+    /// assets need different hero tags across tabs / modals
+    /// otherwise, hero animations are performed across tabs (looks buggy!)
+    int heroOffset() {
+      const int range = 1152921504606846976; // 2^60
+      final tabScope = TabsRouterScope.of(context);
+      if (tabScope != null) {
+        final int tabIndex = tabScope.controller.activeIndex;
+        return tabIndex * range;
+      }
+      return range * 7;
+    }
+
+    Widget buildAssetGridView(RenderList renderList) {
+      return RawGestureDetector(
+        gestures: {
+          CustomScaleGestureRecognizer: GestureRecognizerFactoryWithHandlers<CustomScaleGestureRecognizer>(
+            () => CustomScaleGestureRecognizer(),
+            (CustomScaleGestureRecognizer scale) {
+              scale.onStart = (details) {
+                baseScaleFactor.value = scaleFactor.value;
+              };
+
+              scale.onUpdate = (details) {
+                scaleFactor.value = max(min(5.0, baseScaleFactor.value * details.scale), 1.0);
+                if (7 - scaleFactor.value.toInt() != perRow.value) {
+                  perRow.value = 7 - scaleFactor.value.toInt();
+                  settings.setSetting(AppSettingsEnum.tilesPerRow, perRow.value);
+                }
+              };
+            },
+          ),
+        },
+        child: ImmichAssetGridView(
+          onRefresh: onRefresh,
+          assetsPerRow: perRow.value,
+          listener: listener,
+          showStorageIndicator: showStorageIndicator ?? settings.getSetting(AppSettingsEnum.storageIndicator),
+          renderList: renderList,
+          margin: margin,
+          selectionActive: selectionActive,
+          preselectedAssets: preselectedAssets,
+          canDeselect: canDeselect,
+          dynamicLayout: dynamicLayout ?? settings.getSetting(AppSettingsEnum.dynamicLayout),
+          showMultiSelectIndicator: showMultiSelectIndicator,
+          visibleItemsListener: visibleItemsListener,
+          topWidget: topWidget,
+          heroOffset: heroOffset(),
+          shrinkWrap: shrinkWrap,
+          showDragScroll: showDragScroll,
+          showStack: showStack,
+          showLabel: showDragScrollLabel,
+        ),
+      );
+    }
+
+    if (renderList != null) return buildAssetGridView(renderList!);
+
+    final renderListFuture = ref.watch(assetsTimelineProvider(assets!));
+    return renderListFuture.widgetWhen(onData: (renderList) => buildAssetGridView(renderList));
+  }
+}
+
+/// accepts a gesture even though it should reject it (because child won)
+class CustomScaleGestureRecognizer extends ScaleGestureRecognizer {
+  @override
+  void rejectGesture(int pointer) {
+    acceptGesture(pointer);
+  }
+}

mobile/lib/widgets/asset_grid/immich_asset_grid_view.dart

@@ -0,0 +1,829 @@
+import 'dart:collection';
+import 'dart:developer';
+import 'dart:math';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/services.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/collection_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/scroll_notifier.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/scroll_to_date_notifier.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/providers/tab.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/asset_grid/asset_drag_region.dart';
+import 'package:immich_mobile/widgets/asset_grid/control_bottom_app_bar.dart';
+import 'package:immich_mobile/widgets/asset_grid/thumbnail_image.dart';
+import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
+
+import 'asset_grid_data_structure.dart';
+import 'disable_multi_select_button.dart';
+import 'draggable_scrollbar_custom.dart';
+import 'group_divider_title.dart';
+
+typedef ImmichAssetGridSelectionListener = void Function(bool, Set<Asset>);
+
+class ImmichAssetGridView extends ConsumerStatefulWidget {
+  final RenderList renderList;
+  final int assetsPerRow;
+  final double margin;
+  final bool showStorageIndicator;
+  final ImmichAssetGridSelectionListener? listener;
+  final bool selectionActive;
+  final Future<void> Function()? onRefresh;
+  final Set<Asset>? preselectedAssets;
+  final bool canDeselect;
+  final bool dynamicLayout;
+  final bool showMultiSelectIndicator;
+  final void Function(Iterable<ItemPosition> itemPositions)? visibleItemsListener;
+  final Widget? topWidget;
+  final int heroOffset;
+  final bool shrinkWrap;
+  final bool showDragScroll;
+  final bool showStack;
+  final bool showLabel;
+
+  const ImmichAssetGridView({
+    super.key,
+    required this.renderList,
+    required this.assetsPerRow,
+    required this.showStorageIndicator,
+    this.listener,
+    this.margin = 5.0,
+    this.selectionActive = false,
+    this.onRefresh,
+    this.preselectedAssets,
+    this.canDeselect = true,
+    this.dynamicLayout = true,
+    this.showMultiSelectIndicator = true,
+    this.visibleItemsListener,
+    this.topWidget,
+    this.heroOffset = 0,
+    this.shrinkWrap = false,
+    this.showDragScroll = true,
+    this.showStack = false,
+    this.showLabel = true,
+  });
+
+  @override
+  createState() {
+    return ImmichAssetGridViewState();
+  }
+}
+
+class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> {
+  final ItemScrollController _itemScrollController = ItemScrollController();
+  final ScrollOffsetController _scrollOffsetController = ScrollOffsetController();
+  final ItemPositionsListener _itemPositionsListener = ItemPositionsListener.create();
+  late final KeepAliveLink currentAssetLink;
+
+  /// The timestamp when the haptic feedback was last invoked
+  int _hapticFeedbackTS = 0;
+  DateTime? _prevItemTime;
+  bool _scrolling = false;
+  final Set<Asset> _selectedAssets = LinkedHashSet(equals: (a, b) => a.id == b.id, hashCode: (a) => a.id);
+
+  bool _dragging = false;
+  int? _dragAnchorAssetIndex;
+  int? _dragAnchorSectionIndex;
+  final Set<Asset> _draggedAssets = HashSet(equals: (a, b) => a.id == b.id, hashCode: (a) => a.id);
+
+  ScrollPhysics? _scrollPhysics;
+
+  Set<Asset> _getSelectedAssets() {
+    return Set.from(_selectedAssets);
+  }
+
+  void _callSelectionListener(bool selectionActive) {
+    widget.listener?.call(selectionActive, _getSelectedAssets());
+  }
+
+  void _selectAssets(List<Asset> assets) {
+    setState(() {
+      if (_dragging) {
+        _draggedAssets.addAll(assets);
+      }
+      _selectedAssets.addAll(assets);
+      _callSelectionListener(true);
+    });
+  }
+
+  void _deselectAssets(List<Asset> assets) {
+    final assetsToDeselect = assets.where(
+      (a) => widget.canDeselect || !(widget.preselectedAssets?.contains(a) ?? false),
+    );
+
+    setState(() {
+      _selectedAssets.removeAll(assetsToDeselect);
+      if (_dragging) {
+        _draggedAssets.removeAll(assetsToDeselect);
+      }
+      _callSelectionListener(_selectedAssets.isNotEmpty);
+    });
+  }
+
+  void _deselectAll() {
+    setState(() {
+      _selectedAssets.clear();
+      _dragAnchorAssetIndex = null;
+      _dragAnchorSectionIndex = null;
+      _draggedAssets.clear();
+      _dragging = false;
+      if (!widget.canDeselect && widget.preselectedAssets != null && widget.preselectedAssets!.isNotEmpty) {
+        _selectedAssets.addAll(widget.preselectedAssets!);
+      }
+      _callSelectionListener(false);
+    });
+  }
+
+  bool _allAssetsSelected(List<Asset> assets) {
+    return widget.selectionActive && assets.firstWhereOrNull((e) => !_selectedAssets.contains(e)) == null;
+  }
+
+  Future<void> _scrollToIndex(int index) async {
+    // if the index is so far down, that the end of the list is reached on the screen
+    // the scroll_position widget crashes. This is a workaround to prevent this.
+    // If the index is within the last 10 elements, we jump instead of scrolling.
+    if (widget.renderList.elements.length <= index + 10) {
+      _itemScrollController.jumpTo(index: index);
+      return;
+    }
+    await _itemScrollController.scrollTo(index: index, alignment: 0, duration: const Duration(milliseconds: 500));
+  }
+
+  Widget _itemBuilder(BuildContext c, int position) {
+    int index = position;
+    if (widget.topWidget != null) {
+      if (index == 0) {
+        return widget.topWidget!;
+      }
+      index--;
+    }
+
+    final section = widget.renderList.elements[index];
+    return _Section(
+      showStorageIndicator: widget.showStorageIndicator,
+      selectedAssets: _selectedAssets,
+      selectionActive: widget.selectionActive,
+      sectionIndex: index,
+      section: section,
+      margin: widget.margin,
+      renderList: widget.renderList,
+      assetsPerRow: widget.assetsPerRow,
+      scrolling: _scrolling,
+      dynamicLayout: widget.dynamicLayout,
+      selectAssets: _selectAssets,
+      deselectAssets: _deselectAssets,
+      allAssetsSelected: _allAssetsSelected,
+      showStack: widget.showStack,
+      heroOffset: widget.heroOffset,
+      onAssetTap: (asset) {
+        ref.read(currentAssetProvider.notifier).set(asset);
+        ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
+        if (asset.isVideo) {
+          ref.read(showControlsProvider.notifier).show = false;
+        }
+      },
+    );
+  }
+
+  Text _labelBuilder(int pos) {
+    final maxLength = widget.renderList.elements.length;
+    if (pos < 0 || pos >= maxLength) {
+      return const Text("");
+    }
+
+    final date = widget.renderList.elements[pos % maxLength].date;
+
+    return Text(
+      DateFormat.yMMMM().format(date),
+      style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
+    );
+  }
+
+  Widget _buildMultiSelectIndicator() {
+    return DisableMultiSelectButton(onPressed: () => _deselectAll(), selectedItemCount: _selectedAssets.length);
+  }
+
+  Widget _buildAssetGrid() {
+    final useDragScrolling = widget.showDragScroll && widget.renderList.totalAssets >= 20;
+
+    void dragScrolling(bool active) {
+      if (active != _scrolling) {
+        setState(() {
+          _scrolling = active;
+        });
+      }
+    }
+
+    bool appBarOffset() {
+      return (ref.watch(tabProvider).index == 0 && ModalRoute.of(context)?.settings.name == TabControllerRoute.name) ||
+          (ModalRoute.of(context)?.settings.name == AlbumViewerRoute.name);
+    }
+
+    final listWidget = ScrollablePositionedList.builder(
+      padding: EdgeInsets.only(top: appBarOffset() ? 60 : 0, bottom: 220),
+      itemBuilder: _itemBuilder,
+      itemPositionsListener: _itemPositionsListener,
+      physics: _scrollPhysics,
+      itemScrollController: _itemScrollController,
+      scrollOffsetController: _scrollOffsetController,
+      itemCount: widget.renderList.elements.length + (widget.topWidget != null ? 1 : 0),
+      addRepaintBoundaries: true,
+      shrinkWrap: widget.shrinkWrap,
+    );
+
+    final child = (useDragScrolling && ModalRoute.of(context) != null)
+        ? DraggableScrollbar.semicircle(
+            scrollStateListener: dragScrolling,
+            itemPositionsListener: _itemPositionsListener,
+            controller: _itemScrollController,
+            backgroundColor: context.isDarkTheme
+                ? context.colorScheme.primary.darken(amount: .5)
+                : context.colorScheme.primary,
+            labelTextBuilder: widget.showLabel ? _labelBuilder : null,
+            padding: appBarOffset() ? const EdgeInsets.only(top: 60) : const EdgeInsets.only(),
+            heightOffset: appBarOffset() ? 60 : 0,
+            labelConstraints: const BoxConstraints(maxHeight: 28),
+            scrollbarAnimationDuration: const Duration(milliseconds: 300),
+            scrollbarTimeToFade: const Duration(milliseconds: 1000),
+            child: listWidget,
+          )
+        : listWidget;
+
+    return widget.onRefresh == null
+        ? child
+        : appBarOffset()
+        ? RefreshIndicator(onRefresh: widget.onRefresh!, edgeOffset: 30, child: child)
+        : RefreshIndicator(onRefresh: widget.onRefresh!, child: child);
+  }
+
+  void _scrollToDate() {
+    final date = scrollToDateNotifierProvider.value;
+    if (date == null) {
+      ImmichToast.show(
+        context: context,
+        msg: "Scroll To Date failed, date is null.",
+        gravity: ToastGravity.BOTTOM,
+        toastType: ToastType.error,
+      );
+      return;
+    }
+
+    // Search for the index of the exact date in the list
+    var index = widget.renderList.elements.indexWhere(
+      (e) => e.date.year == date.year && e.date.month == date.month && e.date.day == date.day,
+    );
+
+    // If the exact date is not found, the timeline is grouped by month,
+    // thus we search for the month
+    if (index == -1) {
+      index = widget.renderList.elements.indexWhere((e) => e.date.year == date.year && e.date.month == date.month);
+    }
+
+    if (index < widget.renderList.elements.length) {
+      // Not sure why the index is shifted, but it works. :3
+      _scrollToIndex(index + 1);
+    } else {
+      ImmichToast.show(
+        context: context,
+        msg: "The date (${DateFormat.yMd().format(date)}) could not be found in the timeline.",
+        gravity: ToastGravity.BOTTOM,
+        toastType: ToastType.error,
+      );
+    }
+  }
+
+  @override
+  void didUpdateWidget(ImmichAssetGridView oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (!widget.selectionActive) {
+      setState(() {
+        _selectedAssets.clear();
+      });
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    currentAssetLink = ref.read(currentAssetProvider.notifier).ref.keepAlive();
+    scrollToTopNotifierProvider.addListener(_scrollToTop);
+    scrollToDateNotifierProvider.addListener(_scrollToDate);
+
+    if (widget.visibleItemsListener != null) {
+      _itemPositionsListener.itemPositions.addListener(_positionListener);
+    }
+    if (widget.preselectedAssets != null) {
+      _selectedAssets.addAll(widget.preselectedAssets!);
+    }
+
+    _itemPositionsListener.itemPositions.addListener(_hapticsListener);
+  }
+
+  @override
+  void dispose() {
+    scrollToTopNotifierProvider.removeListener(_scrollToTop);
+    scrollToDateNotifierProvider.removeListener(_scrollToDate);
+    if (widget.visibleItemsListener != null) {
+      _itemPositionsListener.itemPositions.removeListener(_positionListener);
+    }
+    _itemPositionsListener.itemPositions.removeListener(_hapticsListener);
+    currentAssetLink.close();
+    super.dispose();
+  }
+
+  void _positionListener() {
+    final values = _itemPositionsListener.itemPositions.value;
+    widget.visibleItemsListener?.call(values);
+  }
+
+  void _hapticsListener() {
+    /// throttle interval for the haptic feedback in microseconds.
+    /// Currently set to 100ms.
+    const feedbackInterval = 100000;
+
+    final values = _itemPositionsListener.itemPositions.value;
+    final start = values.firstOrNull;
+
+    if (start != null) {
+      final pos = start.index;
+      final maxLength = widget.renderList.elements.length;
+      if (pos < 0 || pos >= maxLength) {
+        return;
+      }
+
+      final date = widget.renderList.elements[pos].date;
+
+      // only provide the feedback if the prev. date is known.
+      // Otherwise the app would provide the haptic feedback
+      // on startup.
+      if (_prevItemTime == null) {
+        _prevItemTime = date;
+      } else if (_prevItemTime?.year != date.year || _prevItemTime?.month != date.month) {
+        _prevItemTime = date;
+
+        final now = Timeline.now;
+        if (now > (_hapticFeedbackTS + feedbackInterval)) {
+          _hapticFeedbackTS = now;
+          ref.read(hapticFeedbackProvider.notifier).mediumImpact();
+        }
+      }
+    }
+  }
+
+  void _scrollToTop() {
+    // for some reason, this is necessary as well in order
+    // to correctly reposition the drag thumb scroll bar
+    _itemScrollController.jumpTo(index: 0);
+    _itemScrollController.scrollTo(index: 0, duration: const Duration(milliseconds: 200));
+  }
+
+  void _setDragStartIndex(AssetIndex index) {
+    setState(() {
+      _scrollPhysics = const ClampingScrollPhysics();
+      _dragAnchorAssetIndex = index.rowIndex;
+      _dragAnchorSectionIndex = index.sectionIndex;
+      _dragging = true;
+    });
+  }
+
+  void _stopDrag() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      // Update the physics post frame to prevent sudden change in physics on iOS.
+      setState(() {
+        _scrollPhysics = null;
+      });
+    });
+    setState(() {
+      _dragging = false;
+      _draggedAssets.clear();
+    });
+  }
+
+  void _dragDragScroll(ScrollDirection direction) {
+    _scrollOffsetController.animateScroll(
+      offset: direction == ScrollDirection.forward ? 175 : -175,
+      duration: const Duration(milliseconds: 125),
+    );
+  }
+
+  void _handleDragAssetEnter(AssetIndex index) {
+    if (_dragAnchorSectionIndex == null || _dragAnchorAssetIndex == null) {
+      return;
+    }
+
+    final dragAnchorSectionIndex = _dragAnchorSectionIndex!;
+    final dragAnchorAssetIndex = _dragAnchorAssetIndex!;
+
+    late final int startSectionIndex;
+    late final int startSectionAssetIndex;
+    late final int endSectionIndex;
+    late final int endSectionAssetIndex;
+
+    if (index.sectionIndex < dragAnchorSectionIndex) {
+      startSectionIndex = index.sectionIndex;
+      startSectionAssetIndex = index.rowIndex;
+      endSectionIndex = dragAnchorSectionIndex;
+      endSectionAssetIndex = dragAnchorAssetIndex;
+    } else if (index.sectionIndex > dragAnchorSectionIndex) {
+      startSectionIndex = dragAnchorSectionIndex;
+      startSectionAssetIndex = dragAnchorAssetIndex;
+      endSectionIndex = index.sectionIndex;
+      endSectionAssetIndex = index.rowIndex;
+    } else {
+      startSectionIndex = dragAnchorSectionIndex;
+      endSectionIndex = dragAnchorSectionIndex;
+
+      // If same section, assign proper start / end asset Index
+      if (dragAnchorAssetIndex < index.rowIndex) {
+        startSectionAssetIndex = dragAnchorAssetIndex;
+        endSectionAssetIndex = index.rowIndex;
+      } else {
+        startSectionAssetIndex = index.rowIndex;
+        endSectionAssetIndex = dragAnchorAssetIndex;
+      }
+    }
+
+    final selectedAssets = <Asset>{};
+    var currentSectionIndex = startSectionIndex;
+    while (currentSectionIndex < endSectionIndex) {
+      final section = widget.renderList.elements.elementAtOrNull(currentSectionIndex);
+      if (section == null) continue;
+
+      final sectionAssets = widget.renderList.loadAssets(section.offset, section.count);
+
+      if (currentSectionIndex == startSectionIndex) {
+        selectedAssets.addAll(sectionAssets.slice(startSectionAssetIndex, sectionAssets.length));
+      } else {
+        selectedAssets.addAll(sectionAssets);
+      }
+
+      currentSectionIndex += 1;
+    }
+
+    final section = widget.renderList.elements.elementAtOrNull(endSectionIndex);
+    if (section != null) {
+      final sectionAssets = widget.renderList.loadAssets(section.offset, section.count);
+      if (startSectionIndex == endSectionIndex) {
+        selectedAssets.addAll(sectionAssets.slice(startSectionAssetIndex, endSectionAssetIndex + 1));
+      } else {
+        selectedAssets.addAll(sectionAssets.slice(0, endSectionAssetIndex + 1));
+      }
+    }
+
+    _deselectAssets(_draggedAssets.toList());
+    _draggedAssets.clear();
+    _draggedAssets.addAll(selectedAssets);
+    _selectAssets(_draggedAssets.toList());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return PopScope(
+      canPop: !(widget.selectionActive && _selectedAssets.isNotEmpty),
+      onPopInvokedWithResult: (didPop, _) {
+        if (didPop) {
+          return;
+        } else {
+          /// `preselectedAssets` is only present when opening the asset grid from the
+          /// "add to album" button.
+          ///
+          /// `_selectedAssets` includes `preselectedAssets` on initialization.
+          if (_selectedAssets.length > (widget.preselectedAssets?.length ?? 0)) {
+            /// `_deselectAll` only deselects the selected assets,
+            /// doesn't affect the preselected ones.
+            _deselectAll();
+            return;
+          } else {
+            Navigator.of(context).canPop() ? Navigator.of(context).pop() : null;
+          }
+        }
+      },
+      child: Stack(
+        children: [
+          AssetDragRegion(
+            onStart: _setDragStartIndex,
+            onAssetEnter: _handleDragAssetEnter,
+            onEnd: _stopDrag,
+            onScroll: _dragDragScroll,
+            onScrollStart: () =>
+                WidgetsBinding.instance.addPostFrameCallback((_) => controlBottomAppBarNotifier.minimize()),
+            child: _buildAssetGrid(),
+          ),
+          if (widget.showMultiSelectIndicator && widget.selectionActive) _buildMultiSelectIndicator(),
+        ],
+      ),
+    );
+  }
+}
+
+/// A single row of all placeholder widgets
+class _PlaceholderRow extends StatelessWidget {
+  final int number;
+  final double width;
+  final double height;
+  final double margin;
+
+  const _PlaceholderRow({
+    super.key,
+    required this.number,
+    required this.width,
+    required this.height,
+    required this.margin,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        for (int i = 0; i < number; i++)
+          ThumbnailPlaceholder(
+            key: ValueKey(i),
+            width: width,
+            height: height,
+            margin: EdgeInsets.only(bottom: margin, right: i + 1 == number ? 0.0 : margin),
+          ),
+      ],
+    );
+  }
+}
+
+/// A section for the render grid
+class _Section extends StatelessWidget {
+  final RenderAssetGridElement section;
+  final int sectionIndex;
+  final Set<Asset> selectedAssets;
+  final bool scrolling;
+  final double margin;
+  final int assetsPerRow;
+  final RenderList renderList;
+  final bool selectionActive;
+  final bool dynamicLayout;
+  final void Function(List<Asset>) selectAssets;
+  final void Function(List<Asset>) deselectAssets;
+  final bool Function(List<Asset>) allAssetsSelected;
+  final bool showStack;
+  final int heroOffset;
+  final bool showStorageIndicator;
+  final void Function(Asset) onAssetTap;
+
+  const _Section({
+    required this.section,
+    required this.sectionIndex,
+    required this.scrolling,
+    required this.margin,
+    required this.assetsPerRow,
+    required this.renderList,
+    required this.selectionActive,
+    required this.dynamicLayout,
+    required this.selectAssets,
+    required this.deselectAssets,
+    required this.allAssetsSelected,
+    required this.selectedAssets,
+    required this.showStack,
+    required this.heroOffset,
+    required this.showStorageIndicator,
+    required this.onAssetTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final width = constraints.maxWidth / assetsPerRow - margin * (assetsPerRow - 1) / assetsPerRow;
+        final rows = (section.count + assetsPerRow - 1) ~/ assetsPerRow;
+        final List<Asset> assetsToRender = scrolling ? [] : renderList.loadAssets(section.offset, section.count);
+        return Column(
+          key: ValueKey(section.offset),
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if (section.type == RenderAssetGridElementType.monthTitle) _MonthTitle(date: section.date),
+            if (section.type == RenderAssetGridElementType.groupDividerTitle ||
+                section.type == RenderAssetGridElementType.monthTitle)
+              _Title(
+                selectionActive: selectionActive,
+                title: section.title!,
+                assets: scrolling ? [] : renderList.loadAssets(section.offset, section.totalCount),
+                allAssetsSelected: allAssetsSelected,
+                selectAssets: selectAssets,
+                deselectAssets: deselectAssets,
+              ),
+            for (int i = 0; i < rows; i++)
+              scrolling
+                  ? _PlaceholderRow(
+                      key: ValueKey(i),
+                      number: i + 1 == rows ? section.count - i * assetsPerRow : assetsPerRow,
+                      width: width,
+                      height: width,
+                      margin: margin,
+                    )
+                  : _AssetRow(
+                      key: ValueKey(i),
+                      rowStartIndex: i * assetsPerRow,
+                      sectionIndex: sectionIndex,
+                      assets: assetsToRender.nestedSlice(i * assetsPerRow, min((i + 1) * assetsPerRow, section.count)),
+                      absoluteOffset: section.offset + i * assetsPerRow,
+                      width: width,
+                      assetsPerRow: assetsPerRow,
+                      margin: margin,
+                      dynamicLayout: dynamicLayout,
+                      renderList: renderList,
+                      selectedAssets: selectedAssets,
+                      isSelectionActive: selectionActive,
+                      showStack: showStack,
+                      heroOffset: heroOffset,
+                      showStorageIndicator: showStorageIndicator,
+                      selectionActive: selectionActive,
+                      onSelect: (asset) => selectAssets([asset]),
+                      onDeselect: (asset) => deselectAssets([asset]),
+                      onAssetTap: onAssetTap,
+                    ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+/// The month title row for a section
+class _MonthTitle extends StatelessWidget {
+  final DateTime date;
+
+  const _MonthTitle({required this.date});
+
+  @override
+  Widget build(BuildContext context) {
+    final monthFormat = DateTime.now().year == date.year ? DateFormat.MMMM() : DateFormat.yMMMM();
+    final String title = monthFormat.format(date);
+    return Padding(
+      key: Key("month-$title"),
+      padding: const EdgeInsets.only(left: 12.0, top: 24.0),
+      child: Text(
+        toBeginningOfSentenceCase(title, context.locale.languageCode),
+        style: const TextStyle(fontSize: 26, fontWeight: FontWeight.w500),
+      ),
+    );
+  }
+}
+
+/// A title row
+class _Title extends StatelessWidget {
+  final String title;
+  final List<Asset> assets;
+  final bool selectionActive;
+  final void Function(List<Asset>) selectAssets;
+  final void Function(List<Asset>) deselectAssets;
+  final bool Function(List<Asset>) allAssetsSelected;
+
+  const _Title({
+    required this.title,
+    required this.assets,
+    required this.selectionActive,
+    required this.selectAssets,
+    required this.deselectAssets,
+    required this.allAssetsSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GroupDividerTitle(
+      text: toBeginningOfSentenceCase(title, context.locale.languageCode),
+      multiselectEnabled: selectionActive,
+      onSelect: () => selectAssets(assets),
+      onDeselect: () => deselectAssets(assets),
+      selected: allAssetsSelected(assets),
+    );
+  }
+}
+
+/// The row of assets
+class _AssetRow extends StatelessWidget {
+  final List<Asset> assets;
+  final int rowStartIndex;
+  final int sectionIndex;
+  final Set<Asset> selectedAssets;
+  final int absoluteOffset;
+  final double width;
+  final bool dynamicLayout;
+  final double margin;
+  final int assetsPerRow;
+  final RenderList renderList;
+  final bool selectionActive;
+  final bool showStorageIndicator;
+  final int heroOffset;
+  final bool showStack;
+  final void Function(Asset) onAssetTap;
+  final void Function(Asset)? onSelect;
+  final void Function(Asset)? onDeselect;
+  final bool isSelectionActive;
+
+  const _AssetRow({
+    super.key,
+    required this.rowStartIndex,
+    required this.sectionIndex,
+    required this.assets,
+    required this.absoluteOffset,
+    required this.width,
+    required this.dynamicLayout,
+    required this.margin,
+    required this.assetsPerRow,
+    required this.renderList,
+    required this.selectionActive,
+    required this.showStorageIndicator,
+    required this.heroOffset,
+    required this.showStack,
+    required this.isSelectionActive,
+    required this.selectedAssets,
+    required this.onAssetTap,
+    this.onSelect,
+    this.onDeselect,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Default: All assets have the same width
+    final widthDistribution = List.filled(assets.length, 1.0);
+
+    if (dynamicLayout) {
+      final aspectRatios = assets.map((e) => (e.width ?? 1) / (e.height ?? 1)).toList();
+      final meanAspectRatio = aspectRatios.sum / assets.length;
+
+      // 1: mean width
+      // 0.5: width < mean - threshold
+      // 1.5: width > mean + threshold
+      final arConfiguration = aspectRatios.map((e) {
+        if (e - meanAspectRatio > 0.3) return 1.5;
+        if (e - meanAspectRatio < -0.3) return 0.5;
+        return 1.0;
+      });
+
+      // Normalize:
+      final sum = arConfiguration.sum;
+      widthDistribution.setRange(0, widthDistribution.length, arConfiguration.map((e) => (e * assets.length) / sum));
+    }
+    return Row(
+      key: key,
+      children: assets.mapIndexed((int index, Asset asset) {
+        final bool last = index + 1 == assetsPerRow;
+        final isSelected = isSelectionActive && selectedAssets.contains(asset);
+        return Container(
+          width: width * widthDistribution[index],
+          height: width,
+          margin: EdgeInsets.only(bottom: margin, right: last ? 0.0 : margin),
+          child: GestureDetector(
+            onTap: () {
+              if (selectionActive) {
+                if (isSelected) {
+                  onDeselect?.call(asset);
+                } else {
+                  onSelect?.call(asset);
+                }
+              } else {
+                final asset = renderList.loadAsset(absoluteOffset + index);
+                onAssetTap(asset);
+                context.pushRoute(
+                  GalleryViewerRoute(
+                    renderList: renderList,
+                    initialIndex: absoluteOffset + index,
+                    heroOffset: heroOffset,
+                    showStack: showStack,
+                  ),
+                );
+              }
+            },
+            onLongPress: () {
+              onSelect?.call(asset);
+              HapticFeedback.heavyImpact();
+            },
+            child: AssetIndexWrapper(
+              rowIndex: rowStartIndex + index,
+              sectionIndex: sectionIndex,
+              child: ThumbnailImage(
+                asset: asset,
+                multiselectEnabled: selectionActive,
+                isSelected: isSelectionActive && selectedAssets.contains(asset),
+                showStorageIndicator: showStorageIndicator,
+                heroOffset: heroOffset,
+                showStack: showStack,
+              ),
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/multiselect_grid.dart

@@ -0,0 +1,458 @@
+import 'dart:async';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/entities/album.entity.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/collection_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/models/asset_selection_state.dart';
+import 'package:immich_mobile/providers/album/album.provider.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/download.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+import 'package:immich_mobile/providers/multiselect.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/album.service.dart';
+import 'package:immich_mobile/services/stack.service.dart';
+import 'package:immich_mobile/utils/immich_loading_overlay.dart';
+import 'package:immich_mobile/utils/selection_handlers.dart';
+import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/widgets/asset_grid/control_bottom_app_bar.dart';
+import 'package:immich_mobile/widgets/asset_grid/immich_asset_grid.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class MultiselectGrid extends HookConsumerWidget {
+  const MultiselectGrid({
+    super.key,
+    required this.renderListProvider,
+    this.onRefresh,
+    this.buildLoadingIndicator,
+    this.onRemoveFromAlbum,
+    this.topWidget,
+    this.stackEnabled = false,
+    this.dragScrollLabelEnabled = true,
+    this.archiveEnabled = false,
+    this.deleteEnabled = true,
+    this.favoriteEnabled = true,
+    this.editEnabled = false,
+    this.unarchive = false,
+    this.unfavorite = false,
+    this.downloadEnabled = true,
+    this.emptyIndicator,
+  });
+
+  final ProviderListenable<AsyncValue<RenderList>> renderListProvider;
+  final Future<void> Function()? onRefresh;
+  final Widget Function()? buildLoadingIndicator;
+  final Future<bool> Function(Iterable<Asset>)? onRemoveFromAlbum;
+  final Widget? topWidget;
+  final bool stackEnabled;
+  final bool dragScrollLabelEnabled;
+  final bool archiveEnabled;
+  final bool unarchive;
+  final bool deleteEnabled;
+  final bool downloadEnabled;
+  final bool favoriteEnabled;
+  final bool unfavorite;
+  final bool editEnabled;
+  final Widget? emptyIndicator;
+  Widget buildDefaultLoadingIndicator() => const Center(child: CircularProgressIndicator());
+
+  Widget buildEmptyIndicator() => emptyIndicator ?? Center(child: const Text("no_assets_to_show").tr());
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final multiselectEnabled = ref.watch(multiselectProvider.notifier);
+    final selectionEnabledHook = useState(false);
+    final selectionAssetState = useState(const AssetSelectionState());
+
+    final selection = useState(<Asset>{});
+    final currentUser = ref.watch(currentUserProvider);
+    final processing = useProcessingOverlay();
+
+    useEffect(() {
+      selectionEnabledHook.addListener(() {
+        multiselectEnabled.state = selectionEnabledHook.value;
+      });
+
+      return () {
+        // This does not work in tests
+        if (kReleaseMode) {
+          selectionEnabledHook.dispose();
+        }
+      };
+    }, []);
+
+    void selectionListener(bool multiselect, Set<Asset> selectedAssets) {
+      selectionEnabledHook.value = multiselect;
+      selection.value = selectedAssets;
+      selectionAssetState.value = AssetSelectionState.fromSelection(selectedAssets);
+    }
+
+    errorBuilder(String? msg) => msg != null && msg.isNotEmpty
+        ? () => ImmichToast.show(context: context, msg: msg, gravity: ToastGravity.BOTTOM)
+        : null;
+
+    Iterable<Asset> ownedRemoteSelection({String? localErrorMessage, String? ownerErrorMessage}) {
+      final assets = selection.value;
+      return assets
+          .remoteOnly(errorCallback: errorBuilder(localErrorMessage))
+          .ownedOnly(currentUser, errorCallback: errorBuilder(ownerErrorMessage));
+    }
+
+    Iterable<Asset> remoteSelection({String? errorMessage}) =>
+        selection.value.remoteOnly(errorCallback: errorBuilder(errorMessage));
+
+    void onShareAssets(bool shareLocal) {
+      processing.value = true;
+      if (shareLocal) {
+        // Share = Download + Send to OS specific share sheet
+        handleShareAssets(ref, context, selection.value);
+      } else {
+        final ids = remoteSelection(errorMessage: "home_page_share_err_local".tr()).map((e) => e.remoteId!);
+        context.pushRoute(SharedLinkEditRoute(assetsList: ids.toList()));
+      }
+      processing.value = false;
+      selectionEnabledHook.value = false;
+    }
+
+    void onFavoriteAssets() async {
+      processing.value = true;
+      try {
+        final remoteAssets = ownedRemoteSelection(
+          localErrorMessage: 'home_page_favorite_err_local'.tr(),
+          ownerErrorMessage: 'home_page_favorite_err_partner'.tr(),
+        );
+        if (remoteAssets.isNotEmpty) {
+          await handleFavoriteAssets(ref, context, remoteAssets.toList());
+        }
+      } finally {
+        processing.value = false;
+        selectionEnabledHook.value = false;
+      }
+    }
+
+    void onArchiveAsset() async {
+      processing.value = true;
+      try {
+        final remoteAssets = ownedRemoteSelection(
+          localErrorMessage: 'home_page_archive_err_local'.tr(),
+          ownerErrorMessage: 'home_page_archive_err_partner'.tr(),
+        );
+        await handleArchiveAssets(ref, context, remoteAssets.toList());
+      } finally {
+        processing.value = false;
+        selectionEnabledHook.value = false;
+      }
+    }
+
+    void onDelete([bool force = false]) async {
+      processing.value = true;
+      try {
+        final toDelete = selection.value
+            .ownedOnly(currentUser, errorCallback: errorBuilder('home_page_delete_err_partner'.tr()))
+            .toList();
+        final isDeleted = await ref.read(assetProvider.notifier).deleteAssets(toDelete, force: force);
+
+        if (isDeleted) {
+          ImmichToast.show(
+            context: context,
+            msg: force
+                ? 'assets_deleted_permanently'.tr(namedArgs: {'count': "${selection.value.length}"})
+                : 'assets_trashed'.tr(namedArgs: {'count': "${selection.value.length}"}),
+            gravity: ToastGravity.BOTTOM,
+          );
+          selectionEnabledHook.value = false;
+        }
+      } finally {
+        processing.value = false;
+      }
+    }
+
+    void onDeleteLocal(bool isMergedAsset) async {
+      processing.value = true;
+      try {
+        final localAssets = selection.value.where((a) => a.isLocal).toList();
+
+        final toDelete = isMergedAsset ? localAssets.where((e) => e.storage == AssetState.merged) : localAssets;
+
+        if (toDelete.isEmpty) {
+          return;
+        }
+
+        final isDeleted = await ref.read(assetProvider.notifier).deleteLocalAssets(toDelete.toList());
+
+        if (isDeleted) {
+          final deletedCount = localAssets.where((e) => !isMergedAsset || e.isRemote).length;
+
+          ImmichToast.show(
+            context: context,
+            msg: 'assets_removed_permanently_from_device'.tr(namedArgs: {'count': "$deletedCount"}),
+            gravity: ToastGravity.BOTTOM,
+          );
+
+          selectionEnabledHook.value = false;
+        }
+      } finally {
+        processing.value = false;
+      }
+    }
+
+    void onDownload() async {
+      processing.value = true;
+      try {
+        final toDownload = selection.value.toList();
+
+        final results = await ref.read(downloadStateProvider.notifier).downloadAllAsset(toDownload);
+
+        final totalCount = toDownload.length;
+        final successCount = results.where((e) => e).length;
+        final failedCount = totalCount - successCount;
+
+        final msg = failedCount > 0
+            ? 'assets_downloaded_failed'.t(context: context, args: {'count': successCount, 'error': failedCount})
+            : 'assets_downloaded_successfully'.t(context: context, args: {'count': successCount});
+
+        ImmichToast.show(context: context, msg: msg, gravity: ToastGravity.BOTTOM);
+      } finally {
+        processing.value = false;
+        selectionEnabledHook.value = false;
+      }
+    }
+
+    void onDeleteRemote([bool shouldDeletePermanently = false]) async {
+      processing.value = true;
+      try {
+        final toDelete = ownedRemoteSelection(
+          localErrorMessage: 'home_page_delete_remote_err_local'.tr(),
+          ownerErrorMessage: 'home_page_delete_err_partner'.tr(),
+        ).toList();
+
+        final isDeleted = await ref
+            .read(assetProvider.notifier)
+            .deleteRemoteAssets(toDelete, shouldDeletePermanently: shouldDeletePermanently);
+        if (isDeleted) {
+          ImmichToast.show(
+            context: context,
+            msg: shouldDeletePermanently
+                ? 'assets_deleted_permanently_from_server'.tr(namedArgs: {'count': "${toDelete.length}"})
+                : 'assets_trashed_from_server'.tr(namedArgs: {'count': "${toDelete.length}"}),
+            gravity: ToastGravity.BOTTOM,
+          );
+        }
+      } finally {
+        selectionEnabledHook.value = false;
+        processing.value = false;
+      }
+    }
+
+    void onUpload() {
+      processing.value = true;
+      selectionEnabledHook.value = false;
+      try {
+        ref
+            .read(manualUploadProvider.notifier)
+            .uploadAssets(context, selection.value.where((a) => a.storage == AssetState.local));
+      } finally {
+        processing.value = false;
+      }
+    }
+
+    void onAddToAlbum(Album album) async {
+      processing.value = true;
+      try {
+        final Iterable<Asset> assets = remoteSelection(errorMessage: "home_page_add_to_album_err_local".tr());
+        if (assets.isEmpty) {
+          return;
+        }
+        final result = await ref.read(albumServiceProvider).addAssets(album, assets);
+
+        if (result != null) {
+          if (result.alreadyInAlbum.isNotEmpty) {
+            ImmichToast.show(
+              context: context,
+              msg: "home_page_add_to_album_conflicts".tr(
+                namedArgs: {
+                  "album": album.name,
+                  "added": result.successfullyAdded.toString(),
+                  "failed": result.alreadyInAlbum.length.toString(),
+                },
+              ),
+            );
+          } else {
+            ImmichToast.show(
+              context: context,
+              msg: "home_page_add_to_album_success".tr(
+                namedArgs: {"album": album.name, "added": result.successfullyAdded.toString()},
+              ),
+              toastType: ToastType.success,
+            );
+          }
+        }
+      } finally {
+        processing.value = false;
+        selectionEnabledHook.value = false;
+      }
+    }
+
+    void onCreateNewAlbum() async {
+      processing.value = true;
+      try {
+        final Iterable<Asset> assets = remoteSelection(errorMessage: "home_page_add_to_album_err_local".tr());
+        if (assets.isEmpty) {
+          return;
+        }
+        final result = await ref.read(albumServiceProvider).createAlbumWithGeneratedName(assets);
+
+        if (result != null) {
+          unawaited(ref.watch(albumProvider.notifier).refreshRemoteAlbums());
+          selectionEnabledHook.value = false;
+
+          unawaited(context.pushRoute(AlbumViewerRoute(albumId: result.id)));
+        }
+      } finally {
+        processing.value = false;
+      }
+    }
+
+    void onStack() async {
+      try {
+        processing.value = true;
+        if (!selectionEnabledHook.value || selection.value.length < 2) {
+          return;
+        }
+
+        await ref.read(stackServiceProvider).createStack(selection.value.map((e) => e.remoteId!).toList());
+      } finally {
+        processing.value = false;
+        selectionEnabledHook.value = false;
+      }
+    }
+
+    void onEditTime() async {
+      try {
+        final remoteAssets = ownedRemoteSelection(
+          localErrorMessage: 'home_page_favorite_err_local'.tr(),
+          ownerErrorMessage: 'home_page_favorite_err_partner'.tr(),
+        );
+
+        if (remoteAssets.isNotEmpty) {
+          unawaited(handleEditDateTime(ref, context, remoteAssets.toList()));
+        }
+      } finally {
+        selectionEnabledHook.value = false;
+      }
+    }
+
+    void onEditLocation() async {
+      try {
+        final remoteAssets = ownedRemoteSelection(
+          localErrorMessage: 'home_page_favorite_err_local'.tr(),
+          ownerErrorMessage: 'home_page_favorite_err_partner'.tr(),
+        );
+
+        if (remoteAssets.isNotEmpty) {
+          unawaited(handleEditLocation(ref, context, remoteAssets.toList()));
+        }
+      } finally {
+        selectionEnabledHook.value = false;
+      }
+    }
+
+    void onToggleLockedVisibility() async {
+      processing.value = true;
+      try {
+        final remoteAssets = ownedRemoteSelection(
+          localErrorMessage: 'home_page_locked_error_local'.tr(),
+          ownerErrorMessage: 'home_page_locked_error_partner'.tr(),
+        );
+        if (remoteAssets.isNotEmpty) {
+          final isInLockedView = ref.read(inLockedViewProvider);
+          final visibility = isInLockedView ? AssetVisibilityEnum.timeline : AssetVisibilityEnum.locked;
+
+          await handleSetAssetsVisibility(ref, context, visibility, remoteAssets.toList());
+        }
+      } finally {
+        processing.value = false;
+        selectionEnabledHook.value = false;
+      }
+    }
+
+    Future<T> Function() wrapLongRunningFun<T>(Future<T> Function() fun, {bool showOverlay = true}) => () async {
+      if (showOverlay) processing.value = true;
+      try {
+        final result = await fun();
+        if (result.runtimeType != bool || result == true) {
+          selectionEnabledHook.value = false;
+        }
+        return result;
+      } finally {
+        if (showOverlay) processing.value = false;
+      }
+    };
+
+    return SafeArea(
+      top: true,
+      bottom: false,
+      child: Stack(
+        children: [
+          ref
+              .watch(renderListProvider)
+              .when(
+                data: (data) => data.isEmpty && (buildLoadingIndicator != null || topWidget == null)
+                    ? (buildLoadingIndicator ?? buildEmptyIndicator)()
+                    : ImmichAssetGrid(
+                        renderList: data,
+                        listener: selectionListener,
+                        selectionActive: selectionEnabledHook.value,
+                        onRefresh: onRefresh == null ? null : wrapLongRunningFun(onRefresh!, showOverlay: false),
+                        topWidget: topWidget,
+                        showStack: stackEnabled,
+                        showDragScrollLabel: dragScrollLabelEnabled,
+                      ),
+                error: (error, _) => Center(child: Text(error.toString())),
+                loading: buildLoadingIndicator ?? buildDefaultLoadingIndicator,
+              ),
+          if (selectionEnabledHook.value)
+            ControlBottomAppBar(
+              key: const ValueKey("controlBottomAppBar"),
+              onShare: onShareAssets,
+              onFavorite: favoriteEnabled ? onFavoriteAssets : null,
+              onArchive: archiveEnabled ? onArchiveAsset : null,
+              onDelete: deleteEnabled ? onDelete : null,
+              onDeleteServer: deleteEnabled ? onDeleteRemote : null,
+              onDownload: downloadEnabled ? onDownload : null,
+
+              /// local file deletion is allowed irrespective of [deleteEnabled] since it has
+              /// nothing to do with the state of the asset in the Immich server
+              onDeleteLocal: onDeleteLocal,
+              onAddToAlbum: onAddToAlbum,
+              onCreateNewAlbum: onCreateNewAlbum,
+              onUpload: onUpload,
+              enabled: !processing.value,
+              selectionAssetState: selectionAssetState.value,
+              selectedAssets: selection.value.toList(),
+              onStack: stackEnabled ? onStack : null,
+              onEditTime: editEnabled ? onEditTime : null,
+              onEditLocation: editEnabled ? onEditLocation : null,
+              unfavorite: unfavorite,
+              unarchive: unarchive,
+              onToggleLocked: onToggleLockedVisibility,
+              onRemoveFromAlbum: onRemoveFromAlbum != null
+                  ? wrapLongRunningFun(() => onRemoveFromAlbum!(selection.value))
+                  : null,
+            ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/multiselect_grid_status_indicator.dart

@@ -0,0 +1,26 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/providers/asset_viewer/render_list_status_provider.dart';
+import 'package:immich_mobile/widgets/common/delayed_loading_indicator.dart';
+
+class MultiselectGridStatusIndicator extends HookConsumerWidget {
+  const MultiselectGridStatusIndicator({super.key, this.buildLoadingIndicator, this.emptyIndicator});
+
+  final Widget Function()? buildLoadingIndicator;
+  final Widget? emptyIndicator;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final renderListStatus = ref.watch(renderListStatusProvider);
+    return switch (renderListStatus) {
+      RenderListStatusEnum.loading =>
+        buildLoadingIndicator == null
+            ? const Center(child: DelayedLoadingIndicator(delay: Duration(milliseconds: 500)))
+            : buildLoadingIndicator!(),
+      RenderListStatusEnum.empty => emptyIndicator ?? Center(child: const Text("no_assets_to_show").tr()),
+      RenderListStatusEnum.error => Center(child: const Text("error_loading_assets").tr()),
+      RenderListStatusEnum.complete => const SizedBox(),
+    };
+  }
+}

mobile/lib/widgets/asset_grid/thumbnail_image.dart

@@ -0,0 +1,259 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/constants/constants.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
+
+class ThumbnailImage extends StatelessWidget {
+  /// The asset to show the thumbnail image for
+  final Asset asset;
+
+  /// Whether to show the storage indicator icont over the image or not
+  final bool showStorageIndicator;
+
+  /// Whether to show the show stack icon over the image or not
+  final bool showStack;
+
+  /// Whether to show the checkmark indicating that this image is selected
+  final bool isSelected;
+
+  /// Can override [isSelected] and never show the selection indicator
+  final bool multiselectEnabled;
+
+  /// If we are allowed to deselect this image
+  final bool canDeselect;
+
+  /// The offset index to apply to this hero tag for animation
+  final int heroOffset;
+
+  const ThumbnailImage({
+    super.key,
+    required this.asset,
+    this.showStorageIndicator = true,
+    this.showStack = false,
+    this.isSelected = false,
+    this.multiselectEnabled = false,
+    this.heroOffset = 0,
+    this.canDeselect = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final assetContainerColor = context.isDarkTheme
+        ? context.primaryColor.darken(amount: 0.6)
+        : context.primaryColor.lighten(amount: 0.8);
+
+    return Stack(
+      children: [
+        AnimatedContainer(
+          duration: const Duration(milliseconds: 300),
+          curve: Curves.decelerate,
+          decoration: BoxDecoration(
+            border: multiselectEnabled && isSelected
+                ? canDeselect
+                      ? Border.all(color: assetContainerColor, width: 8)
+                      : const Border(
+                          top: BorderSide(color: Colors.grey, width: 8),
+                          right: BorderSide(color: Colors.grey, width: 8),
+                          bottom: BorderSide(color: Colors.grey, width: 8),
+                          left: BorderSide(color: Colors.grey, width: 8),
+                        )
+                : const Border(),
+          ),
+          child: Stack(
+            children: [
+              _ImageIcon(
+                heroOffset: heroOffset,
+                asset: asset,
+                assetContainerColor: assetContainerColor,
+                multiselectEnabled: multiselectEnabled,
+                canDeselect: canDeselect,
+                isSelected: isSelected,
+              ),
+              if (showStorageIndicator) _StorageIcon(storage: asset.storage),
+              if (asset.isFavorite)
+                const Positioned(left: 8, bottom: 5, child: Icon(Icons.favorite, color: Colors.white, size: 16)),
+              if (asset.isVideo) _VideoIcon(duration: asset.duration),
+              if (asset.stackCount > 0) _StackIcon(isVideo: asset.isVideo, stackCount: asset.stackCount),
+            ],
+          ),
+        ),
+        if (multiselectEnabled)
+          isSelected
+              ? const Padding(
+                  padding: EdgeInsets.all(3.0),
+                  child: Align(alignment: Alignment.topLeft, child: _SelectedIcon()),
+                )
+              : const Icon(Icons.circle_outlined, color: Colors.white),
+      ],
+    );
+  }
+}
+
+class _SelectedIcon extends StatelessWidget {
+  const _SelectedIcon();
+
+  @override
+  Widget build(BuildContext context) {
+    final assetContainerColor = context.isDarkTheme
+        ? context.primaryColor.darken(amount: 0.6)
+        : context.primaryColor.lighten(amount: 0.8);
+
+    return DecoratedBox(
+      decoration: BoxDecoration(shape: BoxShape.circle, color: assetContainerColor),
+      child: Icon(Icons.check_circle_rounded, color: context.primaryColor),
+    );
+  }
+}
+
+class _VideoIcon extends StatelessWidget {
+  final Duration duration;
+
+  const _VideoIcon({required this.duration});
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      top: 5,
+      right: 8,
+      child: Row(
+        children: [
+          Text(
+            duration.format(),
+            style: const TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold),
+          ),
+          const SizedBox(width: 3),
+          const Icon(Icons.play_circle_fill_rounded, color: Colors.white, size: 18),
+        ],
+      ),
+    );
+  }
+}
+
+class _StackIcon extends StatelessWidget {
+  final bool isVideo;
+  final int stackCount;
+
+  const _StackIcon({required this.isVideo, required this.stackCount});
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      top: isVideo ? 28 : 5,
+      right: 8,
+      child: Row(
+        children: [
+          if (stackCount > 1)
+            Text(
+              "$stackCount",
+              style: const TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold),
+            ),
+          if (stackCount > 1) const SizedBox(width: 3),
+          const Icon(Icons.burst_mode_rounded, color: Colors.white, size: 18),
+        ],
+      ),
+    );
+  }
+}
+
+class _StorageIcon extends StatelessWidget {
+  final AssetState storage;
+
+  const _StorageIcon({required this.storage});
+
+  @override
+  Widget build(BuildContext context) {
+    return switch (storage) {
+      AssetState.local => const Positioned(
+        right: 8,
+        bottom: 5,
+        child: Icon(
+          Icons.cloud_off_outlined,
+          color: Color.fromRGBO(255, 255, 255, 0.8),
+          size: 16,
+          shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0))],
+        ),
+      ),
+      AssetState.remote => const Positioned(
+        right: 8,
+        bottom: 5,
+        child: Icon(
+          Icons.cloud_outlined,
+          color: Color.fromRGBO(255, 255, 255, 0.8),
+          size: 16,
+          shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0))],
+        ),
+      ),
+      AssetState.merged => const Positioned(
+        right: 8,
+        bottom: 5,
+        child: Icon(
+          Icons.cloud_done_outlined,
+          color: Color.fromRGBO(255, 255, 255, 0.8),
+          size: 16,
+          shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0))],
+        ),
+      ),
+    };
+  }
+}
+
+class _ImageIcon extends StatelessWidget {
+  final int heroOffset;
+  final Asset asset;
+  final Color assetContainerColor;
+  final bool multiselectEnabled;
+  final bool canDeselect;
+  final bool isSelected;
+
+  const _ImageIcon({
+    required this.heroOffset,
+    required this.asset,
+    required this.assetContainerColor,
+    required this.multiselectEnabled,
+    required this.canDeselect,
+    required this.isSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
+    final isDto = asset.id == noDbId;
+    final image = SizedBox.expand(
+      child: Hero(
+        tag: isDto ? '${asset.remoteId}-$heroOffset' : asset.id + heroOffset,
+        child: Stack(
+          children: [
+            SizedBox.expand(child: ImmichThumbnail(asset: asset, height: 250, width: 250)),
+            const DecoratedBox(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  colors: [
+                    Color.fromRGBO(0, 0, 0, 0.1),
+                    Colors.transparent,
+                    Colors.transparent,
+                    Color.fromRGBO(0, 0, 0, 0.1),
+                  ],
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  stops: [0, 0.3, 0.6, 1],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+
+    if (!multiselectEnabled || !isSelected) {
+      return image;
+    }
+
+    return DecoratedBox(
+      decoration: canDeselect ? BoxDecoration(color: assetContainerColor) : const BoxDecoration(color: Colors.grey),
+      child: ClipRRect(borderRadius: const BorderRadius.all(Radius.circular(15.0)), child: image),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/thumbnail_placeholder.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+
+class ThumbnailPlaceholder extends StatelessWidget {
+  final EdgeInsets margin;
+  final double width;
+  final double height;
+
+  const ThumbnailPlaceholder({super.key, this.margin = EdgeInsets.zero, this.width = 250, this.height = 250});
+
+  @override
+  Widget build(BuildContext context) {
+    var gradientColors = [
+      context.colorScheme.surfaceContainer,
+      context.colorScheme.surfaceContainer.darken(amount: .1),
+    ];
+
+    return Container(
+      width: width,
+      height: height,
+      margin: margin,
+      decoration: BoxDecoration(
+        gradient: LinearGradient(colors: gradientColors, begin: Alignment.topCenter, end: Alignment.bottomCenter),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_grid/upload_dialog.dart

@@ -0,0 +1,14 @@
+import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
+
+class UploadDialog extends ConfirmDialog {
+  final Function onUpload;
+
+  const UploadDialog({super.key, required this.onUpload})
+    : super(
+        title: 'upload_dialog_title',
+        content: 'upload_dialog_info',
+        cancel: 'cancel',
+        ok: 'upload',
+        onOk: onUpload,
+      );
+}

mobile/lib/widgets/asset_viewer/advanced_bottom_sheet.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+
+class AdvancedBottomSheet extends HookConsumerWidget {
+  final Asset assetDetail;
+  final ScrollController? scrollController;
+
+  const AdvancedBottomSheet({super.key, required this.assetDetail, this.scrollController});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SingleChildScrollView(
+      controller: scrollController,
+      child: Container(
+        margin: const EdgeInsets.symmetric(horizontal: 8.0),
+        child: LayoutBuilder(
+          builder: (context, constraints) {
+            // One column
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                const Align(child: Text("ADVANCED INFO", style: TextStyle(fontSize: 12.0))),
+                const SizedBox(height: 32.0),
+                Container(
+                  decoration: BoxDecoration(
+                    color: context.isDarkTheme ? Colors.grey[900] : Colors.grey[200],
+                    borderRadius: const BorderRadius.all(Radius.circular(15.0)),
+                  ),
+                  child: Padding(
+                    padding: const EdgeInsets.only(right: 16.0, left: 16, top: 8, bottom: 16),
+                    child: ListView(
+                      shrinkWrap: true,
+                      physics: const NeverScrollableScrollPhysics(),
+                      children: [
+                        Align(
+                          alignment: Alignment.centerRight,
+                          child: IconButton(
+                            onPressed: () {
+                              Clipboard.setData(ClipboardData(text: assetDetail.toString())).then((_) {
+                                context.scaffoldMessenger.showSnackBar(
+                                  SnackBar(
+                                    content: Text(
+                                      "Copied to clipboard",
+                                      style: context.textTheme.bodyLarge?.copyWith(color: context.primaryColor),
+                                    ),
+                                  ),
+                                );
+                              });
+                            },
+                            icon: Icon(Icons.copy, size: 16.0, color: context.primaryColor),
+                          ),
+                        ),
+                        SelectableText(
+                          assetDetail.toString(),
+                          style: const TextStyle(
+                            fontSize: 12.0,
+                            fontWeight: FontWeight.bold,
+                            fontFamily: "GoogleSansCode",
+                          ),
+                          showCursor: true,
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 32.0),
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/animated_play_pause.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+/// A widget that animates implicitly between a play and a pause icon.
+class AnimatedPlayPause extends StatefulWidget {
+  const AnimatedPlayPause({super.key, required this.playing, this.size, this.color});
+
+  final double? size;
+  final bool playing;
+  final Color? color;
+
+  @override
+  State<StatefulWidget> createState() => AnimatedPlayPauseState();
+}
+
+class AnimatedPlayPauseState extends State<AnimatedPlayPause> with SingleTickerProviderStateMixin {
+  late final animationController = AnimationController(
+    vsync: this,
+    value: widget.playing ? 1 : 0,
+    duration: const Duration(milliseconds: 300),
+  );
+
+  @override
+  void didUpdateWidget(AnimatedPlayPause oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.playing != oldWidget.playing) {
+      if (widget.playing) {
+        animationController.forward();
+      } else {
+        animationController.reverse();
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: AnimatedIcon(
+        color: widget.color,
+        size: widget.size,
+        icon: AnimatedIcons.play_pause,
+        progress: animationController,
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/bottom_gallery_bar.dart

@@ -0,0 +1,362 @@
+import 'dart:async';
+import 'dart:io';
+
+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/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/pages/editing/edit.page.dart';
+import 'package:immich_mobile/providers/album/album.provider.dart';
+import 'package:immich_mobile/providers/album/current_album.provider.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_stack.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/download.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/stack.service.dart';
+import 'package:immich_mobile/utils/hash.dart';
+import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/widgets/asset_grid/delete_dialog.dart';
+import 'package:immich_mobile/widgets/asset_viewer/video_controls.dart';
+import 'package:immich_mobile/widgets/common/immich_image.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class BottomGalleryBar extends ConsumerWidget {
+  final ValueNotifier<int> assetIndex;
+  final bool showStack;
+  final ValueNotifier<int> stackIndex;
+  final ValueNotifier<int> totalAssets;
+  final PageController controller;
+  final RenderList renderList;
+
+  const BottomGalleryBar({
+    super.key,
+    required this.showStack,
+    required this.stackIndex,
+    required this.assetIndex,
+    required this.controller,
+    required this.totalAssets,
+    required this.renderList,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isInLockedView = ref.watch(inLockedViewProvider);
+    final asset = ref.watch(currentAssetProvider);
+    if (asset == null) {
+      return const SizedBox();
+    }
+    final isOwner = asset.ownerId == fastHash(ref.watch(currentUserProvider)?.id ?? '');
+    final showControls = ref.watch(showControlsProvider);
+    final stackId = asset.stackId;
+
+    final stackItems = showStack && stackId != null ? ref.watch(assetStackStateProvider(stackId)) : <Asset>[];
+    bool isStackPrimaryAsset = asset.stackPrimaryAssetId == null;
+    final navStack = AutoRouter.of(context).stackData;
+    final isTrashEnabled = ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
+    final isFromTrash =
+        isTrashEnabled && navStack.length > 2 && navStack.elementAt(navStack.length - 2).name == TrashRoute.name;
+    final isInAlbum = ref.watch(currentAlbumProvider)?.isRemote ?? false;
+
+    void removeAssetFromStack() {
+      if (stackIndex.value > 0 && showStack && stackId != null) {
+        ref.read(assetStackStateProvider(stackId).notifier).removeChild(stackIndex.value - 1);
+      }
+    }
+
+    void handleDelete() async {
+      Future<bool> onDelete(bool force) async {
+        final isDeleted = await ref.read(assetProvider.notifier).deleteAssets({asset}, force: force);
+        if (isDeleted && isStackPrimaryAsset) {
+          // Workaround for asset remaining in the gallery
+          renderList.deleteAsset(asset);
+
+          // `assetIndex == totalAssets.value - 1` handle the case of removing the last asset
+          // to not throw the error when the next preCache index is called
+          if (totalAssets.value == 1 || assetIndex.value == totalAssets.value - 1) {
+            // Handle only one asset
+            await context.maybePop();
+          }
+
+          totalAssets.value -= 1;
+        }
+        if (isDeleted) {
+          ref.read(currentAssetProvider.notifier).set(renderList.loadAsset(assetIndex.value));
+        }
+        return isDeleted;
+      }
+
+      // Asset is trashed
+      if (isTrashEnabled && !isFromTrash) {
+        final isDeleted = await onDelete(false);
+        if (isDeleted) {
+          // Can only trash assets stored in server. Local assets are always permanently removed for now
+          if (context.mounted && asset.isRemote && isStackPrimaryAsset) {
+            ImmichToast.show(
+              durationInSecond: 1,
+              context: context,
+              msg: 'asset_trashed'.tr(),
+              gravity: ToastGravity.BOTTOM,
+            );
+          }
+          removeAssetFromStack();
+        }
+        return;
+      }
+
+      // Asset is permanently removed
+      unawaited(
+        showDialog(
+          context: context,
+          builder: (BuildContext _) {
+            return DeleteDialog(
+              onDelete: () async {
+                final isDeleted = await onDelete(true);
+                if (isDeleted) {
+                  removeAssetFromStack();
+                }
+              },
+            );
+          },
+        ),
+      );
+    }
+
+    unStack() async {
+      if (asset.stackId == null) {
+        return;
+      }
+
+      await ref.read(stackServiceProvider).deleteStack(asset.stackId!, stackItems);
+    }
+
+    void showStackActionItems() {
+      showModalBottomSheet<void>(
+        context: context,
+        enableDrag: false,
+        builder: (BuildContext ctx) {
+          return SafeArea(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 24.0),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  ListTile(
+                    leading: const Icon(Icons.filter_none_outlined, size: 18),
+                    onTap: () async {
+                      await unStack();
+                      ctx.pop();
+                      await context.maybePop();
+                    },
+                    title: const Text("viewer_unstack", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+                  ),
+                ],
+              ),
+            ),
+          );
+        },
+      );
+    }
+
+    shareAsset() {
+      if (asset.isOffline) {
+        ImmichToast.show(
+          durationInSecond: 1,
+          context: context,
+          msg: 'asset_action_share_err_offline'.tr(),
+          gravity: ToastGravity.BOTTOM,
+        );
+        return;
+      }
+      ref.read(downloadStateProvider.notifier).shareAsset(asset, context);
+    }
+
+    void handleEdit() async {
+      final image = Image(image: ImmichImage.imageProvider(asset: asset));
+
+      unawaited(
+        context.navigator.push(
+          MaterialPageRoute(
+            builder: (context) => EditImagePage(asset: asset, image: image, isEdited: false),
+          ),
+        ),
+      );
+    }
+
+    handleArchive() {
+      ref.read(assetProvider.notifier).toggleArchive([asset]);
+      if (isStackPrimaryAsset) {
+        context.maybePop();
+        return;
+      }
+      removeAssetFromStack();
+    }
+
+    handleDownload() {
+      if (asset.isLocal) {
+        return;
+      }
+      if (asset.isOffline) {
+        ImmichToast.show(
+          durationInSecond: 1,
+          context: context,
+          msg: 'asset_action_share_err_offline'.tr(),
+          gravity: ToastGravity.BOTTOM,
+        );
+        return;
+      }
+
+      ref.read(downloadStateProvider.notifier).downloadAsset(asset);
+    }
+
+    handleRemoveFromAlbum() async {
+      final album = ref.read(currentAlbumProvider);
+      final bool isSuccess = album != null && await ref.read(albumProvider.notifier).removeAsset(album, [asset]);
+
+      if (isSuccess) {
+        // Workaround for asset remaining in the gallery
+        renderList.deleteAsset(asset);
+
+        if (totalAssets.value == 1) {
+          // Handle empty viewer
+          await context.maybePop();
+        } else {
+          // changing this also for the last asset causes the parent to rebuild with an error
+          totalAssets.value -= 1;
+        }
+        if (assetIndex.value == totalAssets.value && assetIndex.value > 0) {
+          // handle the case of removing the last asset in the list
+          assetIndex.value -= 1;
+        }
+      } else {
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_remove".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+    }
+
+    final List<Map<BottomNavigationBarItem, Function(int)>> albumActions = [
+      {
+        BottomNavigationBarItem(
+          icon: Icon(Platform.isAndroid ? Icons.share_rounded : Icons.ios_share_rounded),
+          label: 'share'.tr(),
+          tooltip: 'share'.tr(),
+        ): (_) =>
+            shareAsset(),
+      },
+      if (asset.isImage && !isInLockedView)
+        {
+          BottomNavigationBarItem(
+            icon: const Icon(Icons.tune_outlined),
+            label: 'edit'.tr(),
+            tooltip: 'edit'.tr(),
+          ): (_) =>
+              handleEdit(),
+        },
+      if (isOwner && !isInLockedView)
+        {
+          asset.isArchived
+              ? BottomNavigationBarItem(
+                  icon: const Icon(Icons.unarchive_rounded),
+                  label: 'unarchive'.tr(),
+                  tooltip: 'unarchive'.tr(),
+                )
+              : BottomNavigationBarItem(
+                  icon: const Icon(Icons.archive_outlined),
+                  label: 'archive'.tr(),
+                  tooltip: 'archive'.tr(),
+                ): (_) =>
+              handleArchive(),
+        },
+      if (isOwner && asset.stackCount > 0 && !isInLockedView)
+        {
+          BottomNavigationBarItem(
+            icon: const Icon(Icons.burst_mode_outlined),
+            label: 'stack'.tr(),
+            tooltip: 'stack'.tr(),
+          ): (_) =>
+              showStackActionItems(),
+        },
+      if (isOwner && !isInAlbum)
+        {
+          BottomNavigationBarItem(
+            icon: const Icon(Icons.delete_outline),
+            label: 'delete'.tr(),
+            tooltip: 'delete'.tr(),
+          ): (_) =>
+              handleDelete(),
+        },
+      if (!isOwner)
+        {
+          BottomNavigationBarItem(
+            icon: const Icon(Icons.download_outlined),
+            label: 'download'.tr(),
+            tooltip: 'download'.tr(),
+          ): (_) =>
+              handleDownload(),
+        },
+      if (isInAlbum)
+        {
+          BottomNavigationBarItem(
+            icon: const Icon(Icons.remove_circle_outline),
+            label: 'remove_from_album'.tr(),
+            tooltip: 'remove_from_album'.tr(),
+          ): (_) =>
+              handleRemoveFromAlbum(),
+        },
+    ];
+    return IgnorePointer(
+      ignoring: !showControls,
+      child: AnimatedOpacity(
+        duration: const Duration(milliseconds: 100),
+        opacity: showControls ? 1.0 : 0.0,
+        child: DecoratedBox(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.bottomCenter,
+              end: Alignment.topCenter,
+              colors: [Colors.black, Colors.transparent],
+            ),
+          ),
+          position: DecorationPosition.background,
+          child: Padding(
+            padding: const EdgeInsets.only(top: 40.0),
+            child: Column(
+              children: [
+                if (asset.isVideo) const VideoControls(),
+                BottomNavigationBar(
+                  elevation: 0.0,
+                  backgroundColor: Colors.transparent,
+                  unselectedIconTheme: const IconThemeData(color: Colors.white),
+                  selectedIconTheme: const IconThemeData(color: Colors.white),
+                  unselectedLabelStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w500, height: 2.3),
+                  selectedLabelStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w500, height: 2.3),
+                  unselectedFontSize: 14,
+                  selectedFontSize: 14,
+                  selectedItemColor: Colors.white,
+                  unselectedItemColor: Colors.white,
+                  showSelectedLabels: true,
+                  showUnselectedLabels: true,
+                  items: albumActions.map((e) => e.keys.first).toList(growable: false),
+                  onTap: (index) {
+                    albumActions[index].values.first.call(index);
+                  },
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/cast_dialog.dart

@@ -0,0 +1,127 @@
+import 'dart:async';
+
+import 'package:easy_localization/easy_localization.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/models/cast/cast_manager_state.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+
+class CastDialog extends ConsumerWidget {
+  const CastDialog({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final castManager = ref.watch(castProvider);
+
+    bool isCurrentDevice(String deviceName) {
+      return castManager.receiverName == deviceName && castManager.isCasting;
+    }
+
+    bool isDeviceConnecting(String deviceName) {
+      return castManager.receiverName == deviceName && !castManager.isCasting;
+    }
+
+    return AlertDialog(
+      title: const Text("cast", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+      content: SizedBox(
+        width: 250,
+        height: 250,
+        child: FutureBuilder<List<(String, CastDestinationType, dynamic)>>(
+          future: ref.read(castProvider.notifier).getDevices(),
+          builder: (context, snapshot) {
+            if (snapshot.hasError) {
+              return Text('error_saving_image'.tr(args: [snapshot.error.toString()]));
+            } else if (!snapshot.hasData) {
+              return const SizedBox(height: 48, child: Center(child: CircularProgressIndicator()));
+            }
+
+            if (snapshot.data!.isEmpty) {
+              return const Text('no_cast_devices_found').tr();
+            }
+
+            final devices = snapshot.data!;
+            final connected = devices.where((d) => isCurrentDevice(d.$1)).toList();
+            final others = devices.where((d) => !isCurrentDevice(d.$1)).toList();
+
+            final List<dynamic> sectionedList = [];
+
+            if (connected.isNotEmpty) {
+              sectionedList.add("connected_device");
+              sectionedList.addAll(connected);
+            }
+
+            if (others.isNotEmpty) {
+              sectionedList.add("discovered_devices");
+              sectionedList.addAll(others);
+            }
+
+            return ListView.builder(
+              shrinkWrap: true,
+              itemCount: sectionedList.length,
+              itemBuilder: (context, index) {
+                final item = sectionedList[index];
+
+                if (item is String) {
+                  // It's a section header
+                  return Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 8.0),
+                    child: Text(item, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16)).tr(),
+                  );
+                } else {
+                  final (deviceName, type, deviceObj) = item as (String, CastDestinationType, dynamic);
+
+                  return ListTile(
+                    title: Text(
+                      deviceName,
+                      style: TextStyle(color: isCurrentDevice(deviceName) ? context.colorScheme.primary : null),
+                    ),
+                    leading: Icon(
+                      type == CastDestinationType.googleCast ? Icons.cast : Icons.cast_connected,
+                      color: isCurrentDevice(deviceName) ? context.colorScheme.primary : null,
+                    ),
+                    trailing: isCurrentDevice(deviceName)
+                        ? Icon(Icons.check, color: context.colorScheme.primary)
+                        : isDeviceConnecting(deviceName)
+                        ? const CircularProgressIndicator()
+                        : null,
+                    onTap: () async {
+                      if (isDeviceConnecting(deviceName)) {
+                        return;
+                      }
+
+                      if (castManager.isCasting) {
+                        await ref.read(castProvider.notifier).disconnect();
+                      }
+
+                      if (!isCurrentDevice(deviceName)) {
+                        unawaited(ref.read(castProvider.notifier).connect(type, deviceObj));
+                      }
+                    },
+                  );
+                }
+              },
+            );
+          },
+        ),
+      ),
+      actions: [
+        if (castManager.isCasting)
+          TextButton(
+            onPressed: () => ref.read(castProvider.notifier).disconnect(),
+            child: Text(
+              "stop_casting",
+              style: TextStyle(color: context.colorScheme.secondary, fontWeight: FontWeight.bold),
+            ).tr(),
+          ),
+        TextButton(
+          onPressed: () => context.pop(),
+          child: Text(
+            "close",
+            style: TextStyle(color: context.colorScheme.primary, fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/center_play_button.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/widgets/asset_viewer/animated_play_pause.dart';
+
+class CenterPlayButton extends StatelessWidget {
+  const CenterPlayButton({
+    super.key,
+    required this.backgroundColor,
+    this.iconColor,
+    required this.show,
+    required this.isPlaying,
+    required this.isFinished,
+    this.onPressed,
+  });
+
+  final Color backgroundColor;
+  final Color? iconColor;
+  final bool show;
+  final bool isPlaying;
+  final bool isFinished;
+  final VoidCallback? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return ColoredBox(
+      color: Colors.transparent,
+      child: Center(
+        child: UnconstrainedBox(
+          child: AnimatedOpacity(
+            opacity: show ? 1.0 : 0.0,
+            duration: const Duration(milliseconds: 100),
+            child: DecoratedBox(
+              decoration: BoxDecoration(color: backgroundColor, shape: BoxShape.circle),
+              child: IconButton(
+                iconSize: 32,
+                padding: const EdgeInsets.all(12.0),
+                icon: isFinished
+                    ? Icon(Icons.replay, color: iconColor)
+                    : AnimatedPlayPause(color: iconColor, playing: isPlaying),
+                onPressed: onPressed,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/custom_video_player_controls.dart

@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/models/cast/cast_manager_state.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_value_provider.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/utils/hooks/timer_hook.dart';
+import 'package:immich_mobile/widgets/asset_viewer/center_play_button.dart';
+import 'package:immich_mobile/widgets/common/delayed_loading_indicator.dart';
+
+class CustomVideoPlayerControls extends HookConsumerWidget {
+  final Duration hideTimerDuration;
+
+  const CustomVideoPlayerControls({super.key, this.hideTimerDuration = const Duration(seconds: 5)});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final assetIsVideo = ref.watch(currentAssetProvider.select((asset) => asset != null && asset.isVideo));
+    final showControls = ref.watch(showControlsProvider);
+    final VideoPlaybackState state = ref.watch(videoPlaybackValueProvider.select((value) => value.state));
+
+    final cast = ref.watch(castProvider);
+
+    // A timer to hide the controls
+    final hideTimer = useTimer(hideTimerDuration, () {
+      if (!context.mounted) {
+        return;
+      }
+      final state = ref.read(videoPlaybackValueProvider).state;
+
+      // Do not hide on paused
+      if (state != VideoPlaybackState.paused && state != VideoPlaybackState.completed && assetIsVideo) {
+        ref.read(showControlsProvider.notifier).show = false;
+      }
+    });
+    final showBuffering = state == VideoPlaybackState.buffering && !cast.isCasting;
+
+    /// Shows the controls and starts the timer to hide them
+    void showControlsAndStartHideTimer() {
+      hideTimer.reset();
+      ref.read(showControlsProvider.notifier).show = true;
+    }
+
+    // When we change position, show or hide timer
+    ref.listen(videoPlayerControlsProvider.select((v) => v.position), (previous, next) {
+      showControlsAndStartHideTimer();
+    });
+
+    /// Toggles between playing and pausing depending on the state of the video
+    void togglePlay() {
+      showControlsAndStartHideTimer();
+
+      if (cast.isCasting) {
+        if (cast.castState == CastState.playing) {
+          ref.read(castProvider.notifier).pause();
+        } else if (cast.castState == CastState.paused) {
+          ref.read(castProvider.notifier).play();
+        } else if (cast.castState == CastState.idle) {
+          // resend the play command since its finished
+          final asset = ref.read(currentAssetProvider);
+          if (asset == null) {
+            return;
+          }
+          ref.read(castProvider.notifier).loadMediaOld(asset, true);
+        }
+        return;
+      }
+
+      if (state == VideoPlaybackState.playing) {
+        ref.read(videoPlayerControlsProvider.notifier).pause();
+      } else if (state == VideoPlaybackState.completed) {
+        ref.read(videoPlayerControlsProvider.notifier).restart();
+      } else {
+        ref.read(videoPlayerControlsProvider.notifier).play();
+      }
+    }
+
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: showControlsAndStartHideTimer,
+      child: AbsorbPointer(
+        absorbing: !showControls,
+        child: Stack(
+          children: [
+            if (showBuffering)
+              const Center(child: DelayedLoadingIndicator(fadeInDuration: Duration(milliseconds: 400)))
+            else
+              GestureDetector(
+                onTap: () => ref.read(showControlsProvider.notifier).show = false,
+                child: CenterPlayButton(
+                  backgroundColor: Colors.black54,
+                  iconColor: Colors.white,
+                  isFinished: state == VideoPlaybackState.completed,
+                  isPlaying:
+                      state == VideoPlaybackState.playing || (cast.isCasting && cast.castState == CastState.playing),
+                  show: assetIsVideo && showControls,
+                  onPressed: togglePlay,
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/description_input.dart

@@ -0,0 +1,106 @@
+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/domain/models/exif.model.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/services/asset.service.dart';
+import 'package:immich_mobile/utils/hash.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:logging/logging.dart';
+
+class DescriptionInput extends HookConsumerWidget {
+  DescriptionInput({super.key, required this.asset, this.exifInfo});
+
+  final Asset asset;
+  final ExifInfo? exifInfo;
+  final Logger _log = Logger('DescriptionInput');
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final controller = useTextEditingController();
+    final focusNode = useFocusNode();
+    final isFocus = useState(false);
+    final isTextEmpty = useState(controller.text.isEmpty);
+    final assetService = ref.watch(assetServiceProvider);
+    final owner = ref.watch(currentUserProvider);
+    final hasError = useState(false);
+    final assetWithExif = ref.watch(assetDetailProvider(asset));
+    final hasDescription = useState(false);
+    final isOwner = fastHash(owner?.id ?? '') == asset.ownerId;
+
+    useEffect(() {
+      assetService.getDescription(asset).then((value) {
+        controller.text = value;
+        hasDescription.value = value.isNotEmpty;
+      });
+      return null;
+    }, [assetWithExif.value]);
+
+    if (!isOwner && !hasDescription.value) {
+      return const SizedBox.shrink();
+    }
+
+    submitDescription(String description) async {
+      hasError.value = false;
+      try {
+        await assetService.setDescription(asset, description);
+        controller.text = description;
+      } catch (error, stack) {
+        hasError.value = true;
+        _log.severe("Error updating description", error, stack);
+        ImmichToast.show(context: context, msg: "description_input_submit_error".tr(), toastType: ToastType.error);
+      }
+    }
+
+    Widget? suffixIcon;
+    if (hasError.value) {
+      suffixIcon = const Icon(Icons.warning_outlined);
+    } else if (!isTextEmpty.value && isFocus.value) {
+      suffixIcon = IconButton(
+        onPressed: () {
+          controller.clear();
+          isTextEmpty.value = true;
+        },
+        icon: Icon(Icons.cancel_rounded, color: context.colorScheme.onSurfaceSecondary),
+        splashRadius: 10,
+      );
+    }
+
+    return TextField(
+      enabled: isOwner,
+      focusNode: focusNode,
+      onTap: () => isFocus.value = true,
+      onChanged: (value) {
+        isTextEmpty.value = false;
+      },
+      onTapOutside: (a) async {
+        isFocus.value = false;
+        focusNode.unfocus();
+
+        if (exifInfo?.description != controller.text) {
+          await submitDescription(controller.text);
+        }
+      },
+      autofocus: false,
+      maxLines: null,
+      keyboardType: TextInputType.multiline,
+      controller: controller,
+      style: context.textTheme.labelLarge,
+      decoration: InputDecoration(
+        hintText: 'description_input_hint_text'.tr(),
+        border: InputBorder.none,
+        suffixIcon: suffixIcon,
+        enabledBorder: InputBorder.none,
+        focusedBorder: InputBorder.none,
+        disabledBorder: InputBorder.none,
+        errorBorder: InputBorder.none,
+        focusedErrorBorder: InputBorder.none,
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/asset_date_time.dart

@@ -0,0 +1,44 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/asset_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/utils/selection_handlers.dart';
+
+class AssetDateTime extends ConsumerWidget {
+  final Asset asset;
+
+  const AssetDateTime({super.key, required this.asset});
+
+  String getDateTimeString(Asset a) {
+    final (deltaTime, timeZone) = a.getTZAdjustedTimeAndOffset();
+    final date = DateFormat.yMMMEd().format(deltaTime);
+    final time = DateFormat.jm().format(deltaTime);
+    return '$date • $time GMT${timeZone.formatAsOffset()}';
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final watchedAsset = ref.watch(assetDetailProvider(asset));
+    String formattedDateTime = getDateTimeString(asset);
+
+    void editDateTime() async {
+      await handleEditDateTime(ref, context, [asset]);
+
+      if (watchedAsset.value != null) {
+        formattedDateTime = getDateTimeString(watchedAsset.value!);
+      }
+    }
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(formattedDateTime, style: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600)),
+        if (asset.isRemote) IconButton(onPressed: editDateTime, icon: const Icon(Icons.edit_outlined), iconSize: 20),
+      ],
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/asset_details.dart

@@ -0,0 +1,40 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/exif.model.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/camera_info.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/file_info.dart';
+
+class AssetDetails extends ConsumerWidget {
+  final Asset asset;
+  final ExifInfo? exifInfo;
+
+  const AssetDetails({super.key, required this.asset, this.exifInfo});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final assetWithExif = ref.watch(assetDetailProvider(asset));
+    final ExifInfo? exifInfo = (assetWithExif.value ?? asset).exifInfo;
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 24.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            "exif_bottom_sheet_details",
+            style: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(200),
+              fontWeight: FontWeight.w600,
+            ),
+          ).tr(),
+          FileInfo(asset: asset),
+          if (exifInfo?.make != null) CameraInfo(exifInfo: exifInfo!),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/asset_location.dart

@@ -0,0 +1,88 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/exif.model.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/utils/selection_handlers.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/exif_map.dart';
+
+class AssetLocation extends HookConsumerWidget {
+  final Asset asset;
+
+  const AssetLocation({super.key, required this.asset});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final assetWithExif = ref.watch(assetDetailProvider(asset));
+    final ExifInfo? exifInfo = (assetWithExif.value ?? asset).exifInfo;
+    final hasCoordinates = exifInfo?.hasCoordinates ?? false;
+
+    void editLocation() {
+      handleEditLocation(ref, context, [assetWithExif.value ?? asset]);
+    }
+
+    // Guard no lat/lng
+    if (!hasCoordinates) {
+      return asset.isRemote
+          ? ListTile(
+              minLeadingWidth: 0,
+              contentPadding: const EdgeInsets.all(0),
+              leading: const Icon(Icons.location_on),
+              title: Text(
+                "add_a_location",
+                style: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600, color: context.primaryColor),
+              ).tr(),
+              onTap: editLocation,
+            )
+          : const SizedBox.shrink();
+    }
+
+    Widget getLocationName() {
+      if (exifInfo == null) {
+        return const SizedBox.shrink();
+      }
+
+      final cityName = exifInfo.city;
+      final stateName = exifInfo.state;
+
+      bool hasLocationName = (cityName != null && stateName != null);
+
+      return hasLocationName
+          ? Text("$cityName, $stateName", style: context.textTheme.labelLarge)
+          : const SizedBox.shrink();
+    }
+
+    return Padding(
+      padding: EdgeInsets.only(top: asset.isRemote ? 0 : 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                "exif_bottom_sheet_location",
+                style: context.textTheme.labelMedium?.copyWith(
+                  color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                  fontWeight: FontWeight.w600,
+                ),
+              ).tr(),
+              if (asset.isRemote)
+                IconButton(onPressed: editLocation, icon: const Icon(Icons.edit_outlined), iconSize: 20),
+            ],
+          ),
+          asset.isRemote ? const SizedBox.shrink() : const SizedBox(height: 16),
+          ExifMap(exifInfo: exifInfo!, markerId: asset.remoteId, markerAssetThumbhash: asset.thumbhash),
+          const SizedBox(height: 16),
+          getLocationName(),
+          Text(
+            "${exifInfo.latitude!.toStringAsFixed(4)}, ${exifInfo.longitude!.toStringAsFixed(4)}",
+            style: context.textTheme.labelMedium?.copyWith(color: context.textTheme.labelMedium?.color?.withAlpha(150)),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/camera_info.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/exif.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class CameraInfo extends StatelessWidget {
+  final ExifInfo exifInfo;
+
+  const CameraInfo({super.key, required this.exifInfo});
+
+  @override
+  Widget build(BuildContext context) {
+    final textColor = context.isDarkTheme ? Colors.white : Colors.black;
+    return ListTile(
+      contentPadding: const EdgeInsets.all(0),
+      dense: true,
+      leading: Icon(Icons.camera, color: textColor.withAlpha(200)),
+      title: Text("${exifInfo.make} ${exifInfo.model}", style: context.textTheme.labelLarge),
+      subtitle: exifInfo.f != null || exifInfo.exposureSeconds != null || exifInfo.mm != null || exifInfo.iso != null
+          ? Text(
+              "ƒ/${exifInfo.fNumber}   ${exifInfo.exposureTime}   ${exifInfo.focalLength} mm   ISO ${exifInfo.iso ?? ''} ",
+              style: context.textTheme.bodySmall,
+            )
+          : null,
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/detail_panel.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/widgets/asset_viewer/description_input.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_date_time.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_details.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_location.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/people_info.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+
+class DetailPanel extends HookConsumerWidget {
+  final Asset asset;
+  final ScrollController? scrollController;
+
+  const DetailPanel({super.key, required this.asset, this.scrollController});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return ListView(
+      controller: scrollController,
+      shrinkWrap: true,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: Column(
+            children: [
+              AssetDateTime(asset: asset),
+              asset.isRemote ? DescriptionInput(asset: asset) : const SizedBox.shrink(),
+              PeopleInfo(asset: asset),
+              AssetLocation(asset: asset),
+              AssetDetails(asset: asset),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/exif_map.dart

@@ -0,0 +1,90 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/exif.model.dart';
+import 'package:immich_mobile/utils/debug_print.dart';
+import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class ExifMap extends StatelessWidget {
+  final ExifInfo exifInfo;
+  // TODO: Pass in a BaseAsset instead of the ID and thumbhash when removing old timeline
+  // This is currently structured this way because of the old timeline implementation
+  // reusing this component
+  final String? markerId;
+  final String? markerAssetThumbhash;
+  final MapCreatedCallback? onMapCreated;
+
+  const ExifMap({
+    super.key,
+    required this.exifInfo,
+    this.markerAssetThumbhash,
+    this.markerId = 'marker',
+    this.onMapCreated,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final hasCoordinates = exifInfo.hasCoordinates;
+    Future<Uri?> createCoordinatesUri() async {
+      if (!hasCoordinates) {
+        return null;
+      }
+
+      final double latitude = exifInfo.latitude!;
+      final double longitude = exifInfo.longitude!;
+
+      const zoomLevel = 16;
+
+      if (Platform.isAndroid) {
+        Uri uri = Uri(
+          scheme: 'geo',
+          host: '$latitude,$longitude',
+          queryParameters: {'z': '$zoomLevel', 'q': '$latitude,$longitude'},
+        );
+        if (await canLaunchUrl(uri)) {
+          return uri;
+        }
+      } else if (Platform.isIOS) {
+        var params = {'ll': '$latitude,$longitude', 'q': '$latitude,$longitude', 'z': '$zoomLevel'};
+        Uri uri = Uri.https('maps.apple.com', '/', params);
+        if (await canLaunchUrl(uri)) {
+          return uri;
+        }
+      }
+
+      return Uri(
+        scheme: 'https',
+        host: 'openstreetmap.org',
+        queryParameters: {'mlat': '$latitude', 'mlon': '$longitude'},
+        fragment: 'map=$zoomLevel/$latitude/$longitude',
+      );
+    }
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return MapThumbnail(
+          centre: LatLng(exifInfo.latitude ?? 0, exifInfo.longitude ?? 0),
+          height: 150,
+          width: constraints.maxWidth,
+          zoom: 12.0,
+          assetMarkerRemoteId: markerId,
+          assetThumbhash: markerAssetThumbhash,
+          onTap: (tapPosition, latLong) async {
+            Uri? uri = await createCoordinatesUri();
+
+            if (uri == null) {
+              return;
+            }
+
+            dPrint(() => 'Opening Map Uri: $uri');
+            unawaited(launchUrl(uri));
+          },
+          onCreated: onMapCreated,
+        );
+      },
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/file_info.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/utils/bytes_units.dart';
+
+class FileInfo extends StatelessWidget {
+  final Asset asset;
+
+  const FileInfo({super.key, required this.asset});
+
+  @override
+  Widget build(BuildContext context) {
+    final textColor = context.isDarkTheme ? Colors.white : Colors.black;
+
+    final height = asset.orientatedHeight ?? asset.height;
+    final width = asset.orientatedWidth ?? asset.width;
+    String resolution = height != null && width != null ? "$width x $height  " : "";
+    String fileSize = asset.exifInfo?.fileSize != null ? formatBytes(asset.exifInfo!.fileSize!) : "";
+    String text = resolution + fileSize;
+    final imgSizeString = text.isNotEmpty ? text : null;
+
+    String? title;
+    String? subtitle;
+
+    if (imgSizeString == null && asset.fileName.isNotEmpty) {
+      // There is only filename
+      title = asset.fileName;
+    } else if (imgSizeString != null && asset.fileName.isNotEmpty) {
+      // There is both filename and size information
+      title = asset.fileName;
+      subtitle = imgSizeString;
+    } else if (imgSizeString != null && asset.fileName.isEmpty) {
+      title = imgSizeString;
+    } else {
+      return const SizedBox.shrink();
+    }
+
+    return ListTile(
+      contentPadding: const EdgeInsets.all(0),
+      dense: true,
+      leading: Icon(Icons.image, color: textColor.withAlpha(200)),
+      titleAlignment: ListTileTitleAlignment.center,
+      title: Text(title, style: context.textTheme.labelLarge),
+      subtitle: subtitle == null ? null : Text(subtitle),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/people_info.dart

@@ -0,0 +1,91 @@
+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/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/models/search/search_curated_content.model.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_people.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/people.utils.dart';
+import 'package:immich_mobile/widgets/search/curated_people_row.dart';
+import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
+
+class PeopleInfo extends ConsumerWidget {
+  final Asset asset;
+  final EdgeInsets? padding;
+
+  const PeopleInfo({super.key, required this.asset, this.padding});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final peopleProvider = ref.watch(assetPeopleNotifierProvider(asset).notifier);
+    final people = ref.watch(assetPeopleNotifierProvider(asset)).value?.where((p) => !p.isHidden);
+
+    showPersonNameEditModel(String personId, String personName) {
+      return showDialog(
+        context: context,
+        useRootNavigator: false,
+        builder: (BuildContext context) {
+          return PersonNameEditForm(personId: personId, personName: personName);
+        },
+      ).then((_) {
+        // ensure the people list is up-to-date.
+        peopleProvider.refresh();
+      });
+    }
+
+    final curatedPeople =
+        people
+            ?.map(
+              (p) => SearchCuratedContent(
+                id: p.id,
+                label: p.name,
+                subtitle: p.birthDate != null && p.birthDate!.isBefore(asset.fileCreatedAt)
+                    ? formatAge(p.birthDate!, asset.fileCreatedAt)
+                    : null,
+              ),
+            )
+            .toList() ??
+        [];
+
+    return AnimatedCrossFade(
+      crossFadeState: (people?.isEmpty ?? true) ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+      duration: const Duration(milliseconds: 200),
+      firstChild: Container(),
+      secondChild: Padding(
+        padding: const EdgeInsets.only(top: 8.0),
+        child: Column(
+          children: [
+            Padding(
+              padding: padding ?? EdgeInsets.zero,
+              child: Align(
+                alignment: Alignment.topLeft,
+                child: Text(
+                  "exif_bottom_sheet_people",
+                  style: context.textTheme.labelMedium?.copyWith(
+                    color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                    fontWeight: FontWeight.w600,
+                  ),
+                ).tr(),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 16.0),
+              child: CuratedPeopleRow(
+                padding: padding,
+                content: curatedPeople,
+                onTap: (content, index) {
+                  context
+                      .pushRoute(PersonResultRoute(personId: content.id, personName: content.label))
+                      .then((_) => peopleProvider.refresh());
+                },
+                onNameTap: (person, index) => {showPersonNameEditModel(person.id, person.label)},
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/formatted_duration.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+
+class FormattedDuration extends StatelessWidget {
+  final Duration data;
+  const FormattedDuration(this.data, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: data.inHours > 0 ? 70 : 60, // use a fixed width to prevent jitter
+      child: Text(
+        data.format(),
+        style: const TextStyle(fontSize: 14.0, color: Colors.white, fontWeight: FontWeight.w500),
+        textAlign: TextAlign.center,
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/gallery_app_bar.dart

@@ -0,0 +1,119 @@
+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/entities/asset.entity.dart';
+import 'package:immich_mobile/providers/album/current_album.provider.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/download.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/scroll_to_date_notifier.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+import 'package:immich_mobile/providers/partner.provider.dart';
+import 'package:immich_mobile/providers/tab.provider.dart';
+import 'package:immich_mobile/providers/trash.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/hash.dart';
+import 'package:immich_mobile/widgets/album/add_to_album_bottom_sheet.dart';
+import 'package:immich_mobile/widgets/asset_grid/upload_dialog.dart';
+import 'package:immich_mobile/widgets/asset_viewer/top_control_app_bar.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class GalleryAppBar extends ConsumerWidget {
+  final void Function() showInfo;
+
+  const GalleryAppBar({super.key, required this.showInfo});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetProvider);
+    if (asset == null) {
+      return const SizedBox();
+    }
+    final album = ref.watch(currentAlbumProvider);
+    final isOwner = asset.ownerId == fastHash(ref.watch(currentUserProvider)?.id ?? '');
+    final showControls = ref.watch(showControlsProvider);
+
+    final isPartner = ref.watch(partnerSharedWithProvider).map((e) => fastHash(e.id)).contains(asset.ownerId);
+
+    toggleFavorite(Asset asset) => ref.read(assetProvider.notifier).toggleFavorite([asset]);
+
+    handleActivities() {
+      if (album != null && album.shared && album.remoteId != null) {
+        context.pushRoute(const ActivitiesRoute());
+      }
+    }
+
+    handleRestore(Asset asset) async {
+      final result = await ref.read(trashProvider.notifier).restoreAssets([asset]);
+
+      if (result && context.mounted) {
+        ImmichToast.show(context: context, msg: 'asset_restored_successfully'.tr(), gravity: ToastGravity.BOTTOM);
+      }
+    }
+
+    handleUpload(Asset asset) {
+      showDialog(
+        context: context,
+        builder: (BuildContext _) {
+          return UploadDialog(
+            onUpload: () {
+              ref.read(manualUploadProvider.notifier).uploadAssets(context, [asset]);
+            },
+          );
+        },
+      );
+    }
+
+    addToAlbum(Asset addToAlbumAsset) {
+      showModalBottomSheet(
+        elevation: 0,
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(15.0))),
+        context: context,
+        builder: (BuildContext _) {
+          return AddToAlbumBottomSheet(assets: [addToAlbumAsset]);
+        },
+      );
+    }
+
+    handleDownloadAsset() {
+      ref.read(downloadStateProvider.notifier).downloadAsset(asset);
+    }
+
+    handleLocateAsset() async {
+      // Go back to the gallery
+      await context.maybePop();
+      await context.navigateTo(const TabControllerRoute(children: [PhotosRoute()]));
+      ref.read(tabProvider.notifier).update((state) => state = TabEnum.home);
+      // Scroll to the asset's date
+      scrollToDateNotifierProvider.scrollToDate(asset.fileCreatedAt);
+    }
+
+    return IgnorePointer(
+      ignoring: !showControls,
+      child: AnimatedOpacity(
+        duration: const Duration(milliseconds: 100),
+        opacity: showControls ? 1.0 : 0.0,
+        child: Container(
+          color: Colors.black.withValues(alpha: 0.4),
+          child: TopControlAppBar(
+            isOwner: isOwner,
+            isPartner: isPartner,
+            asset: asset,
+            onMoreInfoPressed: showInfo,
+            onLocatePressed: handleLocateAsset,
+            onFavorite: toggleFavorite,
+            onRestorePressed: () => handleRestore(asset),
+            onUploadPressed: asset.isLocal ? () => handleUpload(asset) : null,
+            onDownloadPressed: asset.isLocal ? null : handleDownloadAsset,
+            onAddToAlbumPressed: () => addToAlbum(asset),
+            onActivitiesPressed: handleActivities,
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/motion_photo_button.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/colors.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
+
+class MotionPhotoButton extends ConsumerWidget {
+  const MotionPhotoButton({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isPlaying = ref.watch(isPlayingMotionVideoProvider);
+
+    return IconButton(
+      onPressed: () {
+        ref.read(isPlayingMotionVideoProvider.notifier).toggle();
+      },
+      icon: isPlaying
+          ? const Icon(Icons.motion_photos_pause_outlined, color: grey200)
+          : const Icon(Icons.play_circle_outline_rounded, color: grey200),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/top_control_app_bar.dart

@@ -0,0 +1,182 @@
+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/providers/activity_statistics.provider.dart';
+import 'package:immich_mobile/providers/album/current_album.provider.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/providers/tab.provider.dart';
+import 'package:immich_mobile/providers/websocket.provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
+import 'package:immich_mobile/widgets/asset_viewer/motion_photo_button.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+
+class TopControlAppBar extends HookConsumerWidget {
+  const TopControlAppBar({
+    super.key,
+    required this.asset,
+    required this.onMoreInfoPressed,
+    required this.onDownloadPressed,
+    required this.onLocatePressed,
+    required this.onAddToAlbumPressed,
+    required this.onRestorePressed,
+    required this.onFavorite,
+    required this.onUploadPressed,
+    required this.isOwner,
+    required this.onActivitiesPressed,
+    required this.isPartner,
+  });
+
+  final Asset asset;
+  final Function onMoreInfoPressed;
+  final VoidCallback? onUploadPressed;
+  final VoidCallback? onDownloadPressed;
+  final VoidCallback onLocatePressed;
+  final VoidCallback onAddToAlbumPressed;
+  final VoidCallback onRestorePressed;
+  final VoidCallback onActivitiesPressed;
+  final Function(Asset) onFavorite;
+  final bool isOwner;
+  final bool isPartner;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isInLockedView = ref.watch(inLockedViewProvider);
+    const double iconSize = 22.0;
+    final a = ref.watch(assetWatcher(asset)).value ?? asset;
+    final album = ref.watch(currentAlbumProvider);
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+    final websocketConnected = ref.watch(websocketProvider.select((c) => c.isConnected));
+
+    final comments = album != null && album.remoteId != null && asset.remoteId != null
+        ? ref.watch(activityStatisticsProvider(album.remoteId!, asset.remoteId))
+        : 0;
+
+    Widget buildFavoriteButton(a) {
+      return IconButton(
+        onPressed: () => onFavorite(a),
+        icon: Icon(a.isFavorite ? Icons.favorite : Icons.favorite_border, color: Colors.grey[200]),
+      );
+    }
+
+    Widget buildLocateButton() {
+      return IconButton(
+        onPressed: () {
+          onLocatePressed();
+        },
+        icon: Icon(Icons.image_search, color: Colors.grey[200]),
+      );
+    }
+
+    Widget buildMoreInfoButton() {
+      return IconButton(
+        onPressed: () {
+          onMoreInfoPressed();
+        },
+        icon: Icon(Icons.info_outline_rounded, color: Colors.grey[200]),
+      );
+    }
+
+    Widget buildDownloadButton() {
+      return IconButton(
+        onPressed: onDownloadPressed,
+        icon: Icon(Icons.cloud_download_outlined, color: Colors.grey[200]),
+      );
+    }
+
+    Widget buildAddToAlbumButton() {
+      return IconButton(
+        onPressed: () {
+          onAddToAlbumPressed();
+        },
+        icon: Icon(Icons.add, color: Colors.grey[200]),
+      );
+    }
+
+    Widget buildRestoreButton() {
+      return IconButton(
+        onPressed: () {
+          onRestorePressed();
+        },
+        icon: Icon(Icons.history_rounded, color: Colors.grey[200]),
+      );
+    }
+
+    Widget buildActivitiesButton() {
+      return IconButton(
+        onPressed: () {
+          onActivitiesPressed();
+        },
+        icon: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Icon(Icons.mode_comment_outlined, color: Colors.grey[200]),
+            if (comments != 0)
+              Padding(
+                padding: const EdgeInsets.only(left: 5),
+                child: Text(
+                  comments.toString(),
+                  style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[200]),
+                ),
+              ),
+          ],
+        ),
+      );
+    }
+
+    Widget buildUploadButton() {
+      return IconButton(
+        onPressed: onUploadPressed,
+        icon: Icon(Icons.backup_outlined, color: Colors.grey[200]),
+      );
+    }
+
+    Widget buildBackButton() {
+      return IconButton(
+        onPressed: () {
+          context.maybePop();
+        },
+        icon: Icon(Icons.arrow_back_ios_new_rounded, size: 20.0, color: Colors.grey[200]),
+      );
+    }
+
+    Widget buildCastButton() {
+      return IconButton(
+        onPressed: () {
+          showDialog(context: context, builder: (context) => const CastDialog());
+        },
+        icon: Icon(
+          isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded,
+          size: 20.0,
+          color: isCasting ? context.primaryColor : Colors.grey[200],
+        ),
+      );
+    }
+
+    bool isInHomePage = ref.read(tabProvider.notifier).state == TabEnum.home;
+    bool? isInTrash = ref.read(currentAssetProvider)?.isTrashed;
+
+    return AppBar(
+      foregroundColor: Colors.grey[100],
+      backgroundColor: Colors.transparent,
+      leading: buildBackButton(),
+      actionsIconTheme: const IconThemeData(size: iconSize),
+      shape: const Border(),
+      actions: [
+        if (asset.isRemote && isOwner) buildFavoriteButton(a),
+        if (isOwner && !isInHomePage && !(isInTrash ?? false) && !isInLockedView) buildLocateButton(),
+        if (asset.livePhotoVideoId != null) const MotionPhotoButton(),
+        if (asset.isLocal && !asset.isRemote) buildUploadButton(),
+        if (asset.isRemote && !asset.isLocal && isOwner) buildDownloadButton(),
+        if (asset.isRemote && (isOwner || isPartner) && !asset.isTrashed && !isInLockedView) buildAddToAlbumButton(),
+        if (isCasting || (asset.isRemote && websocketConnected)) buildCastButton(),
+        if (asset.isTrashed) buildRestoreButton(),
+        if (album != null && album.shared && !isInLockedView) buildActivitiesButton(),
+        buildMoreInfoButton(),
+      ],
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/video_controls.dart

@@ -0,0 +1,17 @@
+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/widgets/asset_viewer/video_position.dart';
+
+/// The video controls for the [videoPlayerControlsProvider]
+class VideoControls extends ConsumerWidget {
+  const VideoControls({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isPortrait = context.orientation == Orientation.portrait;
+    return isPortrait
+        ? const VideoPosition()
+        : const Padding(padding: EdgeInsets.symmetric(horizontal: 60.0), child: VideoPosition());
+  }
+}

mobile/lib/widgets/asset_viewer/video_position.dart

@@ -0,0 +1,112 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/colors.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_value_provider.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/formatted_duration.dart';
+
+class VideoPosition extends HookConsumerWidget {
+  const VideoPosition({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isCasting = ref.watch(castProvider).isCasting;
+
+    final (position, duration) = isCasting
+        ? ref.watch(castProvider.select((c) => (c.currentTime, c.duration)))
+        : ref.watch(videoPlaybackValueProvider.select((v) => (v.position, v.duration)));
+
+    final wasPlaying = useRef<bool>(true);
+    return duration == Duration.zero
+        ? const _VideoPositionPlaceholder()
+        : Column(
+            children: [
+              Padding(
+                // align with slider's inherent padding
+                padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [FormattedDuration(position), FormattedDuration(duration)],
+                ),
+              ),
+              Row(
+                children: [
+                  Expanded(
+                    child: Slider(
+                      value: min(position.inMicroseconds / duration.inMicroseconds * 100, 100),
+                      min: 0,
+                      max: 100,
+                      thumbColor: Colors.white,
+                      activeColor: Colors.white,
+                      inactiveColor: whiteOpacity75,
+                      onChangeStart: (value) {
+                        final state = ref.read(videoPlaybackValueProvider).state;
+                        wasPlaying.value = state != VideoPlaybackState.paused;
+                        ref.read(videoPlayerControlsProvider.notifier).pause();
+                      },
+                      onChangeEnd: (value) {
+                        if (wasPlaying.value) {
+                          ref.read(videoPlayerControlsProvider.notifier).play();
+                        }
+                      },
+                      onChanged: (value) {
+                        final seekToDuration = (duration * (value / 100.0));
+
+                        if (isCasting) {
+                          ref.read(castProvider.notifier).seekTo(seekToDuration);
+                          return;
+                        }
+
+                        ref.read(videoPlayerControlsProvider.notifier).position = seekToDuration;
+
+                        // This immediately updates the slider position without waiting for the video to update
+                        ref.read(videoPlaybackValueProvider.notifier).position = seekToDuration;
+                      },
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          );
+  }
+}
+
+class _VideoPositionPlaceholder extends StatelessWidget {
+  const _VideoPositionPlaceholder();
+
+  static void _onChangedDummy(_) {}
+
+  @override
+  Widget build(BuildContext context) {
+    return const Column(
+      children: [
+        Padding(
+          padding: EdgeInsets.symmetric(horizontal: 12.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [FormattedDuration(Duration.zero), FormattedDuration(Duration.zero)],
+          ),
+        ),
+        Row(
+          children: [
+            Expanded(
+              child: Slider(
+                value: 0.0,
+                min: 0,
+                max: 100,
+                thumbColor: Colors.white,
+                activeColor: Colors.white,
+                inactiveColor: whiteOpacity75,
+                onChanged: _onChangedDummy,
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/backup/album_info_card.dart

@@ -0,0 +1,185 @@
+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/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/models/backup/available_album.model.dart';
+import 'package:immich_mobile/providers/album/album.provider.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class AlbumInfoCard extends HookConsumerWidget {
+  final AvailableAlbum album;
+
+  const AlbumInfoCard({super.key, required this.album});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final bool isSelected = ref.watch(backupProvider).selectedBackupAlbums.contains(album);
+    final bool isExcluded = ref.watch(backupProvider).excludedBackupAlbums.contains(album);
+    final syncAlbum = ref.watch(appSettingsServiceProvider).getSetting(AppSettingsEnum.syncAlbums);
+
+    final isDarkTheme = context.isDarkTheme;
+
+    ColorFilter selectedFilter = ColorFilter.mode(context.primaryColor.withAlpha(100), BlendMode.darken);
+    ColorFilter excludedFilter = ColorFilter.mode(Colors.red.withAlpha(75), BlendMode.darken);
+    ColorFilter unselectedFilter = const ColorFilter.mode(Colors.black, BlendMode.color);
+
+    buildSelectedTextBox() {
+      if (isSelected) {
+        return Chip(
+          visualDensity: VisualDensity.compact,
+          shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+          label: Text(
+            "album_info_card_backup_album_included",
+            style: TextStyle(
+              fontSize: 10,
+              color: isDarkTheme ? Colors.black : Colors.white,
+              fontWeight: FontWeight.bold,
+            ),
+          ).tr(),
+          backgroundColor: context.primaryColor,
+        );
+      } else if (isExcluded) {
+        return Chip(
+          visualDensity: VisualDensity.compact,
+          shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+          label: Text(
+            "album_info_card_backup_album_excluded",
+            style: TextStyle(
+              fontSize: 10,
+              color: isDarkTheme ? Colors.black : Colors.white,
+              fontWeight: FontWeight.bold,
+            ),
+          ).tr(),
+          backgroundColor: Colors.red[300],
+        );
+      }
+
+      return const SizedBox();
+    }
+
+    buildImageFilter() {
+      if (isSelected) {
+        return selectedFilter;
+      } else if (isExcluded) {
+        return excludedFilter;
+      } else {
+        return unselectedFilter;
+      }
+    }
+
+    return GestureDetector(
+      onTap: () {
+        ref.read(hapticFeedbackProvider.notifier).selectionClick();
+
+        if (isSelected) {
+          ref.read(backupProvider.notifier).removeAlbumForBackup(album);
+        } else {
+          ref.read(backupProvider.notifier).addAlbumForBackup(album);
+          if (syncAlbum) {
+            ref.read(albumProvider.notifier).createSyncAlbum(album.name);
+          }
+        }
+      },
+      onDoubleTap: () {
+        ref.read(hapticFeedbackProvider.notifier).selectionClick();
+
+        if (isExcluded) {
+          // Remove from exclude album list
+          ref.read(backupProvider.notifier).removeExcludedAlbumForBackup(album);
+        } else {
+          // Add to exclude album list
+
+          if (album.id == 'isAll' || album.name == 'Recents') {
+            ImmichToast.show(
+              context: context,
+              msg: 'Cannot exclude album contains all assets',
+              toastType: ToastType.error,
+              gravity: ToastGravity.BOTTOM,
+            );
+            return;
+          }
+
+          ref.read(backupProvider.notifier).addExcludedAlbumForBackup(album);
+        }
+      },
+      child: Card(
+        clipBehavior: Clip.hardEdge,
+        margin: const EdgeInsets.all(1),
+        shape: RoundedRectangleBorder(
+          borderRadius: const BorderRadius.all(
+            Radius.circular(12), // if you need this
+          ),
+          side: BorderSide(
+            color: isDarkTheme ? const Color.fromARGB(255, 37, 35, 35) : const Color(0xFFC9C9C9),
+            width: 1,
+          ),
+        ),
+        elevation: 0,
+        borderOnForeground: false,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Expanded(
+              child: Stack(
+                clipBehavior: Clip.hardEdge,
+                children: [
+                  ColorFiltered(
+                    colorFilter: buildImageFilter(),
+                    child: const Image(
+                      width: double.infinity,
+                      height: double.infinity,
+                      image: AssetImage('assets/immich-logo.png'),
+                      fit: BoxFit.cover,
+                    ),
+                  ),
+                  Positioned(bottom: 10, right: 25, child: buildSelectedTextBox()),
+                ],
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(left: 25),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Text(
+                          album.name,
+                          style: TextStyle(fontSize: 14, color: context.primaryColor, fontWeight: FontWeight.bold),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.only(top: 2.0),
+                          child: Text(
+                            album.assetCount.toString() + (album.isAll ? " (${'all'.tr()})" : ""),
+                            style: TextStyle(fontSize: 12, color: Colors.grey[600]),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  IconButton(
+                    onPressed: () {
+                      context.pushRoute(AlbumPreviewRoute(album: album.album));
+                    },
+                    icon: Icon(Icons.image_outlined, color: context.primaryColor, size: 24),
+                    splashRadius: 25,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/backup/album_info_list_tile.dart

@@ -0,0 +1,98 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/models/backup/available_album.model.dart';
+import 'package:immich_mobile/providers/album/album.provider.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class AlbumInfoListTile extends HookConsumerWidget {
+  final AvailableAlbum album;
+
+  const AlbumInfoListTile({super.key, required this.album});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final bool isSelected = ref.watch(backupProvider).selectedBackupAlbums.contains(album);
+    final bool isExcluded = ref.watch(backupProvider).excludedBackupAlbums.contains(album);
+    final syncAlbum = ref.watch(appSettingsServiceProvider).getSetting(AppSettingsEnum.syncAlbums);
+
+    buildTileColor() {
+      if (isSelected) {
+        return context.isDarkTheme ? context.primaryColor.withAlpha(100) : context.primaryColor.withAlpha(25);
+      } else if (isExcluded) {
+        return context.isDarkTheme ? Colors.red[300]?.withAlpha(150) : Colors.red[100]?.withAlpha(150);
+      } else {
+        return Colors.transparent;
+      }
+    }
+
+    buildIcon() {
+      if (isSelected) {
+        return Icon(Icons.check_circle_rounded, color: context.colorScheme.primary);
+      }
+
+      if (isExcluded) {
+        return Icon(Icons.remove_circle_rounded, color: context.colorScheme.error);
+      }
+
+      return Icon(Icons.circle, color: context.colorScheme.surfaceContainerHighest);
+    }
+
+    return GestureDetector(
+      onDoubleTap: () {
+        ref.watch(hapticFeedbackProvider.notifier).selectionClick();
+
+        if (isExcluded) {
+          // Remove from exclude album list
+          ref.read(backupProvider.notifier).removeExcludedAlbumForBackup(album);
+        } else {
+          // Add to exclude album list
+
+          if (album.id == 'isAll' || album.name == 'Recents') {
+            ImmichToast.show(
+              context: context,
+              msg: 'Cannot exclude album contains all assets',
+              toastType: ToastType.error,
+              gravity: ToastGravity.BOTTOM,
+            );
+            return;
+          }
+
+          ref.read(backupProvider.notifier).addExcludedAlbumForBackup(album);
+        }
+      },
+      child: ListTile(
+        tileColor: buildTileColor(),
+        contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+        onTap: () {
+          ref.read(hapticFeedbackProvider.notifier).selectionClick();
+          if (isSelected) {
+            ref.read(backupProvider.notifier).removeAlbumForBackup(album);
+          } else {
+            ref.read(backupProvider.notifier).addAlbumForBackup(album);
+            if (syncAlbum) {
+              ref.read(albumProvider.notifier).createSyncAlbum(album.name);
+            }
+          }
+        },
+        leading: buildIcon(),
+        title: Text(album.name, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+        subtitle: Text(album.assetCount.toString()),
+        trailing: IconButton(
+          onPressed: () {
+            context.pushRoute(AlbumPreviewRoute(album: album.album));
+          },
+          icon: Icon(Icons.image_outlined, color: context.primaryColor, size: 24),
+          splashRadius: 25,
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/backup/asset_info_table.dart

@@ -0,0 +1,105 @@
+import 'package:easy_localization/easy_localization.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/extensions/theme_extensions.dart';
+import 'package:immich_mobile/models/backup/backup_state.model.dart';
+import 'package:immich_mobile/models/backup/current_upload_asset.model.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+
+class BackupAssetInfoTable extends ConsumerWidget {
+  const BackupAssetInfoTable({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isManualUpload = ref.watch(
+      backupProvider.select((value) => value.backupProgress == BackUpProgressEnum.manualInProgress),
+    );
+
+    final isUploadInProgress = ref.watch(
+      backupProvider.select(
+        (value) =>
+            value.backupProgress == BackUpProgressEnum.inProgress ||
+            value.backupProgress == BackUpProgressEnum.inBackground ||
+            value.backupProgress == BackUpProgressEnum.manualInProgress,
+      ),
+    );
+
+    final asset = isManualUpload
+        ? ref.watch(manualUploadProvider.select((value) => value.currentUploadAsset))
+        : ref.watch(backupProvider.select((value) => value.currentUploadAsset));
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 8.0),
+      child: Table(
+        border: TableBorder.all(color: context.colorScheme.outlineVariant, width: 1),
+        children: [
+          TableRow(
+            children: [
+              TableCell(
+                verticalAlignment: TableCellVerticalAlignment.middle,
+                child: Padding(
+                  padding: const EdgeInsets.all(6.0),
+                  child:
+                      Text(
+                        'backup_controller_page_filename',
+                        style: TextStyle(
+                          color: context.colorScheme.onSurfaceSecondary,
+                          fontWeight: FontWeight.bold,
+                          fontSize: 10.0,
+                        ),
+                      ).tr(
+                        namedArgs: isUploadInProgress
+                            ? {'filename': asset.fileName, 'size': asset.fileType.toLowerCase()}
+                            : {'filename': "-", 'size': "-"},
+                      ),
+                ),
+              ),
+            ],
+          ),
+          TableRow(
+            children: [
+              TableCell(
+                verticalAlignment: TableCellVerticalAlignment.middle,
+                child: Padding(
+                  padding: const EdgeInsets.all(6.0),
+                  child: Text(
+                    "backup_controller_page_created",
+                    style: TextStyle(
+                      color: context.colorScheme.onSurfaceSecondary,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 10.0,
+                    ),
+                  ).tr(namedArgs: {'date': isUploadInProgress ? _getAssetCreationDate(asset) : "-"}),
+                ),
+              ),
+            ],
+          ),
+          TableRow(
+            children: [
+              TableCell(
+                child: Padding(
+                  padding: const EdgeInsets.all(6.0),
+                  child: Text(
+                    "backup_controller_page_id",
+                    style: TextStyle(
+                      color: context.colorScheme.onSurfaceSecondary,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 10.0,
+                    ),
+                  ).tr(namedArgs: {'id': isUploadInProgress ? asset.id : "-"}),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  @pragma('vm:prefer-inline')
+  String _getAssetCreationDate(CurrentUploadAsset asset) {
+    return DateFormat.yMMMMd().format(asset.fileCreatedAt.toLocal());
+  }
+}

mobile/lib/widgets/backup/backup_info_card.dart

@@ -0,0 +1,106 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+
+class BackupInfoCard extends StatelessWidget {
+  final String title;
+  final String subtitle;
+  final String info;
+
+  final VoidCallback? onTap;
+  final bool isLoading;
+  const BackupInfoCard({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    required this.info,
+    this.onTap,
+    this.isLoading = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      shape: RoundedRectangleBorder(
+        borderRadius: const BorderRadius.all(
+          Radius.circular(20), // if you need this
+        ),
+        side: BorderSide(color: context.colorScheme.outlineVariant, width: 1),
+      ),
+      elevation: 0,
+      borderOnForeground: false,
+      child: Column(
+        children: [
+          ListTile(
+            minVerticalPadding: 18,
+            isThreeLine: true,
+            title: Text(title, style: context.textTheme.titleMedium),
+            subtitle: Padding(
+              padding: const EdgeInsets.only(top: 4.0, right: 18.0),
+              child: Text(
+                subtitle,
+                style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+              ),
+            ),
+            trailing: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Stack(
+                  children: [
+                    Text(
+                      info,
+                      style: context.textTheme.titleLarge?.copyWith(
+                        color: context.colorScheme.onSurface.withAlpha(isLoading ? 50 : 255),
+                        fontFeatures: const [FontFeature.tabularFigures()],
+                      ),
+                    ),
+                    if (isLoading)
+                      Positioned.fill(
+                        child: Align(
+                          alignment: Alignment.center,
+                          child: SizedBox(
+                            width: 16,
+                            height: 16,
+                            child: CircularProgressIndicator(
+                              strokeWidth: 2,
+                              color: context.colorScheme.onSurface.withAlpha(150),
+                            ),
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+                Text(
+                  "backup_info_card_assets",
+                  style: context.textTheme.labelLarge?.copyWith(
+                    color: context.colorScheme.onSurface.withAlpha(isLoading ? 50 : 255),
+                  ),
+                ).tr(),
+              ],
+            ),
+          ),
+
+          if (onTap != null) ...[
+            const Divider(height: 0),
+            ListTile(
+              enableFeedback: true,
+              visualDensity: VisualDensity.compact,
+              contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 0.0),
+              shape: const RoundedRectangleBorder(
+                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
+              ),
+              onTap: onTap,
+              title: Text(
+                "view_details".t(context: context),
+                style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurface.withAlpha(200)),
+              ),
+              trailing: Icon(Icons.arrow_forward_ios, size: 16, color: context.colorScheme.onSurfaceVariant),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/backup/current_backup_asset_info_box.dart

@@ -0,0 +1,37 @@
+import 'dart:io';
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/widgets/backup/asset_info_table.dart';
+import 'package:immich_mobile/widgets/backup/error_chip.dart';
+import 'package:immich_mobile/widgets/backup/icloud_download_progress_bar.dart';
+import 'package:immich_mobile/widgets/backup/upload_progress_bar.dart';
+import 'package:immich_mobile/widgets/backup/upload_stats.dart';
+
+class CurrentUploadingAssetInfoBox extends StatelessWidget {
+  const CurrentUploadingAssetInfoBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      isThreeLine: true,
+      leading: Icon(Icons.image_outlined, color: context.primaryColor, size: 30),
+      title: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text("backup_controller_page_uploading_file_info", style: context.textTheme.titleSmall).tr(),
+          const BackupErrorChip(),
+        ],
+      ),
+      subtitle: Column(
+        children: [
+          if (Platform.isIOS) const IcloudDownloadProgressBar(),
+          const BackupUploadProgressBar(),
+          const BackupUploadStats(),
+          const BackupAssetInfoTable(),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/backup/drift_album_info_list_tile.dart

@@ -0,0 +1,96 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/album/local_album.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/providers/backup/backup_album.provider.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class DriftAlbumInfoListTile extends HookConsumerWidget {
+  final LocalAlbum album;
+
+  const DriftAlbumInfoListTile({super.key, required this.album});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final bool isSelected = album.backupSelection == BackupSelection.selected;
+    final bool isExcluded = album.backupSelection == BackupSelection.excluded;
+
+    buildTileColor() {
+      if (isSelected) {
+        return context.isDarkTheme ? context.primaryColor.withAlpha(100) : context.primaryColor.withAlpha(25);
+      } else if (isExcluded) {
+        return context.isDarkTheme ? Colors.red[300]?.withAlpha(150) : Colors.red[100]?.withAlpha(150);
+      } else {
+        return Colors.transparent;
+      }
+    }
+
+    buildIcon() {
+      if (isSelected) {
+        return Icon(Icons.check_circle_rounded, color: context.colorScheme.primary);
+      }
+
+      if (isExcluded) {
+        return Icon(Icons.remove_circle_rounded, color: context.colorScheme.error);
+      }
+
+      return Icon(Icons.circle, color: context.colorScheme.surfaceContainerHighest);
+    }
+
+    Widget buildSubtitle() {
+      return Text(
+        album.isIosSharedAlbum ? '${album.assetCount} (iCloud Shared Album)' : album.assetCount.toString(),
+        style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+      );
+    }
+
+    return GestureDetector(
+      onDoubleTap: () {
+        ref.watch(hapticFeedbackProvider.notifier).selectionClick();
+
+        if (isExcluded) {
+          ref.read(backupAlbumProvider.notifier).deselectAlbum(album);
+        } else {
+          if (album.id == 'isAll' || album.name == 'Recents') {
+            ImmichToast.show(
+              context: context,
+              msg: 'Cannot exclude album contains all assets',
+              toastType: ToastType.error,
+              gravity: ToastGravity.BOTTOM,
+            );
+            return;
+          }
+
+          ref.read(backupAlbumProvider.notifier).excludeAlbum(album);
+        }
+      },
+      child: ListTile(
+        tileColor: buildTileColor(),
+        contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+        onTap: () {
+          ref.read(hapticFeedbackProvider.notifier).selectionClick();
+          if (isSelected) {
+            ref.read(backupAlbumProvider.notifier).deselectAlbum(album);
+          } else {
+            ref.read(backupAlbumProvider.notifier).selectAlbum(album);
+          }
+        },
+        leading: buildIcon(),
+        title: Text(album.name, style: context.textTheme.titleSmall),
+        subtitle: buildSubtitle(),
+        trailing: IconButton(
+          onPressed: () {
+            context.pushRoute(LocalTimelineRoute(album: album));
+          },
+          icon: Icon(Icons.image_outlined, color: context.primaryColor, size: 24),
+          splashRadius: 25,
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/backup/error_chip.dart

@@ -0,0 +1,28 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/colors.dart';
+import 'package:immich_mobile/providers/backup/error_backup_list.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/backup/error_chip_text.dart';
+
+class BackupErrorChip extends ConsumerWidget {
+  const BackupErrorChip({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final hasErrors = ref.watch(errorBackupListProvider.select((value) => value.isNotEmpty));
+    if (!hasErrors) {
+      return const SizedBox();
+    }
+
+    return ActionChip(
+      avatar: const Icon(Icons.info, color: red400),
+      elevation: 1,
+      visualDensity: VisualDensity.compact,
+      label: const BackupErrorChipText(),
+      backgroundColor: Colors.white,
+      onPressed: () => context.pushRoute(const FailedBackupStatusRoute()),
+    );
+  }
+}

mobile/lib/widgets/backup/error_chip_text.dart

@@ -0,0 +1,22 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/colors.dart';
+import 'package:immich_mobile/providers/backup/error_backup_list.provider.dart';
+
+class BackupErrorChipText extends ConsumerWidget {
+  const BackupErrorChipText({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final count = ref.watch(errorBackupListProvider).length;
+    if (count == 0) {
+      return const SizedBox();
+    }
+
+    return const Text(
+      "backup_controller_page_failed",
+      style: TextStyle(color: red400, fontWeight: FontWeight.bold, fontSize: 11),
+    ).tr(namedArgs: {'count': count.toString()});
+  }
+}

mobile/lib/widgets/backup/icloud_download_progress_bar.dart

@@ -0,0 +1,43 @@
+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/models/backup/backup_state.model.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+
+class IcloudDownloadProgressBar extends ConsumerWidget {
+  const IcloudDownloadProgressBar({super.key});
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isManualUpload = ref.watch(
+      backupProvider.select((value) => value.backupProgress == BackUpProgressEnum.manualInProgress),
+    );
+
+    final isIcloudAsset = isManualUpload
+        ? ref.watch(manualUploadProvider.select((value) => value.currentUploadAsset.isIcloudAsset))
+        : ref.watch(backupProvider.select((value) => value.currentUploadAsset.isIcloudAsset));
+
+    if (!isIcloudAsset) {
+      return const SizedBox();
+    }
+
+    final iCloudDownloadProgress = ref.watch(backupProvider.select((value) => value.iCloudDownloadProgress));
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 8.0),
+      child: Row(
+        children: [
+          SizedBox(width: 110, child: Text("iCloud Download", style: context.textTheme.labelSmall)),
+          Expanded(
+            child: LinearProgressIndicator(
+              minHeight: 10.0,
+              value: iCloudDownloadProgress / 100.0,
+              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
+            ),
+          ),
+          Text(" ${iCloudDownloadProgress ~/ 1}%", style: const TextStyle(fontSize: 12)),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/backup/ios_debug_info_tile.dart

@@ -0,0 +1,49 @@
+import 'package:intl/intl.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/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/backup/ios_background_settings.provider.dart';
+
+/// This is a simple debug widget which should be removed later on when we are
+/// more confident about background sync
+class IosDebugInfoTile extends HookConsumerWidget {
+  final IOSBackgroundSettings settings;
+  const IosDebugInfoTile({super.key, required this.settings});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final fetch = settings.timeOfLastFetch;
+    final processing = settings.timeOfLastProcessing;
+    final processes = settings.numberOfBackgroundTasksQueued;
+
+    final String title;
+    if (processes == 0) {
+      title = 'ios_debug_info_no_processes_queued'.t(context: context);
+    } else {
+      title = 'ios_debug_info_processes_queued'.t(context: context, args: {'count': processes});
+    }
+
+    final df = DateFormat.yMd().add_jm();
+    final String subtitle;
+    if (fetch == null && processing == null) {
+      subtitle = 'ios_debug_info_no_sync_yet'.t(context: context);
+    } else if (fetch != null && processing == null) {
+      subtitle = 'ios_debug_info_fetch_ran_at'.t(context: context, args: {'dateTime': df.format(fetch)});
+    } else if (processing != null && fetch == null) {
+      subtitle = 'ios_debug_info_processing_ran_at'.t(context: context, args: {'dateTime': df.format(processing)});
+    } else {
+      final fetchOrProcessing = fetch!.isAfter(processing!) ? fetch : processing;
+      subtitle = 'ios_debug_info_last_sync_at'.t(context: context, args: {'dateTime': df.format(fetchOrProcessing)});
+    }
+
+    return ListTile(
+      title: Text(
+        title,
+        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: context.primaryColor),
+      ),
+      subtitle: Text(subtitle, style: const TextStyle(fontSize: 14)),
+      leading: Icon(Icons.bug_report, color: context.primaryColor),
+    );
+  }
+}

mobile/lib/widgets/backup/upload_progress_bar.dart

@@ -0,0 +1,45 @@
+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/models/backup/backup_state.model.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+
+class BackupUploadProgressBar extends ConsumerWidget {
+  const BackupUploadProgressBar({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isManualUpload = ref.watch(
+      backupProvider.select((value) => value.backupProgress == BackUpProgressEnum.manualInProgress),
+    );
+
+    final isIcloudAsset = isManualUpload
+        ? ref.watch(manualUploadProvider.select((value) => value.currentUploadAsset.isIcloudAsset))
+        : ref.watch(backupProvider.select((value) => value.currentUploadAsset.isIcloudAsset));
+
+    final uploadProgress = isManualUpload
+        ? ref.watch(manualUploadProvider.select((value) => value.progressInPercentage))
+        : ref.watch(backupProvider.select((value) => value.progressInPercentage));
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 8.0),
+      child: Row(
+        children: [
+          if (isIcloudAsset) SizedBox(width: 110, child: Text("Immich Upload", style: context.textTheme.labelSmall)),
+          Expanded(
+            child: LinearProgressIndicator(
+              minHeight: 10.0,
+              value: uploadProgress / 100.0,
+              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
+            ),
+          ),
+          Text(
+            " ${uploadProgress.toStringAsFixed(0)}%",
+            style: const TextStyle(fontSize: 12, fontFamily: "GoogleSansCode"),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/backup/upload_stats.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/models/backup/backup_state.model.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+
+class BackupUploadStats extends ConsumerWidget {
+  const BackupUploadStats({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isManualUpload = ref.watch(
+      backupProvider.select((value) => value.backupProgress == BackUpProgressEnum.manualInProgress),
+    );
+
+    final uploadFileProgress = isManualUpload
+        ? ref.watch(manualUploadProvider.select((value) => value.progressInFileSize))
+        : ref.watch(backupProvider.select((value) => value.progressInFileSize));
+
+    final uploadFileSpeed = isManualUpload
+        ? ref.watch(manualUploadProvider.select((value) => value.progressInFileSpeed))
+        : ref.watch(backupProvider.select((value) => value.progressInFileSpeed));
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 2.0, bottom: 2.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(uploadFileProgress, style: const TextStyle(fontSize: 10, fontFamily: "GoogleSansCode")),
+          Text(
+            _formatUploadFileSpeed(uploadFileSpeed),
+            style: const TextStyle(fontSize: 10, fontFamily: "GoogleSansCode"),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @pragma('vm:prefer-inline')
+  String _formatUploadFileSpeed(double uploadFileSpeed) {
+    if (uploadFileSpeed < 1024) {
+      return '${uploadFileSpeed.toStringAsFixed(2)} B/s';
+    } else if (uploadFileSpeed < 1024 * 1024) {
+      return '${(uploadFileSpeed / 1024).toStringAsFixed(2)} KB/s';
+    } else if (uploadFileSpeed < 1024 * 1024 * 1024) {
+      return '${(uploadFileSpeed / (1024 * 1024)).toStringAsFixed(2)} MB/s';
+    } else {
+      return '${(uploadFileSpeed / (1024 * 1024 * 1024)).toStringAsFixed(2)} GB/s';
+    }
+  }
+}

mobile/lib/widgets/common/app_bar_dialog/app_bar_dialog.dart

@@ -0,0 +1,294 @@
+import 'dart:async';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/models/backup/backup_state.model.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/providers/auth.provider.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/locale_provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/providers/websocket.provider.dart';
+import 'package:immich_mobile/pages/common/settings.page.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/bytes_units.dart';
+import 'package:immich_mobile/widgets/common/app_bar_dialog/app_bar_profile_info.dart';
+import 'package:immich_mobile/widgets/common/app_bar_dialog/app_bar_server_info.dart';
+import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
+import 'package:immich_mobile/widgets/common/immich_logo.dart';
+import 'package:package_info_plus/package_info_plus.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class ImmichAppBarDialog extends HookConsumerWidget {
+  const ImmichAppBarDialog({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    ref.watch(localeProvider);
+    BackUpState backupState = ref.watch(backupProvider);
+    final theme = context.themeData;
+    bool isHorizontal = !context.isMobile;
+    final horizontalPadding = isHorizontal ? 100.0 : 20.0;
+    final user = ref.watch(currentUserProvider);
+    final isLoggingOut = useState(false);
+    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+
+    useEffect(() {
+      ref.read(backupProvider.notifier).updateDiskInfo();
+      ref.read(currentUserProvider.notifier).refresh();
+      return null;
+    }, []);
+
+    buildTopRow() {
+      return SizedBox(
+        height: 56,
+        child: Stack(
+          alignment: Alignment.centerLeft,
+          children: [
+            IconButton(onPressed: () => context.pop(), icon: const Icon(Icons.close, size: 20)),
+            Align(
+              alignment: Alignment.center,
+              child: Padding(
+                padding: const EdgeInsets.only(bottom: 4),
+                child: Image.asset(
+                  context.isDarkTheme ? 'assets/immich-text-dark.png' : 'assets/immich-text-light.png',
+                  height: 16,
+                ),
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+
+    buildActionButton(IconData icon, String text, Function() onTap, {Widget? trailing}) {
+      return ListTile(
+        dense: true,
+        visualDensity: VisualDensity.standard,
+        contentPadding: const EdgeInsets.only(left: 30, right: 30),
+        minLeadingWidth: 40,
+        leading: SizedBox(child: Icon(icon, color: theme.textTheme.labelLarge?.color?.withAlpha(250), size: 20)),
+        title: Text(
+          text,
+          style: theme.textTheme.labelLarge?.copyWith(color: theme.textTheme.labelLarge?.color?.withAlpha(250)),
+        ).tr(),
+        onTap: onTap,
+        trailing: trailing,
+      );
+    }
+
+    buildSettingButton() {
+      return buildActionButton(Icons.settings_outlined, "settings", () => context.pushRoute(const SettingsRoute()));
+    }
+
+    buildFreeUpSpaceButton() {
+      return buildActionButton(
+        Icons.cleaning_services_outlined,
+        "free_up_space",
+        () => context.pushRoute(SettingsSubRoute(section: SettingSection.freeUpSpace)),
+      );
+    }
+
+    buildAppLogButton() {
+      return buildActionButton(
+        Icons.assignment_outlined,
+        "profile_drawer_app_logs",
+        () => context.pushRoute(const AppLogRoute()),
+      );
+    }
+
+    buildSignOutButton() {
+      return buildActionButton(
+        Icons.logout_rounded,
+        "sign_out",
+        () async {
+          if (isLoggingOut.value) {
+            return;
+          }
+
+          unawaited(
+            showDialog(
+              context: context,
+              builder: (BuildContext ctx) {
+                return ConfirmDialog(
+                  title: "app_bar_signout_dialog_title",
+                  content: "app_bar_signout_dialog_content",
+                  ok: "yes",
+                  onOk: () async {
+                    isLoggingOut.value = true;
+                    await ref.read(authProvider.notifier).logout().whenComplete(() => isLoggingOut.value = false);
+
+                    ref.read(manualUploadProvider.notifier).cancelBackup();
+                    ref.read(backupProvider.notifier).cancelBackup();
+                    unawaited(ref.read(assetProvider.notifier).clearAllAssets());
+                    ref.read(websocketProvider.notifier).disconnect();
+                    unawaited(context.replaceRoute(const LoginRoute()));
+                  },
+                );
+              },
+            ),
+          );
+        },
+        trailing: isLoggingOut.value
+            ? const SizedBox.square(dimension: 20, child: CircularProgressIndicator(strokeWidth: 2))
+            : null,
+      );
+    }
+
+    Widget buildStorageInformation() {
+      var percentage = backupState.serverInfo.diskUsagePercentage / 100;
+      var usedDiskSpace = backupState.serverInfo.diskUse;
+      var totalDiskSpace = backupState.serverInfo.diskSize;
+
+      if (user != null && user.hasQuota) {
+        usedDiskSpace = formatBytes(user.quotaUsageInBytes);
+        totalDiskSpace = formatBytes(user.quotaSizeInBytes);
+        percentage = user.quotaUsageInBytes / user.quotaSizeInBytes;
+      }
+
+      return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 3),
+        child: Container(
+          padding: const EdgeInsets.symmetric(vertical: 4),
+          decoration: BoxDecoration(color: context.colorScheme.surface),
+          child: ListTile(
+            minLeadingWidth: 50,
+            leading: Icon(Icons.storage_rounded, color: theme.primaryColor),
+            title: Text(
+              "backup_controller_page_server_storage",
+              style: context.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.w500),
+            ).tr(),
+            isThreeLine: true,
+            subtitle: Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.only(top: 8.0),
+                    child: LinearProgressIndicator(
+                      minHeight: 10.0,
+                      value: percentage,
+                      borderRadius: const BorderRadius.all(Radius.circular(10.0)),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(top: 12.0),
+                    child: const Text(
+                      'backup_controller_page_storage_format',
+                    ).tr(namedArgs: {'used': usedDiskSpace, 'total': totalDiskSpace}),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    buildFooter() {
+      return Padding(
+        padding: const EdgeInsets.only(top: 10, bottom: 20),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            InkWell(
+              onTap: () {
+                context.pop();
+                launchUrl(Uri.parse('https://docs.immich.app'), mode: LaunchMode.externalApplication);
+              },
+              child: Text("documentation", style: context.textTheme.bodySmall).tr(),
+            ),
+            const SizedBox(width: 20, child: Text("•", textAlign: TextAlign.center)),
+            InkWell(
+              onTap: () {
+                context.pop();
+                launchUrl(Uri.parse('https://github.com/immich-app/immich'), mode: LaunchMode.externalApplication);
+              },
+              child: Text("profile_drawer_github", style: context.textTheme.bodySmall).tr(),
+            ),
+            const SizedBox(width: 20, child: Text("•", textAlign: TextAlign.center)),
+            InkWell(
+              onTap: () async {
+                context.pop();
+                final packageInfo = await PackageInfo.fromPlatform();
+                showLicensePage(
+                  context: context,
+                  applicationIcon: const Padding(
+                    padding: EdgeInsetsGeometry.symmetric(vertical: 10),
+                    child: ImmichLogo(size: 40),
+                  ),
+                  applicationVersion: packageInfo.version,
+                );
+              },
+              child: Text("licenses", style: context.textTheme.bodySmall).tr(),
+            ),
+          ],
+        ),
+      );
+    }
+
+    buildReadonlyMessage() {
+      return Padding(
+        padding: const EdgeInsets.only(left: 10.0, right: 10.0),
+        child: ListTile(
+          dense: true,
+          visualDensity: VisualDensity.standard,
+          contentPadding: const EdgeInsets.only(left: 20, right: 20),
+          shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
+          minLeadingWidth: 20,
+          tileColor: theme.primaryColor.withAlpha(80),
+          title: Text(
+            "profile_drawer_readonly_mode",
+            style: theme.textTheme.labelLarge?.copyWith(color: theme.textTheme.labelLarge?.color?.withAlpha(250)),
+            textAlign: TextAlign.center,
+          ).tr(),
+        ),
+      );
+    }
+
+    return Dismissible(
+      behavior: HitTestBehavior.translucent,
+      direction: DismissDirection.down,
+      onDismissed: (_) => context.pop(),
+      key: const Key('app_bar_dialog'),
+      child: Dialog(
+        clipBehavior: Clip.hardEdge,
+        alignment: Alignment.topCenter,
+        insetPadding: EdgeInsets.only(
+          top: isHorizontal ? 20 : 40,
+          left: horizontalPadding,
+          right: horizontalPadding,
+          bottom: isHorizontal ? 20 : 100,
+        ),
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
+        child: SizedBox(
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Container(padding: const EdgeInsets.symmetric(horizontal: 8), child: buildTopRow()),
+                const AppBarProfileInfoBox(),
+                buildStorageInformation(),
+                const AppBarServerInfo(),
+                if (Store.isBetaTimelineEnabled && isReadonlyModeEnabled) buildReadonlyMessage(),
+                buildAppLogButton(),
+                buildFreeUpSpaceButton(),
+                buildSettingButton(),
+                buildSignOutButton(),
+                buildFooter(),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/app_bar_dialog/app_bar_profile_info.dart

@@ -0,0 +1,129 @@
+import 'dart:async';
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:image_picker/image_picker.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/providers/auth.provider.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/upload_profile_image.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class AppBarProfileInfoBox extends HookConsumerWidget {
+  const AppBarProfileInfoBox({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final authState = ref.watch(authProvider);
+    final uploadProfileImageStatus = ref.watch(uploadProfileImageProvider).status;
+    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+    final user = ref.watch(currentUserProvider);
+
+    buildUserProfileImage() {
+      if (user == null) {
+        return const CircleAvatar(
+          radius: 20,
+          backgroundImage: AssetImage('assets/immich-logo.png'),
+          backgroundColor: Colors.transparent,
+        );
+      }
+
+      final userImage = UserCircleAvatar(radius: 22, size: 44, user: user);
+
+      if (uploadProfileImageStatus == UploadProfileStatus.loading) {
+        return const SizedBox(height: 40, width: 40, child: ImmichLoadingIndicator(borderRadius: 20));
+      }
+
+      return userImage;
+    }
+
+    pickUserProfileImage() async {
+      final XFile? image = await ImagePicker().pickImage(source: ImageSource.gallery, maxHeight: 1024, maxWidth: 1024);
+
+      if (image != null) {
+        var success = await ref.watch(uploadProfileImageProvider.notifier).upload(image);
+
+        if (success) {
+          final profileImagePath = ref.read(uploadProfileImageProvider).profileImagePath;
+          ref.watch(authProvider.notifier).updateUserProfileImagePath(profileImagePath);
+          if (user != null) {
+            ref.read(currentUserProvider.notifier).refresh();
+          }
+
+          unawaited(ref.read(backupProvider.notifier).updateDiskInfo());
+        }
+      }
+    }
+
+    void toggleReadonlyMode() {
+      // read only mode is only supported int he beta experience
+      // TODO: remove this check when the beta UI goes stable
+      if (!Store.isBetaTimelineEnabled) return;
+
+      final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+      ref.read(readonlyModeProvider.notifier).toggleReadonlyMode();
+
+      context.scaffoldMessenger.showSnackBar(
+        SnackBar(
+          duration: const Duration(seconds: 2),
+          content: Text(
+            (isReadonlyModeEnabled ? "readonly_mode_disabled" : "readonly_mode_enabled").tr(),
+            style: context.textTheme.bodyLarge?.copyWith(color: context.primaryColor),
+          ),
+        ),
+      );
+    }
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 10.0),
+      child: Container(
+        width: double.infinity,
+        decoration: BoxDecoration(
+          color: context.colorScheme.surface,
+          borderRadius: const BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
+        ),
+        child: ListTile(
+          minLeadingWidth: 50,
+          leading: GestureDetector(
+            onTap: pickUserProfileImage,
+            onLongPress: toggleReadonlyMode,
+            child: Stack(
+              clipBehavior: Clip.none,
+              children: [
+                AbsorbPointer(child: buildUserProfileImage()),
+                if (!isReadonlyModeEnabled)
+                  Positioned(
+                    bottom: -5,
+                    right: -8,
+                    child: Material(
+                      color: context.colorScheme.surfaceContainerHighest,
+                      elevation: 3,
+                      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(50.0))),
+                      child: Padding(
+                        padding: const EdgeInsets.all(5.0),
+                        child: Icon(Icons.camera_alt_outlined, color: context.primaryColor, size: 14),
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+          title: Text(
+            authState.name,
+            style: context.textTheme.titleMedium?.copyWith(color: context.primaryColor, fontWeight: FontWeight.w500),
+          ),
+          subtitle: Text(
+            authState.userEmail,
+            style: context.textTheme.bodySmall?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/app_bar_dialog/app_bar_server_info.dart

@@ -0,0 +1,223 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/models/server_info/server_info.model.dart';
+import 'package:immich_mobile/providers/locale_provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/utils/url_helper.dart';
+import 'package:immich_mobile/widgets/common/app_bar_dialog/server_update_notification.dart';
+import 'package:package_info_plus/package_info_plus.dart';
+
+class AppBarServerInfo extends HookConsumerWidget {
+  const AppBarServerInfo({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    ref.watch(localeProvider);
+    ServerInfo serverInfoState = ref.watch(serverInfoProvider);
+    final user = ref.watch(currentUserProvider);
+    final bool showVersionWarning = ref.watch(versionWarningPresentProvider(user));
+
+    final appInfo = useState({});
+    const titleFontSize = 12.0;
+    const contentFontSize = 11.0;
+
+    getPackageInfo() async {
+      PackageInfo packageInfo = await PackageInfo.fromPlatform();
+
+      appInfo.value = {"version": packageInfo.version, "buildNumber": packageInfo.buildNumber};
+    }
+
+    useEffect(() {
+      getPackageInfo();
+      return null;
+    }, []);
+
+    return Padding(
+      padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
+      child: Container(
+        decoration: BoxDecoration(
+          color: context.colorScheme.surface,
+          borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
+        ),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              if (showVersionWarning) ...[
+                const Padding(padding: EdgeInsets.symmetric(horizontal: 8.0), child: ServerUpdateNotification()),
+                const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
+              ],
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 10.0),
+                      child: Text(
+                        "server_info_box_app_version".tr(),
+                        style: TextStyle(
+                          fontSize: titleFontSize,
+                          color: context.textTheme.labelSmall?.color,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    flex: 0,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 10.0),
+                      child: Text(
+                        "${appInfo.value["version"]} build.${appInfo.value["buildNumber"]}",
+                        style: TextStyle(
+                          fontSize: contentFontSize,
+                          color: context.colorScheme.onSurfaceSecondary,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 10.0),
+                      child: Text(
+                        "server_version".tr(),
+                        style: TextStyle(
+                          fontSize: titleFontSize,
+                          color: context.textTheme.labelSmall?.color,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    flex: 0,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 10.0),
+                      child: Text(
+                        serverInfoState.serverVersion.major > 0
+                            ? "${serverInfoState.serverVersion.major}.${serverInfoState.serverVersion.minor}.${serverInfoState.serverVersion.patch}"
+                            : "--",
+                        style: TextStyle(
+                          fontSize: contentFontSize,
+                          color: context.colorScheme.onSurfaceSecondary,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 10.0),
+                      child: Text(
+                        "server_info_box_server_url".tr(),
+                        style: TextStyle(
+                          fontSize: titleFontSize,
+                          color: context.textTheme.labelSmall?.color,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    flex: 0,
+                    child: Container(
+                      width: 200,
+                      padding: const EdgeInsets.only(right: 10.0),
+                      child: Tooltip(
+                        verticalOffset: 0,
+                        decoration: BoxDecoration(
+                          color: context.primaryColor.withValues(alpha: 0.9),
+                          borderRadius: const BorderRadius.all(Radius.circular(10)),
+                        ),
+                        textStyle: TextStyle(
+                          color: context.isDarkTheme ? Colors.black : Colors.white,
+                          fontWeight: FontWeight.bold,
+                        ),
+                        message: getServerUrl() ?? '--',
+                        preferBelow: false,
+                        triggerMode: TooltipTriggerMode.tap,
+                        child: Text(
+                          getServerUrl() ?? '--',
+                          style: TextStyle(
+                            fontSize: contentFontSize,
+                            color: context.colorScheme.onSurfaceSecondary,
+                            fontWeight: FontWeight.bold,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                          textAlign: TextAlign.end,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 10.0),
+                      child: Row(
+                        children: [
+                          if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
+                            const Padding(
+                              padding: EdgeInsets.only(right: 5.0),
+                              child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
+                            ),
+                          Text(
+                            "latest_version".tr(),
+                            style: TextStyle(
+                              fontSize: titleFontSize,
+                              color: context.textTheme.labelSmall?.color,
+                              fontWeight: FontWeight.w500,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    flex: 0,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 10.0),
+                      child: Text(
+                        serverInfoState.latestVersion.major > 0
+                            ? "${serverInfoState.latestVersion.major}.${serverInfoState.latestVersion.minor}.${serverInfoState.latestVersion.patch}"
+                            : "--",
+                        style: TextStyle(
+                          fontSize: contentFontSize,
+                          color: context.colorScheme.onSurfaceSecondary,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/app_bar_dialog/server_update_notification.dart

@@ -0,0 +1,85 @@
+import 'dart:io';
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/constants.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/models/server_info/server_info.model.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:url_launcher/url_launcher_string.dart';
+
+class ServerUpdateNotification extends HookConsumerWidget {
+  const ServerUpdateNotification({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final serverInfoState = ref.watch(serverInfoProvider);
+
+    Color errorColor = const Color.fromARGB(85, 253, 97, 83);
+    Color infoColor = context.isDarkTheme ? context.primaryColor.withAlpha(55) : context.primaryColor.withAlpha(25);
+    void openUpdateLink() {
+      String url;
+      if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate) {
+        url = kImmichLatestRelease;
+      } else {
+        if (Platform.isIOS) {
+          url = kImmichAppStoreLink;
+        } else if (Platform.isAndroid) {
+          url = kImmichPlayStoreLink;
+        } else {
+          // Fallback to latest release for other/unknown platforms
+          url = kImmichLatestRelease;
+        }
+      }
+
+      launchUrlString(url, mode: LaunchMode.externalApplication);
+    }
+
+    return SizedBox(
+      width: double.infinity,
+      child: Container(
+        decoration: BoxDecoration(
+          color: serverInfoState.versionStatus == VersionStatus.error ? errorColor : infoColor,
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
+          border: Border.all(
+            color: serverInfoState.versionStatus == VersionStatus.error
+                ? errorColor
+                : context.primaryColor.withAlpha(50),
+            width: 0.75,
+          ),
+        ),
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Expanded(
+              child: Text(
+                serverInfoState.versionStatus.message,
+                textAlign: TextAlign.start,
+                maxLines: 3,
+                overflow: TextOverflow.ellipsis,
+                style: context.textTheme.labelLarge,
+              ),
+            ),
+            if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate ||
+                serverInfoState.versionStatus == VersionStatus.clientOutOfDate) ...[
+              const SizedBox(width: 8),
+              TextButton(
+                onPressed: openUpdateLink,
+                style: TextButton.styleFrom(
+                  padding: const EdgeInsets.all(4),
+                  minimumSize: const Size(0, 0),
+                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                ),
+                child: serverInfoState.versionStatus == VersionStatus.clientOutOfDate
+                    ? Text("action_common_update".tr(context: context))
+                    : Text("view".tr()),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/confirm_dialog.dart

@@ -0,0 +1,50 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class ConfirmDialog extends StatelessWidget {
+  final Function onOk;
+  final String title;
+  final String content;
+  final String cancel;
+  final String ok;
+
+  const ConfirmDialog({
+    super.key,
+    required this.onOk,
+    required this.title,
+    required this.content,
+    this.cancel = "cancel",
+    this.ok = "backup_controller_page_background_battery_info_ok",
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    void onOkPressed() {
+      onOk();
+      context.pop(true);
+    }
+
+    return AlertDialog(
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
+      title: Text(title).tr(),
+      content: Text(content).tr(),
+      actions: [
+        TextButton(
+          onPressed: () => context.pop(false),
+          child: Text(
+            cancel,
+            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+        TextButton(
+          onPressed: onOkPressed,
+          child: Text(
+            ok,
+            style: TextStyle(color: context.colorScheme.error, fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/common/date_time_picker.dart

@@ -0,0 +1,200 @@
+import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/widgets/common/dropdown_search_menu.dart';
+import 'package:timezone/timezone.dart' as tz;
+import 'package:timezone/timezone.dart';
+
+Future<String?> showDateTimePicker({
+  required BuildContext context,
+  DateTime? initialDateTime,
+  String? initialTZ,
+  Duration? initialTZOffset,
+}) {
+  return showDialog<String?>(
+    context: context,
+    builder: (context) =>
+        _DateTimePicker(initialDateTime: initialDateTime, initialTZ: initialTZ, initialTZOffset: initialTZOffset),
+  );
+}
+
+String _getFormattedOffset(int offsetInMilli, tz.Location location) {
+  return "${location.name} (${Duration(milliseconds: offsetInMilli).formatAsOffset()})";
+}
+
+class _DateTimePicker extends HookWidget {
+  final DateTime? initialDateTime;
+  final String? initialTZ;
+  final Duration? initialTZOffset;
+
+  const _DateTimePicker({this.initialDateTime, this.initialTZ, this.initialTZOffset});
+
+  _TimeZoneOffset _getInitiationLocation() {
+    if (initialTZ != null) {
+      try {
+        return _TimeZoneOffset.fromLocation(tz.timeZoneDatabase.get(initialTZ!));
+      } on LocationNotFoundException {
+        // no-op
+      }
+    }
+
+    Duration? tzOffset = initialTZOffset ?? initialDateTime?.timeZoneOffset;
+
+    if (tzOffset != null) {
+      final offsetInMilli = tzOffset.inMilliseconds;
+      // get all locations with matching offset
+      final locations = tz.timeZoneDatabase.locations.values.where(
+        (location) => location.currentTimeZone.offset == offsetInMilli,
+      );
+      // Prefer locations with abbreviation first
+      final location =
+          locations.firstWhereOrNull((e) => !e.currentTimeZone.abbreviation.contains("0")) ?? locations.firstOrNull;
+      if (location != null) {
+        return _TimeZoneOffset.fromLocation(location);
+      }
+    }
+
+    return _TimeZoneOffset.fromLocation(tz.getLocation("UTC"));
+  }
+
+  // returns a list of location<name> along with it's offset in duration
+  List<_TimeZoneOffset> getAllTimeZones() {
+    return tz.timeZoneDatabase.locations.values.map(_TimeZoneOffset.fromLocation).sorted().toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final date = useState<DateTime>(initialDateTime ?? DateTime.now());
+    final tzOffset = useState<_TimeZoneOffset>(_getInitiationLocation());
+    final timeZones = useMemoized(() => getAllTimeZones(), const []);
+    final menuEntries = timeZones
+        .map(
+          (timezone) => DropdownMenuEntry<_TimeZoneOffset>(
+            value: timezone,
+            label: timezone.display,
+            style: ButtonStyle(textStyle: WidgetStatePropertyAll(context.textTheme.bodyMedium)),
+          ),
+        )
+        .toList();
+
+    void pickDate() async {
+      final now = DateTime.now();
+      // Handles cases where the date from the asset is far off in the future
+      final initialDate = date.value.isAfter(now) ? now : date.value;
+      final newDate = await showDatePicker(
+        context: context,
+        initialDate: initialDate,
+        firstDate: DateTime(1800),
+        lastDate: now,
+      );
+      if (newDate == null) {
+        return;
+      }
+
+      final newTime = await showTimePicker(context: context, initialTime: TimeOfDay.fromDateTime(date.value));
+
+      if (newTime == null) {
+        return;
+      }
+
+      date.value = newDate.copyWith(hour: newTime.hour, minute: newTime.minute);
+    }
+
+    void popWithDateTime() {
+      final formattedDateTime = DateFormat("yyyy-MM-dd'T'HH:mm:ss").format(date.value);
+      final dtWithOffset =
+          formattedDateTime + Duration(milliseconds: tzOffset.value.offsetInMilliseconds).formatAsOffset();
+      context.pop(dtWithOffset);
+    }
+
+    return AlertDialog(
+      contentPadding: const EdgeInsets.symmetric(vertical: 32, horizontal: 18),
+      actions: [
+        TextButton(
+          onPressed: () => context.pop(),
+          child: Text(
+            "cancel",
+            style: context.textTheme.bodyMedium?.copyWith(
+              fontWeight: FontWeight.w600,
+              color: context.colorScheme.error,
+            ),
+          ).tr(),
+        ),
+        TextButton(
+          onPressed: popWithDateTime,
+          child: Text(
+            "action_common_update",
+            style: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600, color: context.primaryColor),
+          ).tr(),
+        ),
+      ],
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const Text("date_and_time", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)).tr(),
+          const SizedBox(height: 32),
+          ListTile(
+            tileColor: context.colorScheme.surfaceContainerHighest,
+            shape: ShapeBorder.lerp(
+              const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
+              const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
+              1,
+            ),
+            trailing: Icon(Icons.edit_outlined, size: 18, color: context.primaryColor),
+            title: Text(DateFormat("dd-MM-yyyy hh:mm a").format(date.value), style: context.textTheme.bodyMedium),
+            onTap: pickDate,
+          ),
+          const SizedBox(height: 24),
+          DropdownSearchMenu(
+            trailingIcon: Icon(Icons.arrow_drop_down, color: context.primaryColor),
+            hintText: "timezone".tr(),
+            label: const Text('timezone').tr(),
+            textStyle: context.textTheme.bodyMedium,
+            onSelected: (value) => tzOffset.value = value,
+            initialSelection: tzOffset.value,
+            dropdownMenuEntries: menuEntries,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _TimeZoneOffset implements Comparable<_TimeZoneOffset> {
+  final String display;
+  final Location location;
+
+  const _TimeZoneOffset({required this.display, required this.location});
+
+  _TimeZoneOffset copyWith({String? display, Location? location}) {
+    return _TimeZoneOffset(display: display ?? this.display, location: location ?? this.location);
+  }
+
+  int get offsetInMilliseconds => location.currentTimeZone.offset;
+
+  _TimeZoneOffset.fromLocation(tz.Location l)
+    : display = _getFormattedOffset(l.currentTimeZone.offset, l),
+      location = l;
+
+  @override
+  int compareTo(_TimeZoneOffset other) {
+    return offsetInMilliseconds.compareTo(other.offsetInMilliseconds);
+  }
+
+  @override
+  String toString() => '_TimeZoneOffset(display: $display, location: $location)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is _TimeZoneOffset && other.display == display && other.offsetInMilliseconds == offsetInMilliseconds;
+  }
+
+  @override
+  int get hashCode => display.hashCode ^ offsetInMilliseconds.hashCode ^ location.hashCode;
+}

mobile/lib/widgets/common/delayed_loading_indicator.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
+
+class DelayedLoadingIndicator extends StatelessWidget {
+  /// The delay to avoid showing the loading indicator
+  final Duration delay;
+
+  /// Defaults to using the [ImmichLoadingIndicator]
+  final Widget? child;
+
+  /// An optional fade in duration to animate the loading
+  final Duration? fadeInDuration;
+
+  const DelayedLoadingIndicator({super.key, this.delay = const Duration(seconds: 3), this.child, this.fadeInDuration});
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+      future: Future.delayed(delay),
+      builder: (context, snapshot) {
+        late Widget c;
+        if (snapshot.connectionState == ConnectionState.done) {
+          c = child ?? const ImmichLoadingIndicator(key: ValueKey('loading'));
+        } else {
+          c = Container(key: const ValueKey('hiding'));
+        }
+
+        return AnimatedSwitcher(duration: fadeInDuration ?? Duration.zero, child: c);
+      },
+    );
+  }
+}

mobile/lib/widgets/common/drag_sheet.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class CustomDraggingHandle extends StatelessWidget {
+  const CustomDraggingHandle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 4,
+      width: 30,
+      decoration: BoxDecoration(
+        color: context.themeData.dividerColor,
+        borderRadius: const BorderRadius.all(Radius.circular(20)),
+      ),
+    );
+  }
+}
+
+class ControlBoxButton extends StatelessWidget {
+  const ControlBoxButton({super.key, required this.label, required this.iconData, this.onPressed, this.onLongPressed});
+
+  final String label;
+  final IconData iconData;
+  final void Function()? onPressed;
+  final void Function()? onLongPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final minWidth = context.isMobile ? MediaQuery.sizeOf(context).width / 4.5 : 75.0;
+
+    return MaterialButton(
+      padding: const EdgeInsets.all(10),
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
+      onPressed: onPressed,
+      onLongPress: onLongPressed,
+      minWidth: minWidth,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Icon(iconData, size: 24),
+          const SizedBox(height: 8),
+          Text(
+            label,
+            style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400),
+            maxLines: 3,
+            textAlign: TextAlign.center,
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/dropdown_search_menu.dart

@@ -0,0 +1,137 @@
+import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class DropdownSearchMenu<T> extends HookWidget {
+  const DropdownSearchMenu({
+    super.key,
+    required this.dropdownMenuEntries,
+    this.initialSelection,
+    this.onSelected,
+    this.trailingIcon,
+    this.hintText,
+    this.label,
+    this.textStyle,
+    this.menuConstraints,
+  });
+
+  final List<DropdownMenuEntry<T>> dropdownMenuEntries;
+  final T? initialSelection;
+  final ValueChanged<T>? onSelected;
+  final Widget? trailingIcon;
+  final String? hintText;
+  final Widget? label;
+  final TextStyle? textStyle;
+  final BoxConstraints? menuConstraints;
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedItem = useState<DropdownMenuEntry<T>?>(
+      dropdownMenuEntries.firstWhereOrNull((item) => item.value == initialSelection),
+    );
+    final showTimeZoneDropdown = useState<bool>(false);
+
+    final effectiveConstraints =
+        menuConstraints ?? const BoxConstraints(minWidth: 280, maxWidth: 280, minHeight: 0, maxHeight: 280);
+
+    final inputDecoration = InputDecoration(
+      contentPadding: const EdgeInsets.fromLTRB(12, 4, 12, 4),
+      border: const OutlineInputBorder(),
+      suffixIcon: trailingIcon,
+      label: label,
+      hintText: hintText,
+    ).applyDefaults(context.themeData.inputDecorationTheme);
+
+    if (!showTimeZoneDropdown.value) {
+      return ConstrainedBox(
+        constraints: effectiveConstraints,
+        child: GestureDetector(
+          onTap: () => showTimeZoneDropdown.value = true,
+          child: InputDecorator(
+            decoration: inputDecoration,
+            child: selectedItem.value != null
+                ? Text(selectedItem.value!.label, maxLines: 1, overflow: TextOverflow.ellipsis, style: textStyle)
+                : null,
+          ),
+        ),
+      );
+    }
+
+    return ConstrainedBox(
+      constraints: effectiveConstraints,
+      child: Autocomplete<DropdownMenuEntry<T>>(
+        displayStringForOption: (option) => option.label,
+        optionsBuilder: (textEditingValue) {
+          return dropdownMenuEntries.where(
+            (item) => item.label.toLowerCase().trim().contains(textEditingValue.text.toLowerCase().trim()),
+          );
+        },
+        onSelected: (option) {
+          selectedItem.value = option;
+          showTimeZoneDropdown.value = false;
+          onSelected?.call(option.value);
+        },
+        fieldViewBuilder: (context, textEditingController, focusNode, _) {
+          return TextField(
+            autofocus: true,
+            focusNode: focusNode,
+            controller: textEditingController,
+            decoration: inputDecoration.copyWith(hintText: "search_timezone".tr()),
+            maxLines: 1,
+            style: context.textTheme.bodyMedium,
+            expands: false,
+            onTapOutside: (event) {
+              showTimeZoneDropdown.value = false;
+              focusNode.unfocus();
+            },
+            onSubmitted: (_) {
+              showTimeZoneDropdown.value = false;
+            },
+          );
+        },
+        optionsViewBuilder: (context, onSelected, options) {
+          // This widget is a copy of the default implementation.
+          // We have only changed the `constraints` parameter.
+          return Align(
+            alignment: Alignment.topLeft,
+            child: ConstrainedBox(
+              constraints: effectiveConstraints,
+              child: Material(
+                elevation: 4.0,
+                child: ListView.builder(
+                  padding: EdgeInsets.zero,
+                  shrinkWrap: true,
+                  itemCount: options.length,
+                  itemBuilder: (BuildContext context, int index) {
+                    final option = options.elementAt(index);
+                    return InkWell(
+                      onTap: () => onSelected(option),
+                      child: Builder(
+                        builder: (BuildContext context) {
+                          final bool highlight = AutocompleteHighlightedOption.of(context) == index;
+                          if (highlight) {
+                            SchedulerBinding.instance.addPostFrameCallback((Duration timeStamp) {
+                              Scrollable.ensureVisible(context, alignment: 0.5);
+                            }, debugLabel: 'AutocompleteOptions.ensureVisible');
+                          }
+                          return Container(
+                            color: highlight ? Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.12) : null,
+                            padding: const EdgeInsets.all(16.0),
+                            child: Text(option.label, style: textStyle),
+                          );
+                        },
+                      ),
+                    );
+                  },
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/fade_in_placeholder_image.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/widgets/common/transparent_image.dart';
+
+class FadeInPlaceholderImage extends StatelessWidget {
+  final Widget placeholder;
+  final ImageProvider image;
+  final Duration duration;
+  final BoxFit fit;
+
+  const FadeInPlaceholderImage({
+    super.key,
+    required this.placeholder,
+    required this.image,
+    this.duration = const Duration(milliseconds: 100),
+    this.fit = BoxFit.cover,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox.expand(
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          placeholder,
+          FadeInImage(fadeInDuration: duration, image: image, fit: fit, placeholder: MemoryImage(kTransparentImage)),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/feature_check.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/models/server_info/server_features.model.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+
+/// A utility widget that conditionally renders its child based on a server feature flag.
+///
+/// Example usage:
+/// ```dart
+/// FeatureCheck(
+///   feature: (features) => features.ocr,
+///   child: Text('OCR is enabled'),
+///   fallback: Text('OCR is not available'),
+/// )
+/// ```
+class FeatureCheck extends ConsumerWidget {
+  /// A function that extracts the specific feature flag from ServerFeatures
+  final bool Function(ServerFeatures) feature;
+
+  /// The widget to display when the feature is enabled
+  final Widget child;
+
+  /// Optional widget to display when the feature is disabled
+  final Widget? fallback;
+
+  const FeatureCheck({super.key, required this.feature, required this.child, this.fallback});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final serverFeatures = ref.watch(serverInfoProvider.select((s) => s.serverFeatures));
+    final isFeatureEnabled = feature(serverFeatures);
+    if (isFeatureEnabled) {
+      return child;
+    }
+
+    return fallback ?? const SizedBox.shrink();
+  }
+}

mobile/lib/widgets/common/immich_app_bar.dart

@@ -0,0 +1,176 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/models/backup/backup_state.model.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
+import 'package:immich_mobile/widgets/common/app_bar_dialog/app_bar_dialog.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+  final List<Widget>? actions;
+  final bool showUploadButton;
+
+  const ImmichAppBar({super.key, this.actions, this.showUploadButton = true});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final BackUpState backupState = ref.watch(backupProvider);
+    final bool isEnableAutoBackup = backupState.backgroundBackup || backupState.autoBackup;
+    final user = ref.watch(currentUserProvider);
+    final bool versionWarningPresent = ref.watch(versionWarningPresentProvider(user));
+    final isDarkTheme = context.isDarkTheme;
+    const widgetSize = 30.0;
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+
+    buildProfileIndicator() {
+      return InkWell(
+        onTap: () =>
+            showDialog(context: context, useRootNavigator: false, builder: (ctx) => const ImmichAppBarDialog()),
+        borderRadius: const BorderRadius.all(Radius.circular(12)),
+        child: Badge(
+          label: Container(
+            decoration: BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(widgetSize / 2)),
+            child: const Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: widgetSize / 2),
+          ),
+          backgroundColor: Colors.transparent,
+          alignment: Alignment.bottomRight,
+          isLabelVisible: versionWarningPresent,
+          offset: const Offset(-2, -12),
+          child: user == null
+              ? const Icon(Icons.face_outlined, size: widgetSize)
+              : Semantics(
+                  label: "logged_in_as".tr(namedArgs: {"user": user.name}),
+                  child: UserCircleAvatar(radius: 17, size: 31, user: user),
+                ),
+        ),
+      );
+    }
+
+    getBackupBadgeIcon() {
+      final iconColor = isDarkTheme ? Colors.white : Colors.black;
+
+      if (isEnableAutoBackup) {
+        if (backupState.backupProgress == BackUpProgressEnum.inProgress) {
+          return Container(
+            padding: const EdgeInsets.all(3.5),
+            child: CircularProgressIndicator(
+              strokeWidth: 2,
+              strokeCap: StrokeCap.round,
+              valueColor: AlwaysStoppedAnimation<Color>(iconColor),
+              semanticsLabel: 'backup_controller_page_backup'.tr(),
+            ),
+          );
+        } else if (backupState.backupProgress != BackUpProgressEnum.inBackground &&
+            backupState.backupProgress != BackUpProgressEnum.manualInProgress) {
+          return Icon(
+            Icons.check_outlined,
+            size: 9,
+            color: iconColor,
+            semanticLabel: 'backup_controller_page_backup'.tr(),
+          );
+        }
+      }
+
+      if (!isEnableAutoBackup) {
+        return Icon(
+          Icons.cloud_off_rounded,
+          size: 9,
+          color: iconColor,
+          semanticLabel: 'backup_controller_page_backup'.tr(),
+        );
+      }
+    }
+
+    buildBackupIndicator() {
+      final indicatorIcon = getBackupBadgeIcon();
+      final badgeBackground = context.colorScheme.surfaceContainer;
+
+      return InkWell(
+        onTap: () => context.pushRoute(const BackupControllerRoute()),
+        borderRadius: const BorderRadius.all(Radius.circular(12)),
+        child: Badge(
+          label: Container(
+            width: widgetSize / 2,
+            height: widgetSize / 2,
+            decoration: BoxDecoration(
+              color: badgeBackground,
+              border: Border.all(color: context.colorScheme.outline.withValues(alpha: .3)),
+              borderRadius: BorderRadius.circular(widgetSize / 2),
+            ),
+            child: indicatorIcon,
+          ),
+          backgroundColor: Colors.transparent,
+          alignment: Alignment.bottomRight,
+          isLabelVisible: indicatorIcon != null,
+          offset: const Offset(-2, -12),
+          child: Icon(Icons.backup_rounded, size: widgetSize, color: context.primaryColor),
+        ),
+      );
+    }
+
+    return AppBar(
+      backgroundColor: context.themeData.appBarTheme.backgroundColor,
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+      automaticallyImplyLeading: false,
+      centerTitle: false,
+      title: Builder(
+        builder: (BuildContext context) {
+          return Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(top: 3.0),
+                child: SvgPicture.asset(
+                  context.isDarkTheme ? 'assets/immich-logo-inline-dark.svg' : 'assets/immich-logo-inline-light.svg',
+                  height: 40,
+                ),
+              ),
+              const Tooltip(
+                triggerMode: TooltipTriggerMode.tap,
+                showDuration: Duration(seconds: 4),
+                message:
+                    "The old timeline is deprecated and will be removed in a future release. Kindly switch to the new timeline under Advanced Settings.",
+                child: Padding(
+                  padding: EdgeInsets.only(top: 3.0),
+                  child: Icon(Icons.error_rounded, fill: 1, color: Colors.amber, size: 20),
+                ),
+              ),
+            ],
+          );
+        },
+      ),
+      actions: [
+        if (actions != null)
+          ...actions!.map((action) => Padding(padding: const EdgeInsets.only(right: 16), child: action)),
+        if (kDebugMode || kProfileMode)
+          IconButton(
+            icon: const Icon(Icons.palette_rounded),
+            onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
+          ),
+        if (isCasting)
+          Padding(
+            padding: const EdgeInsets.only(right: 12),
+            child: IconButton(
+              onPressed: () {
+                showDialog(context: context, builder: (context) => const CastDialog());
+              },
+              icon: Icon(isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded),
+            ),
+          ),
+        if (showUploadButton) Padding(padding: const EdgeInsets.only(right: 20), child: buildBackupIndicator()),
+        Padding(padding: const EdgeInsets.only(right: 20), child: buildProfileIndicator()),
+      ],
+    );
+  }
+}

mobile/lib/widgets/common/immich_image.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/image/immich_local_image_provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
+import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
+import 'package:octo_image/octo_image.dart';
+
+class ImmichImage extends StatelessWidget {
+  const ImmichImage(
+    this.asset, {
+    this.width,
+    this.height,
+    this.fit = BoxFit.cover,
+    this.placeholder = const ThumbnailPlaceholder(),
+    super.key,
+  });
+
+  final Asset? asset;
+  final Widget? placeholder;
+  final double? width;
+  final double? height;
+  final BoxFit fit;
+
+  // Helper function to return the image provider for the asset
+  // either by using the asset ID or the asset itself
+  /// [asset] is the Asset to request, or else use [assetId] to get a remote
+  /// image provider
+  static ImageProvider imageProvider({Asset? asset, String? assetId, double width = 1080, double height = 1920}) {
+    if (asset == null && assetId == null) {
+      throw Exception('Must supply either asset or assetId');
+    }
+
+    if (asset == null) {
+      return ImmichRemoteImageProvider(assetId: assetId!);
+    }
+
+    if (useLocal(asset)) {
+      return ImmichLocalImageProvider(asset: asset, width: width, height: height);
+    } else {
+      return ImmichRemoteImageProvider(assetId: asset.remoteId!);
+    }
+  }
+
+  // Whether to use the local asset image provider or a remote one
+  static bool useLocal(Asset asset) =>
+      !asset.isRemote || asset.isLocal && !Store.get(StoreKey.preferRemoteImage, false);
+
+  @override
+  Widget build(BuildContext context) {
+    if (asset == null) {
+      return Container(
+        color: Colors.grey,
+        width: width,
+        height: height,
+        child: const Center(child: Icon(Icons.no_photography)),
+      );
+    }
+
+    final imageProviderInstance = ImmichImage.imageProvider(asset: asset, width: context.width, height: context.height);
+
+    return OctoImage(
+      fadeInDuration: const Duration(milliseconds: 0),
+      fadeOutDuration: const Duration(milliseconds: 100),
+      placeholderBuilder: (context) {
+        if (placeholder != null) {
+          return placeholder!;
+        }
+        return const SizedBox();
+      },
+      image: imageProviderInstance,
+      width: width,
+      height: height,
+      fit: fit,
+      errorBuilder: (context, error, stackTrace) {
+        imageProviderInstance.evict();
+
+        return Icon(Icons.image_not_supported_outlined, size: 32, color: Colors.red[200]);
+      },
+    );
+  }
+}

mobile/lib/widgets/common/immich_loading_indicator.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/widgets/common/immich_logo.dart';
+
+class ImmichLoadingIndicator extends HookWidget {
+  final double? borderRadius;
+
+  const ImmichLoadingIndicator({super.key, this.borderRadius});
+
+  @override
+  Widget build(BuildContext context) {
+    final logoAnimationController = useAnimationController(duration: const Duration(seconds: 6))
+      ..reverse()
+      ..repeat();
+
+    final borderAnimationController = useAnimationController(duration: const Duration(seconds: 6))..repeat();
+
+    return Container(
+      height: 80,
+      width: 80,
+      decoration: BoxDecoration(
+        color: Colors.transparent,
+        borderRadius: BorderRadius.circular(borderRadius ?? 50),
+        backgroundBlendMode: BlendMode.luminosity,
+      ),
+      child: AnimatedBuilder(
+        animation: borderAnimationController,
+        builder: (context, child) {
+          return CustomPaint(
+            painter: GradientBorderPainter(animation: borderAnimationController.value, strokeWidth: 3),
+            child: child,
+          );
+        },
+        child: Padding(
+          padding: const EdgeInsets.all(15),
+          child: RotationTransition(
+            turns: logoAnimationController,
+            child: const ImmichLogo(heroTag: 'logo'),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class GradientBorderPainter extends CustomPainter {
+  final double animation;
+  final double strokeWidth;
+  final double opacity = 0.7;
+  final colors = [
+    const Color(0xFFFA2921),
+    const Color(0xFFED79B5),
+    const Color(0xFFFFB400),
+    const Color(0xFF1E83F7),
+    const Color(0xFF18C249),
+  ];
+
+  GradientBorderPainter({required this.animation, required this.strokeWidth});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final center = Offset(size.width / 2, size.height / 2);
+    final radius = min(size.width, size.height) / 2 - strokeWidth / 2;
+
+    // Create a sweep gradient that covers the entire circle
+    final Rect rect = Rect.fromCircle(center: center, radius: radius);
+
+    // Create a paint with the gradient
+    final paint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth;
+
+    // Create a gradient that smoothly transitions between colors
+    final shader = SweepGradient(
+      // Use a fixed starting point and let matrix transformation handle rotation
+      startAngle: 0,
+      endAngle: 2 * 3.14159,
+      colors: [
+        // Repeat colors to ensure smooth transitions
+        ...colors.map((c) => c.withValues(alpha: opacity)),
+        colors.first.withValues(alpha: opacity),
+      ],
+      // Add evenly distributed stops
+      stops: List.generate(colors.length + 1, (index) => index / colors.length),
+      tileMode: TileMode.clamp,
+      // Use transformations to rotate the gradient
+      transform: GradientRotation(-animation * 2 * 3.14159),
+    ).createShader(rect);
+
+    paint.shader = shader;
+
+    // Draw the circular border
+    canvas.drawCircle(center, radius, paint);
+  }
+
+  @override
+  bool shouldRepaint(GradientBorderPainter oldDelegate) {
+    return animation != oldDelegate.animation;
+  }
+
+  double min(double a, double b) => a < b ? a : b;
+}

mobile/lib/widgets/common/immich_logo.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+class ImmichLogo extends StatelessWidget {
+  final double size;
+  final dynamic heroTag;
+
+  const ImmichLogo({super.key, this.size = 100, this.heroTag});
+
+  @override
+  Widget build(BuildContext context) {
+    return Image(
+      image: const AssetImage('assets/immich-logo.png'),
+      width: size,
+      filterQuality: FilterQuality.high,
+      isAntiAlias: true,
+    );
+  }
+}

mobile/lib/widgets/common/immich_sliver_app_bar.dart

@@ -0,0 +1,360 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/models/server_info/server_info.model.dart';
+import 'package:immich_mobile/providers/backup/drift_backup.provider.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/providers/sync_status.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
+import 'package:immich_mobile/widgets/common/app_bar_dialog/app_bar_dialog.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class ImmichSliverAppBar extends ConsumerWidget {
+  final List<Widget>? actions;
+  final bool showUploadButton;
+  final bool floating;
+  final bool pinned;
+  final bool snap;
+  final Widget? title;
+  final double? expandedHeight;
+
+  const ImmichSliverAppBar({
+    super.key,
+    this.actions,
+    this.showUploadButton = true,
+    this.floating = true,
+    this.pinned = false,
+    this.snap = true,
+    this.title,
+    this.expandedHeight,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+    final isMultiSelectEnabled = ref.watch(multiSelectProvider.select((s) => s.isEnabled));
+
+    return SliverAnimatedOpacity(
+      duration: Durations.medium1,
+      opacity: isMultiSelectEnabled ? 0 : 1,
+      sliver: SliverAppBar(
+        backgroundColor: context.colorScheme.surface,
+        surfaceTintColor: context.colorScheme.surfaceTint,
+        elevation: 0,
+        scrolledUnderElevation: 1.0,
+        floating: floating,
+        pinned: pinned,
+        snap: snap,
+        expandedHeight: expandedHeight,
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+        automaticallyImplyLeading: false,
+        centerTitle: false,
+        title: title ?? const _ImmichLogoWithText(),
+        actions: [
+          if (isCasting && !isReadonlyModeEnabled)
+            Padding(
+              padding: const EdgeInsets.only(right: 12),
+              child: IconButton(
+                onPressed: () {
+                  showDialog(context: context, builder: (context) => const CastDialog());
+                },
+                icon: Icon(isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded),
+              ),
+            ),
+          const _SyncStatusIndicator(),
+          if (actions != null)
+            ...actions!.map((action) => Padding(padding: const EdgeInsets.only(right: 16), child: action)),
+          if ((kDebugMode || kProfileMode) && !isReadonlyModeEnabled)
+            IconButton(
+              icon: const Icon(Icons.palette_rounded),
+              onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
+            ),
+          if (showUploadButton && !isReadonlyModeEnabled)
+            const Padding(padding: EdgeInsets.only(right: 20), child: _BackupIndicator()),
+          const Padding(padding: EdgeInsets.only(right: 20), child: _ProfileIndicator()),
+        ],
+      ),
+    );
+  }
+}
+
+class _ImmichLogoWithText extends StatelessWidget {
+  const _ImmichLogoWithText();
+
+  @override
+  Widget build(BuildContext context) {
+    return Builder(
+      builder: (BuildContext context) {
+        return Row(
+          children: [
+            Builder(
+              builder: (context) {
+                return Padding(
+                  padding: const EdgeInsets.only(top: 3.0),
+                  child: SvgPicture.asset(
+                    context.isDarkTheme ? 'assets/immich-logo-inline-dark.svg' : 'assets/immich-logo-inline-light.svg',
+                    height: 40,
+                  ),
+                );
+              },
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+class _ProfileIndicator extends ConsumerWidget {
+  const _ProfileIndicator();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final user = ref.watch(currentUserProvider);
+    final bool versionWarningPresent = ref.watch(versionWarningPresentProvider(user));
+    final serverInfoState = ref.watch(serverInfoProvider);
+
+    const widgetSize = 30.0;
+
+    void toggleReadonlyMode() {
+      final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+      ref.read(readonlyModeProvider.notifier).toggleReadonlyMode();
+
+      context.scaffoldMessenger.showSnackBar(
+        SnackBar(
+          duration: const Duration(seconds: 2),
+          content: Text(
+            (isReadonlyModeEnabled ? "readonly_mode_disabled" : "readonly_mode_enabled").tr(),
+            style: context.textTheme.bodyLarge?.copyWith(color: context.primaryColor),
+          ),
+        ),
+      );
+    }
+
+    return InkWell(
+      onTap: () => showDialog(context: context, useRootNavigator: false, builder: (ctx) => const ImmichAppBarDialog()),
+      onLongPress: () => toggleReadonlyMode(),
+      borderRadius: const BorderRadius.all(Radius.circular(12)),
+      child: Badge(
+        label: Container(
+          decoration: BoxDecoration(
+            color: context.isDarkTheme ? Colors.black : Colors.white,
+            borderRadius: BorderRadius.circular(widgetSize / 2),
+          ),
+          child: Icon(
+            Icons.info,
+            color: serverInfoState.versionStatus == VersionStatus.error
+                ? context.colorScheme.error
+                : context.primaryColor,
+            size: widgetSize / 2,
+          ),
+        ),
+        backgroundColor: Colors.transparent,
+        alignment: Alignment.bottomRight,
+        isLabelVisible: versionWarningPresent,
+        offset: const Offset(-2, -12),
+        child: user == null
+            ? const Icon(Icons.face_outlined, size: widgetSize)
+            : Semantics(
+                label: "logged_in_as".tr(namedArgs: {"user": user.name}),
+                child: AbsorbPointer(child: UserCircleAvatar(radius: 17, size: 31, user: user)),
+              ),
+      ),
+    );
+  }
+}
+
+const double _kBadgeWidgetSize = 30.0;
+
+class _BackupIndicator extends ConsumerWidget {
+  const _BackupIndicator();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final indicatorIcon = _getBackupBadgeIcon(context, ref);
+
+    return InkWell(
+      onTap: () => context.pushRoute(const DriftBackupRoute()),
+      borderRadius: const BorderRadius.all(Radius.circular(12)),
+      child: Badge(
+        label: indicatorIcon,
+        backgroundColor: Colors.transparent,
+        alignment: Alignment.bottomRight,
+        isLabelVisible: indicatorIcon != null,
+        offset: const Offset(-2, -12),
+        child: Icon(Icons.backup_rounded, size: _kBadgeWidgetSize, color: context.primaryColor),
+      ),
+    );
+  }
+
+  Widget? _getBackupBadgeIcon(BuildContext context, WidgetRef ref) {
+    final backupStateStream = ref.watch(settingsProvider).watch(Setting.enableBackup);
+    final hasError = ref.watch(driftBackupProvider.select((state) => state.error != BackupError.none));
+    final isDarkTheme = context.isDarkTheme;
+    final iconColor = isDarkTheme ? Colors.white : Colors.black;
+    final isUploading = ref.watch(driftBackupProvider.select((state) => state.uploadItems.isNotEmpty));
+
+    return StreamBuilder(
+      stream: backupStateStream,
+      initialData: false,
+      builder: (ctx, snapshot) {
+        final backupEnabled = snapshot.data ?? false;
+
+        if (!backupEnabled) {
+          return _BadgeLabel(
+            Icon(
+              Icons.cloud_off_rounded,
+              size: 9,
+              color: iconColor,
+              semanticLabel: 'backup_controller_page_backup'.tr(),
+            ),
+          );
+        }
+
+        if (hasError) {
+          return _BadgeLabel(
+            Icon(
+              Icons.warning_rounded,
+              size: 12,
+              color: context.colorScheme.error,
+              semanticLabel: 'backup_controller_page_backup'.tr(),
+            ),
+            backgroundColor: context.colorScheme.errorContainer,
+          );
+        }
+
+        if (isUploading) {
+          return _BadgeLabel(
+            Container(
+              padding: const EdgeInsets.all(3.5),
+              child: Theme(
+                data: context.themeData.copyWith(
+                  progressIndicatorTheme: context.themeData.progressIndicatorTheme.copyWith(year2023: true),
+                ),
+                child: CircularProgressIndicator(
+                  strokeWidth: 2,
+                  strokeCap: StrokeCap.round,
+                  valueColor: AlwaysStoppedAnimation<Color>(iconColor),
+                  semanticsLabel: 'backup_controller_page_backup'.tr(),
+                ),
+              ),
+            ),
+          );
+        }
+
+        return _BadgeLabel(
+          Icon(Icons.check_outlined, size: 9, color: iconColor, semanticLabel: 'backup_controller_page_backup'.tr()),
+        );
+      },
+    );
+  }
+}
+
+class _BadgeLabel extends StatelessWidget {
+  final Widget indicator;
+  final Color? backgroundColor;
+
+  const _BadgeLabel(this.indicator, {this.backgroundColor});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: _kBadgeWidgetSize / 2,
+      height: _kBadgeWidgetSize / 2,
+      decoration: BoxDecoration(
+        color: backgroundColor ?? context.colorScheme.surfaceContainer,
+        border: Border.all(color: context.colorScheme.outline.withValues(alpha: .3)),
+        borderRadius: BorderRadius.circular(_kBadgeWidgetSize / 2),
+      ),
+      child: indicator,
+    );
+  }
+}
+
+class _SyncStatusIndicator extends ConsumerStatefulWidget {
+  const _SyncStatusIndicator();
+
+  @override
+  ConsumerState<_SyncStatusIndicator> createState() => _SyncStatusIndicatorState();
+}
+
+class _SyncStatusIndicatorState extends ConsumerState<_SyncStatusIndicator> with TickerProviderStateMixin {
+  late AnimationController _rotationController;
+  late AnimationController _dismissalController;
+  late Animation<double> _rotationAnimation;
+  late Animation<double> _dismissalAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _rotationController = AnimationController(duration: const Duration(seconds: 2), vsync: this);
+    _dismissalController = AnimationController(duration: const Duration(milliseconds: 300), vsync: this);
+    _rotationAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(_rotationController);
+    _dismissalAnimation = Tween<double>(
+      begin: 1.0,
+      end: 0.0,
+    ).animate(CurvedAnimation(parent: _dismissalController, curve: Curves.easeOutQuart));
+  }
+
+  @override
+  void dispose() {
+    _rotationController.dispose();
+    _dismissalController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final syncStatus = ref.watch(syncStatusProvider);
+    final isSyncing = syncStatus.isRemoteSyncing || syncStatus.isLocalSyncing;
+
+    // Control animations based on sync status
+    if (isSyncing) {
+      if (!_rotationController.isAnimating) {
+        _rotationController.repeat();
+      }
+      _dismissalController.reset();
+    } else {
+      _rotationController.stop();
+      if (_dismissalController.status == AnimationStatus.dismissed) {
+        _dismissalController.forward();
+      }
+    }
+
+    // Don't show anything if not syncing and dismissal animation is complete
+    if (!isSyncing && _dismissalController.status == AnimationStatus.completed) {
+      return const SizedBox.shrink();
+    }
+
+    return AnimatedBuilder(
+      animation: Listenable.merge([_rotationAnimation, _dismissalAnimation]),
+      builder: (context, child) {
+        return Padding(
+          padding: EdgeInsets.only(right: isSyncing ? 16 : 0),
+          child: Transform.scale(
+            scale: isSyncing ? 1.0 : _dismissalAnimation.value,
+            child: Opacity(
+              opacity: isSyncing ? 1.0 : _dismissalAnimation.value,
+              child: Transform.rotate(
+                angle: _rotationAnimation.value * 2 * 3.14159 * -1, // Rotate counter-clockwise
+                child: Icon(Icons.sync, size: 24, color: context.primaryColor),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/widgets/common/immich_thumbnail.dart

@@ -0,0 +1,85 @@
+import 'dart:typed_data';
+
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
+import 'package:immich_mobile/utils/thumbnail_utils.dart';
+import 'package:immich_mobile/widgets/common/immich_image.dart';
+import 'package:immich_mobile/widgets/common/thumbhash_placeholder.dart';
+import 'package:octo_image/octo_image.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+
+class ImmichThumbnail extends HookConsumerWidget {
+  const ImmichThumbnail({this.asset, this.width = 250, this.height = 250, this.fit = BoxFit.cover, super.key});
+
+  final Asset? asset;
+  final double width;
+  final double height;
+  final BoxFit fit;
+
+  /// Helper function to return the image provider for the asset thumbnail
+  /// either by using the asset ID or the asset itself
+  /// [asset] is the Asset to request, or else use [assetId] to get a remote
+  /// image provider
+  static ImageProvider imageProvider({Asset? asset, String? assetId, String? userId, int thumbnailSize = 256}) {
+    if (asset == null && assetId == null) {
+      throw Exception('Must supply either asset or assetId');
+    }
+
+    if (asset == null) {
+      return ImmichRemoteThumbnailProvider(assetId: assetId!);
+    }
+
+    if (ImmichImage.useLocal(asset)) {
+      return ImmichLocalThumbnailProvider(asset: asset, height: thumbnailSize, width: thumbnailSize, userId: userId);
+    } else {
+      return ImmichRemoteThumbnailProvider(assetId: asset.remoteId!, height: thumbnailSize, width: thumbnailSize);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    Uint8List? blurhash = useBlurHashRef(asset).value;
+    final userId = ref.watch(currentUserProvider)?.id;
+
+    if (asset == null) {
+      return Container(
+        color: Colors.grey,
+        width: width,
+        height: height,
+        child: const Center(child: Icon(Icons.no_photography)),
+      );
+    }
+
+    final assetAltText = getAltText(asset!.exifInfo, asset!.fileCreatedAt, asset!.type, []);
+
+    final thumbnailProviderInstance = ImmichThumbnail.imageProvider(asset: asset, userId: userId);
+
+    customErrorBuilder(BuildContext ctx, Object error, StackTrace? stackTrace) {
+      thumbnailProviderInstance.evict();
+
+      final originalErrorWidgetBuilder = blurHashErrorBuilder(blurhash, fit: fit);
+      return originalErrorWidgetBuilder(ctx, error, stackTrace);
+    }
+
+    return Semantics(
+      label: assetAltText,
+      child: OctoImage.fromSet(
+        placeholderFadeInDuration: Duration.zero,
+        fadeInDuration: Duration.zero,
+        fadeOutDuration: const Duration(milliseconds: 100),
+        octoSet: OctoSet(
+          placeholderBuilder: blurHashPlaceholderBuilder(blurhash, fit: fit),
+          errorBuilder: customErrorBuilder,
+        ),
+        image: thumbnailProviderInstance,
+        width: width,
+        height: height,
+        fit: fit,
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/immich_title_text.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class ImmichTitleText extends StatelessWidget {
+  final double fontSize;
+  final Color? color;
+
+  const ImmichTitleText({super.key, this.fontSize = 48, this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Image(
+      image: AssetImage(context.isDarkTheme ? 'assets/immich-text-dark.png' : 'assets/immich-text-light.png'),
+      width: fontSize * 4,
+      filterQuality: FilterQuality.high,
+      color: context.primaryColor,
+    );
+  }
+}

mobile/lib/widgets/common/immich_toast.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+enum ToastType { info, success, error }
+
+class ImmichToast {
+  static show({
+    required BuildContext context,
+    required String msg,
+    ToastType toastType = ToastType.info,
+    ToastGravity gravity = ToastGravity.BOTTOM,
+    int durationInSecond = 3,
+  }) {
+    final fToast = FToast();
+    fToast.init(context);
+
+    Color getColor(ToastType type, BuildContext context) => switch (type) {
+      ToastType.info => context.primaryColor,
+      ToastType.success => const Color.fromARGB(255, 78, 140, 124),
+      ToastType.error => const Color.fromARGB(255, 220, 48, 85),
+    };
+
+    Icon getIcon(ToastType type) => switch (type) {
+      ToastType.info => Icon(Icons.info_outline_rounded, color: context.primaryColor),
+      ToastType.success => const Icon(Icons.check_circle_rounded, color: Color.fromARGB(255, 78, 140, 124)),
+      ToastType.error => const Icon(Icons.error_outline_rounded, color: Color.fromARGB(255, 240, 162, 156)),
+    };
+
+    fToast.showToast(
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
+        decoration: BoxDecoration(
+          borderRadius: const BorderRadius.all(Radius.circular(16.0)),
+          color: context.colorScheme.surfaceContainer,
+          border: Border.all(color: context.colorScheme.outline.withValues(alpha: .5), width: 1),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            getIcon(toastType),
+            const SizedBox(width: 12.0),
+            Flexible(
+              child: Text(
+                msg,
+                style: TextStyle(color: getColor(toastType, context), fontWeight: FontWeight.w600, fontSize: 14),
+              ),
+            ),
+          ],
+        ),
+      ),
+      positionedToastBuilder: (context, child, gravity) {
+        return Positioned(
+          top: gravity == ToastGravity.TOP ? 150 : null,
+          bottom: gravity == ToastGravity.BOTTOM ? 150 : null,
+          left: MediaQuery.of(context).size.width / 2 - 150,
+          right: MediaQuery.of(context).size.width / 2 - 150,
+          child: child,
+        );
+      },
+      gravity: gravity,
+      toastDuration: Duration(seconds: durationInSecond),
+    );
+  }
+}

mobile/lib/widgets/common/local_album_sliver_app_bar.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+
+class LocalAlbumsSliverAppBar extends StatelessWidget {
+  const LocalAlbumsSliverAppBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverAppBar(
+      floating: true,
+      pinned: true,
+      snap: false,
+      backgroundColor: context.colorScheme.surfaceContainer,
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+      automaticallyImplyLeading: true,
+      centerTitle: true,
+      title: Text("on_this_device".t(context: context)),
+    );
+  }
+}

mobile/lib/widgets/common/location_picker.dart

@@ -0,0 +1,180 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/string_extensions.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+Future<LatLng?> showLocationPicker({required BuildContext context, LatLng? initialLatLng}) {
+  return showDialog<LatLng?>(
+    context: context,
+    useRootNavigator: false,
+    builder: (ctx) => _LocationPicker(initialLatLng: initialLatLng),
+  );
+}
+
+class _LocationPicker extends HookWidget {
+  final LatLng? initialLatLng;
+
+  const _LocationPicker({this.initialLatLng});
+
+  bool _validateLat(String value) {
+    final l = double.tryParse(value);
+    return l != null && l > -90 && l < 90;
+  }
+
+  bool _validateLong(String value) {
+    final l = double.tryParse(value);
+    return l != null && l > -180 && l < 180;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final latitude = useState(initialLatLng?.latitude ?? 0.0);
+    final longitude = useState(initialLatLng?.longitude ?? 0.0);
+    final latlng = LatLng(latitude.value, longitude.value);
+    final latitiudeFocusNode = useFocusNode();
+    final longitudeFocusNode = useFocusNode();
+    final latitudeController = useTextEditingController(text: latitude.value.toStringAsFixed(4));
+    final longitudeController = useTextEditingController(text: longitude.value.toStringAsFixed(4));
+
+    useEffect(() {
+      latitudeController.text = latitude.value.toStringAsFixed(4);
+      longitudeController.text = longitude.value.toStringAsFixed(4);
+      return null;
+    }, [latitude.value, longitude.value]);
+
+    Future<void> onMapTap() async {
+      final newLatLng = await context.pushRoute<LatLng?>(MapLocationPickerRoute(initialLatLng: latlng));
+      if (newLatLng != null) {
+        latitude.value = newLatLng.latitude;
+        longitude.value = newLatLng.longitude;
+      }
+    }
+
+    void onLatitudeUpdated(double value) {
+      latitude.value = value;
+      longitudeFocusNode.requestFocus();
+    }
+
+    void onLongitudeEditingCompleted(double value) {
+      longitude.value = value;
+      longitudeFocusNode.unfocus();
+    }
+
+    return AlertDialog(
+      contentPadding: const EdgeInsets.all(30),
+      alignment: Alignment.center,
+      content: SingleChildScrollView(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text("edit_location_dialog_title", style: context.textTheme.titleMedium).tr(),
+            Align(
+              alignment: Alignment.center,
+              child: TextButton.icon(
+                icon: const Text("location_picker_choose_on_map").tr(),
+                label: const Icon(Icons.map_outlined, size: 16),
+                onPressed: onMapTap,
+              ),
+            ),
+            const SizedBox(height: 12),
+            _ManualPickerInput(
+              controller: latitudeController,
+              decorationText: "latitude",
+              hintText: "location_picker_latitude_hint",
+              errorText: "location_picker_latitude_error",
+              focusNode: latitiudeFocusNode,
+              validator: _validateLat,
+              onUpdated: onLatitudeUpdated,
+            ),
+            const SizedBox(height: 24),
+            _ManualPickerInput(
+              controller: longitudeController,
+              decorationText: "longitude",
+              hintText: "location_picker_longitude_hint",
+              errorText: "location_picker_longitude_error",
+              focusNode: longitudeFocusNode,
+              validator: _validateLong,
+              onUpdated: onLongitudeEditingCompleted,
+            ),
+          ],
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => context.pop(),
+          child: Text(
+            "cancel",
+            style: context.textTheme.bodyMedium?.copyWith(
+              fontWeight: FontWeight.w600,
+              color: context.colorScheme.error,
+            ),
+          ).tr(),
+        ),
+        TextButton(
+          onPressed: () => context.maybePop(latlng),
+          child: Text(
+            "action_common_update",
+            style: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600, color: context.primaryColor),
+          ).tr(),
+        ),
+      ],
+    );
+  }
+}
+
+class _ManualPickerInput extends HookWidget {
+  final TextEditingController controller;
+  final String decorationText;
+  final String hintText;
+  final String errorText;
+  final FocusNode focusNode;
+  final bool Function(String value) validator;
+  final Function(double value) onUpdated;
+
+  const _ManualPickerInput({
+    required this.controller,
+    required this.decorationText,
+    required this.hintText,
+    required this.errorText,
+    required this.focusNode,
+    required this.validator,
+    required this.onUpdated,
+  });
+  @override
+  Widget build(BuildContext context) {
+    final isValid = useState(true);
+
+    void onEditingComplete() {
+      isValid.value = validator(controller.text);
+      if (isValid.value) {
+        onUpdated(controller.text.toDouble());
+      }
+    }
+
+    return TextField(
+      controller: controller,
+      focusNode: focusNode,
+      textInputAction: TextInputAction.done,
+      autofocus: false,
+      decoration: InputDecoration(
+        labelText: decorationText.tr(),
+        labelStyle: TextStyle(fontWeight: FontWeight.bold, color: context.primaryColor),
+        floatingLabelBehavior: FloatingLabelBehavior.auto,
+        border: const OutlineInputBorder(),
+        hintText: hintText.tr(),
+        hintStyle: const TextStyle(fontWeight: FontWeight.normal, fontSize: 14),
+        errorText: isValid.value ? null : errorText.tr(),
+      ),
+      onEditingComplete: onEditingComplete,
+      keyboardType: const TextInputType.numberWithOptions(decimal: true, signed: true),
+      inputFormatters: [LengthLimitingTextInputFormatter(8)],
+      onTapOutside: (_) => focusNode.unfocus(),
+    );
+  }
+}

mobile/lib/widgets/common/mesmerizing_sliver_app_bar.dart

@@ -0,0 +1,464 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+
+class MesmerizingSliverAppBar extends ConsumerStatefulWidget {
+  const MesmerizingSliverAppBar({super.key, required this.title, this.icon = Icons.camera});
+
+  final String title;
+  final IconData icon;
+  @override
+  ConsumerState<MesmerizingSliverAppBar> createState() => _MesmerizingSliverAppBarState();
+}
+
+class _MesmerizingSliverAppBarState extends ConsumerState<MesmerizingSliverAppBar> {
+  double _scrollProgress = 0.0;
+
+  double _calculateScrollProgress(FlexibleSpaceBarSettings? settings) {
+    if (settings?.maxExtent == null || settings?.minExtent == null) {
+      return 1.0;
+    }
+
+    final deltaExtent = settings!.maxExtent - settings.minExtent;
+    if (deltaExtent <= 0.0) {
+      return 1.0;
+    }
+
+    return (1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent).clamp(0.0, 1.0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isMultiSelectEnabled = ref.watch(multiSelectProvider.select((s) => s.isEnabled));
+
+    return isMultiSelectEnabled
+        ? SliverToBoxAdapter(
+            child: switch (_scrollProgress) {
+              < 0.8 => const SizedBox(height: 120),
+              _ => const SizedBox(height: 352),
+            },
+          )
+        : SliverAppBar(
+            expandedHeight: 300.0,
+            floating: false,
+            pinned: true,
+            snap: false,
+            elevation: 0,
+            leading: IconButton(
+              icon: Icon(
+                Platform.isIOS ? Icons.arrow_back_ios_new_rounded : Icons.arrow_back,
+                color: Color.lerp(Colors.white, context.primaryColor, _scrollProgress),
+                shadows: [
+                  _scrollProgress < 0.95
+                      ? Shadow(offset: const Offset(0, 2), blurRadius: 5, color: Colors.black.withValues(alpha: 0.5))
+                      : const Shadow(offset: Offset(0, 2), blurRadius: 0, color: Colors.transparent),
+                ],
+              ),
+              onPressed: () {
+                context.pop();
+              },
+            ),
+            flexibleSpace: Builder(
+              builder: (context) {
+                final settings = context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
+                final scrollProgress = _calculateScrollProgress(settings);
+
+                // Update scroll progress for the leading button
+                WidgetsBinding.instance.addPostFrameCallback((_) {
+                  if (mounted && _scrollProgress != scrollProgress) {
+                    setState(() {
+                      _scrollProgress = scrollProgress;
+                    });
+                  }
+                });
+
+                return FlexibleSpaceBar(
+                  centerTitle: true,
+                  title: AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 200),
+                    child: scrollProgress > 0.95
+                        ? Text(
+                            widget.title,
+                            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.w600, fontSize: 18),
+                          )
+                        : null,
+                  ),
+                  background: _ExpandedBackground(
+                    scrollProgress: scrollProgress,
+                    title: widget.title,
+                    icon: widget.icon,
+                  ),
+                );
+              },
+            ),
+          );
+  }
+}
+
+class _ExpandedBackground extends ConsumerStatefulWidget {
+  final double scrollProgress;
+  final String title;
+  final IconData icon;
+
+  const _ExpandedBackground({required this.scrollProgress, required this.title, required this.icon});
+
+  @override
+  ConsumerState<_ExpandedBackground> createState() => _ExpandedBackgroundState();
+}
+
+class _ExpandedBackgroundState extends ConsumerState<_ExpandedBackground> with SingleTickerProviderStateMixin {
+  late AnimationController _slideController;
+  late Animation<Offset> _slideAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _slideController = AnimationController(duration: const Duration(milliseconds: 800), vsync: this);
+
+    _slideAnimation = Tween<Offset>(
+      begin: const Offset(0, 1.5),
+      end: Offset.zero,
+    ).animate(CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic));
+
+    Future.delayed(const Duration(milliseconds: 100), () {
+      if (mounted) {
+        _slideController.forward();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _slideController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final timelineService = ref.watch(timelineServiceProvider);
+
+    return Stack(
+      fit: StackFit.expand,
+      children: [
+        Transform.translate(
+          offset: Offset(0, widget.scrollProgress * 50),
+          child: Transform.scale(
+            scale: 1.4 - (widget.scrollProgress * 0.2),
+            child: _RandomAssetBackground(timelineService: timelineService, icon: widget.icon),
+          ),
+        ),
+        Container(
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: [
+                Colors.transparent,
+                Colors.transparent,
+                Colors.black.withValues(alpha: 0.6 + (widget.scrollProgress * 0.2)),
+              ],
+              stops: const [0.0, 0.65, 1.0],
+            ),
+          ),
+        ),
+        Positioned(
+          bottom: 16,
+          left: 16,
+          right: 16,
+          child: SlideTransition(
+            position: _slideAnimation,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                SizedBox(
+                  width: double.infinity,
+                  child: SingleChildScrollView(
+                    scrollDirection: Axis.horizontal,
+                    child: Text(
+                      widget.title,
+                      maxLines: 1,
+                      style: const TextStyle(
+                        color: Colors.white,
+                        fontSize: 36,
+                        fontWeight: FontWeight.bold,
+                        letterSpacing: 0.5,
+                        shadows: [Shadow(offset: Offset(0, 2), blurRadius: 12, color: Colors.black45)],
+                      ),
+                    ),
+                  ),
+                ),
+                AnimatedContainer(duration: const Duration(milliseconds: 300), child: const _ItemCountText()),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ItemCountText extends ConsumerStatefulWidget {
+  const _ItemCountText();
+
+  @override
+  ConsumerState<_ItemCountText> createState() => _ItemCountTextState();
+}
+
+class _ItemCountTextState extends ConsumerState<_ItemCountText> {
+  StreamSubscription? _reloadSubscription;
+
+  @override
+  void initState() {
+    super.initState();
+    _reloadSubscription = EventStream.shared.listen<TimelineReloadEvent>((_) => setState(() {}));
+  }
+
+  @override
+  void dispose() {
+    _reloadSubscription?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final assetCount = ref.watch(timelineServiceProvider.select((s) => s.totalAssets));
+
+    return Text(
+      'items_count'.t(context: context, args: {"count": assetCount}),
+      style: context.textTheme.labelLarge?.copyWith(
+        // letterSpacing: 0.2,
+        fontWeight: FontWeight.bold,
+        color: Colors.white,
+        shadows: [const Shadow(offset: Offset(0, 1), blurRadius: 6, color: Colors.black45)],
+      ),
+    );
+  }
+}
+
+class _RandomAssetBackground extends StatefulWidget {
+  final TimelineService timelineService;
+  final IconData icon;
+
+  const _RandomAssetBackground({required this.timelineService, required this.icon});
+
+  @override
+  State<_RandomAssetBackground> createState() => _RandomAssetBackgroundState();
+}
+
+class _RandomAssetBackgroundState extends State<_RandomAssetBackground> with TickerProviderStateMixin {
+  late AnimationController _zoomController;
+  late AnimationController _crossFadeController;
+  late Animation<double> _zoomAnimation;
+  late Animation<Offset> _panAnimation;
+  late Animation<double> _crossFadeAnimation;
+  BaseAsset? _currentAsset;
+  BaseAsset? _nextAsset;
+  bool _isZoomingIn = true;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _zoomController = AnimationController(
+      duration: const Duration(seconds: 12),
+      vsync: this,
+      animationBehavior: AnimationBehavior.preserve,
+    );
+
+    _crossFadeController = AnimationController(
+      duration: const Duration(milliseconds: 1200),
+      vsync: this,
+      animationBehavior: AnimationBehavior.preserve,
+    );
+
+    _zoomAnimation = Tween<double>(
+      begin: 1.0,
+      end: 1.2,
+    ).animate(CurvedAnimation(parent: _zoomController, curve: Curves.easeInOut));
+
+    _panAnimation = Tween<Offset>(
+      begin: Offset.zero,
+      end: const Offset(0.5, -0.5),
+    ).animate(CurvedAnimation(parent: _zoomController, curve: Curves.easeInOut));
+
+    _crossFadeAnimation = Tween<double>(
+      begin: 0.0,
+      end: 1.0,
+    ).animate(CurvedAnimation(parent: _crossFadeController, curve: Curves.easeInOutCubic));
+
+    Future.delayed(Durations.medium1, () => _loadFirstAsset());
+  }
+
+  @override
+  void dispose() {
+    _zoomController.dispose();
+    _crossFadeController.dispose();
+    super.dispose();
+  }
+
+  void _startAnimationCycle() {
+    if (_isZoomingIn) {
+      _zoomController.forward().then((_) {
+        _loadNextAsset();
+      });
+    } else {
+      _zoomController.reverse().then((_) {
+        _loadNextAsset();
+      });
+    }
+  }
+
+  Future<void> _loadFirstAsset() async {
+    if (!mounted) {
+      return;
+    }
+
+    if (widget.timelineService.totalAssets == 0) {
+      setState(() {
+        _currentAsset = null;
+      });
+
+      return;
+    }
+
+    setState(() {
+      _currentAsset = widget.timelineService.getRandomAsset();
+    });
+
+    await _crossFadeController.forward();
+
+    if (_zoomController.status == AnimationStatus.dismissed) {
+      if (_isZoomingIn) {
+        _zoomController.reset();
+      } else {
+        _zoomController.value = 1.0;
+      }
+      _startAnimationCycle();
+    }
+  }
+
+  Future<void> _loadNextAsset() async {
+    if (!mounted) {
+      return;
+    }
+
+    try {
+      if (widget.timelineService.totalAssets > 1) {
+        // Load next asset while keeping current one visible
+        final nextAsset = widget.timelineService.getRandomAsset();
+
+        setState(() {
+          _nextAsset = nextAsset;
+        });
+
+        await _crossFadeController.reverse();
+        setState(() {
+          _currentAsset = _nextAsset;
+          _nextAsset = null;
+        });
+
+        _crossFadeController.value = 1.0;
+
+        _isZoomingIn = !_isZoomingIn;
+
+        _startAnimationCycle();
+      }
+    } catch (e) {
+      _zoomController.reset();
+      _startAnimationCycle();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.timelineService.totalAssets == 0) {
+      return const SizedBox.shrink();
+    }
+
+    return AnimatedBuilder(
+      animation: Listenable.merge([_zoomAnimation, _panAnimation, _crossFadeAnimation]),
+      builder: (context, child) {
+        return Transform.scale(
+          scale: _zoomAnimation.value,
+          filterQuality: Platform.isAndroid ? FilterQuality.low : null,
+          child: Transform.translate(
+            offset: _panAnimation.value,
+            filterQuality: Platform.isAndroid ? FilterQuality.low : null,
+            child: Stack(
+              fit: StackFit.expand,
+              children: [
+                // Current image
+                if (_currentAsset != null)
+                  Opacity(
+                    opacity: _crossFadeAnimation.value,
+                    child: SizedBox(
+                      width: double.infinity,
+                      height: double.infinity,
+                      child: Image(
+                        alignment: Alignment.topRight,
+                        image: getFullImageProvider(_currentAsset!),
+                        fit: BoxFit.cover,
+                        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+                          if (wasSynchronouslyLoaded || frame != null) {
+                            return child;
+                          }
+                          return Container();
+                        },
+                        errorBuilder: (context, error, stackTrace) {
+                          return SizedBox(
+                            width: double.infinity,
+                            height: double.infinity,
+                            child: Icon(Icons.error_outline_rounded, size: 24, color: Colors.red[300]),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+
+                if (_nextAsset != null)
+                  Opacity(
+                    opacity: 1.0 - _crossFadeAnimation.value,
+                    child: SizedBox(
+                      width: double.infinity,
+                      height: double.infinity,
+                      child: Image(
+                        alignment: Alignment.topRight,
+                        image: getFullImageProvider(_nextAsset!),
+                        fit: BoxFit.cover,
+                        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+                          if (wasSynchronouslyLoaded || frame != null) {
+                            return child;
+                          }
+                          return const SizedBox.shrink();
+                        },
+                        errorBuilder: (context, error, stackTrace) {
+                          return SizedBox(
+                            width: double.infinity,
+                            height: double.infinity,
+                            child: Icon(Icons.error_outline_rounded, size: 24, color: Colors.red[300]),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/widgets/common/person_sliver_app_bar.dart

@@ -0,0 +1,570 @@
+import 'dart:async';
+import 'dart:io';
+import 'dart:ui';
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/models/person.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/utils/people.utils.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+
+class PersonSliverAppBar extends ConsumerStatefulWidget {
+  const PersonSliverAppBar({
+    super.key,
+    required this.person,
+    required this.onNameTap,
+    required this.onShowOptions,
+    required this.onBirthdayTap,
+  });
+
+  final DriftPerson person;
+  final VoidCallback onNameTap;
+  final VoidCallback onBirthdayTap;
+  final VoidCallback onShowOptions;
+
+  @override
+  ConsumerState<PersonSliverAppBar> createState() => _MesmerizingSliverAppBarState();
+}
+
+class _MesmerizingSliverAppBarState extends ConsumerState<PersonSliverAppBar> {
+  double _scrollProgress = 0.0;
+
+  double _calculateScrollProgress(FlexibleSpaceBarSettings? settings) {
+    if (settings?.maxExtent == null || settings?.minExtent == null) {
+      return 1.0;
+    }
+
+    final deltaExtent = settings!.maxExtent - settings.minExtent;
+    if (deltaExtent <= 0.0) {
+      return 1.0;
+    }
+
+    return (1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent).clamp(0.0, 1.0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isMultiSelectEnabled = ref.watch(multiSelectProvider.select((s) => s.isEnabled));
+    Color? actionIconColor = Color.lerp(Colors.white, context.primaryColor, _scrollProgress);
+    List<Shadow> actionIconShadows = [
+      if (_scrollProgress < 0.95)
+        Shadow(offset: const Offset(0, 2), blurRadius: 5, color: Colors.black.withValues(alpha: 0.5))
+      else
+        const Shadow(offset: Offset(0, 2), blurRadius: 0, color: Colors.transparent),
+    ];
+
+    return isMultiSelectEnabled
+        ? SliverToBoxAdapter(
+            child: switch (_scrollProgress) {
+              < 0.8 => const SizedBox(height: 120),
+              _ => const SizedBox(height: 352),
+            },
+          )
+        : SliverAppBar(
+            expandedHeight: 300.0,
+            floating: false,
+            pinned: true,
+            snap: false,
+            elevation: 0,
+            leading: IconButton(
+              icon: Icon(
+                Platform.isIOS ? Icons.arrow_back_ios_new_rounded : Icons.arrow_back,
+                color: Color.lerp(Colors.white, context.primaryColor, _scrollProgress),
+                shadows: [
+                  _scrollProgress < 0.95
+                      ? Shadow(offset: const Offset(0, 2), blurRadius: 5, color: Colors.black.withValues(alpha: 0.5))
+                      : const Shadow(offset: Offset(0, 2), blurRadius: 0, color: Colors.transparent),
+                ],
+              ),
+              onPressed: () {
+                context.pop();
+              },
+            ),
+            actions: [
+              IconButton(
+                icon: Icon(Icons.more_vert, color: actionIconColor, shadows: actionIconShadows),
+                onPressed: widget.onShowOptions,
+              ),
+            ],
+            flexibleSpace: Builder(
+              builder: (context) {
+                final settings = context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
+                final scrollProgress = _calculateScrollProgress(settings);
+
+                // Update scroll progress for the leading button
+                WidgetsBinding.instance.addPostFrameCallback((_) {
+                  if (mounted && _scrollProgress != scrollProgress) {
+                    setState(() {
+                      _scrollProgress = scrollProgress;
+                    });
+                  }
+                });
+
+                return FlexibleSpaceBar(
+                  centerTitle: true,
+                  title: AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 200),
+                    child: scrollProgress > 0.95
+                        ? Text(
+                            widget.person.name,
+                            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.w600, fontSize: 18),
+                          )
+                        : null,
+                  ),
+                  background: _ExpandedBackground(
+                    scrollProgress: scrollProgress,
+                    person: widget.person,
+                    onNameTap: widget.onNameTap,
+                    onBirthdayTap: widget.onBirthdayTap,
+                  ),
+                );
+              },
+            ),
+          );
+  }
+}
+
+class _ExpandedBackground extends ConsumerStatefulWidget {
+  final double scrollProgress;
+  final DriftPerson person;
+  final VoidCallback onNameTap;
+  final VoidCallback onBirthdayTap;
+
+  const _ExpandedBackground({
+    required this.scrollProgress,
+    required this.person,
+    required this.onNameTap,
+    required this.onBirthdayTap,
+  });
+
+  @override
+  ConsumerState<_ExpandedBackground> createState() => _ExpandedBackgroundState();
+}
+
+class _ExpandedBackgroundState extends ConsumerState<_ExpandedBackground> with SingleTickerProviderStateMixin {
+  late AnimationController _slideController;
+  late Animation<Offset> _slideAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _slideController = AnimationController(duration: const Duration(milliseconds: 800), vsync: this);
+
+    _slideAnimation = Tween<Offset>(
+      begin: const Offset(0, 1.5),
+      end: Offset.zero,
+    ).animate(CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic));
+
+    Future.delayed(const Duration(milliseconds: 100), () {
+      if (mounted) {
+        _slideController.forward();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _slideController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final timelineService = ref.watch(timelineServiceProvider);
+
+    return Stack(
+      fit: StackFit.expand,
+      children: [
+        Transform.translate(
+          offset: Offset(0, widget.scrollProgress * 50),
+          child: Transform.scale(
+            scale: 1.4 - (widget.scrollProgress * 0.2),
+            child: _RandomAssetBackground(timelineService: timelineService),
+          ),
+        ),
+        ClipRect(
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: widget.scrollProgress * 2.0, sigmaY: widget.scrollProgress * 2.0),
+            child: Container(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [
+                    Colors.black.withValues(alpha: 0.05),
+                    Colors.transparent,
+                    Colors.black.withValues(alpha: 0.3),
+                    Colors.black.withValues(alpha: 0.6 + (widget.scrollProgress * 0.25)),
+                  ],
+                  stops: const [0.0, 0.15, 0.55, 1.0],
+                ),
+              ),
+            ),
+          ),
+        ),
+        Positioned(
+          bottom: 16,
+          left: 16,
+          right: 16,
+          child: SlideTransition(
+            position: _slideAnimation,
+            child: Row(
+              children: [
+                SizedBox(
+                  height: 84,
+                  width: 84,
+                  child: Material(
+                    shape: const CircleBorder(side: BorderSide(color: Colors.grey, width: 1.0)),
+                    elevation: 3,
+                    child: CircleAvatar(
+                      maxRadius: 84 / 2,
+                      backgroundImage: NetworkImage(
+                        getFaceThumbnailUrl(widget.person.id),
+                        headers: ApiService.getRequestHeaders(),
+                      ),
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      GestureDetector(
+                        onTap: () => widget.onNameTap.call(),
+                        child: SizedBox(
+                          width: double.infinity,
+                          child: SingleChildScrollView(
+                            scrollDirection: Axis.horizontal,
+                            child: widget.person.name.isNotEmpty
+                                ? Text(
+                                    widget.person.name,
+                                    maxLines: 1,
+                                    style: const TextStyle(
+                                      color: Colors.white,
+                                      fontSize: 36,
+                                      fontWeight: FontWeight.bold,
+                                      letterSpacing: 0.5,
+                                      shadows: [Shadow(offset: Offset(0, 2), blurRadius: 12, color: Colors.black45)],
+                                    ),
+                                  )
+                                : Text(
+                                    'add_a_name'.tr(),
+                                    style: context.textTheme.titleLarge?.copyWith(
+                                      color: Colors.grey[400],
+                                      fontSize: 36,
+                                      decoration: TextDecoration.underline,
+                                      decorationColor: Colors.white,
+                                    ),
+                                  ),
+                          ),
+                        ),
+                      ),
+                      AnimatedContainer(duration: const Duration(milliseconds: 300), child: const _ItemCountText()),
+                      const SizedBox(height: 8),
+                      GestureDetector(
+                        onTap: widget.onBirthdayTap,
+                        child: Row(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            const Icon(Icons.cake_rounded, color: Colors.white, size: 14),
+                            const SizedBox(width: 4),
+
+                            if (widget.person.birthDate != null)
+                              Text(
+                                "${DateFormat.yMMMd(context.locale.toString()).format(widget.person.birthDate!)} (${formatAge(widget.person.birthDate!, DateTime.now())})",
+                                style: context.textTheme.labelLarge?.copyWith(
+                                  color: Colors.white,
+                                  height: 1.2,
+                                  fontSize: 14,
+                                ),
+                              )
+                            else
+                              Text(
+                                'add_birthday'.tr(),
+                                style: context.textTheme.labelLarge?.copyWith(
+                                  color: Colors.grey[400],
+                                  height: 1.2,
+                                  fontSize: 14,
+                                  decoration: TextDecoration.underline,
+                                  decorationColor: Colors.white,
+                                ),
+                              ),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ItemCountText extends ConsumerStatefulWidget {
+  const _ItemCountText();
+
+  @override
+  ConsumerState<_ItemCountText> createState() => _ItemCountTextState();
+}
+
+class _ItemCountTextState extends ConsumerState<_ItemCountText> {
+  StreamSubscription? _reloadSubscription;
+
+  @override
+  void initState() {
+    super.initState();
+    _reloadSubscription = EventStream.shared.listen<TimelineReloadEvent>((_) => setState(() {}));
+  }
+
+  @override
+  void dispose() {
+    _reloadSubscription?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final assetCount = ref.watch(timelineServiceProvider.select((s) => s.totalAssets));
+
+    return Text(
+      'items_count'.t(context: context, args: {"count": assetCount}),
+      style: context.textTheme.labelLarge?.copyWith(
+        fontWeight: FontWeight.bold,
+        color: Colors.white,
+        shadows: [const Shadow(offset: Offset(0, 1), blurRadius: 6, color: Colors.black45)],
+      ),
+    );
+  }
+}
+
+class _RandomAssetBackground extends StatefulWidget {
+  final TimelineService timelineService;
+
+  const _RandomAssetBackground({required this.timelineService});
+
+  @override
+  State<_RandomAssetBackground> createState() => _RandomAssetBackgroundState();
+}
+
+class _RandomAssetBackgroundState extends State<_RandomAssetBackground> with TickerProviderStateMixin {
+  late AnimationController _zoomController;
+  late AnimationController _crossFadeController;
+  late Animation<double> _zoomAnimation;
+  late Animation<Offset> _panAnimation;
+  late Animation<double> _crossFadeAnimation;
+  BaseAsset? _currentAsset;
+  BaseAsset? _nextAsset;
+  bool _isZoomingIn = true;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _zoomController = AnimationController(
+      duration: const Duration(seconds: 12),
+      vsync: this,
+      animationBehavior: AnimationBehavior.preserve,
+    );
+
+    _crossFadeController = AnimationController(
+      duration: const Duration(milliseconds: 1200),
+      vsync: this,
+      animationBehavior: AnimationBehavior.preserve,
+    );
+
+    _zoomAnimation = Tween<double>(
+      begin: 1.0,
+      end: 1.2,
+    ).animate(CurvedAnimation(parent: _zoomController, curve: Curves.easeInOut));
+
+    _panAnimation = Tween<Offset>(
+      begin: Offset.zero,
+      end: const Offset(0.5, -0.5),
+    ).animate(CurvedAnimation(parent: _zoomController, curve: Curves.easeInOut));
+
+    _crossFadeAnimation = Tween<double>(
+      begin: 0.0,
+      end: 1.0,
+    ).animate(CurvedAnimation(parent: _crossFadeController, curve: Curves.easeInOutCubic));
+
+    Future.delayed(Durations.medium1, () => _loadFirstAsset());
+  }
+
+  @override
+  void dispose() {
+    _zoomController.dispose();
+    _crossFadeController.dispose();
+    super.dispose();
+  }
+
+  void _startAnimationCycle() {
+    if (_isZoomingIn) {
+      _zoomController.forward().then((_) {
+        _loadNextAsset();
+      });
+    } else {
+      _zoomController.reverse().then((_) {
+        _loadNextAsset();
+      });
+    }
+  }
+
+  Future<void> _loadFirstAsset() async {
+    if (!mounted) {
+      return;
+    }
+
+    if (widget.timelineService.totalAssets == 0) {
+      setState(() {
+        _currentAsset = null;
+      });
+
+      return;
+    }
+
+    setState(() {
+      _currentAsset = widget.timelineService.getRandomAsset();
+    });
+
+    await _crossFadeController.forward();
+
+    if (_zoomController.status == AnimationStatus.dismissed) {
+      if (_isZoomingIn) {
+        _zoomController.reset();
+      } else {
+        _zoomController.value = 1.0;
+      }
+      _startAnimationCycle();
+    }
+  }
+
+  Future<void> _loadNextAsset() async {
+    if (!mounted) {
+      return;
+    }
+
+    try {
+      if (widget.timelineService.totalAssets > 1) {
+        // Load next asset while keeping current one visible
+        final nextAsset = widget.timelineService.getRandomAsset();
+
+        setState(() {
+          _nextAsset = nextAsset;
+        });
+
+        await _crossFadeController.reverse();
+        setState(() {
+          _currentAsset = _nextAsset;
+          _nextAsset = null;
+        });
+
+        _crossFadeController.value = 1.0;
+
+        _isZoomingIn = !_isZoomingIn;
+
+        _startAnimationCycle();
+      }
+    } catch (e) {
+      _zoomController.reset();
+      _startAnimationCycle();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.timelineService.totalAssets == 0) {
+      return const SizedBox.shrink();
+    }
+
+    return AnimatedBuilder(
+      animation: Listenable.merge([_zoomAnimation, _panAnimation, _crossFadeAnimation]),
+      builder: (context, child) {
+        return Transform.scale(
+          scale: _zoomAnimation.value,
+          filterQuality: Platform.isAndroid ? FilterQuality.low : null,
+          child: Transform.translate(
+            offset: _panAnimation.value,
+            filterQuality: Platform.isAndroid ? FilterQuality.low : null,
+            child: Stack(
+              fit: StackFit.expand,
+              children: [
+                // Current image
+                if (_currentAsset != null)
+                  Opacity(
+                    opacity: _crossFadeAnimation.value,
+                    child: SizedBox(
+                      width: double.infinity,
+                      height: double.infinity,
+                      child: Image(
+                        alignment: Alignment.topRight,
+                        image: getFullImageProvider(_currentAsset!),
+                        fit: BoxFit.cover,
+                        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+                          if (wasSynchronouslyLoaded || frame != null) {
+                            return child;
+                          }
+                          return Container();
+                        },
+                        errorBuilder: (context, error, stackTrace) {
+                          return SizedBox(
+                            width: double.infinity,
+                            height: double.infinity,
+                            child: Icon(Icons.error_outline_rounded, size: 24, color: Colors.red[300]),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+
+                if (_nextAsset != null)
+                  Opacity(
+                    opacity: 1.0 - _crossFadeAnimation.value,
+                    child: SizedBox(
+                      width: double.infinity,
+                      height: double.infinity,
+                      child: Image(
+                        alignment: Alignment.topRight,
+                        image: getFullImageProvider(_nextAsset!),
+                        fit: BoxFit.cover,
+                        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+                          if (wasSynchronouslyLoaded || frame != null) {
+                            return child;
+                          }
+                          return const SizedBox.shrink();
+                        },
+                        errorBuilder: (context, error, stackTrace) {
+                          return SizedBox(
+                            width: double.infinity,
+                            height: double.infinity,
+                            child: Icon(Icons.error_outline_rounded, size: 24, color: Colors.red[300]),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/widgets/common/remote_album_sliver_app_bar.dart

@@ -0,0 +1,551 @@
+import 'dart:async';
+import 'dart:io';
+import 'dart:ui';
+
+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/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/datetime_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/remote_album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/album/remote_album_shared_user_icons.dart';
+
+class RemoteAlbumSliverAppBar extends ConsumerStatefulWidget {
+  const RemoteAlbumSliverAppBar({
+    super.key,
+    this.icon = Icons.camera,
+    required this.kebabMenu,
+    this.onEditTitle,
+    this.onActivity,
+  });
+
+  final IconData icon;
+  final Widget kebabMenu;
+  final void Function()? onEditTitle;
+  final void Function()? onActivity;
+
+  @override
+  ConsumerState<RemoteAlbumSliverAppBar> createState() => _MesmerizingSliverAppBarState();
+}
+
+class _MesmerizingSliverAppBarState extends ConsumerState<RemoteAlbumSliverAppBar> {
+  double _scrollProgress = 0.0;
+
+  double _calculateScrollProgress(FlexibleSpaceBarSettings? settings) {
+    if (settings?.maxExtent == null || settings?.minExtent == null) {
+      return 1.0;
+    }
+
+    final deltaExtent = settings!.maxExtent - settings.minExtent;
+    if (deltaExtent <= 0.0) {
+      return 1.0;
+    }
+
+    return (1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent).clamp(0.0, 1.0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isMultiSelectEnabled = ref.watch(multiSelectProvider.select((s) => s.isEnabled));
+
+    final currentAlbum = ref.watch(currentRemoteAlbumProvider);
+    if (currentAlbum == null) {
+      return const SliverToBoxAdapter(child: SizedBox.shrink());
+    }
+
+    Color? actionIconColor = Color.lerp(Colors.white, context.primaryColor, _scrollProgress);
+
+    List<Shadow> actionIconShadows = [
+      if (_scrollProgress < 0.95)
+        Shadow(offset: const Offset(0, 2), blurRadius: 5, color: Colors.black.withValues(alpha: 0.5))
+      else
+        const Shadow(offset: Offset(0, 2), blurRadius: 0, color: Colors.transparent),
+    ];
+
+    return SliverAppBar(
+      expandedHeight: 400.0,
+      floating: false,
+      pinned: true,
+      snap: false,
+      elevation: 0,
+      leading: isMultiSelectEnabled
+          ? const SizedBox.shrink()
+          : IconButton(
+              icon: Icon(
+                Platform.isIOS ? Icons.arrow_back_ios_new_rounded : Icons.arrow_back,
+                color: actionIconColor,
+                shadows: actionIconShadows,
+              ),
+              onPressed: () => context.maybePop(),
+            ),
+      actions: [
+        if (currentAlbum.isActivityEnabled && currentAlbum.isShared)
+          IconButton(
+            icon: Icon(Icons.chat_outlined, color: actionIconColor, shadows: actionIconShadows),
+            onPressed: widget.onActivity,
+          ),
+        widget.kebabMenu,
+      ],
+      title: Builder(
+        builder: (context) {
+          final settings = context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
+          final scrollProgress = _calculateScrollProgress(settings);
+
+          return AnimatedSwitcher(
+            duration: const Duration(milliseconds: 200),
+            child: scrollProgress > 0.95
+                ? Text(
+                    currentAlbum.name,
+                    style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.w600, fontSize: 18),
+                  )
+                : null,
+          );
+        },
+      ),
+      flexibleSpace: Builder(
+        builder: (context) {
+          final settings = context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
+          final scrollProgress = _calculateScrollProgress(settings);
+
+          // Update scroll progress for the leading button
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            if (mounted && _scrollProgress != scrollProgress) {
+              setState(() {
+                _scrollProgress = scrollProgress;
+              });
+            }
+          });
+
+          return FlexibleSpaceBar(
+            background: _ExpandedBackground(
+              scrollProgress: scrollProgress,
+              icon: widget.icon,
+              onEditTitle: widget.onEditTitle,
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _ExpandedBackground extends ConsumerStatefulWidget {
+  final double scrollProgress;
+  final IconData icon;
+  final void Function()? onEditTitle;
+
+  const _ExpandedBackground({required this.scrollProgress, required this.icon, this.onEditTitle});
+
+  @override
+  ConsumerState<_ExpandedBackground> createState() => _ExpandedBackgroundState();
+}
+
+class _ExpandedBackgroundState extends ConsumerState<_ExpandedBackground> with SingleTickerProviderStateMixin {
+  late AnimationController _slideController;
+  late Animation<Offset> _slideAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _slideController = AnimationController(duration: const Duration(milliseconds: 800), vsync: this);
+
+    _slideAnimation = Tween<Offset>(
+      begin: const Offset(0, 1.5),
+      end: Offset.zero,
+    ).animate(CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic));
+
+    Future.delayed(const Duration(milliseconds: 100), () {
+      if (mounted) {
+        _slideController.forward();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _slideController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final timelineService = ref.watch(timelineServiceProvider);
+    final currentAlbum = ref.watch(currentRemoteAlbumProvider);
+
+    if (currentAlbum == null) {
+      return const SizedBox.shrink();
+    }
+
+    final dateRange = ref.watch(remoteAlbumDateRangeProvider(currentAlbum.id));
+    return Stack(
+      fit: StackFit.expand,
+      children: [
+        Transform.translate(
+          offset: Offset(0, widget.scrollProgress * 50),
+          child: Transform.scale(
+            scale: 1.4 - (widget.scrollProgress * 0.2),
+            child: _RandomAssetBackground(timelineService: timelineService, icon: widget.icon),
+          ),
+        ),
+        ClipRect(
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: widget.scrollProgress * 2.0, sigmaY: widget.scrollProgress * 2.0),
+            child: Container(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [
+                    Colors.black.withValues(alpha: 0.05),
+                    Colors.transparent,
+                    Colors.black.withValues(alpha: 0.3),
+                    Colors.black.withValues(alpha: 0.6 + (widget.scrollProgress * 0.25)),
+                  ],
+                  stops: const [0.0, 0.15, 0.55, 1.0],
+                ),
+              ),
+            ),
+          ),
+        ),
+        Positioned(
+          bottom: 16,
+          left: 16,
+          right: 16,
+          child: SlideTransition(
+            position: _slideAnimation,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Row(
+                  children: [
+                    if (dateRange.hasValue)
+                      Text(
+                        DateRangeFormatting.formatDateRange(
+                          dateRange.value!.$1.toLocal(),
+                          dateRange.value!.$2.toLocal(),
+                          context.locale,
+                        ),
+                        style: const TextStyle(
+                          color: Colors.white,
+                          shadows: [Shadow(offset: Offset(0, 2), blurRadius: 12, color: Colors.black87)],
+                        ),
+                      ),
+                    const Text(
+                      " • ",
+                      style: TextStyle(
+                        color: Colors.white,
+                        shadows: [Shadow(offset: Offset(0, 2), blurRadius: 12, color: Colors.black87)],
+                      ),
+                    ),
+                    AnimatedContainer(duration: const Duration(milliseconds: 300), child: const _ItemCountText()),
+                  ],
+                ),
+                GestureDetector(
+                  onTap: widget.onEditTitle,
+                  child: SizedBox(
+                    width: double.infinity,
+                    child: SingleChildScrollView(
+                      scrollDirection: Axis.horizontal,
+                      child: Text(
+                        currentAlbum.name,
+                        maxLines: 1,
+                        style: const TextStyle(
+                          color: Colors.white,
+                          fontSize: 36,
+                          fontWeight: FontWeight.bold,
+                          letterSpacing: 0.5,
+                          shadows: [Shadow(offset: Offset(0, 2), blurRadius: 12, color: Colors.black54)],
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+                if (currentAlbum.description.isNotEmpty)
+                  GestureDetector(
+                    onTap: widget.onEditTitle,
+                    child: ConstrainedBox(
+                      constraints: const BoxConstraints(maxHeight: 80),
+                      child: SingleChildScrollView(
+                        child: Text(
+                          currentAlbum.description,
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 14,
+                            shadows: [Shadow(offset: Offset(0, 2), blurRadius: 8, color: Colors.black54)],
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                const Padding(padding: EdgeInsets.only(top: 8.0), child: RemoteAlbumSharedUserIcons()),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ItemCountText extends ConsumerStatefulWidget {
+  const _ItemCountText();
+
+  @override
+  ConsumerState<_ItemCountText> createState() => _ItemCountTextState();
+}
+
+class _ItemCountTextState extends ConsumerState<_ItemCountText> {
+  StreamSubscription? _reloadSubscription;
+
+  @override
+  void initState() {
+    super.initState();
+    _reloadSubscription = EventStream.shared.listen<TimelineReloadEvent>((_) => setState(() {}));
+  }
+
+  @override
+  void dispose() {
+    _reloadSubscription?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final assetCount = ref.watch(timelineServiceProvider.select((s) => s.totalAssets));
+
+    return Text(
+      'items_count'.t(context: context, args: {"count": assetCount}),
+      style: context.textTheme.labelLarge?.copyWith(
+        color: Colors.white,
+        shadows: [const Shadow(offset: Offset(0, 2), blurRadius: 12, color: Colors.black87)],
+      ),
+    );
+  }
+}
+
+class _RandomAssetBackground extends StatefulWidget {
+  final TimelineService timelineService;
+  final IconData icon;
+
+  const _RandomAssetBackground({required this.timelineService, required this.icon});
+
+  @override
+  State<_RandomAssetBackground> createState() => _RandomAssetBackgroundState();
+}
+
+class _RandomAssetBackgroundState extends State<_RandomAssetBackground> with TickerProviderStateMixin {
+  late AnimationController _zoomController;
+  late AnimationController _crossFadeController;
+  late Animation<double> _zoomAnimation;
+  late Animation<Offset> _panAnimation;
+  late Animation<double> _crossFadeAnimation;
+  BaseAsset? _currentAsset;
+  BaseAsset? _nextAsset;
+  bool _isZoomingIn = true;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _zoomController = AnimationController(
+      duration: const Duration(seconds: 12),
+      vsync: this,
+      animationBehavior: AnimationBehavior.preserve,
+    );
+
+    _crossFadeController = AnimationController(
+      duration: const Duration(milliseconds: 1200),
+      vsync: this,
+      animationBehavior: AnimationBehavior.preserve,
+    );
+
+    _zoomAnimation = Tween<double>(
+      begin: 1.0,
+      end: 1.2,
+    ).animate(CurvedAnimation(parent: _zoomController, curve: Curves.easeInOut));
+
+    _panAnimation = Tween<Offset>(
+      begin: Offset.zero,
+      end: const Offset(0.5, -0.5),
+    ).animate(CurvedAnimation(parent: _zoomController, curve: Curves.easeInOut));
+
+    _crossFadeAnimation = Tween<double>(
+      begin: 0.0,
+      end: 1.0,
+    ).animate(CurvedAnimation(parent: _crossFadeController, curve: Curves.easeInOutCubic));
+
+    Future.delayed(Durations.medium1, () => _loadFirstAsset());
+  }
+
+  @override
+  void dispose() {
+    _zoomController.dispose();
+    _crossFadeController.dispose();
+    super.dispose();
+  }
+
+  void _startAnimationCycle() {
+    if (_isZoomingIn) {
+      _zoomController.forward().then((_) {
+        _loadNextAsset();
+      });
+    } else {
+      _zoomController.reverse().then((_) {
+        _loadNextAsset();
+      });
+    }
+  }
+
+  Future<void> _loadFirstAsset() async {
+    if (!mounted) {
+      return;
+    }
+
+    if (widget.timelineService.totalAssets == 0) {
+      setState(() {
+        _currentAsset = null;
+      });
+
+      return;
+    }
+
+    setState(() {
+      _currentAsset = widget.timelineService.getRandomAsset();
+    });
+
+    await _crossFadeController.forward();
+
+    if (_zoomController.status == AnimationStatus.dismissed) {
+      if (_isZoomingIn) {
+        _zoomController.reset();
+      } else {
+        _zoomController.value = 1.0;
+      }
+      _startAnimationCycle();
+    }
+  }
+
+  Future<void> _loadNextAsset() async {
+    if (!mounted) {
+      return;
+    }
+
+    try {
+      if (widget.timelineService.totalAssets > 1) {
+        // Load next asset while keeping current one visible
+        final nextAsset = widget.timelineService.getRandomAsset();
+
+        setState(() {
+          _nextAsset = nextAsset;
+        });
+
+        await _crossFadeController.reverse();
+        setState(() {
+          _currentAsset = _nextAsset;
+          _nextAsset = null;
+        });
+
+        _crossFadeController.value = 1.0;
+
+        _isZoomingIn = !_isZoomingIn;
+
+        _startAnimationCycle();
+      }
+    } catch (e) {
+      _zoomController.reset();
+      _startAnimationCycle();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.timelineService.totalAssets == 0) {
+      return const SizedBox.shrink();
+    }
+
+    return AnimatedBuilder(
+      animation: Listenable.merge([_zoomAnimation, _panAnimation, _crossFadeAnimation]),
+      builder: (context, child) {
+        return Transform.scale(
+          scale: _zoomAnimation.value,
+          filterQuality: Platform.isAndroid ? FilterQuality.low : null,
+          child: Transform.translate(
+            offset: _panAnimation.value,
+            filterQuality: Platform.isAndroid ? FilterQuality.low : null,
+            child: Stack(
+              fit: StackFit.expand,
+              children: [
+                // Current image
+                if (_currentAsset != null)
+                  Opacity(
+                    opacity: _crossFadeAnimation.value,
+                    child: SizedBox(
+                      width: double.infinity,
+                      height: double.infinity,
+                      child: Image(
+                        alignment: Alignment.topRight,
+                        image: getFullImageProvider(_currentAsset!),
+                        fit: BoxFit.cover,
+                        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+                          if (wasSynchronouslyLoaded || frame != null) {
+                            return child;
+                          }
+                          return Container();
+                        },
+                        errorBuilder: (context, error, stackTrace) {
+                          return SizedBox(
+                            width: double.infinity,
+                            height: double.infinity,
+                            child: Icon(Icons.error_outline_rounded, size: 24, color: Colors.red[300]),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+
+                if (_nextAsset != null)
+                  Opacity(
+                    opacity: 1.0 - _crossFadeAnimation.value,
+                    child: SizedBox(
+                      width: double.infinity,
+                      height: double.infinity,
+                      child: Image(
+                        alignment: Alignment.topRight,
+                        image: getFullImageProvider(_nextAsset!),
+                        fit: BoxFit.cover,
+                        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+                          if (wasSynchronouslyLoaded || frame != null) {
+                            return child;
+                          }
+                          return const SizedBox.shrink();
+                        },
+                        errorBuilder: (context, error, stackTrace) {
+                          return SizedBox(
+                            width: double.infinity,
+                            height: double.infinity,
+                            child: Icon(Icons.error_outline_rounded, size: 24, color: Colors.red[300]),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/widgets/common/scaffold_error_body.dart

@@ -0,0 +1,38 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+// Error widget to be used in Scaffold when an AsyncError is received
+class ScaffoldErrorBody extends StatelessWidget {
+  final bool withIcon;
+  final String? errorMsg;
+
+  const ScaffoldErrorBody({super.key, this.withIcon = true, this.errorMsg});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text("scaffold_body_error_occurred", style: context.textTheme.displayMedium, textAlign: TextAlign.center).tr(),
+        if (withIcon)
+          Center(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 15),
+              child: Icon(
+                Icons.error_outline,
+                size: 100,
+                color: context.themeData.iconTheme.color?.withValues(alpha: 0.5),
+              ),
+            ),
+          ),
+        if (withIcon && errorMsg != null)
+          Padding(
+            padding: const EdgeInsets.all(20),
+            child: Text(errorMsg!, style: context.textTheme.displaySmall, textAlign: TextAlign.center),
+          ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/common/search_field.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+
+class SearchField extends StatelessWidget {
+  const SearchField({
+    super.key,
+    required this.hintText,
+    this.autofocus = false,
+    this.controller,
+    this.focusNode,
+    this.onChanged,
+    this.onSubmitted,
+    this.onTapOutside,
+    this.contentPadding = const EdgeInsets.only(left: 24),
+    this.prefixIcon,
+    this.suffixIcon,
+    this.filled = false,
+  });
+
+  final FocusNode? focusNode;
+  final void Function(String)? onChanged;
+  final void Function(String)? onSubmitted;
+  final void Function(PointerDownEvent)? onTapOutside;
+  final TextEditingController? controller;
+  final String hintText;
+  final EdgeInsetsGeometry contentPadding;
+  final Widget? prefixIcon;
+  final Widget? suffixIcon;
+  final bool autofocus;
+  final bool filled;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      controller: controller,
+      autofocus: autofocus,
+      focusNode: focusNode,
+      onChanged: onChanged,
+      onTapOutside: onTapOutside ?? (_) => focusNode?.unfocus(),
+      onSubmitted: onSubmitted,
+      decoration: InputDecoration(
+        contentPadding: contentPadding,
+        filled: filled,
+        fillColor: context.primaryColor.withValues(alpha: 0.1),
+        hintStyle: context.textTheme.bodyLarge?.copyWith(color: context.themeData.colorScheme.onSurfaceSecondary),
+        border: OutlineInputBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(25)),
+          borderSide: BorderSide(color: context.colorScheme.surfaceDim),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(25)),
+          borderSide: BorderSide(color: context.colorScheme.surfaceContainer),
+        ),
+        disabledBorder: OutlineInputBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(25)),
+          borderSide: BorderSide(color: context.colorScheme.surfaceDim),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(25)),
+          borderSide: BorderSide(color: context.colorScheme.primary.withAlpha(100)),
+        ),
+        prefixIcon: prefixIcon,
+        suffixIcon: suffixIcon,
+        hintText: hintText,
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/selection_sliver_app_bar.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+
+class SelectionSliverAppBar extends ConsumerStatefulWidget {
+  const SelectionSliverAppBar({super.key});
+
+  @override
+  ConsumerState<SelectionSliverAppBar> createState() => _SelectionSliverAppBarState();
+}
+
+class _SelectionSliverAppBarState extends ConsumerState<SelectionSliverAppBar> {
+  @override
+  Widget build(BuildContext context) {
+    final selection = ref.watch(multiSelectProvider.select((s) => s.selectedAssets));
+
+    final toExclude = ref.watch(multiSelectProvider.select((s) => s.lockedSelectionAssets));
+
+    final filteredAssets = selection.where((asset) {
+      return !toExclude.contains(asset);
+    }).toSet();
+
+    onDone(Set<BaseAsset> selected) {
+      ref.read(multiSelectProvider.notifier).reset();
+      context.pop<Set<BaseAsset>>(selected);
+    }
+
+    return SliverAppBar(
+      floating: true,
+      pinned: true,
+      snap: false,
+      backgroundColor: context.colorScheme.surfaceContainer,
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+      automaticallyImplyLeading: false,
+      leading: IconButton(
+        icon: const Icon(Icons.close_rounded),
+        onPressed: () {
+          ref.read(multiSelectProvider.notifier).reset();
+          context.pop<Set<BaseAsset>>(null);
+        },
+      ),
+      centerTitle: true,
+      title: Text("Select {count}".t(context: context, args: {'count': filteredAssets.length.toString()})),
+      actions: [
+        TextButton(
+          onPressed: () => onDone(filteredAssets),
+          child: Text(
+            'done'.t(context: context),
+            style: context.textTheme.titleSmall?.copyWith(color: context.colorScheme.primary),
+          ),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/common/share_dialog.dart

@@ -0,0 +1,19 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+class ShareDialog extends StatelessWidget {
+  const ShareDialog({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          const CircularProgressIndicator(),
+          Container(margin: const EdgeInsets.only(top: 12), child: const Text('share_dialog_preparing').tr()),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/common/thumbhash_placeholder.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
+import 'package:immich_mobile/widgets/common/fade_in_placeholder_image.dart';
+import 'package:octo_image/octo_image.dart';
+
+/// Simple set to show [OctoPlaceholder.circularProgressIndicator] as
+/// placeholder and [OctoError.icon] as error.
+OctoSet blurHashOrPlaceholder(Uint8List? blurhash, {BoxFit? fit, Text? errorMessage}) {
+  return OctoSet(
+    placeholderBuilder: blurHashPlaceholderBuilder(blurhash, fit: fit),
+    errorBuilder: blurHashErrorBuilder(blurhash, fit: fit, message: errorMessage),
+  );
+}
+
+OctoPlaceholderBuilder blurHashPlaceholderBuilder(Uint8List? blurhash, {BoxFit? fit}) {
+  return (context) => blurhash == null
+      ? const ThumbnailPlaceholder()
+      : FadeInPlaceholderImage(
+          placeholder: const ThumbnailPlaceholder(),
+          image: MemoryImage(blurhash),
+          fit: fit ?? BoxFit.cover,
+        );
+}
+
+OctoErrorBuilder blurHashErrorBuilder(
+  Uint8List? blurhash, {
+  BoxFit? fit,
+  Text? message,
+  IconData? icon,
+  Color? iconColor,
+  double? iconSize,
+}) {
+  return OctoError.placeholderWithErrorIcon(
+    blurHashPlaceholderBuilder(blurhash, fit: fit),
+    message: message,
+    icon: icon,
+    iconColor: iconColor,
+    iconSize: iconSize,
+  );
+}

mobile/lib/widgets/common/transparent_image.dart

@@ -0,0 +1,68 @@
+import 'dart:typed_data';
+
+final Uint8List kTransparentImage = Uint8List.fromList(<int>[
+  0x89,
+  0x50,
+  0x4E,
+  0x47,
+  0x0D,
+  0x0A,
+  0x1A,
+  0x0A,
+  0x00,
+  0x00,
+  0x00,
+  0x0D,
+  0x49,
+  0x48,
+  0x44,
+  0x52,
+  0x00,
+  0x00,
+  0x00,
+  0x01,
+  0x00,
+  0x00,
+  0x00,
+  0x01,
+  0x08,
+  0x06,
+  0x00,
+  0x00,
+  0x00,
+  0x1F,
+  0x15,
+  0xC4,
+  0x89,
+  0x00,
+  0x00,
+  0x00,
+  0x0A,
+  0x49,
+  0x44,
+  0x41,
+  0x54,
+  0x78,
+  0x9C,
+  0x63,
+  0x00,
+  0x01,
+  0x00,
+  0x00,
+  0x05,
+  0x00,
+  0x01,
+  0x0D,
+  0x0A,
+  0x2D,
+  0xB4,
+  0x00,
+  0x00,
+  0x00,
+  0x00,
+  0x49,
+  0x45,
+  0x4E,
+  0x44,
+  0xAE,
+]);

mobile/lib/widgets/common/user_avatar.dart

@@ -0,0 +1,24 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/domain/models/user.model.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/services/api.service.dart';
+
+Widget userAvatar(BuildContext context, UserDto u, {double? radius}) {
+  final url = "${Store.get(StoreKey.serverEndpoint)}/users/${u.id}/profile-image";
+  final nameFirstLetter = u.name.isNotEmpty ? u.name[0] : "";
+  return CircleAvatar(
+    radius: radius,
+    backgroundColor: context.primaryColor.withAlpha(50),
+    foregroundImage: CachedNetworkImageProvider(
+      url,
+      headers: ApiService.getRequestHeaders(),
+      cacheKey: "user-${u.id}-profile",
+    ),
+    // silence errors if user has no profile image, use initials as fallback
+    onForegroundImageError: (exception, stackTrace) {},
+    child: Text(nameFirstLetter.toUpperCase()),
+  );
+}

mobile/lib/widgets/common/user_circle_avatar.dart

@@ -0,0 +1,66 @@
+import 'dart:math';
+
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/domain/models/user.model.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/widgets/common/transparent_image.dart';
+
+// ignore: must_be_immutable
+class UserCircleAvatar extends ConsumerWidget {
+  final UserDto user;
+  double radius;
+  double size;
+  bool hasBorder;
+
+  UserCircleAvatar({super.key, this.radius = 22, this.size = 44, this.hasBorder = false, required this.user});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final userAvatarColor = user.avatarColor.toColor();
+    final profileImageUrl =
+        '${Store.get(StoreKey.serverEndpoint)}/users/${user.id}/profile-image?d=${Random().nextInt(1024)}';
+
+    final textIcon = DefaultTextStyle(
+      style: TextStyle(
+        fontWeight: FontWeight.bold,
+        fontSize: 12,
+        color: userAvatarColor.computeLuminance() > 0.5 ? Colors.black : Colors.white,
+      ),
+      child: Text(user.name[0].toUpperCase()),
+    );
+
+    return Tooltip(
+      message: user.name,
+      child: Container(
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: hasBorder ? Border.all(color: Colors.grey[500]!, width: 1) : null,
+        ),
+        child: CircleAvatar(
+          backgroundColor: userAvatarColor,
+          radius: radius,
+          child: user.hasProfileImage
+              ? ClipRRect(
+                  borderRadius: const BorderRadius.all(Radius.circular(50)),
+                  child: CachedNetworkImage(
+                    fit: BoxFit.cover,
+                    cacheKey: '${user.id}-${user.profileChangedAt.toIso8601String()}',
+                    width: size,
+                    height: size,
+                    placeholder: (_, __) => Image.memory(kTransparentImage),
+                    imageUrl: profileImageUrl,
+                    httpHeaders: ApiService.getRequestHeaders(),
+                    fadeInDuration: const Duration(milliseconds: 300),
+                    errorWidget: (context, error, stackTrace) => textIcon,
+                  ),
+                )
+              : textIcon,
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/forms/change_password_form.dart

@@ -0,0 +1,172 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
+import 'package:immich_mobile/providers/auth.provider.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/providers/websocket.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class ChangePasswordForm extends HookConsumerWidget {
+  const ChangePasswordForm({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final passwordController = useTextEditingController.fromValue(TextEditingValue.empty);
+    final confirmPasswordController = useTextEditingController.fromValue(TextEditingValue.empty);
+    final authState = ref.watch(authProvider);
+    final formKey = GlobalKey<FormState>();
+
+    return Center(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 300),
+        child: SingleChildScrollView(
+          child: Wrap(
+            spacing: 16,
+            runSpacing: 16,
+            alignment: WrapAlignment.start,
+            children: [
+              Text(
+                'change_password'.tr(),
+                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: context.primaryColor),
+              ),
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 24.0),
+                child: Text(
+                  'change_password_form_description'.tr(namedArgs: {'name': authState.name}),
+                  style: TextStyle(fontSize: 14, color: context.colorScheme.onSurface, fontWeight: FontWeight.w600),
+                ),
+              ),
+              Form(
+                key: formKey,
+                child: Column(
+                  children: [
+                    PasswordInput(controller: passwordController),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(vertical: 16.0),
+                      child: ConfirmPasswordInput(
+                        originalController: passwordController,
+                        confirmController: confirmPasswordController,
+                      ),
+                    ),
+                    ChangePasswordButton(
+                      passwordController: passwordController,
+                      onPressed: () async {
+                        if (formKey.currentState!.validate()) {
+                          var isSuccess = await ref
+                              .read(authProvider.notifier)
+                              .changePassword(passwordController.value.text);
+
+                          if (isSuccess) {
+                            await ref.read(authProvider.notifier).logout();
+
+                            ref.read(manualUploadProvider.notifier).cancelBackup();
+                            ref.read(backupProvider.notifier).cancelBackup();
+                            await ref.read(assetProvider.notifier).clearAllAssets();
+                            ref.read(websocketProvider.notifier).disconnect();
+
+                            AutoRouter.of(context).back();
+
+                            ImmichToast.show(
+                              context: context,
+                              msg: "login_password_changed_success".tr(),
+                              toastType: ToastType.success,
+                              gravity: ToastGravity.TOP,
+                            );
+                          } else {
+                            ImmichToast.show(
+                              context: context,
+                              msg: "login_password_changed_error".tr(),
+                              toastType: ToastType.error,
+                              gravity: ToastGravity.TOP,
+                            );
+                          }
+                        }
+                      },
+                    ),
+                    TextButton.icon(
+                      icon: const Icon(Icons.arrow_back),
+                      onPressed: () => AutoRouter.of(context).back(),
+                      label: const Text('back').tr(),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class PasswordInput extends StatelessWidget {
+  final TextEditingController controller;
+
+  const PasswordInput({super.key, required this.controller});
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      obscureText: true,
+      controller: controller,
+      decoration: InputDecoration(
+        labelText: 'change_password_form_new_password'.tr(),
+        border: const OutlineInputBorder(),
+        hintText: 'change_password_form_new_password'.tr(),
+      ),
+    );
+  }
+}
+
+class ConfirmPasswordInput extends StatelessWidget {
+  final TextEditingController originalController;
+  final TextEditingController confirmController;
+
+  const ConfirmPasswordInput({super.key, required this.originalController, required this.confirmController});
+
+  String? _validateInput(String? email) {
+    if (confirmController.value != originalController.value) {
+      return 'change_password_form_password_mismatch'.tr();
+    }
+    return null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      obscureText: true,
+      controller: confirmController,
+      decoration: InputDecoration(
+        labelText: 'change_password_form_confirm_password'.tr(),
+        hintText: 'change_password_form_reenter_new_password'.tr(),
+        border: const OutlineInputBorder(),
+      ),
+      validator: _validateInput,
+      autovalidateMode: AutovalidateMode.always,
+    );
+  }
+}
+
+class ChangePasswordButton extends ConsumerWidget {
+  final TextEditingController passwordController;
+  final VoidCallback onPressed;
+  const ChangePasswordButton({super.key, required this.passwordController, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return ElevatedButton(
+      style: ElevatedButton.styleFrom(
+        visualDensity: VisualDensity.standard,
+        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 25),
+      ),
+      onPressed: onPressed,
+      child: Text('change_password'.tr(), style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+    );
+  }
+}

mobile/lib/widgets/forms/login/email_input.dart

@@ -0,0 +1,41 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+class EmailInput extends StatelessWidget {
+  final TextEditingController controller;
+  final FocusNode? focusNode;
+  final Function()? onSubmit;
+
+  const EmailInput({super.key, required this.controller, this.focusNode, this.onSubmit});
+
+  String? _validateInput(String? email) {
+    if (email == null || email == '') return null;
+    if (email.endsWith(' ')) return 'login_form_err_trailing_whitespace'.tr();
+    if (email.startsWith(' ')) return 'login_form_err_leading_whitespace'.tr();
+    if (email.contains(' ') || !email.contains('@')) {
+      return 'login_form_err_invalid_email'.tr();
+    }
+    return null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      autofocus: true,
+      controller: controller,
+      decoration: InputDecoration(
+        labelText: 'email'.tr(),
+        border: const OutlineInputBorder(),
+        hintText: 'login_form_email_hint'.tr(),
+        hintStyle: const TextStyle(fontWeight: FontWeight.normal, fontSize: 14),
+      ),
+      validator: _validateInput,
+      autovalidateMode: AutovalidateMode.always,
+      autofillHints: const [AutofillHints.email],
+      keyboardType: TextInputType.emailAddress,
+      onFieldSubmitted: (_) => onSubmit?.call(),
+      focusNode: focusNode,
+      textInputAction: TextInputAction.next,
+    );
+  }
+}

mobile/lib/widgets/forms/login/loading_icon.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+
+class LoadingIcon extends StatelessWidget {
+  const LoadingIcon({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Padding(
+      padding: EdgeInsets.only(top: 18.0),
+      child: SizedBox(width: 24, height: 24, child: FittedBox(child: CircularProgressIndicator(strokeWidth: 2))),
+    );
+  }
+}

mobile/lib/widgets/forms/login/login_button.dart

@@ -0,0 +1,19 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class LoginButton extends ConsumerWidget {
+  final Function() onPressed;
+
+  const LoginButton({super.key, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return ElevatedButton.icon(
+      style: ElevatedButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 12)),
+      onPressed: onPressed,
+      icon: const Icon(Icons.login_rounded),
+      label: const Text("login", style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)).tr(),
+    );
+  }
+}

mobile/lib/widgets/forms/login/login_form.dart

@@ -0,0 +1,534 @@
+import 'dart:async';
+import 'dart:convert';
+import 'dart:io';
+import 'dart:math';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:crypto/crypto.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/auth.provider.dart';
+import 'package:immich_mobile/providers/background_sync.provider.dart';
+import 'package:immich_mobile/providers/backup/backup.provider.dart';
+import 'package:immich_mobile/providers/gallery_permission.provider.dart';
+import 'package:immich_mobile/providers/oauth.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/providers/websocket.provider.dart';
+import 'package:immich_mobile/repositories/local_files_manager.repository.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/provider_utils.dart';
+import 'package:immich_mobile/utils/url_helper.dart';
+import 'package:immich_mobile/utils/version_compatibility.dart';
+import 'package:immich_mobile/widgets/common/immich_logo.dart';
+import 'package:immich_mobile/widgets/common/immich_title_text.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:logging/logging.dart';
+import 'package:openapi/api.dart';
+import 'package:package_info_plus/package_info_plus.dart';
+import 'package:permission_handler/permission_handler.dart';
+
+class LoginForm extends HookConsumerWidget {
+  LoginForm({super.key});
+
+  final log = Logger('LoginForm');
+
+  String? _validateUrl(String? url) {
+    if (url == null || url.isEmpty) return null;
+
+    final parsedUrl = Uri.tryParse(url);
+    if (parsedUrl == null || !parsedUrl.isAbsolute || !parsedUrl.scheme.startsWith("http") || parsedUrl.host.isEmpty) {
+      return 'login_form_err_invalid_url'.tr();
+    }
+
+    return null;
+  }
+
+  String? _validateEmail(String? email) {
+    if (email == null || email == '') return null;
+    if (email.endsWith(' ')) return 'login_form_err_trailing_whitespace'.tr();
+    if (email.startsWith(' ')) return 'login_form_err_leading_whitespace'.tr();
+    if (email.contains(' ') || !email.contains('@')) {
+      return 'login_form_err_invalid_email'.tr();
+    }
+    return null;
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final emailController = useTextEditingController.fromValue(TextEditingValue.empty);
+    final passwordController = useTextEditingController.fromValue(TextEditingValue.empty);
+    final serverEndpointController = useTextEditingController.fromValue(TextEditingValue.empty);
+    final passwordFocusNode = useFocusNode();
+    final isOauthEnable = useState<bool>(false);
+    final isPasswordLoginEnable = useState<bool>(false);
+    final oAuthButtonLabel = useState<String>('OAuth');
+    final logoAnimationController = useAnimationController(duration: const Duration(seconds: 60))..repeat();
+    final serverInfo = ref.watch(serverInfoProvider);
+    final warningMessage = useState<String?>(null);
+    final loginFormKey = GlobalKey<FormState>();
+    final ValueNotifier<String?> serverEndpoint = useState<String?>(null);
+
+    checkVersionMismatch() async {
+      try {
+        final packageInfo = await PackageInfo.fromPlatform();
+        final appVersion = packageInfo.version;
+        final appMajorVersion = int.parse(appVersion.split('.')[0]);
+        final appMinorVersion = int.parse(appVersion.split('.')[1]);
+        final serverMajorVersion = serverInfo.serverVersion.major;
+        final serverMinorVersion = serverInfo.serverVersion.minor;
+
+        warningMessage.value = getVersionCompatibilityMessage(
+          appMajorVersion,
+          appMinorVersion,
+          serverMajorVersion,
+          serverMinorVersion,
+        );
+      } catch (error) {
+        warningMessage.value = 'Error checking version compatibility';
+      }
+    }
+
+    /// Fetch the server login credential and enables oAuth login if necessary
+    /// Returns true if successful, false otherwise
+    Future<void> getServerAuthSettings() async {
+      final sanitizeServerUrl = sanitizeUrl(serverEndpointController.text);
+      final serverUrl = punycodeEncodeUrl(sanitizeServerUrl);
+
+      // Guard empty URL
+      if (serverUrl.isEmpty) {
+        ImmichToast.show(context: context, msg: "login_form_server_empty".tr(), toastType: ToastType.error);
+      }
+
+      try {
+        final endpoint = await ref.read(authProvider.notifier).validateServerUrl(serverUrl);
+
+        // Fetch and load server config and features
+        await ref.read(serverInfoProvider.notifier).getServerInfo();
+
+        final serverInfo = ref.read(serverInfoProvider);
+        final features = serverInfo.serverFeatures;
+        final config = serverInfo.serverConfig;
+
+        isOauthEnable.value = features.oauthEnabled;
+        isPasswordLoginEnable.value = features.passwordLogin;
+        oAuthButtonLabel.value = config.oauthButtonText.isNotEmpty ? config.oauthButtonText : 'OAuth';
+
+        serverEndpoint.value = endpoint;
+      } on ApiException catch (e) {
+        ImmichToast.show(
+          context: context,
+          msg: e.message ?? 'login_form_api_exception'.tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+      } on HandshakeException {
+        ImmichToast.show(
+          context: context,
+          msg: 'login_form_handshake_exception'.tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+      } catch (e) {
+        ImmichToast.show(
+          context: context,
+          msg: 'login_form_server_error'.tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+      }
+    }
+
+    useEffect(() {
+      final serverUrl = getServerUrl();
+      if (serverUrl != null) {
+        serverEndpointController.text = serverUrl;
+      }
+      return null;
+    }, []);
+
+    populateTestLoginInfo() {
+      emailController.text = 'demo@immich.app';
+      passwordController.text = 'demo';
+      serverEndpointController.text = 'https://demo.immich.app';
+    }
+
+    populateTestLoginInfo1() {
+      emailController.text = 'testuser@email.com';
+      passwordController.text = 'password';
+      serverEndpointController.text = 'http://10.1.15.216:2283/api';
+    }
+
+    Future<void> handleSyncFlow() async {
+      final backgroundManager = ref.read(backgroundSyncProvider);
+
+      await backgroundManager.syncLocal(full: true);
+      await backgroundManager.syncRemote();
+      await backgroundManager.hashAssets();
+
+      if (Store.get(StoreKey.syncAlbums, false)) {
+        await backgroundManager.syncLinkedAlbum();
+      }
+    }
+
+    getManageMediaPermission() async {
+      final hasPermission = await ref.read(localFilesManagerRepositoryProvider).hasManageMediaPermission();
+      if (!hasPermission) {
+        await showDialog(
+          context: context,
+          builder: (BuildContext context) {
+            return AlertDialog(
+              shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
+              elevation: 5,
+              title: Text(
+                'manage_media_access_title',
+                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: context.primaryColor),
+              ).tr(),
+              content: SingleChildScrollView(
+                child: ListBody(
+                  children: [
+                    const Text('manage_media_access_subtitle', style: TextStyle(fontSize: 14)).tr(),
+                    const SizedBox(height: 4),
+                    const Text('manage_media_access_rationale', style: TextStyle(fontSize: 12)).tr(),
+                  ],
+                ),
+              ),
+              actions: [
+                TextButton(
+                  onPressed: () => Navigator.of(context).pop(),
+                  child: Text(
+                    'cancel'.tr(),
+                    style: TextStyle(fontWeight: FontWeight.w600, color: context.primaryColor),
+                  ),
+                ),
+                TextButton(
+                  onPressed: () {
+                    ref.read(localFilesManagerRepositoryProvider).requestManageMediaPermission();
+                    Navigator.of(context).pop();
+                  },
+                  child: Text(
+                    'manage_media_access_settings'.tr(),
+                    style: TextStyle(fontWeight: FontWeight.w600, color: context.primaryColor),
+                  ),
+                ),
+              ],
+            );
+          },
+        );
+      }
+    }
+
+    bool isSyncRemoteDeletionsMode() => Platform.isAndroid && Store.get(StoreKey.manageLocalMediaAndroid, false);
+
+    login() async {
+      TextInput.finishAutofillContext();
+
+      // Invalidate all api repository provider instance to take into account new access token
+      invalidateAllApiRepositoryProviders(ref);
+
+      try {
+        final result = await ref.read(authProvider.notifier).login(emailController.text, passwordController.text);
+
+        if (result.shouldChangePassword && !result.isAdmin) {
+          unawaited(context.pushRoute(const ChangePasswordRoute()));
+        } else {
+          final isBeta = Store.isBetaTimelineEnabled;
+          if (isBeta) {
+            await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
+            if (isSyncRemoteDeletionsMode()) {
+              await getManageMediaPermission();
+            }
+            unawaited(handleSyncFlow());
+            ref.read(websocketProvider.notifier).connect();
+            unawaited(context.replaceRoute(const TabShellRoute()));
+            return;
+          }
+          unawaited(context.replaceRoute(const TabControllerRoute()));
+        }
+      } catch (error) {
+        ImmichToast.show(
+          context: context,
+          msg: "login_form_failed_login".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+      }
+    }
+
+    String generateRandomString(int length) {
+      const chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
+      final random = Random.secure();
+      return String.fromCharCodes(Iterable.generate(length, (_) => chars.codeUnitAt(random.nextInt(chars.length))));
+    }
+
+    List<int> randomBytes(int length) {
+      final random = Random.secure();
+      return List<int>.generate(length, (i) => random.nextInt(256));
+    }
+
+    /// Per specification, the code verifier must be 43-128 characters long
+    /// and consist of characters [A-Z, a-z, 0-9, "-", ".", "_", "~"]
+    /// https://datatracker.ietf.org/doc/html/rfc7636#section-4.1
+    String randomCodeVerifier() {
+      return base64Url.encode(randomBytes(42));
+    }
+
+    Future<String> generatePKCECodeChallenge(String codeVerifier) async {
+      var bytes = utf8.encode(codeVerifier);
+      var digest = sha256.convert(bytes);
+      return base64Url.encode(digest.bytes).replaceAll('=', '');
+    }
+
+    oAuthLogin() async {
+      var oAuthService = ref.watch(oAuthServiceProvider);
+      String? oAuthServerUrl;
+
+      final state = generateRandomString(32);
+
+      final codeVerifier = randomCodeVerifier();
+      final codeChallenge = await generatePKCECodeChallenge(codeVerifier);
+
+      try {
+        oAuthServerUrl = await oAuthService.getOAuthServerUrl(
+          sanitizeUrl(serverEndpointController.text),
+          state,
+          codeChallenge,
+        );
+
+        // Invalidate all api repository provider instance to take into account new access token
+        invalidateAllApiRepositoryProviders(ref);
+      } catch (error, stack) {
+        log.severe('Error getting OAuth server Url: $error', stack);
+
+        ImmichToast.show(
+          context: context,
+          msg: "login_form_failed_get_oauth_server_config".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.TOP,
+        );
+        return;
+      }
+
+      if (oAuthServerUrl != null) {
+        try {
+          final loginResponseDto = await oAuthService.oAuthLogin(oAuthServerUrl, state, codeVerifier);
+
+          if (loginResponseDto == null) {
+            return;
+          }
+
+          log.info("Finished OAuth login with response: ${loginResponseDto.userEmail}");
+
+          final isSuccess = await ref
+              .watch(authProvider.notifier)
+              .saveAuthInfo(accessToken: loginResponseDto.accessToken);
+
+          if (isSuccess) {
+            final permission = ref.watch(galleryPermissionNotifier);
+            final isBeta = Store.isBetaTimelineEnabled;
+            if (!isBeta && (permission.isGranted || permission.isLimited)) {
+              unawaited(ref.watch(backupProvider.notifier).resumeBackup());
+            }
+            if (isBeta) {
+              await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
+              if (isSyncRemoteDeletionsMode()) {
+                await getManageMediaPermission();
+              }
+              unawaited(handleSyncFlow());
+              unawaited(context.replaceRoute(const TabShellRoute()));
+              return;
+            }
+            unawaited(context.replaceRoute(const TabControllerRoute()));
+          }
+        } catch (error, stack) {
+          log.severe('Error logging in with OAuth: $error', stack);
+
+          ImmichToast.show(
+            context: context,
+            msg: error.toString(),
+            toastType: ToastType.error,
+            gravity: ToastGravity.TOP,
+          );
+        } finally {}
+      } else {
+        ImmichToast.show(
+          context: context,
+          msg: "login_form_failed_get_oauth_server_disable".tr(),
+          toastType: ToastType.info,
+          gravity: ToastGravity.TOP,
+        );
+        return;
+      }
+    }
+
+    buildVersionCompatWarning() {
+      checkVersionMismatch();
+
+      if (warningMessage.value == null) {
+        return const SizedBox.shrink();
+      }
+
+      return Padding(
+        padding: const EdgeInsets.only(bottom: 8.0),
+        child: Container(
+          padding: const EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: context.isDarkTheme ? Colors.red.shade700 : Colors.red.shade100,
+            borderRadius: const BorderRadius.all(Radius.circular(8)),
+            border: Border.all(color: context.isDarkTheme ? Colors.red.shade900 : Colors.red[200]!),
+          ),
+          child: Text(warningMessage.value!, textAlign: TextAlign.center),
+        ),
+      );
+    }
+
+    final serverSelectionOrLogin = serverEndpoint.value == null
+        ? Padding(
+            padding: const EdgeInsets.only(top: ImmichSpacing.md),
+            child: Column(
+              mainAxisSize: MainAxisSize.max,
+              children: [
+                ImmichForm(
+                  submitText: 'next'.t(context: context),
+                  submitIcon: Icons.arrow_forward_rounded,
+                  onSubmit: getServerAuthSettings,
+                  child: ImmichTextInput(
+                    controller: serverEndpointController,
+                    label: 'login_form_endpoint_url'.t(context: context),
+                    hintText: 'login_form_endpoint_hint'.t(context: context),
+                    validator: _validateUrl,
+                    keyboardAction: TextInputAction.next,
+                    keyboardType: TextInputType.url,
+                    autofillHints: const [AutofillHints.url],
+                    onSubmit: (ctx, _) => ImmichForm.of(ctx).submit(),
+                  ),
+                ),
+                ImmichTextButton(
+                  labelText: 'settings'.t(context: context),
+                  icon: Icons.settings,
+                  variant: ImmichVariant.ghost,
+                  onPressed: () => context.pushRoute(const SettingsRoute()),
+                ),
+              ],
+            ),
+          )
+        : AutofillGroup(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              mainAxisSize: MainAxisSize.max,
+              children: [
+                buildVersionCompatWarning(),
+                Padding(
+                  padding: const EdgeInsets.only(bottom: ImmichSpacing.md),
+                  child: Text(
+                    sanitizeUrl(serverEndpointController.text),
+                    style: context.textTheme.displaySmall,
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+                if (isPasswordLoginEnable.value)
+                  ImmichForm(
+                    submitText: 'login'.t(context: context),
+                    submitIcon: Icons.login_rounded,
+                    onSubmit: login,
+                    child: Column(
+                      spacing: ImmichSpacing.md,
+                      children: [
+                        ImmichTextInput(
+                          controller: emailController,
+                          label: 'email'.t(context: context),
+                          hintText: 'login_form_email_hint'.t(context: context),
+                          validator: _validateEmail,
+                          keyboardAction: TextInputAction.next,
+                          keyboardType: TextInputType.emailAddress,
+                          autofillHints: const [AutofillHints.email],
+                          onSubmit: (_, _) => passwordFocusNode.requestFocus(),
+                        ),
+                        ImmichPasswordInput(
+                          controller: passwordController,
+                          focusNode: passwordFocusNode,
+                          label: 'password'.t(context: context),
+                          hintText: 'login_form_password_hint'.t(context: context),
+                          keyboardAction: TextInputAction.go,
+                          onSubmit: (ctx, _) => ImmichForm.of(ctx).submit(),
+                        ),
+                      ],
+                    ),
+                  ),
+                if (isOauthEnable.value)
+                  ImmichForm(
+                    submitText: oAuthButtonLabel.value,
+                    submitIcon: Icons.pin_outlined,
+                    onSubmit: oAuthLogin,
+                    child: isPasswordLoginEnable.value
+                        ? Padding(
+                            padding: const EdgeInsets.only(left: 18.0, right: 18.0, top: 12.0),
+                            child: Divider(color: context.isDarkTheme ? Colors.white : Colors.black, height: 5),
+                          )
+                        : const SizedBox.shrink(),
+                  ),
+                if (!isOauthEnable.value && !isPasswordLoginEnable.value)
+                  Center(child: const Text('login_disabled').tr()),
+                ImmichTextButton(
+                  labelText: 'back'.t(context: context),
+                  icon: Icons.arrow_back,
+                  variant: ImmichVariant.ghost,
+                  onPressed: () => serverEndpoint.value = null,
+                ),
+              ],
+            ),
+          );
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return SingleChildScrollView(
+          child: Center(
+            child: Container(
+              constraints: const BoxConstraints(maxWidth: 300),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  SizedBox(height: constraints.maxHeight / 5),
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [
+                      GestureDetector(
+                        onDoubleTap: () => populateTestLoginInfo(),
+                        onLongPress: () => populateTestLoginInfo1(),
+                        child: RotationTransition(
+                          turns: logoAnimationController,
+                          child: const ImmichLogo(heroTag: 'logo'),
+                        ),
+                      ),
+                      const Padding(padding: EdgeInsets.only(top: 8.0, bottom: 16), child: ImmichTitleText()),
+                    ],
+                  ),
+
+                  // Note: This used to have an AnimatedSwitcher, but was removed
+                  // because of https://github.com/flutter/flutter/issues/120874
+                  Form(key: loginFormKey, child: serverSelectionOrLogin),
+                ],
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}