fix(web): address review feedback on hero view transitions

Change-Id: I9f12e1616ddcf124a9926d54868b5e166a6a6964

e2e/src/specs/maintenance/server/database-backups.e2e-spec.ts

@@ -2,7 +2,7 @@ import { LoginResponseDto, ManualJobName } from '@immich/sdk';
 import { errorDto } from 'src/responses';
 import { app, utils } from 'src/utils';
 import request from 'supertest';
-import { afterAll, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 
 describe('/admin/database-backups', () => {
   let cookie: string | undefined;
@@ -13,9 +13,6 @@ describe('/admin/database-backups', () => {
     admin = await utils.adminSetup({
       onboarding: false,
     });
-  });
-
-  beforeEach(async () => {
     await utils.resetBackups(admin.accessToken);
   });
 

e2e/src/ui/specs/timeline/utils.ts

@@ -143,8 +143,9 @@ export const timelineUtils = {
     return page.locator('#asset-grid');
   },
   async waitForTimelineLoad(page: Page) {
-    await expect(timelineUtils.locator(page)).toBeInViewport();
+    await page.locator('#asset-grid[data-initialized]').waitFor();
     await expect.poll(() => thumbnailUtils.locator(page).count()).toBeGreaterThan(0);
+    await page.locator('#virtual-timeline:not(.invisible)').waitFor();
   },
   async getScrollTop(page: Page) {
     const queryTop = () =>
@@ -163,14 +164,17 @@ export const assetViewerUtils = {
     return page.locator('#immich-asset-viewer');
   },
   async waitForViewerLoad(page: Page, asset: TimelineAssetConfig) {
-    await page
-      .locator(
-        `img[draggable="false"][src="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`,
-      )
-      .or(
-        page.locator(`video[poster="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`),
-      )
-      .waitFor();
+    const imgLocator = page.locator(`[data-viewer-content] img[data-testid="preview"][src*="${asset.id}"]`);
+    const videoLocator = page.locator(`[data-viewer-content] video[poster*="${asset.id}"]`);
+    await imgLocator.or(videoLocator).waitFor();
+
+    if ((await videoLocator.count()) === 0) {
+      await expect
+        .poll(() => imgLocator.evaluate((img: HTMLImageElement) => img.complete && img.naturalWidth > 0))
+        .toBe(true);
+    }
+
+    await expect(page.locator('#immich-asset-viewer')).not.toHaveAttribute('data-navigating');
   },
   async expectActiveAssetToBe(page: Page, assetId: string) {
     const activeElement = () =>

e2e/src/utils.ts

@@ -568,8 +568,6 @@ export const utils = {
       name: ManualJobName.BackupDatabase,
     });
 
-    await utils.waitForQueueFinish(accessToken, 'backupDatabase');
-
     return utils.poll(
       () => request(app).get('/admin/database-backups').set('Authorization', `Bearer ${accessToken}`),
       ({ status, body }) => status === 200 && body.backups.length === 1,

mobile/android/app/src/main/kotlin/app/alextran/immich/images/RemoteImagesImpl.kt

@@ -23,8 +23,6 @@ import java.io.IOException
 import java.nio.ByteBuffer
 import java.util.concurrent.ConcurrentHashMap
 
-private const val MAX_PREALLOC_BYTES = 128 * 1024 * 1024
-
 private class RemoteRequest(val cancellationSignal: CancellationSignal)
 
 class RemoteImagesImpl(context: Context) : RemoteImageApi {
@@ -230,6 +228,7 @@ private class CronetImageFetcher : ImageFetcher {
     private val onComplete: () -> Unit,
   ) : UrlRequest.Callback() {
     private var buffer: NativeByteBuffer? = null
+    private var wrapped: ByteBuffer? = null
     private var error: Exception? = null
 
     override fun onRedirectReceived(request: UrlRequest, info: UrlResponseInfo, newUrl: String) {
@@ -243,16 +242,15 @@ private class CronetImageFetcher : ImageFetcher {
       }
 
       try {
-        // Content-Length is a size hint only. With Content-Encoding (gzip/br/...),
-        // Cronet auto-decompresses and writes decompressed bytes to our buffer, which
-        // may exceed the wire/compressed Content-Length. Always use the growable
-        // buffer path so we can't overflow.
         val contentLength = info.allHeaders["content-length"]?.firstOrNull()?.toIntOrNull() ?: 0
-        // Cap the up-front alloc: Content-Length is untrusted and can be huge or near
-        // Int.MAX_VALUE (overflowing `+1`). For larger responses the grow path takes over.
-        val initialSize = if (contentLength in 1..MAX_PREALLOC_BYTES) contentLength + 1 else INITIAL_BUFFER_SIZE
-        buffer = NativeByteBuffer(initialSize)
-        request.read(buffer!!.wrapRemaining())
+        if (contentLength > 0) {
+          buffer = NativeByteBuffer(contentLength + 1)
+          wrapped = NativeBuffer.wrap(buffer!!.pointer, contentLength + 1)
+          request.read(wrapped)
+        } else {
+          buffer = NativeByteBuffer(INITIAL_BUFFER_SIZE)
+          request.read(buffer!!.wrapRemaining())
+        }
       } catch (e: Exception) {
         error = e
         return request.cancel()
@@ -265,14 +263,14 @@ private class CronetImageFetcher : ImageFetcher {
       byteBuffer: ByteBuffer
     ) {
       try {
-        // Always pass a fresh wrap so byteBuffer.position() represents only the
-        // bytes Cronet wrote in this iteration. Reusing the caller-supplied
-        // ByteBuffer breaks advance(): Cronet's position keeps accumulating
-        // across reads, which would double-count previous iterations' bytes.
-        val buf = buffer!!.run {
-          advance(byteBuffer.position())
-          ensureHeadroom()
-          wrapRemaining()
+        val buf = if (wrapped == null) {
+          buffer!!.run {
+            advance(byteBuffer.position())
+            ensureHeadroom()
+            wrapRemaining()
+          }
+        } else {
+          wrapped
         }
         request.read(buf)
       } catch (e: Exception) {
@@ -282,6 +280,7 @@ private class CronetImageFetcher : ImageFetcher {
     }
 
     override fun onSucceeded(request: UrlRequest, info: UrlResponseInfo) {
+      wrapped?.let { buffer!!.advance(it.position()) }
       onSuccess(buffer!!)
       onComplete()
     }

mobile/ios/Runner/Sync/MessagesImpl.swift

@@ -110,7 +110,7 @@ class NativeSyncApiImpl: ImmichPlugin, NativeSyncApi, FlutterPlugin {
         
         var domainAlbum = PlatformAlbum(
           id: album.localIdentifier,
-          name: album.localizedTitle ?? album.localIdentifier,
+          name: album.localizedTitle!,
           updatedAt: nil,
           isCloud: isCloud,
           assetCount: Int64(assets.count)

mobile/lib/constants/enums.dart

@@ -18,7 +18,3 @@ enum CleanupStep { selectDate, scan, delete }
 enum AssetKeepType { none, photosOnly, videosOnly }
 
 enum AssetDateAggregation { start, end }
-
-enum SlideshowLook { contain, cover, blurredBackground }
-
-enum SlideshowDirection { forward, backward, shuffle }

mobile/lib/domain/models/asset/remote_asset.model.dart

@@ -11,7 +11,6 @@ class RemoteAsset extends BaseAsset {
   final String ownerId;
   final String? stackId;
   final DateTime? uploadedAt;
-  final DateTime? deletedAt;
 
   const RemoteAsset({
     required this.id,
@@ -32,7 +31,6 @@ class RemoteAsset extends BaseAsset {
     super.livePhotoVideoId,
     this.stackId,
     required super.isEdited,
-    this.deletedAt,
   }) : localAssetId = localId;
 
   @override
@@ -50,8 +48,6 @@ class RemoteAsset extends BaseAsset {
   @override
   bool get isEditable => isImage && !isMotionPhoto && !isAnimatedImage;
 
-  bool get isTrashed => deletedAt != null;
-
   @override
   String toString() {
     return '''Asset {
@@ -90,8 +86,7 @@ class RemoteAsset extends BaseAsset {
         thumbHash == other.thumbHash &&
         visibility == other.visibility &&
         stackId == other.stackId &&
-        uploadedAt == other.uploadedAt &&
-        deletedAt == other.deletedAt;
+        uploadedAt == other.uploadedAt;
   }
 
   @override
@@ -103,8 +98,7 @@ class RemoteAsset extends BaseAsset {
       thumbHash.hashCode ^
       visibility.hashCode ^
       stackId.hashCode ^
-      uploadedAt.hashCode ^
-      deletedAt.hashCode;
+      uploadedAt.hashCode;
 
   RemoteAsset copyWith({
     String? id,
@@ -125,7 +119,6 @@ class RemoteAsset extends BaseAsset {
     String? livePhotoVideoId,
     String? stackId,
     bool? isEdited,
-    DateTime? deletedAt,
   }) {
     return RemoteAsset(
       id: id ?? this.id,
@@ -146,7 +139,6 @@ class RemoteAsset extends BaseAsset {
       livePhotoVideoId: livePhotoVideoId ?? this.livePhotoVideoId,
       stackId: stackId ?? this.stackId,
       isEdited: isEdited ?? this.isEdited,
-      deletedAt: deletedAt ?? this.deletedAt,
     );
   }
 }
@@ -164,7 +156,6 @@ class RemoteAssetExif extends RemoteAsset {
     required super.createdAt,
     required super.updatedAt,
     super.uploadedAt,
-    super.deletedAt,
     super.width,
     super.height,
     super.durationMs,
@@ -202,7 +193,6 @@ class RemoteAssetExif extends RemoteAsset {
     DateTime? createdAt,
     DateTime? updatedAt,
     DateTime? uploadedAt,
-    DateTime? deletedAt,
     int? width,
     int? height,
     int? durationMs,
@@ -224,7 +214,6 @@ class RemoteAssetExif extends RemoteAsset {
       createdAt: createdAt ?? this.createdAt,
       updatedAt: updatedAt ?? this.updatedAt,
       uploadedAt: uploadedAt ?? this.uploadedAt,
-      deletedAt: deletedAt ?? this.deletedAt,
       width: width ?? this.width,
       height: height ?? this.height,
       durationMs: durationMs ?? this.durationMs,

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

@@ -4,7 +4,6 @@ import 'package:immich_mobile/domain/models/config/map_config.dart';
 import 'package:immich_mobile/domain/models/config/theme_config.dart';
 import 'package:immich_mobile/domain/models/config/timeline_config.dart';
 import 'package:immich_mobile/domain/models/config/viewer_config.dart';
-import 'package:immich_mobile/domain/models/config/slideshow_config.dart';
 
 class AppConfig {
   final ThemeConfig theme;
@@ -13,7 +12,6 @@ class AppConfig {
   final TimelineConfig timeline;
   final ImageConfig image;
   final ViewerConfig viewer;
-  final SlideshowConfig slideshow;
 
   const AppConfig({
     this.theme = const .new(),
@@ -22,7 +20,6 @@ class AppConfig {
     this.timeline = const .new(),
     this.image = const .new(),
     this.viewer = const .new(),
-    this.slideshow = const .new(),
   });
 
   AppConfig copyWith({
@@ -32,7 +29,6 @@ class AppConfig {
     TimelineConfig? timeline,
     ImageConfig? image,
     ViewerConfig? viewer,
-    SlideshowConfig? slideshow,
   }) => .new(
     theme: theme ?? this.theme,
     cleanup: cleanup ?? this.cleanup,
@@ -40,7 +36,6 @@ class AppConfig {
     timeline: timeline ?? this.timeline,
     image: image ?? this.image,
     viewer: viewer ?? this.viewer,
-    slideshow: slideshow ?? this.slideshow,
   );
 
   @override
@@ -52,13 +47,12 @@ class AppConfig {
           other.map == map &&
           other.timeline == timeline &&
           other.image == image &&
-          other.viewer == viewer &&
-          other.slideshow == slideshow);
+          other.viewer == viewer);
 
   @override
-  int get hashCode => Object.hash(theme, cleanup, map, timeline, image, viewer, slideshow);
+  int get hashCode => Object.hash(theme, cleanup, map, timeline, image, viewer);
 
   @override
   String toString() =>
-      'AppConfig(theme: $theme, cleanup: $cleanup, map: $map, timeline: $timeline, image: $image, viewer: $viewer, slideshow: $slideshow)';
+      'AppConfig(theme: $theme, cleanup: $cleanup, map: $map, timeline: $timeline, image: $image, viewer: $viewer)';
 }

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

@@ -1,48 +0,0 @@
-import 'package:immich_mobile/constants/enums.dart';
-
-class SlideshowConfig {
-  final bool transition;
-  final bool repeat;
-  final int duration;
-  final SlideshowLook look;
-  final SlideshowDirection direction;
-
-  const SlideshowConfig({
-    this.transition = true,
-    this.repeat = true,
-    this.duration = 5,
-    this.look = SlideshowLook.contain,
-    this.direction = SlideshowDirection.forward,
-  });
-
-  SlideshowConfig copyWith({
-    bool? transition,
-    bool? repeat,
-    int? duration,
-    SlideshowLook? look,
-    SlideshowDirection? direction,
-  }) => SlideshowConfig(
-    transition: transition ?? this.transition,
-    repeat: repeat ?? this.repeat,
-    duration: duration ?? this.duration,
-    look: look ?? this.look,
-    direction: direction ?? this.direction,
-  );
-
-  @override
-  bool operator ==(Object other) =>
-      identical(this, other) ||
-      (other is SlideshowConfig &&
-          other.transition == transition &&
-          other.repeat == repeat &&
-          other.duration == duration &&
-          other.look == look &&
-          other.direction == direction);
-
-  @override
-  int get hashCode => Object.hash(transition, repeat, duration, look, direction);
-
-  @override
-  String toString() =>
-      'SlideshowConfig(transition: $transition, repeat: $repeat, duration: $duration, look: $look, direction: $direction)';
-}

mobile/lib/domain/models/metadata_key.dart

@@ -64,19 +64,7 @@ enum MetadataKey<T extends Object> {
   ),
   cleanupKeepAlbumIds<List<String>>(.appConfig, 'cleanup.keepAlbumIds', [], _ListCodec(_PrimitiveCodec.string)),
   cleanupCutoffDaysAgo<int>(.appConfig, 'cleanup.cutoffDaysAgo', -1),
-  cleanupDefaultsInitialized<bool>(.appConfig, 'cleanup.defaultsInitialized', false),
-
-  // Slideshow
-  slideshowTransition<bool>(.appConfig, 'slideshow.transition', true),
-  slideshowRepeat<bool>(.appConfig, 'slideshow.repeat', true),
-  slideshowDuration<int>(.appConfig, 'slideshow.duration', 5),
-  slideshowLook<SlideshowLook>(.appConfig, 'slideshow.look', SlideshowLook.contain, _EnumCodec(SlideshowLook.values)),
-  slideshowDirection<SlideshowDirection>(
-    .appConfig,
-    'slideshow.direction',
-    SlideshowDirection.forward,
-    _EnumCodec(SlideshowDirection.values),
-  );
+  cleanupDefaultsInitialized<bool>(.appConfig, 'cleanup.defaultsInitialized', false);
 
   final MetadataDomain domain;
   final String name;

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

@@ -29,9 +29,6 @@ enum StoreKey<T> {
   readonlyModeEnabled<bool>._(138),
   albumGridView<bool>._(140),
 
-  // Image viewer navigation settings
-  tapToNavigate<bool>._(141),
-
   // Experimental stuff
   enableBackup<bool>._(1003),
   useWifiForUploadVideos<bool>._(1004),

mobile/lib/infrastructure/entities/remote_asset.entity.dart

@@ -74,6 +74,5 @@ extension RemoteAssetEntityDataDomainEx on RemoteAssetEntityData {
     localId: localId,
     stackId: stackId,
     isEdited: isEdited,
-    deletedAt: deletedAt,
   );
 }

mobile/lib/infrastructure/repositories/metadata.repository.dart

@@ -139,13 +139,6 @@ extension<T extends Object> on MetadataDomain<T> {
             autoPlayVideo: repo._read(.viewerAutoPlayVideo),
             tapToNavigate: repo._read(.viewerTapToNavigate),
           ),
-          slideshow: .new(
-            transition: repo._read(.slideshowTransition),
-            repeat: repo._read(.slideshowRepeat),
-            duration: repo._read(.slideshowDuration),
-            look: repo._read(.slideshowLook),
-            direction: repo._read(.slideshowDirection),
-          ),
         );
       case .systemConfig:
         repo._systemConfig = .new(logLevel: repo._read(.logLevel));

mobile/lib/presentation/pages/drift_slideshow.page.dart

@@ -1,350 +0,0 @@
-import 'dart:async';
-import 'dart:math';
-import 'dart:ui';
-
-import 'package:auto_route/auto_route.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/enums.dart';
-import 'package:immich_mobile/domain/models/config/slideshow_config.dart';
-import 'package:immich_mobile/domain/services/timeline.service.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/extensions/scroll_extensions.dart';
-import 'package:immich_mobile/extensions/translate_extensions.dart';
-import 'package:immich_mobile/pages/common/settings.page.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/providers/asset_viewer/asset_viewer.provider.dart';
-import 'package:immich_mobile/providers/asset_viewer/video_player_provider.dart';
-import 'package:immich_mobile/providers/infrastructure/metadata.provider.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
-import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
-
-@RoutePage()
-class DriftSlideshowPage extends ConsumerStatefulWidget {
-  final TimelineService timeline;
-
-  const DriftSlideshowPage({super.key, required this.timeline});
-
-  @override
-  ConsumerState<DriftSlideshowPage> createState() => _DriftSlideshowPageState();
-}
-
-class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
-  late final SlideshowConfig _config;
-  late final PageController _pageController;
-  late final Stopwatch _stopwatch;
-  late Timer _timer;
-  late int _index;
-  late int _nextIndex;
-  bool _paused = false;
-  bool _showAppBar = false;
-
-  @override
-  initState() {
-    super.initState();
-    _config = ref.read(appConfigProvider.select((s) => s.slideshow));
-    final asset = ref.read(assetViewerProvider).currentAsset;
-    _index = asset == null ? 0 : widget.timeline.getIndex(asset.heroTag) ?? 0;
-    _pageController = PageController(initialPage: _index);
-    _stopwatch = Stopwatch();
-    _createTimer();
-    _updateNextIndex();
-
-    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
-  }
-
-  @override
-  dispose() {
-    _timer.cancel();
-    _stopwatch.stop();
-    _pageController.dispose();
-    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
-    super.dispose();
-  }
-
-  void _play() {
-    final asset = widget.timeline.getAssetSafe(_index)!;
-
-    if (asset.isImage) {
-      _createTimer();
-    } else if (ref.read(videoPlayerProvider(asset.heroTag)).status == VideoPlaybackStatus.paused) {
-      ref.read(videoPlayerProvider(asset.heroTag).notifier).play();
-    } else {
-      _nextPage();
-    }
-
-    _updateNextIndex();
-
-    setState(() {
-      _paused = false;
-    });
-  }
-
-  void _pause() {
-    _timer.cancel();
-    _stopwatch.stop();
-
-    final asset = widget.timeline.getAssetSafe(_index)!;
-
-    if (!asset.isImage) {
-      ref.read(videoPlayerProvider(asset.heroTag).notifier).pause();
-    }
-
-    setState(() {
-      _paused = true;
-    });
-  }
-
-  void _updateNextIndex() {
-    _nextIndex = switch (_config.direction) {
-      SlideshowDirection.forward => _index + 1,
-      SlideshowDirection.backward => _index - 1,
-      SlideshowDirection.shuffle => widget.timeline.getIndex(widget.timeline.getRandomAsset().heroTag)!,
-    };
-
-    if (!widget.timeline.hasRange(_nextIndex, 1)) {
-      widget.timeline.preloadAssets(_nextIndex);
-    }
-  }
-
-  void _nextPage() async {
-    if (_nextIndex < 0 || _nextIndex >= widget.timeline.totalAssets) {
-      if (_config.repeat) {
-        final wrapped = _config.direction == SlideshowDirection.forward ? 0 : widget.timeline.totalAssets - 1;
-        await widget.timeline.preloadAssets(wrapped);
-        _pageController.jumpToPage(wrapped);
-      }
-      return;
-    }
-
-    if (!widget.timeline.hasRange(_nextIndex, 1)) {
-      await widget.timeline.preloadAssets(_nextIndex);
-    }
-
-    if (_config.direction == SlideshowDirection.shuffle || !_config.transition) {
-      _pageController.jumpToPage(_nextIndex);
-    } else {
-      unawaited(_pageController.animateToPage(_nextIndex, duration: Durations.long2, curve: Curves.easeIn));
-    }
-  }
-
-  void _createTimer() {
-    _timer = Timer(Duration(milliseconds: _config.duration * 1000 - _stopwatch.elapsedMilliseconds), () {
-      _stopwatch.stop();
-      _stopwatch.reset();
-      _nextPage();
-    });
-
-    _stopwatch.start();
-  }
-
-  void _pageChanged(int page) {
-    final asset = widget.timeline.getAssetSafe(page)!;
-
-    setState(() {
-      _index = page;
-
-      if (!asset.isImage) {
-        _paused = false;
-      }
-    });
-
-    _timer.cancel();
-    _stopwatch.stop();
-    _stopwatch.reset();
-
-    if (!_paused && asset.isImage) {
-      _createTimer();
-    }
-
-    _updateNextIndex();
-  }
-
-  void _onTapUp() async {
-    await SystemChrome.setEnabledSystemUIMode(_showAppBar ? SystemUiMode.immersive : SystemUiMode.edgeToEdge);
-
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      setState(() {
-        _showAppBar = !_showAppBar;
-      });
-    });
-  }
-
-  Widget _getProgressBar(BuildContext context) {
-    final asset = widget.timeline.getAssetSafe(_index);
-
-    if (asset == null) {
-      return Container();
-    }
-
-    if (asset.isImage) {
-      final elapsed = _stopwatch.elapsedMilliseconds;
-      final duration = _config.duration * 1000;
-
-      return TweenAnimationBuilder(
-        key: Key(_index.toString()),
-        tween: Tween<double>(begin: elapsed / duration.toDouble(), end: _paused ? elapsed / duration.toDouble() : 1.0),
-        duration: Duration(milliseconds: _paused ? 1 : max(duration - elapsed, 1)),
-        builder: (context, value, _) => LinearProgressIndicator(
-          color: context.colorScheme.primary,
-          borderRadius: const BorderRadius.all(Radius.zero),
-          minHeight: 5,
-          value: value,
-        ),
-      );
-    } else {
-      return LinearProgressIndicator(
-        color: context.colorScheme.primary,
-        borderRadius: const BorderRadius.all(Radius.zero),
-        minHeight: 5,
-        value:
-            ref.watch(videoPlayerProvider(asset.heroTag).select((s) => s.position)).inMilliseconds /
-            asset.duration.inMilliseconds,
-      );
-    }
-  }
-
-  Widget _getBlur(BuildContext context, int index) {
-    final asset = widget.timeline.getAssetSafe(index);
-
-    if (asset == null) {
-      return Container();
-    }
-
-    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)),
-      ),
-    );
-  }
-
-  Widget _getPhotoView(BuildContext context, int index) {
-    final asset = widget.timeline.getAssetSafe(index);
-
-    if (asset == null) {
-      return const Center(child: ImmichLoadingIndicator());
-    }
-
-    final scale = _config.look == SlideshowLook.cover
-        ? PhotoViewComputedScale.covered
-        : PhotoViewComputedScale.contained;
-    final isCurrent = _index == index;
-    final imageProvider = getFullImageProvider(asset, size: context.sizeData);
-
-    if (asset.isImage) {
-      final zoomOut = index % 2 == 1;
-      final elapsed = _stopwatch.elapsedMilliseconds;
-      final duration = _config.duration * 1000;
-      final progress = zoomOut ? 1.0 - elapsed / duration.toDouble() : elapsed / duration.toDouble();
-
-      return TweenAnimationBuilder(
-        tween: Tween<double>(
-          begin: progress,
-          end: _paused
-              ? progress
-              : zoomOut
-              ? 0.0
-              : 1.0,
-        ),
-        duration: Duration(milliseconds: _paused ? 1 : max(duration - elapsed, 1)),
-        builder: (context, value, _) => PhotoView(
-          imageProvider: imageProvider,
-          index: index,
-          disableScaleGestures: true,
-          gaplessPlayback: true,
-          filterQuality: FilterQuality.high,
-          initialScale: scale * (1.0 + value / 10.0),
-          controller: PhotoViewController(),
-          onTapUp: (_, _, _) => _onTapUp(),
-        ),
-      );
-    } else {
-      final status = ref.watch(videoPlayerProvider(asset.heroTag).select((s) => s.status));
-      final position = ref.read(videoPlayerProvider(asset.heroTag)).position;
-
-      if (status == VideoPlaybackStatus.completed && isCurrent && position.inMicroseconds > 0) {
-        _nextPage();
-      } else if (status == VideoPlaybackStatus.playing) {
-        ref.read(videoPlayerProvider(asset.heroTag).notifier).setLoop(false);
-      }
-
-      return PhotoView.customChild(
-        onTapUp: (_, _, _) => _onTapUp(),
-        disableScaleGestures: true,
-        filterQuality: FilterQuality.high,
-        initialScale: scale,
-        child: NativeVideoViewer(
-          asset: asset,
-          isCurrent: isCurrent,
-          image: Image(image: imageProvider, fit: BoxFit.contain, alignment: Alignment.center),
-        ),
-      );
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: PreferredSize(
-        preferredSize: Size(AppBar().preferredSize.width, AppBar().preferredSize.height + 5),
-        child: IgnorePointer(
-          ignoring: !_showAppBar,
-          child: AnimatedOpacity(
-            opacity: _showAppBar ? 1.0 : 0.0,
-            duration: Durations.short2,
-            child: Column(
-              children: [
-                AppBar(
-                  backgroundColor: context.scaffoldBackgroundColor,
-                  title: Text("slideshow".t(context: context)),
-                  actions: [
-                    IconButton(
-                      onPressed: _paused ? _play : _pause,
-                      icon: Icon(_paused ? Icons.play_arrow : Icons.pause),
-                    ),
-                    IconButton(
-                      onPressed: () {
-                        _pause();
-                        context.pushRoute(SettingsSubRoute(section: SettingSection.assetViewer));
-                      },
-                      icon: const Icon(Icons.settings),
-                    ),
-                  ],
-                ),
-                _getProgressBar(context),
-              ],
-            ),
-          ),
-        ),
-      ),
-      extendBody: true,
-      extendBodyBehindAppBar: true,
-      backgroundColor: Colors.black,
-      body: PhotoViewGestureDetectorScope(
-        axis: Axis.horizontal,
-        child: PageView.builder(
-          controller: _pageController,
-          physics: const FastClampingScrollPhysics(),
-          itemCount: widget.timeline.totalAssets,
-          onPageChanged: _pageChanged,
-          itemBuilder: (context, index) => Stack(
-            children: [
-              if (_config.look == SlideshowLook.blurredBackground) _getBlur(context, index),
-              _getPhotoView(context, index),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

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

@@ -35,11 +35,10 @@ class BaseActionButton extends ConsumerWidget {
     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) {
-      final iconColor = this.iconColor ?? iconTheme.color ?? context.themeData.iconTheme.color;
-
       return IconButton(
         onPressed: onPressed,
         icon: Icon(iconData, size: iconSize, color: iconColor),
@@ -47,21 +46,17 @@ class BaseActionButton extends ConsumerWidget {
     }
 
     if (menuItem) {
-      final iconColor = this.iconColor;
+      final theme = context.themeData;
+      final effectiveIconColor = iconColor ?? theme.iconTheme.color ?? theme.colorScheme.onSurfaceVariant;
 
       return MenuItemButton(
-        style: MenuItemButton.styleFrom(
-          alignment: Alignment.centerLeft,
-          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
-        ),
-        leadingIcon: Icon(iconData, color: iconColor, size: 20),
+        style: MenuItemButton.styleFrom(alignment: Alignment.centerLeft, padding: const EdgeInsets.all(16)),
+        leadingIcon: Icon(iconData, color: effectiveIconColor),
         onPressed: onPressed,
-        child: Text(label, style: TextStyle(fontSize: 15, color: iconColor)),
+        child: Text(label, style: theme.textTheme.labelLarge?.copyWith(fontSize: 16, color: iconColor)),
       );
     }
 
-    final iconColor = this.iconColor ?? iconTheme.color ?? context.themeData.iconTheme.color;
-
     return ConstrainedBox(
       constraints: BoxConstraints(maxWidth: maxWidth),
       child: MaterialButton(

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

@@ -18,15 +18,8 @@ class DeletePermanentActionButton extends ConsumerWidget {
   final ActionSource source;
   final bool iconOnly;
   final bool menuItem;
-  final bool useShortLabel;
 
-  const DeletePermanentActionButton({
-    super.key,
-    required this.source,
-    this.iconOnly = false,
-    this.menuItem = false,
-    this.useShortLabel = false,
-  });
+  const DeletePermanentActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
 
   void _onTap(BuildContext context, WidgetRef ref) async {
     if (!context.mounted) {
@@ -71,7 +64,7 @@ class DeletePermanentActionButton extends ConsumerWidget {
     return BaseActionButton(
       maxWidth: 110.0,
       iconData: Icons.delete_forever,
-      label: useShortLabel ? "delete".t(context: context) : "delete_permanently".t(context: context),
+      label: "delete_permanently".t(context: context),
       iconOnly: iconOnly,
       menuItem: menuItem,
       onPressed: () => _onTap(context, ref),

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

@@ -1,55 +0,0 @@
-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 RestoreActionButton extends ConsumerWidget {
-  final ActionSource source;
-  final bool iconOnly;
-  final bool menuItem;
-
-  const RestoreActionButton({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).restoreTrash(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
-    if (source == ActionSource.viewer) {
-      EventStream.shared.emit(const ViewerReloadAssetEvent());
-    }
-
-    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 BaseActionButton(
-      iconData: Icons.history_rounded,
-      label: 'restore'.t(context: context),
-      iconOnly: iconOnly,
-      menuItem: menuItem,
-      onPressed: () => _onTap(context, ref),
-      maxWidth: 100.0,
-    );
-  }
-}

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

@@ -1,34 +0,0 @@
-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/providers/infrastructure/timeline.provider.dart';
-import 'package:immich_mobile/routing/router.dart';
-
-class SlideshowActionButton extends ConsumerWidget {
-  final bool iconOnly;
-  final bool menuItem;
-
-  const SlideshowActionButton({super.key, this.iconOnly = false, this.menuItem = false});
-
-  void _onTap(BuildContext context, WidgetRef ref) {
-    if (!context.mounted) {
-      return;
-    }
-
-    context.pushRoute(DriftSlideshowRoute(timeline: ref.read(timelineServiceProvider)));
-  }
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return BaseActionButton(
-      iconData: Icons.slideshow,
-      label: "slideshow".t(context: context),
-      iconOnly: iconOnly,
-      menuItem: menuItem,
-      onPressed: () => _onTap(context, ref),
-      maxWidth: 100,
-    );
-  }
-}

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

@@ -2,19 +2,15 @@ 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/services/timeline.service.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/add_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/edit_image_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/restore_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/providers/asset_viewer/asset_viewer.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/routes.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
@@ -37,31 +33,23 @@ class ViewerBottomBar extends ConsumerWidget {
     final showingDetails = ref.watch(assetViewerProvider.select((s) => s.showingDetails));
     final isInLockedView = ref.watch(inLockedViewProvider);
     final serverInfo = ref.watch(serverInfoProvider);
-    final isInTrash = ref.read(timelineServiceProvider).origin == TimelineOrigin.trash;
 
     final originalTheme = context.themeData;
 
     final actions = <Widget>[
-      if (isInTrash && isOwner && asset.hasRemote)
-        const RestoreActionButton(source: ActionSource.viewer)
-      else
-        const ShareActionButton(source: ActionSource.viewer),
+      const ShareActionButton(source: ActionSource.viewer),
 
       if (!isInLockedView) ...[
-        if (!isInTrash) ...[
-          if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
-          // edit sync was added in 2.6.0
-          if (asset.isEditable && serverInfo.serverVersion >= const SemVer(major: 2, minor: 6, patch: 0))
-            const EditImageActionButton(),
-          if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
-        ],
+        if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
+        // edit sync was added in 2.6.0
+        if (asset.isEditable && serverInfo.serverVersion >= const SemVer(major: 2, minor: 6, patch: 0))
+          const EditImageActionButton(),
+        if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
+
         if (isOwner) ...[
-          if (asset.isLocalOnly)
-            const DeleteLocalActionButton(source: ActionSource.viewer)
-          else if (asset.isTrashed)
-            const DeletePermanentActionButton(source: ActionSource.viewer, useShortLabel: true)
-          else
-            const DeleteActionButton(source: ActionSource.viewer, showConfirmation: true),
+          asset.isLocalOnly
+              ? const DeleteLocalActionButton(source: ActionSource.viewer)
+              : const DeleteActionButton(source: ActionSource.viewer, showConfirmation: true),
         ],
       ],
     ];

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

@@ -50,7 +50,7 @@ class ViewerKebabMenu extends ConsumerWidget {
       timelineOrigin: timelineOrigin,
     );
 
-    final menuChildren = ActionButtonBuilder.buildViewerKebabMenu(actionContext, context, ref);
+    final menuChildren = ActionButtonBuilder.buildViewerKebabMenu(actionContext, context);
 
     return MenuAnchor(
       consumeOutsideTap: true,

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

@@ -120,9 +120,6 @@ class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
                     },
                     flightShuttleBuilder: (context, animation, direction, from, to) {
                       void animationStatusListener(AnimationStatus status) {
-                        if (!mounted) {
-                          return;
-                        }
                         final heroInFlight = status == AnimationStatus.forward || status == AnimationStatus.reverse;
                         if (_hideIndicators != heroInFlight) {
                           setState(() => _hideIndicators = heroInFlight);

mobile/lib/routing/router.dart

@@ -60,7 +60,6 @@ import 'package:immich_mobile/presentation/pages/drift_place_detail.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_recently_taken.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_recently_added.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_remote_album.page.dart';
-import 'package:immich_mobile/presentation/pages/drift_slideshow.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_trash.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_user_selection.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_video.page.dart';
@@ -190,7 +189,6 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: AssetTroubleshootRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DownloadInfoRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: CleanupPreviewRoute.page, guards: [_authGuard, _duplicateGuard]),
-    AutoRoute(page: DriftSlideshowRoute.page, guards: [_authGuard, _duplicateGuard]),
     // required to handle all deeplinks in deep_link.service.dart
     // auto_route_library#1722
     RedirectRoute(path: '*', redirectTo: '/'),

mobile/lib/routing/router.gr.dart

@@ -1095,53 +1095,6 @@ class DriftSearchRoute extends PageRouteInfo<void> {
   );
 }
 
-/// generated route for
-/// [DriftSlideshowPage]
-class DriftSlideshowRoute extends PageRouteInfo<DriftSlideshowRouteArgs> {
-  DriftSlideshowRoute({
-    Key? key,
-    required TimelineService timeline,
-    List<PageRouteInfo>? children,
-  }) : super(
-         DriftSlideshowRoute.name,
-         args: DriftSlideshowRouteArgs(key: key, timeline: timeline),
-         initialChildren: children,
-       );
-
-  static const String name = 'DriftSlideshowRoute';
-
-  static PageInfo page = PageInfo(
-    name,
-    builder: (data) {
-      final args = data.argsAs<DriftSlideshowRouteArgs>();
-      return DriftSlideshowPage(key: args.key, timeline: args.timeline);
-    },
-  );
-}
-
-class DriftSlideshowRouteArgs {
-  const DriftSlideshowRouteArgs({this.key, required this.timeline});
-
-  final Key? key;
-
-  final TimelineService timeline;
-
-  @override
-  String toString() {
-    return 'DriftSlideshowRouteArgs{key: $key, timeline: $timeline}';
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-    if (other is! DriftSlideshowRouteArgs) return false;
-    return key == other.key && timeline == other.timeline;
-  }
-
-  @override
-  int get hashCode => key.hashCode ^ timeline.hashCode;
-}
-
 /// generated route for
 /// [DriftTrashPage]
 class DriftTrashRoute extends PageRouteInfo<void> {

mobile/lib/utils/action_button.utils.dart

@@ -21,13 +21,11 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_f
 import 'package:immich_mobile/presentation/widgets/action_buttons/open_in_browser_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/remove_from_lock_folder_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/restore_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/set_album_cover.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/set_profile_picture_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/similar_photos_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/slideshow_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';
@@ -74,7 +72,6 @@ enum ActionButtonType {
   similarPhotos,
   setProfilePicture,
   viewInTimeline,
-  slideshow,
   download,
   upload,
   openInBrowser,
@@ -84,7 +81,6 @@ enum ActionButtonType {
   moveToLockFolder,
   removeFromLockFolder,
   removeFromAlbum,
-  restoreTrash,
   trash,
   deleteLocal,
   deletePermanent,
@@ -116,17 +112,12 @@ enum ActionButtonType {
         context.isOwner && //
             !context.isInLockedView && //
             context.asset.hasRemote && //
-            context.isTrashEnabled && //
-            context.timelineOrigin != TimelineOrigin.trash,
-      ActionButtonType.restoreTrash =>
-        context.isOwner && //
-            !context.isInLockedView && //
-            context.asset.hasRemote && //
-            context.timelineOrigin == TimelineOrigin.trash,
+            context.isTrashEnabled,
       ActionButtonType.deletePermanent =>
         context.isOwner && //
-            context.asset.hasRemote && //
-            (!context.isTrashEnabled || context.timelineOrigin == TimelineOrigin.trash || context.isInLockedView),
+                context.asset.hasRemote && //
+                !context.isTrashEnabled ||
+            context.isInLockedView,
       ActionButtonType.delete =>
         context.isOwner && //
             !context.isInLockedView && //
@@ -181,7 +172,6 @@ enum ActionButtonType {
             context.timelineOrigin != TimelineOrigin.localAlbum &&
             context.isOwner,
       ActionButtonType.cast => context.isCasting || context.asset.hasRemote,
-      ActionButtonType.slideshow => true,
     };
   }
 
@@ -203,7 +193,6 @@ enum ActionButtonType {
         iconOnly: iconOnly,
         menuItem: menuItem,
       ),
-      ActionButtonType.slideshow => SlideshowActionButton(iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.archive => ArchiveActionButton(source: context.source, iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.unarchive => UnArchiveActionButton(
         source: context.source,
@@ -212,11 +201,6 @@ enum ActionButtonType {
       ),
       ActionButtonType.download => DownloadActionButton(source: context.source, iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.trash => TrashActionButton(source: context.source, iconOnly: iconOnly, menuItem: menuItem),
-      ActionButtonType.restoreTrash => RestoreActionButton(
-        source: context.source,
-        iconOnly: iconOnly,
-        menuItem: menuItem,
-      ),
       ActionButtonType.deletePermanent => DeletePermanentActionButton(
         source: context.source,
         iconOnly: iconOnly,
@@ -308,7 +292,6 @@ enum ActionButtonType {
     ActionButtonType.moveToLockFolder => 10,
     ActionButtonType.deleteLocal => 10,
     ActionButtonType.delete => 10,
-    ActionButtonType.restoreTrash => 10,
     // 90: advancedInfo
     ActionButtonType.advancedInfo => 90,
     // 1: others
@@ -326,15 +309,13 @@ class ActionButtonBuilder {
     ActionButtonType.delete,
     ActionButtonType.archive,
     ActionButtonType.unarchive,
-    ActionButtonType.restoreTrash,
-    ActionButtonType.deletePermanent,
   };
 
   static List<Widget> build(ActionButtonContext context) {
     return _actionTypes.where((type) => type.shouldShow(context)).map((type) => type.buildButton(context)).toList();
   }
 
-  static List<Widget> buildViewerKebabMenu(ActionButtonContext context, BuildContext buildContext, WidgetRef ref) {
+  static List<Widget> buildViewerKebabMenu(ActionButtonContext context, BuildContext buildContext) {
     final visibleButtons = defaultViewerKebabMenuOrder
         .where((type) => !defaultViewerBottomBarButtons.contains(type) && type.shouldShow(context))
         .toList();
@@ -350,7 +331,7 @@ class ActionButtonBuilder {
       if (lastGroup != null && type.kebabMenuGroup != lastGroup) {
         result.add(const Divider(height: 1));
       }
-      result.add(type.buildButton(context, buildContext, false, true).build(buildContext, ref));
+      result.add(type.buildButton(context, buildContext, false, true));
       lastGroup = type.kebabMenuGroup;
     }
 

mobile/lib/widgets/common/remote_album_sliver_app_bar.dart

@@ -18,7 +18,6 @@ import 'package:immich_mobile/providers/infrastructure/current_album.provider.da
 import 'package:immich_mobile/providers/infrastructure/remote_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
-import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/widgets/album/remote_album_shared_user_icons.dart';
 
 class RemoteAlbumSliverAppBar extends ConsumerStatefulWidget {
@@ -90,10 +89,6 @@ class _MesmerizingSliverAppBarState extends ConsumerState<RemoteAlbumSliverAppBa
               onPressed: () => context.maybePop(),
             ),
       actions: [
-        IconButton(
-          onPressed: () => context.pushRoute(DriftSlideshowRoute(timeline: ref.read(timelineServiceProvider))),
-          icon: Icon(Icons.slideshow_outlined, color: actionIconColor, shadows: actionIconShadows),
-        ),
         if (currentAlbum.isActivityEnabled && currentAlbum.isShared)
           IconButton(
             icon: Icon(Icons.chat_outlined, color: actionIconColor, shadows: actionIconShadows),

mobile/lib/widgets/settings/asset_viewer_settings/asset_viewer_settings.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:immich_mobile/widgets/settings/asset_viewer_settings/image_viewer_quality_setting.dart';
 import 'package:immich_mobile/widgets/settings/asset_viewer_settings/image_viewer_tap_to_navigate_setting.dart';
 import 'package:immich_mobile/widgets/settings/asset_viewer_settings/video_viewer_settings.dart';
-import 'package:immich_mobile/widgets/settings/asset_viewer_settings/slideshow_settings.dart';
 import 'package:immich_mobile/widgets/settings/settings_sub_page_scaffold.dart';
 
 class AssetViewerSettings extends StatelessWidget {
@@ -14,7 +13,6 @@ class AssetViewerSettings extends StatelessWidget {
       const ImageViewerQualitySetting(),
       const ImageViewerTapToNavigateSetting(),
       const VideoViewerSettings(),
-      const SlideshowSettings(),
     ];
 
     return SettingsSubPageScaffold(settings: assetViewerSetting, showDivider: true);

mobile/lib/widgets/settings/asset_viewer_settings/slideshow_settings.dart

@@ -1,123 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.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/metadata.provider.dart';
-import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
-import 'package:immich_mobile/widgets/settings/settings_radio_list_tile.dart';
-import 'package:immich_mobile/widgets/settings/settings_slider_list_tile.dart';
-import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
-import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
-
-class SlideshowSettings extends HookConsumerWidget {
-  const SlideshowSettings({super.key});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final slideshow = ref.read(appConfigProvider).slideshow;
-    final useTransition = useState(slideshow.transition);
-    final useRepeat = useState(slideshow.repeat);
-    final useDuration = useState(slideshow.duration);
-    final useLook = useState(slideshow.look);
-    final useDirection = useState(slideshow.direction);
-
-    useValueChanged<bool, void>(useTransition.value, (_, __) {
-      ref.read(metadataProvider).write(.slideshowTransition, useTransition.value);
-    });
-    useValueChanged<bool, void>(useRepeat.value, (_, __) {
-      ref.read(metadataProvider).write(.slideshowRepeat, useRepeat.value);
-    });
-    useValueChanged<int, void>(useDuration.value, (_, __) {
-      ref.read(metadataProvider).write(.slideshowDuration, useDuration.value);
-    });
-    useValueChanged<SlideshowLook, void>(useLook.value, (_, __) {
-      ref.read(metadataProvider).write(.slideshowLook, useLook.value);
-    });
-    useValueChanged<SlideshowDirection, void>(useDirection.value, (_, __) {
-      ref.read(metadataProvider).write(.slideshowDirection, useDirection.value);
-    });
-
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        SettingGroupTitle(
-          title: 'slideshow'.t(context: context),
-          icon: Icons.slideshow_outlined,
-        ),
-        SettingsSwitchListTile(
-          valueNotifier: useTransition,
-          title: "show_slideshow_transition".t(context: context),
-          enabled: useDirection.value != SlideshowDirection.shuffle,
-        ),
-        SettingsSwitchListTile(
-          valueNotifier: useRepeat,
-          title: "slideshow_repeat".t(context: context),
-          subtitle: "slideshow_repeat_description".t(context: context),
-        ),
-        SettingsSliderListTile(
-          valueNotifier: useDuration,
-          text: "duration".t(context: context),
-          minValue: 5,
-          noDivisons: 5,
-          maxValue: 30,
-        ),
-        Padding(
-          padding: const EdgeInsets.only(top: 20),
-          child: SettingsSubTitle(title: 'look'.t(context: context)),
-        ),
-        SettingsRadioListTile(
-          groups: [
-            SettingsRadioGroup(
-              title: 'contain'.t(context: context),
-              value: SlideshowLook.contain,
-            ),
-            SettingsRadioGroup(
-              title: 'cover'.t(context: context),
-              value: SlideshowLook.cover,
-            ),
-            SettingsRadioGroup(
-              title: 'blurred_background'.t(context: context),
-              value: SlideshowLook.blurredBackground,
-            ),
-          ],
-          groupBy: useLook.value,
-          onRadioChanged: (value) {
-            if (value != null) {
-              useLook.value = value;
-            }
-          },
-        ),
-        Padding(
-          padding: const EdgeInsets.only(top: 20),
-          child: SettingsSubTitle(title: 'direction'.t(context: context)),
-        ),
-        Padding(
-          padding: const EdgeInsets.only(bottom: 32),
-          child: SettingsRadioListTile(
-            groups: [
-              SettingsRadioGroup(
-                title: 'forward'.t(context: context),
-                value: SlideshowDirection.forward,
-              ),
-              SettingsRadioGroup(
-                title: 'backward'.t(context: context),
-                value: SlideshowDirection.backward,
-              ),
-              SettingsRadioGroup(
-                title: 'shuffle'.t(context: context),
-                value: SlideshowDirection.shuffle,
-              ),
-            ],
-            groupBy: useDirection.value,
-            onRadioChanged: (value) {
-              if (value != null) {
-                useDirection.value = value;
-              }
-            },
-          ),
-        ),
-      ],
-    );
-  }
-}

mobile/test/utils_legacy/action_button_utils_test.dart

@@ -3,7 +3,6 @@ import 'package:flutter_test/flutter_test.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/services/timeline.service.dart';
 import 'package:immich_mobile/utils/action_button.utils.dart';
 
 LocalAsset createLocalAsset({
@@ -38,7 +37,6 @@ RemoteAsset createRemoteAsset({
   DateTime? updatedAt,
   DateTime? uploadedAt,
   bool isFavorite = false,
-  DateTime? deletedAt,
 }) {
   return RemoteAsset(
     id: 'remote-id',
@@ -52,7 +50,6 @@ RemoteAsset createRemoteAsset({
     uploadedAt: uploadedAt ?? DateTime.now(),
     isFavorite: isFavorite,
     isEdited: false,
-    deletedAt: deletedAt,
   );
 }
 
@@ -461,62 +458,6 @@ void main() {
 
         expect(ActionButtonType.trash.shouldShow(context), isFalse);
       });
-
-      test('should not show when asset is already trashed', () {
-        final remoteAsset = createRemoteAsset(deletedAt: DateTime(2024));
-        final context = ActionButtonContext(
-          asset: remoteAsset,
-          isOwner: true,
-          isArchived: false,
-          isTrashEnabled: true,
-          isInLockedView: false,
-          currentAlbum: null,
-          advancedTroubleshooting: false,
-          isStacked: false,
-          source: ActionSource.viewer,
-          timelineOrigin: TimelineOrigin.trash,
-        );
-
-        expect(ActionButtonType.trash.shouldShow(context), isFalse);
-      });
-    });
-
-    group('restoreTrash button', () {
-      test('should show when owner, not locked, has remote, and is in trash timeline', () {
-        final remoteAsset = createRemoteAsset();
-        final context = ActionButtonContext(
-          asset: remoteAsset,
-          isOwner: true,
-          isArchived: false,
-          isTrashEnabled: true,
-          isInLockedView: false,
-          currentAlbum: null,
-          advancedTroubleshooting: false,
-          isStacked: false,
-          source: ActionSource.timeline,
-          timelineOrigin: TimelineOrigin.trash,
-        );
-
-        expect(ActionButtonType.restoreTrash.shouldShow(context), isTrue);
-      });
-
-      test('should not show when not in trash timeline', () {
-        final remoteAsset = createRemoteAsset();
-        final context = ActionButtonContext(
-          asset: remoteAsset,
-          isOwner: true,
-          isArchived: false,
-          isTrashEnabled: false,
-          isInLockedView: false,
-          currentAlbum: null,
-          advancedTroubleshooting: false,
-          isStacked: false,
-          source: ActionSource.timeline,
-          timelineOrigin: TimelineOrigin.main,
-        );
-
-        expect(ActionButtonType.restoreTrash.shouldShow(context), isFalse);
-      });
     });
 
     group('deletePermanent button', () {
@@ -553,24 +494,6 @@ void main() {
 
         expect(ActionButtonType.deletePermanent.shouldShow(context), isFalse);
       });
-
-      test('should show when asset is trashed even with trash enabled', () {
-        final remoteAsset = createRemoteAsset(deletedAt: DateTime(2024));
-        final context = ActionButtonContext(
-          asset: remoteAsset,
-          isOwner: true,
-          isArchived: false,
-          isTrashEnabled: true,
-          isInLockedView: false,
-          currentAlbum: null,
-          advancedTroubleshooting: false,
-          isStacked: false,
-          source: ActionSource.viewer,
-          timelineOrigin: TimelineOrigin.trash,
-        );
-
-        expect(ActionButtonType.deletePermanent.shouldShow(context), isTrue);
-      });
     });
 
     group('delete button', () {

readme_i18n/README_ar_JO.md

@@ -37,24 +37,29 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ اتبع دائمًا خطة النسخ الاحتياطي [١-٢-٣](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) لصورك ومقاطع الفيديو الثمينة الخاصة بك
->
+## تنصل
 
-> [!NOTE]
-> يمكنك العثور على الوثائق الرئيسية، بما في ذلك أدلة التثبيت، على https://immich.app/
+- ⚠️ هذا التطبيق قيد التطوير النشط للغاية
+- ⚠️ توقع الأخطاء والتغييرات العاجلة
+- ⚠️ **لا تستخدم التطبيق باعتباره الطريقة الوحيدة لتخزين الصور ومقاطع الفيديو الخاصة بك**
+- ⚠️ اتبع دائمًا خطة النسخ الاحتياطي [١-٢-٣](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) لصورك ومقاطع الفيديو الثمينة الخاصة بك
 
-## روابط
 
-- [الوثائق الرسمية](https://docs.immich.app/)
+## محتوى
+
+- [الوثائق الرسمية](https://docs.immich.app)
+- [خريطة الطريق](https://github.com/orgs/immich-app/projects/1)
+- [تجريبي](#demo)
+- [سمات](#features)
 - [مقدمة](https://docs.immich.app/overview/introduction)
 - [تعليمات التحميل](https://docs.immich.app/install/requirements)
-- [خريطة الطريق](https://immich.app/roadmap)
-- [تجريبي](#تجريبي)
-- [سمات](#سمات)
-- [الترجمات](https://docs.immich.app/developer/translations)
 - [قواعد المساهمة](https://docs.immich.app/overview/support-the-project)
 
+## توثيق
+
+يمكنك العثور على الوثائق الرئيسية، بما في ذلك أدلة التثبيت، هنا 
+https://immich.app
+
 ## تجريبي
 
 يمكنك الوصول إلى العرض التوضيحي على الويب على

readme_i18n/README_ca_ES.md

@@ -37,24 +37,26 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </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!
->
+## Avís legal
 
-> [!NOTE]
-> Podeu trobar la documentació principal, incloent les guies d'instal·lació, a https://immich.app/.
+- ⚠️ El projecte està en desenvolupament **molt actiu**.
+- ⚠️ Espereu errors i canvis que poden trencar coses.
+- ⚠️ **No utilitzeu l'aplicació com a única manera de guardar les vostres fotos i vídeos!**
 
 ## Contingut
 
-- [Documentació](https://docs.immich.app/)
-- [Introducció](https://docs.immich.app/overview/introduction)
-- [Instal·lació](https://docs.immich.app/install/requirements)
-- [Mapa de ruta](https://immich.app/roadmap)
+- [Documentació oficial](https://docs.immich.app)
+- [Mapa de ruta](https://github.com/orgs/immich-app/projects/1)
 - [Demo](#demo)
 - [Funcionalitats](#funcionalitats)
-- [Traduccions](https://docs.immich.app/developer/translations)
+- [Introducció](https://docs.immich.app/overview/introduction)
+- [Instal·lació](https://docs.immich.app/install/requirements)
 - [Directrius de contribució](https://docs.immich.app/overview/support-the-project)
 
+## Documentació
+
+Podeu trobar la documentació principal, incloent les guies d'instal·lació, a https://immich.app/.
+
 ## Demo
 
 Podeu accedir a la demostració web a https://demo.immich.app. Per a l'aplicació mòbil, podeu utilitzar `https://demo.immich.app` com a "URL de punt final del servidor".

readme_i18n/README_de_DE.md

@@ -38,9 +38,7 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ Befolge immer die [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) Backup-Regel für deine wertvollen Fotos und Videos!
->
+- ⚠️ Befolge immer die [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) Backup-Regel für deine wertvollen Fotos und Videos!
 
 > [!NOTE]
 > Die Hauptdokumentation, einschließlich der Installationsanleitungen, befinden sich unter https://immich.app/.
@@ -51,7 +49,7 @@
 - [Offizielle Dokumentation](https://docs.immich.app)
 - [Über Immich](https://docs.immich.app/overview/introduction)
 - [Installation](https://docs.immich.app/install/requirements)
-- [Roadmap](https://immich.app/roadmap)
+- [Roadmap](https://github.com/orgs/immich-app/projects/1)
 - [Demo](#demo)
 - [Funktionen](#funktionen)
 - [Übersetzungen](https://docs.immich.app/developer/translations)

readme_i18n/README_es_ES.md

@@ -37,24 +37,27 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ Siempre sigue el plan de backups [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) para tus fotos y videos.
->
+## Advertencia
 
-> [!NOTE]
-> Puedes encontrar la documentación oficial, incluidas las guías de instalación, en <https://immich.app/>.
+- ⚠️ El proyecto está en **activo desarrollo**.
+- ⚠️ Es probable que haya errores y cambios disruptivos.
+- ⚠️ **¡No utilices la aplicación como única forma de almacenar tus fotos y videos!**
+- ⚠️ Siempre sigue el plan de backups [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) para tus fotos y videos.
 
 ## Contenido
 
-- [Documentación](https://docs.immich.app/)
-- [Introducción](https://docs.immich.app/overview/introduction)
-- [Instalación](https://docs.immich.app/install/requirements)
-- [Hoja de ruta](https://immich.app/roadmap)
+- [Documentación oficial](https://docs.immich.app)
+- [Hoja de ruta](https://github.com/orgs/immich-app/projects/1)
 - [Demo](#demo)
 - [Funciones](#funciones)
-- [Traducciones](https://docs.immich.app/developer/translations)
+- [Introducción](https://docs.immich.app/overview/introduction)
+- [Instalación](https://docs.immich.app/install/requirements)
 - [Directrices para contribuir](https://docs.immich.app/overview/support-the-project)
 
+## Documentación
+
+Puedes encontrar la documentación oficial, incluidas las guías de instalación, en <https://immich.app/>.
+
 ## Demo
 
 Puedes acceder a la demostración web en <https://demo.immich.app>. Para la aplicación móvil, puedes usar `https://demo.immich.app` en la `URL del servidor`.

readme_i18n/README_fr_FR.md

@@ -37,24 +37,27 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ Ayez toujours un plan de sauvegarde en [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) pour vos précieuses photos et vidéos !
->
+## Clause de non-responsabilité
 
-> [!NOTE]
-> Vous pouvez trouver la documentation principale ainsi que les guides d'installation sur https://immich.app/.
+- ⚠️ Le projet est en **très fort** développement.
+- ⚠️ Attendez-vous à rencontrer des bogues et des changements importants.
+- ⚠️ **N'utilisez pas cette application comme seul support de sauvegarde de vos photos et vos vidéos.**
+- ⚠️ Ayez toujours un plan de sauvegarde en [3-2-1](https://www.seagate.com/fr/fr/blog/what-is-a-3-2-1-backup-strategy/) pour vos précieuses photos et vidéos !
 
 ## Sommaire
 
-- [Documentation](https://docs.immich.app/)
-- [Introduction](https://docs.immich.app/overview/introduction)
-- [Installation](https://docs.immich.app/install/requirements)
-- [Feuille de route](https://immich.app/roadmap)
+- [Documentation officielle](https://docs.immich.app)
+- [Feuille de route](https://github.com/orgs/immich-app/projects/1)
 - [Démo](#démo)
 - [Fonctionnalités](#fonctionnalités)
-- [Traductions](https://docs.immich.app/developer/translations)
+- [Introduction](https://docs.immich.app/overview/introduction)
+- [Installation](https://docs.immich.app/install/requirements)
 - [Contribution](https://docs.immich.app/overview/support-the-project)
 
+## Documentation
+
+Vous pouvez trouver la documentation principale ainsi que les guides d'installation sur https://immich.app/.
+
 ## Démo
 
 Vous pouvez accéder à la démo en ligne sur https://demo.immich.app. Pour l'application mobile, vous pouvez utiliser `https://demo.immich.app` dans le champ `URL du point d'accès au serveur`

readme_i18n/README_it_IT.md

@@ -38,9 +38,12 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ Segui sempre la regola di backup [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) per proteggere i tuoi ricordi e le foto a cui tieni!
->
+## Avvertenze
+
+- ⚠️ Il progetto è in fase di sviluppo **molto attivo**.  
+- ⚠️ Possono esserci bug o cambiamenti radicali, che possono non essere retrocompatibili (breaking changes).
+- ⚠️ **Non usare l’app come unico modo per archiviare le tue foto e i tuoi video.**  
+- ⚠️ Segui sempre la regola di backup [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) per proteggere i tuoi ricordi e le foto a cui tieni!  
 
 > [!NOTE]  
 > La documentazione principale, comprese le guide all’installazione, si trova su https://immich.app/.  

readme_i18n/README_ja_JP.md

@@ -36,24 +36,27 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ 大切な写真やビデオは、常に [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) のバックアッププランに従ってください！
->
+## 免責事項
 
-> [!NOTE]
-> インストールガイドを含む主なドキュメントは、https://immich.app/ です。
+- ⚠️ このプロジェクトは **非常に活発に** 開発中です。
+- ⚠️ バグの存在や変更が入ることも予想されます。
+- ⚠️ **写真やビデオを保存する唯一の方法としてこのアプリを使用しないでください。**
+- ⚠️ 大切な写真やビデオは、常に [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) のバックアッププランに従ってください！
 
 ## コンテンツ
 
-- [公式ドキュメント](https://docs.immich.app/)
-- [紹介](https://docs.immich.app/overview/introduction)
-- [インストール](https://docs.immich.app/install/requirements)
-- [ロードマップ](https://immich.app/roadmap)
+- [公式ドキュメント](https://docs.immich.app)
+- [ロードマップ](https://github.com/orgs/immich-app/projects/1)
 - [デモ](#デモ)
 - [機能](#機能)
-- [翻訳](https://docs.immich.app/developer/translations)
+- [紹介](https://docs.immich.app/overview/introduction)
+- [インストール](https://docs.immich.app/install/requirements)
 - [コントリビューションガイド](https://docs.immich.app/overview/support-the-project)
 
+## ドキュメント
+
+インストールガイドを含む主なドキュメントは、https://immich.app/ です。
+
 ## デモ
 
 web デモは https://demo.immich.app からアクセスできます。モバイルアプリの場合、`Server Endpoint URL` には `https://demo.immich.app` を使用することができます

readme_i18n/README_ko_KR.md

@@ -39,9 +39,12 @@
 
 </p>
 
-> [!WARNING]
-> ⚠️ 중요한 사진과 동영상을 위해 항상 [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) 백업 계획을 따르세요!
->
+## 주의 사항
+
+- ⚠️ 이 프로젝트는 **매우 활발하게** 개발 중입니다.
+- ⚠️ 버그와 잦은 변경 사항이 있을 것으로 예상됩니다.
+- ⚠️ **사진과 동영상을 이 앱에만 단독으로 저장하지 마세요.**
+- ⚠️ 중요한 사진과 동영상을 위해 항상 [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) 백업 계획을 따르세요!
 
 > [!NOTE]
 > 설치하는 방법을 포함한 주요 문서는 https://immich.app/ 에서 확인할 수 있습니다.
@@ -54,7 +57,7 @@
 - [로드맵](https://immich.app/roadmap)
 - [데모](#데모)
 - [기능](#기능)
-- [번역](https://docs.immich.app/developer/translations)
+- [번역](https://docs.immich.app/developer/tranlations)
 - [기여](https://docs.immich.app/overview/support-the-project)
 
 ## 데모

readme_i18n/README_nl_NL.md

@@ -37,24 +37,27 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ Volg altijd het [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) backup plan voor je kostbare foto's en video's!
->
+## Disclaimer
 
-> [!NOTE]
-> De belangrijkste documentatie, inclusief installatie handleidingen, zijn te vinden op https://immich.app/.
+- ⚠️ Het project wordt momenteel **zeer actief** ontwikkeld.
+- ⚠️ Verwacht bugs en ingrijpende wijzigingen.
+- ⚠️ **Gebruik de app niet als de enige manier om uw foto's en video's op te slaan.**
+- ⚠️ Volg altijd het [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) backup plan voor je kostbare foto's en video's!
 
 ## Inhoud
 
-- [Officiële documentatie](https://docs.immich.app/)
-- [Introductie](https://docs.immich.app/overview/introduction)
-- [Installatie](https://docs.immich.app/install/requirements)
-- [Toekomstplannen](https://immich.app/roadmap)
+- [Officiële documentatie](https://docs.immich.app)
+- [Toekomstplannen](https://github.com/orgs/immich-app/projects/1)
 - [Demo](#demo)
 - [Functies](#functies)
-- [Vertalingen](https://docs.immich.app/developer/translations)
+- [Introductie](https://docs.immich.app/overview/introduction)
+- [Installatie](https://docs.immich.app/install/requirements)
 - [Richtlijnen voor bijdragen](https://docs.immich.app/overview/support-the-project)
 
+## Documentatie
+
+De belangrijkste documentatie, inclusief installatie handleidingen, zijn te vinden op https://immich.app/.
+
 ## Demo
 
 Je kunt de demo [hier](https://demo.immich.app/) bekijken. Voor de mobiele app kun je gebruik maken van `https://demo.immich.app` voor de `Server Endpoint URL`.

readme_i18n/README_pt_BR.md

@@ -40,9 +40,16 @@
 
 </p>
 
-> [!WARNING]
-> ⚠️ Sempre siga o plano [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) de backup para as suas mídias preciosas!
->
+## Avisos
+
+- ⚠️ Este projeto está sob **desenvolvimento constante**.
+- ⚠️ Podem ocorrer bugs e _breaking changes_ (alterações que quebram a
+  compatibilidade com versões anteriores).
+- ⚠️ **Não use esta solução como a única forma de fazer backup das suas fotos e
+  vídeos.**
+- ⚠️ Sempre siga o plano
+  [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) de backup
+  para as suas mídias preciosas!
 
 > [!NOTE]
 > Você pode encontrar a documentação principal, incluindo guias de instalação, em https://immich.app/.

readme_i18n/README_ru_RU.md

@@ -39,9 +39,13 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ Всегда следуйте [плану резервного копирования «3-2-1»](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) для ваших драгоценных фотографий и видео!
->
+## Предупреждение
+
+- ⚠️ Этот проект находится **в очень активной** разработке.
+- ⚠️ Ожидайте недоработки и глобальные изменения.
+- ⚠️ **Не используйте это приложение как единственное хранилище своих фото и видео.**
+- ⚠️ Всегда следуйте [плану резервного копирования «3-2-1»](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/ "Стратегии резервного копирования: Почему стратегия резервного копирования «3-2-1» — лучшая") для ваших драгоценных фотографий и видео!
+
 
 > [!NOTE]
 > Инструкции по установке и документация по ссылке https://immich.app/
@@ -51,7 +55,7 @@
 - [Официальная документация](https://docs.immich.app)
 - [Введение](https://docs.immich.app/overview/introduction)
 - [Установка](https://docs.immich.app/install/requirements)
-- [План разработки](https://immich.app/roadmap)
+- [План разработки](https://github.com/orgs/immich-app/projects/1)
 - [Демо](#demo)
 - [Возможности](#features)
 - [Перевод](https://docs.immich.app/developer/translations)

readme_i18n/README_sv_SE.md

@@ -38,24 +38,27 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ Tillämpa alltid [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/)-strategin för säkerhetskopiering av dina foton och videor!
->
+## Ansvarsfriskrivning
 
-> [!NOTE]
-> Dokumentation och installationsguider hittas på https://immich.app/.
+- ⚠️ Projektet är under **mycket aktiv** utveckling.
+- ⚠️ Förvänta dig buggar och brytande förändringar.
+- ⚠️ **Använd inte appen som enda lagringssätt för dina foton och videor.**
+- ⚠️ Tillämpa alltid [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/)-strategin för säkerhetskopiering av dina foton och videor!
 
 ## Innehåll
 
-- [Officiell Dokumentation](https://docs.immich.app/)
+- [Officiell Dokumentation](https://docs.immich.app)
+- [Roadmap](https://github.com/orgs/immich-app/projects/1)
+- [Demo](#demo)
+- [Funktioner](#features)
 - [Introduktion](https://docs.immich.app/overview/introduction)
 - [Installation](https://docs.immich.app/install/requirements)
-- [Roadmap](https://immich.app/roadmap)
-- [Demo](#demo)
-- [Funktioner](#funktioner)
-- [Översättningar](https://docs.immich.app/developer/translations)
 - [Riktlinjer för Bidrag](https://docs.immich.app/overview/support-the-project)
 
+## Dokumentation
+
+Dokumentation och installationsguider hittas på https://imiich.app/.
+
 ## Demo
 
 Ett webb-demo finns att testa på https://demo.immich.app. Använd `https://demo.immich.app` i mobilappen som `Server Endpoint URL`

readme_i18n/README_tr_TR.md

@@ -37,24 +37,26 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </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!
->
+## Feragatname
 
-> [!NOTE]
-> Kurulum dahil olmak üzere resmi belgeleri https://immich.app/ adresinde bulabilirsiniz.
+- ⚠️ Proje **çok aktif** bir şekilde geliştirilmektedir.
+- ⚠️ Hatalar ve uygulama yapısını bozan değişiklikler olabilir.
+- ⚠️ **Uygulamayı, fotoğraflarınızı ve videolarınızı saklamanın tek yöntemi olarak kullanmayın!**
 
-## Bağlantılar
+## Content
 
-- [Resmi Belgeler](https://docs.immich.app/)
-- [Giriş](https://docs.immich.app/overview/introduction)
-- [Kurulum](https://docs.immich.app/install/requirements)
-- [Yol Haritası](https://immich.app/roadmap)
+- [Resmi Belgeler](https://docs.immich.app)
+- [Yol Haritası](https://github.com/orgs/immich-app/projects/1)
 - [Demo](#demo)
 - [Özellikler](#özellikler)
-- [Çeviriler](https://docs.immich.app/developer/translations)
+- [Giriş](https://docs.immich.app/overview/introduction)
+- [Kurulum](https://docs.immich.app/install/requirements)
 - [Katkı Sağlama Rehberi](https://docs.immich.app/overview/support-the-project)
 
+## Belgeler
+
+Kurulum dahil olmak üzere resmi belgeleri https://immich.app/ adresinde bulabilirsiniz.
+
 ## Demo
 
 Web demo adresi: https://demo.immich.app. Mobil uygulama için `Server Endpoint URL` olarak `https://demo.immich.app` adresini kullanabilirsiniz.

readme_i18n/README_uk_UA.md

@@ -39,9 +39,12 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-> [!WARNING]
-> ⚠️ Завжди дотримуйтесь [плану резервного копіювання 3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) для ваших дорогоцінних фотографій та відео!
->
+## Застереження
+
+- ⚠️ Цей проєкт перебуває **в дуже активній** розробці.
+- ⚠️ Очікуйте безліч помилок і глобальних змін.
+- ⚠️ **Не використовуйте цей застосунок як єдине сховище своїх фото та відео.**
+- ⚠️ Завжди дотримуйтесь [плану резервного копіювання 3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) для ваших дорогоцінних фотографій та відео!
 
 > [!NOTE]
 > Основну документацію, зокрема посібники зі встановлення, можна знайти за адресою https://immich.app/.

readme_i18n/README_vi_VN.md

@@ -41,9 +41,12 @@
 
 </p>
 
-> [!WARNING]
-> ⚠️ Luôn tuân thủ kế hoạch sao lưu [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) cho những bức ảnh và video quý giá của bạn!
->
+## Tuyên bố miễn trừ trách nhiệm
+
+- ⚠️ Dự án đang được phát triển **rất tích cực**.
+- ⚠️ Dự kiến ​​sẽ có lỗi và thay đổi đột ngột.
+- ⚠️ **Không sử dụng ứng dụng như là cách duy nhất để lưu trữ ảnh và video của bạn.**
+- ⚠️ Luôn tuân thủ kế hoạch sao lưu [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) cho những bức ảnh và video quý giá của bạn!
 
 > [!NOTE]
 > Bạn có thể tìm thấy tài liệu chính, bao gồm hướng dẫn cài đặt, tại https://immich.app/.

readme_i18n/README_zh_CN.md

@@ -43,9 +43,12 @@
 
 </p>
 
-> [!WARNING]
-> ⚠️ 为了您宝贵的照片与视频，请始终遵守 [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) 备份方案！
->
+## 免责声明
+
+- ⚠️ 本项目正在 **非常活跃** 地开发中。
+- ⚠️ 可能存在 bug 或者随时有重大变更。
+- ⚠️ **不要把本软件作为您存储照片或视频的唯一方式。**
+- ⚠️ 为了您宝贵的照片与视频，请始终遵守 [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) 备份方案！
 
 > [!NOTE]
 > 完整的项目文档以及安装教程请参见：<https://immich.app/>。

server/src/repositories/job.repository.ts

@@ -171,8 +171,8 @@ export class JobRepository {
         options: this.getJobOptions(item) || undefined,
       } as JobItem & { data: any; options: JobsOptions | undefined };
 
-      if (job.options?.jobId || job.options?.deduplication) {
-        // need to use add() instead of addBulk() for jobId/deduplication to take effect
+      if (job.options?.jobId) {
+        // need to use add() instead of addBulk() for jobId deduplication
         promises.push(this.getQueue(queueName).add(item.name, item.data, job.options));
       } else {
         itemsByQueue[queueName] = itemsByQueue[queueName] || [];
@@ -230,13 +230,10 @@ export class JobRepository {
         return { priority: 1 };
       }
       case JobName.FacialRecognitionQueueAll: {
-        return { deduplication: { id: JobName.FacialRecognitionQueueAll } };
+        return { jobId: JobName.FacialRecognitionQueueAll };
       }
       case JobName.VersionCheck: {
-        return { deduplication: { id: JobName.VersionCheck } };
-      }
-      case JobName.DatabaseBackup: {
-        return { deduplication: { id: JobName.DatabaseBackup } };
+        return { jobId: JobName.VersionCheck };
       }
       default: {
         return null;

server/src/repositories/machine-learning.repository.ts

@@ -132,7 +132,7 @@ export class MachineLearningRepository {
   private async check(url: string) {
     let healthy = false;
     try {
-      const response = await fetch(new URL('ping', url), {
+      const response = await fetch(new URL('/ping', url), {
         signal: AbortSignal.timeout(this.config.availabilityChecks.timeout),
       });
       if (response.ok) {
@@ -170,7 +170,7 @@ export class MachineLearningRepository {
       ...this.config.urls.filter((url) => !this.isHealthy(url)),
     ]) {
       try {
-        const response = await fetch(new URL('predict', url), { method: 'POST', body: formData });
+        const response = await fetch(new URL('/predict', url), { method: 'POST', body: formData });
         if (response.ok) {
           this.setHealthy(url, true);
           return response.json();

web/src/app.css

@@ -76,6 +76,11 @@
     --immich-dark-bg: 10 10 10;
     --immich-dark-fg: 229 231 235;
     --immich-dark-gray: 33 33 33;
+
+    /* view transition variables */
+    --vt-duration-default: 250ms;
+    --vt-duration-hero: 280ms;
+    --vt-memory-easing: cubic-bezier(0.2, 0, 0, 1);
   }
 
   button:not(:disabled),
@@ -176,3 +181,173 @@
     @apply bg-subtle rounded-lg;
   }
 }
+
+@layer base {
+  ::view-transition {
+    background: var(--color-black);
+    animation-duration: var(--vt-duration-default);
+  }
+
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    mix-blend-mode: normal;
+    animation-duration: inherit;
+  }
+
+  ::view-transition-old(*) {
+    animation-name: fadeOut;
+    animation-fill-mode: forwards;
+  }
+  ::view-transition-new(*) {
+    animation-name: fadeIn;
+    animation-fill-mode: forwards;
+  }
+
+  ::view-transition-old(root) {
+    animation: var(--vt-duration-default) 0s fadeOut forwards;
+  }
+  ::view-transition-new(root) {
+    animation: var(--vt-duration-default) 0s fadeIn forwards;
+  }
+
+  ::view-transition-image-pair(info) {
+    isolation: auto;
+  }
+  ::view-transition-old(info) {
+    animation: var(--vt-duration-default) 0s panelSlideOutRight forwards;
+  }
+  ::view-transition-new(info) {
+    animation: var(--vt-duration-default) 0s panelSlideInRight forwards;
+  }
+
+  html[dir='rtl']::view-transition-old(info) {
+    animation: var(--vt-duration-default) 0s panelSlideOutLeft forwards;
+  }
+  html[dir='rtl']::view-transition-new(info) {
+    animation: var(--vt-duration-default) 0s panelSlideInLeft forwards;
+  }
+
+  ::view-transition-group(exclude-previousbutton),
+  ::view-transition-group(exclude-nextbutton),
+  ::view-transition-group(exclude) {
+    animation: none;
+    z-index: 5;
+  }
+  ::view-transition-old(exclude-previousbutton),
+  ::view-transition-old(exclude-nextbutton),
+  ::view-transition-old(exclude) {
+    visibility: hidden;
+  }
+  ::view-transition-new(exclude-previousbutton),
+  ::view-transition-new(exclude-nextbutton),
+  ::view-transition-new(exclude) {
+    animation: none;
+    z-index: 5;
+  }
+
+  ::view-transition-group(hero) {
+    animation-duration: var(--vt-duration-hero);
+    animation-timing-function: var(--vt-memory-easing);
+  }
+  ::view-transition-old(hero) {
+    animation: none;
+    display: none;
+  }
+  ::view-transition-new(hero) {
+    animation: none;
+    align-content: center;
+  }
+
+  @keyframes panelSlideInRight {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes panelSlideOutRight {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes panelSlideInLeft {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes panelSlideOutLeft {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.85;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.85;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(hero) {
+      animation-name: none;
+    }
+
+    ::view-transition-old(hero) {
+      animation: none;
+      display: none;
+    }
+
+    ::view-transition-new(hero) {
+      animation: none;
+    }
+
+    html:active-view-transition-type(viewer) {
+      &::view-transition-old(hero) {
+        animation: none;
+        display: none;
+      }
+      &::view-transition-new(hero) {
+        animation: var(--vt-duration-default) 0s fadeIn forwards;
+      }
+    }
+
+    html:active-view-transition-type(timeline) {
+      &::view-transition-old(hero) {
+        animation: var(--vt-duration-default) 0s fadeOut forwards;
+      }
+      &::view-transition-new(hero) {
+        animation: var(--vt-duration-default) 0s fadeIn forwards;
+      }
+    }
+  }
+}

web/src/lib/components/AdaptiveImage.svelte

@@ -1,54 +1,3 @@
-<script module lang="ts">
-  import { TUNABLES } from '$lib/utils/tunables';
-
-  // Chrome renders HDR images with normally invisible seam lines in a regular
-  // grid pattern. When the user pinch/scroll zooms, these seams become visible
-  // and grow more prominent at higher zoom levels.
-  //
-  // Adding `will-change: transform` prevents the seams by converting the
-  // element into a GPU texture that Chrome rasterizes once and reuses. But
-  // this texture is frozen at a fixed resolution and never re-renders from
-  // the source image, so zooming in magnifies the frozen texture rather than
-  // the source, which can appear blurry.
-  //
-  // To keep the texture sharp, we size this div closer to the image's native
-  // dimensions and apply a CSS counter-scale. Chrome renders these textures
-  // as a grid of small tiles backed by a shared GPU memory budget — if the
-  // texture is too large, tiles go missing and show up as transparent gaps.
-  // We cap the texture size based on the device's GPU capability.
-  //
-  // This workaround is only needed in Chromium-based browsers. Firefox and
-  // Safari use different rasterization pipelines and don't exhibit this bug.
-  // See https://issues.chromium.org/issues/40084005
-  const isChromium = 'chrome' in globalThis;
-
-  function getMaxRasterPixels() {
-    const override = TUNABLES.IMAGE_RASTER.MAX_PIXELS;
-    if (override > 0) {
-      return override;
-    }
-    if (override < 0 || !isChromium) {
-      return 0;
-    }
-    try {
-      const canvas = document.createElement('canvas');
-      const gl = canvas.getContext('webgl');
-      const maxTextureSize = gl?.getParameter(gl.MAX_TEXTURE_SIZE) ?? 0;
-      if (maxTextureSize >= 16_384) {
-        return 16_000_000;
-      }
-      if (maxTextureSize >= 8192) {
-        return 10_000_000;
-      }
-      return 4_000_000;
-    } catch {
-      return 4_000_000;
-    }
-  }
-
-  const maxRasterPixels = getMaxRasterPixels();
-</script>
-
 <script lang="ts">
   import AlphaBackground from '$lib/components/AlphaBackground.svelte';
   import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
@@ -69,6 +18,8 @@
     sharedLink?: SharedLinkResponseDto;
     objectFit?: 'contain' | 'cover';
     container: Size;
+    imageClass?: string;
+    transitionName?: string;
     onUrlChange?: (url: string) => void;
     onImageReady?: () => void;
     onError?: () => void;
@@ -86,6 +37,8 @@
     sharedLink,
     objectFit = 'contain',
     container,
+    imageClass,
+    transitionName,
     onUrlChange,
     onImageReady,
     onError,
@@ -149,27 +102,14 @@
     return { width: 1, height: 1 };
   });
 
-  const { insetInlineStart, top, rasterWidth, rasterHeight, rasterScale } = $derived.by(() => {
+  const { width, height, insetInlineStart, top } = $derived.by(() => {
     const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
     const { width, height } = scaleFn(imageDimensions, container);
-    if (maxRasterPixels === 0) {
-      return {
-        insetInlineStart: (container.width - width) / 2 + 'px',
-        top: (container.height - height) / 2 + 'px',
-        rasterWidth: width + 'px',
-        rasterHeight: height + 'px',
-        rasterScale: 1,
-      };
-    }
-    const nativeRatio = imageDimensions.width / width;
-    const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
-    const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
     return {
+      width: width + 'px',
+      height: height + 'px',
       insetInlineStart: (container.width - width) / 2 + 'px',
       top: (container.height - height) / 2 + 'px',
-      rasterWidth: width * rasterRatio + 'px',
-      rasterHeight: height * rasterRatio + 'px',
-      rasterScale: 1 / rasterRatio,
     };
   });
 
@@ -216,14 +156,12 @@
   {@render backdrop?.()}
 
   <div
-    class="pointer-events-none absolute"
+    class={['pointer-events-none absolute inset-0', imageClass]}
     style:inset-inline-start={insetInlineStart}
     style:top
-    style:width={rasterWidth}
-    style:height={rasterHeight}
-    style:transform="scale({rasterScale})"
-    style:transform-origin="0 0"
-    style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
+    style:width
+    style:height
+    style:view-transition-name={transitionName ?? assetViewerManager.transitionName}
   >
     {#if show.alphaBackground}
       <AlphaBackground />
@@ -241,8 +179,8 @@
     {#if show.thumbnail}
       <ImageLayer
         {adaptiveImageLoader}
-        width={rasterWidth}
-        height={rasterHeight}
+        {width}
+        {height}
         quality="thumbnail"
         src={status.urls.thumbnail}
         alt=""
@@ -259,8 +197,8 @@
       <ImageLayer
         {adaptiveImageLoader}
         {alt}
-        width={rasterWidth}
-        height={rasterHeight}
+        {width}
+        {height}
         {overlays}
         quality="preview"
         src={status.urls.preview}
@@ -272,8 +210,8 @@
       <ImageLayer
         {adaptiveImageLoader}
         {alt}
-        width={rasterWidth}
-        height={rasterHeight}
+        {width}
+        {height}
         {overlays}
         quality="original"
         src={status.urls.original}

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

@@ -14,6 +14,7 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { getAssetActions } from '$lib/services/asset.service';
   import { faceManager } from '$lib/stores/face.svelte';
   import { ocrManager } from '$lib/stores/ocr.svelte';
@@ -39,7 +40,7 @@
   import { onDestroy, onMount, untrack } from 'svelte';
   import type { SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
-  import { fly } from 'svelte/transition';
+  import { slide } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/Thumbnail.svelte';
   import ActivityStatus from './ActivityStatus.svelte';
   import ActivityViewer from './ActivityViewer.svelte';
@@ -149,8 +150,45 @@
     }
   };
 
+  let detailPanelTransitionName = $state<string | undefined>();
+  let navigationBarTransitionName = $state<string | undefined>();
+  let previousButtonTransitionName = $state<string | undefined>();
+  let nextButtonTransitionName = $state<string | undefined>();
+
+  const activateViewTransitionNames = () => {
+    detailPanelTransitionName = 'info';
+    assetViewerManager.transitionName = 'hero';
+  };
+
   onMount(() => {
     syncAssetViewerOpenClass(true);
+
+    const unsubAssetViewerEvents = assetViewerManager.on({
+      ViewerOpenTransition: activateViewTransitionNames,
+      ViewerCloseTransition: activateViewTransitionNames,
+    });
+    const unsubViewTransitionEvents = viewTransitionManager.on({
+      PrepareOldSnapshot: (types) => {
+        if (types.includes('timeline')) {
+          navigationBarTransitionName = 'exclude';
+          previousButtonTransitionName = 'exclude-previousbutton';
+          nextButtonTransitionName = 'exclude-nextbutton';
+        }
+      },
+      PrepareNewSnapshot: (types) => {
+        const isViewer = types.includes('viewer');
+        navigationBarTransitionName = isViewer ? 'exclude' : undefined;
+        previousButtonTransitionName = isViewer ? 'exclude-previousbutton' : undefined;
+        nextButtonTransitionName = isViewer ? 'exclude-nextbutton' : undefined;
+      },
+      Finished: () => {
+        navigationBarTransitionName = undefined;
+        previousButtonTransitionName = undefined;
+        nextButtonTransitionName = undefined;
+        assetViewerManager.transitionName = undefined;
+        detailPanelTransitionName = undefined;
+      },
+    });
     const slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
       if (value === SlideshowState.PlaySlideshow) {
         slideshowHistory.reset();
@@ -169,6 +207,8 @@
     });
 
     return () => {
+      unsubAssetViewerEvents();
+      unsubViewTransitionEvents();
       slideshowStateUnsubscribe();
       slideshowNavigationUnsubscribe();
     };
@@ -195,6 +235,7 @@
   };
 
   const tracker = new InvocationTracker();
+  let navigating = $state(false);
   const navigateAsset = (order?: 'previous' | 'next') => {
     if (!order) {
       if ($slideshowState === SlideshowState.PlaySlideshow) {
@@ -210,7 +251,8 @@
       return;
     }
 
-    void tracker.invoke(async () => {
+    navigating = true;
+    const navigation = tracker.invoke(async () => {
       const isShuffle =
         $slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle;
 
@@ -247,6 +289,7 @@
 
       await handleStopSlideshow();
     }, $t('error_while_navigating'));
+    void navigation.finally(() => (navigating = false));
   };
 
   const navigateStack = (direction: 'previous' | 'next') => {
@@ -480,7 +523,8 @@
 
 <section
   id="immich-asset-viewer"
-  class="fixed inset-s-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
+  class="fixed inset-s-0 top-0 z-10 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
+  data-navigating={navigating || undefined}
   use:focusTrap
   use:shortcuts={[
     { shortcut: { key: 'ArrowUp' }, onShortcut: () => navigateStack('previous') },
@@ -490,7 +534,10 @@
 >
   <!-- Top navigation bar -->
   {#if $slideshowState === SlideshowState.None && !assetViewerManager.isShowEditor}
-    <div class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
+    <div
+      class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform"
+      style:view-transition-name={navigationBarTransitionName}
+    >
       <AssetViewerNavBar
         {asset}
         {album}
@@ -523,7 +570,11 @@
   {/if}
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !assetViewerManager.isFaceEditMode && previousAsset}
-    <div class="col-span-1 col-start-1 row-span-full row-start-1 my-auto justify-self-start">
+    <div
+      data-test-id="previous-asset"
+      class="col-span-1 col-start-1 row-span-full row-start-1 my-auto justify-self-start"
+      style:view-transition-name={previousButtonTransitionName}
+    >
       <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
     </div>
   {/if}
@@ -601,19 +652,24 @@
   </div>
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !assetViewerManager.isFaceEditMode && nextAsset}
-    <div class="col-span-1 col-start-4 row-span-full row-start-1 my-auto justify-self-end">
+    <div
+      data-test-id="next-asset"
+      class="col-span-1 col-start-4 row-span-full row-start-1 my-auto justify-self-end"
+      style:view-transition-name={nextButtonTransitionName}
+    >
       <NextAssetAction onNextAsset={() => navigateAsset('next')} />
     </div>
   {/if}
 
   {#if showDetailPanel || assetViewerManager.isShowEditor}
     <div
-      transition:fly={{ duration: 150 }}
+      transition:slide={{ axis: 'x', duration: 150 }}
       id="detail-panel"
       class={[
         'row-span-4 row-start-1 overflow-y-auto bg-light transition-all dark:border-l dark:border-s-immich-dark-gray',
         showDetailPanel ? 'w-90' : 'w-100',
       ]}
+      style:view-transition-name={detailPanelTransitionName}
       translate="yes"
     >
       {#if showDetailPanel}
@@ -662,7 +718,7 @@
 
   {#if isShared && album && assetViewerManager.isShowActivityPanel && authManager.authenticated}
     <div
-      transition:fly={{ duration: 150 }}
+      transition:slide={{ axis: 'x', duration: 150 }}
       id="activity-panel"
       class="row-span-5 row-start-1 w-90 overflow-y-auto transition-all md:w-115 dark:border-l dark:border-s-immich-dark-gray"
       translate="yes"

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

@@ -4,7 +4,6 @@
   import { AssetMediaSize, viewAsset, type AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
 
   type Props = {
     asset: AssetResponseDto;
@@ -20,7 +19,7 @@
   };
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full place-content-center place-items-center select-none">
+<div class="flex h-dvh w-dvw place-content-center place-items-center select-none">
   {#await Promise.all([loadAssetData(assetId), import('./PhotoSphereViewerAdapter.svelte')])}
     <LoadingSpinner />
   {:then [data, { default: PhotoSphereViewer }]}

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

@@ -205,6 +205,7 @@
       zoomSpeed: 0.5,
       fisheye: false,
     });
+    viewer.addEventListener('ready', () => assetViewerManager.emit('ViewerOpenTransitionReady'), { once: true });
     const resolutionPlugin = viewer.getPlugin<ResolutionPlugin>(ResolutionPlugin);
     const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
       // zoomLevel is 0-100
@@ -250,7 +251,12 @@
 <AssetViewerEvents {onZoom} />
 
 <svelte:document use:shortcuts={[{ shortcut: { key: 'z' }, onShortcut: onZoom, preventDefault: true }]} />
-<div class="mb-0 size-full" bind:this={container}></div>
+<div
+  id="sphere"
+  class="mb-0 h-dvh w-dvw"
+  bind:this={container}
+  style:view-transition-name={assetViewerManager.transitionName}
+></div>
 
 <style>
   /* Reset the default tooltip styling */

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

@@ -28,12 +28,11 @@
     cursor: AssetCursor;
     element?: HTMLDivElement;
     sharedLink?: SharedLinkResponseDto;
-    onReady?: () => void;
     onError?: () => void;
     onSwipe?: (event: SwipeCustomEvent) => void;
   };
 
-  let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe }: Props = $props();
+  let { cursor, element = $bindable(), sharedLink, onError, onSwipe }: Props = $props();
 
   const { slideshowState, slideshowLook } = slideshowStore;
   const asset = $derived(cursor.current);
@@ -228,11 +227,11 @@
     {onUrlChange}
     onImageReady={() => {
       visibleImageReady = true;
-      onReady?.();
+      assetViewerManager.emit('ViewerOpenTransitionReady');
     }}
     onError={() => {
       onError?.();
-      onReady?.();
+      assetViewerManager.emit('ViewerOpenTransitionReady');
     }}
     bind:imgRef={assetViewerManager.imgRef}
     bind:ref={adaptiveImage}

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

@@ -181,6 +181,8 @@
           playsinline
           {...useSwipe(onSwipe)}
           class="h-full object-contain"
+          style:view-transition-name={assetViewerManager.transitionName}
+          onloadedmetadata={() => assetViewerManager.emit('ViewerOpenTransitionReady')}
           oncanplay={(e) => handleCanPlay(e.currentTarget)}
           onended={onVideoEnded}
           onplaying={(e) => {

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

@@ -3,7 +3,6 @@
   import type { AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
 
   interface Props {
     asset: AssetResponseDto;
@@ -19,7 +18,7 @@
   ]);
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full place-content-center place-items-center select-none">
+<div class="flex h-full place-content-center place-items-center select-none">
   {#await modules}
     <LoadingSpinner />
   {:then [PhotoSphereViewer, adapter, videoPlugin]}

web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { ResizeBoundary, transformManager } from '$lib/managers/edit/transform-manager.svelte';
   import { getAssetMediaUrl } from '$lib/utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
@@ -74,6 +75,8 @@
       alt={$getAltText(toTimelineAsset(asset))}
       class="h-full transition-transform select-none motion-reduce:transition-none"
       style:transform={imageTransform}
+      onload={() => assetViewerManager.emit('ViewerOpenTransitionReady')}
+      onerror={() => assetViewerManager.emit('ViewerOpenTransitionReady')}
     />
     <div
       class={[

web/src/lib/components/layouts/UserPageLayout.svelte

@@ -7,6 +7,8 @@
   import NavigationBar from '$lib/components/shared-components/navigation-bar/NavigationBar.svelte';
   import UserSidebar from '$lib/components/shared-components/side-bar/UserSidebar.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';
+  import { page } from '$app/state';
+  import { isAssetViewerRoute } from '$lib/utils/navigation';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';
   import type { Snippet } from 'svelte';
@@ -48,7 +50,7 @@
 
 <header>
   {#if !hideNavbar}
-    <NavigationBar onUploadClick={() => openFileUploadDialog()} />
+    <NavigationBar hidden={isAssetViewerRoute(page)} onUploadClick={() => openFileUploadDialog()} />
   {/if}
 </header>
 <div
@@ -64,7 +66,7 @@
     <UserSidebar />
   {/if}
 
-  <main class="relative">
+  <main class="relative w-full">
     <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto p-2" use:useActions={use}>
       {@render children?.()}
     </div>

web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte

@@ -10,6 +10,7 @@
   import SkipLink from '$lib/elements/SkipLink.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
   import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
@@ -27,21 +28,35 @@
     onUploadClick?: () => void;
     // TODO: remove once this is only used in <AppShellHeader>
     noBorder?: boolean;
+    hidden?: boolean;
   };
 
-  let { onUploadClick, noBorder = false }: Props = $props();
+  let { onUploadClick, noBorder = false, hidden = false }: Props = $props();
 
+  let viewTransitionName = $state<string | undefined>();
   let shouldShowAccountInfoPanel = $state(false);
   let shouldShowNotificationPanel = $state(false);
   let innerWidth: number = $state(0);
   const hasUnreadNotifications = $derived(notificationManager.notifications.length > 0);
 
-  onMount(async () => {
-    try {
-      await notificationManager.refresh();
-    } catch (error) {
+  onMount(() => {
+    notificationManager.refresh().catch((error) => {
       console.error('Failed to load notifications on mount', error);
-    }
+    });
+
+    return viewTransitionManager.on({
+      PrepareOldSnapshot: (types) => {
+        if (types.includes('viewer')) {
+          viewTransitionName = 'exclude';
+        }
+      },
+      PrepareNewSnapshot: (types) => {
+        viewTransitionName = types.includes('timeline') ? 'exclude' : undefined;
+      },
+      Finished: () => {
+        viewTransitionName = undefined;
+      },
+    });
   });
 
   const { Cast } = $derived(getGlobalActions($t));
@@ -49,7 +64,11 @@
 
 <svelte:window bind:innerWidth />
 
-<nav id="dashboard-navbar" class="h-(--navbar-height) w-dvw text-sm max-md:h-(--navbar-height-md)">
+<nav
+  id="dashboard-navbar"
+  class={['h-(--navbar-height) w-dvw text-sm max-md:h-(--navbar-height-md)', hidden && 'invisible']}
+  style:view-transition-name={viewTransitionName}
+>
   <SkipLink text={$t('skip_to_content')} />
   <div
     class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder

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

@@ -2,7 +2,6 @@
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
   import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import type { Snippet } from 'svelte';
@@ -12,10 +11,11 @@
   let { isUploading } = uploadAssetsStore;
 
   type Props = {
+    heroTransitionAssetId?: string | null;
+    suspendTransitions?: boolean;
     viewerAssets: ViewerAsset[];
     width: number;
     height: number;
-    manager: VirtualScrollManager;
     thumbnail: Snippet<
       [
         {
@@ -27,9 +27,17 @@
     customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
   };
 
-  const { viewerAssets, width, height, manager, thumbnail, customThumbnailLayout }: Props = $props();
+  const {
+    heroTransitionAssetId,
+    suspendTransitions = false,
+    viewerAssets,
+    width,
+    height,
+    thumbnail,
+    customThumbnailLayout,
+  }: Props = $props();
 
-  const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
+  const transitionDuration = $derived(suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
 </script>
 
@@ -38,11 +46,13 @@
   {#each filterIsInOrNearViewport(viewerAssets) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
+    {@const transitionName = heroTransitionAssetId === asset.id ? 'hero' : undefined}
 
     <!-- note: don't remove data-asset-id - its used by web e2e tests -->
     <div
       data-asset-id={asset.id}
       class="absolute"
+      style:view-transition-name={transitionName}
       style:top={position.top + 'px'}
       style:inset-inline-start={position.left + 'px'}
       style:width={position.width + 'px'}

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

@@ -1,19 +1,24 @@
 <script lang="ts">
+  import { focusAsset } from '$lib/components/timeline/actions/focus-actions';
   import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
   import type { TimelineMonth } from '$lib/managers/timeline-manager/timeline-month.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot, filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
+  import { handlePromiseError } from '$lib/utils';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-  import type { Snippet } from 'svelte';
+  import { onMount, tick, type Snippet } from 'svelte';
 
   type Props = {
+    toViewerHeroAssetId?: string | null;
     thumbnail: Snippet<
       [
         {
@@ -28,16 +33,16 @@
     singleSelect: boolean;
     assetInteraction: AssetMultiSelectManager;
     timelineMonth: TimelineMonth;
-    manager: VirtualScrollManager;
     onTimelineDaySelect: (timelineDay: TimelineDay, assets: TimelineAsset[]) => void;
   };
+
   let {
+    toViewerHeroAssetId,
     thumbnail: thumbnailWithGroup,
     customThumbnailLayout,
     singleSelect,
     assetInteraction,
     timelineMonth,
-    manager,
     onTimelineDaySelect,
   }: Props = $props();
 
@@ -55,6 +60,34 @@
     });
     return getDateLocaleString(date);
   };
+
+  let toTimelineHeroAssetId = $state<string | null>(null);
+  let heroTransitionAssetId = $derived(toTimelineHeroAssetId ?? toViewerHeroAssetId ?? null);
+
+  const handleViewerCloseTransition = ({ id }: { id: string }) => {
+    const asset = timelineMonth.findAssetById({ id });
+    if (!asset) {
+      return;
+    }
+    handlePromiseError(
+      viewTransitionManager.startTransition({
+        types: ['timeline'],
+        performUpdate: async () => {
+          assetViewerManager.emit('ViewerCloseTransitionReady');
+          const event = await eventManager.untilNext('TimelineLoaded');
+          toTimelineHeroAssetId = event.id;
+          await tick();
+        },
+        onFinished: () => {
+          toTimelineHeroAssetId = null;
+          focusAsset(asset.id);
+        },
+      }),
+    );
+  };
+  if (viewTransitionManager.isSupported()) {
+    onMount(() => assetViewerManager.on({ ViewerCloseTransition: handleViewerCloseTransition }));
+  }
 </script>
 
 {#each filterIsInOrNearViewport(timelineMonth.timelineDays) as timelineDay, groupIndex (timelineDay.day)}
@@ -99,7 +132,8 @@
     </div>
 
     <AssetLayout
-      {manager}
+      {heroTransitionAssetId}
+      suspendTransitions={timelineMonth.timelineManager.suspendTransitions}
       viewerAssets={timelineDay.viewerAssets}
       height={timelineDay.height}
       width={timelineDay.width}

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

@@ -11,6 +11,7 @@
   import { fade, fly } from 'svelte/transition';
 
   interface Props {
+    invisible: boolean;
     /** Offset from the top of the timeline (e.g., for headers) */
     timelineTopOffset?: number;
     /** Offset from the bottom of the timeline (e.g., for footers) */
@@ -39,6 +40,7 @@
   }
 
   let {
+    invisible = false,
     timelineTopOffset = 0,
     timelineBottomOffset = 0,
     height = 0,
@@ -509,6 +511,7 @@
   aria-valuemin={toScrollY(0)}
   data-id="scrubber"
   class="absolute inset-e-0 z-1 select-none hover:cursor-row-resize"
+  class:invisible
   style:padding-top={PADDING_TOP + 'px'}
   style:padding-bottom={PADDING_BOTTOM + 'px'}
   style:width

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

@@ -13,6 +13,8 @@
   import Skeleton from '$lib/elements/Skeleton.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { startViewerTransition } from '$lib/utils/transition-utils';
   import type { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
   import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
   import type { TimelineMonth } from '$lib/managers/timeline-manager/timeline-month.svelte';
@@ -20,6 +22,7 @@
   import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
   import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { handlePromiseError } from '$lib/utils';
   import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
   import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
   import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
@@ -99,6 +102,7 @@
   // Overall scroll percentage through the entire timeline (0-1)
   let timelineScrollPercent: number = $state(0);
   let scrubberWidth = $state(0);
+  let toViewerHeroAssetId = $state<string | null>(null);
 
   const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
   const maxMd = $derived(mediaQueryManager.maxMd);
@@ -207,7 +211,7 @@
         timelineManager.viewportWidth = rect.width;
       }
     }
-    const scrollTarget = assetViewerManager.gridScrollTarget?.at;
+    const scrollTarget = getScrollTarget();
     let scrolled = false;
     if (scrollTarget) {
       scrolled = await scrollAndLoadAsset(scrollTarget);
@@ -219,7 +223,7 @@
       await tick();
       focusAsset(scrollTarget);
     }
-    invisible = false;
+    invisible = isAssetViewerRoute(page) ? true : false;
   };
 
   // note: only modified once in afterNavigate()
@@ -237,10 +241,13 @@
     hasNavigatedToOrFromAssetViewer = isNavigatingToAssetViewer !== isNavigatingFromAssetViewer;
   });
 
+  const getScrollTarget = () => {
+    return assetViewerManager.gridScrollTarget?.at ?? page.params.assetId ?? null;
+  };
   // afterNavigate is only called after navigation to a new URL, {complete} will resolve
   // after successful navigation.
   afterNavigate(({ complete }) => {
-    void complete.finally(() => {
+    void complete.finally(async () => {
       const isAssetViewerPage = isAssetViewerRoute(page);
 
       // Set initial load state only once - if initialLoadWasAssetViewer is null, then
@@ -251,6 +258,12 @@
       }
 
       void scrollAfterNavigate();
+      if (!isAssetViewerPage) {
+        const scrollTarget = getScrollTarget();
+        await tick();
+
+        eventManager.emit('TimelineLoaded', { id: scrollTarget });
+      }
     });
   });
 
@@ -258,7 +271,7 @@
   // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
 
   onMount(() => {
-    if (!enableRouting) {
+    if (!enableRouting && !isAssetViewerRoute(page)) {
       invisible = false;
     }
   });
@@ -545,7 +558,7 @@
     assetInteraction.selectAll = timelineManager.assetCount === assetInteraction.assets.length;
   };
 
-  const _onClick = (
+  const defaultThumbnailClick = (
     timelineManager: TimelineManager,
     assets: TimelineAsset[],
     groupTitle: string,
@@ -557,6 +570,27 @@
     }
     void navigate({ targetRoute: 'current', assetId: asset.id });
   };
+
+  const handleThumbnailClick = (asset: TimelineAsset, timelineDay: TimelineDay) => {
+    if (typeof onThumbnailClick === 'function' || isSelectionMode || assetInteraction.selectionActive) {
+      if (typeof onThumbnailClick === 'function') {
+        onThumbnailClick(asset, timelineManager, timelineDay, defaultThumbnailClick);
+      } else {
+        defaultThumbnailClick(timelineManager, timelineDay.getAssets(), timelineDay.groupTitle, asset);
+      }
+      return;
+    }
+
+    const openViewer = () => void navigate({ targetRoute: 'current', assetId: asset.id });
+    handlePromiseError(
+      startViewerTransition(
+        asset.id,
+        openViewer,
+        (id) => (toViewerHeroAssetId = id),
+        () => (toViewerHeroAssetId = null),
+      ),
+    );
+  };
 </script>
 
 <svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
@@ -587,6 +621,7 @@
 {#if timelineManager.months.length > 0}
   <Scrubber
     {timelineManager}
+    {invisible}
     height={timelineManager.viewportHeight}
     timelineTopOffset={timelineManager.topSectionHeight}
     timelineBottomOffset={timelineManager.bottomSectionHeight}
@@ -618,6 +653,7 @@
   id="asset-grid"
   class={['h-full overflow-y-auto outline-none scrollbar-hidden', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
   style:margin-inline-end={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
+  data-initialized={timelineManager.isInitialized || undefined}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
   bind:clientWidth={timelineManager.viewportWidth}
@@ -666,11 +702,11 @@
           style:width="100%"
         >
           <Month
+            {toViewerHeroAssetId}
             {assetInteraction}
             {customThumbnailLayout}
             {singleSelect}
             {timelineMonth}
-            manager={timelineManager}
             onTimelineDaySelect={handleGroupSelect}
           >
             {#snippet thumbnail({ asset, position, timelineDay, groupIndex })}
@@ -684,13 +720,7 @@
                 {asset}
                 {albumUsers}
                 {groupIndex}
-                onClick={(asset) => {
-                  if (typeof onThumbnailClick === 'function') {
-                    onThumbnailClick(asset, timelineManager, timelineDay, _onClick);
-                  } else {
-                    _onClick(timelineManager, timelineDay.getAssets(), timelineDay.groupTitle, asset);
-                  }
-                }}
+                onClick={(asset) => handleThumbnailClick(asset, timelineDay)}
                 onSelect={() => {
                   if (isSelectionMode || assetInteraction.selectionActive) {
                     assetSelectHandler(timelineManager, asset, timelineDay.getAssets(), timelineDay.groupTitle);

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

@@ -5,6 +5,7 @@
   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 { viewTransitionManager } from '$lib/managers/ViewTransitionManager.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';
@@ -97,6 +98,14 @@
   };
 
   const handleClose = async (assetId: string) => {
+    if (viewTransitionManager.isSupported()) {
+      const transitionReady = assetViewerManager.untilNext('ViewerCloseTransitionReady', {
+        signal: AbortSignal.timeout(200),
+      });
+      assetViewerManager.emit('ViewerCloseTransition', { id: assetId });
+      await transitionReady;
+    }
+
     invisible = true;
     assetViewerManager.gridScrollTarget = { at: assetId };
     await navigate({

web/src/lib/managers/ViewTransitionManager.svelte.spec.ts

@@ -0,0 +1,327 @@
+import { ViewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
+
+function mockViewTransition({
+  updateCallbackDone = Promise.resolve(),
+  finished = Promise.resolve(),
+  ready = Promise.resolve(),
+  skipTransition = vi.fn(),
+}: {
+  updateCallbackDone?: Promise<void>;
+  finished?: Promise<void>;
+  ready?: Promise<void>;
+  skipTransition?: ReturnType<typeof vi.fn>;
+} = {}) {
+  // eslint-disable-next-line tscompat/tscompat
+  document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+    const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
+    void updateFn();
+    return { updateCallbackDone, finished, ready, skipTransition };
+  });
+}
+
+describe('ViewTransitionManager', () => {
+  let manager: ViewTransitionManager;
+
+  beforeEach(() => {
+    manager = new ViewTransitionManager();
+  });
+
+  afterEach(() => {
+    delete (document as Partial<typeof document> & { startViewTransition?: unknown }).startViewTransition;
+  });
+
+  describe('when View Transition API is not supported', () => {
+    it('should still call performUpdate', async () => {
+      const performUpdate = vi.fn().mockResolvedValue(undefined);
+
+      await manager.startTransition({ performUpdate });
+
+      expect(performUpdate).toHaveBeenCalledOnce();
+    });
+
+    it('should call onFinished after performUpdate', async () => {
+      const callOrder: string[] = [];
+      const performUpdate = vi.fn().mockImplementation(() => {
+        callOrder.push('performUpdate');
+      });
+      const onFinished = vi.fn().mockImplementation(() => {
+        callOrder.push('onFinished');
+      });
+
+      await manager.startTransition({ performUpdate, onFinished });
+
+      expect(onFinished).toHaveBeenCalledOnce();
+      expect(callOrder).toEqual(['performUpdate', 'onFinished']);
+    });
+
+    it('should not call prepareOldSnapshot or prepareNewSnapshot', async () => {
+      const prepareOldSnapshot = vi.fn();
+      const prepareNewSnapshot = vi.fn();
+      const performUpdate = vi.fn().mockResolvedValue(undefined);
+
+      await manager.startTransition({ performUpdate, prepareOldSnapshot, prepareNewSnapshot });
+
+      expect(prepareOldSnapshot).not.toHaveBeenCalled();
+      expect(prepareNewSnapshot).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when a transition is already active', () => {
+    it('should skip the first transition and run the second', async () => {
+      let resolveFirstUpdate!: () => void;
+      const firstUpdateCallbackDone = new Promise<void>((resolve) => {
+        resolveFirstUpdate = resolve;
+      });
+      const firstFinished = new Promise<void>(() => {});
+      const firstSkipTransition = vi.fn();
+
+      let callCount = 0;
+      // eslint-disable-next-line tscompat/tscompat
+      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+        callCount++;
+        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
+        void updateFn();
+        if (callCount === 1) {
+          return {
+            updateCallbackDone: firstUpdateCallbackDone,
+            finished: firstFinished,
+            ready: Promise.resolve(),
+            skipTransition: firstSkipTransition,
+          };
+        }
+        return {
+          updateCallbackDone: Promise.resolve(),
+          finished: Promise.resolve(),
+          ready: Promise.resolve(),
+          skipTransition: vi.fn(),
+        };
+      });
+
+      const secondPerformUpdate = vi.fn().mockResolvedValue(undefined);
+
+      const firstPromise = manager.startTransition({
+        performUpdate: async () => {},
+      });
+
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      // While first is active, start a second — should skip the first and proceed
+      await manager.startTransition({ performUpdate: secondPerformUpdate });
+      expect(firstSkipTransition).toHaveBeenCalledOnce();
+      expect(secondPerformUpdate).toHaveBeenCalledOnce();
+
+      resolveFirstUpdate();
+      await firstPromise;
+    });
+  });
+
+  describe('skipTransitions', () => {
+    it('should return false when no transition is active', () => {
+      expect(manager.skipTransitions()).toBe(false);
+    });
+
+    it('should call skipTransition on the active transition and return true', async () => {
+      let resolveFinished!: () => void;
+      const finished = new Promise<void>((resolve) => {
+        resolveFinished = resolve;
+      });
+      let resolveUpdate!: () => void;
+      const updateCallbackDone = new Promise<void>((resolve) => {
+        resolveUpdate = resolve;
+      });
+      const skipTransition = vi.fn();
+
+      mockViewTransition({ updateCallbackDone, finished, skipTransition });
+
+      const promise = manager.startTransition({ performUpdate: async () => {} });
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      const skipped = manager.skipTransitions();
+      expect(skipped).toBe(true);
+      expect(skipTransition).toHaveBeenCalledOnce();
+
+      resolveUpdate();
+      resolveFinished();
+      await promise;
+    });
+
+    it('should allow a new transition after skipping', async () => {
+      let resolveFinished!: () => void;
+      const finished = new Promise<void>((resolve) => {
+        resolveFinished = resolve;
+      });
+      let resolveUpdate!: () => void;
+      const updateCallbackDone = new Promise<void>((resolve) => {
+        resolveUpdate = resolve;
+      });
+
+      mockViewTransition({ updateCallbackDone, finished });
+
+      const promise = manager.startTransition({ performUpdate: async () => {} });
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      manager.skipTransitions();
+      resolveUpdate();
+      resolveFinished();
+      await promise;
+
+      const secondUpdate = vi.fn().mockResolvedValue(undefined);
+      mockViewTransition({ updateCallbackDone: Promise.resolve(), finished: Promise.resolve() });
+
+      await manager.startTransition({ performUpdate: secondUpdate });
+      expect(secondUpdate).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('error handling', () => {
+    it('should propagate error from performUpdate when API is not supported', async () => {
+      const error = new Error('update failed');
+      const performUpdate = vi.fn().mockRejectedValue(error);
+
+      await expect(manager.startTransition({ performUpdate })).rejects.toThrow('update failed');
+    });
+
+    it('should clean up activeViewTransition when performUpdate throws (API supported)', async () => {
+      const error = new Error('update failed');
+      let resolveFinished!: () => void;
+      const finished = new Promise<void>((resolve) => {
+        resolveFinished = resolve;
+      });
+
+      // eslint-disable-next-line tscompat/tscompat
+      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
+        const updateCallbackDone = updateFn();
+        return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition: vi.fn() };
+      });
+
+      await expect(manager.startTransition({ performUpdate: () => Promise.reject(error) })).rejects.toThrow(
+        'update failed',
+      );
+
+      resolveFinished();
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      const secondUpdate = vi.fn().mockResolvedValue(undefined);
+      mockViewTransition();
+
+      await manager.startTransition({ performUpdate: secondUpdate });
+      expect(secondUpdate).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('fallback path', () => {
+    it('should fall back to function argument when object argument throws', async () => {
+      const performUpdate = vi.fn().mockResolvedValue(undefined);
+      const prepareNewSnapshot = vi.fn();
+      const finished = Promise.resolve();
+      const updateCallbackDone = Promise.resolve();
+
+      let callCount = 0;
+      // eslint-disable-next-line tscompat/tscompat
+      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+        callCount++;
+        if (callCount === 1 && typeof arg !== 'function') {
+          throw new TypeError('object form not supported');
+        }
+        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
+        void updateFn();
+        return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition: vi.fn() };
+      });
+
+      await manager.startTransition({ performUpdate, prepareNewSnapshot, types: ['test'] });
+
+      expect(performUpdate).toHaveBeenCalledOnce();
+      expect(prepareNewSnapshot).toHaveBeenCalledOnce();
+      // eslint-disable-next-line tscompat/tscompat
+      expect(document.startViewTransition).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('abort signal', () => {
+    it('should pass an AbortSignal to performUpdate', async () => {
+      const performUpdate = vi.fn().mockResolvedValue(undefined);
+
+      mockViewTransition();
+
+      await manager.startTransition({ performUpdate });
+
+      expect(performUpdate).toHaveBeenCalledWith(expect.any(AbortSignal));
+    });
+
+    it('should abort the signal when transition.ready rejects', async () => {
+      let capturedSignal: AbortSignal | undefined;
+      let resolveUpdate!: () => void;
+      const updateCallbackDone = new Promise<void>((resolve) => {
+        resolveUpdate = resolve;
+      });
+
+      const readyError = new Error('Transition was aborted because of timeout in DOM update');
+
+      mockViewTransition({
+        updateCallbackDone,
+        finished: Promise.reject(readyError),
+        ready: Promise.reject(readyError),
+      });
+
+      const performUpdate = vi.fn().mockImplementation((signal: AbortSignal) => {
+        capturedSignal = signal;
+        return new Promise<void>((resolve) => {
+          signal.addEventListener('abort', () => resolve(), { once: true });
+        });
+      });
+
+      const promise = manager.startTransition({ performUpdate });
+
+      await new Promise<void>((r) => queueMicrotask(r));
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      expect(capturedSignal?.aborted).toBe(true);
+
+      resolveUpdate();
+      await promise;
+    });
+
+    it('should not abort the signal when transition completes normally', async () => {
+      let capturedSignal: AbortSignal | undefined;
+
+      mockViewTransition();
+
+      await manager.startTransition({
+        performUpdate: (signal) => {
+          capturedSignal = signal;
+          return Promise.resolve();
+        },
+      });
+
+      expect(capturedSignal?.aborted).toBe(false);
+    });
+
+    it('should pass a non-aborted signal in the unsupported fallback path', async () => {
+      let capturedSignal: AbortSignal | undefined;
+
+      await manager.startTransition({
+        performUpdate: (signal) => {
+          capturedSignal = signal;
+          return Promise.resolve();
+        },
+      });
+
+      expect(capturedSignal).toBeInstanceOf(AbortSignal);
+      expect(capturedSignal?.aborted).toBe(false);
+    });
+  });
+
+  describe('isSupported', () => {
+    it('should return false when startViewTransition is not in document', () => {
+      expect(manager.isSupported()).toBe(false);
+    });
+
+    it('should return true when startViewTransition is in document', () => {
+      // eslint-disable-next-line tscompat/tscompat
+      document.startViewTransition = vi.fn();
+
+      expect(manager.isSupported()).toBe(true);
+    });
+  });
+});

web/src/lib/managers/ViewTransitionManager.svelte.ts

@@ -0,0 +1,102 @@
+import { tick } from 'svelte';
+import { BaseEventManager } from '$lib/utils/base-event-manager.svelte';
+
+type TransitionEvents = {
+  PrepareOldSnapshot: [string[]];
+  PrepareNewSnapshot: [string[]];
+  Finished: [string[]];
+};
+
+interface TransitionRequest {
+  types?: string[];
+  prepareOldSnapshot?: () => void;
+  performUpdate: (signal: AbortSignal) => Promise<void>;
+  prepareNewSnapshot?: () => void;
+  onFinished?: () => void;
+}
+
+export class ViewTransitionManager extends BaseEventManager<TransitionEvents> {
+  #activeViewTransition: ViewTransition | null = null;
+  #activeOnFinished: (() => void) | undefined = undefined;
+
+  isSupported() {
+    return 'startViewTransition' in document;
+  }
+
+  skipTransitions() {
+    const skipped = !!this.#activeViewTransition;
+    this.#activeViewTransition?.skipTransition();
+    this.#activeViewTransition = null;
+    const onFinished = this.#activeOnFinished;
+    this.#activeOnFinished = undefined;
+    onFinished?.();
+    return skipped;
+  }
+
+  async startTransition({
+    types,
+    prepareOldSnapshot,
+    performUpdate,
+    prepareNewSnapshot,
+    onFinished,
+  }: TransitionRequest) {
+    if (this.#activeViewTransition) {
+      this.skipTransitions();
+    }
+
+    const resolvedTypes = types ?? [];
+
+    if (!this.isSupported()) {
+      await performUpdate(AbortSignal.timeout(10_000));
+      onFinished?.();
+      return;
+    }
+
+    this.emit('PrepareOldSnapshot', resolvedTypes);
+    prepareOldSnapshot?.();
+    await tick();
+
+    const abortController = new AbortController();
+    const update = async () => {
+      await performUpdate(abortController.signal);
+      this.emit('PrepareNewSnapshot', resolvedTypes);
+      prepareNewSnapshot?.();
+      await tick();
+    };
+
+    let transition: ViewTransition;
+    try {
+      // eslint-disable-next-line tscompat/tscompat
+      transition = document.startViewTransition({ update, types });
+    } catch {
+      // Fallback: browsers supporting VT Level 1 but not Level 2 (object form with types) will throw
+      // eslint-disable-next-line tscompat/tscompat
+      transition = document.startViewTransition(update);
+    }
+
+    this.#activeViewTransition = transition;
+    this.#activeOnFinished = onFinished;
+
+    // eslint-disable-next-line tscompat/tscompat
+    void transition.ready.catch((error: unknown) => {
+      abortController.abort(error);
+    });
+
+    // eslint-disable-next-line tscompat/tscompat
+    void transition.finished
+      .catch(() => {})
+      .finally(() => {
+        if (this.#activeViewTransition === transition) {
+          this.#activeViewTransition = null;
+          this.#activeOnFinished = undefined;
+          this.emit('Finished', resolvedTypes);
+          onFinished?.();
+        }
+      });
+
+    // eslint-disable-next-line tscompat/tscompat
+    await transition.updateCallbackDone;
+  }
+}
+
+export const viewTransitionManager = new ViewTransitionManager();

web/src/lib/managers/asset-viewer-manager.svelte.ts

@@ -34,12 +34,17 @@ export type Events = {
   ZoomChange: [ZoomImageWheelState];
   Copy: [];
   FaceEditModeChange: [boolean];
+  ViewerOpenTransitionReady: [];
+  ViewerOpenTransition: [];
+  ViewerCloseTransition: [{ id: string }];
+  ViewerCloseTransitionReady: [];
 };
 
 class AssetViewerManager extends BaseEventManager<Events> {
   #zoomState = $state(createDefaultZoomState());
   #animationFrameId: number | null = null;
 
+  transitionName = $state<string | undefined>();
   imgRef = $state<HTMLImageElement | undefined>();
   imageLoaderStatus = $state<ImageLoaderStatus | undefined>();
   #isImageLoading = $derived.by(() => {

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

@@ -89,6 +89,8 @@ export type Events = {
   ReleaseEvent: [ReleaseEvent];
 
   WebsocketConnect: [];
+
+  TimelineLoaded: [{ id: string | null }];
 };
 
 export const eventManager = new BaseEventManager<Events>();

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

@@ -19,7 +19,7 @@ class LanguageManager {
 
     this.rtl = item.rtl ?? false;
 
-    document.body.setAttribute('dir', item.rtl ? 'rtl' : 'ltr');
+    document.documentElement.setAttribute('dir', item.rtl ? 'rtl' : 'ltr');
 
     eventManager.emit('LanguageChange', item);
   }

web/src/lib/utils/base-event-manager.svelte.ts

@@ -43,6 +43,50 @@ export class BaseEventManager<Events extends EventsBase> {
     };
   }
 
+  private once<T extends keyof Events>(event: T, callback: EventCallback<Events, T>) {
+    const unsubscribe = this.#onEvent(event, (...args: Events[T]) => {
+      unsubscribe();
+      return callback(...args);
+    });
+    return unsubscribe;
+  }
+
+  untilNext<T extends keyof Events>(
+    event: T,
+    { timeoutMs = 10_000, signal }: { timeoutMs?: number; signal?: AbortSignal } = {},
+  ): Promise<Events[T] extends [] ? void : Events[T][0]> {
+    type Result = Events[T] extends [] ? void : Events[T][0];
+    return new Promise<Result>((resolve, reject) => {
+      let settled = false;
+      const settle = () => {
+        if (settled) {
+          return false;
+        }
+        settled = true;
+        unsubscribe();
+        clearTimeout(timer);
+        signal?.removeEventListener('abort', onAbort);
+        return true;
+      };
+      const unsubscribe = this.once(event, (...args: Events[T]) => {
+        if (settle()) {
+          resolve(args[0] as Result);
+        }
+      });
+      const timer = setTimeout(() => {
+        if (settle()) {
+          reject(new Error(`untilNext('${String(event)}') timed out after ${timeoutMs}ms`));
+        }
+      }, timeoutMs);
+      const onAbort = () => {
+        if (settle()) {
+          resolve(undefined as Result);
+        }
+      };
+      signal?.addEventListener('abort', onAbort, { once: true });
+    });
+  }
+
   emit<T extends keyof Events>(event: T, ...params: Events[T]) {
     const listeners = this.getListeners(event);
     for (const listener of listeners) {

web/src/lib/utils/transition-utils.ts

@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
+import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+
+export async function startViewerTransition(
+  heroAssetId: string,
+  openViewer: () => void,
+  activateHeroAsset: (assetId: string) => void,
+  deactivateHeroAsset: () => void,
+) {
+  await viewTransitionManager.startTransition({
+    types: ['viewer'],
+    prepareOldSnapshot: () => {
+      activateHeroAsset(heroAssetId);
+    },
+    performUpdate: async (signal) => {
+      deactivateHeroAsset();
+      const ready = assetViewerManager.untilNext('ViewerOpenTransitionReady', { signal });
+      openViewer();
+      await ready;
+      assetViewerManager.emit('ViewerOpenTransition');
+      await tick();
+    },
+  });
+}

web/src/lib/utils/tunables.ts

@@ -31,7 +31,4 @@ export const TUNABLES = {
   IMAGE_THUMBNAIL: {
     THUMBHASH_FADE_DURATION: getNumber(storage.getItem('THUMBHASH_FADE_DURATION'), 100),
   },
-  IMAGE_RASTER: {
-    MAX_PIXELS: getNumber(storage.getItem('IMAGE_RASTER.MAX_PIXELS'), 0),
-  },
 };

web/src/routes/(user)/+layout.svelte

@@ -22,7 +22,7 @@
   });
 </script>
 
-<div class:display-none={assetViewerManager.isViewing}>
+<div class:invisible={assetViewerManager.isViewing}>
   {@render children?.()}
 </div>
 <UploadCover />
@@ -31,7 +31,4 @@
   :root {
     overscroll-behavior: none;
   }
-  .display-none {
-    display: none;
-  }
 </style>

web/src/routes/(user)/explore/+page.svelte

@@ -4,18 +4,15 @@
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
   import SingleGridRow from '$lib/components/shared-components/SingleGridRow.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { Route } from '$lib/route';
   import { getAssetMediaUrl, getPeopleThumbnailUrl } from '$lib/utils';
-  import { getAssetInfo, AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import { mdiHeart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { getAltText } from '$lib/utils/thumbnail-util';
-  import Portal from '$lib/elements/Portal.svelte';
 
   interface Props {
     data: PageData;
@@ -43,15 +40,6 @@
       }
     }
   };
-
-  const onViewAsset = async (id: string) => {
-    const asset = await getAssetInfo({ ...authManager.params, id });
-    assetViewerManager.setAsset(asset);
-  };
-
-  const assetCursor = $derived({
-    current: assetViewerManager.asset!,
-  });
 </script>
 
 <OnEvents {onPersonThumbnailReady} />
@@ -134,20 +122,15 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <div class="flex h-24 max-w-fit flex-wrap gap-x-1 overflow-hidden md:h-42">
+      <div class="flex h-24 flex-wrap gap-x-1 overflow-hidden md:h-42">
         {#each recents as item (item.data.id)}
-          <button
-            type="button"
-            class="relative h-full flex-auto"
-            onclick={() => onViewAsset(item.data.id)}
-            draggable="false"
-          >
+          <a class="relative h-full flex-auto" href={Route.viewAsset({ id: item.data.id })} draggable="false">
             <img
               src={getAssetMediaUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
               alt={$getAltText(toTimelineAsset(item.data))}
               class="size-full min-w-max rounded-xl object-cover"
             />
-          </button>
+          </a>
         {/each}
       </div>
     </div>
@@ -157,15 +140,3 @@
     <EmptyPlaceholder text={$t('no_explore_results_message')} class="mx-auto mt-10" />
   {/if}
 </UserPageLayout>
-
-{#if assetViewerManager.isViewing}
-  {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
-    <Portal target="body">
-      <AssetViewer
-        cursor={assetCursor}
-        showNavigation={false}
-        onClose={() => assetViewerManager.showAssetViewer(false)}
-      />
-    </Portal>
-  {/await}
-{/if}