Source Code added

mobile/lib/presentation/widgets/action_buttons/add_action_button.widget.dart

@@ -0,0 +1,207 @@
+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/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/unarchive_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/presentation/widgets/album/album_selector.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+
+import 'package:immich_mobile/domain/models/album/album.model.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+
+enum AddToMenuItem { album, archive, unarchive, lockedFolder }
+
+class AddActionButton extends ConsumerStatefulWidget {
+  const AddActionButton({super.key, this.originalTheme});
+
+  final ThemeData? originalTheme;
+
+  @override
+  ConsumerState<AddActionButton> createState() => _AddActionButtonState();
+}
+
+class _AddActionButtonState extends ConsumerState<AddActionButton> {
+  void _handleMenuSelection(AddToMenuItem selected) {
+    switch (selected) {
+      case AddToMenuItem.album:
+        _openAlbumSelector();
+        break;
+      case AddToMenuItem.archive:
+        performArchiveAction(context, ref, source: ActionSource.viewer);
+        break;
+      case AddToMenuItem.unarchive:
+        performUnArchiveAction(context, ref, source: ActionSource.viewer);
+        break;
+      case AddToMenuItem.lockedFolder:
+        performMoveToLockFolderAction(context, ref, source: ActionSource.viewer);
+        break;
+    }
+  }
+
+  List<Widget> _buildMenuChildren() {
+    final asset = ref.read(currentAssetNotifier);
+    if (asset == null) return [];
+
+    final user = ref.read(currentUserProvider);
+    final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
+    final isInLockedView = ref.watch(inLockedViewProvider);
+    final isArchived = asset is RemoteAsset && asset.visibility == AssetVisibility.archive;
+    final hasRemote = asset is RemoteAsset;
+    final showArchive = isOwner && !isInLockedView && hasRemote && !isArchived;
+    final showUnarchive = isOwner && !isInLockedView && hasRemote && isArchived;
+
+    return [
+      Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        child: Text("add_to_bottom_bar".tr(), style: context.textTheme.labelMedium),
+      ),
+      BaseActionButton(
+        iconData: Icons.photo_album_outlined,
+        label: "album".tr(),
+        menuItem: true,
+        onPressed: () => _handleMenuSelection(AddToMenuItem.album),
+      ),
+
+      if (isOwner) ...[
+        const Divider(),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          child: Text("move_to".tr(), style: context.textTheme.labelMedium),
+        ),
+        if (showArchive)
+          BaseActionButton(
+            iconData: Icons.archive_outlined,
+            label: "archive".tr(),
+            menuItem: true,
+            onPressed: () => _handleMenuSelection(AddToMenuItem.archive),
+          ),
+        if (showUnarchive)
+          BaseActionButton(
+            iconData: Icons.unarchive_outlined,
+            label: "unarchive".tr(),
+            menuItem: true,
+            onPressed: () => _handleMenuSelection(AddToMenuItem.unarchive),
+          ),
+        BaseActionButton(
+          iconData: Icons.lock_outline,
+          label: "locked_folder".tr(),
+          menuItem: true,
+          onPressed: () => _handleMenuSelection(AddToMenuItem.lockedFolder),
+        ),
+      ],
+    ];
+  }
+
+  void _openAlbumSelector() {
+    final currentAsset = ref.read(currentAssetNotifier);
+    if (currentAsset == null) {
+      ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
+      return;
+    }
+
+    final List<Widget> slivers = [
+      const CreateAlbumButton(),
+      AlbumSelector(onAlbumSelected: (album) => _addCurrentAssetToAlbum(album)),
+    ];
+
+    showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      backgroundColor: Colors.transparent,
+      builder: (_) {
+        return BaseBottomSheet(
+          actions: const [],
+          slivers: slivers,
+          initialChildSize: 0.6,
+          minChildSize: 0.3,
+          maxChildSize: 0.95,
+          expand: false,
+          backgroundColor: context.isDarkTheme ? Colors.black : Colors.white,
+        );
+      },
+    );
+  }
+
+  Future<void> _addCurrentAssetToAlbum(RemoteAlbum album) async {
+    final latest = ref.read(currentAssetNotifier);
+
+    if (latest == null) {
+      ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
+      return;
+    }
+
+    final addedCount = await ref.read(remoteAlbumProvider.notifier).addAssets(album.id, [latest.remoteId!]);
+
+    if (!context.mounted) {
+      return;
+    }
+
+    if (addedCount == 0) {
+      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}),
+      );
+
+      // Invalidate using the asset's remote ID to refresh the "Appears in" list
+      ref.invalidate(albumsContainingAssetProvider(latest.remoteId!));
+    }
+
+    if (!context.mounted) {
+      return;
+    }
+    await Navigator.of(context).maybePop();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final themeData = widget.originalTheme ?? context.themeData;
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(themeData.scaffoldBackgroundColor),
+        surfaceTintColor: const WidgetStatePropertyAll(Colors.grey),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 6)),
+      ),
+      menuChildren: widget.originalTheme != null
+          ? [
+              Theme(
+                data: widget.originalTheme!,
+                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: _buildMenuChildren()),
+              ),
+            ]
+          : _buildMenuChildren(),
+      builder: (context, controller, child) {
+        return BaseActionButton(
+          iconData: Icons.add,
+          label: "add_to_bottom_bar".tr(),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
+        );
+      },
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/advanced_info_action_button.widget.dart

@@ -0,0 +1,36 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+
+class AdvancedInfoActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const AdvancedInfoActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    unawaited(ref.read(actionProvider.notifier).troubleshoot(source, context));
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      maxWidth: 115.0,
+      iconData: Icons.help_outline_rounded,
+      label: "troubleshoot".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/archive_action_button.widget.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+// used to allow performing archive action from different sources  (without duplicating code)
+Future<void> performArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
+  if (!context.mounted) return;
+
+  final result = await ref.read(actionProvider.notifier).archive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
+  if (source == ActionSource.viewer) {
+    EventStream.shared.emit(const ViewerReloadAssetEvent());
+  }
+
+  final successMessage = 'archive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+  if (context.mounted) {
+    ImmichToast.show(
+      context: context,
+      msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+      gravity: ToastGravity.BOTTOM,
+      toastType: result.success ? ToastType.success : ToastType.error,
+    );
+  }
+}
+
+class ArchiveActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const ArchiveActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  Future<void> _onTap(BuildContext context, WidgetRef ref) async {
+    await performArchiveAction(context, ref, source: source);
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.archive_outlined,
+      label: "to_archive".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/base_action_button.widget.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class BaseActionButton extends ConsumerWidget {
+  const BaseActionButton({
+    super.key,
+    required this.label,
+    required this.iconData,
+    this.iconColor,
+    this.onPressed,
+    this.onLongPressed,
+    this.maxWidth = 90.0,
+    this.minWidth,
+    this.iconOnly = false,
+    this.menuItem = false,
+  });
+
+  final String label;
+  final IconData iconData;
+  final Color? iconColor;
+  final double maxWidth;
+  final double? minWidth;
+
+  /// When true, renders only an IconButton without text label
+  final bool iconOnly;
+
+  /// When true, renders as a MenuItemButton for use in MenuAnchor menus
+  final bool menuItem;
+  final void Function()? onPressed;
+  final void Function()? onLongPressed;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final miniWidth = minWidth ?? (context.isMobile ? context.width / 4.5 : 75.0);
+    final iconTheme = IconTheme.of(context);
+    final iconSize = iconTheme.size ?? 24.0;
+    final iconColor = this.iconColor ?? iconTheme.color ?? context.themeData.iconTheme.color;
+    final textColor = context.themeData.textTheme.labelLarge?.color;
+
+    if (iconOnly) {
+      return IconButton(
+        onPressed: onPressed,
+        icon: Icon(iconData, size: iconSize, color: iconColor),
+      );
+    }
+
+    if (menuItem) {
+      final theme = context.themeData;
+      final effectiveIconColor = iconColor ?? theme.iconTheme.color ?? theme.colorScheme.onSurfaceVariant;
+
+      return MenuItemButton(
+        style: MenuItemButton.styleFrom(alignment: Alignment.centerLeft, padding: const EdgeInsets.all(16)),
+        leadingIcon: Icon(iconData, color: effectiveIconColor),
+        onPressed: onPressed,
+        child: Text(label, style: theme.textTheme.labelLarge?.copyWith(fontSize: 16, color: iconColor)),
+      );
+    }
+
+    return ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: maxWidth),
+      child: MaterialButton(
+        padding: const EdgeInsets.all(10),
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
+        textColor: textColor,
+        onPressed: onPressed,
+        onLongPress: onLongPressed,
+        minWidth: miniWidth,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Icon(iconData, size: iconSize, color: iconColor),
+            const SizedBox(height: 8),
+            Text(
+              label,
+              style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400),
+              maxLines: 3,
+              textAlign: TextAlign.center,
+              softWrap: true,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/cast_action_button.widget.dart

@@ -0,0 +1,30 @@
+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/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
+
+class CastActionButton extends ConsumerWidget {
+  const CastActionButton({super.key, this.iconOnly = false, this.menuItem = false});
+
+  final bool iconOnly;
+  final bool menuItem;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+
+    return BaseActionButton(
+      iconData: isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded,
+      iconColor: isCasting ? context.primaryColor : null, // null = default color
+      label: "cast".t(context: context),
+      onPressed: () {
+        showDialog(context: context, builder: (context) => const CastDialog());
+      },
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/delete_action_button.widget.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/events.model.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/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+/// This delete action has the following behavior:
+/// - Set the deletedAt information, put the asset in the trash in the server
+/// which will be permanently deleted after the number of days configure by the admin
+/// - Prompt to delete the asset locally
+class DeleteActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool showConfirmation;
+  final bool iconOnly;
+  final bool menuItem;
+  const DeleteActionButton({
+    super.key,
+    required this.source,
+    this.showConfirmation = false,
+    this.iconOnly = false,
+    this.menuItem = false,
+  });
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    if (showConfirmation) {
+      final confirm = await showDialog<bool>(
+        context: context,
+        builder: (context) => AlertDialog(
+          title: Text('delete'.t(context: context)),
+          content: Text('delete_action_confirmation_message'.t(context: context)),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.of(context).pop(false),
+              child: Text('cancel'.t(context: context)),
+            ),
+            TextButton(
+              onPressed: () => Navigator.of(context).pop(true),
+              child: Text(
+                'confirm'.t(context: context),
+                style: TextStyle(color: context.colorScheme.error),
+              ),
+            ),
+          ],
+        ),
+      );
+      if (confirm != true) return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    if (source == ActionSource.viewer) {
+      EventStream.shared.emit(const ViewerReloadAssetEvent());
+    }
+
+    final successMessage = 'delete_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      maxWidth: 110.0,
+      iconData: Icons.delete_sweep_outlined,
+      label: "delete".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/delete_local_action_button.widget.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+/// This delete action has the following behavior:
+/// - Prompt to delete the asset locally
+class DeleteLocalActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const DeleteLocalActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).deleteLocal(source, context);
+    if (result == null) {
+      return;
+    }
+
+    ref.read(multiSelectProvider.notifier).reset();
+
+    if (source == ActionSource.viewer) {
+      EventStream.shared.emit(const ViewerReloadAssetEvent());
+    }
+
+    if (result.count == 0) {
+      return;
+    }
+
+    final successMessage = 'delete_local_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      maxWidth: 95.0,
+      iconData: Icons.no_cell_outlined,
+      label: "control_bottom_app_bar_delete_from_local".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+/// This delete action has the following behavior:
+/// - Delete permanently on the server
+/// - Prompt to delete the asset locally
+class DeletePermanentActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const DeletePermanentActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    if (source == ActionSource.viewer) {
+      EventStream.shared.emit(const ViewerReloadAssetEvent());
+    }
+
+    final successMessage = 'delete_permanently_action_prompt'.t(
+      context: context,
+      args: {'count': result.count.toString()},
+    );
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      maxWidth: 110.0,
+      iconData: Icons.delete_forever,
+      label: "delete_permanently".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/delete_trash_action_button.widget.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+/// This delete action has the following behavior:
+/// - Delete permanently on the server
+/// - Prompt to delete the asset locally
+///
+/// This action is used when the asset is selected in multi-selection mode in the trash page
+class DeleteTrashActionButton extends ConsumerWidget {
+  final ActionSource source;
+
+  const DeleteTrashActionButton({super.key, required this.source});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'assets_permanently_deleted_count'.t(
+      context: context,
+      args: {'count': result.count.toString()},
+    );
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return TextButton.icon(
+      icon: Icon(Icons.delete_forever, color: Colors.red[400]),
+      label: Text(
+        "delete".t(context: context),
+        style: TextStyle(fontSize: 14, color: Colors.red[400], fontWeight: FontWeight.bold),
+      ),
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/download_action_button.widget.dart

@@ -0,0 +1,47 @@
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/utils/background_sync.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/background_sync.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+
+class DownloadActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+  const DownloadActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref, BackgroundSyncManager backgroundSyncManager) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    try {
+      await ref.read(actionProvider.notifier).downloadAll(source);
+
+      Future.delayed(const Duration(seconds: 1), () async {
+        await backgroundSyncManager.syncLocal();
+        await backgroundSyncManager.hashAssets();
+      });
+    } finally {
+      ref.read(multiSelectProvider.notifier).reset();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final backgroundManager = ref.watch(backgroundSyncProvider);
+
+    return BaseActionButton(
+      iconData: Icons.download,
+      maxWidth: 95,
+      label: "download".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref, backgroundManager),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/download_status_floating_button.widget.dart

@@ -0,0 +1,64 @@
+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/asset_viewer/download.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class DownloadStatusFloatingButton extends ConsumerWidget {
+  const DownloadStatusFloatingButton({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final shouldShow = ref.watch(downloadStateProvider.select((state) => state.showProgress));
+    final itemCount = ref.watch(downloadStateProvider.select((state) => state.taskProgress.length));
+    final isDownloading = ref
+        .watch(downloadStateProvider.select((state) => state.taskProgress))
+        .values
+        .where((element) => element.progress != 1)
+        .isNotEmpty;
+
+    return shouldShow
+        ? Badge.count(
+            count: itemCount,
+            textColor: context.colorScheme.onPrimary,
+            backgroundColor: context.colorScheme.primary,
+            child: FloatingActionButton(
+              shape: RoundedRectangleBorder(
+                borderRadius: const BorderRadius.all(Radius.circular(20)),
+                side: BorderSide(color: context.colorScheme.outlineVariant, width: 1),
+              ),
+              backgroundColor: context.isDarkTheme
+                  ? context.colorScheme.surfaceContainer
+                  : context.colorScheme.surfaceBright,
+              elevation: 2,
+              onPressed: () {
+                context.pushRoute(const DownloadInfoRoute());
+              },
+              child: Stack(
+                alignment: AlignmentDirectional.center,
+                children: [
+                  isDownloading
+                      ? Icon(Icons.downloading_rounded, color: context.colorScheme.primary, size: 28)
+                      : Icon(
+                          Icons.download_done,
+                          color: context.isDarkTheme ? Colors.green[200] : Colors.green[400],
+                          size: 28,
+                        ),
+                  if (isDownloading)
+                    const SizedBox(
+                      height: 31,
+                      width: 31,
+                      child: CircularProgressIndicator(
+                        strokeWidth: 2,
+                        backgroundColor: Colors.transparent,
+                        value: null, // Indeterminate progress
+                      ),
+                    ),
+                ],
+              ),
+            ),
+          )
+        : const SizedBox.shrink();
+  }
+}

mobile/lib/presentation/widgets/action_buttons/edit_date_time_action_button.widget.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class EditDateTimeActionButton extends ConsumerWidget {
+  final ActionSource source;
+
+  const EditDateTimeActionButton({super.key, required this.source});
+
+  _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).editDateTime(source, context);
+    if (result == null) {
+      return;
+    }
+
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'edit_date_and_time_action_prompt'.t(
+      context: context,
+      args: {'count': result.count.toString()},
+    );
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      maxWidth: 95.0,
+      iconData: Icons.edit_calendar_outlined,
+      label: "control_bottom_app_bar_edit_time".t(context: context),
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/edit_image_action_button.widget.dart

@@ -0,0 +1,32 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class EditImageActionButton extends ConsumerWidget {
+  const EditImageActionButton({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currentAsset = ref.watch(currentAssetNotifier);
+
+    onPress() {
+      if (currentAsset == null) {
+        return;
+      }
+
+      final image = Image(image: getFullImageProvider(currentAsset));
+      context.pushRoute(DriftEditImageRoute(asset: currentAsset, image: image, isEdited: false));
+    }
+
+    return BaseActionButton(
+      iconData: Icons.tune,
+      label: "edit".t(context: context),
+      onPressed: onPress,
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/edit_location_action_button.widget.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class EditLocationActionButton extends ConsumerWidget {
+  final ActionSource source;
+
+  const EditLocationActionButton({super.key, required this.source});
+
+  _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).editLocation(source, context);
+    if (result == null) {
+      return;
+    }
+
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'edit_location_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.edit_location_alt_outlined,
+      label: "control_bottom_app_bar_edit_location".t(context: context),
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/favorite_action_button.widget.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class FavoriteActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const FavoriteActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).favorite(source);
+
+    if (source == ActionSource.viewer) {
+      return;
+    }
+
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'favorite_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.favorite_border_rounded,
+      label: "favorite".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/like_activity_action_button.widget.dart

@@ -0,0 +1,68 @@
+import 'package:collection/collection.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/extensions/translate_extensions.dart';
+import 'package:immich_mobile/models/activities/activity.model.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/activity.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+
+class LikeActivityActionButton extends ConsumerWidget {
+  const LikeActivityActionButton({super.key, this.iconOnly = false, this.menuItem = false});
+
+  final bool iconOnly;
+  final bool menuItem;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final album = ref.watch(currentRemoteAlbumProvider);
+    final asset = ref.watch(currentAssetNotifier) as RemoteAsset?;
+    final user = ref.watch(currentUserProvider);
+
+    final activities = ref.watch(albumActivityProvider(album?.id ?? "", asset?.id));
+
+    onTap(Activity? liked) async {
+      if (user == null) {
+        return;
+      }
+
+      if (liked != null) {
+        await ref.read(albumActivityProvider(album?.id ?? "", asset?.id).notifier).removeActivity(liked.id);
+      } else {
+        await ref.read(albumActivityProvider(album?.id ?? "", asset?.id).notifier).addLike();
+      }
+
+      ref.invalidate(albumActivityProvider(album?.id ?? "", asset?.id));
+    }
+
+    return activities.when(
+      data: (data) {
+        final liked = data.firstWhereOrNull(
+          (a) => a.type == ActivityType.like && a.user.id == user?.id && a.assetId == asset?.id,
+        );
+
+        return BaseActionButton(
+          maxWidth: 60,
+          iconData: liked != null ? Icons.thumb_up : Icons.thumb_up_off_alt,
+          label: "like".t(context: context),
+          onPressed: () => onTap(liked),
+          iconOnly: iconOnly,
+          menuItem: menuItem,
+        );
+      },
+
+      // default to empty heart during loading
+      loading: () => BaseActionButton(
+        iconData: Icons.thumb_up_off_alt,
+        label: "like".t(context: context),
+        iconOnly: iconOnly,
+        menuItem: menuItem,
+      ),
+      error: (error, stack) => Text('error_saving_image'.tr(args: [error.toString()])),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
+
+class MotionPhotoActionButton extends ConsumerWidget {
+  const MotionPhotoActionButton({super.key, this.iconOnly = false, this.menuItem = false});
+
+  final bool iconOnly;
+  final bool menuItem;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isPlaying = ref.watch(isPlayingMotionVideoProvider);
+
+    return BaseActionButton(
+      iconData: isPlaying ? Icons.motion_photos_pause_outlined : Icons.play_circle_outline_rounded,
+      label: "play_motion_photo".t(context: context),
+      onPressed: ref.read(isPlayingMotionVideoProvider.notifier).toggle,
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+// Reusable helper: move to locked folder from any source (e.g called from menu)
+Future<void> performMoveToLockFolderAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
+  if (!context.mounted) return;
+
+  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
+  if (source == ActionSource.viewer) {
+    EventStream.shared.emit(const ViewerReloadAssetEvent());
+  }
+
+  final successMessage = 'move_to_lock_folder_action_prompt'.t(
+    context: context,
+    args: {'count': result.count.toString()},
+  );
+
+  if (context.mounted) {
+    ImmichToast.show(
+      context: context,
+      msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+      gravity: ToastGravity.BOTTOM,
+      toastType: result.success ? ToastType.success : ToastType.error,
+    );
+  }
+}
+
+class MoveToLockFolderActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const MoveToLockFolderActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  Future<void> _onTap(BuildContext context, WidgetRef ref) async {
+    await performMoveToLockFolderAction(context, ref, source: source);
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      maxWidth: 115.0,
+      iconData: Icons.lock_outline_rounded,
+      label: "move_to_locked_folder".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class RemoveFromAlbumActionButton extends ConsumerWidget {
+  final String albumId;
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const RemoveFromAlbumActionButton({
+    super.key,
+    required this.albumId,
+    required this.source,
+    this.iconOnly = false,
+    this.menuItem = false,
+  });
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    if (source == ActionSource.viewer) {
+      EventStream.shared.emit(const ViewerReloadAssetEvent());
+    }
+
+    final successMessage = 'remove_from_album_action_prompt'.t(
+      context: context,
+      args: {'count': result.count.toString()},
+    );
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.remove_circle_outline,
+      label: "remove_from_album".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+      maxWidth: 100,
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/remove_from_lock_folder_action_button.widget.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class RemoveFromLockFolderActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const RemoveFromLockFolderActionButton({
+    super.key,
+    required this.source,
+    this.iconOnly = false,
+    this.menuItem = false,
+  });
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).removeFromLockFolder(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'remove_from_lock_folder_action_prompt'.t(
+      context: context,
+      args: {'count': result.count.toString()},
+    );
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      maxWidth: 100.0,
+      iconData: Icons.lock_open_rounded,
+      label: "remove_from_locked_folder".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/restore_trash_action_button.widget.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class RestoreTrashActionButton extends ConsumerWidget {
+  final ActionSource source;
+
+  const RestoreTrashActionButton({super.key, required this.source});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).restoreTrash(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'assets_restored_count'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return TextButton.icon(
+      icon: const Icon(Icons.history_rounded),
+      label: Text('restore'.t(), style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/share_action_button.widget.dart

@@ -0,0 +1,84 @@
+import 'dart:io';
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class _SharePreparingDialog extends StatelessWidget {
+  const _SharePreparingDialog();
+
+  @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()),
+        ],
+      ),
+    );
+  }
+}
+
+class ShareActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const ShareActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    await showDialog(
+      context: context,
+      builder: (BuildContext buildContext) {
+        ref.read(actionProvider.notifier).shareAssets(source, context).then((ActionResult result) {
+          ref.read(multiSelectProvider.notifier).reset();
+
+          if (!context.mounted) {
+            return;
+          }
+
+          if (!result.success) {
+            ImmichToast.show(
+              context: context,
+              msg: 'scaffold_body_error_occurred'.t(context: context),
+              gravity: ToastGravity.BOTTOM,
+              toastType: ToastType.error,
+            );
+          }
+
+          buildContext.pop();
+        });
+
+        // show a loading spinner with a "Preparing" message
+        return const _SharePreparingDialog();
+      },
+      barrierDismissible: false,
+      useRootNavigator: false,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Platform.isAndroid ? Icons.share_rounded : Icons.ios_share_rounded,
+      label: 'share'.t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/share_link_action_button.widget.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+
+class ShareLinkActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const ShareLinkActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    await ref.read(actionProvider.notifier).shareLink(source, context);
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.link_rounded,
+      label: "share_link".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/similar_photos_action_button.widget.dart

@@ -0,0 +1,56 @@
+import 'dart:async';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/models/search/search_filter.model.dart';
+import 'package:immich_mobile/presentation/pages/search/paginated_search.provider.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class SimilarPhotosActionButton extends ConsumerWidget {
+  final String assetId;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const SimilarPhotosActionButton({super.key, required this.assetId, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    ref.invalidate(assetViewerProvider);
+    ref
+        .read(searchPreFilterProvider.notifier)
+        .setFilter(
+          SearchFilter(
+            assetId: assetId,
+            people: {},
+            location: SearchLocationFilter(),
+            camera: SearchCameraFilter(),
+            date: SearchDateFilter(),
+            display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
+            rating: SearchRatingFilter(),
+            mediaType: AssetType.image,
+          ),
+        );
+
+    unawaited(context.navigateTo(const DriftSearchRoute()));
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.compare,
+      label: "view_similar_photos".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+      maxWidth: 100,
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/stack_action_button.widget.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class StackActionButton extends ConsumerWidget {
+  final ActionSource source;
+
+  const StackActionButton({super.key, required this.source});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final user = ref.watch(currentUserProvider);
+    if (user == null) {
+      throw Exception('User must be logged in to access stack action');
+    }
+
+    final result = await ref.read(actionProvider.notifier).stack(user.id, source);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'stack_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.filter_none_rounded,
+      label: "stack".t(context: context),
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/trash_action_button.widget.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+/// This delete action has the following behavior:
+/// - Set the deletedAt information, put the asset in the trash in the server
+/// which will be permanently deleted after the number of days configure by the admin
+class TrashActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const TrashActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).trash(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    if (source == ActionSource.viewer) {
+      EventStream.shared.emit(const ViewerReloadAssetEvent());
+    }
+
+    final successMessage = 'trash_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      maxWidth: 85.0,
+      iconData: Icons.delete_outline_rounded,
+      label: "control_bottom_app_bar_trash_from_immich".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/unarchive_action_button.widget.dart

@@ -0,0 +1,59 @@
+// dart
+// File: `lib/presentation/widgets/action_buttons/unarchive_action_button.widget.dart`
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+
+// used to allow performing unarchive action from different sources (without duplicating code)
+Future<void> performUnArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
+  if (!context.mounted) return;
+
+  final result = await ref.read(actionProvider.notifier).unArchive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
+  if (source == ActionSource.viewer) {
+    EventStream.shared.emit(const ViewerReloadAssetEvent());
+  }
+
+  final successMessage = 'unarchive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+  if (context.mounted) {
+    ImmichToast.show(
+      context: context,
+      msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+      gravity: ToastGravity.BOTTOM,
+      toastType: result.success ? ToastType.success : ToastType.error,
+    );
+  }
+}
+
+class UnArchiveActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const UnArchiveActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  Future<void> _onTap(BuildContext context, WidgetRef ref) async {
+    await performUnArchiveAction(context, ref, source: source);
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.unarchive_outlined,
+      label: "unarchive".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class UnFavoriteActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const UnFavoriteActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).unFavorite(source);
+
+    if (source == ActionSource.viewer) {
+      return;
+    }
+
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'unfavorite_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.favorite_rounded,
+      label: "unfavorite".t(context: context),
+      onPressed: () => _onTap(context, ref),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/unstack_action_button.widget.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class UnStackActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const UnStackActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).unStack(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
+    final successMessage = 'unstack_action_prompt'.t(context: context, args: {'count': result.count.toString()});
+
+    if (context.mounted) {
+      ImmichToast.show(
+        context: context,
+        msg: result.success ? successMessage : 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: result.success ? ToastType.success : ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.layers_clear_outlined,
+      label: "unstack".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/upload_action_button.widget.dart

@@ -0,0 +1,112 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class UploadActionButton extends ConsumerWidget {
+  final ActionSource source;
+  final bool iconOnly;
+  final bool menuItem;
+
+  const UploadActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    final isTimeline = source == ActionSource.timeline;
+    List<LocalAsset>? assets;
+
+    if (source == ActionSource.timeline) {
+      assets = ref.read(multiSelectProvider).selectedAssets.whereType<LocalAsset>().toList();
+      if (assets.isEmpty) {
+        return;
+      }
+      ref.read(multiSelectProvider.notifier).reset();
+    } else {
+      unawaited(
+        showDialog(
+          context: context,
+          barrierDismissible: false,
+          builder: (dialogContext) => const _UploadProgressDialog(),
+        ),
+      );
+    }
+
+    final result = await ref.read(actionProvider.notifier).upload(source, assets: assets);
+
+    if (!isTimeline && context.mounted) {
+      Navigator.of(context, rootNavigator: true).pop();
+    }
+
+    if (context.mounted && !result.success) {
+      ImmichToast.show(
+        context: context,
+        msg: 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.backup_outlined,
+      label: "upload".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+    );
+  }
+}
+
+class _UploadProgressDialog extends ConsumerWidget {
+  const _UploadProgressDialog();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final progressMap = ref.watch(assetUploadProgressProvider);
+
+    // Calculate overall progress from all assets
+    final values = progressMap.values.where((v) => v >= 0).toList();
+    final progress = values.isEmpty ? 0.0 : values.reduce((a, b) => a + b) / values.length;
+    final hasError = progressMap.values.any((v) => v < 0);
+    final percentage = (progress * 100).toInt();
+
+    return AlertDialog(
+      title: Text('uploading'.t(context: context)),
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (hasError)
+            const Icon(Icons.error_outline, color: Colors.red, size: 48)
+          else
+            CircularProgressIndicator(value: progress > 0 ? progress : null),
+          const SizedBox(height: 16),
+          Text(hasError ? 'Error' : '$percentage%'),
+        ],
+      ),
+      actions: [
+        ImmichTextButton(
+          onPressed: () {
+            ref.read(manualUploadCancelTokenProvider)?.cancel();
+            Navigator.of(context).pop();
+          },
+          labelText: 'cancel'.t(context: context),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,860 @@
+import 'dart:async';
+import 'dart:math';
+
+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/album/album.model.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/theme_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/models/albums/album_search.model.dart';
+import 'package:immich_mobile/presentation/widgets/album/album_tile.dart';
+import 'package:immich_mobile/presentation/widgets/album/new_album_name_modal.widget.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.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/services/app_settings.service.dart';
+import 'package:immich_mobile/utils/album_filter.utils.dart';
+import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_mobile/widgets/common/search_field.dart';
+import 'package:sliver_tools/sliver_tools.dart';
+
+typedef AlbumSelectorCallback = void Function(RemoteAlbum album);
+
+class AlbumSelector extends ConsumerStatefulWidget {
+  final AlbumSelectorCallback onAlbumSelected;
+  final Function? onKeyboardExpanded;
+
+  const AlbumSelector({super.key, required this.onAlbumSelected, this.onKeyboardExpanded});
+
+  @override
+  ConsumerState<AlbumSelector> createState() => _AlbumSelectorState();
+}
+
+class _AlbumSelectorState extends ConsumerState<AlbumSelector> {
+  bool isGrid = false;
+  final searchController = TextEditingController();
+  final menuController = MenuController();
+  final searchFocusNode = FocusNode();
+  List<RemoteAlbum> sortedAlbums = [];
+  List<RemoteAlbum> shownAlbums = [];
+
+  AlbumFilter filter = AlbumFilter(query: "", mode: QuickFilterMode.all);
+  AlbumSort sort = AlbumSort(mode: AlbumSortMode.lastModified, isReverse: true);
+
+  @override
+  void initState() {
+    super.initState();
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      final appSettings = ref.read(appSettingsServiceProvider);
+      final savedSortMode = appSettings.getSetting(AppSettingsEnum.selectedAlbumSortOrder);
+      final savedIsReverse = appSettings.getSetting(AppSettingsEnum.selectedAlbumSortReverse);
+      final savedIsGrid = appSettings.getSetting(AppSettingsEnum.albumGridView);
+
+      final albumSortMode = AlbumSortMode.values.firstWhere(
+        (e) => e.storeIndex == savedSortMode,
+        orElse: () => AlbumSortMode.lastModified,
+      );
+
+      setState(() {
+        sort = AlbumSort(mode: albumSortMode, isReverse: savedIsReverse);
+        isGrid = savedIsGrid;
+      });
+
+      ref.read(remoteAlbumProvider.notifier).refresh();
+    });
+
+    searchController.addListener(() {
+      onSearch(searchController.text, filter.mode);
+    });
+
+    searchFocusNode.addListener(() {
+      if (searchFocusNode.hasFocus) {
+        widget.onKeyboardExpanded?.call();
+      }
+    });
+  }
+
+  void onSearch(String searchTerm, QuickFilterMode filterMode) {
+    final userId = ref.watch(currentUserProvider)?.id;
+    filter = filter.copyWith(query: searchTerm, userId: userId, mode: filterMode);
+
+    filterAlbums();
+  }
+
+  Future<void> onRefresh() async {
+    await ref.read(remoteAlbumProvider.notifier).refresh();
+  }
+
+  void toggleViewMode() {
+    setState(() {
+      isGrid = !isGrid;
+    });
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.albumGridView, isGrid);
+  }
+
+  void changeFilter(QuickFilterMode mode) {
+    setState(() {
+      filter = filter.copyWith(mode: mode);
+    });
+
+    filterAlbums();
+  }
+
+  Future<void> changeSort(AlbumSort sort) async {
+    setState(() {
+      this.sort = sort;
+    });
+
+    final appSettings = ref.read(appSettingsServiceProvider);
+    await appSettings.setSetting(AppSettingsEnum.selectedAlbumSortOrder, sort.mode.storeIndex);
+    await appSettings.setSetting(AppSettingsEnum.selectedAlbumSortReverse, sort.isReverse);
+
+    await sortAlbums();
+  }
+
+  void clearSearch() {
+    setState(() {
+      filter = filter.copyWith(mode: QuickFilterMode.all, query: null);
+      searchController.clear();
+    });
+
+    filterAlbums();
+  }
+
+  Future<void> sortAlbums() async {
+    final sorted = await ref
+        .read(remoteAlbumProvider.notifier)
+        .sortAlbums(ref.read(remoteAlbumProvider).albums, sort.mode, isReverse: sort.isReverse);
+
+    if (!mounted) {
+      return;
+    }
+
+    setState(() {
+      sortedAlbums = sorted;
+    });
+
+    // we need to re-filter the albums after sorting
+    // so shownAlbums gets updated
+    unawaited(filterAlbums());
+  }
+
+  Future<void> filterAlbums() async {
+    if (filter.query == null) {
+      if (!mounted) {
+        return;
+      }
+
+      setState(() {
+        shownAlbums = sortedAlbums;
+      });
+
+      return;
+    }
+
+    final filteredAlbums = ref
+        .read(remoteAlbumProvider.notifier)
+        .searchAlbums(sortedAlbums, filter.query!, filter.userId, filter.mode);
+
+    if (!mounted) {
+      return;
+    }
+
+    setState(() {
+      shownAlbums = filteredAlbums;
+    });
+  }
+
+  @override
+  void dispose() {
+    searchController.dispose();
+    searchFocusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final userId = ref.watch(currentUserProvider)?.id;
+
+    // refilter and sort when albums change
+    ref.listen(remoteAlbumProvider.select((state) => state.albums), (_, _) async {
+      await sortAlbums();
+    });
+
+    return PopScope(
+      onPopInvokedWithResult: (didPop, _) {
+        menuController.close();
+      },
+      child: MultiSliver(
+        children: [
+          _SearchBar(
+            searchController: searchController,
+            searchFocusNode: searchFocusNode,
+            onSearch: onSearch,
+            filterMode: filter.mode,
+            onClearSearch: clearSearch,
+          ),
+          _QuickFilterButtonRow(
+            filterMode: filter.mode,
+            onChangeFilter: changeFilter,
+            onSearch: onSearch,
+            searchController: searchController,
+          ),
+          _QuickSortAndViewMode(
+            isGrid: isGrid,
+            onToggleViewMode: toggleViewMode,
+            onSortChanged: changeSort,
+            controller: menuController,
+            currentSortMode: sort.mode,
+            currentIsReverse: sort.isReverse,
+          ),
+          isGrid
+              ? _AlbumGrid(albums: shownAlbums, userId: userId, onAlbumSelected: widget.onAlbumSelected)
+              : _AlbumList(albums: shownAlbums, userId: userId, onAlbumSelected: widget.onAlbumSelected),
+        ],
+      ),
+    );
+  }
+}
+
+class _SortButton extends ConsumerStatefulWidget {
+  const _SortButton(
+    this.onSortChanged, {
+    required this.initialSortMode,
+    required this.initialIsReverse,
+    this.controller,
+  });
+
+  final Future<void> Function(AlbumSort) onSortChanged;
+  final MenuController? controller;
+  final AlbumSortMode initialSortMode;
+  final bool initialIsReverse;
+
+  @override
+  ConsumerState<_SortButton> createState() => _SortButtonState();
+}
+
+class _SortButtonState extends ConsumerState<_SortButton> {
+  late AlbumSortMode albumSortOption;
+  late bool albumSortIsReverse;
+  bool isSorting = false;
+
+  @override
+  void initState() {
+    super.initState();
+    albumSortOption = widget.initialSortMode;
+    albumSortIsReverse = widget.initialIsReverse;
+  }
+
+  @override
+  void didUpdateWidget(_SortButton oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initialSortMode != widget.initialSortMode || oldWidget.initialIsReverse != widget.initialIsReverse) {
+      setState(() {
+        albumSortOption = widget.initialSortMode;
+        albumSortIsReverse = widget.initialIsReverse;
+      });
+    }
+  }
+
+  Future<void> onMenuTapped(AlbumSortMode sortMode) async {
+    final selected = albumSortOption == sortMode;
+    // Switch direction
+    if (selected) {
+      setState(() {
+        albumSortIsReverse = !albumSortIsReverse;
+        isSorting = true;
+      });
+    } else {
+      setState(() {
+        albumSortOption = sortMode;
+        isSorting = true;
+      });
+    }
+
+    await widget.onSortChanged.call(AlbumSort(mode: albumSortOption, isReverse: albumSortIsReverse));
+
+    setState(() {
+      isSorting = false;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MenuAnchor(
+      controller: widget.controller,
+      style: MenuStyle(
+        elevation: const WidgetStatePropertyAll(1),
+        shape: WidgetStateProperty.all(
+          const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(24))),
+        ),
+        padding: const WidgetStatePropertyAll(EdgeInsets.all(4)),
+      ),
+      consumeOutsideTap: true,
+      menuChildren: AlbumSortMode.values
+          .map(
+            (sortMode) => MenuItemButton(
+              leadingIcon: albumSortOption == sortMode
+                  ? albumSortIsReverse
+                        ? Icon(
+                            Icons.keyboard_arrow_down,
+                            color: albumSortOption == sortMode
+                                ? context.colorScheme.onPrimary
+                                : context.colorScheme.onSurface,
+                          )
+                        : Icon(
+                            Icons.keyboard_arrow_up_rounded,
+                            color: albumSortOption == sortMode
+                                ? context.colorScheme.onPrimary
+                                : context.colorScheme.onSurface,
+                          )
+                  : const Icon(Icons.abc, color: Colors.transparent),
+              onPressed: () => onMenuTapped(sortMode),
+              style: ButtonStyle(
+                padding: WidgetStateProperty.all(const EdgeInsets.fromLTRB(12, 12, 24, 12)),
+                backgroundColor: WidgetStateProperty.all(
+                  albumSortOption == sortMode ? context.colorScheme.primary : Colors.transparent,
+                ),
+                shape: WidgetStateProperty.all(
+                  const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+                ),
+              ),
+              child: Text(
+                sortMode.label.t(context: context),
+                style: context.textTheme.labelLarge?.copyWith(
+                  color: albumSortOption == sortMode
+                      ? context.colorScheme.onPrimary
+                      : context.colorScheme.onSurface.withAlpha(185),
+                ),
+              ),
+            ),
+          )
+          .toList(),
+      builder: (context, controller, child) {
+        return GestureDetector(
+          onTap: () {
+            if (controller.isOpen) {
+              controller.close();
+            } else {
+              controller.open();
+            }
+          },
+          child: Row(
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(right: 5),
+                child: albumSortIsReverse
+                    ? Icon(Icons.keyboard_arrow_down, color: context.colorScheme.onSurface)
+                    : Icon(Icons.keyboard_arrow_up_rounded, color: context.colorScheme.onSurface),
+              ),
+              Text(
+                albumSortOption.label.t(context: context),
+                style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurface.withAlpha(225)),
+              ),
+              isSorting
+                  ? SizedBox(
+                      width: 22,
+                      height: 22,
+                      child: CircularProgressIndicator(
+                        strokeWidth: 2,
+                        color: context.colorScheme.onSurface.withAlpha(225),
+                      ),
+                    )
+                  : const SizedBox.shrink(),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _SearchBar extends StatelessWidget {
+  const _SearchBar({
+    required this.searchController,
+    required this.searchFocusNode,
+    required this.onSearch,
+    required this.filterMode,
+    required this.onClearSearch,
+  });
+
+  final TextEditingController searchController;
+  final FocusNode searchFocusNode;
+  final void Function(String, QuickFilterMode) onSearch;
+  final QuickFilterMode filterMode;
+  final VoidCallback onClearSearch;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      sliver: SliverToBoxAdapter(
+        child: Container(
+          decoration: BoxDecoration(
+            border: Border.all(color: context.colorScheme.onSurface.withAlpha(0), width: 0),
+            borderRadius: const BorderRadius.all(Radius.circular(24)),
+            gradient: LinearGradient(
+              colors: [
+                context.colorScheme.primary.withValues(alpha: 0.075),
+                context.colorScheme.primary.withValues(alpha: 0.09),
+                context.colorScheme.primary.withValues(alpha: 0.075),
+              ],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+              transform: const GradientRotation(0.5 * pi),
+            ),
+          ),
+          child: SearchField(
+            autofocus: false,
+            contentPadding: const EdgeInsets.all(16),
+            hintText: 'search_albums'.tr(),
+            prefixIcon: const Icon(Icons.search_rounded),
+            suffixIcon: searchController.text.isNotEmpty
+                ? IconButton(icon: const Icon(Icons.clear_rounded), onPressed: onClearSearch)
+                : null,
+            controller: searchController,
+            onChanged: (_) => onSearch(searchController.text, filterMode),
+            focusNode: searchFocusNode,
+            onTapOutside: (_) => searchFocusNode.unfocus(),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _QuickFilterButtonRow extends StatelessWidget {
+  const _QuickFilterButtonRow({
+    required this.filterMode,
+    required this.onChangeFilter,
+    required this.onSearch,
+    required this.searchController,
+  });
+
+  final QuickFilterMode filterMode;
+  final void Function(QuickFilterMode) onChangeFilter;
+  final void Function(String, QuickFilterMode) onSearch;
+  final TextEditingController searchController;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      sliver: SliverToBoxAdapter(
+        child: Wrap(
+          spacing: 4,
+          runSpacing: 4,
+          children: [
+            _QuickFilterButton(
+              label: 'all'.tr(),
+              isSelected: filterMode == QuickFilterMode.all,
+              onTap: () {
+                onChangeFilter(QuickFilterMode.all);
+                onSearch(searchController.text, QuickFilterMode.all);
+              },
+            ),
+            _QuickFilterButton(
+              label: 'shared_with_me'.tr(),
+              isSelected: filterMode == QuickFilterMode.sharedWithMe,
+              onTap: () {
+                onChangeFilter(QuickFilterMode.sharedWithMe);
+                onSearch(searchController.text, QuickFilterMode.sharedWithMe);
+              },
+            ),
+            _QuickFilterButton(
+              label: 'my_albums'.tr(),
+              isSelected: filterMode == QuickFilterMode.myAlbums,
+              onTap: () {
+                onChangeFilter(QuickFilterMode.myAlbums);
+                onSearch(searchController.text, QuickFilterMode.myAlbums);
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _QuickFilterButton extends StatelessWidget {
+  const _QuickFilterButton({required this.isSelected, required this.onTap, required this.label});
+
+  final bool isSelected;
+  final VoidCallback onTap;
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      onPressed: onTap,
+      style: ButtonStyle(
+        backgroundColor: WidgetStateProperty.all(isSelected ? context.colorScheme.primary : Colors.transparent),
+        shape: WidgetStateProperty.all(
+          RoundedRectangleBorder(
+            borderRadius: const BorderRadius.all(Radius.circular(20)),
+            side: BorderSide(color: context.colorScheme.onSurface.withAlpha(25), width: 1),
+          ),
+        ),
+      ),
+      child: Text(
+        label,
+        style: TextStyle(
+          color: isSelected ? context.colorScheme.onPrimary : context.colorScheme.onSurface,
+          fontSize: 14,
+        ),
+      ),
+    );
+  }
+}
+
+class _QuickSortAndViewMode extends StatelessWidget {
+  const _QuickSortAndViewMode({
+    required this.isGrid,
+    required this.onToggleViewMode,
+    required this.onSortChanged,
+    required this.currentSortMode,
+    required this.currentIsReverse,
+    this.controller,
+  });
+
+  final bool isGrid;
+  final VoidCallback onToggleViewMode;
+  final MenuController? controller;
+  final Future<void> Function(AlbumSort) onSortChanged;
+  final AlbumSortMode currentSortMode;
+  final bool currentIsReverse;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      sliver: SliverToBoxAdapter(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            _SortButton(
+              onSortChanged,
+              controller: controller,
+              initialSortMode: currentSortMode,
+              initialIsReverse: currentIsReverse,
+            ),
+            IconButton(
+              icon: Icon(
+                isGrid ? Icons.view_list_outlined : Icons.grid_view_outlined,
+                size: 24,
+                color: context.colorScheme.onSurface,
+              ),
+              onPressed: onToggleViewMode,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _AlbumList extends ConsumerWidget {
+  const _AlbumList({required this.albums, required this.userId, required this.onAlbumSelected});
+
+  final List<RemoteAlbum> albums;
+  final String? userId;
+  final AlbumSelectorCallback onAlbumSelected;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    if (albums.isEmpty) {
+      return SliverToBoxAdapter(
+        child: Center(
+          child: Padding(padding: const EdgeInsets.all(20.0), child: Text('album_search_not_found'.tr())),
+        ),
+      );
+    }
+
+    return SliverPadding(
+      padding: const EdgeInsets.only(left: 16.0, right: 16, bottom: 64),
+      sliver: SliverList.builder(
+        itemBuilder: (_, index) {
+          final album = albums[index];
+          final isOwner = album.ownerId == userId;
+
+          if (isOwner) {
+            return Padding(
+              padding: const EdgeInsets.only(bottom: 8.0),
+              child: Dismissible(
+                key: ValueKey(album.id),
+                background: Container(
+                  color: context.colorScheme.error,
+                  alignment: Alignment.centerRight,
+                  padding: const EdgeInsets.only(right: 16),
+                  child: Icon(Icons.delete, color: context.colorScheme.onError),
+                ),
+                direction: DismissDirection.endToStart,
+                confirmDismiss: (direction) {
+                  return showDialog<bool>(
+                    context: context,
+                    builder: (context) => ConfirmDialog(
+                      onOk: () => true,
+                      title: "delete_album".t(context: context),
+                      content: "album_delete_confirmation".t(context: context, args: {'album': album.name}),
+                      ok: "delete".t(context: context),
+                    ),
+                  );
+                },
+                onDismissed: (direction) async {
+                  await ref.read(remoteAlbumProvider.notifier).deleteAlbum(album.id);
+                },
+                child: AlbumTile(album: album, isOwner: isOwner, onAlbumSelected: onAlbumSelected),
+              ),
+            );
+          } else {
+            return Padding(
+              padding: const EdgeInsets.only(bottom: 8.0),
+              child: AlbumTile(album: album, isOwner: isOwner, onAlbumSelected: onAlbumSelected),
+            );
+          }
+        },
+        itemCount: albums.length,
+      ),
+    );
+  }
+}
+
+class _AlbumGrid extends StatelessWidget {
+  const _AlbumGrid({required this.albums, required this.userId, required this.onAlbumSelected});
+
+  final List<RemoteAlbum> albums;
+  final String? userId;
+  final AlbumSelectorCallback onAlbumSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    if (albums.isEmpty) {
+      return SliverToBoxAdapter(
+        child: Center(
+          child: Padding(padding: const EdgeInsets.all(20.0), child: Text('album_search_not_found'.tr())),
+        ),
+      );
+    }
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0),
+      sliver: SliverGrid(
+        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+          maxCrossAxisExtent: 250,
+          mainAxisSpacing: 4,
+          crossAxisSpacing: 4,
+          childAspectRatio: .7,
+        ),
+        delegate: SliverChildBuilderDelegate((context, index) {
+          final album = albums[index];
+          return _GridAlbumCard(album: album, userId: userId, onAlbumSelected: onAlbumSelected);
+        }, childCount: albums.length),
+      ),
+    );
+  }
+}
+
+class _GridAlbumCard extends ConsumerWidget {
+  const _GridAlbumCard({required this.album, required this.userId, required this.onAlbumSelected});
+
+  final RemoteAlbum album;
+  final String? userId;
+  final AlbumSelectorCallback onAlbumSelected;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albumThumbnailAsset = ref.read(assetServiceProvider).getRemoteAsset(album.thumbnailAssetId ?? "");
+
+    return GestureDetector(
+      onTap: () => onAlbumSelected(album),
+      child: Card(
+        elevation: 0,
+        color: context.colorScheme.surfaceBright,
+        shape: RoundedRectangleBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(16)),
+          side: BorderSide(color: context.colorScheme.onSurface.withAlpha(25), width: 1),
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Expanded(
+              flex: 2,
+              child: ClipRRect(
+                borderRadius: const BorderRadius.vertical(top: Radius.circular(15)),
+                child: SizedBox(
+                  width: double.infinity,
+                  child: FutureBuilder(
+                    future: albumThumbnailAsset,
+                    builder: (context, snapshot) {
+                      if (snapshot.hasData && snapshot.data != null) {
+                        return Thumbnail.remote(
+                          remoteId: album.thumbnailAssetId!,
+                          thumbhash: snapshot.data!.thumbHash ?? "",
+                        );
+                      }
+
+                      return Container(
+                        color: context.colorScheme.surfaceContainerHighest,
+                        child: const Icon(Icons.photo_album_rounded, size: 40, color: Colors.grey),
+                      );
+                    },
+                  ),
+                ),
+              ),
+            ),
+            Expanded(
+              flex: 1,
+              child: Padding(
+                padding: const EdgeInsets.all(12.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                  children: [
+                    Text(
+                      album.name,
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                      style: context.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w600),
+                    ),
+                    Text(
+                      '${'items_count'.t(context: context, args: {'count': album.assetCount})} • ${album.ownerId != userId ? 'shared_by_user'.t(context: context, args: {'user': album.ownerName}) : 'owned'.t(context: context)}',
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: context.textTheme.labelMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class AddToAlbumHeader extends ConsumerWidget {
+  const AddToAlbumHeader({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    Future<void> onCreateAlbum() async {
+      final newAlbum = await ref
+          .read(remoteAlbumProvider.notifier)
+          .createAlbum(
+            title: "Untitled Album",
+            assetIds: ref.read(multiSelectProvider).selectedAssets.map((e) => (e as RemoteAsset).id).toList(),
+          );
+
+      if (newAlbum == null) {
+        ImmichToast.show(context: context, toastType: ToastType.error, msg: 'errors.failed_to_create_album'.tr());
+        return;
+      }
+
+      ref.read(multiSelectProvider.notifier).reset();
+      unawaited(context.pushRoute(RemoteAlbumRoute(album: newAlbum)));
+    }
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      sliver: SliverToBoxAdapter(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text("add_to_album", style: context.textTheme.titleSmall).tr(),
+            TextButton.icon(
+              style: TextButton.styleFrom(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), // remove internal padding
+                minimumSize: const Size(0, 0), // allow shrinking
+                tapTargetSize: MaterialTapTargetSize.shrinkWrap, // remove extra height
+              ),
+              onPressed: onCreateAlbum,
+              icon: Icon(Icons.add, color: context.primaryColor),
+              label: Text(
+                "common_create_new_album",
+                style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 14),
+              ).tr(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class CreateAlbumButton extends ConsumerWidget {
+  const CreateAlbumButton({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    Future<void> onCreateAlbum() async {
+      var albumName = await showDialog<String?>(context: context, builder: (context) => const NewAlbumNameModal());
+      if (albumName == null) {
+        return;
+      }
+
+      final asset = ref.read(currentAssetNotifier);
+
+      if (asset == null) {
+        ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
+        return;
+      }
+
+      final album = await ref
+          .read(remoteAlbumProvider.notifier)
+          .createAlbum(title: albumName, assetIds: [asset.remoteId!]);
+
+      if (album == null) {
+        ImmichToast.show(context: context, toastType: ToastType.error, msg: 'errors.failed_to_create_album'.tr());
+        return;
+      }
+
+      ImmichToast.show(
+        context: context,
+        msg: 'add_to_album_bottom_sheet_added'.tr(namedArgs: {'album': album.name}),
+      );
+
+      // Invalidate using the asset's remote ID to refresh the "Appears in" list
+      ref.invalidate(albumsContainingAssetProvider(asset.remoteId!));
+
+      context.pop();
+    }
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      sliver: SliverToBoxAdapter(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text("add_to_album", style: context.textTheme.titleSmall).tr(),
+            TextButton.icon(
+              style: TextButton.styleFrom(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                minimumSize: const Size(0, 0),
+                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+              ),
+              onPressed: onCreateAlbum,
+              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/presentation/widgets/album/album_tile.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/album/album.model.dart';
+import 'package:immich_mobile/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/pages/common/large_leading_tile.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
+
+class AlbumTile extends ConsumerWidget {
+  const AlbumTile({super.key, required this.album, required this.isOwner, this.onAlbumSelected});
+
+  final RemoteAlbum album;
+  final bool isOwner;
+  final Function(RemoteAlbum)? onAlbumSelected;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albumThumbnailAsset = ref.read(assetServiceProvider).getRemoteAsset(album.thumbnailAssetId ?? "");
+
+    return LargeLeadingTile(
+      title: Text(
+        album.name,
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
+        style: context.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w600),
+      ),
+      subtitle: Text(
+        '${'items_count'.t(context: context, args: {'count': album.assetCount})} • ${isOwner ? 'owned'.t(context: context) : 'shared_by_user'.t(context: context, args: {'user': album.ownerName})}',
+        overflow: TextOverflow.ellipsis,
+        style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+      ),
+      onTap: () => onAlbumSelected?.call(album),
+      leadingPadding: const EdgeInsets.only(right: 16),
+      leading: FutureBuilder(
+        future: albumThumbnailAsset,
+        builder: (context, snapshot) {
+          return snapshot.hasData && snapshot.data != null
+              ? ClipRRect(
+                  borderRadius: const BorderRadius.all(Radius.circular(15)),
+                  child: SizedBox(
+                    width: 80,
+                    height: 80,
+                    child: Thumbnail.remote(
+                      remoteId: album.thumbnailAssetId!,
+                      thumbhash: snapshot.data!.thumbHash ?? "",
+                    ),
+                  ),
+                )
+              : SizedBox(
+                  width: 80,
+                  height: 80,
+                  child: Container(
+                    decoration: BoxDecoration(
+                      color: context.colorScheme.surfaceContainer,
+                      borderRadius: const BorderRadius.all(Radius.circular(16)),
+                      border: Border.all(color: context.colorScheme.outline.withAlpha(50), width: 1),
+                    ),
+                    child: const Icon(Icons.photo_album_rounded, size: 24, color: Colors.grey),
+                  ),
+                );
+        },
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/album/drift_activity_text_field.dart

@@ -0,0 +1,109 @@
+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/user.provider.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class DriftActivityTextField extends ConsumerStatefulWidget {
+  final bool isEnabled;
+  final bool isBottomSheet;
+  final String? likeId;
+  final Function(String) onSubmit;
+  final Function()? onKeyboardFocus;
+
+  const DriftActivityTextField({
+    required this.onSubmit,
+    this.isEnabled = true,
+    this.likeId,
+    this.onKeyboardFocus,
+    this.isBottomSheet = false,
+    super.key,
+  });
+
+  @override
+  ConsumerState<DriftActivityTextField> createState() => _DriftActivityTextFieldState();
+}
+
+class _DriftActivityTextFieldState extends ConsumerState<DriftActivityTextField> {
+  late FocusNode inputFocusNode;
+  late TextEditingController inputController;
+  bool sendEnabled = false;
+
+  @override
+  void initState() {
+    super.initState();
+    inputController = TextEditingController();
+    inputFocusNode = FocusNode();
+
+    inputFocusNode.addListener(() {
+      if (inputFocusNode.hasFocus) {
+        widget.onKeyboardFocus?.call();
+      }
+    });
+
+    inputController.addListener(() {
+      setState(() {
+        sendEnabled = inputController.text.trim().isNotEmpty;
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    inputController.dispose();
+    inputFocusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final user = ref.watch(currentUserProvider);
+
+    // Pass text to callback and reset controller
+    void onEditingComplete() {
+      if (inputController.text.trim().isEmpty) {
+        return;
+      }
+
+      widget.onSubmit(inputController.text);
+      inputController.clear();
+      inputFocusNode.unfocus();
+    }
+
+    return Padding(
+      padding: EdgeInsets.symmetric(vertical: widget.isBottomSheet ? 0 : 10),
+      child: TextField(
+        controller: inputController,
+        enabled: widget.isEnabled,
+        focusNode: inputFocusNode,
+        textInputAction: TextInputAction.send,
+        autofocus: false,
+        decoration: InputDecoration(
+          isDense: true,
+          contentPadding: const EdgeInsets.symmetric(vertical: 12), // Adjust as needed
+          border: InputBorder.none,
+          focusedBorder: InputBorder.none,
+          enabledBorder: InputBorder.none,
+          prefixIcon: user != null
+              ? Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 15),
+                  child: UserCircleAvatar(user: user, size: 30, radius: 15),
+                )
+              : null,
+          suffixIcon: IconButton(
+            onPressed: sendEnabled ? onEditingComplete : null,
+            icon: const Icon(Icons.send),
+            iconSize: 24,
+            color: context.primaryColor,
+            disabledColor: context.colorScheme.secondaryContainer,
+          ),
+          hintText: !widget.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/presentation/widgets/album/new_album_name_modal.widget.dart

@@ -0,0 +1,53 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class NewAlbumNameModal extends StatefulWidget {
+  const NewAlbumNameModal({super.key});
+
+  @override
+  State<NewAlbumNameModal> createState() => _NewAlbumNameModalState();
+}
+
+class _NewAlbumNameModalState extends State<NewAlbumNameModal> {
+  TextEditingController nameController = TextEditingController();
+
+  @override
+  void dispose() {
+    nameController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: const Text("album_name", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+      content: SingleChildScrollView(
+        child: TextFormField(
+          controller: nameController,
+          textCapitalization: TextCapitalization.words,
+          autofocus: true,
+          decoration: InputDecoration(hintText: 'name'.tr(), border: const OutlineInputBorder()),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => context.pop(null),
+          child: Text(
+            "cancel",
+            style: TextStyle(color: Colors.red[300], fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+        TextButton(
+          onPressed: () {
+            context.pop(nameController.text.trim());
+          },
+          child: Text(
+            "create_album",
+            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart

@@ -0,0 +1,85 @@
+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/asyncvalue_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/widgets/activities/comment_bubble.dart';
+import 'package:immich_mobile/presentation/widgets/album/drift_activity_text_field.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/providers/activity.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+
+class ActivitiesBottomSheet extends HookConsumerWidget {
+  final DraggableScrollableController controller;
+  final double initialChildSize;
+  final bool scrollToBottomInitially;
+
+  const ActivitiesBottomSheet({
+    required this.controller,
+    this.initialChildSize = 0.35,
+    this.scrollToBottomInitially = true,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final album = ref.watch(currentRemoteAlbumProvider)!;
+    final asset = ref.watch(currentAssetNotifier) as RemoteAsset?;
+
+    final activityNotifier = ref.read(albumActivityProvider(album.id, asset?.id).notifier);
+    final activities = ref.watch(albumActivityProvider(album.id, asset?.id));
+
+    Future<void> onAddComment(String comment) async {
+      await activityNotifier.addComment(comment);
+    }
+
+    Widget buildActivitiesSliver() {
+      return activities.widgetWhen(
+        onLoading: () => const SliverToBoxAdapter(child: SizedBox.shrink()),
+        onData: (data) {
+          return SliverList(
+            delegate: SliverChildBuilderDelegate((context, index) {
+              if (index == data.length) {
+                return const SizedBox.shrink();
+              }
+              final activity = data[data.length - 1 - index];
+              return Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                child: CommentBubble(activity: activity, isAssetActivity: true),
+              );
+            }, childCount: data.length + 1),
+          );
+        },
+      );
+    }
+
+    return BaseBottomSheet(
+      actions: [],
+      slivers: [buildActivitiesSliver()],
+      footer: Padding(
+        // TODO: avoid fixed padding, use context.padding.bottom
+        padding: const EdgeInsets.only(bottom: 32),
+        child: Column(
+          children: [
+            const Divider(indent: 16, endIndent: 16),
+            DriftActivityTextField(
+              isEnabled: album.isActivityEnabled,
+              isBottomSheet: true,
+              // likeId: likedId,
+              onSubmit: onAddComment,
+            ),
+          ],
+        ),
+      ),
+      controller: controller,
+      initialChildSize: initialChildSize,
+      minChildSize: 0.1,
+      maxChildSize: 0.88,
+      expand: false,
+      shouldCloseOnMinExtent: false,
+      resizeOnScroll: false,
+      backgroundColor: context.isDarkTheme ? context.colorScheme.surface : Colors.white,
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/asset_stack.provider.dart

@@ -0,0 +1,17 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
+
+class StackChildrenNotifier extends AutoDisposeFamilyAsyncNotifier<List<RemoteAsset>, BaseAsset> {
+  @override
+  Future<List<RemoteAsset>> build(BaseAsset asset) {
+    if (asset is! RemoteAsset || asset.stackId == null) {
+      return Future.value(const []);
+    }
+
+    return ref.watch(assetServiceProvider).getStack(asset);
+  }
+}
+
+final stackChildrenNotifier = AsyncNotifierProvider.autoDispose
+    .family<StackChildrenNotifier, List<RemoteAsset>, BaseAsset>(StackChildrenNotifier.new);

mobile/lib/presentation/widgets/asset_viewer/asset_stack.widget.dart

@@ -0,0 +1,118 @@
+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/presentation/widgets/asset_viewer/asset_stack.provider.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+
+class AssetStackRow extends ConsumerWidget {
+  const AssetStackRow({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(assetViewerProvider.select((state) => state.currentAsset));
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final stackChildren = ref.watch(stackChildrenNotifier(asset)).valueOrNull;
+    if (stackChildren == null || stackChildren.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
+    final opacity = showControls ? ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity)) : 0;
+
+    return IgnorePointer(
+      ignoring: opacity < 255,
+      child: AnimatedOpacity(
+        opacity: opacity / 255,
+        duration: Durations.short2,
+        child: _StackList(stack: stackChildren),
+      ),
+    );
+  }
+}
+
+class _StackList extends ConsumerWidget {
+  final List<RemoteAsset> stack;
+
+  const _StackList({required this.stack});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Center(
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: Padding(
+          padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 20.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            spacing: 5.0,
+            children: List.generate(stack.length, (i) {
+              final asset = stack[i];
+              return _StackItem(key: ValueKey(asset.heroTag), asset: asset, index: i);
+            }),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _StackItem extends ConsumerStatefulWidget {
+  final RemoteAsset asset;
+  final int index;
+
+  const _StackItem({super.key, required this.asset, required this.index});
+
+  @override
+  ConsumerState<_StackItem> createState() => _StackItemState();
+}
+
+class _StackItemState extends ConsumerState<_StackItem> {
+  void _onTap() {
+    ref.read(currentAssetNotifier.notifier).setAsset(widget.asset);
+    ref.read(assetViewerProvider.notifier).setStackIndex(widget.index);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    const playIcon = Center(
+      child: Icon(
+        Icons.play_circle_outline_rounded,
+        color: Colors.white,
+        size: 16,
+        shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0))],
+      ),
+    );
+    const selectedDecoration = BoxDecoration(
+      border: Border.fromBorderSide(BorderSide(color: Colors.white, width: 2)),
+      borderRadius: BorderRadius.all(Radius.circular(10)),
+    );
+    const unselectedDecoration = BoxDecoration(
+      border: Border.fromBorderSide(BorderSide(color: Colors.grey, width: 0.5)),
+      borderRadius: BorderRadius.all(Radius.circular(10)),
+    );
+
+    Widget thumbnail = Thumbnail.fromAsset(asset: widget.asset, size: const Size(60, 40));
+    if (widget.asset.isVideo) {
+      thumbnail = Stack(children: [thumbnail, playIcon]);
+    }
+    thumbnail = ClipRRect(borderRadius: const BorderRadius.all(Radius.circular(10)), child: thumbnail);
+    final isSelected = ref.watch(assetViewerProvider.select((s) => s.stackIndex == widget.index));
+    return SizedBox(
+      width: 60,
+      height: 40,
+      child: GestureDetector(
+        onTap: _onTap,
+        child: DecoratedBox(
+          decoration: isSelected ? selectedDecoration : unselectedDecoration,
+          position: DecorationPosition.foreground,
+          child: thumbnail,
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -0,0 +1,727 @@
+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/services.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/album/album.model.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/platform_extensions.dart';
+import 'package:immich_mobile/extensions/scroll_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_status_floating_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.provider.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/bottom_bar.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/top_app_bar.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer.widget.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.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/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
+import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
+import 'package:immich_mobile/widgets/photo_view/photo_view_gallery.dart';
+
+@RoutePage()
+class AssetViewerPage extends StatelessWidget {
+  final int initialIndex;
+  final TimelineService timelineService;
+  final int? heroOffset;
+  final RemoteAlbum? currentAlbum;
+
+  const AssetViewerPage({
+    super.key,
+    required this.initialIndex,
+    required this.timelineService,
+    this.heroOffset,
+    this.currentAlbum,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // This is necessary to ensure that the timeline service is available
+    // since the Timeline and AssetViewer are on different routes / Widget subtrees.
+    return ProviderScope(
+      overrides: [
+        timelineServiceProvider.overrideWithValue(timelineService),
+        currentRemoteAlbumScopedProvider.overrideWithValue(currentAlbum),
+      ],
+      child: AssetViewer(initialIndex: initialIndex, heroOffset: heroOffset),
+    );
+  }
+}
+
+class AssetViewer extends ConsumerStatefulWidget {
+  final int initialIndex;
+  final int? heroOffset;
+
+  const AssetViewer({super.key, required this.initialIndex, this.heroOffset});
+
+  @override
+  ConsumerState createState() => _AssetViewerState();
+
+  static void setAsset(WidgetRef ref, BaseAsset asset) {
+    ref.read(assetViewerProvider.notifier).reset();
+    _setAsset(ref, asset);
+  }
+
+  void changeAsset(WidgetRef ref, BaseAsset asset) {
+    _setAsset(ref, asset);
+  }
+
+  static void _setAsset(WidgetRef ref, BaseAsset asset) {
+    // Always holds the current asset from the timeline
+    ref.read(assetViewerProvider.notifier).setAsset(asset);
+    // The currentAssetNotifier actually holds the current asset that is displayed
+    // which could be stack children as well
+    ref.read(currentAssetNotifier.notifier).setAsset(asset);
+    if (asset.isVideo || asset.isMotionPhoto) {
+      ref.read(videoPlaybackValueProvider.notifier).reset();
+      ref.read(videoPlayerControlsProvider.notifier).pause();
+    }
+    // Hide controls by default for videos
+    if (asset.isVideo) {
+      ref.read(assetViewerProvider.notifier).setControls(false);
+    }
+  }
+}
+
+const double _kBottomSheetMinimumExtent = 0.4;
+const double _kBottomSheetSnapExtent = 0.67;
+
+class _AssetViewerState extends ConsumerState<AssetViewer> {
+  static final _dummyListener = ImageStreamListener((image, _) => image.dispose());
+  late PageController pageController;
+  late DraggableScrollableController bottomSheetController;
+  PersistentBottomSheetController? sheetCloseController;
+  // PhotoViewGallery takes care of disposing it's controllers
+  PhotoViewControllerBase? viewController;
+  StreamSubscription? reloadSubscription;
+
+  late final int heroOffset;
+  late PhotoViewControllerValue initialPhotoViewState;
+  bool? hasDraggedDown;
+  bool isSnapping = false;
+  bool blockGestures = false;
+  bool dragInProgress = false;
+  bool shouldPopOnDrag = false;
+  bool assetReloadRequested = false;
+  double previousExtent = _kBottomSheetMinimumExtent;
+  Offset dragDownPosition = Offset.zero;
+  int totalAssets = 0;
+  int stackIndex = 0;
+  BuildContext? scaffoldContext;
+  Map<String, GlobalKey> videoPlayerKeys = {};
+
+  // Delayed operations that should be cancelled on disposal
+  final List<Timer> _delayedOperations = [];
+
+  ImageStream? _prevPreCacheStream;
+  ImageStream? _nextPreCacheStream;
+
+  KeepAliveLink? _stackChildrenKeepAlive;
+
+  @override
+  void initState() {
+    super.initState();
+    assert(ref.read(currentAssetNotifier) != null, "Current asset should not be null when opening the AssetViewer");
+    pageController = PageController(initialPage: widget.initialIndex);
+    totalAssets = ref.read(timelineServiceProvider).totalAssets;
+    bottomSheetController = DraggableScrollableController();
+    WidgetsBinding.instance.addPostFrameCallback(_onAssetInit);
+    reloadSubscription = EventStream.shared.listen(_onEvent);
+    heroOffset = widget.heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+    final asset = ref.read(currentAssetNotifier);
+    if (asset != null) {
+      _stackChildrenKeepAlive = ref.read(stackChildrenNotifier(asset).notifier).ref.keepAlive();
+    }
+    if (ref.read(assetViewerProvider).showingControls) {
+      unawaited(SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge));
+    } else {
+      unawaited(SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky));
+    }
+  }
+
+  @override
+  void dispose() {
+    pageController.dispose();
+    bottomSheetController.dispose();
+    _cancelTimers();
+    reloadSubscription?.cancel();
+    _prevPreCacheStream?.removeListener(_dummyListener);
+    _nextPreCacheStream?.removeListener(_dummyListener);
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+    _stackChildrenKeepAlive?.close();
+    super.dispose();
+  }
+
+  bool get showingBottomSheet => ref.read(assetViewerProvider.select((s) => s.showingBottomSheet));
+
+  Color get backgroundColor {
+    final opacity = ref.read(assetViewerProvider.select((s) => s.backgroundOpacity));
+    return Colors.black.withAlpha(opacity);
+  }
+
+  void _cancelTimers() {
+    for (final timer in _delayedOperations) {
+      timer.cancel();
+    }
+    _delayedOperations.clear();
+  }
+
+  double _getVerticalOffsetForBottomSheet(double extent) =>
+      (context.height * extent) - (context.height * _kBottomSheetMinimumExtent);
+
+  ImageStream _precacheImage(BaseAsset asset) {
+    final provider = getFullImageProvider(asset, size: context.sizeData);
+    return provider.resolve(ImageConfiguration.empty)..addListener(_dummyListener);
+  }
+
+  void _precacheAssets(int index) {
+    final timelineService = ref.read(timelineServiceProvider);
+    unawaited(timelineService.preCacheAssets(index));
+    _cancelTimers();
+    // This will trigger the pre-caching of adjacent assets ensuring
+    // that they are ready when the user navigates to them.
+    final timer = Timer(Durations.medium4, () async {
+      // Check if widget is still mounted before proceeding
+      if (!mounted) return;
+
+      final (prevAsset, nextAsset) = await (
+        timelineService.getAssetAsync(index - 1),
+        timelineService.getAssetAsync(index + 1),
+      ).wait;
+      if (!mounted) return;
+      _prevPreCacheStream?.removeListener(_dummyListener);
+      _nextPreCacheStream?.removeListener(_dummyListener);
+      _prevPreCacheStream = prevAsset != null ? _precacheImage(prevAsset) : null;
+      _nextPreCacheStream = nextAsset != null ? _precacheImage(nextAsset) : null;
+    });
+    _delayedOperations.add(timer);
+  }
+
+  void _onAssetInit(Duration _) {
+    _precacheAssets(widget.initialIndex);
+    _handleCasting();
+  }
+
+  void _onAssetChanged(int index) async {
+    final timelineService = ref.read(timelineServiceProvider);
+    final asset = await timelineService.getAssetAsync(index);
+    if (asset == null) {
+      return;
+    }
+
+    widget.changeAsset(ref, asset);
+    _precacheAssets(index);
+    _handleCasting();
+    _stackChildrenKeepAlive?.close();
+    _stackChildrenKeepAlive = ref.read(stackChildrenNotifier(asset).notifier).ref.keepAlive();
+  }
+
+  void _handleCasting() {
+    if (!ref.read(castProvider).isCasting) return;
+    final asset = ref.read(currentAssetNotifier);
+    if (asset == null) return;
+
+    // hide any casting snackbars if they exist
+    context.scaffoldMessenger.hideCurrentSnackBar();
+
+    // send image to casting if the server has it
+    if (asset is RemoteAsset) {
+      ref.read(castProvider.notifier).loadMedia(asset, false);
+    } else {
+      // casting cannot show local assets
+      context.scaffoldMessenger.clearSnackBars();
+
+      if (ref.read(castProvider).isCasting) {
+        ref.read(castProvider.notifier).stop();
+        context.scaffoldMessenger.showSnackBar(
+          SnackBar(
+            duration: const Duration(seconds: 2),
+            content: Text(
+              "local_asset_cast_failed".tr(),
+              style: context.textTheme.bodyLarge?.copyWith(color: context.primaryColor),
+            ),
+          ),
+        );
+      }
+    }
+  }
+
+  void _onPageBuild(PhotoViewControllerBase controller) {
+    viewController ??= controller;
+    if (showingBottomSheet && bottomSheetController.isAttached) {
+      final verticalOffset =
+          (context.height * bottomSheetController.size) - (context.height * _kBottomSheetMinimumExtent);
+      controller.position = Offset(0, -verticalOffset);
+      // Apply the zoom effect when the bottom sheet is showing
+      controller.scale = (controller.scale ?? 1.0) + 0.01;
+    }
+  }
+
+  void _onPageChanged(int index, PhotoViewControllerBase? controller) {
+    _onAssetChanged(index);
+    viewController = controller;
+  }
+
+  void _onDragStart(
+    _,
+    DragStartDetails details,
+    PhotoViewControllerBase controller,
+    PhotoViewScaleStateController scaleStateController,
+  ) {
+    viewController = controller;
+    dragDownPosition = details.localPosition;
+    initialPhotoViewState = controller.value;
+    final isZoomed =
+        scaleStateController.scaleState == PhotoViewScaleState.zoomedIn ||
+        scaleStateController.scaleState == PhotoViewScaleState.covering;
+    if (!showingBottomSheet && isZoomed) {
+      blockGestures = true;
+    }
+  }
+
+  void _onDragEnd(BuildContext ctx, _, __) {
+    dragInProgress = false;
+
+    if (shouldPopOnDrag) {
+      // Dismiss immediately without state updates to avoid rebuilds
+      ctx.maybePop();
+      return;
+    }
+
+    // Do not reset the state if the bottom sheet is showing
+    if (showingBottomSheet) {
+      _snapBottomSheet();
+      return;
+    }
+
+    // If the gestures are blocked, do not reset the state
+    if (blockGestures) {
+      blockGestures = false;
+      return;
+    }
+
+    shouldPopOnDrag = false;
+    hasDraggedDown = null;
+    viewController?.animateMultiple(
+      position: initialPhotoViewState.position,
+      scale: viewController?.initialScale ?? initialPhotoViewState.scale,
+      rotation: initialPhotoViewState.rotation,
+    );
+    ref.read(assetViewerProvider.notifier).setOpacity(255);
+  }
+
+  void _onDragUpdate(BuildContext ctx, DragUpdateDetails details, _) {
+    if (blockGestures) {
+      return;
+    }
+
+    dragInProgress = true;
+    final delta = details.localPosition - dragDownPosition;
+    hasDraggedDown ??= delta.dy > 0;
+    if (!hasDraggedDown! || showingBottomSheet) {
+      _handleDragUp(ctx, delta);
+      return;
+    }
+
+    _handleDragDown(ctx, delta);
+  }
+
+  void _handleDragUp(BuildContext ctx, Offset delta) {
+    const double openThreshold = 50;
+
+    final position = initialPhotoViewState.position + Offset(0, delta.dy);
+    final distanceToOrigin = position.distance;
+
+    viewController?.updateMultiple(position: position);
+    // Moves the bottom sheet when the asset is being dragged up
+    if (showingBottomSheet && bottomSheetController.isAttached) {
+      final centre = (ctx.height * _kBottomSheetMinimumExtent);
+      bottomSheetController.jumpTo((centre + distanceToOrigin) / ctx.height);
+    }
+
+    if (distanceToOrigin > openThreshold && !showingBottomSheet && !ref.read(readonlyModeProvider)) {
+      _openBottomSheet(ctx);
+    }
+  }
+
+  void _handleDragDown(BuildContext ctx, Offset delta) {
+    const double dragRatio = 0.2;
+    const double popThreshold = 75;
+
+    final distance = delta.distance;
+    shouldPopOnDrag = delta.dy > 0 && distance > popThreshold;
+
+    final maxScaleDistance = ctx.height * 0.5;
+    final scaleReduction = (distance / maxScaleDistance).clamp(0.0, dragRatio);
+    double? updatedScale;
+    double? initialScale = viewController?.initialScale ?? initialPhotoViewState.scale;
+    if (initialScale != null) {
+      updatedScale = initialScale * (1.0 - scaleReduction);
+    }
+
+    final backgroundOpacity = (255 * (1.0 - (scaleReduction / dragRatio))).round();
+
+    viewController?.updateMultiple(position: initialPhotoViewState.position + delta, scale: updatedScale);
+    ref.read(assetViewerProvider.notifier).setOpacity(backgroundOpacity);
+  }
+
+  void _onTapDown(_, __, ___) {
+    if (!showingBottomSheet) {
+      ref.read(assetViewerProvider.notifier).toggleControls();
+    }
+  }
+
+  bool _onNotification(Notification delta) {
+    if (delta is DraggableScrollableNotification) {
+      _handleDraggableNotification(delta);
+    }
+
+    // Handle sheet snap manually so that the it snaps only at _kBottomSheetSnapExtent but not after
+    // the isSnapping guard is to prevent the notification from recursively handling the
+    // notification, eventually resulting in a heap overflow
+    if (!isSnapping && delta is ScrollEndNotification) {
+      _snapBottomSheet();
+    }
+    return false;
+  }
+
+  void _handleDraggableNotification(DraggableScrollableNotification delta) {
+    final currentExtent = delta.extent;
+    final isDraggingDown = currentExtent < previousExtent;
+    previousExtent = currentExtent;
+    // Closes the bottom sheet if the user is dragging down
+    if (isDraggingDown && delta.extent < 0.67) {
+      if (dragInProgress) {
+        blockGestures = true;
+      }
+      // Jump to a lower position before starting close animation to prevent glitch
+      if (bottomSheetController.isAttached) {
+        bottomSheetController.jumpTo(0.67);
+      }
+      sheetCloseController?.close();
+    }
+
+    // If the asset is being dragged down, we do not want to update the asset position again
+    if (dragInProgress) {
+      return;
+    }
+
+    final verticalOffset = _getVerticalOffsetForBottomSheet(delta.extent);
+    // Moves the asset when the bottom sheet is being dragged
+    if (verticalOffset > 0) {
+      viewController?.position = Offset(0, -verticalOffset);
+    }
+  }
+
+  void _onEvent(Event event) {
+    if (event is TimelineReloadEvent) {
+      _onTimelineReloadEvent();
+      return;
+    }
+
+    if (event is ViewerReloadAssetEvent) {
+      assetReloadRequested = true;
+      return;
+    }
+
+    if (event is ViewerOpenBottomSheetEvent) {
+      final extent = _kBottomSheetMinimumExtent + 0.3;
+      _openBottomSheet(scaffoldContext!, extent: extent, activitiesMode: event.activitiesMode);
+      final offset = _getVerticalOffsetForBottomSheet(extent);
+      viewController?.position = Offset(0, -offset);
+      return;
+    }
+  }
+
+  void _onTimelineReloadEvent() {
+    totalAssets = ref.read(timelineServiceProvider).totalAssets;
+    if (totalAssets == 0) {
+      context.maybePop();
+      return;
+    }
+
+    if (assetReloadRequested) {
+      assetReloadRequested = false;
+      _onAssetReloadEvent();
+      return;
+    }
+  }
+
+  void _onAssetReloadEvent() async {
+    final index = pageController.page?.round() ?? 0;
+    final timelineService = ref.read(timelineServiceProvider);
+    final newAsset = await timelineService.getAssetAsync(index);
+
+    if (newAsset == null) {
+      return;
+    }
+
+    final currentAsset = ref.read(currentAssetNotifier);
+    // Do not reload / close the bottom sheet if the asset has not changed
+    if (newAsset.heroTag == currentAsset?.heroTag) {
+      return;
+    }
+
+    setState(() {
+      _onAssetChanged(pageController.page!.round());
+      sheetCloseController?.close();
+    });
+  }
+
+  void _openBottomSheet(BuildContext ctx, {double extent = _kBottomSheetMinimumExtent, bool activitiesMode = false}) {
+    ref.read(assetViewerProvider.notifier).setBottomSheet(true);
+    previousExtent = _kBottomSheetMinimumExtent;
+    sheetCloseController = showBottomSheet(
+      context: ctx,
+      sheetAnimationStyle: const AnimationStyle(duration: Durations.medium2, reverseDuration: Durations.medium2),
+      constraints: const BoxConstraints(maxWidth: double.infinity),
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))),
+      backgroundColor: ctx.colorScheme.surfaceContainerLowest,
+      builder: (_) {
+        return NotificationListener<Notification>(
+          onNotification: _onNotification,
+          child: activitiesMode
+              ? ActivitiesBottomSheet(controller: bottomSheetController, initialChildSize: extent)
+              : AssetDetailBottomSheet(controller: bottomSheetController, initialChildSize: extent),
+        );
+      },
+    );
+    sheetCloseController?.closed.then((_) => _handleSheetClose());
+  }
+
+  void _handleSheetClose() {
+    viewController?.animateMultiple(position: Offset.zero);
+    viewController?.updateMultiple(scale: viewController?.initialScale);
+    ref.read(assetViewerProvider.notifier).setBottomSheet(false);
+    sheetCloseController = null;
+    shouldPopOnDrag = false;
+    hasDraggedDown = null;
+  }
+
+  void _snapBottomSheet() {
+    if (!bottomSheetController.isAttached ||
+        bottomSheetController.size > _kBottomSheetSnapExtent ||
+        bottomSheetController.size < 0.4) {
+      return;
+    }
+    isSnapping = true;
+    bottomSheetController.animateTo(_kBottomSheetSnapExtent, duration: Durations.short3, curve: Curves.easeOut);
+  }
+
+  Widget _placeholderBuilder(BuildContext ctx, ImageChunkEvent? progress, int index) {
+    return const Center(child: ImmichLoadingIndicator());
+  }
+
+  void _onScaleStateChanged(PhotoViewScaleState scaleState) {
+    if (scaleState != PhotoViewScaleState.initial) {
+      if (!dragInProgress) {
+        ref.read(assetViewerProvider.notifier).setControls(false);
+      }
+      ref.read(videoPlayerControlsProvider.notifier).pause();
+      return;
+    }
+
+    if (!showingBottomSheet) {
+      ref.read(assetViewerProvider.notifier).setControls(true);
+    }
+  }
+
+  void _onLongPress(_, __, ___) {
+    ref.read(isPlayingMotionVideoProvider.notifier).playing = true;
+  }
+
+  PhotoViewGalleryPageOptions _assetBuilder(BuildContext ctx, int index) {
+    scaffoldContext ??= ctx;
+    final timelineService = ref.read(timelineServiceProvider);
+    final asset = timelineService.getAssetSafe(index);
+
+    // If asset is not available in buffer, return a placeholder
+    if (asset == null) {
+      return PhotoViewGalleryPageOptions.customChild(
+        heroAttributes: PhotoViewHeroAttributes(tag: 'loading_$index'),
+        child: Container(
+          width: ctx.width,
+          height: ctx.height,
+          color: backgroundColor,
+          child: const Center(child: CircularProgressIndicator()),
+        ),
+      );
+    }
+
+    BaseAsset displayAsset = asset;
+    final stackChildren = ref.read(stackChildrenNotifier(asset)).valueOrNull;
+    if (stackChildren != null && stackChildren.isNotEmpty) {
+      displayAsset = stackChildren.elementAt(ref.read(assetViewerProvider).stackIndex);
+    }
+
+    final isPlayingMotionVideo = ref.read(isPlayingMotionVideoProvider);
+    if (displayAsset.isImage && !isPlayingMotionVideo) {
+      return _imageBuilder(ctx, displayAsset);
+    }
+
+    return _videoBuilder(ctx, displayAsset);
+  }
+
+  PhotoViewGalleryPageOptions _imageBuilder(BuildContext ctx, BaseAsset asset) {
+    final size = ctx.sizeData;
+    return PhotoViewGalleryPageOptions(
+      key: ValueKey(asset.heroTag),
+      imageProvider: getFullImageProvider(asset, size: size),
+      heroAttributes: PhotoViewHeroAttributes(tag: '${asset.heroTag}_$heroOffset'),
+      filterQuality: FilterQuality.high,
+      tightMode: true,
+      disableScaleGestures: showingBottomSheet,
+      onDragStart: _onDragStart,
+      onDragUpdate: _onDragUpdate,
+      onDragEnd: _onDragEnd,
+      onTapDown: _onTapDown,
+      onLongPressStart: asset.isMotionPhoto ? _onLongPress : null,
+      errorBuilder: (_, __, ___) => Container(
+        width: size.width,
+        height: size.height,
+        color: backgroundColor,
+        child: Thumbnail.fromAsset(asset: asset, fit: BoxFit.contain),
+      ),
+    );
+  }
+
+  GlobalKey _getVideoPlayerKey(String id) {
+    videoPlayerKeys.putIfAbsent(id, () => GlobalKey());
+    return videoPlayerKeys[id]!;
+  }
+
+  PhotoViewGalleryPageOptions _videoBuilder(BuildContext ctx, BaseAsset asset) {
+    return PhotoViewGalleryPageOptions.customChild(
+      onDragStart: _onDragStart,
+      onDragUpdate: _onDragUpdate,
+      onDragEnd: _onDragEnd,
+      onTapDown: _onTapDown,
+      heroAttributes: PhotoViewHeroAttributes(tag: '${asset.heroTag}_$heroOffset'),
+      filterQuality: FilterQuality.high,
+      maxScale: 1.0,
+      basePosition: Alignment.center,
+      disableScaleGestures: true,
+      child: SizedBox(
+        width: ctx.width,
+        height: ctx.height,
+        child: NativeVideoViewer(
+          key: _getVideoPlayerKey(asset.heroTag),
+          asset: asset,
+          image: Image(
+            key: ValueKey(asset),
+            image: getFullImageProvider(asset, size: ctx.sizeData),
+            fit: BoxFit.contain,
+            height: ctx.height,
+            width: ctx.width,
+            alignment: Alignment.center,
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _onPop<T>(bool didPop, T? result) {
+    ref.read(currentAssetNotifier.notifier).dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Rebuild the widget when the asset viewer state changes
+    // Using multiple selectors to avoid unnecessary rebuilds for other state changes
+    ref.watch(assetViewerProvider.select((s) => s.showingBottomSheet));
+    ref.watch(assetViewerProvider.select((s) => s.backgroundOpacity));
+    ref.watch(assetViewerProvider.select((s) => s.stackIndex));
+    ref.watch(isPlayingMotionVideoProvider);
+    final showingControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
+
+    // Listen for casting changes and send initial asset to the cast provider
+    ref.listen(castProvider.select((value) => value.isCasting), (_, isCasting) async {
+      if (!isCasting) return;
+
+      final asset = ref.read(currentAssetNotifier);
+      if (asset == null) return;
+
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _handleCasting();
+      });
+    });
+
+    // Listen for control visibility changes and change system UI mode accordingly
+    ref.listen(assetViewerProvider.select((value) => value.showingControls), (_, showingControls) async {
+      if (showingControls) {
+        unawaited(SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge));
+      } else {
+        unawaited(SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky));
+      }
+    });
+
+    // Currently it is not possible to scroll the asset when the bottom sheet is open all the way.
+    // Issue: https://github.com/flutter/flutter/issues/109037
+    // TODO: Add a custom scrum builder once the fix lands on stable
+    return PopScope(
+      onPopInvokedWithResult: _onPop,
+      child: Scaffold(
+        backgroundColor: backgroundColor,
+        appBar: const ViewerTopAppBar(),
+        extendBody: true,
+        extendBodyBehindAppBar: true,
+        floatingActionButton: IgnorePointer(
+          ignoring: !showingControls,
+          child: AnimatedOpacity(
+            opacity: showingControls ? 1.0 : 0.0,
+            duration: Durations.short2,
+            child: const DownloadStatusFloatingButton(),
+          ),
+        ),
+        body: Stack(
+          children: [
+            PhotoViewGallery.builder(
+              gaplessPlayback: true,
+              loadingBuilder: _placeholderBuilder,
+              pageController: pageController,
+              scrollPhysics: CurrentPlatform.isIOS
+                  ? const FastScrollPhysics() // Use bouncing physics for iOS
+                  : const FastClampingScrollPhysics(), // Use heavy physics for Android
+              itemCount: totalAssets,
+              onPageChanged: _onPageChanged,
+              onPageBuild: _onPageBuild,
+              scaleStateChangedCallback: _onScaleStateChanged,
+              builder: _assetBuilder,
+              backgroundDecoration: BoxDecoration(color: backgroundColor),
+              enablePanAlways: true,
+            ),
+            if (!showingBottomSheet)
+              const Positioned(
+                bottom: 0,
+                left: 0,
+                right: 0,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [AssetStackRow(), ViewerBottomBar()],
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.state.dart

@@ -0,0 +1,115 @@
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+class AssetViewerState {
+  final int backgroundOpacity;
+  final bool showingBottomSheet;
+  final bool showingControls;
+  final BaseAsset? currentAsset;
+  final int stackIndex;
+
+  const AssetViewerState({
+    this.backgroundOpacity = 255,
+    this.showingBottomSheet = false,
+    this.showingControls = true,
+    this.currentAsset,
+    this.stackIndex = 0,
+  });
+
+  AssetViewerState copyWith({
+    int? backgroundOpacity,
+    bool? showingBottomSheet,
+    bool? showingControls,
+    BaseAsset? currentAsset,
+    int? stackIndex,
+  }) {
+    return AssetViewerState(
+      backgroundOpacity: backgroundOpacity ?? this.backgroundOpacity,
+      showingBottomSheet: showingBottomSheet ?? this.showingBottomSheet,
+      showingControls: showingControls ?? this.showingControls,
+      currentAsset: currentAsset ?? this.currentAsset,
+      stackIndex: stackIndex ?? this.stackIndex,
+    );
+  }
+
+  @override
+  String toString() {
+    return 'AssetViewerState(opacity: $backgroundOpacity, bottomSheet: $showingBottomSheet, controls: $showingControls)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other.runtimeType != runtimeType) return false;
+    return other is AssetViewerState &&
+        other.backgroundOpacity == backgroundOpacity &&
+        other.showingBottomSheet == showingBottomSheet &&
+        other.showingControls == showingControls &&
+        other.currentAsset == currentAsset &&
+        other.stackIndex == stackIndex;
+  }
+
+  @override
+  int get hashCode =>
+      backgroundOpacity.hashCode ^
+      showingBottomSheet.hashCode ^
+      showingControls.hashCode ^
+      currentAsset.hashCode ^
+      stackIndex.hashCode;
+}
+
+class AssetViewerStateNotifier extends Notifier<AssetViewerState> {
+  @override
+  AssetViewerState build() {
+    return const AssetViewerState();
+  }
+
+  void reset() {
+    state = const AssetViewerState();
+  }
+
+  void setAsset(BaseAsset? asset) {
+    if (asset == state.currentAsset) {
+      return;
+    }
+    state = state.copyWith(currentAsset: asset, stackIndex: 0);
+  }
+
+  void setOpacity(int opacity) {
+    if (opacity == state.backgroundOpacity) {
+      return;
+    }
+    state = state.copyWith(backgroundOpacity: opacity, showingControls: opacity == 255 ? true : state.showingControls);
+  }
+
+  void setBottomSheet(bool showing) {
+    if (showing == state.showingBottomSheet) {
+      return;
+    }
+    state = state.copyWith(showingBottomSheet: showing, showingControls: showing ? true : state.showingControls);
+    if (showing) {
+      ref.read(videoPlayerControlsProvider.notifier).pause();
+    }
+  }
+
+  void setControls(bool isShowing) {
+    if (isShowing == state.showingControls) {
+      return;
+    }
+    state = state.copyWith(showingControls: isShowing);
+  }
+
+  void toggleControls() {
+    state = state.copyWith(showingControls: !state.showingControls);
+  }
+
+  void setStackIndex(int index) {
+    if (index == state.stackIndex) {
+      return;
+    }
+    state = state.copyWith(stackIndex: index);
+  }
+}
+
+final assetViewerProvider = NotifierProvider<AssetViewerStateNotifier, AssetViewerState>(AssetViewerStateNotifier.new);

mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.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/presentation/widgets/action_buttons/delete_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_image_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/add_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/video_controls.dart';
+
+class ViewerBottomBar extends ConsumerWidget {
+  const ViewerBottomBar({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+    final user = ref.watch(currentUserProvider);
+    final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
+    final isSheetOpen = ref.watch(assetViewerProvider.select((s) => s.showingBottomSheet));
+    int opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));
+    final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
+    final isInLockedView = ref.watch(inLockedViewProvider);
+
+    if (!showControls) {
+      opacity = 0;
+    }
+
+    final originalTheme = context.themeData;
+
+    final actions = <Widget>[
+      const ShareActionButton(source: ActionSource.viewer),
+
+      if (!isInLockedView) ...[
+        if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
+        if (asset.type == AssetType.image) const EditImageActionButton(),
+        if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
+
+        if (isOwner) ...[
+          asset.isLocalOnly
+              ? const DeleteLocalActionButton(source: ActionSource.viewer)
+              : const DeleteActionButton(source: ActionSource.viewer, showConfirmation: true),
+        ],
+      ],
+    ];
+
+    return IgnorePointer(
+      ignoring: opacity < 255,
+      child: AnimatedOpacity(
+        opacity: opacity / 255,
+        duration: Durations.short2,
+        child: AnimatedSwitcher(
+          duration: Durations.short4,
+          child: isSheetOpen
+              ? const SizedBox.shrink()
+              : Theme(
+                  data: context.themeData.copyWith(
+                    iconTheme: const IconThemeData(size: 22, color: Colors.white),
+                    textTheme: context.themeData.textTheme.copyWith(
+                      labelLarge: context.themeData.textTheme.labelLarge?.copyWith(color: Colors.white),
+                    ),
+                  ),
+                  child: Container(
+                    color: Colors.black.withAlpha(125),
+                    padding: EdgeInsets.only(bottom: context.padding.bottom, top: 16),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.end,
+                      children: [
+                        if (asset.isVideo) const VideoControls(),
+                        if (!isReadonlyModeEnabled)
+                          Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: actions),
+                      ],
+                    ),
+                  ),
+                ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart

@@ -0,0 +1,409 @@
+import 'dart:async';
+
+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:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/exif.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/album/album_tile.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/bottom_sheet/sheet_location_details.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/bottom_sheet/sheet_people_details.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/rating_bar.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/sheet_tile.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/user_metadata.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/repositories/asset_media.repository.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/bytes_units.dart';
+import 'package:immich_mobile/utils/timezone.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+const _kSeparator = '  •  ';
+
+class AssetDetailBottomSheet extends ConsumerWidget {
+  final DraggableScrollableController? controller;
+  final double initialChildSize;
+
+  const AssetDetailBottomSheet({this.controller, this.initialChildSize = 0.35, super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    return BaseBottomSheet(
+      actions: [],
+      slivers: const [_AssetDetailBottomSheet()],
+      controller: controller,
+      initialChildSize: initialChildSize,
+      minChildSize: 0.1,
+      maxChildSize: 0.88,
+      expand: false,
+      shouldCloseOnMinExtent: false,
+      resizeOnScroll: false,
+      backgroundColor: context.isDarkTheme ? context.colorScheme.surface : Colors.white,
+    );
+  }
+}
+
+class _AssetDetailBottomSheet extends ConsumerWidget {
+  const _AssetDetailBottomSheet();
+
+  String _getDateTime(BuildContext ctx, BaseAsset asset, ExifInfo? exifInfo) {
+    DateTime dateTime = asset.createdAt.toLocal();
+    Duration timeZoneOffset = dateTime.timeZoneOffset;
+
+    // Use EXIF timezone information if available (matching web app behavior)
+    if (exifInfo?.dateTimeOriginal != null) {
+      (dateTime, timeZoneOffset) = applyTimezoneOffset(
+        dateTime: exifInfo!.dateTimeOriginal!,
+        timeZone: exifInfo.timeZone,
+      );
+    }
+
+    final date = DateFormat.yMMMEd(ctx.locale.toLanguageTag()).format(dateTime);
+    final time = DateFormat.jm(ctx.locale.toLanguageTag()).format(dateTime);
+    final timezone = 'GMT${timeZoneOffset.formatAsOffset()}';
+    return '$date$_kSeparator$time $timezone';
+  }
+
+  String _getFileInfo(BaseAsset asset, ExifInfo? exifInfo) {
+    final height = asset.height;
+    final width = asset.width;
+    final resolution = (width != null && height != null) ? "${width.toInt()} x ${height.toInt()}" : null;
+    final fileSize = exifInfo?.fileSize != null ? formatBytes(exifInfo!.fileSize!) : null;
+
+    return switch ((fileSize, resolution)) {
+      (null, null) => '',
+      (String fileSize, null) => fileSize,
+      (null, String resolution) => resolution,
+      (String fileSize, String resolution) => '$fileSize$_kSeparator$resolution',
+    };
+  }
+
+  String? _getCameraInfoTitle(ExifInfo? exifInfo) {
+    if (exifInfo == null) {
+      return null;
+    }
+
+    return switch ((exifInfo.make, exifInfo.model)) {
+      (null, null) => null,
+      (String make, null) => make,
+      (null, String model) => model,
+      (String make, String model) => '$make $model',
+    };
+  }
+
+  String? _getCameraInfoSubtitle(ExifInfo? exifInfo) {
+    if (exifInfo == null) {
+      return null;
+    }
+    final exposureTime = exifInfo.exposureTime.isNotEmpty ? exifInfo.exposureTime : null;
+    final iso = exifInfo.iso != null ? 'ISO ${exifInfo.iso}' : null;
+    return [exposureTime, iso].where((spec) => spec != null && spec.isNotEmpty).join(_kSeparator);
+  }
+
+  String? _getLensInfoSubtitle(ExifInfo? exifInfo) {
+    if (exifInfo == null) {
+      return null;
+    }
+    final fNumber = exifInfo.fNumber.isNotEmpty ? 'ƒ/${exifInfo.fNumber}' : null;
+    final focalLength = exifInfo.focalLength.isNotEmpty ? '${exifInfo.focalLength} mm' : null;
+    return [fNumber, focalLength].where((spec) => spec != null && spec.isNotEmpty).join(_kSeparator);
+  }
+
+  Future<void> _editDateTime(BuildContext context, WidgetRef ref) async {
+    await ref.read(actionProvider.notifier).editDateTime(ActionSource.viewer, context);
+  }
+
+  Widget _buildAppearsInList(WidgetRef ref, BuildContext context) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    if (!asset.hasRemote) {
+      return const SizedBox.shrink();
+    }
+
+    String? remoteAssetId;
+    if (asset is RemoteAsset) {
+      remoteAssetId = asset.id;
+    } else if (asset is LocalAsset) {
+      remoteAssetId = asset.remoteAssetId;
+    }
+
+    if (remoteAssetId == null) {
+      return const SizedBox.shrink();
+    }
+
+    final userId = ref.watch(currentUserProvider)?.id;
+    final assetAlbums = ref.watch(albumsContainingAssetProvider(remoteAssetId));
+
+    return assetAlbums.when(
+      data: (albums) {
+        if (albums.isEmpty) {
+          return const SizedBox.shrink();
+        }
+
+        albums.sortBy((a) => a.name);
+
+        return Column(
+          spacing: 12,
+          children: [
+            if (albums.isNotEmpty)
+              SheetTile(
+                title: 'appears_in'.t(context: context),
+                titleStyle: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+              ),
+            Padding(
+              padding: const EdgeInsets.only(left: 24),
+              child: Column(
+                spacing: 12,
+                children: albums.map((album) {
+                  final isOwner = album.ownerId == userId;
+                  return AlbumTile(
+                    album: album,
+                    isOwner: isOwner,
+                    onAlbumSelected: (album) async {
+                      ref.invalidate(assetViewerProvider);
+                      unawaited(context.router.popAndPush(RemoteAlbumRoute(album: album)));
+                    },
+                  );
+                }).toList(),
+              ),
+            ),
+          ],
+        );
+      },
+      loading: () => const SizedBox.shrink(),
+      error: (_, __) => const SizedBox.shrink(),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SliverToBoxAdapter(child: SizedBox.shrink());
+    }
+
+    final exifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
+    final cameraTitle = _getCameraInfoTitle(exifInfo);
+    final lensTitle = exifInfo?.lens != null && exifInfo!.lens!.isNotEmpty ? exifInfo.lens : null;
+    final isOwner = ref.watch(currentUserProvider)?.id == (asset is RemoteAsset ? asset.ownerId : null);
+    final isRatingEnabled = ref
+        .watch(userMetadataPreferencesProvider)
+        .maybeWhen(data: (prefs) => prefs?.ratingsEnabled ?? false, orElse: () => false);
+
+    // Build file info tile based on asset type
+    Widget buildFileInfoTile() {
+      if (asset is LocalAsset) {
+        final assetMediaRepository = ref.watch(assetMediaRepositoryProvider);
+        return FutureBuilder<String?>(
+          future: assetMediaRepository.getOriginalFilename(asset.id),
+          builder: (context, snapshot) {
+            final displayName = snapshot.data ?? asset.name;
+            return SheetTile(
+              title: displayName,
+              titleStyle: context.textTheme.labelLarge,
+              leading: Icon(
+                asset.isImage ? Icons.image_outlined : Icons.videocam_outlined,
+                size: 24,
+                color: context.textTheme.labelLarge?.color,
+              ),
+              subtitle: _getFileInfo(asset, exifInfo),
+              subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+            );
+          },
+        );
+      } else {
+        // For remote assets, use the name directly
+        return SheetTile(
+          title: asset.name,
+          titleStyle: context.textTheme.labelLarge,
+          leading: Icon(
+            asset.isImage ? Icons.image_outlined : Icons.videocam_outlined,
+            size: 24,
+            color: context.textTheme.labelLarge?.color,
+          ),
+          subtitle: _getFileInfo(asset, exifInfo),
+          subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+        );
+      }
+    }
+
+    return SliverList.list(
+      children: [
+        // Asset Date and Time
+        SheetTile(
+          title: _getDateTime(context, asset, exifInfo),
+          titleStyle: context.textTheme.labelLarge,
+          trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
+          onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,
+        ),
+        if (exifInfo != null) _SheetAssetDescription(exif: exifInfo, isEditable: isOwner),
+        const SheetPeopleDetails(),
+        const SheetLocationDetails(),
+        // Details header
+        SheetTile(
+          title: 'details'.t(context: context),
+          titleStyle: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+        ),
+        // File info
+        buildFileInfoTile(),
+        // Camera info
+        if (cameraTitle != null) ...[
+          const SizedBox(height: 16),
+          SheetTile(
+            title: cameraTitle,
+            titleStyle: context.textTheme.labelLarge,
+            leading: Icon(Icons.camera_alt_outlined, size: 24, color: context.textTheme.labelLarge?.color),
+            subtitle: _getCameraInfoSubtitle(exifInfo),
+            subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+          ),
+        ],
+        // Lens info
+        if (lensTitle != null) ...[
+          const SizedBox(height: 16),
+          SheetTile(
+            title: lensTitle,
+            titleStyle: context.textTheme.labelLarge,
+            leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
+            subtitle: _getLensInfoSubtitle(exifInfo),
+            subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+          ),
+        ],
+        // Rating bar
+        if (isRatingEnabled) ...[
+          Padding(
+            padding: const EdgeInsets.only(left: 16.0, top: 16.0),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              spacing: 8,
+              children: [
+                Text(
+                  'rating'.t(context: context),
+                  style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+                ),
+                RatingBar(
+                  initialRating: exifInfo?.rating?.toDouble() ?? 0,
+                  filledColor: context.themeData.colorScheme.primary,
+                  unfilledColor: context.themeData.colorScheme.onSurface.withAlpha(100),
+                  itemSize: 40,
+                  onRatingUpdate: (rating) async {
+                    await ref.read(actionProvider.notifier).updateRating(ActionSource.viewer, rating.round());
+                  },
+                  onClearRating: () async {
+                    await ref.read(actionProvider.notifier).updateRating(ActionSource.viewer, 0);
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+        // Appears in (Albums)
+        Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
+        // padding at the bottom to avoid cut-off
+        const SizedBox(height: 60),
+      ],
+    );
+  }
+}
+
+class _SheetAssetDescription extends ConsumerStatefulWidget {
+  final ExifInfo exif;
+  final bool isEditable;
+
+  const _SheetAssetDescription({required this.exif, this.isEditable = true});
+
+  @override
+  ConsumerState<_SheetAssetDescription> createState() => _SheetAssetDescriptionState();
+}
+
+class _SheetAssetDescriptionState extends ConsumerState<_SheetAssetDescription> {
+  late TextEditingController _controller;
+  final _descriptionFocus = FocusNode();
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController(text: widget.exif.description ?? '');
+  }
+
+  Future<void> saveDescription(String? previousDescription) async {
+    final newDescription = _controller.text.trim();
+
+    if (newDescription == previousDescription) {
+      _descriptionFocus.unfocus();
+      return;
+    }
+
+    final editAction = await ref.read(actionProvider.notifier).updateDescription(ActionSource.viewer, newDescription);
+
+    if (!editAction.success) {
+      _controller.text = previousDescription ?? '';
+
+      ImmichToast.show(
+        context: context,
+        msg: 'exif_bottom_sheet_description_error'.t(context: context),
+        toastType: ToastType.error,
+      );
+    }
+
+    _descriptionFocus.unfocus();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Watch the current asset EXIF provider to get updates
+    final currentExifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
+
+    // Update controller text when EXIF data changes
+    final currentDescription = currentExifInfo?.description ?? '';
+    final hintText = (widget.isEditable ? 'exif_bottom_sheet_description' : 'exif_bottom_sheet_no_description').t(
+      context: context,
+    );
+    if (_controller.text != currentDescription && !_descriptionFocus.hasFocus) {
+      _controller.text = currentDescription;
+    }
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8),
+      child: IgnorePointer(
+        ignoring: !widget.isEditable,
+        child: TextField(
+          controller: _controller,
+          keyboardType: TextInputType.multiline,
+          focusNode: _descriptionFocus,
+          maxLines: null, // makes it grow as text is added
+          decoration: InputDecoration(
+            hintText: hintText,
+            border: InputBorder.none,
+            enabledBorder: InputBorder.none,
+            focusedBorder: InputBorder.none,
+            disabledBorder: InputBorder.none,
+            errorBorder: InputBorder.none,
+            focusedErrorBorder: InputBorder.none,
+          ),
+          onTapOutside: (_) => saveDescription(currentExifInfo?.description),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/sheet_location_details.widget.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/exif.model.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/presentation/widgets/asset_viewer/sheet_tile.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/exif_map.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class SheetLocationDetails extends ConsumerStatefulWidget {
+  const SheetLocationDetails({super.key});
+
+  @override
+  ConsumerState createState() => _SheetLocationDetailsState();
+}
+
+class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
+  MapLibreMapController? _mapController;
+
+  String? _getLocationName(ExifInfo? exifInfo) {
+    if (exifInfo == null) {
+      return null;
+    }
+
+    final cityName = exifInfo.city;
+    final stateName = exifInfo.state;
+
+    if (cityName != null && stateName != null) {
+      return "$cityName, $stateName";
+    }
+    return null;
+  }
+
+  void _onMapCreated(MapLibreMapController controller) {
+    _mapController = controller;
+  }
+
+  void _onExifChanged(AsyncValue<ExifInfo?>? previous, AsyncValue<ExifInfo?> current) {
+    final currentExif = current.valueOrNull;
+
+    if (currentExif != null && currentExif.hasCoordinates) {
+      _mapController?.moveCamera(CameraUpdate.newLatLng(LatLng(currentExif.latitude!, currentExif.longitude!)));
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    ref.listenManual(currentAssetExifProvider, _onExifChanged, fireImmediately: true);
+  }
+
+  void editLocation() async {
+    await ref.read(actionProvider.notifier).editLocation(ActionSource.viewer, context);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final asset = ref.watch(currentAssetNotifier);
+    final exifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
+    final hasCoordinates = exifInfo?.hasCoordinates ?? false;
+
+    // Guard local assets
+    if (asset is! RemoteAsset) {
+      return const SizedBox.shrink();
+    }
+
+    final locationName = _getLocationName(exifInfo);
+    final coordinates = "${exifInfo?.latitude?.toStringAsFixed(4)}, ${exifInfo?.longitude?.toStringAsFixed(4)}";
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 12),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          SheetTile(
+            title: 'location'.t(context: context),
+            titleStyle: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+            trailing: hasCoordinates ? const Icon(Icons.edit_location_alt, size: 20) : null,
+            onTap: editLocation,
+          ),
+          if (hasCoordinates)
+            Padding(
+              padding: EdgeInsets.symmetric(horizontal: context.isMobile ? 16.0 : 56.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  ExifMap(
+                    exifInfo: exifInfo!,
+                    markerId: asset.id,
+                    markerAssetThumbhash: asset.thumbHash,
+                    onMapCreated: _onMapCreated,
+                  ),
+                  const SizedBox(height: 16),
+                  if (locationName != null)
+                    Padding(
+                      padding: const EdgeInsets.only(bottom: 4.0),
+                      child: Text(locationName, style: context.textTheme.labelLarge),
+                    ),
+                  Text(
+                    coordinates,
+                    style: context.textTheme.bodySmall?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+                  ),
+                ],
+              ),
+            ),
+          if (!hasCoordinates)
+            SheetTile(
+              title: "add_a_location".t(context: context),
+              titleStyle: context.textTheme.bodyMedium?.copyWith(
+                fontWeight: FontWeight.w600,
+                color: context.primaryColor,
+              ),
+              leading: const Icon(Icons.location_off),
+              onTap: editLocation,
+            ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/sheet_people_details.widget.dart

@@ -0,0 +1,176 @@
+import 'package:auto_route/auto_route.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/person.model.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/presentation/widgets/people/person_edit_name_modal.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.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:immich_mobile/utils/people.utils.dart';
+
+class SheetPeopleDetails extends ConsumerStatefulWidget {
+  const SheetPeopleDetails({super.key});
+
+  @override
+  ConsumerState createState() => _SheetPeopleDetailsState();
+}
+
+class _SheetPeopleDetailsState extends ConsumerState<SheetPeopleDetails> {
+  @override
+  Widget build(BuildContext context) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset is! RemoteAsset) {
+      return const SizedBox.shrink();
+    }
+
+    final peopleFuture = ref.watch(driftPeopleAssetProvider(asset.id));
+
+    Future<void> showNameEditModal(DriftPerson person) async {
+      await showDialog(
+        context: context,
+        useRootNavigator: false,
+        builder: (BuildContext context) {
+          return DriftPersonNameEditForm(person: person);
+        },
+      );
+
+      ref.invalidate(driftPeopleAssetProvider(asset.id));
+    }
+
+    return peopleFuture.when(
+      data: (people) {
+        return AnimatedCrossFade(
+          firstChild: const SizedBox.shrink(),
+          secondChild: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(left: 16, top: 16, bottom: 16),
+                child: Text(
+                  "people".t(context: context),
+                  style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+                ),
+              ),
+              SizedBox(
+                height: 160,
+                child: ListView(
+                  padding: const EdgeInsets.only(left: 16.0),
+                  scrollDirection: Axis.horizontal,
+                  children: [
+                    for (final person in people)
+                      _PeopleAvatar(
+                        person: person,
+                        assetFileCreatedAt: asset.createdAt,
+                        onTap: () {
+                          final previousRouteData = ref.read(previousRouteDataProvider);
+                          final previousRouteArgs = previousRouteData?.arguments;
+
+                          // Prevent circular navigation
+                          if (previousRouteArgs is DriftPersonRouteArgs && previousRouteArgs.person.id == person.id) {
+                            context.back();
+                            return;
+                          }
+                          context.pop();
+                          context.pushRoute(DriftPersonRoute(person: person));
+                        },
+                        onNameTap: () => showNameEditModal(person),
+                      ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          crossFadeState: people.isEmpty ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+          duration: Durations.short4,
+        );
+      },
+      error: (error, stack) => Text("error_loading_people".t(context: context), style: context.textTheme.bodyMedium),
+      loading: () => const SizedBox.shrink(),
+    );
+  }
+}
+
+class _PeopleAvatar extends StatelessWidget {
+  final DriftPerson person;
+  final DateTime assetFileCreatedAt;
+  final VoidCallback? onTap;
+  final VoidCallback? onNameTap;
+  final double imageSize = 96;
+
+  const _PeopleAvatar({required this.person, required this.assetFileCreatedAt, this.onTap, this.onNameTap});
+
+  @override
+  Widget build(BuildContext context) {
+    final headers = ApiService.getRequestHeaders();
+
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxWidth: 96),
+      child: Padding(
+        padding: const EdgeInsets.only(right: 16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            GestureDetector(
+              onTap: onTap,
+              child: SizedBox(
+                height: imageSize,
+                child: Material(
+                  shape: CircleBorder(side: BorderSide(color: context.primaryColor.withAlpha(50), width: 1.0)),
+                  shadowColor: context.colorScheme.shadow,
+                  elevation: 3,
+                  child: CircleAvatar(
+                    maxRadius: imageSize / 2,
+                    backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(height: 4),
+            if (person.name.isEmpty)
+              GestureDetector(
+                onTap: () => onNameTap?.call(),
+                child: Text(
+                  "add_a_name".t(context: context),
+                  style: context.textTheme.labelLarge?.copyWith(color: context.primaryColor),
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                  textAlign: TextAlign.center,
+                ),
+              )
+            else
+              Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    person.name,
+                    textAlign: TextAlign.center,
+                    overflow: TextOverflow.ellipsis,
+                    style: context.textTheme.labelLarge,
+                    maxLines: 1,
+                  ),
+                  if (person.birthDate != null)
+                    FittedBox(
+                      fit: BoxFit.scaleDown,
+                      child: Text(
+                        formatAge(person.birthDate!, assetFileCreatedAt),
+                        textAlign: TextAlign.center,
+                        style: context.textTheme.bodyMedium?.copyWith(
+                          color: context.textTheme.bodyMedium?.color?.withAlpha(175),
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/rating_bar.widget.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+
+class RatingBar extends StatefulWidget {
+  final double initialRating;
+  final int itemCount;
+  final double itemSize;
+  final Color filledColor;
+  final Color unfilledColor;
+  final ValueChanged<int>? onRatingUpdate;
+  final VoidCallback? onClearRating;
+  final Widget? itemBuilder;
+  final double starPadding;
+
+  const RatingBar({
+    super.key,
+    this.initialRating = 0.0,
+    this.itemCount = 5,
+    this.itemSize = 40.0,
+    this.filledColor = Colors.amber,
+    this.unfilledColor = Colors.grey,
+    this.onRatingUpdate,
+    this.onClearRating,
+    this.itemBuilder,
+    this.starPadding = 4.0,
+  });
+
+  @override
+  State<RatingBar> createState() => _RatingBarState();
+}
+
+class _RatingBarState extends State<RatingBar> {
+  late double _currentRating;
+
+  @override
+  void initState() {
+    super.initState();
+    _currentRating = widget.initialRating;
+  }
+
+  void _updateRating(Offset localPosition, bool isRTL, {bool isTap = false}) {
+    final totalWidth = widget.itemCount * widget.itemSize + (widget.itemCount - 1) * widget.starPadding;
+    double dx = localPosition.dx;
+
+    if (isRTL) dx = totalWidth - dx;
+
+    double newRating;
+
+    if (dx <= 0) {
+      newRating = 0;
+    } else if (dx >= totalWidth) {
+      newRating = widget.itemCount.toDouble();
+    } else {
+      double starWithPadding = widget.itemSize + widget.starPadding;
+      int tappedIndex = (dx / starWithPadding).floor().clamp(0, widget.itemCount - 1);
+      newRating = tappedIndex + 1.0;
+
+      if (isTap && newRating == _currentRating && _currentRating != 0) {
+        newRating = 0;
+      }
+    }
+
+    if (_currentRating != newRating) {
+      setState(() {
+        _currentRating = newRating;
+      });
+      widget.onRatingUpdate?.call(newRating.round());
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isRTL = Directionality.of(context) == TextDirection.rtl;
+    final double visualAlignmentOffset = 5.0;
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Transform.translate(
+          offset: Offset(isRTL ? visualAlignmentOffset : -visualAlignmentOffset, 0),
+          child: GestureDetector(
+            behavior: HitTestBehavior.opaque,
+            onTapDown: (details) => _updateRating(details.localPosition, isRTL, isTap: true),
+            onPanUpdate: (details) => _updateRating(details.localPosition, isRTL, isTap: false),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              textDirection: isRTL ? TextDirection.rtl : TextDirection.ltr,
+              children: List.generate(widget.itemCount * 2 - 1, (i) {
+                if (i.isOdd) {
+                  return SizedBox(width: widget.starPadding);
+                }
+                int index = i ~/ 2;
+                bool filled = _currentRating > index;
+                return widget.itemBuilder ??
+                    Icon(
+                      Icons.star_rounded,
+                      size: widget.itemSize,
+                      color: filled ? widget.filledColor : widget.unfilledColor,
+                    );
+              }),
+            ),
+          ),
+        ),
+        if (_currentRating > 0)
+          Padding(
+            padding: const EdgeInsets.only(top: 12.0),
+            child: GestureDetector(
+              onTap: () {
+                setState(() {
+                  _currentRating = 0;
+                });
+                widget.onClearRating?.call();
+              },
+              child: Text(
+                'rating_clear'.t(context: context),
+                style: TextStyle(color: context.themeData.colorScheme.primary),
+              ),
+            ),
+          ),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/sheet_tile.widget.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class SheetTile extends ConsumerWidget {
+  final String title;
+  final Widget? leading;
+  final Widget? trailing;
+  final String? subtitle;
+  final TextStyle? titleStyle;
+  final TextStyle? subtitleStyle;
+  final VoidCallback? onTap;
+
+  const SheetTile({
+    super.key,
+    required this.title,
+    this.titleStyle,
+    this.leading,
+    this.subtitle,
+    this.subtitleStyle,
+    this.trailing,
+    this.onTap,
+  });
+
+  void copyTitle(BuildContext context, WidgetRef ref) {
+    Clipboard.setData(ClipboardData(text: title));
+    ImmichToast.show(
+      context: context,
+      msg: 'copied_to_clipboard'.t(context: context),
+      toastType: ToastType.info,
+    );
+    ref.read(hapticFeedbackProvider.notifier).selectionClick();
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final Widget titleWidget;
+    if (leading == null) {
+      titleWidget = LimitedBox(
+        maxWidth: double.infinity,
+        child: Text(title, style: titleStyle),
+      );
+    } else {
+      titleWidget = Container(
+        width: double.infinity,
+        padding: const EdgeInsets.only(left: 15, right: 15),
+        child: Text(title, style: titleStyle),
+      );
+    }
+
+    final Widget? subtitleWidget;
+    if (leading == null && subtitle != null) {
+      subtitleWidget = Text(subtitle!, style: subtitleStyle);
+    } else if (leading != null && subtitle != null) {
+      subtitleWidget = Padding(
+        padding: const EdgeInsets.only(left: 15),
+        child: Text(subtitle!, style: subtitleStyle),
+      );
+    } else {
+      subtitleWidget = null;
+    }
+
+    return ListTile(
+      dense: true,
+      visualDensity: VisualDensity.compact,
+      title: GestureDetector(onLongPress: () => copyTitle(context, ref), child: titleWidget),
+      titleAlignment: ListTileTitleAlignment.center,
+      leading: leading,
+      trailing: trailing,
+      contentPadding: leading == null ? null : const EdgeInsets.only(left: 25),
+      subtitle: subtitleWidget,
+      onTap: onTap,
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/top_app_bar.widget.dart

@@ -0,0 +1,122 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.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/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart';
+import 'package:immich_mobile/providers/activity.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+
+class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
+  const ViewerTopAppBar({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final album = ref.watch(currentRemoteAlbumProvider);
+
+    final user = ref.watch(currentUserProvider);
+    final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
+    final isInLockedView = ref.watch(inLockedViewProvider);
+    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+
+    final isShowingSheet = ref.watch(assetViewerProvider.select((state) => state.showingBottomSheet));
+    int opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));
+    final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
+
+    if (album != null && album.isActivityEnabled && album.isShared && asset is RemoteAsset) {
+      ref.watch(albumActivityProvider(album.id, asset.id));
+    }
+
+    if (!showControls) {
+      opacity = 0;
+    }
+
+    final originalTheme = context.themeData;
+
+    final actions = <Widget>[
+      if (asset.isMotionPhoto) const MotionPhotoActionButton(iconOnly: true),
+      if (album != null && album.isActivityEnabled && album.isShared)
+        IconButton(
+          icon: const Icon(Icons.chat_outlined),
+          onPressed: () {
+            EventStream.shared.emit(const ViewerOpenBottomSheetEvent(activitiesMode: true));
+          },
+        ),
+
+      if (asset.hasRemote && isOwner && !asset.isFavorite)
+        const FavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
+      if (asset.hasRemote && isOwner && asset.isFavorite)
+        const UnFavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
+
+      ViewerKebabMenu(originalTheme: originalTheme),
+    ];
+
+    final lockedViewActions = <Widget>[ViewerKebabMenu(originalTheme: originalTheme)];
+
+    return IgnorePointer(
+      ignoring: opacity < 255,
+      child: AnimatedOpacity(
+        opacity: opacity / 255,
+        duration: Durations.short2,
+        child: AppBar(
+          backgroundColor: isShowingSheet ? Colors.transparent : Colors.black.withAlpha(125),
+          leading: const _AppBarBackButton(),
+          iconTheme: const IconThemeData(size: 22, color: Colors.white),
+          actionsIconTheme: const IconThemeData(size: 22, color: Colors.white),
+          shape: const Border(),
+          actions: isShowingSheet || isReadonlyModeEnabled
+              ? null
+              : isInLockedView
+              ? lockedViewActions
+              : actions,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(60.0);
+}
+
+class _AppBarBackButton extends ConsumerWidget {
+  const _AppBarBackButton();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isShowingSheet = ref.watch(assetViewerProvider.select((state) => state.showingBottomSheet));
+    final backgroundColor = isShowingSheet && !context.isDarkTheme ? Colors.white : Colors.black;
+    final foregroundColor = isShowingSheet && !context.isDarkTheme ? Colors.black : Colors.white;
+
+    return Padding(
+      padding: const EdgeInsets.only(left: 12.0),
+      child: ElevatedButton(
+        style: ElevatedButton.styleFrom(
+          backgroundColor: backgroundColor,
+          shape: const CircleBorder(),
+          iconSize: 22,
+          iconColor: foregroundColor,
+          padding: EdgeInsets.zero,
+          elevation: isShowingSheet ? 4 : 0,
+        ),
+        onPressed: context.maybePop,
+        child: const Icon(Icons.arrow_back_rounded),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/video_viewer.widget.dart

@@ -0,0 +1,445 @@
+import 'dart:async';
+import 'dart:io';
+
+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/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/domain/services/setting.service.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/platform_extensions.dart';
+import 'package:immich_mobile/infrastructure/repositories/storage.repository.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer_controls.widget.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.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/providers/infrastructure/asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/utils/debounce.dart';
+import 'package:immich_mobile/utils/hooks/interval_hook.dart';
+import 'package:logging/logging.dart';
+import 'package:native_video_player/native_video_player.dart';
+import 'package:wakelock_plus/wakelock_plus.dart';
+
+bool _isCurrentAsset(BaseAsset asset, BaseAsset? currentAsset) {
+  if (asset is RemoteAsset) {
+    return switch (currentAsset) {
+      RemoteAsset remoteAsset => remoteAsset.id == asset.id,
+      LocalAsset localAsset => localAsset.remoteId == asset.id,
+      _ => false,
+    };
+  } else if (asset is LocalAsset) {
+    return switch (currentAsset) {
+      RemoteAsset remoteAsset => remoteAsset.localId == asset.id,
+      LocalAsset localAsset => localAsset.id == asset.id,
+      _ => false,
+    };
+  }
+  return false;
+}
+
+class NativeVideoViewer extends HookConsumerWidget {
+  static final log = Logger('NativeVideoViewer');
+  final BaseAsset asset;
+  final bool showControls;
+  final int playbackDelayFactor;
+  final Widget image;
+
+  const NativeVideoViewer({
+    super.key,
+    required this.asset,
+    required this.image,
+    this.showControls = true,
+    this.playbackDelayFactor = 1,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final controller = useState<NativeVideoPlayerController?>(null);
+    final lastVideoPosition = useRef(-1);
+    final isBuffering = useRef(false);
+
+    // Used to track whether the video should play when the app
+    // is brought back to the foreground
+    final shouldPlayOnForeground = useRef(true);
+
+    // When a video is opened through the timeline, `isCurrent` will immediately be true.
+    // When swiping from video A to video B, `isCurrent` will initially be true for video A and false for video B.
+    // If the swipe is completed, `isCurrent` will be true for video B after a delay.
+    // If the swipe is canceled, `currentAsset` will not have changed and video A will continue to play.
+    final currentAsset = useState(ref.read(currentAssetNotifier));
+    final isCurrent = _isCurrentAsset(asset, currentAsset.value);
+
+    // Used to show the placeholder during hero animations for remote videos to avoid a stutter
+    final isVisible = useState(Platform.isIOS && asset.hasLocal);
+
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+
+    Future<VideoSource?> createSource() async {
+      if (!context.mounted) {
+        return null;
+      }
+
+      final videoAsset = await ref.read(assetServiceProvider).getAsset(asset) ?? asset;
+      if (!context.mounted) {
+        return null;
+      }
+
+      try {
+        if (videoAsset.hasLocal && videoAsset.livePhotoVideoId == null) {
+          final id = videoAsset is LocalAsset ? videoAsset.id : (videoAsset as RemoteAsset).localId!;
+          final file = await StorageRepository().getFileForAsset(id);
+          if (!context.mounted) {
+            return null;
+          }
+
+          if (file == null) {
+            throw Exception('No file found for the video');
+          }
+
+          // Pass a file:// URI so Android's Uri.parse doesn't
+          // interpret characters like '#' as fragment identifiers.
+          final source = await VideoSource.init(
+            path: CurrentPlatform.isAndroid ? file.uri.toString() : file.path,
+            type: VideoSourceType.file,
+          );
+          return source;
+        }
+
+        final remoteId = (videoAsset as RemoteAsset).id;
+
+        // Use a network URL for the video player controller
+        final serverEndpoint = Store.get(StoreKey.serverEndpoint);
+        final isOriginalVideo = ref.read(settingsProvider).get<bool>(Setting.loadOriginalVideo);
+        final String postfixUrl = isOriginalVideo ? 'original' : 'video/playback';
+        final String videoUrl = videoAsset.livePhotoVideoId != null
+            ? '$serverEndpoint/assets/${videoAsset.livePhotoVideoId}/$postfixUrl'
+            : '$serverEndpoint/assets/$remoteId/$postfixUrl';
+
+        final source = await VideoSource.init(
+          path: videoUrl,
+          type: VideoSourceType.network,
+          headers: ApiService.getRequestHeaders(),
+        );
+        return source;
+      } catch (error) {
+        log.severe('Error creating video source for asset ${videoAsset.name}: $error');
+        return null;
+      }
+    }
+
+    final videoSource = useMemoized<Future<VideoSource?>>(() => createSource());
+    final aspectRatio = useState<double?>(null);
+    useMemoized(() async {
+      if (!context.mounted || aspectRatio.value != null) {
+        return null;
+      }
+
+      try {
+        aspectRatio.value = await ref.read(assetServiceProvider).getAspectRatio(asset);
+      } catch (error) {
+        log.severe('Error getting aspect ratio for asset ${asset.name}: $error');
+      }
+    }, [asset.heroTag]);
+
+    void checkIfBuffering() {
+      if (!context.mounted) {
+        return;
+      }
+
+      final videoPlayback = ref.read(videoPlaybackValueProvider);
+      if ((isBuffering.value || videoPlayback.state == VideoPlaybackState.initializing) &&
+          videoPlayback.state != VideoPlaybackState.buffering) {
+        ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback.copyWith(
+          state: VideoPlaybackState.buffering,
+        );
+      }
+    }
+
+    // Timer to mark videos as buffering if the position does not change
+    useInterval(const Duration(seconds: 5), checkIfBuffering);
+
+    // When the position changes, seek to the position
+    // Debounce the seek to avoid seeking too often
+    // But also don't delay the seek too much to maintain visual feedback
+    final seekDebouncer = useDebouncer(
+      interval: const Duration(milliseconds: 100),
+      maxWaitTime: const Duration(milliseconds: 200),
+    );
+    ref.listen(videoPlayerControlsProvider, (oldControls, newControls) {
+      final playerController = controller.value;
+      if (playerController == null) {
+        return;
+      }
+
+      final playbackInfo = playerController.playbackInfo;
+      if (playbackInfo == null) {
+        return;
+      }
+
+      final oldSeek = oldControls?.position.inMilliseconds;
+      final newSeek = newControls.position.inMilliseconds;
+      if (oldSeek != newSeek || newControls.restarted) {
+        seekDebouncer.run(() => playerController.seekTo(newSeek));
+      }
+
+      if (oldControls?.pause != newControls.pause || newControls.restarted) {
+        unawaited(_onPauseChange(context, playerController, seekDebouncer, newControls.pause));
+      }
+    });
+
+    void onPlaybackReady() async {
+      final videoController = controller.value;
+      if (videoController == null || !isCurrent || !context.mounted) {
+        return;
+      }
+
+      final videoPlayback = VideoPlaybackValue.fromNativeController(videoController);
+      ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback;
+
+      if (ref.read(assetViewerProvider.select((s) => s.showingBottomSheet))) {
+        return;
+      }
+
+      try {
+        final autoPlayVideo = AppSetting.get(Setting.autoPlayVideo);
+        if (autoPlayVideo) {
+          await videoController.play();
+        }
+        await videoController.setVolume(0.9);
+      } catch (error) {
+        log.severe('Error playing video: $error');
+      }
+    }
+
+    void onPlaybackStatusChanged() {
+      final videoController = controller.value;
+      if (videoController == null || !context.mounted) {
+        return;
+      }
+
+      final videoPlayback = VideoPlaybackValue.fromNativeController(videoController);
+      if (videoPlayback.state == VideoPlaybackState.playing) {
+        // Sync with the controls playing
+        WakelockPlus.enable();
+      } else {
+        // Sync with the controls pause
+        WakelockPlus.disable();
+      }
+
+      ref.read(videoPlaybackValueProvider.notifier).status = videoPlayback.state;
+    }
+
+    void onPlaybackPositionChanged() {
+      // When seeking, these events sometimes move the slider to an older position
+      if (seekDebouncer.isActive) {
+        return;
+      }
+
+      final videoController = controller.value;
+      if (videoController == null || !context.mounted) {
+        return;
+      }
+
+      final playbackInfo = videoController.playbackInfo;
+      if (playbackInfo == null) {
+        return;
+      }
+
+      ref.read(videoPlaybackValueProvider.notifier).position = Duration(milliseconds: playbackInfo.position);
+
+      // Check if the video is buffering
+      if (playbackInfo.status == PlaybackStatus.playing) {
+        isBuffering.value = lastVideoPosition.value == playbackInfo.position;
+        lastVideoPosition.value = playbackInfo.position;
+      } else {
+        isBuffering.value = false;
+        lastVideoPosition.value = -1;
+      }
+    }
+
+    void onPlaybackEnded() {
+      final videoController = controller.value;
+      if (videoController == null || !context.mounted) {
+        return;
+      }
+
+      if (videoController.playbackInfo?.status == PlaybackStatus.stopped) {
+        ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
+      }
+    }
+
+    void removeListeners(NativeVideoPlayerController controller) {
+      controller.onPlaybackPositionChanged.removeListener(onPlaybackPositionChanged);
+      controller.onPlaybackStatusChanged.removeListener(onPlaybackStatusChanged);
+      controller.onPlaybackReady.removeListener(onPlaybackReady);
+      controller.onPlaybackEnded.removeListener(onPlaybackEnded);
+    }
+
+    void initController(NativeVideoPlayerController nc) async {
+      if (controller.value != null || !context.mounted) {
+        return;
+      }
+      ref.read(videoPlayerControlsProvider.notifier).reset();
+      ref.read(videoPlaybackValueProvider.notifier).reset();
+
+      final source = await videoSource;
+      if (source == null || !context.mounted) {
+        return;
+      }
+
+      nc.onPlaybackPositionChanged.addListener(onPlaybackPositionChanged);
+      nc.onPlaybackStatusChanged.addListener(onPlaybackStatusChanged);
+      nc.onPlaybackReady.addListener(onPlaybackReady);
+      nc.onPlaybackEnded.addListener(onPlaybackEnded);
+
+      unawaited(
+        nc.loadVideoSource(source).catchError((error) {
+          log.severe('Error loading video source: $error');
+        }),
+      );
+      final loopVideo = ref.read(appSettingsServiceProvider).getSetting<bool>(AppSettingsEnum.loopVideo);
+      unawaited(nc.setLoop(!asset.isMotionPhoto && loopVideo));
+
+      controller.value = nc;
+      Timer(const Duration(milliseconds: 200), checkIfBuffering);
+    }
+
+    ref.listen(currentAssetNotifier, (_, value) {
+      final playerController = controller.value;
+      if (playerController != null && value != asset) {
+        removeListeners(playerController);
+      }
+
+      if (value != null) {
+        isVisible.value = _isCurrentAsset(value, asset);
+      }
+      final curAsset = currentAsset.value;
+      if (curAsset == asset) {
+        return;
+      }
+
+      final imageToVideo = curAsset != null && !curAsset.isVideo;
+
+      // No need to delay video playback when swiping from an image to a video
+      if (imageToVideo && Platform.isIOS) {
+        currentAsset.value = value;
+        onPlaybackReady();
+        return;
+      }
+
+      // Delay the video playback to avoid a stutter in the swipe animation
+      // Note, in some circumstances a longer delay is needed (eg: memories),
+      // the playbackDelayFactor can be used for this
+      // This delay seems like a hacky way to resolve underlying bugs in video
+      // playback, but other resolutions failed thus far
+      Timer(
+        Platform.isIOS
+            ? Duration(milliseconds: 300 * playbackDelayFactor)
+            : imageToVideo
+            ? Duration(milliseconds: 200 * playbackDelayFactor)
+            : Duration(milliseconds: 400 * playbackDelayFactor),
+        () {
+          if (!context.mounted) {
+            return;
+          }
+
+          currentAsset.value = value;
+          if (currentAsset.value == asset) {
+            onPlaybackReady();
+          }
+        },
+      );
+    });
+
+    useEffect(() {
+      // If opening a remote video from a hero animation, delay visibility to avoid a stutter
+      final timer = isVisible.value ? null : Timer(const Duration(milliseconds: 300), () => isVisible.value = true);
+
+      return () {
+        timer?.cancel();
+        final playerController = controller.value;
+        if (playerController == null) {
+          return;
+        }
+        removeListeners(playerController);
+        playerController.stop().catchError((error) {
+          log.fine('Error stopping video: $error');
+        });
+
+        WakelockPlus.disable();
+      };
+    }, const []);
+
+    useOnAppLifecycleStateChange((_, state) async {
+      if (state == AppLifecycleState.resumed && shouldPlayOnForeground.value) {
+        await controller.value?.play();
+      } else if (state == AppLifecycleState.paused) {
+        final videoPlaying = await controller.value?.isPlaying();
+        if (videoPlaying ?? true) {
+          shouldPlayOnForeground.value = true;
+          await controller.value?.pause();
+        } else {
+          shouldPlayOnForeground.value = false;
+        }
+      }
+    });
+
+    return Stack(
+      children: [
+        // This remains under the video to avoid flickering
+        // For motion videos, this is the image portion of the asset
+        Center(key: ValueKey(asset.heroTag), child: image),
+        if (aspectRatio.value != null && !isCasting)
+          Visibility.maintain(
+            key: ValueKey(asset),
+            visible: isVisible.value,
+            child: Center(
+              key: ValueKey(asset),
+              child: AspectRatio(
+                key: ValueKey(asset),
+                aspectRatio: aspectRatio.value!,
+                child: isCurrent ? NativeVideoPlayerView(key: ValueKey(asset), onViewReady: initController) : null,
+              ),
+            ),
+          ),
+        if (showControls) const Center(child: VideoViewerControls()),
+      ],
+    );
+  }
+
+  Future<void> _onPauseChange(
+    BuildContext context,
+    NativeVideoPlayerController controller,
+    Debouncer seekDebouncer,
+    bool isPaused,
+  ) async {
+    if (!context.mounted) {
+      return;
+    }
+
+    // Make sure the last seek is complete before pausing or playing
+    // Otherwise, `onPlaybackPositionChanged` can receive outdated events
+    if (seekDebouncer.isActive) {
+      await seekDebouncer.drain();
+    }
+
+    try {
+      if (isPaused) {
+        await controller.pause();
+      } else {
+        await controller.play();
+      }
+    } catch (error) {
+      log.severe('Error pausing or playing video: $error');
+    }
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/video_viewer_controls.widget.dart

@@ -0,0 +1,111 @@
+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/presentation/widgets/asset_viewer/asset_viewer.state.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/providers/infrastructure/asset_viewer/current_asset.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 VideoViewerControls extends HookConsumerWidget {
+  final Duration hideTimerDuration;
+
+  const VideoViewerControls({super.key, this.hideTimerDuration = const Duration(seconds: 5)});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final assetIsVideo = ref.watch(currentAssetNotifier.select((asset) => asset != null && asset.isVideo));
+    bool showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
+    final showBottomSheet = ref.watch(assetViewerProvider.select((s) => s.showingBottomSheet));
+    if (showBottomSheet) {
+      showControls = false;
+    }
+    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(assetViewerProvider.notifier).setControls(false);
+      }
+    });
+    final showBuffering = state == VideoPlaybackState.buffering && !cast.isCasting;
+
+    /// Shows the controls and starts the timer to hide them
+    void showControlsAndStartHideTimer() {
+      hideTimer.reset();
+      ref.read(assetViewerProvider.notifier).setControls(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(currentAssetNotifier);
+          if (asset == null) {
+            return;
+          }
+          // ref.read(castProvider.notifier).loadMedia(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(assetViewerProvider.notifier).setControls(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/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.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/utils/action_button.utils.dart';
+
+class ViewerKebabMenu extends ConsumerWidget {
+  const ViewerKebabMenu({super.key, this.originalTheme});
+
+  final ThemeData? originalTheme;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final user = ref.watch(currentUserProvider);
+    final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+    final timelineOrigin = ref.read(timelineServiceProvider).origin;
+    final isTrashEnable = ref.watch(serverInfoProvider.select((state) => state.serverFeatures.trash));
+    final isInLockedView = ref.watch(inLockedViewProvider);
+    final currentAlbum = ref.watch(currentRemoteAlbumProvider);
+    final isArchived = asset is RemoteAsset && asset.visibility == AssetVisibility.archive;
+    final advancedTroubleshooting = ref.watch(settingsProvider.notifier).get(Setting.advancedTroubleshooting);
+
+    final actionContext = ActionButtonContext(
+      asset: asset,
+      isOwner: isOwner,
+      isArchived: isArchived,
+      isTrashEnabled: isTrashEnable,
+      isStacked: asset is RemoteAsset && asset.stackId != null,
+      isInLockedView: isInLockedView,
+      currentAlbum: currentAlbum,
+      advancedTroubleshooting: advancedTroubleshooting,
+      source: ActionSource.viewer,
+      isCasting: isCasting,
+      timelineOrigin: timelineOrigin,
+      originalTheme: originalTheme,
+    );
+
+    final menuChildren = ActionButtonBuilder.buildViewerKebabMenu(actionContext, context, ref);
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(context.themeData.scaffoldBackgroundColor),
+        surfaceTintColor: const WidgetStatePropertyAll(Colors.grey),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 6)),
+      ),
+      menuChildren: [
+        ConstrainedBox(
+          constraints: const BoxConstraints(minWidth: 150),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: menuChildren,
+          ),
+        ),
+      ],
+      builder: (context, controller, child) {
+        return IconButton(
+          icon: const Icon(Icons.more_vert_rounded),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
+        );
+      },
+    );
+  }
+}

mobile/lib/presentation/widgets/backup/backup_toggle_button.widget.dart

@@ -0,0 +1,176 @@
+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/app_settings.provider.dart';
+import 'package:immich_mobile/providers/backup/drift_backup.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+
+class BackupToggleButton extends ConsumerStatefulWidget {
+  final VoidCallback onStart;
+  final VoidCallback onStop;
+
+  const BackupToggleButton({super.key, required this.onStart, required this.onStop});
+
+  @override
+  ConsumerState<BackupToggleButton> createState() => BackupToggleButtonState();
+}
+
+class BackupToggleButtonState extends ConsumerState<BackupToggleButton> with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<double> _gradientAnimation;
+  bool _isEnabled = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(duration: const Duration(seconds: 8), vsync: this);
+
+    _gradientAnimation = Tween<double>(
+      begin: 0,
+      end: 1,
+    ).animate(CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
+
+    _isEnabled = ref.read(appSettingsServiceProvider).getSetting(AppSettingsEnum.enableBackup);
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  Future<void> _onToggle(bool value) async {
+    await ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.enableBackup, value);
+
+    setState(() {
+      _isEnabled = value;
+    });
+
+    if (value) {
+      widget.onStart.call();
+    } else {
+      widget.onStop.call();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final uploadTasks = ref.watch(driftBackupProvider.select((state) => state.uploadItems));
+
+    final isSyncing = ref.watch(driftBackupProvider.select((state) => state.isSyncing));
+
+    final iCloudProgress = ref.watch(driftBackupProvider.select((state) => state.iCloudDownloadProgress));
+
+    final errorCount = ref.watch(driftBackupProvider.select((state) => state.errorCount));
+
+    final isProcessing = uploadTasks.isNotEmpty || isSyncing || iCloudProgress.isNotEmpty;
+
+    return AnimatedBuilder(
+      animation: _animationController,
+      builder: (context, child) {
+        final gradientColors = [
+          Color.lerp(
+            context.primaryColor.withValues(alpha: 0.5),
+            context.primaryColor.withValues(alpha: 0.3),
+            _gradientAnimation.value,
+          )!,
+          Color.lerp(
+            context.primaryColor.withValues(alpha: 0.2),
+            context.primaryColor.withValues(alpha: 0.4),
+            _gradientAnimation.value,
+          )!,
+          Color.lerp(
+            context.primaryColor.withValues(alpha: 0.3),
+            context.primaryColor.withValues(alpha: 0.5),
+            _gradientAnimation.value,
+          )!,
+        ];
+
+        return Container(
+          margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
+          decoration: BoxDecoration(
+            borderRadius: const BorderRadius.all(Radius.circular(20)),
+            gradient: LinearGradient(
+              colors: gradientColors,
+              stops: const [0.0, 0.5, 1.0],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+            ),
+            boxShadow: [
+              BoxShadow(color: context.primaryColor.withValues(alpha: 0.1), blurRadius: 12, offset: const Offset(0, 2)),
+            ],
+          ),
+          child: Container(
+            margin: const EdgeInsets.all(1.5),
+            decoration: BoxDecoration(
+              borderRadius: const BorderRadius.all(Radius.circular(18.5)),
+              color: context.colorScheme.surfaceContainerLow,
+            ),
+            child: Material(
+              color: context.colorScheme.surfaceContainerLow,
+              borderRadius: const BorderRadius.all(Radius.circular(20.5)),
+              child: InkWell(
+                borderRadius: const BorderRadius.all(Radius.circular(20.5)),
+                onTap: () => _onToggle(!_isEnabled),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
+                  child: Row(
+                    children: [
+                      Container(
+                        padding: const EdgeInsets.all(8),
+                        decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          gradient: LinearGradient(
+                            colors: [
+                              context.primaryColor.withValues(alpha: 0.2),
+                              context.primaryColor.withValues(alpha: 0.1),
+                            ],
+                          ),
+                        ),
+                        child: isProcessing
+                            ? const SizedBox(width: 24, height: 24, child: CircularProgressIndicator(strokeWidth: 2))
+                            : Icon(Icons.cloud_upload_outlined, color: context.primaryColor, size: 24),
+                      ),
+                      const SizedBox(width: 16),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Row(
+                              crossAxisAlignment: CrossAxisAlignment.center,
+                              children: [
+                                Flexible(
+                                  child: Text(
+                                    "enable_backup".t(context: context),
+                                    style: context.textTheme.titleMedium?.copyWith(
+                                      fontWeight: FontWeight.w600,
+                                      color: context.primaryColor,
+                                    ),
+                                  ),
+                                ),
+                              ],
+                            ),
+                            if (errorCount > 0)
+                              Padding(
+                                padding: const EdgeInsets.only(top: 2),
+                                child: Text(
+                                  "upload_error_with_count".t(context: context, args: {'count': '$errorCount'}),
+                                  style: context.textTheme.labelMedium?.copyWith(color: context.colorScheme.error),
+                                ),
+                              ),
+                          ],
+                        ),
+                      ),
+                      Switch.adaptive(value: _isEnabled, onChanged: (value) => _onToggle(value)),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/archive_bottom_sheet.widget.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_date_time_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_location_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_link_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/stack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/unarchive_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+
+class ArchiveBottomSheet extends ConsumerWidget {
+  const ArchiveBottomSheet({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final multiselect = ref.watch(multiSelectProvider);
+    final isTrashEnable = ref.watch(serverInfoProvider.select((state) => state.serverFeatures.trash));
+
+    return BaseBottomSheet(
+      initialChildSize: 0.25,
+      maxChildSize: 0.4,
+      shouldCloseOnMinExtent: false,
+      actions: [
+        const ShareActionButton(source: ActionSource.timeline),
+        if (multiselect.hasRemote) ...[
+          const ShareLinkActionButton(source: ActionSource.timeline),
+          const UnArchiveActionButton(source: ActionSource.timeline),
+          const FavoriteActionButton(source: ActionSource.timeline),
+          const DownloadActionButton(source: ActionSource.timeline),
+          isTrashEnable
+              ? const TrashActionButton(source: ActionSource.timeline)
+              : const DeletePermanentActionButton(source: ActionSource.timeline),
+          const EditDateTimeActionButton(source: ActionSource.timeline),
+          const EditLocationActionButton(source: ActionSource.timeline),
+          const MoveToLockFolderActionButton(source: ActionSource.timeline),
+          if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
+          if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
+        ],
+        if (multiselect.hasMerged) const DeleteLocalActionButton(source: ActionSource.timeline),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart

@@ -0,0 +1,132 @@
+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/presentation/widgets/timeline/timeline.state.dart';
+
+class BaseBottomSheet extends ConsumerStatefulWidget {
+  final List<Widget> actions;
+  final DraggableScrollableController? controller;
+  final List<Widget>? slivers;
+  final Widget? footer;
+  final double initialChildSize;
+  final double minChildSize;
+  final double maxChildSize;
+  final bool expand;
+  final bool shouldCloseOnMinExtent;
+  final bool resizeOnScroll;
+  final Color? backgroundColor;
+
+  const BaseBottomSheet({
+    super.key,
+    required this.actions,
+    this.slivers,
+    this.footer,
+    this.controller,
+    this.initialChildSize = 0.35,
+    double? minChildSize,
+    this.maxChildSize = 0.65,
+    this.expand = true,
+    this.shouldCloseOnMinExtent = true,
+    this.resizeOnScroll = true,
+    this.backgroundColor,
+  }) : minChildSize = minChildSize ?? 0.15;
+
+  @override
+  ConsumerState<BaseBottomSheet> createState() => _BaseDraggableScrollableSheetState();
+}
+
+class _BaseDraggableScrollableSheetState extends ConsumerState<BaseBottomSheet> {
+  late DraggableScrollableController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = widget.controller ?? DraggableScrollableController();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    ref.listen(timelineStateProvider, (previous, next) {
+      if (!widget.resizeOnScroll) {
+        return;
+      }
+
+      if (previous?.isInteracting != true && next.isInteracting) {
+        _controller.animateTo(
+          widget.minChildSize,
+          duration: const Duration(milliseconds: 200),
+          curve: Curves.easeInOut,
+        );
+      }
+    });
+
+    return DraggableScrollableSheet(
+      controller: _controller,
+      initialChildSize: widget.initialChildSize,
+      minChildSize: widget.minChildSize,
+      maxChildSize: widget.maxChildSize,
+      snap: false,
+      expand: widget.expand,
+      shouldCloseOnMinExtent: widget.shouldCloseOnMinExtent,
+      builder: (BuildContext context, ScrollController scrollController) {
+        return Card(
+          color: widget.backgroundColor ?? context.colorScheme.surfaceContainer,
+          elevation: 3.0,
+          shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(18))),
+          margin: const EdgeInsets.symmetric(horizontal: 0),
+          child: Column(
+            children: [
+              Expanded(
+                child: CustomScrollView(
+                  controller: scrollController,
+                  slivers: [
+                    const SliverToBoxAdapter(child: _DragHandle()),
+                    if (widget.actions.isNotEmpty)
+                      SliverToBoxAdapter(
+                        child: Column(
+                          children: [
+                            SingleChildScrollView(
+                              scrollDirection: Axis.horizontal,
+                              child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: widget.actions),
+                            ),
+                            const Divider(indent: 16, endIndent: 16),
+                            const SizedBox(height: 16),
+                          ],
+                        ),
+                      ),
+                    if (widget.slivers != null) ...widget.slivers!,
+                  ],
+                ),
+              ),
+              if (widget.footer != null) widget.footer!,
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _DragHandle extends StatelessWidget {
+  const _DragHandle();
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 38,
+      child: Center(
+        child: SizedBox(
+          width: 32,
+          height: 6,
+          child: DecoratedBox(
+            decoration: BoxDecoration(
+              borderRadius: const BorderRadius.all(Radius.circular(20)),
+              color: context.themeData.dividerColor.lighten(amount: 0.6),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/favorite_bottom_sheet.widget.dart

@@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/album/album.model.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_date_time_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_location_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_link_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/stack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/album/album_selector.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class FavoriteBottomSheet extends ConsumerWidget {
+  const FavoriteBottomSheet({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final multiselect = ref.watch(multiSelectProvider);
+    final isTrashEnable = ref.watch(serverInfoProvider.select((state) => state.serverFeatures.trash));
+
+    Future<void> addAssetsToAlbum(RemoteAlbum album) async {
+      final selectedAssets = multiselect.selectedAssets;
+      if (selectedAssets.isEmpty) {
+        return;
+      }
+
+      final remoteAssets = selectedAssets.whereType<RemoteAsset>();
+      final addedCount = await ref
+          .read(remoteAlbumProvider.notifier)
+          .addAssets(album.id, remoteAssets.map((e) => e.id).toList());
+
+      if (selectedAssets.length != remoteAssets.length) {
+        ImmichToast.show(
+          context: context,
+          msg: 'add_to_album_bottom_sheet_some_local_assets'.t(context: context),
+        );
+      }
+
+      if (addedCount != remoteAssets.length) {
+        ImmichToast.show(
+          context: context,
+          msg: 'add_to_album_bottom_sheet_already_exists'.t(args: {"album": album.name}),
+        );
+      } else {
+        ImmichToast.show(
+          context: context,
+          msg: 'add_to_album_bottom_sheet_added'.t(args: {"album": album.name}),
+        );
+      }
+
+      ref.read(multiSelectProvider.notifier).reset();
+    }
+
+    return BaseBottomSheet(
+      initialChildSize: 0.4,
+      maxChildSize: 0.7,
+      shouldCloseOnMinExtent: false,
+      actions: [
+        const ShareActionButton(source: ActionSource.timeline),
+        if (multiselect.hasRemote) ...[
+          const ShareLinkActionButton(source: ActionSource.timeline),
+          const UnFavoriteActionButton(source: ActionSource.timeline),
+          const ArchiveActionButton(source: ActionSource.timeline),
+          const DownloadActionButton(source: ActionSource.timeline),
+          isTrashEnable
+              ? const TrashActionButton(source: ActionSource.timeline)
+              : const DeletePermanentActionButton(source: ActionSource.timeline),
+          const EditDateTimeActionButton(source: ActionSource.timeline),
+          const EditLocationActionButton(source: ActionSource.timeline),
+          const MoveToLockFolderActionButton(source: ActionSource.timeline),
+          if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
+          if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
+        ],
+        if (multiselect.hasMerged) const DeleteLocalActionButton(source: ActionSource.timeline),
+      ],
+      slivers: multiselect.hasRemote
+          ? [const AddToAlbumHeader(), AlbumSelector(onAlbumSelected: addAssetsToAlbum)]
+          : [],
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/general_bottom_sheet.widget.dart

@@ -0,0 +1,135 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/album/album.model.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/advanced_info_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_date_time_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_location_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_link_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/stack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/album/album_selector.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/album.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/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class GeneralBottomSheet extends ConsumerStatefulWidget {
+  final double? minChildSize;
+  const GeneralBottomSheet({super.key, this.minChildSize});
+
+  @override
+  ConsumerState<GeneralBottomSheet> createState() => _GeneralBottomSheetState();
+}
+
+class _GeneralBottomSheetState extends ConsumerState<GeneralBottomSheet> {
+  late DraggableScrollableController sheetController;
+  @override
+  void initState() {
+    super.initState();
+    sheetController = DraggableScrollableController();
+  }
+
+  @override
+  void dispose() {
+    sheetController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final multiselect = ref.watch(multiSelectProvider);
+    final isTrashEnable = ref.watch(serverInfoProvider.select((state) => state.serverFeatures.trash));
+    final advancedTroubleshooting = ref.watch(settingsProvider.notifier).get(Setting.advancedTroubleshooting);
+
+    Future<void> addAssetsToAlbum(RemoteAlbum album) async {
+      final selectedAssets = multiselect.selectedAssets;
+      if (selectedAssets.isEmpty) {
+        return;
+      }
+
+      final remoteAssets = selectedAssets.whereType<RemoteAsset>();
+      final addedCount = await ref
+          .read(remoteAlbumProvider.notifier)
+          .addAssets(album.id, remoteAssets.map((e) => e.id).toList());
+
+      if (selectedAssets.length != remoteAssets.length) {
+        ImmichToast.show(
+          context: context,
+          msg: 'add_to_album_bottom_sheet_some_local_assets'.t(context: context),
+        );
+      }
+
+      if (addedCount != remoteAssets.length) {
+        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}),
+        );
+      }
+
+      ref.read(multiSelectProvider.notifier).reset();
+    }
+
+    Future<void> onKeyboardExpand() {
+      return sheetController.animateTo(0.85, duration: const Duration(milliseconds: 200), curve: Curves.easeInOut);
+    }
+
+    return BaseBottomSheet(
+      controller: sheetController,
+      initialChildSize: widget.minChildSize ?? 0.15,
+      minChildSize: widget.minChildSize,
+      maxChildSize: 0.85,
+      shouldCloseOnMinExtent: false,
+      actions: [
+        if (multiselect.selectedAssets.length == 1 && advancedTroubleshooting) ...[
+          const AdvancedInfoActionButton(source: ActionSource.timeline),
+        ],
+        const ShareActionButton(source: ActionSource.timeline),
+        if (multiselect.hasRemote) ...[
+          const ShareLinkActionButton(source: ActionSource.timeline),
+          const DownloadActionButton(source: ActionSource.timeline),
+          isTrashEnable
+              ? const TrashActionButton(source: ActionSource.timeline)
+              : const DeletePermanentActionButton(source: ActionSource.timeline),
+          const FavoriteActionButton(source: ActionSource.timeline),
+          const ArchiveActionButton(source: ActionSource.timeline),
+          const EditDateTimeActionButton(source: ActionSource.timeline),
+          const EditLocationActionButton(source: ActionSource.timeline),
+          const MoveToLockFolderActionButton(source: ActionSource.timeline),
+          if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
+          if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
+          if (multiselect.hasLocal || multiselect.hasMerged) const DeleteActionButton(source: ActionSource.timeline),
+        ],
+        if (multiselect.hasLocal || multiselect.hasMerged) const DeleteLocalActionButton(source: ActionSource.timeline),
+        if (multiselect.hasLocal) const UploadActionButton(source: ActionSource.timeline),
+      ],
+      slivers: multiselect.hasRemote
+          ? [
+              const AddToAlbumHeader(),
+              AlbumSelector(onAlbumSelected: addAssetsToAlbum, onKeyboardExpanded: onKeyboardExpand),
+            ]
+          : [],
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/local_album_bottom_sheet.widget.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+
+class LocalAlbumBottomSheet extends ConsumerWidget {
+  const LocalAlbumBottomSheet({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return const BaseBottomSheet(
+      initialChildSize: 0.25,
+      maxChildSize: 0.4,
+      shouldCloseOnMinExtent: false,
+      actions: [
+        ShareActionButton(source: ActionSource.timeline),
+        DeleteLocalActionButton(source: ActionSource.timeline),
+        UploadActionButton(source: ActionSource.timeline),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/locked_folder_bottom_sheet.widget.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_lock_folder_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+
+class LockedFolderBottomSheet extends ConsumerWidget {
+  const LockedFolderBottomSheet({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return const BaseBottomSheet(
+      initialChildSize: 0.25,
+      maxChildSize: 0.4,
+      shouldCloseOnMinExtent: false,
+      actions: [
+        ShareActionButton(source: ActionSource.timeline),
+        DownloadActionButton(source: ActionSource.timeline),
+        DeletePermanentActionButton(source: ActionSource.timeline),
+        RemoveFromLockFolderActionButton(source: ActionSource.timeline),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+
+class MapBottomSheet extends StatelessWidget {
+  const MapBottomSheet({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BaseBottomSheet(
+      initialChildSize: 0.25,
+      maxChildSize: 0.75,
+      shouldCloseOnMinExtent: false,
+      resizeOnScroll: false,
+      actions: [],
+      backgroundColor: context.themeData.colorScheme.surface,
+      slivers: [const SliverFillRemaining(hasScrollBody: false, child: _ScopedMapTimeline())],
+    );
+  }
+}
+
+class _ScopedMapTimeline extends StatelessWidget {
+  const _ScopedMapTimeline();
+
+  @override
+  Widget build(BuildContext context) {
+    // TODO: this causes the timeline to switch to flicker to "loading" state and back. This is both janky and inefficient.
+    return ProviderScope(
+      overrides: [
+        timelineServiceProvider.overrideWith((ref) {
+          final user = ref.watch(currentUserProvider);
+          if (user == null) {
+            throw Exception('User must be logged in to access archive');
+          }
+
+          final users = ref.watch(mapStateProvider).withPartners
+              ? ref.watch(timelineUsersProvider).valueOrNull ?? [user.id]
+              : [user.id];
+
+          final timelineService = ref
+              .watch(timelineFactoryProvider)
+              .map(users, ref.watch(mapStateProvider).toOptions());
+          ref.onDispose(timelineService.dispose);
+          return timelineService;
+        }),
+      ],
+      child: const Timeline(appBar: null, bottomSheet: null, withScrubber: false),
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/partner_detail_bottom_sheet.widget.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+
+class PartnerDetailBottomSheet extends ConsumerWidget {
+  const PartnerDetailBottomSheet({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return const BaseBottomSheet(
+      initialChildSize: 0.25,
+      maxChildSize: 0.4,
+      shouldCloseOnMinExtent: false,
+      actions: [
+        ShareActionButton(source: ActionSource.timeline),
+        DownloadActionButton(source: ActionSource.timeline),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/remote_album_bottom_sheet.widget.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/album/album.model.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_date_time_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_location_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/share_link_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/stack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/album/album_selector.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class RemoteAlbumBottomSheet extends ConsumerStatefulWidget {
+  final RemoteAlbum album;
+  const RemoteAlbumBottomSheet({super.key, required this.album});
+
+  @override
+  ConsumerState<RemoteAlbumBottomSheet> createState() => _RemoteAlbumBottomSheetState();
+}
+
+class _RemoteAlbumBottomSheetState extends ConsumerState<RemoteAlbumBottomSheet> {
+  late DraggableScrollableController sheetController;
+
+  @override
+  void initState() {
+    super.initState();
+    sheetController = DraggableScrollableController();
+  }
+
+  @override
+  void dispose() {
+    sheetController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final multiselect = ref.watch(multiSelectProvider);
+    final isTrashEnable = ref.watch(serverInfoProvider.select((state) => state.serverFeatures.trash));
+    final ownsAlbum = ref.watch(currentUserProvider)?.id == widget.album.ownerId;
+
+    Future<void> addAssetsToAlbum(RemoteAlbum album) async {
+      final selectedAssets = multiselect.selectedAssets;
+      if (selectedAssets.isEmpty) {
+        return;
+      }
+
+      final addedCount = await ref
+          .read(remoteAlbumProvider.notifier)
+          .addAssets(album.id, selectedAssets.map((e) => (e as RemoteAsset).id).toList());
+
+      if (addedCount != selectedAssets.length) {
+        ImmichToast.show(
+          context: context,
+          msg: 'add_to_album_bottom_sheet_already_exists'.t(context: context, args: {"album": album.name}),
+        );
+      } else {
+        ImmichToast.show(
+          context: context,
+          msg: 'add_to_album_bottom_sheet_added'.t(context: context, args: {"album": album.name}),
+        );
+      }
+
+      ref.read(multiSelectProvider.notifier).reset();
+    }
+
+    Future<void> onKeyboardExpand() {
+      return sheetController.animateTo(0.85, duration: const Duration(milliseconds: 200), curve: Curves.easeInOut);
+    }
+
+    return BaseBottomSheet(
+      controller: sheetController,
+      initialChildSize: 0.22,
+      minChildSize: 0.22,
+      maxChildSize: 0.85,
+      shouldCloseOnMinExtent: false,
+      actions: [
+        const ShareActionButton(source: ActionSource.timeline),
+        if (multiselect.hasRemote) ...[
+          const ShareLinkActionButton(source: ActionSource.timeline),
+
+          if (ownsAlbum) ...[
+            const ArchiveActionButton(source: ActionSource.timeline),
+            const FavoriteActionButton(source: ActionSource.timeline),
+          ],
+          const DownloadActionButton(source: ActionSource.timeline),
+          if (ownsAlbum) ...[
+            isTrashEnable
+                ? const TrashActionButton(source: ActionSource.timeline)
+                : const DeletePermanentActionButton(source: ActionSource.timeline),
+            const EditDateTimeActionButton(source: ActionSource.timeline),
+            const EditLocationActionButton(source: ActionSource.timeline),
+            const MoveToLockFolderActionButton(source: ActionSource.timeline),
+            if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
+            if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
+          ],
+        ],
+        if (multiselect.hasMerged) const DeleteLocalActionButton(source: ActionSource.timeline),
+        if (ownsAlbum) RemoveFromAlbumActionButton(source: ActionSource.timeline, albumId: widget.album.id),
+      ],
+      slivers: ownsAlbum
+          ? [
+              const AddToAlbumHeader(),
+              AlbumSelector(onAlbumSelected: addAssetsToAlbum, onKeyboardExpanded: onKeyboardExpand),
+            ]
+          : null,
+    );
+  }
+}

mobile/lib/presentation/widgets/bottom_sheet/trash_bottom_sheet.widget.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_trash_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/restore_trash_action_button.widget.dart';
+
+class TrashBottomBar extends ConsumerWidget {
+  const TrashBottomBar({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SafeArea(
+      child: Align(
+        alignment: Alignment.bottomCenter,
+        child: SizedBox(
+          height: 64,
+          child: Container(
+            color: context.themeData.canvasColor,
+            child: const Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                DeleteTrashActionButton(source: ActionSource.timeline),
+                RestoreTrashActionButton(source: ActionSource.timeline),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/images/full_image.widget.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
+import 'package:octo_image/octo_image.dart';
+
+class FullImage extends StatelessWidget {
+  const FullImage(
+    this.asset, {
+    required this.size,
+    this.fit = BoxFit.cover,
+    this.placeholder = const ThumbnailPlaceholder(),
+    super.key,
+  });
+
+  final BaseAsset asset;
+  final Size size;
+  final Widget? placeholder;
+  final BoxFit fit;
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = getFullImageProvider(asset, size: size);
+    return OctoImage(
+      fadeInDuration: const Duration(milliseconds: 0),
+      fadeOutDuration: const Duration(milliseconds: 100),
+      placeholderBuilder: placeholder != null ? (_) => placeholder! : null,
+      image: provider,
+      width: size.width,
+      height: size.height,
+      fit: fit,
+      errorBuilder: (context, error, stackTrace) {
+        provider.evict();
+        return const Icon(Icons.image_not_supported_outlined, size: 32);
+      },
+    );
+  }
+}

mobile/lib/presentation/widgets/images/image_provider.dart

@@ -0,0 +1,141 @@
+import 'package:async/async.dart';
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/domain/services/setting.service.dart';
+import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:logging/logging.dart';
+
+abstract class CancellableImageProvider<T extends Object> extends ImageProvider<T> {
+  void cancel();
+}
+
+mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvider<T> {
+  static final _log = Logger('CancellableImageProviderMixin');
+
+  bool isCancelled = false;
+  ImageRequest? request;
+  CancelableOperation<ImageInfo?>? cachedOperation;
+
+  ImageInfo? getInitialImage(CancellableImageProvider provider) {
+    final completer = CancelableCompleter<ImageInfo?>(onCancel: provider.cancel);
+    final cachedStream = provider.resolve(const ImageConfiguration());
+    ImageInfo? cachedImage;
+    final listener = ImageStreamListener((image, synchronousCall) {
+      if (synchronousCall) {
+        cachedImage = image;
+      }
+
+      if (!completer.isCompleted) {
+        completer.complete(image);
+      }
+    }, onError: completer.completeError);
+
+    cachedStream.addListener(listener);
+    if (cachedImage != null) {
+      cachedStream.removeListener(listener);
+      return cachedImage;
+    }
+
+    completer.operation.valueOrCancellation().whenComplete(() {
+      cachedStream.removeListener(listener);
+      cachedOperation = null;
+    });
+    cachedOperation = completer.operation;
+    return null;
+  }
+
+  Stream<ImageInfo> loadRequest(ImageRequest request, ImageDecoderCallback decode) async* {
+    if (isCancelled) {
+      this.request = null;
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    try {
+      final image = await request.load(decode);
+      if (image == null || isCancelled) {
+        PaintingBinding.instance.imageCache.evict(this);
+        return;
+      }
+      yield image;
+    } finally {
+      this.request = null;
+    }
+  }
+
+  Stream<ImageInfo> initialImageStream() async* {
+    final cachedOperation = this.cachedOperation;
+    if (cachedOperation == null) {
+      return;
+    }
+
+    try {
+      final cachedImage = await cachedOperation.valueOrCancellation();
+      if (cachedImage != null && !isCancelled) {
+        yield cachedImage;
+      }
+    } catch (e, stack) {
+      _log.severe('Error loading initial image', e, stack);
+    } finally {
+      this.cachedOperation = null;
+    }
+  }
+
+  @override
+  void cancel() {
+    isCancelled = true;
+    final request = this.request;
+    if (request != null) {
+      this.request = null;
+      request.cancel();
+    }
+
+    final operation = cachedOperation;
+    if (operation != null) {
+      cachedOperation = null;
+      operation.cancel();
+    }
+  }
+}
+
+ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080, 1920)}) {
+  // Create new provider and cache it
+  final ImageProvider provider;
+  if (_shouldUseLocalAsset(asset)) {
+    final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
+    provider = LocalFullImageProvider(id: id, size: size, assetType: asset.type);
+  } else {
+    final String assetId;
+    final String thumbhash;
+    if (asset is LocalAsset && asset.hasRemote) {
+      assetId = asset.remoteId!;
+      thumbhash = "";
+    } else if (asset is RemoteAsset) {
+      assetId = asset.id;
+      thumbhash = asset.thumbHash ?? "";
+    } else {
+      throw ArgumentError("Unsupported asset type: ${asset.runtimeType}");
+    }
+    provider = RemoteFullImageProvider(assetId: assetId, thumbhash: thumbhash, assetType: asset.type);
+  }
+
+  return provider;
+}
+
+ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnailResolution}) {
+  if (_shouldUseLocalAsset(asset)) {
+    final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
+    return LocalThumbProvider(id: id, size: size, assetType: asset.type);
+  }
+
+  final assetId = asset is RemoteAsset ? asset.id : (asset as LocalAsset).remoteId;
+  final thumbhash = asset is RemoteAsset ? asset.thumbHash ?? "" : "";
+  return assetId != null ? RemoteThumbProvider(assetId: assetId, thumbhash: thumbhash) : null;
+}
+
+bool _shouldUseLocalAsset(BaseAsset asset) =>
+    asset.hasLocal && (!asset.hasRemote || !AppSetting.get(Setting.preferRemoteImage)) && !asset.isEdited;

mobile/lib/presentation/widgets/images/local_album_thumbnail.widget.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
+
+class LocalAlbumThumbnail extends ConsumerWidget {
+  const LocalAlbumThumbnail({super.key, required this.albumId});
+
+  final String albumId;
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final localAlbumThumbnail = ref.watch(localAlbumThumbnailProvider(albumId));
+    return localAlbumThumbnail.when(
+      data: (data) {
+        if (data == null) {
+          return Container(
+            decoration: BoxDecoration(
+              color: context.colorScheme.surfaceContainer,
+              borderRadius: const BorderRadius.all(Radius.circular(16)),
+              border: Border.all(color: context.colorScheme.outline.withAlpha(50), width: 1),
+            ),
+            child: Icon(Icons.collections, size: 24, color: context.primaryColor),
+          );
+        }
+
+        return ClipRRect(
+          borderRadius: const BorderRadius.all(Radius.circular(16)),
+          child: Thumbnail.fromAsset(asset: data),
+        );
+      },
+      error: (error, stack) {
+        return const Icon(Icons.error, size: 24);
+      },
+      loading: () => const SizedBox(width: 24, height: 24, child: Center(child: CircularProgressIndicator())),
+    );
+  }
+}

mobile/lib/presentation/widgets/images/local_image_provider.dart

@@ -0,0 +1,125 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+
+class LocalThumbProvider extends CancellableImageProvider<LocalThumbProvider>
+    with CancellableImageProviderMixin<LocalThumbProvider> {
+  final String id;
+  final Size size;
+  final AssetType assetType;
+
+  LocalThumbProvider({required this.id, required this.assetType, this.size = kThumbnailResolution});
+
+  @override
+  Future<LocalThumbProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(LocalThumbProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<String>('Id', key.id),
+        DiagnosticsProperty<Size>('Size', key.size),
+      ],
+      onDispose: cancel,
+    );
+  }
+
+  Stream<ImageInfo> _codec(LocalThumbProvider key, ImageDecoderCallback decode) {
+    final request = this.request = LocalImageRequest(localId: key.id, size: key.size, assetType: key.assetType);
+    return loadRequest(request, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is LocalThumbProvider) {
+      return id == other.id;
+    }
+    return false;
+  }
+
+  @override
+  int get hashCode => id.hashCode;
+}
+
+class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProvider>
+    with CancellableImageProviderMixin<LocalFullImageProvider> {
+  final String id;
+  final Size size;
+  final AssetType assetType;
+
+  LocalFullImageProvider({required this.id, required this.assetType, required this.size});
+
+  @override
+  Future<LocalFullImageProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      initialImage: getInitialImage(LocalThumbProvider(id: key.id, assetType: key.assetType)),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Id', key.id),
+        DiagnosticsProperty<Size>('Size', key.size),
+      ],
+      onDispose: cancel,
+    );
+  }
+
+  Stream<ImageInfo> _codec(LocalFullImageProvider key, ImageDecoderCallback decode) async* {
+    yield* initialImageStream();
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    final devicePixelRatio = PlatformDispatcher.instance.views.first.devicePixelRatio;
+    var request = this.request = LocalImageRequest(
+      localId: key.id,
+      size: Size(size.width * devicePixelRatio, size.height * devicePixelRatio),
+      assetType: key.assetType,
+    );
+
+    yield* loadRequest(request, decode);
+
+    if (!Store.get(StoreKey.loadOriginal, false)) {
+      return;
+    }
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    request = this.request = LocalImageRequest(localId: key.id, assetType: key.assetType, size: Size.zero);
+
+    yield* loadRequest(request, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is LocalFullImageProvider) {
+      return id == other.id && size == other.size;
+    }
+    return false;
+  }
+
+  @override
+  int get hashCode => id.hashCode ^ size.hashCode;
+}

mobile/lib/presentation/widgets/images/one_frame_multi_image_stream_completer.dart

@@ -0,0 +1,51 @@
+// The below code is adapted from cached_network_image package's
+// MultiImageStreamCompleter to better suit one-frame image loading.
+// In particular, it allows providing an initial image to emit synchronously.
+
+import 'dart:async';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+
+/// An ImageStreamCompleter with support for loading multiple images.
+class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter {
+  void Function()? _onDispose;
+
+  /// The constructor to create an OneFramePlaceholderImageStreamCompleter. The [images]
+  /// should be the primary images to display (typically asynchronously as they load).
+  /// The [initialImage] is an optional image that will be emitted synchronously
+  /// until the first stream image is completed, useful as a thumbnail or placeholder.
+  OneFramePlaceholderImageStreamCompleter(
+    Stream<ImageInfo> images, {
+    ImageInfo? initialImage,
+    InformationCollector? informationCollector,
+    void Function()? onDispose,
+  }) {
+    if (initialImage != null) {
+      setImage(initialImage);
+    }
+    _onDispose = onDispose;
+    images.listen(
+      setImage,
+      onError: (Object error, StackTrace stack) {
+        reportError(
+          context: ErrorDescription('resolving a single-frame image stream'),
+          exception: error,
+          stack: stack,
+          informationCollector: informationCollector,
+          silent: true,
+        );
+      },
+    );
+  }
+
+  @override
+  void onDisposed() {
+    final onDispose = _onDispose;
+    if (onDispose != null) {
+      _onDispose = null;
+      onDispose();
+    }
+    super.onDisposed();
+  }
+}

mobile/lib/presentation/widgets/images/remote_image_provider.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/domain/services/setting.service.dart';
+import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+import 'package:openapi/api.dart';
+
+class RemoteThumbProvider extends CancellableImageProvider<RemoteThumbProvider>
+    with CancellableImageProviderMixin<RemoteThumbProvider> {
+  final String assetId;
+  final String thumbhash;
+
+  RemoteThumbProvider({required this.assetId, required this.thumbhash});
+
+  @override
+  Future<RemoteThumbProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(RemoteThumbProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Asset Id', key.assetId),
+      ],
+      onDispose: cancel,
+    );
+  }
+
+  Stream<ImageInfo> _codec(RemoteThumbProvider key, ImageDecoderCallback decode) {
+    final request = this.request = RemoteImageRequest(
+      uri: getThumbnailUrlForRemoteId(key.assetId, thumbhash: key.thumbhash),
+      headers: ApiService.getRequestHeaders(),
+    );
+    return loadRequest(request, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is RemoteThumbProvider) {
+      return assetId == other.assetId && thumbhash == other.thumbhash;
+    }
+
+    return false;
+  }
+
+  @override
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
+}
+
+class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImageProvider>
+    with CancellableImageProviderMixin<RemoteFullImageProvider> {
+  final String assetId;
+  final String thumbhash;
+  final AssetType assetType;
+
+  RemoteFullImageProvider({required this.assetId, required this.thumbhash, required this.assetType});
+
+  @override
+  Future<RemoteFullImageProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      initialImage: getInitialImage(RemoteThumbProvider(assetId: key.assetId, thumbhash: key.thumbhash)),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Asset Id', key.assetId),
+      ],
+      onDispose: cancel,
+    );
+  }
+
+  Stream<ImageInfo> _codec(RemoteFullImageProvider key, ImageDecoderCallback decode) async* {
+    yield* initialImageStream();
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    final headers = ApiService.getRequestHeaders();
+    final previewRequest = request = RemoteImageRequest(
+      uri: getThumbnailUrlForRemoteId(key.assetId, type: AssetMediaSize.preview, thumbhash: key.thumbhash),
+      headers: headers,
+    );
+    yield* loadRequest(previewRequest, decode);
+
+    if (assetType != AssetType.image || !AppSetting.get(Setting.loadOriginal)) {
+      return;
+    }
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    final originalRequest = request = RemoteImageRequest(uri: getOriginalUrlForRemoteId(key.assetId), headers: headers);
+    yield* loadRequest(originalRequest, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is RemoteFullImageProvider) {
+      return assetId == other.assetId && thumbhash == other.thumbhash;
+    }
+
+    return false;
+  }
+
+  @override
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
+}

mobile/lib/presentation/widgets/images/thumb_hash_provider.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/rendering.dart';
+import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
+
+class ThumbHashProvider extends CancellableImageProvider<ThumbHashProvider>
+    with CancellableImageProviderMixin<ThumbHashProvider> {
+  final String thumbHash;
+
+  ThumbHashProvider({required this.thumbHash});
+
+  @override
+  Future<ThumbHashProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(ThumbHashProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(_loadCodec(key, decode), onDispose: cancel);
+  }
+
+  Stream<ImageInfo> _loadCodec(ThumbHashProvider key, ImageDecoderCallback decode) {
+    final request = this.request = ThumbhashImageRequest(thumbhash: key.thumbHash);
+    return loadRequest(request, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is ThumbHashProvider) {
+      return thumbHash == other.thumbHash;
+    }
+    return false;
+  }
+
+  @override
+  int get hashCode => thumbHash.hashCode;
+}

mobile/lib/presentation/widgets/images/thumbnail.widget.dart

@@ -0,0 +1,384 @@
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.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/theme_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumb_hash_provider.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:logging/logging.dart';
+
+final log = Logger('ThumbnailWidget');
+
+enum ThumbhashMode { enabled, disabled, only }
+
+class Thumbnail extends StatefulWidget {
+  final ImageProvider? imageProvider;
+  final ImageProvider? thumbhashProvider;
+  final BoxFit fit;
+
+  const Thumbnail({this.imageProvider, this.fit = BoxFit.cover, this.thumbhashProvider, super.key});
+
+  Thumbnail.remote({
+    required String remoteId,
+    required String thumbhash,
+    this.fit = BoxFit.cover,
+    Size size = kThumbnailResolution,
+    super.key,
+  }) : imageProvider = RemoteThumbProvider(assetId: remoteId, thumbhash: thumbhash),
+       thumbhashProvider = null;
+
+  Thumbnail.fromAsset({
+    required BaseAsset? asset,
+    this.fit = BoxFit.cover,
+
+    /// The logical UI size of the thumbnail. This is only used to determine the ideal image resolution and does not affect the widget size.
+    Size size = kThumbnailResolution,
+    super.key,
+  }) : thumbhashProvider = switch (asset) {
+         RemoteAsset() when asset.thumbHash != null && asset.localId == null => ThumbHashProvider(
+           thumbHash: asset.thumbHash!,
+         ),
+         _ => null,
+       },
+       imageProvider = asset == null ? null : getThumbnailImageProvider(asset, size: size);
+
+  @override
+  State<Thumbnail> createState() => _ThumbnailState();
+}
+
+class _ThumbnailState extends State<Thumbnail> with SingleTickerProviderStateMixin {
+  ui.Image? _providerImage;
+  ui.Image? _previousImage;
+
+  late AnimationController _fadeController;
+  late Animation<double> _fadeAnimation;
+
+  ImageStream? _imageStream;
+  ImageStreamListener? _imageStreamListener;
+  ImageStream? _thumbhashStream;
+  ImageStreamListener? _thumbhashStreamListener;
+
+  static final _gradientCache = <ColorScheme, Gradient>{};
+
+  @override
+  void initState() {
+    super.initState();
+    _fadeController = AnimationController(duration: const Duration(milliseconds: 100), vsync: this);
+    _fadeAnimation = CurvedAnimation(parent: _fadeController, curve: Curves.easeOut);
+    _fadeController.addStatusListener(_onAnimationStatusChanged);
+    _loadImage();
+  }
+
+  void _onAnimationStatusChanged(AnimationStatus status) {
+    if (status == AnimationStatus.completed) {
+      _previousImage?.dispose();
+      _previousImage = null;
+    }
+  }
+
+  void _loadFromThumbhashProvider() {
+    _stopListeningToThumbhashStream();
+    final thumbhashProvider = widget.thumbhashProvider;
+    if (thumbhashProvider == null || _providerImage != null) return;
+
+    final thumbhashStream = _thumbhashStream = thumbhashProvider.resolve(ImageConfiguration.empty);
+    final thumbhashStreamListener = _thumbhashStreamListener = ImageStreamListener(
+      (ImageInfo imageInfo, bool synchronousCall) {
+        _stopListeningToThumbhashStream();
+        if (!mounted || _providerImage != null) {
+          imageInfo.dispose();
+          return;
+        }
+        _fadeController.value = 1.0;
+        setState(() {
+          _providerImage = imageInfo.image;
+        });
+      },
+      onError: (exception, stackTrace) {
+        log.severe('Error loading thumbhash', exception, stackTrace);
+        _stopListeningToThumbhashStream();
+      },
+    );
+    thumbhashStream.addListener(thumbhashStreamListener);
+  }
+
+  void _loadFromImageProvider() {
+    _stopListeningToImageStream();
+    final imageProvider = widget.imageProvider;
+    if (imageProvider == null) return;
+
+    final imageStream = _imageStream = imageProvider.resolve(ImageConfiguration.empty);
+    final imageStreamListener = _imageStreamListener = ImageStreamListener(
+      (ImageInfo imageInfo, bool synchronousCall) {
+        _stopListeningToThumbhashStream();
+        if (!mounted) {
+          imageInfo.dispose();
+          return;
+        }
+
+        if (_providerImage == imageInfo.image) {
+          return;
+        }
+
+        if ((synchronousCall && _providerImage == null) || !_isVisible()) {
+          _fadeController.value = 1.0;
+        } else if (_fadeController.isAnimating) {
+          _fadeController.forward();
+        } else {
+          _fadeController.forward(from: 0.0);
+        }
+
+        setState(() {
+          _previousImage?.dispose();
+          if (_providerImage != null) {
+            _previousImage = _providerImage;
+          } else {
+            _previousImage = null;
+          }
+          _providerImage = imageInfo.image;
+        });
+      },
+      onError: (exception, stackTrace) {
+        log.severe('Error loading image: $exception', exception, stackTrace);
+        _stopListeningToImageStream();
+      },
+    );
+    imageStream.addListener(imageStreamListener);
+  }
+
+  void _stopListeningToImageStream() {
+    if (_imageStreamListener != null && _imageStream != null) {
+      _imageStream!.removeListener(_imageStreamListener!);
+    }
+    _imageStream = null;
+    _imageStreamListener = null;
+  }
+
+  void _stopListeningToThumbhashStream() {
+    if (_thumbhashStreamListener != null && _thumbhashStream != null) {
+      _thumbhashStream!.removeListener(_thumbhashStreamListener!);
+    }
+    _thumbhashStream = null;
+    _thumbhashStreamListener = null;
+  }
+
+  void _stopListeningToStream() {
+    _stopListeningToImageStream();
+    _stopListeningToThumbhashStream();
+  }
+
+  @override
+  void didUpdateWidget(Thumbnail oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (widget.imageProvider != oldWidget.imageProvider) {
+      if (_fadeController.isAnimating) {
+        _fadeController.stop();
+        _previousImage?.dispose();
+        _previousImage = null;
+      }
+      _loadFromImageProvider();
+    }
+
+    if (_providerImage == null && oldWidget.thumbhashProvider != widget.thumbhashProvider) {
+      _loadFromThumbhashProvider();
+    }
+  }
+
+  @override
+  void reassemble() {
+    super.reassemble();
+    _loadImage();
+  }
+
+  void _loadImage() {
+    _loadFromImageProvider();
+    _loadFromThumbhashProvider();
+  }
+
+  bool _isVisible() {
+    final renderObject = context.findRenderObject() as RenderBox?;
+    if (renderObject == null || !renderObject.attached) return false;
+
+    final topLeft = renderObject.localToGlobal(Offset.zero);
+    final bottomRight = renderObject.localToGlobal(Offset(renderObject.size.width, renderObject.size.height));
+    return topLeft.dy < context.height && bottomRight.dy > 0;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = context.colorScheme;
+    final gradient = _gradientCache[colorScheme] ??= LinearGradient(
+      colors: [colorScheme.surfaceContainer, colorScheme.surfaceContainer.darken(amount: .1)],
+      begin: Alignment.topCenter,
+      end: Alignment.bottomCenter,
+    );
+
+    return AnimatedBuilder(
+      animation: _fadeAnimation,
+      builder: (context, child) {
+        return _ThumbnailLeaf(
+          image: _providerImage,
+          previousImage: _previousImage,
+          fadeValue: _fadeAnimation.value,
+          fit: widget.fit,
+          placeholderGradient: gradient,
+        );
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    final imageProvider = widget.imageProvider;
+    if (imageProvider is CancellableImageProvider) {
+      imageProvider.cancel();
+    }
+
+    final thumbhashProvider = widget.thumbhashProvider;
+    if (thumbhashProvider is CancellableImageProvider) {
+      thumbhashProvider.cancel();
+    }
+
+    _fadeController.removeStatusListener(_onAnimationStatusChanged);
+    _fadeController.dispose();
+    _stopListeningToStream();
+    _providerImage?.dispose();
+    _previousImage?.dispose();
+    super.dispose();
+  }
+}
+
+class _ThumbnailLeaf extends LeafRenderObjectWidget {
+  final ui.Image? image;
+  final ui.Image? previousImage;
+  final double fadeValue;
+  final BoxFit fit;
+  final Gradient placeholderGradient;
+
+  const _ThumbnailLeaf({
+    required this.image,
+    required this.previousImage,
+    required this.fadeValue,
+    required this.fit,
+    required this.placeholderGradient,
+  });
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return _ThumbnailRenderBox(
+      image: image,
+      previousImage: previousImage,
+      fadeValue: fadeValue,
+      fit: fit,
+      placeholderGradient: placeholderGradient,
+    );
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, _ThumbnailRenderBox renderObject) {
+    renderObject
+      ..image = image
+      ..previousImage = previousImage
+      ..fadeValue = fadeValue
+      ..fit = fit
+      ..placeholderGradient = placeholderGradient;
+  }
+}
+
+class _ThumbnailRenderBox extends RenderBox {
+  ui.Image? _image;
+  ui.Image? _previousImage;
+  double _fadeValue;
+  BoxFit _fit;
+  Gradient _placeholderGradient;
+
+  @override
+  bool isRepaintBoundary = true;
+
+  _ThumbnailRenderBox({
+    required ui.Image? image,
+    required ui.Image? previousImage,
+    required double fadeValue,
+    required BoxFit fit,
+    required Gradient placeholderGradient,
+  }) : _image = image,
+       _previousImage = previousImage,
+       _fadeValue = fadeValue,
+       _fit = fit,
+       _placeholderGradient = placeholderGradient;
+
+  @override
+  void paint(PaintingContext context, Offset offset) {
+    final rect = offset & size;
+    final canvas = context.canvas;
+
+    if (_previousImage != null && _fadeValue < 1.0) {
+      paintImage(
+        canvas: canvas,
+        rect: rect,
+        image: _previousImage!,
+        fit: _fit,
+        filterQuality: FilterQuality.low,
+        opacity: 1.0,
+      );
+    } else if (_image == null || _fadeValue < 1.0) {
+      final paint = Paint()..shader = _placeholderGradient.createShader(rect);
+      canvas.drawRect(rect, paint);
+    }
+
+    if (_image != null) {
+      paintImage(
+        canvas: canvas,
+        rect: rect,
+        image: _image!,
+        fit: _fit,
+        filterQuality: FilterQuality.low,
+        opacity: _fadeValue,
+      );
+    }
+  }
+
+  @override
+  void performLayout() {
+    size = constraints.biggest;
+  }
+
+  set image(ui.Image? value) {
+    if (_image != value) {
+      _image = value;
+      markNeedsPaint();
+    }
+  }
+
+  set previousImage(ui.Image? value) {
+    if (_previousImage != value) {
+      _previousImage = value;
+      markNeedsPaint();
+    }
+  }
+
+  set fadeValue(double value) {
+    if (_fadeValue != value) {
+      _fadeValue = value;
+      markNeedsPaint();
+    }
+  }
+
+  set fit(BoxFit value) {
+    if (_fit != value) {
+      _fit = value;
+      markNeedsPaint();
+    }
+  }
+
+  set placeholderGradient(Gradient value) {
+    if (_placeholderGradient != value) {
+      _placeholderGradient = value;
+      markNeedsPaint();
+    }
+  }
+}

mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart

@@ -0,0 +1,354 @@
+import 'package:auto_route/auto_route.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/setting.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+
+class ThumbnailTile extends ConsumerStatefulWidget {
+  const ThumbnailTile(
+    this.asset, {
+    this.size = kThumbnailResolution,
+    this.fit = BoxFit.cover,
+    this.showStorageIndicator = false,
+    this.lockSelection = false,
+    this.heroOffset,
+    super.key,
+  });
+
+  final BaseAsset? asset;
+  final Size size;
+  final BoxFit fit;
+  final bool showStorageIndicator;
+  final bool lockSelection;
+  final int? heroOffset;
+
+  @override
+  ConsumerState<ThumbnailTile> createState() => _ThumbnailTileState();
+}
+
+class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
+  bool _hideIndicators = false;
+  bool _showSelectionContainer = false;
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final asset = widget.asset;
+    final heroIndex = widget.heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+    final isCurrentAsset = ref.watch(assetViewerProvider.select((current) => current.currentAsset == asset));
+
+    final assetContainerColor = context.isDarkTheme
+        ? context.primaryColor.darken(amount: 0.4)
+        : context.primaryColor.lighten(amount: 0.75);
+
+    final isSelected = ref.watch(
+      multiSelectProvider.select((multiselect) => multiselect.selectedAssets.contains(asset)),
+    );
+
+    final bool storageIndicator =
+        ref.watch(settingsProvider.select((s) => s.get(Setting.showStorageIndicator))) && widget.showStorageIndicator;
+
+    if (!isCurrentAsset) {
+      _hideIndicators = false;
+    }
+
+    if (isSelected) {
+      _showSelectionContainer = true;
+    }
+
+    final uploadProgress = asset is LocalAsset
+        ? ref.watch(assetUploadProgressProvider.select((map) => map[asset.id]))
+        : null;
+
+    return Stack(
+      children: [
+        Container(
+          color: widget.lockSelection
+              ? context.colorScheme.surfaceContainerHighest
+              : _showSelectionContainer
+              ? assetContainerColor
+              : Colors.transparent,
+        ),
+        AnimatedContainer(
+          duration: Durations.short4,
+          curve: Curves.decelerate,
+          onEnd: () {
+            if (!isSelected) {
+              _showSelectionContainer = false;
+            }
+          },
+          padding: EdgeInsets.all(isSelected || widget.lockSelection ? 6 : 0),
+          child: TweenAnimationBuilder<double>(
+            tween: Tween<double>(begin: 0.0, end: (isSelected || widget.lockSelection) ? 15.0 : 0.0),
+            duration: Durations.short4,
+            curve: Curves.decelerate,
+            builder: (context, value, child) {
+              return ClipRRect(borderRadius: BorderRadius.all(Radius.circular(value)), child: child);
+            },
+            child: Stack(
+              children: [
+                Positioned.fill(
+                  child: Hero(
+                    // This key resets the hero animation when the asset is changed in the asset viewer.
+                    // It doesn't seem like the best solution, and only works to reset the hero, not prime the hero of the new active asset for animation,
+                    // but other solutions have failed thus far.
+                    key: ValueKey(isCurrentAsset),
+                    tag: '${asset?.heroTag}_$heroIndex',
+                    child: Thumbnail.fromAsset(asset: asset, size: widget.size),
+                    // Placeholderbuilder used to hide indicators on first hero animation, since flightShuttleBuilder isn't called until both source and destination hero exist in widget tree.
+                    placeholderBuilder: (context, heroSize, child) {
+                      if (!_hideIndicators) {
+                        WidgetsBinding.instance.addPostFrameCallback((_) {
+                          setState(() => _hideIndicators = true);
+                        });
+                      }
+                      return const SizedBox();
+                    },
+                    flightShuttleBuilder: (context, animation, direction, from, to) {
+                      void animationStatusListener(AnimationStatus status) {
+                        final heroInFlight = status == AnimationStatus.forward || status == AnimationStatus.reverse;
+                        if (_hideIndicators != heroInFlight) {
+                          setState(() => _hideIndicators = heroInFlight);
+                        }
+                        if (status == AnimationStatus.completed || status == AnimationStatus.dismissed) {
+                          animation.removeStatusListener(animationStatusListener);
+                        }
+                      }
+
+                      animation.addStatusListener(animationStatusListener);
+                      return to.widget;
+                    },
+                  ),
+                ),
+                if (asset != null)
+                  AnimatedOpacity(
+                    opacity: _hideIndicators ? 0.0 : 1.0,
+                    duration: Durations.short4,
+                    child: Align(
+                      alignment: Alignment.topRight,
+                      child: _AssetTypeIcons(asset: asset),
+                    ),
+                  ),
+                if (storageIndicator && asset != null)
+                  AnimatedOpacity(
+                    opacity: _hideIndicators ? 0.0 : 1.0,
+                    duration: Durations.short4,
+                    child: switch (asset.storage) {
+                      AssetState.local => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_off_outlined),
+                        ),
+                      ),
+                      AssetState.remote => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_outlined),
+                        ),
+                      ),
+                      AssetState.merged => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_done_outlined),
+                        ),
+                      ),
+                    },
+                  ),
+
+                if (asset != null && asset.isFavorite)
+                  AnimatedOpacity(
+                    duration: Durations.short4,
+                    opacity: _hideIndicators ? 0.0 : 1.0,
+                    child: const Align(
+                      alignment: Alignment.bottomLeft,
+                      child: Padding(
+                        padding: EdgeInsets.only(left: 10.0, bottom: 6.0),
+                        child: _TileOverlayIcon(Icons.favorite_rounded),
+                      ),
+                    ),
+                  ),
+                if (uploadProgress != null) _UploadProgressOverlay(progress: uploadProgress),
+              ],
+            ),
+          ),
+        ),
+        TweenAnimationBuilder<double>(
+          tween: Tween<double>(begin: 0.0, end: (isSelected || widget.lockSelection) ? 1.0 : 0.0),
+          duration: Durations.short4,
+          curve: Curves.decelerate,
+          builder: (context, value, child) {
+            return Padding(
+              padding: EdgeInsets.all((isSelected || widget.lockSelection) ? value * 3.0 : 3.0),
+              child: Align(
+                alignment: Alignment.topLeft,
+                child: Opacity(
+                  opacity: (isSelected || widget.lockSelection) ? 1 : value,
+                  child: _SelectionIndicator(
+                    isLocked: widget.lockSelection,
+                    color: widget.lockSelection ? context.colorScheme.surfaceContainerHighest : assetContainerColor,
+                  ),
+                ),
+              ),
+            );
+          },
+        ),
+      ],
+    );
+  }
+}
+
+class _SelectionIndicator extends StatelessWidget {
+  final bool isLocked;
+  final Color? color;
+
+  const _SelectionIndicator({required this.isLocked, this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    if (isLocked) {
+      return DecoratedBox(
+        decoration: BoxDecoration(shape: BoxShape.circle, color: color),
+        child: const Icon(Icons.check_circle_rounded, color: Colors.grey),
+      );
+    } else {
+      return DecoratedBox(
+        decoration: BoxDecoration(shape: BoxShape.circle, color: color),
+        child: Icon(Icons.check_circle_rounded, color: context.primaryColor),
+      );
+    }
+  }
+}
+
+class _VideoIndicator extends StatelessWidget {
+  final Duration duration;
+  const _VideoIndicator(this.duration);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      spacing: 3,
+      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: MainAxisAlignment.end,
+      // CrossAxisAlignment.start looks more centered vertically than CrossAxisAlignment.center
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          duration.format(),
+          style: const TextStyle(
+            color: Colors.white,
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+            shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6))],
+          ),
+        ),
+        const _TileOverlayIcon(Icons.play_circle_outline_rounded),
+      ],
+    );
+  }
+}
+
+class _TileOverlayIcon extends StatelessWidget {
+  final IconData icon;
+
+  const _TileOverlayIcon(this.icon);
+
+  @override
+  Widget build(BuildContext context) {
+    return Icon(
+      icon,
+      color: Colors.white,
+      size: 16,
+      shadows: [const Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0))],
+    );
+  }
+}
+
+class _AssetTypeIcons extends StatelessWidget {
+  final BaseAsset asset;
+
+  const _AssetTypeIcons({required this.asset});
+
+  @override
+  Widget build(BuildContext context) {
+    final hasStack = asset is RemoteAsset && (asset as RemoteAsset).stackId != null;
+    final isLivePhoto = asset is RemoteAsset && asset.livePhotoVideoId != null;
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.end,
+      children: [
+        if (asset.isVideo)
+          Padding(padding: const EdgeInsets.only(right: 10.0, top: 6.0), child: _VideoIndicator(asset.duration)),
+        if (hasStack)
+          const Padding(
+            padding: EdgeInsets.only(right: 10.0, top: 6.0),
+            child: _TileOverlayIcon(Icons.burst_mode_rounded),
+          ),
+        if (isLivePhoto)
+          const Padding(
+            padding: EdgeInsets.only(right: 10.0, top: 6.0),
+            child: _TileOverlayIcon(Icons.motion_photos_on_rounded),
+          ),
+      ],
+    );
+  }
+}
+
+class _UploadProgressOverlay extends StatelessWidget {
+  final double progress;
+
+  const _UploadProgressOverlay({required this.progress});
+
+  @override
+  Widget build(BuildContext context) {
+    final isError = progress < 0;
+    final percentage = isError ? 0 : (progress * 100).toInt();
+
+    return Positioned.fill(
+      child: Container(
+        color: isError ? Colors.red.withValues(alpha: 0.6) : Colors.black54,
+        child: Center(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              if (isError)
+                const Icon(Icons.error_outline, color: Colors.white, size: 36)
+              else
+                SizedBox(
+                  width: 36,
+                  height: 36,
+                  child: CircularProgressIndicator(
+                    value: progress,
+                    strokeWidth: 3,
+                    backgroundColor: Colors.white24,
+                    valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
+                  ),
+                ),
+              const SizedBox(height: 4),
+              Text(
+                isError ? 'Error' : '$percentage%',
+                style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/map/map.state.dart

@@ -0,0 +1,141 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/infrastructure/repositories/timeline.repository.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/map.provider.dart';
+import 'package:immich_mobile/providers/map/map_state.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class MapState {
+  final ThemeMode themeMode;
+  final LatLngBounds bounds;
+  final bool onlyFavorites;
+  final bool includeArchived;
+  final bool withPartners;
+  final int relativeDays;
+
+  const MapState({
+    this.themeMode = ThemeMode.system,
+    required this.bounds,
+    this.onlyFavorites = false,
+    this.includeArchived = false,
+    this.withPartners = false,
+    this.relativeDays = 0,
+  });
+
+  @override
+  bool operator ==(covariant MapState other) {
+    return bounds == other.bounds;
+  }
+
+  @override
+  int get hashCode => bounds.hashCode;
+
+  MapState copyWith({
+    LatLngBounds? bounds,
+    ThemeMode? themeMode,
+    bool? onlyFavorites,
+    bool? includeArchived,
+    bool? withPartners,
+    int? relativeDays,
+  }) {
+    return MapState(
+      bounds: bounds ?? this.bounds,
+      themeMode: themeMode ?? this.themeMode,
+      onlyFavorites: onlyFavorites ?? this.onlyFavorites,
+      includeArchived: includeArchived ?? this.includeArchived,
+      withPartners: withPartners ?? this.withPartners,
+      relativeDays: relativeDays ?? this.relativeDays,
+    );
+  }
+
+  TimelineMapOptions toOptions() => TimelineMapOptions(
+    bounds: bounds,
+    onlyFavorites: onlyFavorites,
+    includeArchived: includeArchived,
+    withPartners: withPartners,
+    relativeDays: relativeDays,
+  );
+}
+
+class MapStateNotifier extends Notifier<MapState> {
+  MapStateNotifier();
+
+  bool setBounds(LatLngBounds bounds) {
+    if (state.bounds == bounds) {
+      return false;
+    }
+    state = state.copyWith(bounds: bounds);
+    return true;
+  }
+
+  void switchTheme(ThemeMode mode) {
+    // TODO: Remove this line when map theme provider is removed
+    // Until then, keep both in sync as MapThemeOverride uses map state provider
+    // ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapThemeMode, mode.index);
+    ref.read(mapStateNotifierProvider.notifier).switchTheme(mode);
+    state = state.copyWith(themeMode: mode);
+  }
+
+  void switchFavoriteOnly(bool isFavoriteOnly) {
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapShowFavoriteOnly, isFavoriteOnly);
+    state = state.copyWith(onlyFavorites: isFavoriteOnly);
+    EventStream.shared.emit(const MapMarkerReloadEvent());
+  }
+
+  void switchIncludeArchived(bool isIncludeArchived) {
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapIncludeArchived, isIncludeArchived);
+    state = state.copyWith(includeArchived: isIncludeArchived);
+    EventStream.shared.emit(const MapMarkerReloadEvent());
+  }
+
+  void switchWithPartners(bool isWithPartners) {
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapwithPartners, isWithPartners);
+    state = state.copyWith(withPartners: isWithPartners);
+    EventStream.shared.emit(const MapMarkerReloadEvent());
+  }
+
+  void setRelativeTime(int relativeDays) {
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapRelativeDate, relativeDays);
+    state = state.copyWith(relativeDays: relativeDays);
+    EventStream.shared.emit(const MapMarkerReloadEvent());
+  }
+
+  @override
+  MapState build() {
+    final appSettingsService = ref.read(appSettingsServiceProvider);
+    return MapState(
+      themeMode: ThemeMode.values[appSettingsService.getSetting(AppSettingsEnum.mapThemeMode)],
+      onlyFavorites: appSettingsService.getSetting(AppSettingsEnum.mapShowFavoriteOnly),
+      includeArchived: appSettingsService.getSetting(AppSettingsEnum.mapIncludeArchived),
+      withPartners: appSettingsService.getSetting(AppSettingsEnum.mapwithPartners),
+      relativeDays: appSettingsService.getSetting(AppSettingsEnum.mapRelativeDate),
+      bounds: LatLngBounds(northeast: const LatLng(0, 0), southwest: const LatLng(0, 0)),
+    );
+  }
+}
+
+// This provider watches the markers from the map service and serves the markers.
+// It should be used only after the map service provider is overridden
+final mapMarkerProvider = FutureProvider.family<Map<String, dynamic>, LatLngBounds?>((ref, bounds) async {
+  final mapService = ref.watch(mapServiceProvider);
+  final markers = await mapService.getMarkers(bounds);
+  final features = List.filled(markers.length, const <String, dynamic>{});
+  for (int i = 0; i < markers.length; i++) {
+    final marker = markers[i];
+    features[i] = {
+      'type': 'Feature',
+      'id': marker.assetId,
+      'geometry': {
+        'type': 'Point',
+        'coordinates': [marker.location.longitude, marker.location.latitude],
+      },
+    };
+  }
+  return {'type': 'FeatureCollection', 'features': features};
+}, dependencies: [mapServiceProvider]);
+
+final mapStateProvider = NotifierProvider<MapStateNotifier, MapState>(MapStateNotifier.new);

mobile/lib/presentation/widgets/map/map.widget.dart

@@ -0,0 +1,274 @@
+import 'dart:async';
+import 'dart:io';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:geolocator/geolocator.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
+import 'package:immich_mobile/presentation/widgets/map/map_utils.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/async_mutex.dart';
+import 'package:immich_mobile/utils/debounce.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_mobile/widgets/map/map_theme_override.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class CustomSourceProperties implements SourceProperties {
+  final Map<String, dynamic> data;
+  const CustomSourceProperties({required this.data});
+
+  @override
+  Map<String, dynamic> toJson() {
+    return {
+      "type": "geojson",
+      "data": data,
+      // "cluster": true,
+      // "clusterRadius": 1,
+      // "clusterMinPoints": 5,
+      // "tolerance": 0.1,
+    };
+  }
+}
+
+class DriftMap extends ConsumerStatefulWidget {
+  final LatLng? initialLocation;
+
+  const DriftMap({super.key, this.initialLocation});
+
+  @override
+  ConsumerState<DriftMap> createState() => _DriftMapState();
+}
+
+class _DriftMapState extends ConsumerState<DriftMap> {
+  MapLibreMapController? mapController;
+  final _reloadMutex = AsyncMutex();
+  final _debouncer = Debouncer(interval: const Duration(milliseconds: 500), maxWaitTime: const Duration(seconds: 2));
+  final ValueNotifier<double> bottomSheetOffset = ValueNotifier(0.25);
+  StreamSubscription? _eventSubscription;
+
+  @override
+  void initState() {
+    super.initState();
+    _eventSubscription = EventStream.shared.listen<MapMarkerReloadEvent>(_onEvent);
+  }
+
+  @override
+  void dispose() {
+    _debouncer.dispose();
+    bottomSheetOffset.dispose();
+    _eventSubscription?.cancel();
+    super.dispose();
+  }
+
+  void onMapCreated(MapLibreMapController controller) {
+    mapController = controller;
+  }
+
+  void _onEvent(_) => _debouncer.run(() => setBounds(forceReload: true));
+
+  Future<void> onMapReady() async {
+    final controller = mapController;
+    if (controller == null) {
+      return;
+    }
+
+    await controller.addSource(
+      MapUtils.defaultSourceId,
+      const CustomSourceProperties(data: {'type': 'FeatureCollection', 'features': []}),
+    );
+
+    if (Platform.isAndroid) {
+      await controller.addCircleLayer(
+        MapUtils.defaultSourceId,
+        MapUtils.defaultHeatMapLayerId,
+        const CircleLayerProperties(
+          circleRadius: 10,
+          circleColor: "rgba(150,86,34,0.7)",
+          circleBlur: 1.0,
+          circleOpacity: 0.7,
+          circleStrokeWidth: 0.1,
+          circleStrokeColor: "rgba(203,46,19,0.5)",
+          circleStrokeOpacity: 0.7,
+        ),
+      );
+    }
+
+    if (Platform.isIOS) {
+      await controller.addHeatmapLayer(
+        MapUtils.defaultSourceId,
+        MapUtils.defaultHeatMapLayerId,
+        MapUtils.defaultHeatmapLayerProperties,
+      );
+    }
+
+    _debouncer.run(() => setBounds(forceReload: true));
+    controller.addListener(onMapMoved);
+  }
+
+  void onMapMoved() {
+    if (mapController!.isCameraMoving || !mounted) {
+      return;
+    }
+
+    _debouncer.run(setBounds);
+  }
+
+  Future<void> setBounds({bool forceReload = false}) async {
+    final controller = mapController;
+    if (controller == null || !mounted) {
+      return;
+    }
+
+    // When the AssetViewer is open, the DriftMap route stays alive in the background.
+    // If we continue to update bounds, the map-scoped timeline service gets recreated and the previous one disposed,
+    // which can invalidate the TimelineService instance that was passed into AssetViewerRoute (causing "loading forever").
+    final currentRoute = ref.read(currentRouteNameProvider);
+    if (currentRoute == AssetViewerRoute.name || currentRoute == GalleryViewerRoute.name) {
+      return;
+    }
+
+    final bounds = await controller.getVisibleRegion();
+    unawaited(
+      _reloadMutex.run(() async {
+        if (mounted && (ref.read(mapStateProvider.notifier).setBounds(bounds) || forceReload)) {
+          final markers = await ref.read(mapMarkerProvider(bounds).future);
+          await reloadMarkers(markers);
+        }
+      }),
+    );
+  }
+
+  Future<void> reloadMarkers(Map<String, dynamic> markers) async {
+    final controller = mapController;
+    if (controller == null || !mounted) {
+      return;
+    }
+
+    await controller.setGeoJsonSource(MapUtils.defaultSourceId, markers);
+  }
+
+  Future<void> onZoomToLocation() async {
+    final (location, error) = await MapUtils.checkPermAndGetLocation(context: context);
+    if (error != null) {
+      if (error == LocationPermission.unableToDetermine && context.mounted) {
+        ImmichToast.show(
+          context: context,
+          gravity: ToastGravity.BOTTOM,
+          toastType: ToastType.error,
+          msg: "map_cannot_get_user_location".t(context: context),
+        );
+      }
+      return;
+    }
+
+    final controller = mapController;
+    if (controller != null && location != null) {
+      await controller.animateCamera(
+        CameraUpdate.newLatLngZoom(LatLng(location.latitude, location.longitude), MapUtils.mapZoomToAssetLevel),
+        duration: const Duration(milliseconds: 800),
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        _Map(initialLocation: widget.initialLocation, onMapCreated: onMapCreated, onMapReady: onMapReady),
+        _DynamicBottomSheet(bottomSheetOffset: bottomSheetOffset),
+        _DynamicMyLocationButton(onZoomToLocation: onZoomToLocation, bottomSheetOffset: bottomSheetOffset),
+      ],
+    );
+  }
+}
+
+class _Map extends StatelessWidget {
+  final LatLng? initialLocation;
+
+  const _Map({this.initialLocation, required this.onMapCreated, required this.onMapReady});
+
+  final MapCreatedCallback onMapCreated;
+
+  final VoidCallback onMapReady;
+
+  @override
+  Widget build(BuildContext context) {
+    final initialLocation = this.initialLocation;
+    return MapThemeOverride(
+      mapBuilder: (style) => style.widgetWhen(
+        onData: (style) => MapLibreMap(
+          initialCameraPosition: initialLocation == null
+              ? const CameraPosition(target: LatLng(0, 0), zoom: 0)
+              : CameraPosition(target: initialLocation, zoom: MapUtils.mapZoomToAssetLevel),
+          compassEnabled: false,
+          rotateGesturesEnabled: false,
+          styleString: style,
+          onMapCreated: onMapCreated,
+          onStyleLoadedCallback: onMapReady,
+          attributionButtonPosition: AttributionButtonPosition.topRight,
+          attributionButtonMargins: const Point(8, kToolbarHeight),
+        ),
+      ),
+    );
+  }
+}
+
+class _DynamicBottomSheet extends StatefulWidget {
+  final ValueNotifier<double> bottomSheetOffset;
+
+  const _DynamicBottomSheet({required this.bottomSheetOffset});
+
+  @override
+  State<_DynamicBottomSheet> createState() => _DynamicBottomSheetState();
+}
+
+class _DynamicBottomSheetState extends State<_DynamicBottomSheet> {
+  @override
+  Widget build(BuildContext context) {
+    return NotificationListener<DraggableScrollableNotification>(
+      onNotification: (notification) {
+        widget.bottomSheetOffset.value = notification.extent;
+        return true;
+      },
+      child: const MapBottomSheet(),
+    );
+  }
+}
+
+class _DynamicMyLocationButton extends StatelessWidget {
+  const _DynamicMyLocationButton({required this.onZoomToLocation, required this.bottomSheetOffset});
+
+  final VoidCallback onZoomToLocation;
+  final ValueNotifier<double> bottomSheetOffset;
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<double>(
+      valueListenable: bottomSheetOffset,
+      builder: (context, offset, child) {
+        return Positioned(
+          right: 20,
+          bottom: context.height * (offset - 0.02) + context.padding.bottom,
+          child: AnimatedOpacity(
+            opacity: offset < 0.8 ? 1 : 0,
+            duration: const Duration(milliseconds: 150),
+            child: ElevatedButton(
+              onPressed: onZoomToLocation,
+              style: ElevatedButton.styleFrom(shape: const CircleBorder()),
+              child: const Icon(Icons.my_location),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/presentation/widgets/map/map_settings_sheet.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
+import 'package:immich_mobile/widgets/map/map_settings/map_settings_list_tile.dart';
+import 'package:immich_mobile/widgets/map/map_settings/map_settings_time_dropdown.dart';
+import 'package:immich_mobile/widgets/map/map_settings/map_theme_picker.dart';
+
+class DriftMapSettingsSheet extends HookConsumerWidget {
+  const DriftMapSettingsSheet({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final mapState = ref.watch(mapStateProvider);
+
+    return DraggableScrollableSheet(
+      expand: false,
+      initialChildSize: 0.6,
+      builder: (ctx, scrollController) => SingleChildScrollView(
+        controller: scrollController,
+        child: Card(
+          elevation: 0.0,
+          shadowColor: Colors.transparent,
+          color: Colors.transparent,
+          margin: EdgeInsets.zero,
+          child: Column(
+            mainAxisSize: MainAxisSize.max,
+            children: [
+              MapThemePicker(
+                themeMode: mapState.themeMode,
+                onThemeChange: (mode) => ref.read(mapStateProvider.notifier).switchTheme(mode),
+              ),
+              const Divider(height: 30, thickness: 1),
+              MapSettingsListTile(
+                title: "map_settings_only_show_favorites".t(context: context),
+                selected: mapState.onlyFavorites,
+                onChanged: (favoriteOnly) => ref.read(mapStateProvider.notifier).switchFavoriteOnly(favoriteOnly),
+              ),
+              MapSettingsListTile(
+                title: "map_settings_include_show_archived".t(context: context),
+                selected: mapState.includeArchived,
+                onChanged: (includeArchive) =>
+                    ref.read(mapStateProvider.notifier).switchIncludeArchived(includeArchive),
+              ),
+              MapSettingsListTile(
+                title: "map_settings_include_show_partners".t(context: context),
+                selected: mapState.withPartners,
+                onChanged: (withPartners) => ref.read(mapStateProvider.notifier).switchWithPartners(withPartners),
+              ),
+              MapTimeDropDown(
+                relativeTime: mapState.relativeDays,
+                onTimeChange: (time) => ref.read(mapStateProvider.notifier).setRelativeTime(time),
+              ),
+              const SizedBox(height: 20),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/map/map_utils.dart

@@ -0,0 +1,138 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:geolocator/geolocator.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
+import 'package:logging/logging.dart';
+import 'package:maplibre_gl/maplibre_gl.dart';
+
+class MapUtils {
+  static final Logger _logger = Logger("MapUtils");
+
+  static const mapZoomToAssetLevel = 12.0;
+  static const defaultSourceId = 'asset-map-markers';
+  static const defaultHeatMapLayerId = 'asset-heatmap-layer';
+  static var markerCompleter = Completer()..complete();
+
+  static const defaultCircleLayerLayerProperties = CircleLayerProperties(
+    circleRadius: 10,
+    circleColor: "rgba(150,86,34,0.7)",
+    circleBlur: 1.0,
+    circleOpacity: 0.7,
+    circleStrokeWidth: 0.1,
+    circleStrokeColor: "rgba(203,46,19,0.5)",
+    circleStrokeOpacity: 0.7,
+  );
+
+  static const defaultHeatmapLayerProperties = HeatmapLayerProperties(
+    heatmapColor: [
+      Expressions.interpolate,
+      ["linear"],
+      ["heatmap-density"],
+      0.0,
+      "rgba(103,58,183,0.0)",
+      0.3,
+      "rgb(103,58,183)",
+      0.5,
+      "rgb(33,149,243)",
+      0.7,
+      "rgb(76,175,79)",
+      0.95,
+      "rgb(255,235,59)",
+      1.0,
+      "rgb(255,86,34)",
+    ],
+    heatmapIntensity: [
+      Expressions.interpolate,
+      ["linear"],
+      [Expressions.zoom],
+      0,
+      0.5,
+      9,
+      2,
+    ],
+    heatmapRadius: [
+      Expressions.interpolate,
+      ["linear"],
+      [Expressions.zoom],
+      0,
+      4,
+      4,
+      8,
+      9,
+      16,
+    ],
+    heatmapOpacity: 0.7,
+  );
+
+  static Future<(Position?, LocationPermission?)> checkPermAndGetLocation({
+    required BuildContext context,
+    bool silent = false,
+  }) async {
+    try {
+      bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
+      if (!serviceEnabled && !silent) {
+        unawaited(showDialog(context: context, builder: (context) => _LocationServiceDisabledDialog(context)));
+        return (null, LocationPermission.deniedForever);
+      }
+
+      LocationPermission permission = await Geolocator.checkPermission();
+      bool shouldRequestPermission = false;
+
+      if (permission == LocationPermission.denied && !silent) {
+        shouldRequestPermission = await showDialog(
+          context: context,
+          builder: (context) => _LocationPermissionDisabledDialog(context),
+        );
+        if (shouldRequestPermission) {
+          permission = await Geolocator.requestPermission();
+        }
+      }
+
+      if (permission == LocationPermission.denied || permission == LocationPermission.deniedForever) {
+        // Open app settings only if you did not request for permission before
+        if (permission == LocationPermission.deniedForever && !shouldRequestPermission && !silent) {
+          await Geolocator.openAppSettings();
+        }
+        return (null, LocationPermission.deniedForever);
+      }
+
+      Position currentUserLocation = await Geolocator.getCurrentPosition(
+        locationSettings: const LocationSettings(
+          accuracy: LocationAccuracy.high,
+          distanceFilter: 0,
+          timeLimit: Duration(seconds: 5),
+        ),
+      );
+      return (currentUserLocation, null);
+    } catch (error, stack) {
+      _logger.severe("Cannot get user's current location", error, stack);
+      return (null, LocationPermission.unableToDetermine);
+    }
+  }
+}
+
+class _LocationServiceDisabledDialog extends ConfirmDialog {
+  _LocationServiceDisabledDialog(BuildContext context)
+    : super(
+        title: 'map_location_service_disabled_title'.t(context: context),
+        content: 'map_location_service_disabled_content'.t(context: context),
+        cancel: 'cancel'.t(context: context),
+        ok: 'yes'.t(context: context),
+        onOk: () async {
+          await Geolocator.openLocationSettings();
+        },
+      );
+}
+
+class _LocationPermissionDisabledDialog extends ConfirmDialog {
+  _LocationPermissionDisabledDialog(BuildContext context)
+    : super(
+        title: 'map_no_location_permission_title'.t(context: context),
+        content: 'map_no_location_permission_content'.t(context: context),
+        cancel: 'cancel'.t(context: context),
+        ok: 'yes'.t(context: context),
+        onOk: () {},
+      );
+}

mobile/lib/presentation/widgets/memory/memory_bottom_info.widget.dart

@@ -0,0 +1,57 @@
+// ignore_for_file: require_trailing_commas
+
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/models/memory.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class DriftMemoryBottomInfo extends StatelessWidget {
+  final DriftMemory memory;
+  final String title;
+  const DriftMemoryBottomInfo({super.key, required this.memory, required this.title});
+
+  @override
+  Widget build(BuildContext context) {
+    final df = DateFormat.yMMMMd();
+    final fileCreatedDate = memory.assets.first.createdAt;
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                title,
+                style: TextStyle(color: Colors.grey[400], fontSize: 13.0, fontWeight: FontWeight.w500),
+              ),
+              Text(
+                df.format(fileCreatedDate),
+                style: const TextStyle(color: Colors.white, fontSize: 15.0, fontWeight: FontWeight.w500),
+              ),
+            ],
+          ),
+          Tooltip(
+            message: 'view_in_timeline'.tr(),
+            child: MaterialButton(
+              minWidth: 0,
+              onPressed: () async {
+                await context.maybePop();
+                await context.navigateTo(const TabShellRoute(children: [MainTimelineRoute()]));
+                EventStream.shared.emit(ScrollToDateEvent(fileCreatedDate));
+              },
+              shape: const CircleBorder(),
+              color: Colors.white.withValues(alpha: 0.2),
+              elevation: 0,
+              child: const Icon(Icons.open_in_new, color: Colors.white),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/memory/memory_card.widget.dart

@@ -0,0 +1,118 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.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/presentation/widgets/asset_viewer/video_viewer.widget.dart';
+import 'package:immich_mobile/presentation/widgets/images/full_image.widget.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
+
+class DriftMemoryCard extends StatelessWidget {
+  final RemoteAsset asset;
+  final String title;
+  final bool showTitle;
+  final Function()? onVideoEnded;
+
+  const DriftMemoryCard({
+    required this.asset,
+    required this.title,
+    required this.showTitle,
+    this.onVideoEnded,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      color: Colors.black,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(25.0)),
+        side: BorderSide(color: Colors.black, width: 1.0),
+      ),
+      clipBehavior: Clip.hardEdge,
+      child: Stack(
+        children: [
+          SizedBox.expand(child: _BlurredBackdrop(asset: asset)),
+          LayoutBuilder(
+            builder: (context, constraints) {
+              // Determine the fit using the aspect ratio
+              BoxFit fit = BoxFit.contain;
+              if (asset.width != null && asset.height != null) {
+                final aspectRatio = asset.width! / asset.height!;
+                final phoneAspectRatio = constraints.maxWidth / constraints.maxHeight;
+                // Look for a 25% difference in either direction
+                if (phoneAspectRatio * .75 < aspectRatio && phoneAspectRatio * 1.25 > aspectRatio) {
+                  // Cover to look nice if we have nearly the same aspect ratio
+                  fit = BoxFit.cover;
+                }
+              }
+
+              if (asset.isImage) {
+                return FullImage(asset, fit: fit, size: const Size(double.infinity, double.infinity));
+              } else {
+                return SizedBox(
+                  width: context.width,
+                  height: context.height,
+                  child: NativeVideoViewer(
+                    key: ValueKey(asset.id),
+                    asset: asset,
+                    showControls: false,
+                    playbackDelayFactor: 2,
+                    image: FullImage(asset, size: Size(context.width, context.height), fit: BoxFit.contain),
+                  ),
+                );
+              }
+            },
+          ),
+          if (showTitle)
+            Positioned(
+              left: 18.0,
+              bottom: 18.0,
+              child: Text(
+                title,
+                style: context.textTheme.headlineMedium?.copyWith(color: Colors.white, fontWeight: FontWeight.w500),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _BlurredBackdrop extends HookWidget {
+  final RemoteAsset asset;
+
+  const _BlurredBackdrop({required this.asset});
+
+  @override
+  Widget build(BuildContext context) {
+    final blurhash = useDriftBlurHashRef(asset).value;
+    if (blurhash != null) {
+      // Use a nice cheap blur hash image decoration
+      return Container(
+        decoration: BoxDecoration(
+          image: DecorationImage(image: MemoryImage(blurhash), fit: BoxFit.cover),
+        ),
+        child: Container(color: Colors.black.withValues(alpha: 0.2)),
+      );
+    } else {
+      // Fall back to using a more expensive image filtered
+      // Since the ImmichImage is already precached, we can
+      // safely use that as the image provider
+      return ImageFiltered(
+        imageFilter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
+        child: Container(
+          decoration: BoxDecoration(
+            image: DecorationImage(
+              image: getFullImageProvider(asset, size: Size(context.width, context.height)),
+              fit: BoxFit.cover,
+            ),
+          ),
+          child: Container(color: Colors.black.withValues(alpha: 0.2)),
+        ),
+      );
+    }
+  }
+}

mobile/lib/presentation/widgets/memory/memory_lane.widget.dart

@@ -0,0 +1,85 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/memory.model.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/pages/drift_memory.page.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/memory.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class DriftMemoryLane extends ConsumerWidget {
+  const DriftMemoryLane({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final memoryLaneProvider = ref.watch(driftMemoryFutureProvider);
+    final memories = memoryLaneProvider.value ?? const [];
+    if (memories.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxHeight: 200),
+      child: CarouselView(
+        itemExtent: 145.0,
+        shrinkExtent: 1.0,
+        elevation: 2,
+        backgroundColor: Colors.black,
+        overlayColor: WidgetStateProperty.all(Colors.white.withValues(alpha: 0.1)),
+        onTap: (index) {
+          ref.read(hapticFeedbackProvider.notifier).heavyImpact();
+          if (memories[index].assets.isNotEmpty) {
+            DriftMemoryPage.setMemory(ref, memories[index]);
+          }
+          context.pushRoute(DriftMemoryRoute(memories: memories, memoryIndex: index));
+        },
+        children: memories
+            .map((memory) => DriftMemoryCard(key: Key(memory.id), memory: memory))
+            .toList(growable: false),
+      ),
+    );
+  }
+}
+
+class DriftMemoryCard extends ConsumerWidget {
+  const DriftMemoryCard({super.key, required this.memory});
+
+  final DriftMemory memory;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final yearsAgo = DateTime.now().year - memory.data.year;
+    final title = 'years_ago'.t(context: context, args: {'years': yearsAgo.toString()});
+    return Center(
+      child: Stack(
+        children: [
+          ColorFiltered(
+            colorFilter: ColorFilter.mode(Colors.black.withValues(alpha: 0.2), BlendMode.darken),
+            child: SizedBox(
+              width: 205,
+              height: 200,
+              child: Thumbnail.remote(
+                remoteId: memory.assets[0].id,
+                thumbhash: memory.assets[0].thumbHash ?? "",
+                fit: BoxFit.cover,
+              ),
+            ),
+          ),
+          Positioned(
+            bottom: 16,
+            left: 16,
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(maxWidth: 114),
+              child: Text(
+                title,
+                style: const TextStyle(fontWeight: FontWeight.w600, color: Colors.white, fontSize: 15),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/people/partner_user_avatar.widget.dart

@@ -0,0 +1,31 @@
+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';
+
+class PartnerUserAvatar extends StatelessWidget {
+  const PartnerUserAvatar({super.key, required this.partner});
+
+  final PartnerUserDto partner;
+
+  @override
+  Widget build(BuildContext context) {
+    final url = "${Store.get(StoreKey.serverEndpoint)}/users/${partner.id}/profile-image";
+    final nameFirstLetter = partner.name.isNotEmpty ? partner.name[0] : "";
+    return CircleAvatar(
+      radius: 16,
+      backgroundColor: context.primaryColor.withAlpha(50),
+      foregroundImage: CachedNetworkImageProvider(
+        url,
+        headers: ApiService.getRequestHeaders(),
+        cacheKey: "user-${partner.id}-profile",
+      ),
+      // silence errors if user has no profile image, use initials as fallback
+      onForegroundImageError: (exception, stackTrace) {},
+      child: Text(nameFirstLetter.toUpperCase()),
+    );
+  }
+}

mobile/lib/presentation/widgets/people/person_edit_birthday_modal.widget.dart

@@ -0,0 +1,119 @@
+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/domain/models/person.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:scroll_date_picker/scroll_date_picker.dart';
+import 'package:immich_mobile/utils/debug_print.dart';
+
+class DriftPersonBirthdayEditForm extends ConsumerStatefulWidget {
+  final DriftPerson person;
+
+  const DriftPersonBirthdayEditForm({super.key, required this.person});
+
+  @override
+  ConsumerState<DriftPersonBirthdayEditForm> createState() => _DriftPersonNameEditFormState();
+}
+
+class _DriftPersonNameEditFormState extends ConsumerState<DriftPersonBirthdayEditForm> {
+  late DateTime _selectedDate;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedDate = widget.person.birthDate ?? DateTime.now();
+  }
+
+  void saveBirthday() async {
+    try {
+      final result = await ref.read(driftPeopleServiceProvider).updateBrithday(widget.person.id, _selectedDate);
+
+      if (result != 0) {
+        ref.invalidate(driftGetAllPeopleProvider);
+        context.pop<DateTime>(_selectedDate);
+      }
+    } catch (error) {
+      dPrint(() => 'Error updating birthday: $error');
+
+      if (!context.mounted) {
+        return;
+      }
+
+      ImmichToast.show(
+        context: context,
+        msg: 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text(
+        "edit_birthday".t(context: context),
+        style: const TextStyle(fontWeight: FontWeight.bold),
+      ),
+      content: SizedBox(
+        width: double.maxFinite,
+        height: 300,
+        child: ClipRRect(
+          borderRadius: const BorderRadius.all(Radius.circular(16.0)),
+          child: ScrollDatePicker(
+            options: DatePickerOptions(
+              backgroundColor: context.colorScheme.surfaceContainerHigh,
+              itemExtent: 50,
+              diameterRatio: 5,
+            ),
+            scrollViewOptions: DatePickerScrollViewOptions(
+              day: ScrollViewDetailOptions(
+                isLoop: false,
+                margin: const EdgeInsets.all(12),
+                selectedTextStyle: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+              ),
+              month: ScrollViewDetailOptions(
+                isLoop: false,
+                margin: const EdgeInsets.all(12),
+                selectedTextStyle: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+              ),
+              year: ScrollViewDetailOptions(
+                isLoop: false,
+                margin: const EdgeInsets.all(12),
+                selectedTextStyle: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+              ),
+            ),
+            selectedDate: _selectedDate,
+            locale: context.locale,
+            minimumDate: DateTime(1800, 1, 1),
+            onDateTimeChanged: (DateTime value) {
+              setState(() {
+                _selectedDate = value;
+              });
+            },
+          ),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => context.pop(null),
+          child: Text(
+            "cancel",
+            style: TextStyle(color: Colors.red[300], fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+        TextButton(
+          onPressed: () => saveBirthday(),
+          child: Text(
+            "save",
+            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/people/person_edit_name_modal.widget.dart

@@ -0,0 +1,83 @@
+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/domain/models/person.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_mobile/utils/debug_print.dart';
+
+class DriftPersonNameEditForm extends ConsumerStatefulWidget {
+  final DriftPerson person;
+
+  const DriftPersonNameEditForm({super.key, required this.person});
+
+  @override
+  ConsumerState<DriftPersonNameEditForm> createState() => _DriftPersonNameEditFormState();
+}
+
+class _DriftPersonNameEditFormState extends ConsumerState<DriftPersonNameEditForm> {
+  late TextEditingController _formController;
+
+  @override
+  void initState() {
+    super.initState();
+    _formController = TextEditingController(text: widget.person.name);
+  }
+
+  void onEdit(String personId, String newName) async {
+    try {
+      final result = await ref.read(driftPeopleServiceProvider).updateName(personId, newName);
+      if (result != 0) {
+        ref.invalidate(driftGetAllPeopleProvider);
+        context.pop<String>(newName);
+      }
+    } catch (error) {
+      dPrint(() => 'Error updating name: $error');
+
+      if (!context.mounted) {
+        return;
+      }
+
+      ImmichToast.show(
+        context: context,
+        msg: 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: const Text("edit_name", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+      content: SingleChildScrollView(
+        child: TextFormField(
+          controller: _formController,
+          textCapitalization: TextCapitalization.words,
+          autofocus: true,
+          decoration: InputDecoration(hintText: 'name'.tr(), border: const OutlineInputBorder()),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => context.pop(null),
+          child: Text(
+            "cancel",
+            style: TextStyle(color: Colors.red[300], fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+        TextButton(
+          onPressed: () => onEdit(widget.person.id, _formController.text),
+          child: Text(
+            "save",
+            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/people/person_option_sheet.widget.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+
+class PersonOptionSheet extends ConsumerWidget {
+  const PersonOptionSheet({super.key, this.onEditName, this.onEditBirthday, this.birthdayExists = false});
+
+  final VoidCallback? onEditName;
+  final VoidCallback? onEditBirthday;
+  final bool birthdayExists;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    TextStyle textStyle = Theme.of(context).textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w600);
+
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 24.0),
+        child: ListView(
+          shrinkWrap: true,
+          children: [
+            ListTile(
+              leading: const Icon(Icons.edit),
+              title: Text('edit_name'.t(context: context), style: textStyle),
+              onTap: onEditName,
+            ),
+            ListTile(
+              leading: const Icon(Icons.cake),
+              title: Text((birthdayExists ? 'edit_birthday' : "add_birthday").t(context: context), style: textStyle),
+              onTap: onEditBirthday,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/remote_album/drift_album_option.widget.dart

@@ -0,0 +1,157 @@
+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/presentation/widgets/action_buttons/base_action_button.widget.dart';
+
+class DriftRemoteAlbumOption extends ConsumerWidget {
+  const DriftRemoteAlbumOption({
+    super.key,
+    this.onAddPhotos,
+    this.onAddUsers,
+    this.onDeleteAlbum,
+    this.onLeaveAlbum,
+    this.onCreateSharedLink,
+    this.onToggleAlbumOrder,
+    this.onEditAlbum,
+    this.onShowOptions,
+    this.iconColor,
+    this.iconShadows,
+  });
+
+  final VoidCallback? onAddPhotos;
+  final VoidCallback? onAddUsers;
+  final VoidCallback? onDeleteAlbum;
+  final VoidCallback? onLeaveAlbum;
+  final VoidCallback? onCreateSharedLink;
+  final VoidCallback? onToggleAlbumOrder;
+  final VoidCallback? onEditAlbum;
+  final VoidCallback? onShowOptions;
+  final Color? iconColor;
+  final List<Shadow>? iconShadows;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = context.themeData;
+    final menuChildren = <Widget>[];
+
+    if (onEditAlbum != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'edit_album'.t(context: context),
+          iconData: Icons.edit,
+          onPressed: onEditAlbum,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onAddPhotos != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'add_photos'.t(context: context),
+          iconData: Icons.add_a_photo,
+          onPressed: onAddPhotos,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onAddUsers != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'album_viewer_page_share_add_users'.t(context: context),
+          iconData: Icons.group_add,
+          onPressed: onAddUsers,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onLeaveAlbum != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'leave_album'.t(context: context),
+          iconData: Icons.person_remove_rounded,
+          onPressed: onLeaveAlbum,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onToggleAlbumOrder != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'change_display_order'.t(context: context),
+          iconData: Icons.swap_vert_rounded,
+          onPressed: onToggleAlbumOrder,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onCreateSharedLink != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'create_shared_link'.t(context: context),
+          iconData: Icons.link,
+          onPressed: onCreateSharedLink,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onShowOptions != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'options'.t(context: context),
+          iconData: Icons.settings,
+          onPressed: onShowOptions,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onDeleteAlbum != null) {
+      menuChildren.add(const Divider(height: 1));
+      menuChildren.add(
+        BaseActionButton(
+          label: 'delete_album'.t(context: context),
+          iconData: Icons.delete,
+          iconColor: context.isDarkTheme ? Colors.red[400] : Colors.red[800],
+          onPressed: onDeleteAlbum,
+          menuItem: true,
+        ),
+      );
+    }
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(theme.scaffoldBackgroundColor),
+        surfaceTintColor: const WidgetStatePropertyAll(Colors.grey),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 6)),
+      ),
+      menuChildren: [
+        ConstrainedBox(
+          constraints: const BoxConstraints(minWidth: 150),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: menuChildren,
+          ),
+        ),
+      ],
+      builder: (context, controller, child) {
+        return IconButton(
+          icon: Icon(Icons.more_vert_rounded, color: iconColor ?? Colors.white, shadows: iconShadows),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
+        );
+      },
+    );
+  }
+}

mobile/lib/presentation/widgets/search/quick_date_picker.dart

@@ -0,0 +1,208 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+
+sealed class DateFilterInputModel {
+  DateTimeRange<DateTime> asDateTimeRange();
+
+  String asHumanReadable(BuildContext context) {
+    // General implementation for arbitrary date and time ranges
+    // If date range is less than 24 hours, set the end date to the end of the day
+    final date = asDateTimeRange();
+    if (date.end.difference(date.start).inHours < 24) {
+      return DateFormat.yMMMd().format(date.start.toLocal());
+    } else {
+      return 'search_filter_date_interval'.t(
+        context: context,
+        args: {
+          "start": DateFormat.yMMMd().format(date.start.toLocal()),
+          "end": DateFormat.yMMMd().format(date.end.toLocal()),
+        },
+      );
+    }
+  }
+}
+
+class RecentMonthRangeFilter extends DateFilterInputModel {
+  final int monthDelta;
+  RecentMonthRangeFilter(this.monthDelta);
+
+  @override
+  DateTimeRange<DateTime> asDateTimeRange() {
+    final now = DateTime.now();
+    // Note that DateTime's constructor properly handles month overflow.
+    final from = DateTime(now.year, now.month - monthDelta, 1);
+    return DateTimeRange<DateTime>(start: from, end: now);
+  }
+
+  @override
+  String asHumanReadable(BuildContext context) {
+    return 'last_months'.t(context: context, args: {"count": monthDelta.toString()});
+  }
+}
+
+class YearFilter extends DateFilterInputModel {
+  final int year;
+  YearFilter(this.year);
+
+  @override
+  DateTimeRange<DateTime> asDateTimeRange() {
+    final now = DateTime.now();
+    final from = DateTime(year, 1, 1);
+
+    if (now.year == year) {
+      // To not go beyond today if the user picks the current year
+      return DateTimeRange<DateTime>(start: from, end: now);
+    }
+
+    final to = DateTime(year, 12, 31, 23, 59, 59);
+    return DateTimeRange<DateTime>(start: from, end: to);
+  }
+
+  @override
+  String asHumanReadable(BuildContext context) {
+    return 'in_year'.tr(namedArgs: {"year": year.toString()});
+  }
+}
+
+class CustomDateFilter extends DateFilterInputModel {
+  final DateTime start;
+  final DateTime end;
+
+  CustomDateFilter(this.start, this.end);
+
+  factory CustomDateFilter.fromRange(DateTimeRange<DateTime> range) {
+    return CustomDateFilter(range.start, range.end);
+  }
+
+  @override
+  DateTimeRange<DateTime> asDateTimeRange() {
+    return DateTimeRange<DateTime>(start: start, end: end);
+  }
+}
+
+enum _QuickPickerType { last1Month, last3Months, last9Months, year, custom }
+
+class QuickDatePicker extends HookWidget {
+  QuickDatePicker({super.key, required this.currentInput, required this.onSelect, required this.onRequestPicker})
+    : _selection = _selectionFromModel(currentInput),
+      _initialYear = _initialYearFromModel(currentInput);
+
+  final Function() onRequestPicker;
+  final Function(DateFilterInputModel range) onSelect;
+
+  final DateFilterInputModel? currentInput;
+  final _QuickPickerType? _selection;
+  final int _initialYear;
+
+  // Generate a list of recent years from 2000 to the current year (including the current one)
+  final List<int> _recentYears = List.generate(1 + DateTime.now().year - 2000, (index) {
+    return index + 2000;
+  });
+
+  static int _initialYearFromModel(DateFilterInputModel? model) {
+    return model?.asDateTimeRange().start.year ?? DateTime.now().year;
+  }
+
+  static _QuickPickerType? _selectionFromModel(DateFilterInputModel? model) {
+    if (model is RecentMonthRangeFilter) {
+      return switch (model.monthDelta) {
+        1 => _QuickPickerType.last1Month,
+        3 => _QuickPickerType.last3Months,
+        9 => _QuickPickerType.last9Months,
+        _ => _QuickPickerType.custom,
+      };
+    } else if (model is YearFilter) {
+      return _QuickPickerType.year;
+    } else if (model is CustomDateFilter) {
+      return _QuickPickerType.custom;
+    }
+    return null;
+  }
+
+  Text _monthLabel(BuildContext context, int monthsFromNow) =>
+      const Text('last_months').t(context: context, args: {"count": monthsFromNow.toString()});
+
+  Widget _yearPicker(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+    return Row(
+      children: [
+        const Text("in_year_selector").tr(),
+        const SizedBox(width: 15),
+        Expanded(
+          child: DropdownMenu(
+            initialSelection: _initialYear,
+            menuStyle: MenuStyle(maximumSize: WidgetStateProperty.all(Size(size.width, size.height * 0.5))),
+            dropdownMenuEntries: _recentYears.map((e) => DropdownMenuEntry(value: e, label: e.toString())).toList(),
+            onSelected: (year) {
+              if (year == null) return;
+              onSelect(YearFilter(year));
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  // We want the exact date picker to always be selectable.
+  // Even if it's already toggled it should always open the full date picker, RadioListTiles don't do that by default
+  // so we wrap it in a InkWell
+  Widget _exactPicker(BuildContext context) {
+    final hasPreviousInput = currentInput != null && currentInput is CustomDateFilter;
+
+    return InkWell(
+      onTap: onRequestPicker,
+      child: IgnorePointer(
+        ignoring: true,
+        child: RadioListTile(
+          title: const Text('pick_custom_range').tr(),
+          subtitle: hasPreviousInput ? Text(currentInput!.asHumanReadable(context)) : null,
+          secondary: hasPreviousInput ? const Icon(Icons.edit) : null,
+          value: _QuickPickerType.custom,
+          toggleable: true,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
+      child: Scrollbar(
+        // Depending on the screen size the last option might get cut off
+        // Add a clear visual cue that there are more options when scrolling
+        // When the screen size is large enough the scrollbar is hidden automatically
+        trackVisibility: true,
+        thumbVisibility: true,
+        child: SingleChildScrollView(
+          child: RadioGroup(
+            onChanged: (value) {
+              if (value == null) return;
+              final _ = switch (value) {
+                _QuickPickerType.custom => onRequestPicker(),
+                _QuickPickerType.last1Month => onSelect(RecentMonthRangeFilter(1)),
+                _QuickPickerType.last3Months => onSelect(RecentMonthRangeFilter(3)),
+                _QuickPickerType.last9Months => onSelect(RecentMonthRangeFilter(9)),
+                // When a year is selected the combobox triggers onSelect() on its own.
+                // Here we handle the radio button being selected which can only ever be the initial year
+                _QuickPickerType.year => onSelect(YearFilter(_initialYear)),
+              };
+            },
+            groupValue: _selection,
+            child: Column(
+              children: [
+                RadioListTile(title: _monthLabel(context, 1), value: _QuickPickerType.last1Month, toggleable: true),
+                RadioListTile(title: _monthLabel(context, 3), value: _QuickPickerType.last3Months, toggleable: true),
+                RadioListTile(title: _monthLabel(context, 9), value: _QuickPickerType.last9Months, toggleable: true),
+                RadioListTile(title: _yearPicker(context), value: _QuickPickerType.year, toggleable: true),
+                _exactPicker(context),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/timeline/constants.dart

@@ -0,0 +1,12 @@
+import 'dart:ui';
+
+const double kTimelineHeaderExtent = 80.0;
+const Size kTimelineFixedTileExtent = Size.square(256);
+const double kTimelineSpacing = 2.0;
+const int kTimelineColumnCount = 3;
+
+const Duration kTimelineScrubberFadeInDuration = Duration(milliseconds: 300);
+const Duration kTimelineScrubberFadeOutDuration = Duration(milliseconds: 800);
+
+const Size kThumbnailResolution = Size.square(320); // TODO: make the resolution vary based on actual tile size
+const kThumbnailDiskCacheSize = 1024 << 20; // 1GiB

mobile/lib/presentation/widgets/timeline/fixed/row.dart

@@ -0,0 +1,149 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+class FixedTimelineRow extends MultiChildRenderObjectWidget {
+  final double dimension;
+  final double spacing;
+  final TextDirection textDirection;
+
+  const FixedTimelineRow({
+    super.key,
+    required this.dimension,
+    required this.spacing,
+    required this.textDirection,
+    required super.children,
+  });
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return RenderFixedRow(dimension: dimension, spacing: spacing, textDirection: textDirection);
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, RenderFixedRow renderObject) {
+    renderObject.dimension = dimension;
+    renderObject.spacing = spacing;
+    renderObject.textDirection = textDirection;
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DoubleProperty('dimension', dimension));
+    properties.add(DoubleProperty('spacing', spacing));
+    properties.add(EnumProperty<TextDirection>('textDirection', textDirection));
+  }
+}
+
+class _RowParentData extends ContainerBoxParentData<RenderBox> {}
+
+class RenderFixedRow extends RenderBox
+    with
+        ContainerRenderObjectMixin<RenderBox, _RowParentData>,
+        RenderBoxContainerDefaultsMixin<RenderBox, _RowParentData> {
+  RenderFixedRow({
+    List<RenderBox>? children,
+    required double dimension,
+    required double spacing,
+    required TextDirection textDirection,
+  }) : _dimension = dimension,
+       _spacing = spacing,
+       _textDirection = textDirection {
+    addAll(children);
+  }
+
+  double get dimension => _dimension;
+  double _dimension;
+
+  set dimension(double value) {
+    if (_dimension == value) return;
+    _dimension = value;
+    markNeedsLayout();
+  }
+
+  double get spacing => _spacing;
+  double _spacing;
+
+  set spacing(double value) {
+    if (_spacing == value) return;
+    _spacing = value;
+    markNeedsLayout();
+  }
+
+  TextDirection get textDirection => _textDirection;
+  TextDirection _textDirection;
+
+  set textDirection(TextDirection value) {
+    if (_textDirection == value) return;
+    _textDirection = value;
+    markNeedsLayout();
+  }
+
+  @override
+  void setupParentData(RenderBox child) {
+    if (child.parentData is! _RowParentData) {
+      child.parentData = _RowParentData();
+    }
+  }
+
+  double get intrinsicWidth => dimension * childCount + spacing * (childCount - 1);
+
+  @override
+  double computeMinIntrinsicWidth(double height) => intrinsicWidth;
+
+  @override
+  double computeMaxIntrinsicWidth(double height) => intrinsicWidth;
+
+  @override
+  double computeMinIntrinsicHeight(double width) => dimension;
+
+  @override
+  double computeMaxIntrinsicHeight(double width) => dimension;
+
+  @override
+  double? computeDistanceToActualBaseline(TextBaseline baseline) {
+    return defaultComputeDistanceToHighestActualBaseline(baseline);
+  }
+
+  @override
+  bool hitTestChildren(BoxHitTestResult result, {required Offset position}) {
+    return defaultHitTestChildren(result, position: position);
+  }
+
+  @override
+  void paint(PaintingContext context, Offset offset) {
+    defaultPaint(context, offset);
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DoubleProperty('dimension', dimension));
+    properties.add(DoubleProperty('spacing', spacing));
+    properties.add(EnumProperty<TextDirection>('textDirection', textDirection));
+  }
+
+  @override
+  void performLayout() {
+    RenderBox? child = firstChild;
+    if (child == null) {
+      size = constraints.smallest;
+      return;
+    }
+    // Use the entire width of the parent for the row.
+    size = Size(constraints.maxWidth, dimension);
+    // Each tile is forced to be dimension x dimension.
+    final childConstraints = BoxConstraints.tight(Size(dimension, dimension));
+    final flipMainAxis = textDirection == TextDirection.rtl;
+    Offset offset = Offset(flipMainAxis ? size.width - dimension : 0, 0);
+    final dx = (flipMainAxis ? -1 : 1) * (dimension + spacing);
+    // Layout each child horizontally.
+    while (child != null) {
+      child.layout(childConstraints, parentUsesSize: false);
+      final childParentData = child.parentData! as _RowParentData;
+      childParentData.offset = offset;
+      offset += Offset(dx, 0);
+      child = childParentData.nextSibling;
+    }
+  }
+}

mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart

@@ -0,0 +1,215 @@
+import 'dart:async';
+import 'dart:math' as math;
+
+import 'package:auto_route/auto_route.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/services/timeline.service.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.page.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail_tile.widget.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/fixed/row.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/header.widget.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/segment_builder.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/timeline_drag_region.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class FixedSegment extends Segment {
+  final double tileHeight;
+  final int columnCount;
+  final double mainAxisExtend;
+
+  const FixedSegment({
+    required super.firstIndex,
+    required super.lastIndex,
+    required super.startOffset,
+    required super.endOffset,
+    required super.firstAssetIndex,
+    required super.bucket,
+    required this.tileHeight,
+    required this.columnCount,
+    required super.headerExtent,
+    required super.spacing,
+    required super.header,
+  }) : assert(tileHeight != 0),
+       mainAxisExtend = tileHeight + spacing;
+
+  @override
+  double indexToLayoutOffset(int index) {
+    final relativeIndex = index - gridIndex;
+    return relativeIndex < 0 ? startOffset : gridOffset + (mainAxisExtend * relativeIndex);
+  }
+
+  @override
+  int getMinChildIndexForScrollOffset(double scrollOffset) {
+    final adjustedOffset = scrollOffset - gridOffset;
+    if (!adjustedOffset.isFinite || adjustedOffset < 0) return firstIndex;
+    return gridIndex + (adjustedOffset / mainAxisExtend).floor();
+  }
+
+  @override
+  int getMaxChildIndexForScrollOffset(double scrollOffset) {
+    final adjustedOffset = scrollOffset - gridOffset;
+    if (!adjustedOffset.isFinite || adjustedOffset < 0) return firstIndex;
+    return gridIndex + (adjustedOffset / mainAxisExtend).ceil() - 1;
+  }
+
+  @override
+  Widget builder(BuildContext context, int index) {
+    final rowIndexInSegment = index - (firstIndex + 1);
+    final assetIndex = rowIndexInSegment * columnCount;
+    final assetCount = bucket.assetCount;
+    final numberOfAssets = math.min(columnCount, assetCount - assetIndex);
+
+    if (index == firstIndex) {
+      return TimelineHeader(bucket: bucket, header: header, height: headerExtent, assetOffset: firstAssetIndex);
+    }
+
+    return _FixedSegmentRow(
+      assetIndex: firstAssetIndex + assetIndex,
+      assetCount: numberOfAssets,
+      tileHeight: tileHeight,
+      spacing: spacing,
+    );
+  }
+}
+
+class _FixedSegmentRow extends ConsumerWidget {
+  final int assetIndex;
+  final int assetCount;
+  final double tileHeight;
+  final double spacing;
+
+  const _FixedSegmentRow({
+    required this.assetIndex,
+    required this.assetCount,
+    required this.tileHeight,
+    required this.spacing,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isScrubbing = ref.watch(timelineStateProvider.select((s) => s.isScrubbing));
+    final timelineService = ref.read(timelineServiceProvider);
+
+    if (isScrubbing) {
+      return _buildPlaceholder(context);
+    }
+    if (timelineService.hasRange(assetIndex, assetCount)) {
+      return _buildAssetRow(context, timelineService.getAssets(assetIndex, assetCount), timelineService);
+    }
+
+    return FutureBuilder<List<BaseAsset>>(
+      future: timelineService.loadAssets(assetIndex, assetCount),
+      builder: (context, snapshot) {
+        if (snapshot.connectionState != ConnectionState.done) {
+          return _buildPlaceholder(context);
+        }
+        return _buildAssetRow(context, snapshot.requireData, timelineService);
+      },
+    );
+  }
+
+  Widget _buildPlaceholder(BuildContext context) {
+    return SegmentBuilder.buildPlaceholder(context, assetCount, size: Size.square(tileHeight), spacing: spacing);
+  }
+
+  Widget _buildAssetRow(BuildContext context, List<BaseAsset> assets, TimelineService timelineService) {
+    return FixedTimelineRow(
+      dimension: tileHeight,
+      spacing: spacing,
+      textDirection: Directionality.of(context),
+      children: [
+        for (int i = 0; i < assets.length; i++)
+          TimelineAssetIndexWrapper(
+            assetIndex: assetIndex + i,
+            segmentIndex: 0, // For simplicity, using 0 for now
+            child: _AssetTileWidget(
+              key: ValueKey(Object.hash(assets[i].heroTag, assetIndex + i, timelineService.hashCode)),
+              asset: assets[i],
+              assetIndex: assetIndex + i,
+            ),
+          ),
+      ],
+    );
+  }
+}
+
+class _AssetTileWidget extends ConsumerWidget {
+  final BaseAsset asset;
+  final int assetIndex;
+
+  const _AssetTileWidget({super.key, required this.asset, required this.assetIndex});
+
+  Future _handleOnTap(BuildContext ctx, WidgetRef ref, int assetIndex, BaseAsset asset, int? heroOffset) async {
+    final multiSelectState = ref.read(multiSelectProvider);
+
+    if (multiSelectState.forceEnable || multiSelectState.isEnabled) {
+      ref.read(multiSelectProvider.notifier).toggleAssetSelection(asset);
+    } else {
+      await ref.read(timelineServiceProvider).loadAssets(assetIndex, 1);
+      ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
+      AssetViewer.setAsset(ref, asset);
+      unawaited(
+        ctx.pushRoute(
+          AssetViewerRoute(
+            initialIndex: assetIndex,
+            timelineService: ref.read(timelineServiceProvider),
+            heroOffset: heroOffset,
+            currentAlbum: ref.read(currentRemoteAlbumProvider),
+          ),
+        ),
+      );
+    }
+  }
+
+  void _handleOnLongPress(WidgetRef ref, BaseAsset asset) {
+    final multiSelectState = ref.read(multiSelectProvider);
+    if (multiSelectState.isEnabled || multiSelectState.forceEnable) {
+      return;
+    }
+
+    ref.read(hapticFeedbackProvider.notifier).heavyImpact();
+    ref.read(multiSelectProvider.notifier).toggleAssetSelection(asset);
+  }
+
+  bool _getLockSelectionStatus(WidgetRef ref) {
+    final lockSelectionAssets = ref.read(multiSelectProvider.select((state) => state.lockedSelectionAssets));
+
+    if (lockSelectionAssets.isEmpty) {
+      return false;
+    }
+
+    return lockSelectionAssets.contains(asset);
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final heroOffset = TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+
+    final lockSelection = _getLockSelectionStatus(ref);
+    final showStorageIndicator = ref.watch(timelineArgsProvider.select((args) => args.showStorageIndicator));
+    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+
+    return RepaintBoundary(
+      child: GestureDetector(
+        onTap: () => lockSelection ? null : _handleOnTap(context, ref, assetIndex, asset, heroOffset),
+        onLongPress: () => lockSelection || isReadonlyModeEnabled ? null : _handleOnLongPress(ref, asset),
+        child: ThumbnailTile(
+          asset,
+          lockSelection: lockSelection,
+          showStorageIndicator: showStorageIndicator,
+          heroOffset: heroOffset,
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/timeline/fixed/segment_builder.dart

@@ -0,0 +1,71 @@
+import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/fixed/segment.model.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/segment_builder.dart';
+
+class FixedSegmentBuilder extends SegmentBuilder {
+  final double tileHeight;
+  final int columnCount;
+
+  const FixedSegmentBuilder({
+    required super.buckets,
+    required this.tileHeight,
+    required this.columnCount,
+    super.spacing,
+    super.groupBy,
+  });
+
+  List<Segment> generate() {
+    final segments = <Segment>[];
+    int firstIndex = 0;
+    double startOffset = 0;
+    int assetIndex = 0;
+    DateTime? previousDate;
+
+    for (int i = 0; i < buckets.length; i++) {
+      final bucket = buckets[i];
+
+      final assetCount = bucket.assetCount;
+      final numberOfRows = (assetCount / columnCount).ceil();
+      final segmentCount = numberOfRows + 1;
+
+      final segmentFirstIndex = firstIndex;
+      firstIndex += segmentCount;
+      final segmentLastIndex = firstIndex - 1;
+
+      final timelineHeader = switch (groupBy) {
+        GroupAssetsBy.month => HeaderType.month,
+        GroupAssetsBy.day || GroupAssetsBy.auto =>
+          bucket is TimeBucket && bucket.date.month != previousDate?.month ? HeaderType.monthAndDay : HeaderType.day,
+        GroupAssetsBy.none => HeaderType.none,
+      };
+      final headerExtent = SegmentBuilder.headerExtent(timelineHeader);
+
+      final segmentStartOffset = startOffset;
+      startOffset += headerExtent + (tileHeight * numberOfRows) + spacing * (numberOfRows - 1);
+      final segmentEndOffset = startOffset;
+
+      segments.add(
+        FixedSegment(
+          firstIndex: segmentFirstIndex,
+          lastIndex: segmentLastIndex,
+          startOffset: segmentStartOffset,
+          endOffset: segmentEndOffset,
+          firstAssetIndex: assetIndex,
+          bucket: bucket,
+          tileHeight: tileHeight,
+          columnCount: columnCount,
+          headerExtent: headerExtent,
+          spacing: spacing,
+          header: timelineHeader,
+        ),
+      );
+
+      assetIndex += assetCount;
+      if (bucket is TimeBucket) {
+        previousDate = bucket.date;
+      }
+    }
+    return segments;
+  }
+}

mobile/lib/presentation/widgets/timeline/header.widget.dart

@@ -0,0 +1,116 @@
+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/timeline.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+
+class TimelineHeader extends HookConsumerWidget {
+  final Bucket bucket;
+  final HeaderType header;
+  final double height;
+  final int assetOffset;
+
+  const TimelineHeader({
+    super.key,
+    required this.bucket,
+    required this.header,
+    required this.height,
+    required this.assetOffset,
+  });
+
+  String _formatMonth(BuildContext context, DateTime date) {
+    final formatter = date.year == DateTime.now().year
+        ? DateFormat.MMMM(context.locale.toLanguageTag())
+        : DateFormat.yMMMM(context.locale.toLanguageTag());
+    return formatter.format(date);
+  }
+
+  String _formatDay(BuildContext context, DateTime date) {
+    final formatter = DateFormat.yMMMEd(context.locale.toLanguageTag());
+    return formatter.format(date);
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    if (bucket is! TimeBucket || header == HeaderType.none) {
+      return const SizedBox.shrink();
+    }
+
+    final date = (bucket as TimeBucket).date;
+    final isMonthHeader = header == HeaderType.month || header == HeaderType.monthAndDay;
+    final isDayHeader = header == HeaderType.day || header == HeaderType.monthAndDay;
+
+    return Padding(
+      padding: EdgeInsets.only(top: isMonthHeader ? 8.0 : 0.0, left: 12.0, right: 12.0),
+      child: SizedBox(
+        height: height,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            if (isMonthHeader)
+              Row(
+                children: [
+                  Text(
+                    toBeginningOfSentenceCase(_formatMonth(context, date)),
+                    style: context.textTheme.labelLarge?.copyWith(fontSize: 24),
+                  ),
+                  const Spacer(),
+                  if (header != HeaderType.monthAndDay) _BulkSelectIconButton(bucket: bucket, assetOffset: assetOffset),
+                ],
+              ),
+            if (isDayHeader)
+              Row(
+                children: [
+                  Text(
+                    toBeginningOfSentenceCase(_formatDay(context, date)),
+                    style: context.textTheme.labelLarge?.copyWith(fontSize: 15),
+                  ),
+                  const Spacer(),
+                  _BulkSelectIconButton(bucket: bucket, assetOffset: assetOffset),
+                ],
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _BulkSelectIconButton extends ConsumerWidget {
+  final Bucket bucket;
+  final int assetOffset;
+
+  const _BulkSelectIconButton({required this.bucket, required this.assetOffset});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    List<BaseAsset> bucketAssets;
+    try {
+      bucketAssets = ref.watch(timelineServiceProvider).getAssets(assetOffset, bucket.assetCount);
+    } catch (e) {
+      bucketAssets = <BaseAsset>[];
+    }
+
+    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+    final isAllSelected = ref.watch(bucketSelectionProvider(bucketAssets));
+
+    return isReadonlyModeEnabled
+        ? const SizedBox.shrink()
+        : IconButton(
+            onPressed: () {
+              ref.read(multiSelectProvider.notifier).toggleBucketSelection(assetOffset, bucket.assetCount);
+              ref.read(hapticFeedbackProvider.notifier).heavyImpact();
+            },
+            icon: isAllSelected
+                ? Icon(Icons.check_circle_rounded, size: 26, color: context.primaryColor)
+                : Icon(Icons.check_circle_outline_rounded, size: 26, color: context.colorScheme.onSurfaceSecondary),
+          );
+  }
+}

mobile/lib/presentation/widgets/timeline/scrubber.widget.dart

@@ -0,0 +1,615 @@
+import 'dart:async';
+
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/constants.dart';
+import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/utils/debounce.dart';
+import 'package:intl/intl.dart' hide TextDirection;
+
+/// A widget that will display a BoxScrollView with a ScrollThumb that can be dragged
+/// for quick navigation of the BoxScrollView.
+class Scrubber extends ConsumerStatefulWidget {
+  /// The view that will be scrolled with the scroll thumb
+  final CustomScrollView child;
+
+  /// The segments of the timeline
+  final List<Segment> layoutSegments;
+
+  final double timelineHeight;
+
+  final double topPadding;
+
+  final double bottomPadding;
+
+  final double? monthSegmentSnappingOffset;
+
+  final bool snapToMonth;
+
+  /// Whether an app bar is present, affects coordinate calculations
+  final bool hasAppBar;
+
+  Scrubber({
+    super.key,
+    Key? scrollThumbKey,
+    required this.layoutSegments,
+    required this.timelineHeight,
+    this.topPadding = 0,
+    this.bottomPadding = 0,
+    this.monthSegmentSnappingOffset,
+    this.snapToMonth = true,
+    this.hasAppBar = true,
+    required this.child,
+  }) : assert(child.scrollDirection == Axis.vertical);
+
+  @override
+  ConsumerState createState() => ScrubberState();
+}
+
+List<_Segment> _buildSegments({required List<Segment> layoutSegments, required double timelineHeight}) {
+  const double offsetThreshold = 40.0;
+
+  final segments = <_Segment>[];
+  if (layoutSegments.isEmpty || layoutSegments.first.bucket is! TimeBucket) {
+    return [];
+  }
+
+  final formatter = DateFormat.yMMM();
+  DateTime? lastDate;
+  double lastOffset = -offsetThreshold;
+  for (final layoutSegment in layoutSegments) {
+    final scrollPercentage = layoutSegment.startOffset / layoutSegments.last.endOffset;
+    final startOffset = scrollPercentage * timelineHeight;
+
+    final date = (layoutSegment.bucket as TimeBucket).date;
+    final label = formatter.format(date);
+
+    final showSegment = lastOffset + offsetThreshold <= startOffset && (lastDate == null || date.year != lastDate.year);
+
+    segments.add(_Segment(date: date, startOffset: startOffset, scrollLabel: label, showSegment: showSegment));
+    lastDate = date;
+    if (showSegment) {
+      lastOffset = startOffset;
+    }
+  }
+
+  return segments;
+}
+
+class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixin {
+  String? _lastLabel;
+  double _thumbTopOffset = 0.0;
+  bool _isDragging = false;
+  List<_Segment> _segments = [];
+  int _monthCount = 0;
+  DateTime? _currentScrubberDate;
+  Debouncer? _scrubberDebouncer;
+
+  late AnimationController _thumbAnimationController;
+  Timer? _fadeOutTimer;
+  late Animation<double> _thumbAnimation;
+
+  late AnimationController _labelAnimationController;
+  late Animation<double> _labelAnimation;
+
+  double get _scrubberHeight => widget.timelineHeight - widget.topPadding - widget.bottomPadding;
+
+  late ScrollController _scrollController;
+
+  double get _currentOffset {
+    if (_scrollController.hasClients != true) return 0.0;
+
+    return _scrollController.offset * _scrubberHeight / _scrollController.position.maxScrollExtent;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _isDragging = false;
+    _segments = _buildSegments(layoutSegments: widget.layoutSegments, timelineHeight: _scrubberHeight);
+    _thumbAnimationController = AnimationController(vsync: this, duration: kTimelineScrubberFadeInDuration);
+    _thumbAnimation = CurvedAnimation(parent: _thumbAnimationController, curve: Curves.fastEaseInToSlowEaseOut);
+    _labelAnimationController = AnimationController(vsync: this, duration: kTimelineScrubberFadeInDuration);
+    _monthCount = getMonthCount();
+
+    _labelAnimation = CurvedAnimation(parent: _labelAnimationController, curve: Curves.fastOutSlowIn);
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _scrollController = PrimaryScrollController.of(context);
+  }
+
+  @override
+  void didUpdateWidget(covariant Scrubber oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (oldWidget.layoutSegments.lastOrNull?.endOffset != widget.layoutSegments.lastOrNull?.endOffset) {
+      _segments = _buildSegments(layoutSegments: widget.layoutSegments, timelineHeight: _scrubberHeight);
+      _monthCount = getMonthCount();
+    }
+  }
+
+  @override
+  void dispose() {
+    _thumbAnimationController.dispose();
+    _labelAnimationController.dispose();
+    _fadeOutTimer?.cancel();
+    _scrubberDebouncer?.dispose();
+    super.dispose();
+  }
+
+  void _resetThumbTimer() {
+    _fadeOutTimer?.cancel();
+    _fadeOutTimer = Timer(kTimelineScrubberFadeOutDuration, () {
+      _thumbAnimationController.reverse();
+      _fadeOutTimer = null;
+    });
+  }
+
+  int getMonthCount() {
+    return _segments.map((e) => "${e.date.month}_${e.date.year}").toSet().length;
+  }
+
+  bool _onScrollNotification(ScrollNotification notification) {
+    if (_isDragging) {
+      // If the user is dragging the thumb, we don't want to update the position
+      return false;
+    }
+
+    if (notification is ScrollStartNotification || notification is ScrollUpdateNotification) {
+      ref.read(timelineStateProvider.notifier).setScrolling(true);
+    } else if (notification is ScrollEndNotification) {
+      ref.read(timelineStateProvider.notifier).setScrolling(false);
+    }
+
+    setState(() {
+      if (notification is ScrollUpdateNotification) {
+        _thumbTopOffset = _currentOffset;
+        if (_labelAnimation.status != AnimationStatus.reverse) {
+          _labelAnimationController.reverse();
+        }
+        if (_thumbAnimationController.status != AnimationStatus.forward) {
+          _thumbAnimationController.forward();
+        }
+      }
+      _resetThumbTimer();
+    });
+
+    return false;
+  }
+
+  void _onScrubberDateChanged(DateTime date) {
+    if (_currentScrubberDate != date) {
+      // Date changed, immediately set scrubbing to true
+      _currentScrubberDate = date;
+      ref.read(timelineStateProvider.notifier).setScrubbing(true);
+
+      // Initialize debouncer if needed
+      _scrubberDebouncer ??= Debouncer(interval: const Duration(milliseconds: 50));
+
+      // Debounce setting scrubbing to false
+      _scrubberDebouncer!.run(() {
+        if (_currentScrubberDate == date) {
+          ref.read(timelineStateProvider.notifier).setScrubbing(false);
+        }
+      });
+    }
+  }
+
+  void _onDragStart(DragStartDetails _) {
+    setState(() {
+      _isDragging = true;
+      _labelAnimationController.forward();
+      _fadeOutTimer?.cancel();
+      _lastLabel = null;
+    });
+  }
+
+  void _onDragUpdate(DragUpdateDetails details) {
+    if (!_isDragging) {
+      return;
+    }
+
+    if (_thumbAnimationController.status != AnimationStatus.forward) {
+      _thumbAnimationController.forward();
+    }
+
+    final dragPosition = _calculateDragPosition(details);
+    final nearestMonthSegment = _findNearestMonthSegment(dragPosition);
+
+    if (nearestMonthSegment != null) {
+      final label = nearestMonthSegment.scrollLabel;
+      if (_lastLabel != label) {
+        ref.read(hapticFeedbackProvider.notifier).selectionClick();
+        _lastLabel = label;
+
+        // Notify timeline state of the new scrubber date position
+        if (_monthCount >= kMinMonthsToEnableScrubberSnap) {
+          _onScrubberDateChanged(nearestMonthSegment.date);
+        }
+      }
+    }
+
+    if (_monthCount < kMinMonthsToEnableScrubberSnap || !widget.snapToMonth) {
+      // If there are less than kMinMonthsToEnableScrubberSnap months, we don't need to snap to segments
+      setState(() {
+        _thumbTopOffset = dragPosition;
+        _scrollController.jumpTo((dragPosition / _scrubberHeight) * _scrollController.position.maxScrollExtent);
+      });
+    } else if (nearestMonthSegment != null) {
+      _snapToSegment(nearestMonthSegment);
+    }
+  }
+
+  /// Calculate the drag position relative to the scrubber area
+  ///
+  /// This method converts the global drag coordinates from the gesture detector
+  /// into a position relative to the scrubber's active area (excluding padding).
+  ///
+  /// The scrubber has padding at the top and bottom, so we need to:
+  /// 1. Calculate the actual draggable area (timelineHeight - topPadding - bottomPadding)
+  /// 2. Convert the global Y position to a position within this draggable area
+  /// 3. Clamp the result to ensure it stays within bounds (0 to dragAreaHeight)
+  ///
+  /// Example:
+  /// - If timelineHeight = 800, topPadding = 50, bottomPadding = 50
+  /// - Then dragAreaHeight = 700 (the actual scrubber area)
+  /// - If user drags to global Y position that's 100 pixels from the top
+  /// - The relative position would be 100 - 50 = 50 (50 pixels into the scrubber area)
+  double _calculateDragPosition(DragUpdateDetails details) {
+    if (widget.hasAppBar) {
+      final dragAreaTop = widget.topPadding;
+      final dragAreaBottom = widget.timelineHeight - widget.bottomPadding;
+      final dragAreaHeight = dragAreaBottom - dragAreaTop;
+
+      final relativePosition = details.globalPosition.dy - dragAreaTop;
+
+      // Make sure the position stays within the scrubber's bounds
+      return relativePosition.clamp(0.0, dragAreaHeight);
+    }
+
+    // Get the local position relative to the gesture detector
+    final RenderBox? renderBox = context.findRenderObject() as RenderBox?;
+    if (renderBox != null) {
+      final localPosition = renderBox.globalToLocal(details.globalPosition);
+      return localPosition.dy.clamp(0.0, _scrubberHeight);
+    }
+
+    // Fallback to current logic if render box is not available
+    final dragAreaTop = widget.topPadding;
+    final relativePosition = details.globalPosition.dy - dragAreaTop;
+    return relativePosition.clamp(0.0, _scrubberHeight);
+  }
+
+  /// Find the segment closest to the given position
+  _Segment? _findNearestMonthSegment(double position) {
+    _Segment? nearestSegment;
+    double minDistance = double.infinity;
+
+    for (final segment in _segments) {
+      final distance = (segment.startOffset - position).abs();
+      if (distance < minDistance) {
+        minDistance = distance;
+        nearestSegment = segment;
+      }
+    }
+
+    return nearestSegment;
+  }
+
+  /// Snap the scrubber thumb and scroll view to the given segment
+  void _snapToSegment(_Segment segment) {
+    setState(() {
+      _thumbTopOffset = segment.startOffset;
+
+      final layoutSegmentIndex = _findLayoutSegmentIndex(segment);
+
+      if (layoutSegmentIndex >= 0) {
+        _scrollToLayoutSegment(layoutSegmentIndex);
+      }
+    });
+  }
+
+  int _findLayoutSegmentIndex(_Segment segment) {
+    return widget.layoutSegments.indexWhere((layoutSegment) {
+      final bucket = layoutSegment.bucket as TimeBucket;
+      return bucket.date.year == segment.date.year && bucket.date.month == segment.date.month;
+    });
+  }
+
+  void _scrollToLayoutSegment(int layoutSegmentIndex) {
+    final layoutSegment = widget.layoutSegments[layoutSegmentIndex];
+    final maxScrollExtent = _scrollController.position.maxScrollExtent;
+    final viewportHeight = _scrollController.position.viewportDimension;
+
+    final targetScrollOffset = layoutSegment.startOffset;
+    final centeredOffset = targetScrollOffset - (viewportHeight / 4) + 100 + (widget.monthSegmentSnappingOffset ?? 0.0);
+
+    _scrollController.jumpTo(centeredOffset.clamp(0.0, maxScrollExtent));
+  }
+
+  void _onDragEnd(DragEndDetails _) {
+    _labelAnimationController.reverse();
+    setState(() {
+      _isDragging = false;
+    });
+
+    ref.read(timelineStateProvider.notifier).setScrubbing(false);
+
+    // Reset scrubber tracking when drag ends
+    _currentScrubberDate = null;
+    _scrubberDebouncer?.dispose();
+    _scrubberDebouncer = null;
+
+    _resetThumbTimer();
+  }
+
+  @override
+  Widget build(BuildContext ctx) {
+    Text? label;
+    if (_scrollController.hasClients == true) {
+      // Cache to avoid multiple calls to [_currentOffset]
+      final scrollOffset = _currentOffset;
+      final labelText =
+          _segments.lastWhereOrNull((segment) => segment.startOffset <= scrollOffset)?.scrollLabel ??
+          _segments.firstOrNull?.scrollLabel;
+      label = labelText != null
+          ? Text(
+              labelText,
+              style: ctx.textTheme.bodyLarge?.copyWith(color: Colors.white, fontWeight: FontWeight.bold),
+            )
+          : null;
+    }
+
+    return NotificationListener<ScrollNotification>(
+      onNotification: _onScrollNotification,
+      child: Stack(
+        children: [
+          RepaintBoundary(child: widget.child),
+          // Scroll Segments - wrapped in RepaintBoundary for better performance
+          RepaintBoundary(
+            child: _SegmentsLayer(
+              key: ValueKey('segments_${_isDragging}_${_segments.length}'),
+              segments: _segments,
+              topPadding: widget.topPadding,
+              isDragging: _isDragging,
+            ),
+          ),
+          if (_scrollController.hasClients && _scrollController.position.maxScrollExtent > 0)
+            PositionedDirectional(
+              top: _thumbTopOffset + widget.topPadding,
+              end: 0,
+              child: RepaintBoundary(
+                child: GestureDetector(
+                  onVerticalDragStart: _onDragStart,
+                  onVerticalDragUpdate: _onDragUpdate,
+                  onVerticalDragEnd: _onDragEnd,
+                  child: _Scrubber(thumbAnimation: _thumbAnimation, labelAnimation: _labelAnimation, label: label),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SegmentsLayer extends StatelessWidget {
+  final List<_Segment> segments;
+  final double topPadding;
+  final bool isDragging;
+
+  const _SegmentsLayer({super.key, required this.segments, required this.topPadding, required this.isDragging});
+
+  @override
+  Widget build(BuildContext context) {
+    return Visibility(
+      visible: isDragging,
+      child: Stack(
+        children: segments
+            .where((segment) => segment.showSegment)
+            .map(
+              (segment) => PositionedDirectional(
+                key: ValueKey('segment_${segment.date.millisecondsSinceEpoch}'),
+                top: topPadding + segment.startOffset,
+                end: 100,
+                child: RepaintBoundary(child: _SegmentWidget(segment)),
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+}
+
+class _SegmentWidget extends StatelessWidget {
+  final _Segment _segment;
+
+  const _SegmentWidget(this._segment);
+
+  @override
+  Widget build(BuildContext context) {
+    return IgnorePointer(
+      child: Container(
+        margin: const EdgeInsets.only(right: 36.0),
+        child: Material(
+          color: context.colorScheme.surface,
+          borderRadius: const BorderRadius.all(Radius.circular(16.0)),
+          child: Container(
+            constraints: const BoxConstraints(maxHeight: 28),
+            padding: const EdgeInsets.symmetric(horizontal: 10.0),
+            alignment: Alignment.center,
+            child: Text(
+              _segment.date.year.toString(),
+              style: context.textTheme.labelMedium?.copyWith(fontFamily: "GoogleSansCode", fontWeight: FontWeight.w600),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _ScrollLabel extends StatelessWidget {
+  final Text label;
+  final Color backgroundColor;
+  final Animation<double> animation;
+
+  const _ScrollLabel({required this.label, required this.backgroundColor, required this.animation});
+
+  @override
+  Widget build(BuildContext context) {
+    return IgnorePointer(
+      child: 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: const BoxConstraints(maxHeight: 28),
+              padding: const EdgeInsets.symmetric(horizontal: 10.0),
+              alignment: Alignment.center,
+              child: label,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _Scrubber extends StatelessWidget {
+  final Text? label;
+  final Animation<double> thumbAnimation;
+  final Animation<double> labelAnimation;
+
+  const _Scrubber({this.label, required this.thumbAnimation, required this.labelAnimation});
+
+  @override
+  Widget build(BuildContext context) {
+    final backgroundColor = context.isDarkTheme
+        ? context.colorScheme.primary.darken(amount: .5)
+        : context.colorScheme.primary;
+
+    return _SlideFadeTransition(
+      animation: thumbAnimation,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: [
+          if (label != null) _ScrollLabel(label: label!, backgroundColor: backgroundColor, animation: labelAnimation),
+          _CircularThumb(backgroundColor),
+        ],
+      ),
+    );
+  }
+}
+
+class _CircularThumb extends StatelessWidget {
+  final Color backgroundColor;
+
+  const _CircularThumb(this.backgroundColor);
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      foregroundPainter: const _ArrowPainter(Colors.white),
+      child: Material(
+        elevation: 4.0,
+        color: backgroundColor,
+        borderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(48.0),
+          bottomLeft: Radius.circular(48.0),
+          topRight: Radius.circular(4.0),
+          bottomRight: Radius.circular(4.0),
+        ),
+        child: Container(constraints: BoxConstraints.tight(const Size(48.0 * 0.6, 48.0))),
+      ),
+    );
+  }
+}
+
+class _ArrowPainter extends CustomPainter {
+  final Color color;
+
+  const _ArrowPainter(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();
+  }
+}
+
+class _SlideFadeTransition extends StatelessWidget {
+  final Animation<double> _animation;
+  final Widget _child;
+
+  const _SlideFadeTransition({required Animation<double> animation, required Widget child})
+    : _animation = animation,
+      _child = 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),
+      ),
+    );
+  }
+}
+
+class _Segment {
+  final DateTime date;
+  final double startOffset;
+  final String scrollLabel;
+  final bool showSegment;
+
+  const _Segment({required this.date, required this.startOffset, required this.scrollLabel, this.showSegment = false});
+
+  _Segment copyWith({DateTime? date, double? startOffset, String? scrollLabel, bool? showSegment}) {
+    return _Segment(
+      date: date ?? this.date,
+      startOffset: startOffset ?? this.startOffset,
+      scrollLabel: scrollLabel ?? this.scrollLabel,
+      showSegment: showSegment ?? this.showSegment,
+    );
+  }
+
+  @override
+  String toString() {
+    return 'Segment(scrollLabel: $scrollLabel, date: $date)';
+  }
+}

mobile/lib/presentation/widgets/timeline/segment.model.dart

@@ -0,0 +1,95 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/domain/models/timeline.model.dart';
+
+// Segments are the time groups buckets in the timeline view.
+// Each segment contains a header and a list of asset rows.
+abstract class Segment {
+  // The index of the first row of the segment, usually the header, but if not, it can be any asset.
+  final int firstIndex;
+  // The index of the last asset of the segment.
+  final int lastIndex;
+  // The offset of the first row from beginning of the timeline.
+  final double startOffset;
+  // The offset of the last row from beginning of the timeline.
+  final double endOffset;
+  // The spacing between the header and the first row of the segment.
+  final double spacing;
+  final double headerExtent;
+  // the start index of the asset of this segment from the beginning of the timeline.
+  final int firstAssetIndex;
+  final Bucket bucket;
+
+  // The index of the row after the header
+  final int gridIndex;
+  // The offset of the row after the header
+  final double gridOffset;
+  // The type of the header
+  final HeaderType header;
+
+  const Segment({
+    required this.firstIndex,
+    required this.lastIndex,
+    required this.startOffset,
+    required this.endOffset,
+    required this.firstAssetIndex,
+    required this.bucket,
+    required this.headerExtent,
+    required this.spacing,
+    required this.header,
+  }) : gridIndex = firstIndex + 1,
+       gridOffset = startOffset + headerExtent + spacing;
+
+  bool containsIndex(int index) => firstIndex <= index && index <= lastIndex;
+
+  bool isWithinOffset(double offset) => startOffset <= offset && offset <= endOffset;
+
+  int getMinChildIndexForScrollOffset(double scrollOffset);
+  int getMaxChildIndexForScrollOffset(double scrollOffset);
+  double indexToLayoutOffset(int index);
+
+  Widget builder(BuildContext context, int index);
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is Segment &&
+        other.firstIndex == firstIndex &&
+        other.lastIndex == lastIndex &&
+        other.startOffset == startOffset &&
+        other.endOffset == endOffset &&
+        other.spacing == spacing &&
+        other.firstAssetIndex == firstAssetIndex &&
+        other.headerExtent == headerExtent &&
+        other.gridIndex == gridIndex &&
+        other.gridOffset == gridOffset &&
+        other.header == header;
+  }
+
+  @override
+  int get hashCode =>
+      firstIndex.hashCode ^
+      lastIndex.hashCode ^
+      startOffset.hashCode ^
+      endOffset.hashCode ^
+      spacing.hashCode ^
+      headerExtent.hashCode ^
+      firstAssetIndex.hashCode ^
+      gridIndex.hashCode ^
+      gridOffset.hashCode ^
+      header.hashCode;
+
+  @override
+  String toString() {
+    return 'Segment(firstIndex: $firstIndex, lastIndex: $lastIndex)';
+  }
+}
+
+extension SegmentListExtension on List<Segment> {
+  bool equals(List<Segment> other) => length == other.length && lastOrNull?.endOffset == other.lastOrNull?.endOffset;
+
+  Segment? findByIndex(int index) => firstWhereOrNull((s) => s.containsIndex(index));
+
+  Segment? findByOffset(double offset) => firstWhereOrNull((s) => s.isWithinOffset(offset)) ?? lastOrNull;
+}

mobile/lib/presentation/widgets/timeline/segment_builder.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/fixed/row.dart';
+import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
+
+abstract class SegmentBuilder {
+  final List<Bucket> buckets;
+  final double spacing;
+  final GroupAssetsBy groupBy;
+
+  const SegmentBuilder({required this.buckets, this.spacing = kTimelineSpacing, this.groupBy = GroupAssetsBy.day});
+
+  static double headerExtent(HeaderType header) => switch (header) {
+    HeaderType.month => kTimelineHeaderExtent,
+    HeaderType.day => kTimelineHeaderExtent * 0.90,
+    HeaderType.monthAndDay => kTimelineHeaderExtent * 1.6,
+    HeaderType.none => 0.0,
+  };
+
+  static Widget buildPlaceholder(
+    BuildContext context,
+    int count, {
+    Size size = kTimelineFixedTileExtent,
+    double spacing = kTimelineSpacing,
+  }) => RepaintBoundary(
+    child: FixedTimelineRow(
+      dimension: size.height,
+      spacing: spacing,
+      textDirection: Directionality.of(context),
+      children: List.generate(count, (_) => ThumbnailPlaceholder(width: size.width, height: size.height)),
+    ),
+  );
+}

mobile/lib/presentation/widgets/timeline/timeline.state.dart

@@ -0,0 +1,110 @@
+import 'dart:math' as math;
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/fixed/segment_builder.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
+import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+
+class TimelineArgs {
+  final double maxWidth;
+  final double maxHeight;
+  final double spacing;
+  final int columnCount;
+  final bool showStorageIndicator;
+  final bool withStack;
+  final GroupAssetsBy? groupBy;
+
+  const TimelineArgs({
+    required this.maxWidth,
+    required this.maxHeight,
+    this.spacing = kTimelineSpacing,
+    this.columnCount = kTimelineColumnCount,
+    this.showStorageIndicator = false,
+    this.withStack = false,
+    this.groupBy,
+  });
+
+  @override
+  bool operator ==(covariant TimelineArgs other) {
+    return spacing == other.spacing &&
+        maxWidth == other.maxWidth &&
+        maxHeight == other.maxHeight &&
+        columnCount == other.columnCount &&
+        showStorageIndicator == other.showStorageIndicator &&
+        withStack == other.withStack &&
+        groupBy == other.groupBy;
+  }
+
+  @override
+  int get hashCode =>
+      maxWidth.hashCode ^
+      maxHeight.hashCode ^
+      spacing.hashCode ^
+      columnCount.hashCode ^
+      showStorageIndicator.hashCode ^
+      withStack.hashCode ^
+      groupBy.hashCode;
+}
+
+class TimelineState {
+  final bool isScrubbing;
+  final bool isScrolling;
+
+  const TimelineState({this.isScrubbing = false, this.isScrolling = false});
+
+  bool get isInteracting => isScrubbing || isScrolling;
+
+  @override
+  bool operator ==(covariant TimelineState other) {
+    return isScrubbing == other.isScrubbing && isScrolling == other.isScrolling;
+  }
+
+  @override
+  int get hashCode => isScrubbing.hashCode ^ isScrolling.hashCode;
+
+  TimelineState copyWith({bool? isScrubbing, bool? isScrolling}) {
+    return TimelineState(isScrubbing: isScrubbing ?? this.isScrubbing, isScrolling: isScrolling ?? this.isScrolling);
+  }
+}
+
+class TimelineStateNotifier extends Notifier<TimelineState> {
+  void setScrubbing(bool isScrubbing) {
+    state = state.copyWith(isScrubbing: isScrubbing);
+  }
+
+  void setScrolling(bool isScrolling) {
+    state = state.copyWith(isScrolling: isScrolling);
+  }
+
+  @override
+  TimelineState build() => const TimelineState(isScrubbing: false, isScrolling: false);
+}
+
+// This provider watches the buckets from the timeline service & args and serves the segments.
+// It should be used only after the timeline service and timeline args provider is overridden
+final timelineSegmentProvider = StreamProvider.autoDispose<List<Segment>>((ref) async* {
+  final args = ref.watch(timelineArgsProvider);
+  final columnCount = args.columnCount;
+  final spacing = args.spacing;
+  final availableTileWidth = args.maxWidth - (spacing * (columnCount - 1));
+  final tileExtent = math.max(0, availableTileWidth) / columnCount;
+
+  final groupBy = args.groupBy ?? GroupAssetsBy.values[ref.watch(settingsProvider).get(Setting.groupAssetsBy)];
+
+  final timelineService = ref.watch(timelineServiceProvider);
+  yield* timelineService.watchBuckets().map((buckets) {
+    return FixedSegmentBuilder(
+      buckets: buckets,
+      tileHeight: tileExtent,
+      columnCount: columnCount,
+      spacing: spacing,
+      groupBy: groupBy,
+    ).generate();
+  });
+}, dependencies: [timelineServiceProvider, timelineArgsProvider]);
+
+final timelineStateProvider = NotifierProvider<TimelineStateNotifier, TimelineState>(TimelineStateNotifier.new);

mobile/lib/presentation/widgets/timeline/timeline.widget.dart

@@ -0,0 +1,696 @@
+import 'dart:async';
+import 'dart:collection';
+import 'dart:math' as math;
+
+import 'package:collection/collection.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.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/setting.model.dart';
+import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_status_floating_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/general_bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/scrubber.widget.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/timeline_drag_region.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/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_sliver_app_bar.dart';
+import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
+import 'package:immich_mobile/widgets/common/selection_sliver_app_bar.dart';
+
+class Timeline extends StatelessWidget {
+  const Timeline({
+    super.key,
+    this.topSliverWidget,
+    this.topSliverWidgetHeight,
+    this.showStorageIndicator = false,
+    this.withStack = false,
+    this.appBar = const ImmichSliverAppBar(floating: true, pinned: false, snap: false),
+    this.bottomSheet = const GeneralBottomSheet(minChildSize: 0.23),
+    this.groupBy,
+    this.withScrubber = true,
+    this.snapToMonth = true,
+    this.initialScrollOffset,
+    this.readOnly = false,
+  });
+
+  final Widget? topSliverWidget;
+  final double? topSliverWidgetHeight;
+  final bool showStorageIndicator;
+  final Widget? appBar;
+  final Widget? bottomSheet;
+  final bool withStack;
+  final GroupAssetsBy? groupBy;
+  final bool withScrubber;
+  final bool snapToMonth;
+  final double? initialScrollOffset;
+  final bool readOnly;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      floatingActionButton: const DownloadStatusFloatingButton(),
+      body: LayoutBuilder(
+        builder: (_, constraints) => ProviderScope(
+          overrides: [
+            timelineArgsProvider.overrideWith(
+              (ref) => TimelineArgs(
+                maxWidth: constraints.maxWidth,
+                maxHeight: constraints.maxHeight,
+                columnCount: ref.watch(settingsProvider.select((s) => s.get(Setting.tilesPerRow))),
+                showStorageIndicator: showStorageIndicator,
+                withStack: withStack,
+                groupBy: groupBy,
+              ),
+            ),
+            if (readOnly) readonlyModeProvider.overrideWith(() => _AlwaysReadOnlyNotifier()),
+          ],
+          child: _SliverTimeline(
+            topSliverWidget: topSliverWidget,
+            topSliverWidgetHeight: topSliverWidgetHeight,
+            appBar: appBar,
+            bottomSheet: bottomSheet,
+            withScrubber: withScrubber,
+            snapToMonth: snapToMonth,
+            initialScrollOffset: initialScrollOffset,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _AlwaysReadOnlyNotifier extends ReadOnlyModeNotifier {
+  @override
+  bool build() => true;
+
+  @override
+  void setReadonlyMode(bool value) {}
+
+  @override
+  void toggleReadonlyMode() {}
+}
+
+class _SliverTimeline extends ConsumerStatefulWidget {
+  const _SliverTimeline({
+    this.topSliverWidget,
+    this.topSliverWidgetHeight,
+    this.appBar,
+    this.bottomSheet,
+    this.withScrubber = true,
+    this.snapToMonth = true,
+    this.initialScrollOffset,
+  });
+
+  final Widget? topSliverWidget;
+  final double? topSliverWidgetHeight;
+  final Widget? appBar;
+  final Widget? bottomSheet;
+  final bool withScrubber;
+  final bool snapToMonth;
+  final double? initialScrollOffset;
+
+  @override
+  ConsumerState createState() => _SliverTimelineState();
+}
+
+class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
+  late final ScrollController _scrollController;
+  StreamSubscription? _eventSubscription;
+
+  // Drag selection state
+  bool _dragging = false;
+  TimelineAssetIndex? _dragAnchorIndex;
+  final Set<BaseAsset> _draggedAssets = HashSet();
+  ScrollPhysics? _scrollPhysics;
+
+  int _perRow = 4;
+  double _scaleFactor = 3.0;
+  double _baseScaleFactor = 3.0;
+  int? _scaleRestoreAssetIndex;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController = ScrollController(
+      initialScrollOffset: widget.initialScrollOffset ?? 0.0,
+      onAttach: _restoreScalePosition,
+    );
+    _eventSubscription = EventStream.shared.listen(_onEvent);
+
+    final currentTilesPerRow = ref.read(settingsProvider).get(Setting.tilesPerRow);
+    _perRow = currentTilesPerRow;
+    _scaleFactor = 7.0 - _perRow;
+    _baseScaleFactor = _scaleFactor;
+
+    ref.listenManual(multiSelectProvider.select((s) => s.isEnabled), _onMultiSelectionToggled);
+  }
+
+  void _onEvent(Event event) {
+    switch (event) {
+      case ScrollToTopEvent():
+        ref.read(timelineStateProvider.notifier).setScrubbing(true);
+        _scrollController
+            .animateTo(0, duration: const Duration(milliseconds: 250), curve: Curves.easeInOut)
+            .whenComplete(() => ref.read(timelineStateProvider.notifier).setScrubbing(false));
+
+      case ScrollToDateEvent scrollToDateEvent:
+        _scrollToDate(scrollToDateEvent.date);
+      case TimelineReloadEvent():
+        setState(() {});
+      default:
+        break;
+    }
+  }
+
+  void _onMultiSelectionToggled(_, bool isEnabled) {
+    EventStream.shared.emit(MultiSelectToggleEvent(isEnabled));
+  }
+
+  void _restoreScalePosition(_) {
+    if (_scaleRestoreAssetIndex == null) return;
+
+    final asyncSegments = ref.read(timelineSegmentProvider);
+    asyncSegments.whenData((segments) {
+      final targetSegment = segments.lastWhereOrNull((segment) => segment.firstAssetIndex <= _scaleRestoreAssetIndex!);
+      if (targetSegment != null) {
+        final assetIndexInSegment = _scaleRestoreAssetIndex! - targetSegment.firstAssetIndex;
+        final newColumnCount = ref.read(timelineArgsProvider).columnCount;
+        final rowIndexInSegment = (assetIndexInSegment / newColumnCount).floor();
+        final targetRowIndex = targetSegment.firstIndex + 1 + rowIndexInSegment;
+        final targetOffset = targetSegment.indexToLayoutOffset(targetRowIndex);
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (mounted) {
+            _scrollController.jumpTo(targetOffset.clamp(0.0, _scrollController.position.maxScrollExtent));
+          }
+        });
+      }
+    });
+    _scaleRestoreAssetIndex = null;
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    _eventSubscription?.cancel();
+    super.dispose();
+  }
+
+  void _scrollToDate(DateTime date) {
+    final asyncSegments = ref.read(timelineSegmentProvider);
+    asyncSegments.whenData((segments) {
+      // Find the segment that contains assets from the target date
+      final targetSegment = segments.firstWhereOrNull((segment) {
+        if (segment.bucket is TimeBucket) {
+          final segmentDate = (segment.bucket as TimeBucket).date;
+          // Check if the segment date matches the target date (year, month, day)
+          return segmentDate.year == date.year && segmentDate.month == date.month && segmentDate.day == date.day;
+        }
+        return false;
+      });
+
+      // If exact date not found, try to find the closest month
+      final fallbackSegment =
+          targetSegment ??
+          segments.firstWhereOrNull((segment) {
+            if (segment.bucket is TimeBucket) {
+              final segmentDate = (segment.bucket as TimeBucket).date;
+              return segmentDate.year == date.year && segmentDate.month == date.month;
+            }
+            return false;
+          });
+
+      if (fallbackSegment != null) {
+        // Scroll to the segment with a small offset to show the header
+        final targetOffset = fallbackSegment.startOffset - 50;
+        ref.read(timelineStateProvider.notifier).setScrubbing(true);
+        _scrollController
+            .animateTo(
+              targetOffset.clamp(0.0, _scrollController.position.maxScrollExtent),
+              duration: const Duration(milliseconds: 500),
+              curve: Curves.easeInOut,
+            )
+            .whenComplete(() => ref.read(timelineStateProvider.notifier).setScrubbing(false));
+      } else {
+        ref.read(timelineStateProvider.notifier).setScrubbing(false);
+      }
+    });
+  }
+
+  // Drag selection methods
+  void _setDragStartIndex(TimelineAssetIndex index) {
+    setState(() {
+      _scrollPhysics = const ClampingScrollPhysics();
+      _dragAnchorIndex = index;
+      _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();
+    });
+    // Reset the scrolling state after a small delay to allow bottom sheet to expand again
+    Future.delayed(const Duration(milliseconds: 300), () {
+      if (mounted) {
+        ref.read(timelineStateProvider.notifier).setScrolling(false);
+      }
+    });
+  }
+
+  void _dragScroll(ScrollDirection direction) {
+    _scrollController.animateTo(
+      _scrollController.offset + (direction == ScrollDirection.forward ? 175 : -175),
+      duration: const Duration(milliseconds: 125),
+      curve: Curves.easeOut,
+    );
+  }
+
+  void _handleDragAssetEnter(TimelineAssetIndex index) {
+    if (_dragAnchorIndex == null || !_dragging) return;
+
+    final timelineService = ref.read(timelineServiceProvider);
+    final dragAnchorIndex = _dragAnchorIndex!;
+
+    // Calculate the range of assets to select
+    final startIndex = math.min(dragAnchorIndex.assetIndex, index.assetIndex);
+    final endIndex = math.max(dragAnchorIndex.assetIndex, index.assetIndex);
+    final count = endIndex - startIndex + 1;
+
+    // Load the assets in the range
+    if (timelineService.hasRange(startIndex, count)) {
+      final selectedAssets = timelineService.getAssets(startIndex, count);
+
+      // Clear previous drag selection and add new range
+      final multiSelectNotifier = ref.read(multiSelectProvider.notifier);
+      for (final asset in _draggedAssets) {
+        multiSelectNotifier.deselectAsset(asset);
+      }
+      _draggedAssets.clear();
+
+      for (final asset in selectedAssets) {
+        multiSelectNotifier.selectAsset(asset);
+        _draggedAssets.add(asset);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext _) {
+    final asyncSegments = ref.watch(timelineSegmentProvider);
+    final maxHeight = ref.watch(timelineArgsProvider.select((args) => args.maxHeight));
+    final isSelectionMode = ref.watch(multiSelectProvider.select((s) => s.forceEnable));
+    final isMultiSelectEnabled = ref.watch(multiSelectProvider.select((s) => s.isEnabled));
+    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+
+    return PopScope(
+      canPop: !isMultiSelectEnabled,
+      onPopInvokedWithResult: (_, __) {
+        if (isMultiSelectEnabled) {
+          ref.read(multiSelectProvider.notifier).reset();
+        }
+      },
+      child: asyncSegments.widgetWhen(
+        onData: (segments) {
+          final childCount = (segments.lastOrNull?.lastIndex ?? -1) + 1;
+          final double appBarExpandedHeight = widget.appBar != null && widget.appBar is MesmerizingSliverAppBar
+              ? 200
+              : 0;
+          final topPadding = context.padding.top + (widget.appBar == null ? 0 : kToolbarHeight) + 10;
+
+          const scrubberBottomPadding = 100.0;
+          const bottomSheetOpenModifier = 120.0;
+          final bottomPadding =
+              context.padding.bottom +
+              (widget.appBar == null ? 0 : scrubberBottomPadding) +
+              (isMultiSelectEnabled ? bottomSheetOpenModifier : 0);
+
+          final grid = CustomScrollView(
+            primary: true,
+            physics: _scrollPhysics,
+            cacheExtent: maxHeight * 2,
+            slivers: [
+              if (isSelectionMode) const SelectionSliverAppBar() else if (widget.appBar != null) widget.appBar!,
+              if (widget.topSliverWidget != null) widget.topSliverWidget!,
+              _SliverSegmentedList(
+                segments: segments,
+                delegate: SliverChildBuilderDelegate(
+                  (ctx, index) {
+                    if (index >= childCount) return null;
+                    final segment = segments.findByIndex(index);
+                    return segment?.builder(ctx, index) ?? const SizedBox.shrink();
+                  },
+                  childCount: childCount,
+                  addAutomaticKeepAlives: false,
+                  // We add repaint boundary around tiles, so skip the auto boundaries
+                  addRepaintBoundaries: false,
+                ),
+              ),
+              SliverPadding(padding: EdgeInsets.only(bottom: bottomPadding)),
+            ],
+          );
+
+          final Widget timeline;
+          if (widget.withScrubber) {
+            timeline = Scrubber(
+              snapToMonth: widget.snapToMonth,
+              layoutSegments: segments,
+              timelineHeight: maxHeight,
+              topPadding: topPadding,
+              bottomPadding: bottomPadding,
+              monthSegmentSnappingOffset: widget.topSliverWidgetHeight ?? 0 + appBarExpandedHeight,
+              hasAppBar: widget.appBar != null,
+              child: grid,
+            );
+          } else {
+            timeline = grid;
+          }
+
+          return PrimaryScrollController(
+            controller: _scrollController,
+            child: RawGestureDetector(
+              gestures: {
+                CustomScaleGestureRecognizer: GestureRecognizerFactoryWithHandlers<CustomScaleGestureRecognizer>(
+                  () => CustomScaleGestureRecognizer(),
+                  (CustomScaleGestureRecognizer scale) {
+                    scale.onStart = (details) {
+                      _baseScaleFactor = _scaleFactor;
+                    };
+
+                    scale.onUpdate = (details) {
+                      final newScaleFactor = math.max(math.min(5.0, _baseScaleFactor * details.scale), 1.0);
+                      final newPerRow = 7 - newScaleFactor.toInt();
+
+                      if (newPerRow != _perRow) {
+                        final currentOffset = _scrollController.offset.clamp(
+                          0.0,
+                          _scrollController.position.maxScrollExtent,
+                        );
+                        final segment = segments.findByOffset(currentOffset) ?? segments.lastOrNull;
+                        int? targetAssetIndex;
+                        if (segment != null) {
+                          final rowIndex = segment.getMinChildIndexForScrollOffset(currentOffset);
+                          if (rowIndex > segment.firstIndex) {
+                            final rowIndexInSegment = rowIndex - (segment.firstIndex + 1);
+                            final assetsPerRow = ref.read(timelineArgsProvider).columnCount;
+                            final assetIndexInSegment = rowIndexInSegment * assetsPerRow;
+                            targetAssetIndex = segment.firstAssetIndex + assetIndexInSegment;
+                          } else {
+                            targetAssetIndex = segment.firstAssetIndex;
+                          }
+                        }
+
+                        setState(() {
+                          _scaleFactor = newScaleFactor;
+                          _perRow = newPerRow;
+                          _scaleRestoreAssetIndex = targetAssetIndex;
+                        });
+
+                        ref.read(settingsProvider.notifier).set(Setting.tilesPerRow, _perRow);
+                      }
+                    };
+                  },
+                ),
+              },
+              child: TimelineDragRegion(
+                onStart: !isReadonlyModeEnabled ? _setDragStartIndex : null,
+                onAssetEnter: _handleDragAssetEnter,
+                onEnd: !isReadonlyModeEnabled ? _stopDrag : null,
+                onScroll: _dragScroll,
+                onScrollStart: () {
+                  // Minimize the bottom sheet when drag selection starts
+                  ref.read(timelineStateProvider.notifier).setScrolling(true);
+                },
+                child: Stack(
+                  children: [
+                    timeline,
+                    if (!isSelectionMode && isMultiSelectEnabled) ...[
+                      Positioned(
+                        top: MediaQuery.paddingOf(context).top,
+                        left: 25,
+                        child: const SizedBox(
+                          height: kToolbarHeight,
+                          child: Center(child: _MultiSelectStatusButton()),
+                        ),
+                      ),
+                      if (widget.bottomSheet != null) widget.bottomSheet!,
+                    ],
+                  ],
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _SliverSegmentedList extends SliverMultiBoxAdaptorWidget {
+  final List<Segment> _segments;
+
+  const _SliverSegmentedList({required List<Segment> segments, required super.delegate}) : _segments = segments;
+
+  @override
+  _RenderSliverTimelineBoxAdaptor createRenderObject(BuildContext context) =>
+      _RenderSliverTimelineBoxAdaptor(childManager: context as SliverMultiBoxAdaptorElement, segments: _segments);
+
+  @override
+  void updateRenderObject(BuildContext context, _RenderSliverTimelineBoxAdaptor renderObject) {
+    renderObject.segments = _segments;
+  }
+}
+
+/// Modified version of [RenderSliverFixedExtentBoxAdaptor] to use precomputed offsets
+class _RenderSliverTimelineBoxAdaptor extends RenderSliverMultiBoxAdaptor {
+  List<Segment> _segments;
+
+  set segments(List<Segment> updatedSegments) {
+    if (_segments.equals(updatedSegments)) {
+      return;
+    }
+    _segments = updatedSegments;
+    markNeedsLayout();
+  }
+
+  _RenderSliverTimelineBoxAdaptor({required super.childManager, required List<Segment> segments})
+    : _segments = segments;
+
+  int getMinChildIndexForScrollOffset(double offset) =>
+      _segments.findByOffset(offset)?.getMinChildIndexForScrollOffset(offset) ?? 0;
+
+  int getMaxChildIndexForScrollOffset(double offset) =>
+      _segments.findByOffset(offset)?.getMaxChildIndexForScrollOffset(offset) ?? 0;
+
+  double indexToLayoutOffset(int index) =>
+      (_segments.findByIndex(index) ?? _segments.lastOrNull)?.indexToLayoutOffset(index) ?? 0;
+
+  double estimateMaxScrollOffset() => _segments.lastOrNull?.endOffset ?? 0;
+
+  double computeMaxScrollOffset() => _segments.lastOrNull?.endOffset ?? 0;
+
+  @override
+  void performLayout() {
+    childManager.didStartLayout();
+    // Assume initially that we have enough children to fill the viewport/cache area.
+    childManager.setDidUnderflow(false);
+
+    final double scrollOffset = constraints.scrollOffset + constraints.cacheOrigin;
+    assert(scrollOffset >= 0.0);
+
+    final double remainingExtent = constraints.remainingCacheExtent;
+    assert(remainingExtent >= 0.0);
+
+    final double targetScrollOffset = scrollOffset + remainingExtent;
+
+    // Find the index of the first child that should be visible or in the leading cache area.
+    final int firstRequiredChildIndex = getMinChildIndexForScrollOffset(scrollOffset);
+
+    // Find the index of the last child that should be visible or in the trailing cache area.
+    final int? lastRequiredChildIndex = targetScrollOffset.isFinite
+        ? getMaxChildIndexForScrollOffset(targetScrollOffset)
+        : null;
+
+    // Remove children that are no longer visible or within the cache area.
+    if (firstChild == null) {
+      collectGarbage(0, 0);
+    } else {
+      final int leadingChildrenToRemove = calculateLeadingGarbage(firstIndex: firstRequiredChildIndex);
+      final int trailingChildrenToRemove = lastRequiredChildIndex == null
+          ? 0
+          : calculateTrailingGarbage(lastIndex: lastRequiredChildIndex);
+      collectGarbage(leadingChildrenToRemove, trailingChildrenToRemove);
+    }
+
+    // If there are currently no children laid out (e.g., initial load),
+    // try to add the first child needed for the current scroll offset.
+    if (firstChild == null) {
+      final double firstChildLayoutOffset = indexToLayoutOffset(firstRequiredChildIndex);
+      final bool childAdded = addInitialChild(index: firstRequiredChildIndex, layoutOffset: firstChildLayoutOffset);
+
+      if (!childAdded) {
+        // There are either no children, or we are past the end of all our children.
+        final double max = firstRequiredChildIndex <= 0 ? 0.0 : computeMaxScrollOffset();
+        geometry = SliverGeometry(scrollExtent: max, maxPaintExtent: max);
+        childManager.didFinishLayout();
+        return;
+      }
+    }
+
+    // Layout children that might have scrolled into view from the top (before the current firstChild).
+    RenderBox? highestLaidOutChild;
+    final childConstraints = constraints.asBoxConstraints();
+
+    for (int currentIndex = indexOf(firstChild!) - 1; currentIndex >= firstRequiredChildIndex; --currentIndex) {
+      final RenderBox? newLeadingChild = insertAndLayoutLeadingChild(childConstraints);
+      if (newLeadingChild == null) {
+        // If a child is missing where we expect one, it indicates
+        // an inconsistency in offset that needs correction.
+        final Segment? segment = _segments.findByIndex(currentIndex) ?? _segments.firstOrNull;
+        geometry = SliverGeometry(
+          // Request a scroll correction based on where the missing child should have been.
+          scrollOffsetCorrection: segment?.indexToLayoutOffset(currentIndex) ?? 0.0,
+        );
+        // Parent will re-layout everything.
+        return;
+      }
+      final childParentData = newLeadingChild.parentData! as SliverMultiBoxAdaptorParentData;
+      childParentData.layoutOffset = indexToLayoutOffset(currentIndex);
+      assert(childParentData.index == currentIndex);
+      highestLaidOutChild ??= newLeadingChild;
+    }
+
+    // If the loop above didn't run (meaning the firstChild was already the correct [firstRequiredChildIndex]),
+    // or even if it did, we need to ensure the first visible child is correctly laid out
+    // and establish our starting point for laying out trailing children.
+
+    // If [highestLaidOutChild] is still null, it means the loop above didn't add any new leading children.
+    // The [firstChild] that existed at the start of performLayout is still the first one we need.
+    if (highestLaidOutChild == null) {
+      firstChild!.layout(childConstraints);
+      final childParentData = firstChild!.parentData! as SliverMultiBoxAdaptorParentData;
+      childParentData.layoutOffset = indexToLayoutOffset(firstRequiredChildIndex);
+      highestLaidOutChild = firstChild;
+    }
+
+    RenderBox? mostRecentlyLaidOutChild = highestLaidOutChild;
+
+    // Starting from the child after [mostRecentlyLaidOutChild], layout subsequent children
+    // until we reach the [lastRequiredChildIndex] or run out of children.
+    double calculatedMaxScrollOffset = double.infinity;
+
+    for (
+      int currentIndex = indexOf(mostRecentlyLaidOutChild!) + 1;
+      lastRequiredChildIndex == null || currentIndex <= lastRequiredChildIndex;
+      ++currentIndex
+    ) {
+      RenderBox? child = childAfter(mostRecentlyLaidOutChild!);
+
+      if (child == null || indexOf(child) != currentIndex) {
+        child = insertAndLayoutChild(childConstraints, after: mostRecentlyLaidOutChild);
+        if (child == null) {
+          final Segment? segment = _segments.findByIndex(currentIndex) ?? _segments.lastOrNull;
+          calculatedMaxScrollOffset = segment?.indexToLayoutOffset(currentIndex) ?? computeMaxScrollOffset();
+          break;
+        }
+      } else {
+        child.layout(childConstraints);
+      }
+
+      mostRecentlyLaidOutChild = child;
+      final childParentData = mostRecentlyLaidOutChild.parentData! as SliverMultiBoxAdaptorParentData;
+      assert(childParentData.index == currentIndex);
+      childParentData.layoutOffset = indexToLayoutOffset(currentIndex);
+    }
+
+    final int lastLaidOutChildIndex = indexOf(lastChild!);
+    final double leadingScrollOffset = indexToLayoutOffset(firstRequiredChildIndex);
+    final double trailingScrollOffset = indexToLayoutOffset(lastLaidOutChildIndex + 1);
+
+    assert(
+      firstRequiredChildIndex == 0 ||
+          (childScrollOffset(firstChild!) ?? -1.0) - scrollOffset <= precisionErrorTolerance,
+    );
+    assert(debugAssertChildListIsNonEmptyAndContiguous());
+    assert(indexOf(firstChild!) == firstRequiredChildIndex);
+    assert(lastRequiredChildIndex == null || lastLaidOutChildIndex <= lastRequiredChildIndex);
+
+    calculatedMaxScrollOffset = math.min(calculatedMaxScrollOffset, estimateMaxScrollOffset());
+
+    final double paintExtent = calculatePaintOffset(constraints, from: leadingScrollOffset, to: trailingScrollOffset);
+
+    final double cacheExtent = calculateCacheOffset(constraints, from: leadingScrollOffset, to: trailingScrollOffset);
+
+    final double targetEndScrollOffsetForPaint = constraints.scrollOffset + constraints.remainingPaintExtent;
+    final int? targetLastIndexForPaint = targetEndScrollOffsetForPaint.isFinite
+        ? getMaxChildIndexForScrollOffset(targetEndScrollOffsetForPaint)
+        : null;
+
+    final maxPaintExtent = math.max(paintExtent, calculatedMaxScrollOffset);
+
+    geometry = SliverGeometry(
+      scrollExtent: calculatedMaxScrollOffset,
+      paintExtent: paintExtent,
+      maxPaintExtent: maxPaintExtent,
+      // Indicates if there's content scrolled off-screen.
+      // This is true if the last child needed for painting is actually laid out,
+      // or if the first child is partially visible.
+      hasVisualOverflow:
+          (targetLastIndexForPaint != null && lastLaidOutChildIndex >= targetLastIndexForPaint) ||
+          constraints.scrollOffset > 0.0,
+      cacheExtent: cacheExtent,
+    );
+
+    // We may have started the layout while scrolled to the end, which would not
+    // expose a new child.
+    if (calculatedMaxScrollOffset == trailingScrollOffset) {
+      childManager.setDidUnderflow(true);
+    }
+
+    childManager.didFinishLayout();
+  }
+}
+
+class _MultiSelectStatusButton extends ConsumerWidget {
+  const _MultiSelectStatusButton();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectCount = ref.watch(multiSelectProvider.select((s) => s.selectedAssets.length));
+    return ElevatedButton.icon(
+      onPressed: () => ref.read(multiSelectProvider.notifier).reset(),
+      icon: Icon(Icons.close_rounded, color: context.colorScheme.onPrimary),
+      label: Text(
+        selectCount.toString(),
+        style: context.textTheme.titleMedium?.copyWith(height: 2.5, color: context.colorScheme.onPrimary),
+      ),
+    );
+  }
+}
+
+/// 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/presentation/widgets/timeline/timeline_drag_region.dart

@@ -0,0 +1,212 @@
+import 'dart:async';
+
+import 'package:collection/collection.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+class TimelineDragRegion extends StatefulWidget {
+  final Widget child;
+
+  final void Function(TimelineAssetIndex valueKey)? onStart;
+  final void Function(TimelineAssetIndex valueKey)? onAssetEnter;
+  final void Function()? onEnd;
+  final void Function()? onScrollStart;
+  final void Function(ScrollDirection direction)? onScroll;
+
+  const TimelineDragRegion({
+    super.key,
+    required this.child,
+    this.onStart,
+    this.onAssetEnter,
+    this.onEnd,
+    this.onScrollStart,
+    this.onScroll,
+  });
+
+  @override
+  State createState() => _TimelineDragRegionState();
+}
+
+class _TimelineDragRegionState extends State<TimelineDragRegion> {
+  late TimelineAssetIndex? assetUnderPointer;
+  late TimelineAssetIndex? 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;
+  }
+
+  TimelineAssetIndex? _getValueKeyAtPosition(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 _TimelineAssetIndexProxy)?.target
+            as _TimelineAssetIndexProxy?)
+        ?.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 = _getValueKeyAtPosition(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 = _getValueKeyAtPosition(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 TimelineAssetIndexWrapper extends SingleChildRenderObjectWidget {
+  final int assetIndex;
+  final int segmentIndex;
+
+  const TimelineAssetIndexWrapper({
+    required Widget super.child,
+    required this.assetIndex,
+    required this.segmentIndex,
+    super.key,
+  });
+
+  @override
+  // ignore: library_private_types_in_public_api
+  _TimelineAssetIndexProxy createRenderObject(BuildContext context) {
+    return _TimelineAssetIndexProxy(
+      index: TimelineAssetIndex(assetIndex: assetIndex, segmentIndex: segmentIndex),
+    );
+  }
+
+  @override
+  void updateRenderObject(
+    BuildContext context,
+    // ignore: library_private_types_in_public_api
+    _TimelineAssetIndexProxy renderObject,
+  ) {
+    renderObject.index = TimelineAssetIndex(assetIndex: assetIndex, segmentIndex: segmentIndex);
+  }
+}
+
+class _TimelineAssetIndexProxy extends RenderProxyBox {
+  TimelineAssetIndex index;
+
+  _TimelineAssetIndexProxy({required this.index});
+}
+
+class TimelineAssetIndex {
+  final int assetIndex;
+  final int segmentIndex;
+
+  const TimelineAssetIndex({required this.assetIndex, required this.segmentIndex});
+
+  @override
+  bool operator ==(covariant TimelineAssetIndex other) {
+    if (identical(this, other)) return true;
+
+    return other.assetIndex == assetIndex && other.segmentIndex == segmentIndex;
+  }
+
+  @override
+  int get hashCode => assetIndex.hashCode ^ segmentIndex.hashCode;
+}