feat: new feature board

* fix(server): use VBR for QSV so the max bitrate is respected

* update test

i18n/en.json

@@ -1251,6 +1251,22 @@
   "favorite_or_unfavorite_photo": "Favorite or unfavorite photo",
   "favorites": "Favorites",
   "favorites_page_no_favorites": "No favorite assets found",
+  "feature_message_non_destructive_editing_body": "Edit your photos freely — the original is always kept untouched.",
+  "feature_message_non_destructive_editing_title": "Non-destructive editing",
+  "feature_message_ocr_body": "Immich now reads the text inside your photos, so you can search for them by what they say.",
+  "feature_message_ocr_title": "Search text in your photos",
+  "feature_message_open_in_immich_body": "Set Immich as your gallery on Android to open photos straight from other apps.",
+  "feature_message_open_in_immich_title": "Open photos in Immich",
+  "feature_message_recently_added_body": "Jump straight to everything you've added lately on a dedicated page.",
+  "feature_message_recently_added_title": "Recently added",
+  "feature_message_settings_subtitle": "See what's new in version {version}",
+  "feature_message_share_quality_body": "Press and hold the share button to choose the image quality before you share.",
+  "feature_message_share_quality_title": "Choose your share quality",
+  "feature_message_slideshow_body": "Sit back and watch your photos play in a full-screen slideshow.",
+  "feature_message_slideshow_title": "Slideshow",
+  "feature_message_upload_to_album_body": "Add photos directly into an album as you upload them.",
+  "feature_message_upload_to_album_title": "Upload straight to an album",
+  "feature_message_version": "Version {version}",
   "feature_photo_updated": "Feature photo updated",
   "features": "Features",
   "features_in_development": "Features in Development",
@@ -2530,6 +2546,7 @@
   "week": "Week",
   "welcome": "Welcome",
   "welcome_to_immich": "Welcome to Immich",
+  "whats_new": "What's new",
   "when": "When",
   "width": "Width",
   "wifi_name": "Wi-Fi Name",

mobile/lib/domain/models/config/app_config.dart

@@ -4,6 +4,7 @@ import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/config/album_config.dart';
 import 'package:immich_mobile/domain/models/config/backup_config.dart';
 import 'package:immich_mobile/domain/models/config/cleanup_config.dart';
+import 'package:immich_mobile/domain/models/config/feature_message_config.dart';
 import 'package:immich_mobile/domain/models/config/image_config.dart';
 import 'package:immich_mobile/domain/models/config/map_config.dart';
 import 'package:immich_mobile/domain/models/config/network_config.dart';
@@ -32,6 +33,7 @@ class AppConfig {
   final BackupConfig backup;
   final NetworkConfig network;
   final ShareConfig share;
+  final FeatureMessageConfig featureMessage;
 
   const AppConfig({
     this.logLevel = .info,
@@ -46,6 +48,7 @@ class AppConfig {
     this.backup = const .new(),
     this.network = const .new(),
     this.share = const .new(),
+    this.featureMessage = const .new(),
   });
 
   AppConfig copyWith({
@@ -61,6 +64,7 @@ class AppConfig {
     BackupConfig? backup,
     NetworkConfig? network,
     ShareConfig? share,
+    FeatureMessageConfig? featureMessage,
   }) => .new(
     logLevel: logLevel ?? this.logLevel,
     theme: theme ?? this.theme,
@@ -74,6 +78,7 @@ class AppConfig {
     backup: backup ?? this.backup,
     network: network ?? this.network,
     share: share ?? this.share,
+    featureMessage: featureMessage ?? this.featureMessage,
   );
 
   @override
@@ -91,15 +96,29 @@ class AppConfig {
           other.album == album &&
           other.backup == backup &&
           other.network == network &&
-          other.share == share);
+          other.share == share &&
+          other.featureMessage == featureMessage);
 
   @override
-  int get hashCode =>
-      Object.hash(logLevel, theme, cleanup, map, timeline, image, viewer, slideshow, album, backup, network, share);
+  int get hashCode => Object.hash(
+    logLevel,
+    theme,
+    cleanup,
+    map,
+    timeline,
+    image,
+    viewer,
+    slideshow,
+    album,
+    backup,
+    network,
+    share,
+    featureMessage,
+  );
 
   @override
   String toString() =>
-      'AppConfig(logLevel: $logLevel, theme: $theme, cleanup: $cleanup, map: $map, timeline: $timeline, image: $image, viewer: $viewer, slideshow: $slideshow, album: $album, backup: $backup, network: $network, share: $share)';
+      'AppConfig(logLevel: $logLevel, theme: $theme, cleanup: $cleanup, map: $map, timeline: $timeline, image: $image, viewer: $viewer, slideshow: $slideshow, album: $album, backup: $backup, network: $network, share: $share, featureMessage: $featureMessage)';
 
   T read<T>(SettingsKey<T> key) =>
       (switch (key) {
@@ -146,6 +165,7 @@ class AppConfig {
             .slideshowDuration => slideshow.duration,
             .slideshowLook => slideshow.look,
             .slideshowDirection => slideshow.direction,
+            .featureMessageSeenVersion => featureMessage.seenVersion,
           })
           as T;
 
@@ -199,6 +219,7 @@ class AppConfig {
       .slideshowDuration => copyWith(slideshow: slideshow.copyWith(duration: value as int)),
       .slideshowLook => copyWith(slideshow: slideshow.copyWith(look: value as SlideshowLook)),
       .slideshowDirection => copyWith(slideshow: slideshow.copyWith(direction: value as SlideshowDirection)),
+      .featureMessageSeenVersion => copyWith(featureMessage: featureMessage.copyWith(seenVersion: value as int)),
     };
   }
 }

mobile/lib/domain/models/config/feature_message_config.dart

@@ -0,0 +1,18 @@
+class FeatureMessageConfig {
+  final int seenVersion;
+
+  const FeatureMessageConfig({this.seenVersion = 0});
+
+  FeatureMessageConfig copyWith({int? seenVersion}) =>
+      FeatureMessageConfig(seenVersion: seenVersion ?? this.seenVersion);
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) || (other is FeatureMessageConfig && other.seenVersion == seenVersion);
+
+  @override
+  int get hashCode => seenVersion.hashCode;
+
+  @override
+  String toString() => 'FeatureMessageConfig(seenVersion: $seenVersion)';
+}

mobile/lib/domain/models/feature_message.model.dart

@@ -0,0 +1,49 @@
+class FeatureHighlight {
+  final String image;
+  final String titleKey;
+  final String bodyKey;
+
+  const FeatureHighlight({required this.image, required this.titleKey, required this.bodyKey});
+}
+
+const int featureMessageHighlightVersion = 1;
+
+const String featureMessageReleaseLabel = '3.0.0';
+
+const List<FeatureHighlight> featureMessageHighlights = [
+  FeatureHighlight(
+    image: 'assets/feature_message/share_quality.webp',
+    titleKey: 'feature_message_share_quality_title',
+    bodyKey: 'feature_message_share_quality_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/slideshow.webp',
+    titleKey: 'feature_message_slideshow_title',
+    bodyKey: 'feature_message_slideshow_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/recently_added.webp',
+    titleKey: 'feature_message_recently_added_title',
+    bodyKey: 'feature_message_recently_added_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/non_destructive_editing.webp',
+    titleKey: 'feature_message_non_destructive_editing_title',
+    bodyKey: 'feature_message_non_destructive_editing_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/ocr.webp',
+    titleKey: 'feature_message_ocr_title',
+    bodyKey: 'feature_message_ocr_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/open_in_immich.webp',
+    titleKey: 'feature_message_open_in_immich_title',
+    bodyKey: 'feature_message_open_in_immich_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/upload_to_album.webp',
+    titleKey: 'feature_message_upload_to_album_title',
+    bodyKey: 'feature_message_upload_to_album_body',
+  ),
+];

mobile/lib/domain/models/settings_key.dart

@@ -73,7 +73,10 @@ enum SettingsKey<T> {
   slideshowRepeat<bool>(),
   slideshowDuration<int>(),
   slideshowLook<SlideshowLook>(codec: _EnumCodec(SlideshowLook.values)),
-  slideshowDirection<SlideshowDirection>(codec: _EnumCodec(SlideshowDirection.values));
+  slideshowDirection<SlideshowDirection>(codec: _EnumCodec(SlideshowDirection.values)),
+
+  // Feature message
+  featureMessageSeenVersion<int>();
 
   final _SettingsCodec<T>? _codecOverride;
 

mobile/lib/domain/services/feature_message.service.dart

@@ -0,0 +1,17 @@
+import 'package:immich_mobile/domain/models/feature_message.model.dart';
+import 'package:immich_mobile/domain/models/settings_key.dart';
+import 'package:immich_mobile/infrastructure/repositories/settings.repository.dart';
+
+class FeatureMessageService {
+  final SettingsRepository _settingsRepository;
+
+  const FeatureMessageService(this._settingsRepository);
+
+  bool shouldShow() {
+    final seen = _settingsRepository.appConfig.read(SettingsKey.featureMessageSeenVersion);
+    return featureMessageHighlights.isNotEmpty && featureMessageHighlightVersion > seen;
+  }
+
+  Future<void> markSeen() =>
+      _settingsRepository.write(SettingsKey.featureMessageSeenVersion, featureMessageHighlightVersion);
+}

mobile/lib/pages/common/settings.page.dart

@@ -2,7 +2,9 @@ import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
+import 'package:immich_mobile/domain/models/feature_message.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/feature_message/feature_message_dialog.widget.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/widgets/settings/advanced_settings.dart';
 import 'package:immich_mobile/widgets/settings/asset_list_settings/asset_list_settings.dart';
@@ -87,6 +89,14 @@ class _MobileLayout extends StatelessWidget {
                 ],
         )
         .toList();
+    settings.add(
+      SettingsCard(
+        icon: Icons.auto_awesome_outlined,
+        title: 'whats_new'.tr(),
+        subtitle: 'feature_message_settings_subtitle'.tr(namedArgs: {'version': featureMessageReleaseLabel}),
+        onTap: () => showFeatureMessageDialog(context),
+      ),
+    );
     return ListView(padding: const EdgeInsets.only(top: 10.0, bottom: 60), children: [...settings]);
   }
 }
@@ -116,6 +126,13 @@ class _TabletLayout extends HookWidget {
                   ),
                 ),
               ),
+              SliverToBoxAdapter(
+                child: ListTile(
+                  title: Text('whats_new'.tr()),
+                  leading: const Icon(Icons.auto_awesome_outlined),
+                  onTap: () => showFeatureMessageDialog(context),
+                ),
+              ),
             ],
           ),
         ),

mobile/lib/presentation/pages/dev/main_timeline.page.dart

@@ -3,14 +3,37 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/presentation/widgets/memory/memory_lane.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
+import 'package:immich_mobile/presentation/widgets/feature_message/feature_message_dialog.widget.dart';
+import 'package:immich_mobile/providers/feature_message.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/memory.provider.dart';
 
 @RoutePage()
-class MainTimelinePage extends ConsumerWidget {
+class MainTimelinePage extends ConsumerStatefulWidget {
   const MainTimelinePage({super.key});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  ConsumerState<MainTimelinePage> createState() => _MainTimelinePageState();
+}
+
+class _MainTimelinePageState extends ConsumerState<MainTimelinePage> {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted || ref.read(featureMessageCheckedProvider)) {
+        return;
+      }
+      ref.read(featureMessageCheckedProvider.notifier).state = true;
+
+      final service = ref.read(featureMessageServiceProvider);
+      // if (service.shouldShow()) {
+      showFeatureMessageDialog(context).then((_) => service.markSeen());
+      // }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final hasMemories = ref.watch(driftMemoryFutureProvider.select((state) => state.value?.isNotEmpty ?? false));
     return Timeline(
       topSliverWidget: const SliverToBoxAdapter(child: DriftMemoryLane()),

mobile/lib/presentation/widgets/feature_message/feature_message_dialog.widget.dart

@@ -0,0 +1,201 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/feature_message.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+Future<void> showFeatureMessageDialog(BuildContext context) {
+  return showGeneralDialog<void>(
+    context: context,
+    useRootNavigator: true,
+    barrierDismissible: true,
+    barrierLabel: 'whats_new'.tr(),
+    barrierColor: Colors.black.withValues(alpha: 0.55),
+    transitionDuration: const Duration(milliseconds: 280),
+    pageBuilder: (_, __, ___) => const _FeatureMessageDialog(),
+    transitionBuilder: (_, animation, __, child) {
+      final curved = CurvedAnimation(parent: animation, curve: Curves.easeOutCubic, reverseCurve: Curves.easeInCubic);
+      return FadeTransition(
+        opacity: animation,
+        child: ScaleTransition(scale: Tween<double>(begin: 0.94, end: 1.0).animate(curved), child: child),
+      );
+    },
+  );
+}
+
+class _FeatureMessageDialog extends StatefulWidget {
+  const _FeatureMessageDialog();
+
+  @override
+  State<_FeatureMessageDialog> createState() => _FeatureMessageDialogState();
+}
+
+class _FeatureMessageDialogState extends State<_FeatureMessageDialog> {
+  final PageController _controller = PageController();
+  int _index = 0;
+
+  bool get _isLast => _index >= featureMessageHighlights.length - 1;
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _advance() {
+    if (_isLast) {
+      Navigator.of(context).pop();
+      return;
+    }
+    _controller.nextPage(duration: const Duration(milliseconds: 320), curve: Curves.easeOutCubic);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      insetPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 64),
+      clipBehavior: Clip.antiAlias,
+      backgroundColor: context.colorScheme.surface,
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(24))),
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxHeight: context.height * 0.9, maxWidth: 480),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.fromLTRB(24, 20, 24, 4),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text('whats_new'.tr(), style: context.textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700)),
+                  const SizedBox(height: 2),
+                  Text(
+                    'feature_message_version'.tr(namedArgs: {'version': featureMessageReleaseLabel}),
+                    style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceVariant),
+                  ),
+                ],
+              ),
+            ),
+            Expanded(
+              child: PageView.builder(
+                controller: _controller,
+                itemCount: featureMessageHighlights.length,
+                onPageChanged: (i) => setState(() => _index = i),
+                itemBuilder: (_, index) => _FeaturePage(highlight: featureMessageHighlights[index]),
+              ),
+            ),
+            const SizedBox(height: 8),
+            _PageDots(controller: _controller, index: _index, count: featureMessageHighlights.length),
+            Padding(
+              padding: const EdgeInsets.fromLTRB(20, 16, 20, 16),
+              child: SizedBox(
+                width: double.infinity,
+                child: FilledButton(
+                  onPressed: _advance,
+                  style: FilledButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 14)),
+                  child: AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 200),
+                    child: Text(_isLast ? 'ok'.tr() : 'next'.tr(), key: ValueKey(_isLast)),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _FeaturePage extends StatelessWidget {
+  final FeatureHighlight highlight;
+
+  const _FeaturePage({required this.highlight});
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = context.colorScheme;
+
+    return SingleChildScrollView(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(20, 8, 20, 0),
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(18),
+              child: ColoredBox(
+                color: scheme.surfaceContainerHighest,
+                child: SizedBox(
+                  width: double.infinity,
+                  height: 300,
+                  child: Image.asset(
+                    highlight.image,
+                    fit: BoxFit.contain,
+                    errorBuilder: (context, _, __) =>
+                        Center(child: Icon(Icons.auto_awesome_outlined, color: scheme.onSurfaceVariant, size: 56)),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.fromLTRB(24, 18, 24, 8),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  highlight.titleKey.tr(),
+                  style: context.textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  highlight.bodyKey.tr(),
+                  style: context.textTheme.bodyMedium?.copyWith(color: scheme.onSurfaceVariant, height: 1.4),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _PageDots extends StatelessWidget {
+  final PageController controller;
+  final int index;
+  final int count;
+
+  const _PageDots({required this.controller, required this.index, required this.count});
+
+  @override
+  Widget build(BuildContext context) {
+    final primary = context.primaryColor;
+
+    return AnimatedBuilder(
+      animation: controller,
+      builder: (context, _) {
+        final page = controller.hasClients ? (controller.page ?? index.toDouble()) : index.toDouble();
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: List.generate(count, (i) {
+            final activeness = (1 - (page - i).abs()).clamp(0.0, 1.0);
+            return AnimatedContainer(
+              duration: const Duration(milliseconds: 150),
+              margin: const EdgeInsets.symmetric(horizontal: 3),
+              height: 7,
+              width: 7 + 16 * activeness,
+              decoration: BoxDecoration(
+                color: Color.lerp(context.colorScheme.surfaceContainerHighest, primary, activeness),
+                borderRadius: BorderRadius.circular(8),
+              ),
+            );
+          }),
+        );
+      },
+    );
+  }
+}

mobile/lib/presentation/widgets/feature_message/feature_message_sheet.widget.dart

@@ -0,0 +1,101 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/feature_message.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+
+Future<void> showFeatureMessageSheet(BuildContext context) {
+  return showModalBottomSheet(
+    context: context,
+    isScrollControlled: true,
+    backgroundColor: Colors.transparent,
+    useRootNavigator: true,
+    builder: (_) => const _FeatureMessageSheet(),
+  );
+}
+
+class _FeatureMessageSheet extends StatelessWidget {
+  const _FeatureMessageSheet();
+
+  @override
+  Widget build(BuildContext context) {
+    return BaseBottomSheet(
+      actions: const [],
+      resizeOnScroll: false,
+      expand: false,
+      initialChildSize: 0.6,
+      minChildSize: 0.4,
+      maxChildSize: 0.9,
+      slivers: [
+        SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.fromLTRB(24, 4, 24, 16),
+            child: Text(
+              'whats_new'.tr(),
+              style: context.textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.w600),
+            ),
+          ),
+        ),
+        SliverList.separated(
+          itemCount: featureMessageHighlights.length,
+          separatorBuilder: (_, __) => const SizedBox(height: 8),
+          itemBuilder: (_, index) => _HighlightCard(highlight: featureMessageHighlights[index]),
+        ),
+        const SliverToBoxAdapter(child: SizedBox(height: 16)),
+      ],
+      footer: SafeArea(
+        top: false,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(24, 8, 24, 16),
+          child: SizedBox(
+            width: double.infinity,
+            child: FilledButton(
+              onPressed: () => Navigator.of(context).pop(),
+              style: FilledButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 14)),
+              child: Text('feature_message_got_it'.tr()),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _HighlightCard extends StatelessWidget {
+  final FeatureHighlight highlight;
+
+  const _HighlightCard({required this.highlight});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ClipRRect(
+            borderRadius: BorderRadius.circular(16),
+            child: AspectRatio(
+              aspectRatio: 16 / 9,
+              child: Image.asset(
+                highlight.image,
+                fit: BoxFit.cover,
+                errorBuilder: (context, _, __) => ColoredBox(
+                  color: context.colorScheme.surfaceContainerHighest,
+                  child: Icon(Icons.image_outlined, color: context.colorScheme.onSurfaceVariant, size: 48),
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: 12),
+          Text(highlight.titleKey.tr(), style: context.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w600)),
+          const SizedBox(height: 4),
+          Text(
+            highlight.bodyKey.tr(),
+            style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceVariant),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/providers/feature_message.provider.dart

@@ -0,0 +1,9 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/services/feature_message.service.dart';
+import 'package:immich_mobile/providers/infrastructure/settings.provider.dart';
+
+final featureMessageServiceProvider = Provider<FeatureMessageService>(
+  (ref) => FeatureMessageService(ref.read(settingsProvider)),
+);
+
+final featureMessageCheckedProvider = StateProvider<bool>((ref) => false);

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

@@ -18,6 +18,7 @@ import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/infrastructure/repositories/settings.repository.dart';
 import 'package:immich_mobile/providers/auth.provider.dart';
 import 'package:immich_mobile/providers/background_sync.provider.dart';
+import 'package:immich_mobile/providers/feature_message.provider.dart';
 import 'package:immich_mobile/providers/gallery_permission.provider.dart';
 import 'package:immich_mobile/providers/oauth.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
@@ -262,6 +263,7 @@ class LoginForm extends HookConsumerWidget {
           }
           unawaited(handleSyncFlow());
           ref.read(websocketProvider.notifier).connect();
+          unawaited(ref.read(featureMessageServiceProvider).markSeen());
           unawaited(context.router.replaceAll([const TabShellRoute()]));
           return;
         }
@@ -349,6 +351,7 @@ class LoginForm extends HookConsumerWidget {
               await getManageMediaPermission();
             }
             unawaited(handleSyncFlow());
+            unawaited(ref.read(featureMessageServiceProvider).markSeen());
             unawaited(context.router.replaceAll([const TabShellRoute()]));
             return;
           }

mobile/lib/widgets/settings/settings_card.dart

@@ -8,13 +8,15 @@ class SettingsCard extends StatelessWidget {
     required this.icon,
     required this.title,
     required this.subtitle,
-    required this.settingRoute,
+    this.settingRoute,
+    this.onTap,
   });
 
   final IconData icon;
   final String title;
   final String subtitle;
-  final PageRouteInfo settingRoute;
+  final PageRouteInfo? settingRoute;
+  final VoidCallback? onTap;
 
   @override
   Widget build(BuildContext context) {
@@ -38,7 +40,7 @@ class SettingsCard extends StatelessWidget {
           ),
           title: Text(title, style: context.textTheme.titleMedium!.copyWith(color: context.primaryColor)),
           subtitle: Text(subtitle, style: context.textTheme.bodyMedium),
-          onTap: () => context.pushRoute(settingRoute),
+          onTap: onTap ?? (settingRoute != null ? () => context.pushRoute(settingRoute!) : null),
         ),
       ),
     );

mobile/pubspec.yaml

@@ -119,6 +119,7 @@ flutter:
   uses-material-design: true
   assets:
     - assets/
+    - assets/feature_message/
   fonts:
     - family: GoogleSans
       fonts:

readme_i18n/README_tr_TR.md

@@ -38,8 +38,8 @@
 </p>
 
 > [!WARNING]
-> ⚠️ Always follow [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) backup plan for your precious photos and videos!
->
+> ⚠️ Değerli fotoğraflarınız ve videolarınız için daima [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) yedekleme planını uygulayın!
+> 
 
 > [!NOTE]
 > Kurulum dahil olmak üzere resmi belgeleri https://immich.app/ adresinde bulabilirsiniz.

server/src/queries/integrity.repository.sql

@@ -129,6 +129,7 @@ from
   and "integrity_report"."type" = $1
 where
   "asset"."deletedAt" is null
+  and "asset"."isExternal" = false
   and "integrity_report"."createdAt" >= $2
   and "integrity_report"."createdAt" <= $3
 order by

server/src/repositories/integrity.repository.ts

@@ -177,6 +177,7 @@ export class IntegrityRepository {
         'asset.id as assetId',
         'integrity_report.id as reportId',
       ])
+      .where('asset.isExternal', '=', sql.lit(false))
       .$if(startMarker !== undefined, (qb) => qb.where('integrity_report.createdAt', '>=', startMarker!))
       .$if(endMarker !== undefined, (qb) => qb.where('integrity_report.createdAt', '<=', endMarker!))
       .orderBy('integrity_report.createdAt', 'asc')

server/src/services/media.service.spec.ts

@@ -2939,6 +2939,8 @@ describe(MediaService.name, () => {
             '7',
             '-global_quality:v',
             '23',
+            '-b:v',
+            '6897k',
             '-maxrate',
             '10000k',
             '-bufsize',

server/src/utils/media.ts

@@ -788,6 +788,12 @@ export class QsvSwDecodeConfig extends BaseHWConfig {
     const options = [`-${this.useCQP() ? 'q:v' : 'global_quality:v'}`, `${this.config.crf}`];
     const bitrates = this.getBitrateDistribution();
     if (bitrates.max > 0) {
+      // Workaround for https://github.com/immich-app/immich/issues/29220, to be revisited
+      // QSV seems to ignore -maxrate without -b:v
+      // -b:v alongside global_quality uses QVBR
+      if (!this.useCQP()) {
+        options.push('-b:v', `${bitrates.target}${bitrates.unit}`);
+      }
       options.push('-maxrate', `${bitrates.max}${bitrates.unit}`, '-bufsize', `${bitrates.max * 2}${bitrates.unit}`);
     }
     return options;

server/test/medium/specs/services/integrity.service.spec.ts

@@ -686,6 +686,22 @@ describe(IntegrityService.name, () => {
         nextCursor: undefined,
       });
     });
+
+    it('should skip external library files', async () => {
+      const { sut, ctx } = setup();
+      const job = ctx.getMock(JobRepository);
+      job.queue.mockResolvedValue(void 0);
+
+      const { user } = await ctx.newUser();
+
+      await ctx.newAsset({ ownerId: user.id, isExternal: true });
+
+      await sut.handleChecksumFiles({ refreshOnly: false });
+
+      await expect(
+        ctx.get(IntegrityRepository).getIntegrityReport({ limit: 100 }, IntegrityReport.ChecksumFail),
+      ).resolves.toEqual({ items: [], nextCursor: undefined });
+    });
   });
 
   describe('handleChecksumRefresh', () => {

web/src/lib/components/asset-viewer/AssetViewer.svelte

@@ -20,6 +20,7 @@
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { getSharedLink, handlePromiseError } from '$lib/utils';
+  import type { OnUndoDelete } from '$lib/utils/actions';
   import { navigateToAsset } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { InvocationTracker } from '$lib/utils/invocationTracker';
@@ -68,6 +69,7 @@
     onAssetChange?: (asset: AssetResponseDto) => void;
     preAction?: PreAction;
     onAction?: OnAction;
+    onUndoDelete?: OnUndoDelete;
     onClose?: (assetId: string) => void;
     onRemoveFromAlbum?: (assetIds: string[]) => void;
     onRandom?: () => Promise<{ id: string } | undefined>;
@@ -83,6 +85,7 @@
     onAssetChange,
     preAction,
     onAction,
+    onUndoDelete,
     onClose,
     onRemoveFromAlbum,
     onRandom,
@@ -311,6 +314,11 @@
 
   const handleAction = async (action: Action) => {
     switch (action.type) {
+      case AssetAction.DELETE:
+      case AssetAction.TRASH: {
+        eventManager.emit('AssetsDelete', [asset.id]);
+        break;
+      }
       case AssetAction.REMOVE_ASSET_FROM_STACK: {
         stack = action.stack;
         if (stack) {
@@ -493,6 +501,7 @@
         {stack}
         preAction={handlePreAction}
         onAction={handleAction}
+        {onUndoDelete}
         onClose={onClose ? () => onClose(stack?.primaryAssetId ?? asset.id) : undefined}
         {onRemoveFromAlbum}
         {playOriginalVideo}

web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte

@@ -4,9 +4,11 @@
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import AddToStackAction from '$lib/components/asset-viewer/actions/AddToStackAction.svelte';
   import ArchiveAction from '$lib/components/asset-viewer/actions/ArchiveAction.svelte';
+  import DeleteAction from '$lib/components/asset-viewer/actions/DeleteAction.svelte';
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/KeepThisDeleteOthers.svelte';
   import RatingAction from '$lib/components/asset-viewer/actions/RatingAction.svelte';
   import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/RemoveAssetFromStack.svelte';
+  import RestoreAction from '$lib/components/asset-viewer/actions/RestoreAction.svelte';
   import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/SetPersonFeaturedAction.svelte';
   import SetProfilePictureAction from '$lib/components/asset-viewer/actions/SetProfilePictureAction.svelte';
   import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/SetStackPrimaryAsset.svelte';
@@ -23,8 +25,9 @@
   import { Route } from '$lib/route';
   import { getAlbumAssetActions } from '$lib/services/album.service';
   import { getGlobalActions } from '$lib/services/app.service';
-  import { getAssetActions, handleTrashOrDelete } from '$lib/services/asset.service';
+  import { getAssetActions } from '$lib/services/asset.service';
   import { getSharedLink, withoutIcons } from '$lib/utils';
+  import type { OnUndoDelete } from '$lib/utils/actions';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
     AssetTypeEnum,
@@ -34,7 +37,7 @@
     type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
-  import { ActionButton, CommandPaletteDefaultProvider, shortcut, Tooltip, type ActionItem } from '@immich/ui';
+  import { ActionButton, CommandPaletteDefaultProvider, Tooltip, type ActionItem } from '@immich/ui';
   import { mdiArrowLeft, mdiArrowRight, mdiCompare, mdiDotsVertical, mdiImageSearch, mdiVideoOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -45,6 +48,7 @@
     stack?: StackResponseDto | null;
     preAction: PreAction;
     onAction: OnAction;
+    onUndoDelete?: OnUndoDelete;
     onClose?: () => void;
     onRemoveFromAlbum?: (assetIds: string[]) => void;
     playOriginalVideo: boolean;
@@ -58,6 +62,7 @@
     stack = null,
     preAction,
     onAction,
+    onUndoDelete = undefined,
     onClose,
     onRemoveFromAlbum,
     playOriginalVideo = false,
@@ -83,10 +88,6 @@
   const sharedLink = getSharedLink();
 </script>
 
-<svelte:document
-  use:shortcut={{ shortcut: { key: 'Delete', shift: true }, onShortcut: () => handleTrashOrDelete(asset, true) }}
-/>
-
 <CommandPaletteDefaultProvider name={$t('assets')} actions={withoutIcons([Close, Cast, ...Object.values(Actions)])} />
 
 <div
@@ -127,8 +128,10 @@
     {/if}
 
     <ActionButton action={Actions.Edit} />
-    <ActionButton action={Actions.Delete} />
-    <ActionButton action={Actions.PermanentlyDelete} />
+
+    {#if isOwner}
+      <DeleteAction {asset} {onAction} {preAction} {onUndoDelete} />
+    {/if}
 
     {#if !sharedLink}
       <ButtonContextMenu direction="left" align="top-right" color="secondary" title={$t('more')} icon={mdiDotsVertical}>
@@ -136,7 +139,10 @@
 
         <ActionMenuItem action={Actions.Download} />
         <ActionMenuItem action={Actions.DownloadOriginal} />
-        <ActionMenuItem action={Actions.Restore} />
+
+        {#if !isLocked && asset.isTrashed}
+          <RestoreAction {asset} {onAction} />
+        {/if}
 
         <ActionMenuItem action={Actions.AddToAlbum} />
         {#if album && (isOwner || isAlbumOwner)}

web/src/lib/components/asset-viewer/VideoNativeViewer.svelte

@@ -324,6 +324,18 @@
       shortcut: { key: ' ' },
       onShortcut: () => (videoPlayer?.paused ? videoPlayer?.play() : videoPlayer?.pause()),
     },
+    {
+      shortcut: { shift: true, key: 'ArrowLeft' },
+      onShortcut: () =>
+        videoPlayer ? (videoPlayer.currentTime = Math.max(videoPlayer.currentTime - 0.4, 0)) : undefined,
+    },
+    {
+      shortcut: { shift: true, key: 'ArrowRight' },
+      onShortcut: () =>
+        videoPlayer
+          ? (videoPlayer.currentTime = Math.min(videoPlayer.currentTime + 0.4, videoPlayer.duration))
+          : undefined,
+    },
   ]}
 />
 

web/src/lib/components/asset-viewer/actions/DeleteAction.spec.ts

@@ -0,0 +1,48 @@
+import type { AssetResponseDto } from '@immich/sdk';
+import '@testing-library/jest-dom';
+import { renderWithTooltips } from '$tests/helpers';
+import { assetFactory } from '@test-data/factories/asset-factory';
+import DeleteAction from './DeleteAction.svelte';
+
+let asset: AssetResponseDto;
+
+describe('DeleteAction component', () => {
+  beforeEach(() => {
+    vi.mock(import('$lib/managers/feature-flags-manager.svelte'), () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return { featureFlagsManager: { init: vi.fn(), loadFeatureFlags: vi.fn(), value: { trash: true } } as any };
+    });
+  });
+
+  describe('given an asset which is not trashed yet', () => {
+    beforeEach(() => {
+      asset = assetFactory.build({ isTrashed: false });
+    });
+
+    it('displays a button to move the asset to the trash bin', () => {
+      const { getByLabelText, queryByTitle } = renderWithTooltips(DeleteAction, {
+        asset,
+        onAction: vi.fn(),
+        preAction: vi.fn(),
+      });
+      expect(getByLabelText('delete')).toBeInTheDocument();
+      expect(queryByTitle('deletePermanently')).toBeNull();
+    });
+  });
+
+  describe('but if the asset is already trashed', () => {
+    beforeEach(() => {
+      asset = assetFactory.build({ isTrashed: true });
+    });
+
+    it('displays a button to permanently delete the asset', () => {
+      const { getByLabelText, queryByTitle } = renderWithTooltips(DeleteAction, {
+        asset,
+        onAction: vi.fn(),
+        preAction: vi.fn(),
+      });
+      expect(getByLabelText('permanently_delete')).toBeInTheDocument();
+      expect(queryByTitle('delete')).toBeNull();
+    });
+  });
+});

web/src/lib/components/asset-viewer/actions/DeleteAction.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { shortcuts } from '$lib/actions/shortcut';
+  import { AssetAction } from '$lib/constants';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { deleteAssets as deleteAssetsUtil, type OnUndoDelete } from '$lib/utils/actions';
+  import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
+  import { IconButton, modalManager, toastManager } from '@immich/ui';
+  import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction, PreAction } from './action';
+
+  interface Props {
+    asset: AssetResponseDto;
+    onAction: OnAction;
+    preAction: PreAction;
+    onUndoDelete?: OnUndoDelete;
+  }
+
+  let { asset, onAction, preAction, onUndoDelete = undefined }: Props = $props();
+
+  const forceDefault = $derived(asset.isTrashed || !featureFlagsManager.value.trash);
+
+  const trashOrDelete = async (forceRequest?: boolean) => {
+    const timelineAsset = toTimelineAsset(asset);
+    const force = forceDefault || forceRequest;
+
+    if (force) {
+      if ($showDeleteModal) {
+        const confirmed = await modalManager.show(AssetDeleteConfirmModal, { size: 1 });
+        if (!confirmed) {
+          return;
+        }
+      }
+
+      try {
+        preAction({ type: AssetAction.DELETE, asset: timelineAsset });
+        await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
+        onAction({ type: AssetAction.DELETE, asset: timelineAsset });
+        toastManager.primary($t('permanently_deleted_asset'));
+      } catch (error) {
+        handleError(error, $t('errors.unable_to_delete_asset'));
+      }
+
+      return;
+    }
+
+    preAction({ type: AssetAction.TRASH, asset: timelineAsset });
+    await deleteAssetsUtil(
+      false,
+      () => onAction({ type: AssetAction.TRASH, asset: timelineAsset }),
+      [timelineAsset],
+      onUndoDelete,
+    );
+  };
+</script>
+
+<svelte:document
+  use:shortcuts={[
+    { shortcut: { key: 'Delete' }, onShortcut: () => trashOrDelete() },
+    { shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) },
+  ]}
+/>
+
+<IconButton
+  color="secondary"
+  shape="round"
+  variant="ghost"
+  icon={forceDefault ? mdiDeleteForeverOutline : mdiDeleteOutline}
+  aria-label={forceDefault ? $t('permanently_delete') : $t('delete')}
+  onclick={() => trashOrDelete()}
+/>

web/src/lib/components/asset-viewer/actions/RestoreAction.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { restoreAssets, type AssetResponseDto } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
+  import { mdiHistory } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  interface Props {
+    asset: AssetResponseDto;
+    onAction: OnAction;
+  }
+
+  let { asset = $bindable(), onAction }: Props = $props();
+
+  const handleRestoreAsset = async () => {
+    try {
+      await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
+      asset.isTrashed = false;
+      onAction({ type: AssetAction.RESTORE, asset: toTimelineAsset(asset) });
+      toastManager.primary($t('restored_asset'));
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_restore_assets'));
+    }
+  };
+</script>
+
+<MenuOption icon={mdiHistory} onClick={handleRestoreAsset} text={$t('restore')} />

web/src/lib/components/asset-viewer/actions/action.ts

@@ -5,6 +5,9 @@ import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 type ActionMap = {
   [AssetAction.ARCHIVE]: { asset: TimelineAsset };
   [AssetAction.UNARCHIVE]: { asset: TimelineAsset };
+  [AssetAction.TRASH]: { asset: TimelineAsset };
+  [AssetAction.DELETE]: { asset: TimelineAsset };
+  [AssetAction.RESTORE]: { asset: TimelineAsset };
   [AssetAction.STACK]: { stack: StackResponseDto };
   [AssetAction.UNSTACK]: { assets: TimelineAsset[] };
   [AssetAction.SET_STACK_PRIMARY_ASSET]: { stack: StackResponseDto };

web/src/lib/components/share-page/IndividualSharedViewer.svelte

@@ -22,7 +22,6 @@
   import { t } from 'svelte-i18n';
   import ControlAppBar from '../shared-components/ControlAppBar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/GalleryViewer.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -64,20 +63,15 @@
 
   const handleAction = async (action: Action) => {
     switch (action.type) {
-      case AssetAction.ARCHIVE: {
+      case AssetAction.ARCHIVE:
+      case AssetAction.DELETE:
+      case AssetAction.TRASH: {
         await goto(Route.photos());
         break;
       }
       // no default
     }
   };
-
-  const onAssetsDelete = async (assetIds: string[]) => {
-    // Only used for single asset shared link
-    if (assetIds.includes(assets[0].id)) {
-      await goto(Route.photos());
-    }
-  };
 </script>
 
 {#if sharedLink?.allowUpload || assets.length > 1}
@@ -138,8 +132,6 @@
     {/if}
   </header>
 {:else if assets.length === 1}
-  <OnEvents {onAssetsDelete} />
-
   {#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
     {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
       <AssetViewer cursor={{ current: asset }} onAction={handleAction} />

web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte

@@ -4,7 +4,6 @@
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import type { AssetCursor } from '$lib/components/asset-viewer/AssetViewer.svelte';
   import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
   import { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
@@ -286,7 +285,9 @@
 
   const handleAction = async (action: Action) => {
     switch (action.type) {
-      case AssetAction.ARCHIVE: {
+      case AssetAction.ARCHIVE:
+      case AssetAction.DELETE:
+      case AssetAction.TRASH: {
         const nextAsset = assetCursor.nextAsset ?? assetCursor.previousAsset;
         assets.splice(
           assets.findIndex((currentAsset) => currentAsset.id === action.asset.id),
@@ -304,17 +305,6 @@
     }
   };
 
-  const onAssetsDelete = async (assetIds: string[]) => {
-    const nextAsset = assetCursor.nextAsset ?? assetCursor.previousAsset;
-    assets = assets.filter((asset) => !assetIds.includes(asset.id));
-    if (assets.length === 0) {
-      return await goto(Route.photos());
-    }
-    if (assetIds.includes(assetCursor.current.id) && nextAsset) {
-      await navigateToAsset(nextAsset);
-    }
-  };
-
   const assetMouseEventHandler = (asset: TimelineAsset | null) => {
     if (assetInteraction.selectionActive) {
       handleSelectAssetCandidates(asset);
@@ -348,8 +338,6 @@
 
 <svelte:document onselectstart={onSelectStart} use:shortcuts={shortcutList} onscroll={() => updateSlidingWindow()} />
 
-<OnEvents {onAssetsDelete} />
-
 {#if assets.length > 0}
   <div
     style:position="relative"

web/src/lib/components/timeline/TimelineAssetViewer.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import type { AssetCursor } from '$lib/components/asset-viewer/AssetViewer.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
   import { AssetAction } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { websocketEvents } from '$lib/stores/websocket';
   import { handlePromiseError } from '$lib/utils';
   import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
@@ -78,14 +78,6 @@
     };
   };
 
-  /** Find the next asset to show or close the viewer */
-  const navigateOrCloseViewer = async (id: string) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    (await navigateToAsset(assetCursor?.nextAsset)) ||
-      (await navigateToAsset(assetCursor?.previousAsset)) ||
-      (await handleClose(id));
-  };
-
   //TODO: replace this with async derived in svelte 6
   $effect(() => {
     const asset = assetViewerManager.asset;
@@ -117,20 +109,35 @@
   const handleRemoveFromAlbum = async (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
 
-    if (assetIds.includes(assetCursor.current.id)) {
-      await navigateOrCloseViewer(assetCursor.current.id);
+    if (!assetIds.includes(assetCursor.current.id)) {
+      return;
     }
+
+    // keep the cleanup workflow in viewer by moving to adjacent asset first
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    (await navigateToAsset(assetCursor?.nextAsset)) ||
+      (await navigateToAsset(assetCursor?.previousAsset)) ||
+      (await handleClose(assetCursor.current.id));
   };
 
   const handlePreAction = async (action: Action) => {
     switch (action.type) {
       case removeAction:
+      case AssetAction.TRASH:
+      case AssetAction.RESTORE:
+      case AssetAction.DELETE:
       case AssetAction.ARCHIVE:
       case AssetAction.SET_VISIBILITY_LOCKED:
       case AssetAction.SET_VISIBILITY_TIMELINE: {
         // must update manager before performing any navigation
         timelineManager.removeAssets([action.asset.id]);
-        await navigateOrCloseViewer(action.asset.id);
+
+        // find the next asset to show or close the viewer
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        (await navigateToAsset(assetCursor?.nextAsset)) ||
+          (await navigateToAsset(assetCursor?.previousAsset)) ||
+          (await handleClose(action.asset.id));
+
         break;
       }
       // no default
@@ -192,19 +199,9 @@
       // no default
     }
   };
-
-  const onAssetsDelete = async (assetIds: string[]) => {
-    timelineManager.removeAssets(assetIds);
-
-    if (assetIds.includes(assetCursor.current.id)) {
-      await navigateOrCloseViewer(assetCursor.current.id);
-    }
-  };
-
-  const onAssetsRestore = async (assets: AssetResponseDto[]) => {
-    timelineManager.upsertAssets(assets.map((a) => toTimelineAsset(a)));
-    if (assets.length !== 1) {
-      // don't reopen asset viewer if multiple assets were restored (bulk action)
+  const handleUndoDelete = async (assets: TimelineAsset[]) => {
+    timelineManager.upsertAssets(assets);
+    if (assets.length === 0) {
       return;
     }
 
@@ -237,8 +234,6 @@
   });
 </script>
 
-<OnEvents {onAssetsDelete} {onAssetsRestore} />
-
 {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
   <AssetViewer
     {withStacked}
@@ -254,6 +249,7 @@
       handleAction(action);
       assetCacheManager.invalidate();
     }}
+    onUndoDelete={handleUndoDelete}
     onRandom={handleRandom}
     onRemoveFromAlbum={handleRemoveFromAlbum}
     onClose={handleClose}

web/src/lib/constants.ts

@@ -3,6 +3,9 @@ export const UUID_REGEX = /^[\dA-Fa-f]{8}(?:\b-[\dA-Fa-f]{4}){3}\b-[\dA-Fa-f]{12
 export enum AssetAction {
   ARCHIVE = 'archive',
   UNARCHIVE = 'unarchive',
+  TRASH = 'trash',
+  DELETE = 'delete',
+  RESTORE = 'restore',
   STACK = 'stack',
   UNSTACK = 'unstack',
   SET_STACK_PRIMARY_ASSET = 'set-stack-primary-asset',

web/src/lib/managers/event-manager.svelte.ts

@@ -36,7 +36,6 @@ export type Events = {
   AssetUpdate: [AssetResponseDto];
   AssetsArchive: [string[]];
   AssetsDelete: [string[]];
-  AssetsRestore: [AssetResponseDto[]];
   AssetEditsApplied: [string];
   AssetsTag: [string[]];
 

web/src/lib/services/asset.service.spec.ts

@@ -31,12 +31,6 @@ vitest.mock('$lib/utils', async () => {
   };
 });
 
-vi.mock(import('$lib/managers/feature-flags-manager.svelte'), function () {
-  return {
-    featureFlagsManager: { init: vi.fn(), loadFeatureFlags: vi.fn(), value: {} } as never,
-  };
-});
-
 describe('AssetService', () => {
   describe('getAssetActions', () => {
     beforeEach(() => {

web/src/lib/services/asset.service.ts

@@ -3,9 +3,7 @@ import {
   AssetMediaSize,
   AssetTypeEnum,
   AssetVisibility,
-  deleteAssets,
   getAssetInfo,
-  restoreAssets,
   runAssetJobs,
   updateAsset,
   type AssetJobsDto,
@@ -17,15 +15,12 @@ import {
   mdiCogRefreshOutline,
   mdiContentCopy,
   mdiDatabaseRefreshOutline,
-  mdiDeleteForeverOutline,
-  mdiDeleteOutline,
   mdiDownload,
   mdiDownloadBox,
   mdiFaceRecognition,
   mdiHeadSyncOutline,
   mdiHeart,
   mdiHeartOutline,
-  mdiHistory,
   mdiImageRefreshOutline,
   mdiInformationOutline,
   mdiMagnifyMinusOutline,
@@ -39,18 +34,14 @@ import {
   mdiTune,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import { ProjectionType } from '$lib/constants';
 import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
 import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
 import AssetAddToAlbumModal from '$lib/modals/AssetAddToAlbumModal.svelte';
-import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
 import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
 import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
-import { showDeleteModal } from '$lib/stores/preferences.store';
 import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
 import { getAssetMediaUrl, getSharedLink, sleep } from '$lib/utils';
 import { downloadUrl } from '$lib/utils';
@@ -105,7 +96,6 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
   const sharedLink = getSharedLink();
   const authUser = authManager.authenticated ? authManager.user : undefined;
   const isOwner = !!(authUser && authUser.id === asset.ownerId);
-  const isDeletionPermanent = asset.isTrashed || !featureFlagsManager.value.trash;
 
   const Share: ActionItem = {
     title: $t('share'),
@@ -252,29 +242,6 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
     shortcuts: [{ key: 'e' }],
   };
 
-  const Delete: ActionItem = {
-    title: $t('delete'),
-    icon: mdiDeleteOutline,
-    $if: () => isOwner && !isDeletionPermanent,
-    onAction: () => handleTrashOrDelete(asset),
-    shortcuts: { key: 'Delete' },
-  };
-
-  const PermanentlyDelete: ActionItem = {
-    title: $t('permanently_delete'),
-    icon: mdiDeleteForeverOutline,
-    $if: () => isOwner && isDeletionPermanent,
-    onAction: () => handleTrashOrDelete(asset, true),
-    shortcuts: { key: 'Delete', shift: true },
-  };
-
-  const Restore: ActionItem = {
-    title: $t('restore'),
-    icon: mdiHistory,
-    $if: () => asset.visibility !== AssetVisibility.Locked && asset.isTrashed,
-    onAction: () => handleRestore(asset),
-  };
-
   const RefreshFacesJob: ActionItem = {
     title: $t('refresh_faces'),
     icon: mdiHeadSyncOutline,
@@ -319,9 +286,6 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
     Tag,
     TagPeople,
     Edit,
-    Delete,
-    PermanentlyDelete,
-    Restore,
     RefreshFacesJob,
     RefreshMetadataJob,
     RegenerateThumbnailJob,
@@ -403,47 +367,6 @@ const handleUnfavorite = async (asset: AssetResponseDto) => {
   }
 };
 
-export const handleTrashOrDelete = async (asset: AssetResponseDto, force?: boolean) => {
-  const $t = await getFormatter();
-
-  if (force && get(showDeleteModal)) {
-    const confirmed = await modalManager.show(AssetDeleteConfirmModal, { size: 1 });
-    if (!confirmed) {
-      return;
-    }
-  }
-
-  try {
-    await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force } });
-    eventManager.emit('AssetsDelete', [asset.id]);
-    if (force) {
-      toastManager.primary($t('permanently_deleted_asset'));
-    } else {
-      toastManager.primary(
-        {
-          description: $t('moved_to_trash'),
-          button: { label: $t('undo'), color: 'secondary', onclick: () => handleRestore(asset) },
-        },
-        { timeout: 5000 },
-      );
-    }
-  } catch (error) {
-    handleError(error, $t('errors.unable_to_delete_asset'));
-  }
-};
-
-const handleRestore = async (asset: AssetResponseDto) => {
-  const $t = await getFormatter();
-
-  try {
-    await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
-    eventManager.emit('AssetsRestore', [asset]);
-    toastManager.primary($t('restored_asset'));
-  } catch (error) {
-    handleError(error, $t('errors.unable_to_restore_assets'));
-  }
-};
-
 const getAssetJobMessage = ($t: MessageFormatter, job: AssetJobName) => {
   const messages: Record<AssetJobName, string> = {
     [AssetJobName.RefreshFaces]: $t('refreshing_faces'),

web/src/lib/stores/face.svelte.ts

@@ -24,7 +24,8 @@ class FaceManager {
   });
 
   readonly people = $derived.by(() => {
-    const people = new SvelteMap<string, PersonResponseDto>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const people = new Map<string, PersonResponseDto>();
 
     for (const face of this.data) {
       if (face.person) {
@@ -32,7 +33,7 @@ class FaceManager {
       }
     }
 
-    return people.values();
+    return Array.from(people.values());
   });
 
   readonly facesByPersonId = $derived.by(() => {

web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Action } from '$lib/components/asset-viewer/actions/action';
   import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import LargeAssetData from './LargeAssetData.svelte';
@@ -36,14 +37,16 @@
     return asset;
   };
 
-  const onAssetsDelete = async (assetIds: string[]) => {
-    if (assetIds.includes(assetCursor.current.id)) {
+  const preAction = async (payload: Action) => {
+    if (payload.type == 'trash') {
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       (await navigateToAsset(assetCursor?.nextAsset)) ||
         (await navigateToAsset(assetCursor?.previousAsset)) ||
         assetViewerManager.showAssetViewer(false);
     }
+  };
 
+  const onAssetsDelete = (assetIds: string[]) => {
     assets = assets.filter(({ id }) => !assetIds.includes(id));
   };
 
@@ -81,6 +84,7 @@
         cursor={assetCursor}
         showNavigation={assets.length > 1}
         {onRandom}
+        {preAction}
         onClose={() => {
           assetViewerManager.showAssetViewer(false);
           handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));