Merge branch 'immich-main' into feat/multi-select-asset-viewer

* chore(docs): update Podman/Quadlets instructions link to a more up to date repo

* Update community-guides.tsx: additional guide instead of replacing the other podman one

* fix community-guides.tsx: fixed podman handbook entry

* chore: linting

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

.devcontainer/mobile/container-compose-overrides.yml

@@ -12,7 +12,6 @@ services:
       - server_node_modules:/workspaces/immich/server/node_modules
       - web_node_modules:/workspaces/immich/web/node_modules
       - ${UPLOAD_LOCATION}/photos:/data
-      - ${UPLOAD_LOCATION}/photos/upload:/data/upload
       - /etc/localtime:/etc/localtime:ro
 
   database:

.devcontainer/server/container-compose-overrides.yml

@@ -8,8 +8,7 @@ services:
       - IMMICH_SERVER_URL=http://127.0.0.1:2283/
     volumes: !override
       - ..:/workspaces/immich
-      - ${UPLOAD_LOCATION:-upload1-devcontainer-volume}${UPLOAD_LOCATION:+/photos}:/data
-      - ${UPLOAD_LOCATION:-upload2-devcontainer-volume}${UPLOAD_LOCATION:+/photos/upload}:/data/upload
+      - ${UPLOAD_LOCATION:-upload-devcontainer-volume}${UPLOAD_LOCATION:+/photos}:/data
       - /etc/localtime:/etc/localtime:ro
       - pnpm-store:/usr/src/app/.pnpm-store
       - server-node_modules:/usr/src/app/server/node_modules
@@ -24,9 +23,6 @@ services:
       - coverage:/usr/src/app/web/coverage
   immich-web:
     env_file: !reset []
-  init:
-    env_file: !reset []
-    command: sh -c 'find /data -maxdepth 1 ! -path "/data/postgres" -type d -exec chown ${UID:-0}:${GID:-0} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-0}:${GID:-0} "$$path" || true; done'
   immich-machine-learning:
     env_file: !reset []
   database:
@@ -42,7 +38,5 @@ services:
   redis:
     env_file: !reset []
 volumes:
-  # Node modules for each service to avoid conflicts and ensure consistent dependencies
-  upload1-devcontainer-volume:
-  upload2-devcontainer-volume:
+  upload-devcontainer-volume:
   postgres-devcontainer-volume:

Makefile

@@ -1,13 +1,13 @@
-dev: prepare-volumes
+dev:
 	@trap 'make dev-down' EXIT; COMPOSE_BAKE=true docker compose -f ./docker/docker-compose.dev.yml up --remove-orphans
 
 dev-down:
 	docker compose -f ./docker/docker-compose.dev.yml down --remove-orphans
 
-dev-update: prepare-volumes
+dev-update:
 	@trap 'make dev-down' EXIT; COMPOSE_BAKE=true docker compose -f ./docker/docker-compose.dev.yml up --build -V --remove-orphans
 
-dev-scale: prepare-volumes
+dev-scale:
 	@trap 'make dev-down' EXIT; COMPOSE_BAKE=true docker compose -f ./docker/docker-compose.dev.yml up --build -V --scale immich-server=3 --remove-orphans
 
 dev-docs:
@@ -23,7 +23,7 @@ e2e-update:
 e2e-down:
 	docker compose -f ./e2e/docker-compose.yml down --remove-orphans
 
-prod: 
+prod:
 	@trap 'make prod-down' EXIT; COMPOSE_BAKE=true docker compose -f ./docker/docker-compose.prod.yml up --build -V --remove-orphans
 
 prod-down:
@@ -33,16 +33,16 @@ prod-scale:
 	@trap 'make prod-down' EXIT; COMPOSE_BAKE=true docker compose -f ./docker/docker-compose.prod.yml up --build -V --scale immich-server=3 --scale immich-microservices=3 --remove-orphans
 
 .PHONY: open-api
-open-api: prepare-volumes
+open-api:
 	cd ./open-api && bash ./bin/generate-open-api.sh
 
-open-api-dart: prepare-volumes
+open-api-dart:
 	cd ./open-api && bash ./bin/generate-open-api.sh dart
 
-open-api-typescript: prepare-volumes
+open-api-typescript:
 	cd ./open-api && bash ./bin/generate-open-api.sh typescript
 
-sql: prepare-volumes
+sql:
 	pnpm --filter immich run sync:sql
 
 attach-server:
@@ -68,32 +68,6 @@ VOLUME_DIRS = \
 # Include .env file if it exists
 -include docker/.env
 
-# Helper function to chown, on error suggest remediation and exit
-define safe_chown
-	CURRENT_OWNER=$$(stat -c '%u:%g' "$(1)" 2>/dev/null || echo "none"); \
-	DESIRED_OWNER="$(or $(UID),0):$(or $(GID),0)"; \
-	if [ "$$CURRENT_OWNER" != "$$DESIRED_OWNER" ] && ! chown -v $(2) $$DESIRED_OWNER "$(1)" 2>/dev/null; then \
-		echo "Permission denied when changing owner of volumes and upload location. Try running 'sudo make prepare-volumes' first."; \
-		exit 1; \
-	fi;
-endef
-# create empty directories and chown
-prepare-volumes:
-	@$(foreach dir,$(VOLUME_DIRS),mkdir -p $(dir);)
-	@$(foreach dir,$(VOLUME_DIRS),$(call safe_chown,$(dir),-R))
-ifneq ($(UPLOAD_LOCATION),)
-ifeq ($(filter /%,$(UPLOAD_LOCATION)),)
-	@mkdir -p "docker/$(UPLOAD_LOCATION)/photos/upload"
-	@$(call safe_chown,docker/$(UPLOAD_LOCATION),)
-	@$(call safe_chown,docker/$(UPLOAD_LOCATION)/photos,-R)
-else
-	@mkdir -p "$(UPLOAD_LOCATION)/photos/upload"
-	@$(call safe_chown,$(UPLOAD_LOCATION),)
-	@$(call safe_chown,$(UPLOAD_LOCATION)/photos,-R)
-endif
-endif
-
-
 MODULES = e2e server web cli sdk docs .github
 
 # directory to package name mapping function

docker/docker-compose.dev.yml

@@ -21,7 +21,6 @@ services:
     # extends:
     #   file: hwaccel.transcoding.yml
     #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
-    user: '${UID:-0}:${GID:-0}'
     build:
       context: ../
       dockerfile: server/Dockerfile.dev
@@ -30,7 +29,6 @@ services:
     volumes:
       - ..:/usr/src/app
       - ${UPLOAD_LOCATION}/photos:/data
-      - ${UPLOAD_LOCATION}/photos/upload:/data/upload
       - /etc/localtime:/etc/localtime:ro
       - pnpm-store:/usr/src/app/.pnpm-store
       - server-node_modules:/usr/src/app/server/node_modules
@@ -72,17 +70,12 @@ services:
         condition: service_started
       database:
         condition: service_started
-      init:
-        condition: service_completed_successfully
     healthcheck:
       disable: false
 
   immich-web:
     container_name: immich_web
     image: immich-web-dev:latest
-    # Needed for rootless docker setup, see https://github.com/moby/moby/issues/45919
-    # user: 0:0
-    user: '${UID:-0}:${GID:-0}'
     build:
       context: ../
       dockerfile: server/Dockerfile.dev
@@ -114,8 +107,6 @@ services:
     depends_on:
       immich-server:
         condition: service_started
-      init:
-        condition: service_completed_successfully
 
   immich-machine-learning:
     container_name: immich_machine_learning
@@ -183,25 +174,6 @@ services:
   #   volumes:
   #     - grafana-data:/var/lib/grafana
 
-  init:
-    container_name: init
-    image: busybox@sha256:ab33eacc8251e3807b85bb6dba570e4698c3998eca6f0fc2ccb60575a563ea74
-    env_file:
-      - .env
-    user: 0:0
-    command: sh -c 'find /data -maxdepth 1 -type d -exec chown ${UID:-0}:${GID:-0} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-0}:${GID:-0} "$$path" || true; done'
-    volumes:
-      - pnpm-store:/usr/src/app/.pnpm-store
-      - server-node_modules:/usr/src/app/server/node_modules
-      - web-node_modules:/usr/src/app/web/node_modules
-      - github-node_modules:/usr/src/app/.github/node_modules
-      - cli-node_modules:/usr/src/app/cli/node_modules
-      - docs-node_modules:/usr/src/app/docs/node_modules
-      - e2e-node_modules:/usr/src/app/e2e/node_modules
-      - sdk-node_modules:/usr/src/app/open-api/typescript-sdk/node_modules
-      - app-node_modules:/usr/src/app/node_modules
-      - sveltekit:/usr/src/app/web/.svelte-kit
-      - coverage:/usr/src/app/web/coverage
 volumes:
   model-cache:
   prometheus-data:

docs/src/components/community-guides.tsx

@@ -28,6 +28,12 @@ const guides: CommunityGuidesProps[] = [
     description: `synchronize folders in imported library with albums having the folders name.`,
     url: 'https://github.com/immich-app/immich/discussions/3382',
   },
+  {
+    title: 'Immich Podman Quadlets Handbook',
+    description:
+      'A rewrite of the original Immich Docker Compose file using Podman Quadlets, with a set of extra guides in the repository’s wiki.',
+    url: 'https://github.com/linux-universe/immich-podman-quadlets/blob/main/README.md',
+  },
   {
     title: 'Podman/Quadlets Install',
     description: 'Documentation for simple podman setup using quadlets.',

i18n/en.json

@@ -423,6 +423,7 @@
   "album_remove_user_confirmation": "Are you sure you want to remove {user}?",
   "album_search_not_found": "No albums found matching your search",
   "album_share_no_users": "Looks like you have shared this album with all users or you don't have any user to share with.",
+  "album_summary": "Album summary",
   "album_updated": "Album updated",
   "album_updated_setting_description": "Receive an email notification when a shared album has new assets",
   "album_user_left": "Left {album}",
@@ -494,6 +495,8 @@
   "asset_restored_successfully": "Asset restored successfully",
   "asset_skipped": "Skipped",
   "asset_skipped_in_trash": "In trash",
+  "asset_trashed": "Asset trashed",
+  "asset_troubleshoot": "Asset Troubleshoot",
   "asset_uploaded": "Uploaded",
   "asset_uploading": "Uploading…",
   "asset_viewer_settings_subtitle": "Manage your gallery viewer settings",
@@ -527,6 +530,7 @@
   "autoplay_slideshow": "Autoplay slideshow",
   "back": "Back",
   "back_close_deselect": "Back, close, or deselect",
+  "background_backup_running_error": "Background backup is currently running, cannot start manual backup",
   "background_location_permission": "Background location permission",
   "background_location_permission_content": "In order to switch networks when running in the background, Immich must *always* have precise location access so the app can read the Wi-Fi network's name",
   "backup": "Backup",
@@ -738,6 +742,7 @@
   "create_user": "Create user",
   "created": "Created",
   "created_at": "Created",
+  "creating_linked_albums": "Creating linked albums...",
   "crop": "Crop",
   "curated_object_page_title": "Things",
   "current_device": "Current device",
@@ -887,7 +892,9 @@
   "error": "Error",
   "error_change_sort_album": "Failed to change album sort order",
   "error_delete_face": "Error deleting face from asset",
+  "error_getting_places": "Error getting places",
   "error_loading_image": "Error loading image",
+  "error_loading_partners": "Error loading partners: {error}",
   "error_saving_image": "Error: {error}",
   "error_tag_face_bounding_box": "Error tagging face - cannot get bounding box coordinates",
   "error_title": "Error - Something went wrong",
@@ -1052,6 +1059,7 @@
   "favorites_page_no_favorites": "No favorite assets found",
   "feature_photo_updated": "Feature photo updated",
   "features": "Features",
+  "features_in_development": "Features in Development",
   "features_setting_description": "Manage the app features",
   "file_name": "File name",
   "file_name_or_extension": "File name or extension",
@@ -1216,6 +1224,7 @@
   "local": "Local",
   "local_asset_cast_failed": "Unable to cast an asset that is not uploaded to the server",
   "local_assets": "Local Assets",
+  "local_media_summary": "Local Media Summary",
   "local_network": "Local network",
   "local_network_sheet_info": "The app will connect to the server through this URL when using the specified Wi-Fi network",
   "location_permission": "Location permission",
@@ -1227,6 +1236,7 @@
   "location_picker_longitude_hint": "Enter your longitude here",
   "lock": "Lock",
   "locked_folder": "Locked Folder",
+  "log_detail_title": "Log Detail",
   "log_out": "Log out",
   "log_out_all_devices": "Log Out All Devices",
   "logged_in_as": "Logged in as {user}",
@@ -1257,6 +1267,7 @@
   "login_password_changed_success": "Password updated successfully",
   "logout_all_device_confirmation": "Are you sure you want to log out all devices?",
   "logout_this_device_confirmation": "Are you sure you want to log out this device?",
+  "logs": "Logs",
   "longitude": "Longitude",
   "look": "Look",
   "loop_videos": "Loop videos",
@@ -1299,6 +1310,7 @@
   "mark_as_read": "Mark as read",
   "marked_all_as_read": "Marked all as read",
   "matches": "Matches",
+  "matching_assets": "Matching Assets",
   "media_type": "Media type",
   "memories": "Memories",
   "memories_all_caught_up": "All caught up",
@@ -1337,8 +1349,6 @@
   "my_albums": "My albums",
   "name": "Name",
   "name_or_nickname": "Name or nickname",
-  "navigate": "Navigate",
-  "navigate_to_time": "Navigate to Time",
   "network_requirement_photos_upload": "Use cellular data to backup photos",
   "network_requirement_videos_upload": "Use cellular data to backup videos",
   "network_requirements_updated": "Network requirements changed, resetting backup queue",
@@ -1365,20 +1375,25 @@
   "no_assets_message": "CLICK TO UPLOAD YOUR FIRST PHOTO",
   "no_assets_to_show": "No assets to show",
   "no_cast_devices_found": "No cast devices found",
+  "no_checksum_local": "No checksum available - cannot fetch local assets",
+  "no_checksum_remote": "No checksum available - cannot fetch remote asset",
   "no_duplicates_found": "No duplicates were found.",
   "no_exif_info_available": "No exif info available",
   "no_explore_results_message": "Upload more photos to explore your collection.",
   "no_favorites_message": "Add favorites to quickly find your best pictures and videos",
   "no_libraries_message": "Create an external library to view your photos and videos",
+  "no_local_assets_found": "No local assets found with this checksum",
   "no_locked_photos_message": "Photos and videos in the locked folder are hidden and won't show up as you browse or search your library.",
   "no_name": "No Name",
   "no_notifications": "No notifications",
   "no_people_found": "No matching people found",
   "no_places": "No places",
+  "no_remote_assets_found": "No remote assets found with this checksum",
   "no_results": "No results",
   "no_results_description": "Try a synonym or more general keyword",
   "no_shared_albums_message": "Create an album to share photos and videos with people in your network",
   "no_uploads_in_progress": "No uploads in progress",
+  "not_available": "N/A",
   "not_in_any_album": "Not in any album",
   "not_selected": "Not selected",
   "note_apply_storage_label_to_previously_uploaded assets": "Note: To apply the Storage Label to previously uploaded assets, run the",
@@ -1589,6 +1604,7 @@
   "regenerating_thumbnails": "Regenerating thumbnails",
   "remote": "Remote",
   "remote_assets": "Remote Assets",
+  "remote_media_summary": "Remote Media Summary",
   "remove": "Remove",
   "remove_assets_album_confirmation": "Are you sure you want to remove {count, plural, one {# asset} other {# assets}} from the album?",
   "remove_assets_shared_link_confirmation": "Are you sure you want to remove {count, plural, one {# asset} other {# assets}} from this shared link?",
@@ -1864,6 +1880,7 @@
   "show_slideshow_transition": "Show slideshow transition",
   "show_supporter_badge": "Supporter badge",
   "show_supporter_badge_description": "Show a supporter badge",
+  "show_text_search_menu": "Show text search menu",
   "shuffle": "Shuffle",
   "sidebar": "Sidebar",
   "sidebar_display_description": "Display a link to the view in the sidebar",
@@ -2096,5 +2113,6 @@
   "yes": "Yes",
   "you_dont_have_any_shared_links": "You don't have any shared links",
   "your_wifi_name": "Your Wi-Fi name",
-  "zoom_image": "Zoom Image"
+  "zoom_image": "Zoom Image",
+  "zoom_to_bounds": "Zoom to bounds"
 }

mise.toml

@@ -300,7 +300,7 @@ run = "tsc --noEmit"
 depends = "web:svelte-kit-sync"
 env._.path = "web/node_modules/.bin"
 dir = "web"
-run = "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/photos-page/asset-grid.svelte"
+run = "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/timeline/Timeline.svelte"
 
 [tasks."web:checklist"]
 run = [

mobile/lib/pages/backup/backup_controller.page.dart

@@ -205,9 +205,9 @@ class BackupControllerPage extends HookConsumerWidget {
     }
 
     buildBackgroundBackupInfo() {
-      return const ListTile(
-        leading: Icon(Icons.info_outline_rounded),
-        title: Text("Background backup is currently running, cannot start manual backup"),
+      return ListTile(
+        leading: const Icon(Icons.info_outline_rounded),
+        title: Text('background_backup_running_error'.tr()),
       );
     }
 

mobile/lib/pages/backup/drift_backup_album_selection.page.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/album/local_album.model.dart';
@@ -249,7 +250,7 @@ class _DriftBackupAlbumSelectionPageState extends ConsumerState<DriftBackupAlbum
                           mainAxisSize: MainAxisSize.max,
                           children: [
                             const CircularProgressIndicator(strokeWidth: 4),
-                            Text("Creating linked albums...", style: context.textTheme.labelLarge),
+                            Text('creating_linked_albums'.tr(), style: context.textTheme.labelLarge),
                           ],
                         ),
                       ),

mobile/lib/pages/backup/drift_backup_asset_detail.page.dart

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
@@ -58,8 +59,10 @@ class DriftBackupAssetDetailPage extends ConsumerWidget {
                           overflow: TextOverflow.ellipsis,
                         );
                       },
-                      error: (error, stackTrace) =>
-                          Text('Error: $error', style: TextStyle(color: context.colorScheme.error)),
+                      error: (error, stackTrace) => Text(
+                        'error_saving_image'.tr(args: [error.toString()]),
+                        style: TextStyle(color: context.colorScheme.error),
+                      ),
                       loading: () => const SizedBox(height: 16, width: 16, child: CircularProgressIndicator.adaptive()),
                     ),
                   ],
@@ -83,7 +86,7 @@ class DriftBackupAssetDetailPage extends ConsumerWidget {
           );
         },
         error: (Object error, StackTrace stackTrace) {
-          return Center(child: Text('Error: $error'));
+          return Center(child: Text('error_saving_image'.tr(args: [error.toString()])));
         },
         loading: () {
           return const SizedBox(height: 48, width: 48, child: Center(child: CircularProgressIndicator.adaptive()));

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

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -8,7 +9,6 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/services/immich_logger.service.dart';
-import 'package:intl/intl.dart';
 
 @RoutePage()
 class AppLogPage extends HookConsumerWidget {
@@ -49,7 +49,7 @@ class AppLogPage extends HookConsumerWidget {
 
     return Scaffold(
       appBar: AppBar(
-        title: const Text("Logs", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0)),
+        title: Text('logs'.tr(), style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0)),
         scrolledUnderElevation: 1,
         elevation: 2,
         actions: [

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

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -36,7 +37,7 @@ class AppLogDetailPage extends HookConsumerWidget {
                       context.scaffoldMessenger.showSnackBar(
                         SnackBar(
                           content: Text(
-                            "Copied to clipboard",
+                            "copied_to_clipboard".tr(),
                             style: context.textTheme.bodyLarge?.copyWith(color: context.primaryColor),
                           ),
                         ),
@@ -97,7 +98,7 @@ class AppLogDetailPage extends HookConsumerWidget {
     }
 
     return Scaffold(
-      appBar: AppBar(title: const Text("Log Detail")),
+      appBar: AppBar(title: Text("log_detail_title".tr())),
       body: SafeArea(
         child: ListView(
           children: [

mobile/lib/pages/library/partner/drift_partner.page.dart

@@ -134,7 +134,7 @@ class _SharedToPartnerList extends ConsumerWidget {
         );
       },
       loading: () => const Center(child: CircularProgressIndicator()),
-      error: (error, stack) => Center(child: Text("Error loading partners: $error")),
+      error: (error, stack) => Center(child: Text('error_loading_partners'.tr(args: [error.toString()]))),
     );
   }
 }

mobile/lib/pages/library/places/places_collection.page.dart

@@ -85,7 +85,7 @@ class PlacesCollectionPage extends HookConsumerWidget {
                 },
               );
             },
-            error: (error, stask) => const Text('Error getting places'),
+            error: (error, stask) => Text('error_getting_places'.tr()),
             loading: () => const Center(child: CircularProgressIndicator()),
           ),
         ],

mobile/lib/pages/search/search.page.dart

@@ -435,7 +435,7 @@ class SearchPage extends HookConsumerWidget {
                     }
                   },
                   icon: const Icon(Icons.more_vert_rounded),
-                  tooltip: 'Show text search menu',
+                  tooltip: 'show_text_search_menu'.tr(),
                 );
               },
               menuChildren: [

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

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:auto_route/auto_route.dart';
 import 'package:drift/drift.dart' hide Column;
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
@@ -135,7 +136,7 @@ class FeatInDevPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Features in Development'), centerTitle: true),
+      appBar: AppBar(title: Text('features_in_development'.tr()), centerTitle: true),
       body: Column(
         children: [
           Flexible(

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

@@ -15,6 +15,7 @@ class MainTimelinePage extends ConsumerWidget {
     return Timeline(
       topSliverWidget: const SliverToBoxAdapter(child: DriftMemoryLane()),
       topSliverWidgetHeight: hasMemories ? 200 : 0,
+      showStorageIndicator: true,
     );
   }
 }

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

@@ -1,5 +1,6 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
@@ -55,7 +56,7 @@ class LocalMediaSummaryPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Local Media Summary')),
+      appBar: AppBar(title: Text('local_media_summary'.tr())),
       body: Consumer(
         builder: (ctx, ref, __) {
           final db = ref.watch(driftProvider);
@@ -78,7 +79,7 @@ class LocalMediaSummaryPage extends StatelessWidget {
                     const Divider(),
                     Padding(
                       padding: const EdgeInsets.only(left: 15),
-                      child: Text("Album summary", style: ctx.textTheme.titleMedium),
+                      child: Text("album_summary".tr(), style: ctx.textTheme.titleMedium),
                     ),
                   ],
                 ),
@@ -135,7 +136,7 @@ class RemoteMediaSummaryPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Remote Media Summary')),
+      appBar: AppBar(title: Text('remote_media_summary'.tr())),
       body: Consumer(
         builder: (ctx, ref, __) {
           final db = ref.watch(driftProvider);
@@ -158,7 +159,7 @@ class RemoteMediaSummaryPage extends StatelessWidget {
                     const Divider(),
                     Padding(
                       padding: const EdgeInsets.only(left: 15),
-                      child: Text("Album summary", style: ctx.textTheme.titleMedium),
+                      child: Text("album_summary".tr(), style: ctx.textTheme.titleMedium),
                     ),
                   ],
                 ),

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

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
@@ -14,7 +15,7 @@ class AssetTroubleshootPage extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return Scaffold(
-      appBar: AppBar(title: const Text("Asset Troubleshoot")),
+      appBar: AppBar(title: Text('asset_troubleshoot'.tr())),
       body: SingleChildScrollView(
         child: Padding(
           padding: const EdgeInsets.all(16.0),
@@ -37,20 +38,23 @@ class _AssetDetailsView extends ConsumerWidget {
       children: [
         _AssetPropertiesSection(asset: asset),
         const SizedBox(height: 16),
-        Text('Matching Assets', style: Theme.of(context).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold)),
+        Text(
+          'matching_assets'.tr(),
+          style: Theme.of(context).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold),
+        ),
         if (asset.checksum != null) ...[
           _LocalAssetsSection(asset: asset),
           const SizedBox(height: 16),
           _RemoteAssetSection(asset: asset),
         ] else ...[
-          const _PropertySectionCard(
+          _PropertySectionCard(
             title: 'Local Assets',
-            properties: [_PropertyItem(label: 'Status', value: 'No checksum available - cannot fetch local assets')],
+            properties: [_PropertyItem(label: 'Status', value: 'no_checksum_local'.tr())],
           ),
           const SizedBox(height: 16),
-          const _PropertySectionCard(
+          _PropertySectionCard(
             title: 'Remote Assets',
-            properties: [_PropertyItem(label: 'Status', value: 'No checksum available - cannot fetch remote asset')],
+            properties: [_PropertyItem(label: 'Status', value: 'no_checksum_remote'.tr())],
           ),
         ],
       ],
@@ -222,9 +226,9 @@ class _LocalAssetsSection extends ConsumerWidget {
         }
 
         if (localAssets.isEmpty) {
-          return const _PropertySectionCard(
+          return _PropertySectionCard(
             title: 'Local Assets',
-            properties: [_PropertyItem(label: 'Status', value: 'No local assets found with this checksum')],
+            properties: [_PropertyItem(label: 'Status', value: 'no_local_assets_found'.tr())],
           );
         }
 
@@ -281,9 +285,9 @@ class _RemoteAssetSection extends ConsumerWidget {
         final remoteAsset = snapshot.data;
 
         if (remoteAsset == null) {
-          return const _PropertySectionCard(
+          return _PropertySectionCard(
             title: 'Remote Assets',
-            properties: [_PropertyItem(label: 'Status', value: 'No remote asset found with this checksum')],
+            properties: [_PropertyItem(label: 'Status', value: 'no_remote_assets_found'.tr())],
           );
         }
 
@@ -336,7 +340,10 @@ class _PropertyItem extends StatelessWidget {
             child: Text('$label:', style: const TextStyle(fontWeight: FontWeight.w500)),
           ),
           Expanded(
-            child: Text(value ?? 'N/A', style: TextStyle(color: Theme.of(context).colorScheme.secondary)),
+            child: Text(
+              value ?? 'not_available'.tr(),
+              style: TextStyle(color: Theme.of(context).colorScheme.secondary),
+            ),
           ),
         ],
       ),

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

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
@@ -302,7 +303,9 @@ class _LocalAlbumsCollectionCard extends ConsumerWidget {
                         }).toList();
                       },
                       error: (error, _) {
-                        return [Center(child: Text('Error: $error'))];
+                        return [
+                          Center(child: Text('error_saving_image'.tr(args: [error.toString()]))),
+                        ];
                       },
                       loading: () {
                         return [const Center(child: CircularProgressIndicator())];

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

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
@@ -46,9 +47,9 @@ class _AlbumList extends ConsumerWidget {
       ),
       data: (albums) {
         if (albums.isEmpty) {
-          return const SliverToBoxAdapter(
+          return SliverToBoxAdapter(
             child: Center(
-              child: Padding(padding: EdgeInsets.all(20.0), child: Text('No albums found')),
+              child: Padding(padding: const EdgeInsets.all(20.0), child: Text('no_albums_yet'.tr())),
             ),
           );
         }

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

@@ -26,6 +26,7 @@ class LocalTimelinePage extends StatelessWidget {
       child: Timeline(
         appBar: MesmerizingSliverAppBar(title: album.name),
         bottomSheet: const LocalAlbumBottomSheet(),
+        showStorageIndicator: true,
       ),
     );
   }

mobile/lib/presentation/pages/search/drift_search.page.dart

@@ -440,7 +440,7 @@ class DriftSearchPage extends HookConsumerWidget {
                     }
                   },
                   icon: const Icon(Icons.more_vert_rounded),
-                  tooltip: 'Show text search menu',
+                  tooltip: 'show_text_search_menu'.tr(),
                 );
               },
               menuChildren: [
@@ -633,6 +633,7 @@ class _SearchResultGrid extends ConsumerWidget {
             groupBy: GroupAssetsBy.none,
             appBar: null,
             bottomSheet: const GeneralBottomSheet(minChildSize: 0.20),
+            withScrubber: false,
           ),
         ),
       ),

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

@@ -1,4 +1,5 @@
 import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
@@ -58,7 +59,7 @@ class LikeActivityActionButton extends ConsumerWidget {
         label: "like".t(context: context),
         menuItem: menuItem,
       ),
-      error: (error, stack) => Text("Error: $error"),
+      error: (error, stack) => Text('error_saving_image'.tr(args: [error.toString()])),
     );
   }
 }

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

@@ -504,9 +504,9 @@ class _AlbumList extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     if (albums.isEmpty) {
-      return const SliverToBoxAdapter(
+      return SliverToBoxAdapter(
         child: Center(
-          child: Padding(padding: EdgeInsets.all(20.0), child: Text('No albums found')),
+          child: Padding(padding: const EdgeInsets.all(20.0), child: Text('album_search_not_found'.tr())),
         ),
       );
     }
@@ -599,9 +599,9 @@ class _AlbumGrid extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     if (albums.isEmpty) {
-      return const SliverToBoxAdapter(
+      return SliverToBoxAdapter(
         child: Center(
-          child: Padding(padding: EdgeInsets.all(20.0), child: Text('No albums found')),
+          child: Padding(padding: const EdgeInsets.all(20.0), child: Text('album_search_not_found'.tr())),
         ),
       );
     }

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

@@ -32,7 +32,7 @@ class Timeline extends StatelessWidget {
     super.key,
     this.topSliverWidget,
     this.topSliverWidgetHeight,
-    this.showStorageIndicator,
+    this.showStorageIndicator = false,
     this.withStack = false,
     this.appBar = const ImmichSliverAppBar(floating: true, pinned: false, snap: false),
     this.bottomSheet = const GeneralBottomSheet(minChildSize: 0.18),
@@ -42,7 +42,7 @@ class Timeline extends StatelessWidget {
 
   final Widget? topSliverWidget;
   final double? topSliverWidgetHeight;
-  final bool? showStorageIndicator;
+  final bool showStorageIndicator;
   final Widget? appBar;
   final Widget? bottomSheet;
   final bool withStack;

mobile/lib/widgets/asset_viewer/bottom_gallery_bar.dart

@@ -98,7 +98,12 @@ class BottomGalleryBar extends ConsumerWidget {
         if (isDeleted) {
           // Can only trash assets stored in server. Local assets are always permanently removed for now
           if (context.mounted && asset.isRemote && isStackPrimaryAsset) {
-            ImmichToast.show(durationInSecond: 1, context: context, msg: 'Asset trashed', gravity: ToastGravity.BOTTOM);
+            ImmichToast.show(
+              durationInSecond: 1,
+              context: context,
+              msg: 'asset_trashed'.tr(),
+              gravity: ToastGravity.BOTTOM,
+            );
           }
           removeAssetFromStack();
         }

mobile/lib/widgets/asset_viewer/cast_dialog.dart

@@ -29,7 +29,7 @@ class CastDialog extends ConsumerWidget {
           future: ref.read(castProvider.notifier).getDevices(),
           builder: (context, snapshot) {
             if (snapshot.hasError) {
-              return Text('Error: ${snapshot.error.toString()}');
+              return Text('error_saving_image'.tr(args: [snapshot.error.toString()]));
             } else if (!snapshot.hasData) {
               return const SizedBox(height: 48, child: Center(child: CircularProgressIndicator()));
             }

mobile/lib/widgets/map/map_asset_grid.dart

@@ -275,7 +275,7 @@ class _MapSheetDragRegion extends StatelessWidget {
                   child: IconButton(
                     icon: Icon(Icons.map_outlined, color: context.textTheme.displayLarge?.color),
                     iconSize: 24,
-                    tooltip: 'Zoom to bounds',
+                    tooltip: 'zoom_to_bounds'.tr(),
                     onPressed: () => onZoomToAsset?.call(value!),
                   ),
                 ),

pnpm-lock.yaml

@@ -127,13 +127,13 @@ importers:
     dependencies:
       '@docusaurus/core':
         specifier: ~3.8.0
-        version: 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+        version: 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/preset-classic':
         specifier: ~3.8.0
-        version: 3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(@types/react@19.1.12)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)
+        version: 3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(@types/react@19.1.13)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)
       '@docusaurus/theme-common':
         specifier: ~3.8.0
-        version: 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mdi/js':
         specifier: ^7.3.67
         version: 7.4.47
@@ -142,16 +142,16 @@ importers:
         version: 1.6.1
       '@mdx-js/react':
         specifier: ^3.0.0
-        version: 3.1.0(@types/react@19.1.12)(react@18.3.1)
+        version: 3.1.0(@types/react@19.1.13)(react@18.3.1)
       autoprefixer:
         specifier: ^10.4.17
         version: 10.4.21(postcss@8.5.6)
       docusaurus-lunr-search:
         specifier: ^3.3.2
-        version: 3.6.0(@docusaurus/core@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 3.6.0(@docusaurus/core@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       docusaurus-preset-openapi:
         specifier: ^0.7.5
-        version: 0.7.6(@algolia/client-search@5.29.0)(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(@types/react@19.1.12)(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1)(search-insights@2.17.3)(typescript@5.9.2)
+        version: 0.7.6(@algolia/client-search@5.29.0)(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(@types/react@19.1.13)(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1)(search-insights@2.17.3)(typescript@5.9.2)
       lunr:
         specifier: ^2.3.9
         version: 2.3.9
@@ -684,8 +684,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.27.1
-        version: 0.27.1(@internationalized/date@3.8.2)(svelte@5.35.5)
+        specifier: ^0.27.2
+        version: 0.27.2(@internationalized/date@3.8.2)(svelte@5.35.5)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -2405,8 +2405,8 @@ packages:
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
-  '@floating-ui/dom@1.7.3':
-    resolution: {integrity: sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==}
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
 
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
@@ -2589,8 +2589,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@immich/ui@0.27.1':
-    resolution: {integrity: sha512-d/LqCpFZwaZ6Vp2wz+DkhMirMle2zL/y4SHyKLmA0QI6pwz+yZaym6DlYkx3ZPKlN10/ugeHi58fXdlMxJiuKA==}
+  '@immich/ui@0.27.2':
+    resolution: {integrity: sha512-woPBYtuKFYApOwI9KS6Zj/6p9KkzPJLfzu4zSH7nF7lxVguk8DakHxR08ENnVq34lJHlIjl4PEv7jo69CJkE6w==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -4274,6 +4274,9 @@ packages:
   '@types/node@22.18.1':
     resolution: {integrity: sha512-rzSDyhn4cYznVG+PCzGe1lwuMYJrcBS1fc3JqSa2PvtABwWo+dZ1ij5OVok3tqfpEBCBoaR4d7upFJk73HRJDw==}
 
+  '@types/node@22.18.4':
+    resolution: {integrity: sha512-UJdblFqXymSBhmZf96BnbisoFIr8ooiiBRMolQgg77Ea+VM37jXw76C2LQr9n8wm9+i/OvlUlW6xSvqwzwqznw==}
+
   '@types/node@24.3.0':
     resolution: {integrity: sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==}
 
@@ -4328,6 +4331,9 @@ packages:
   '@types/react@19.1.12':
     resolution: {integrity: sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==}
 
+  '@types/react@19.1.13':
+    resolution: {integrity: sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==}
+
   '@types/readdir-glob@1.1.5':
     resolution: {integrity: sha512-raiuEPUYqXu+nvtY2Pe8s8FEmZ3x5yAH4VkLdihcPdalvsHltomrRC9BzuStrJ9yk06470hS0Crw0f1pXqD+Hg==}
 
@@ -4926,8 +4932,8 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  bits-ui@2.9.4:
-    resolution: {integrity: sha512-Cqn685P6DDuEyBZT/CWMyS5+8JAnYbctvoEVPcmiut+HUpG3SozVgjoDaUib5VG4ZYUKEi1FPwHxiXo9c6J0PA==}
+  bits-ui@2.9.8:
+    resolution: {integrity: sha512-oVAqdhLSuGIgEiT0yu3ShSI7AxncCxX26Gv6Lul94BuKHV2uzHoKfIodtnMQSq+udJ54svuCIRqA58whsv7vaA==}
     engines: {node: '>=20'}
     peerDependencies:
       '@internationalized/date': ^3.8.1
@@ -9991,8 +9997,8 @@ packages:
   simple-get@3.1.1:
     resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==}
 
-  simple-icons@15.14.0:
-    resolution: {integrity: sha512-eTBZiiwDFN8RPkcmHKoUz1+sckeqNQXv5ujQcgQddDzp3xuDIFWeZh/i0oEv1StOPsf9NPMC0gTBxUzhPqHzag==}
+  simple-icons@15.15.0:
+    resolution: {integrity: sha512-ohh1Uo9AjH10WN5wpPmtjnmbSLv6MjiULHS4dYA821uIsPAp0Q3XoluPnjBnQAFsztasmM6z2dezJBrQbtserg==}
     engines: {node: '>=0.12.18'}
 
   simple-swizzle@0.2.2:
@@ -12534,14 +12540,14 @@ snapshots:
 
   '@docsearch/css@3.9.0': {}
 
-  '@docsearch/react@3.9.0(@algolia/client-search@5.29.0)(@types/react@19.1.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
+  '@docsearch/react@3.9.0(@algolia/client-search@5.29.0)(@types/react@19.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.9(@algolia/client-search@5.29.0)(algoliasearch@5.29.0)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.9(@algolia/client-search@5.29.0)(algoliasearch@5.29.0)
       '@docsearch/css': 3.9.0
       algoliasearch: 5.29.0
     optionalDependencies:
-      '@types/react': 19.1.12
+      '@types/react': 19.1.13
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       search-insights: 2.17.3
@@ -12617,7 +12623,7 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/core@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/core@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
       '@docusaurus/babel': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/bundler': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
@@ -12626,7 +12632,7 @@ snapshots:
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-common': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mdx-js/react': 3.1.0(@types/react@19.1.12)(react@18.3.1)
+      '@mdx-js/react': 3.1.0(@types/react@19.1.13)(react@18.3.1)
       boxen: 6.2.1
       chalk: 4.1.2
       chokidar: 3.6.0
@@ -12749,13 +12755,13 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/plugin-content-blog@3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-content-blog@3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/logger': 3.8.1
       '@docusaurus/mdx-loader': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-common': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12791,13 +12797,13 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/logger': 3.8.1
       '@docusaurus/mdx-loader': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/module-type-aliases': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-common': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12832,9 +12838,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-content-pages@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-content-pages@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/mdx-loader': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12863,9 +12869,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-css-cascade-layers@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-css-cascade-layers@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12891,9 +12897,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-debug@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-debug@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       fs-extra: 11.3.0
@@ -12920,9 +12926,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-google-analytics@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-google-analytics@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
@@ -12947,9 +12953,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-google-gtag@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-google-gtag@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/gtag.js': 0.0.12
@@ -12975,9 +12981,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-google-tag-manager@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-google-tag-manager@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
@@ -13002,9 +13008,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-sitemap@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-sitemap@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/logger': 3.8.1
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -13034,9 +13040,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-svgr@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/plugin-svgr@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -13065,22 +13071,22 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/preset-classic@3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(@types/react@19.1.12)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)':
+  '@docusaurus/preset-classic@3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(@types/react@19.1.13)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-content-blog': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-content-pages': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-css-cascade-layers': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-debug': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-google-analytics': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-google-gtag': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-google-tag-manager': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-sitemap': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-svgr': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/theme-classic': 3.8.1(@types/react@19.1.12)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@docusaurus/theme-search-algolia': 3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(@types/react@19.1.12)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-content-blog': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-content-pages': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-css-cascade-layers': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-debug': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-google-analytics': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-google-gtag': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-google-tag-manager': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-sitemap': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-svgr': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/theme-classic': 3.8.1(@types/react@19.1.13)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@docusaurus/theme-search-algolia': 3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(@types/react@19.1.13)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -13111,22 +13117,22 @@ snapshots:
       '@types/react': 19.1.12
       react: 18.3.1
 
-  '@docusaurus/theme-classic@3.8.1(@types/react@19.1.12)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
+  '@docusaurus/theme-classic@3.8.1(@types/react@19.1.13)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)':
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/logger': 3.8.1
       '@docusaurus/mdx-loader': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/module-type-aliases': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@docusaurus/plugin-content-blog': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/plugin-content-pages': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@docusaurus/plugin-content-blog': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-content-pages': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/theme-translations': 3.8.1
       '@docusaurus/types': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-common': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mdx-js/react': 3.1.0(@types/react@19.1.12)(react@18.3.1)
+      '@mdx-js/react': 3.1.0(@types/react@19.1.13)(react@18.3.1)
       clsx: 2.1.1
       copy-text-to-clipboard: 3.2.0
       infima: 0.2.0-alpha.45
@@ -13160,11 +13166,11 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/theme-common@3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@docusaurus/theme-common@3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@docusaurus/mdx-loader': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/module-type-aliases': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-common': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/history': 4.7.11
@@ -13185,13 +13191,13 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/theme-search-algolia@3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(@types/react@19.1.12)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)':
+  '@docusaurus/theme-search-algolia@3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(@types/react@19.1.13)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)':
     dependencies:
-      '@docsearch/react': 3.9.0(@algolia/client-search@5.29.0)(@types/react@19.1.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docsearch/react': 3.9.0(@algolia/client-search@5.29.0)(@types/react@19.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/logger': 3.8.1
-      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
-      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/theme-translations': 3.8.1
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -13544,7 +13550,7 @@ snapshots:
     dependencies:
       '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/dom@1.7.3':
+  '@floating-ui/dom@1.7.4':
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
@@ -13700,11 +13706,11 @@ snapshots:
   '@img/sharp-win32-x64@0.34.3':
     optional: true
 
-  '@immich/ui@0.27.1(@internationalized/date@3.8.2)(svelte@5.35.5)':
+  '@immich/ui@0.27.2(@internationalized/date@3.8.2)(svelte@5.35.5)':
     dependencies:
       '@mdi/js': 7.4.47
-      bits-ui: 2.9.4(@internationalized/date@3.8.2)(svelte@5.35.5)
-      simple-icons: 15.14.0
+      bits-ui: 2.9.8(@internationalized/date@3.8.2)(svelte@5.35.5)
+      simple-icons: 15.15.0
       svelte: 5.35.5
       tailwind-merge: 3.3.1
       tailwind-variants: 3.1.1(tailwind-merge@3.3.1)(tailwindcss@4.1.12)
@@ -14076,10 +14082,10 @@ snapshots:
       - acorn
       - supports-color
 
-  '@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1)':
+  '@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1)':
     dependencies:
       '@types/mdx': 2.0.13
-      '@types/react': 19.1.12
+      '@types/react': 19.1.13
       react: 18.3.1
 
   '@microsoft/tsdoc@0.15.1': {}
@@ -15443,7 +15449,7 @@ snapshots:
 
   '@types/hoist-non-react-statics@3.3.6':
     dependencies:
-      '@types/react': 19.1.12
+      '@types/react': 19.1.13
       hoist-non-react-statics: 3.3.2
 
   '@types/html-minifier-terser@6.1.0': {}
@@ -15557,6 +15563,10 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/node@22.18.4':
+    dependencies:
+      undici-types: 6.21.0
+
   '@types/node@24.3.0':
     dependencies:
       undici-types: 7.10.0
@@ -15609,7 +15619,7 @@ snapshots:
   '@types/react-redux@7.1.34':
     dependencies:
       '@types/hoist-non-react-statics': 3.3.6
-      '@types/react': 19.1.12
+      '@types/react': 19.1.13
       hoist-non-react-statics: 3.3.2
       redux: 4.2.1
 
@@ -15634,6 +15644,10 @@ snapshots:
     dependencies:
       csstype: 3.1.3
 
+  '@types/react@19.1.13':
+    dependencies:
+      csstype: 3.1.3
+
   '@types/readdir-glob@1.1.5':
     dependencies:
       '@types/node': 22.18.1
@@ -15700,7 +15714,7 @@ snapshots:
 
   '@types/through@0.0.33':
     dependencies:
-      '@types/node': 22.18.1
+      '@types/node': 22.18.4
 
   '@types/ua-parser-js@0.7.39': {}
 
@@ -16367,10 +16381,10 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bits-ui@2.9.4(@internationalized/date@3.8.2)(svelte@5.35.5):
+  bits-ui@2.9.8(@internationalized/date@3.8.2)(svelte@5.35.5):
     dependencies:
       '@floating-ui/core': 1.7.3
-      '@floating-ui/dom': 1.7.3
+      '@floating-ui/dom': 1.7.4
       '@internationalized/date': 3.8.2
       esm-env: 1.2.2
       runed: 0.29.2(svelte@5.35.5)
@@ -17356,9 +17370,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  docusaurus-lunr-search@3.6.0(@docusaurus/core@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  docusaurus-lunr-search@3.6.0(@docusaurus/core@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/core': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       autocomplete.js: 0.37.1
       clsx: 2.1.1
       gauge: 3.0.2
@@ -17376,10 +17390,10 @@ snapshots:
       unified: 9.2.2
       unist-util-is: 4.1.0
 
-  docusaurus-plugin-openapi@0.7.6(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2):
+  docusaurus-plugin-openapi@0.7.6(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2):
     dependencies:
       '@docusaurus/mdx-loader': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/plugin-content-docs': 3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       '@docusaurus/utils': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-common': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@docusaurus/utils-validation': 3.8.1(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -17416,12 +17430,12 @@ snapshots:
 
   docusaurus-plugin-proxy@0.7.6: {}
 
-  docusaurus-preset-openapi@0.7.6(@algolia/client-search@5.29.0)(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(@types/react@19.1.12)(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1)(search-insights@2.17.3)(typescript@5.9.2):
+  docusaurus-preset-openapi@0.7.6(@algolia/client-search@5.29.0)(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(@types/react@19.1.13)(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1)(search-insights@2.17.3)(typescript@5.9.2):
     dependencies:
-      '@docusaurus/preset-classic': 3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(@types/react@19.1.12)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)
-      docusaurus-plugin-openapi: 0.7.6(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      '@docusaurus/preset-classic': 3.8.1(@algolia/client-search@5.29.0)(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(@types/react@19.1.13)(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.2)
+      docusaurus-plugin-openapi: 0.7.6(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       docusaurus-plugin-proxy: 0.7.6
-      docusaurus-theme-openapi: 0.7.6(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@types/react@19.1.12)(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1)(typescript@5.9.2)
+      docusaurus-theme-openapi: 0.7.6(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@types/react@19.1.13)(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1)(typescript@5.9.2)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
@@ -17450,16 +17464,16 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  docusaurus-theme-openapi@0.7.6(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@types/react@19.1.12)(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1)(typescript@5.9.2):
+  docusaurus-theme-openapi@0.7.6(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(@types/react@19.1.13)(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1)(typescript@5.9.2):
     dependencies:
-      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mdx-js/react': 3.1.0(@types/react@19.1.12)(react@18.3.1)
+      '@docusaurus/theme-common': 3.8.1(@docusaurus/plugin-content-docs@3.8.1(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2))(acorn@8.15.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mdx-js/react': 3.1.0(@types/react@19.1.13)(react@18.3.1)
       '@monaco-editor/react': 4.7.0(monaco-editor@0.31.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@reduxjs/toolkit': 1.9.7(react-redux@7.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       buffer: 6.0.3
       clsx: 1.2.1
       crypto-js: 4.2.0
-      docusaurus-plugin-openapi: 0.7.6(@mdx-js/react@3.1.0(@types/react@19.1.12)(react@18.3.1))(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
+      docusaurus-plugin-openapi: 0.7.6(@mdx-js/react@3.1.0(@types/react@19.1.13)(react@18.3.1))(acorn@8.15.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.2)
       immer: 9.0.21
       lodash: 4.17.21
       marked: 11.2.0
@@ -22619,7 +22633,7 @@ snapshots:
       simple-concat: 1.0.1
     optional: true
 
-  simple-icons@15.14.0: {}
+  simple-icons@15.15.0: {}
 
   simple-swizzle@0.2.2:
     dependencies:

web/bin/immich-web

@@ -1,8 +1,9 @@
 #!/usr/bin/env sh
 
-echo "Build dependencies for Immich Web"
 cd /usr/src/app || exit
 
+pnpm --filter @immich/sdk build
+
 COUNT=0
 UPSTREAM="${IMMICH_SERVER_URL:-http://immich-server:2283/}"
 UPSTREAM="${UPSTREAM%/}"
@@ -14,5 +15,4 @@ until wget --spider --quiet "${UPSTREAM}/api/server/config" > /dev/null 2>&1; do
     sleep 1
 done
 echo "Connected to $UPSTREAM, starting Immich Web..."
-pnpm --filter @immich/sdk build
 pnpm --filter immich-web exec vite dev --host 0.0.0.0 --port 3000

web/package.json

@@ -9,7 +9,7 @@
     "build:stats": "BUILD_STATS=true vite build",
     "package": "svelte-kit package",
     "preview": "vite preview",
-    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/photos-page/asset-grid.svelte",
+    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/timeline/Timeline.svelte",
     "check:typescript": "tsc --noEmit",
     "check:watch": "npm run check:svelte -- --watch",
     "check:code": "npm run format && npm run lint:p && npm run check:svelte && npm run check:typescript",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.27.1",
+    "@immich/ui": "^0.27.2",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/lib/components/album-page/album-viewer.svelte

@@ -2,8 +2,10 @@
   import { shortcut } from '$lib/actions/shortcut';
   import CastButton from '$lib/cast/cast-button.svelte';
   import AlbumMap from '$lib/components/album-page/album-map.svelte';
-  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -17,8 +19,6 @@
   import { mdiDownload, mdiFileImagePlusOutline } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
-  import DownloadAction from '../photos-page/actions/download-action.svelte';
-  import AssetGrid from '../photos-page/asset-grid.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
@@ -61,7 +61,7 @@
 />
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <AssetGrid enableRouting={true} {album} {timelineManager} {assetInteraction}>
+  <Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
     <section class="pt-8 md:pt-24 px-2 md:px-0">
       <!-- ALBUM TITLE -->
       <h1
@@ -83,7 +83,7 @@
         </p>
       {/if}
     </section>
-  </AssetGrid>
+  </Timeline>
 </main>
 
 <header>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -19,9 +19,12 @@
   import ShareAction from '$lib/components/asset-viewer/actions/share-action.svelte';
   import ShowDetailAction from '$lib/components/asset-viewer/actions/show-detail-action.svelte';
   import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AppRoute } from '$lib/constants';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
@@ -41,6 +44,7 @@
   import { IconButton } from '@immich/ui';
   import {
     mdiAlertOutline,
+    mdiCheckCircle,
     mdiCogRefreshOutline,
     mdiCompare,
     mdiContentCopy,
@@ -59,12 +63,14 @@
 
   interface Props {
     asset: AssetResponseDto;
+    assetInteraction?: AssetInteraction | null;
     album?: AlbumResponseDto | null;
     person?: PersonResponseDto | null;
     stack?: StackResponseDto | null;
     showCloseButton?: boolean;
     showDetailButton: boolean;
     showSlideshow?: boolean;
+    onSelectAsset?: (asset: TimelineAsset) => void;
     onZoomImage: () => void;
     onCopyImage?: () => Promise<void>;
     preAction: PreAction;
@@ -79,12 +85,14 @@
 
   let {
     asset,
+    assetInteraction,
     album = null,
     person = null,
     stack = null,
     showCloseButton = true,
     showDetailButton,
     showSlideshow = false,
+    onSelectAsset,
     onZoomImage,
     onCopyImage,
     preAction,
@@ -102,6 +110,7 @@
   let isLocked = $derived(asset.visibility === AssetVisibility.Locked);
   let smartSearchEnabled = $derived($featureFlags.loaded && $featureFlags.smartSearch);
 
+  let selected = $derived(assetInteraction?.hasSelectedAsset(asset.id));
   // $: showEditorButton =
   //   isOwner &&
   //   asset.type === AssetTypeEnum.Image &&
@@ -122,149 +131,182 @@
     {/if}
   </div>
   <div class="flex gap-2 overflow-x-auto dark" data-testid="asset-viewer-navbar-actions">
-    <CastButton />
-
-    {#if !asset.isTrashed && $user && !isLocked}
-      <ShareAction {asset} />
-    {/if}
-    {#if asset.isOffline}
-      <IconButton
-        shape="round"
-        color="danger"
-        icon={mdiAlertOutline}
-        onclick={onShowDetail}
-        aria-label={$t('asset_offline')}
-      />
-    {/if}
-    {#if asset.livePhotoVideoId}
-      {@render motionPhoto?.()}
-    {/if}
-    {#if asset.type === AssetTypeEnum.Image}
-      <IconButton
-        class="hidden sm:flex"
-        color="secondary"
-        variant="ghost"
-        shape="round"
-        icon={$photoZoomState && $photoZoomState.currentZoom > 1 ? mdiMagnifyMinusOutline : mdiMagnifyPlusOutline}
-        aria-label={$t('zoom_image')}
-        onclick={onZoomImage}
-      />
-    {/if}
-    {#if canCopyImageToClipboard() && asset.type === AssetTypeEnum.Image}
-      <IconButton
-        color="secondary"
-        variant="ghost"
-        shape="round"
-        icon={mdiContentCopy}
-        aria-label={$t('copy_image')}
-        onclick={() => onCopyImage?.()}
-      />
-    {/if}
-
-    {#if !isOwner && showDownloadButton}
-      <DownloadAction asset={toTimelineAsset(asset)} />
-    {/if}
-
-    {#if showDetailButton}
-      <ShowDetailAction {onShowDetail} />
-    {/if}
-
-    {#if isOwner}
-      <FavoriteAction {asset} {onAction} />
-    {/if}
-
-    {#if isOwner}
-      <DeleteAction {asset} {onAction} {preAction} />
-
-      <ButtonContextMenu direction="left" align="top-right" color="secondary" title={$t('more')} icon={mdiDotsVertical}>
-        {#if showSlideshow && !isLocked}
-          <MenuOption icon={mdiPresentationPlay} text={$t('slideshow')} onClick={onPlaySlideshow} />
+    {#if !!onSelectAsset && assetInteraction?.selectionActive}
+      <p class="text-lg text-immich-fg dark:text-immich-dark-fg">
+        {#if selected}
+          {$t('selected')}
+        {:else}
+          {$t('select')}
         {/if}
-        {#if showDownloadButton}
-          <DownloadAction asset={toTimelineAsset(asset)} menuItem />
+      </p>
+      <button
+        type="button"
+        onclick={() => onSelectAsset(toTimelineAsset(asset))}
+        class={['focus:outline-none']}
+        role="checkbox"
+        tabindex={-1}
+        aria-checked={selected}
+      >
+        {#if selected}
+          <div class="rounded-full bg-[#D9DCEF] dark:bg-[#232932]">
+            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
+          </div>
+        {:else}
+          <Icon path={mdiCheckCircle} size="24" class="text-white/80 hover:text-white" />
         {/if}
+      </button>
+    {:else}
+      <CastButton />
 
-        {#if !isLocked}
-          {#if asset.isTrashed}
-            <RestoreAction {asset} {onAction} />
-          {:else}
-            <AddToAlbumAction {asset} {onAction} />
-            <AddToAlbumAction {asset} {onAction} shared />
-          {/if}
-        {/if}
+      {#if !asset.isTrashed && $user && !isLocked}
+        <ShareAction {asset} />
+      {/if}
+      {#if asset.isOffline}
+        <IconButton
+          shape="round"
+          color="danger"
+          icon={mdiAlertOutline}
+          onclick={onShowDetail}
+          aria-label={$t('asset_offline')}
+        />
+      {/if}
+      {#if asset.livePhotoVideoId}
+        {@render motionPhoto?.()}
+      {/if}
+      {#if asset.type === AssetTypeEnum.Image}
+        <IconButton
+          class="hidden sm:flex"
+          color="secondary"
+          variant="ghost"
+          shape="round"
+          icon={$photoZoomState && $photoZoomState.currentZoom > 1 ? mdiMagnifyMinusOutline : mdiMagnifyPlusOutline}
+          aria-label={$t('zoom_image')}
+          onclick={onZoomImage}
+        />
+      {/if}
+      {#if canCopyImageToClipboard() && asset.type === AssetTypeEnum.Image}
+        <IconButton
+          color="secondary"
+          variant="ghost"
+          shape="round"
+          icon={mdiContentCopy}
+          aria-label={$t('copy_image')}
+          onclick={() => onCopyImage?.()}
+        />
+      {/if}
 
-        {#if isOwner}
-          {#if stack}
-            <UnstackAction {stack} {onAction} />
-            <KeepThisDeleteOthersAction {stack} {asset} {onAction} />
-            {#if stack?.primaryAssetId !== asset.id}
-              <SetStackPrimaryAsset {stack} {asset} {onAction} />
-              {#if stack?.assets?.length > 2}
-                <RemoveAssetFromStack {asset} {stack} {onAction} />
-              {/if}
-            {/if}
+      {#if !isOwner && showDownloadButton}
+        <DownloadAction asset={toTimelineAsset(asset)} />
+      {/if}
+
+      {#if showDetailButton}
+        <ShowDetailAction {onShowDetail} />
+      {/if}
+
+      {#if isOwner}
+        <FavoriteAction {asset} {onAction} />
+      {/if}
+
+      {#if isOwner}
+        <DeleteAction {asset} {onAction} {preAction} />
+
+        <ButtonContextMenu
+          direction="left"
+          align="top-right"
+          color="secondary"
+          title={$t('more')}
+          icon={mdiDotsVertical}
+        >
+          {#if showSlideshow && !isLocked}
+            <MenuOption icon={mdiPresentationPlay} text={$t('slideshow')} onClick={onPlaySlideshow} />
           {/if}
-          {#if album}
-            <SetAlbumCoverAction {asset} {album} />
-          {/if}
-          {#if person}
-            <SetFeaturedPhotoAction {asset} {person} />
-          {/if}
-          {#if asset.type === AssetTypeEnum.Image && !isLocked}
-            <SetProfilePictureAction {asset} />
+          {#if showDownloadButton}
+            <DownloadAction asset={toTimelineAsset(asset)} menuItem />
           {/if}
 
           {#if !isLocked}
-            <ArchiveAction {asset} {onAction} {preAction} />
-            <MenuOption
-              icon={mdiUpload}
-              onClick={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
-              text={$t('replace_with_upload')}
-            />
-            {#if !asset.isArchived && !asset.isTrashed}
-              <MenuOption
-                icon={mdiImageSearch}
-                onClick={() => goto(`${AppRoute.PHOTOS}?at=${stack?.primaryAssetId ?? asset.id}`)}
-                text={$t('view_in_timeline')}
-              />
-            {/if}
-            {#if !asset.isArchived && !asset.isTrashed && smartSearchEnabled}
-              <MenuOption
-                icon={mdiCompare}
-                onClick={() => goto(`${AppRoute.SEARCH}?query={"queryAssetId":"${stack?.primaryAssetId ?? asset.id}"}`)}
-                text={$t('view_similar_photos')}
-              />
+            {#if asset.isTrashed}
+              <RestoreAction {asset} {onAction} />
+            {:else}
+              <AddToAlbumAction {asset} {onAction} />
+              <AddToAlbumAction {asset} {onAction} shared />
             {/if}
           {/if}
 
-          {#if !asset.isTrashed}
-            <SetVisibilityAction asset={toTimelineAsset(asset)} {onAction} {preAction} />
-          {/if}
-          <hr />
-          <MenuOption
-            icon={mdiHeadSyncOutline}
-            onClick={() => onRunJob(AssetJobName.RefreshFaces)}
-            text={$getAssetJobName(AssetJobName.RefreshFaces)}
-          />
-          <MenuOption
-            icon={mdiDatabaseRefreshOutline}
-            onClick={() => onRunJob(AssetJobName.RefreshMetadata)}
-            text={$getAssetJobName(AssetJobName.RefreshMetadata)}
-          />
-          <MenuOption
-            icon={mdiImageRefreshOutline}
-            onClick={() => onRunJob(AssetJobName.RegenerateThumbnail)}
-            text={$getAssetJobName(AssetJobName.RegenerateThumbnail)}
-          />
-          {#if asset.type === AssetTypeEnum.Video}
+          {#if isOwner}
+            {#if stack}
+              <UnstackAction {stack} {onAction} />
+              <KeepThisDeleteOthersAction {stack} {asset} {onAction} />
+              {#if stack?.primaryAssetId !== asset.id}
+                <SetStackPrimaryAsset {stack} {asset} {onAction} />
+                {#if stack?.assets?.length > 2}
+                  <RemoveAssetFromStack {asset} {stack} {onAction} />
+                {/if}
+              {/if}
+            {/if}
+            {#if album}
+              <SetAlbumCoverAction {asset} {album} />
+            {/if}
+            {#if person}
+              <SetFeaturedPhotoAction {asset} {person} />
+            {/if}
+            {#if asset.type === AssetTypeEnum.Image && !isLocked}
+              <SetProfilePictureAction {asset} />
+            {/if}
+
+            {#if !isLocked}
+              <ArchiveAction {asset} {onAction} {preAction} />
+              <MenuOption
+                icon={mdiUpload}
+                onClick={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
+                text={$t('replace_with_upload')}
+              />
+              {#if !asset.isArchived && !asset.isTrashed}
+                <MenuOption
+                  icon={mdiImageSearch}
+                  onClick={() => goto(`${AppRoute.PHOTOS}?at=${stack?.primaryAssetId ?? asset.id}`)}
+                  text={$t('view_in_timeline')}
+                />
+              {/if}
+              {#if !asset.isArchived && !asset.isTrashed && smartSearchEnabled}
+                <MenuOption
+                  icon={mdiCompare}
+                  onClick={() =>
+                    goto(`${AppRoute.SEARCH}?query={"queryAssetId":"${stack?.primaryAssetId ?? asset.id}"}`)}
+                  text={$t('view_similar_photos')}
+                />
+              {/if}
+            {/if}
+
+            {#if !asset.isTrashed}
+              <SetVisibilityAction asset={toTimelineAsset(asset)} {onAction} {preAction} />
+            {/if}
+            <hr />
             <MenuOption
-              icon={mdiCogRefreshOutline}
-              onClick={() => onRunJob(AssetJobName.TranscodeVideo)}
-              text={$getAssetJobName(AssetJobName.TranscodeVideo)}
+              icon={mdiHeadSyncOutline}
+              onClick={() => onRunJob(AssetJobName.RefreshFaces)}
+              text={$getAssetJobName(AssetJobName.RefreshFaces)}
             />
+            <MenuOption
+              icon={mdiDatabaseRefreshOutline}
+              onClick={() => onRunJob(AssetJobName.RefreshMetadata)}
+              text={$getAssetJobName(AssetJobName.RefreshMetadata)}
+            />
+            <MenuOption
+              icon={mdiImageRefreshOutline}
+              onClick={() => onRunJob(AssetJobName.RegenerateThumbnail)}
+              text={$getAssetJobName(AssetJobName.RegenerateThumbnail)}
+            />
+            {#if asset.type === AssetTypeEnum.Video}
+              <MenuOption
+                icon={mdiCogRefreshOutline}
+                onClick={() => onRunJob(AssetJobName.TranscodeVideo)}
+                text={$getAssetJobName(AssetJobName.TranscodeVideo)}
+              />
+            {/if}
           {/if}
-        {/if}
-      </ButtonContextMenu>
+        </ButtonContextMenu>
+      {/if}
     {/if}
   </div>
 </div>

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

@@ -10,6 +10,7 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isShowDetail } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
@@ -49,6 +50,7 @@
 
   interface Props {
     asset: AssetResponseDto;
+    assetInteraction?: AssetInteraction;
     preloadAssets?: TimelineAsset[];
     showNavigation?: boolean;
     withStacked?: boolean;
@@ -58,6 +60,7 @@
     preAction?: PreAction | undefined;
     onAction?: OnAction | undefined;
     showCloseButton?: boolean;
+    onSelectAsset?: (asset: TimelineAsset) => void;
     onClose: (asset: AssetResponseDto) => void;
     onNext: () => Promise<HasAsset>;
     onPrevious: () => Promise<HasAsset>;
@@ -67,6 +70,7 @@
 
   let {
     asset = $bindable(),
+    assetInteraction,
     preloadAssets = $bindable([]),
     showNavigation = true,
     withStacked = false,
@@ -76,6 +80,7 @@
     preAction = undefined,
     onAction = undefined,
     showCloseButton,
+    onSelectAsset,
     onClose,
     onNext,
     onPrevious,
@@ -391,12 +396,14 @@
     <div class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
       <AssetViewerNavBar
         {asset}
+        {assetInteraction}
         {album}
         {person}
         {stack}
         {showCloseButton}
         showDetailButton={enableDetailPanel}
         showSlideshow={true}
+        {onSelectAsset}
         onZoomImage={zoomToggle}
         onCopyImage={copyImage}
         preAction={handlePreAction}
@@ -529,7 +536,7 @@
     </div>
   {/if}
 
-  {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail && !isShowEditor}
+  {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail && !isShowEditor && !assetInteraction?.selectionActive}
     <div
       transition:fly={{ duration: 150 }}
       id="detail-panel"

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -11,6 +11,7 @@
     mdiCameraBurst,
     mdiCheckCircle,
     mdiHeart,
+    mdiMagnifyPlusOutline,
     mdiMotionPauseOutline,
     mdiMotionPlayOutline,
     mdiRotate360,
@@ -37,6 +38,7 @@
     thumbnailHeight?: number;
     selected?: boolean;
     selectionCandidate?: boolean;
+    selectionActive?: boolean;
     disabled?: boolean;
     disableLinkMouseOver?: boolean;
     readonly?: boolean;
@@ -45,7 +47,7 @@
     imageClass?: ClassValue;
     brokenAssetClass?: ClassValue;
     dimmed?: boolean;
-    onClick?: (asset: TimelineAsset) => void;
+    onClick?: (asset: TimelineAsset, forceView?: boolean) => void;
     onSelect?: (asset: TimelineAsset) => void;
     onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void;
   }
@@ -58,6 +60,7 @@
     thumbnailHeight = undefined,
     selected = false,
     selectionCandidate = false,
+    selectionActive = false,
     disabled = false,
     disableLinkMouseOver = false,
     readonly = false,
@@ -92,6 +95,12 @@
     }
   };
 
+  const onViewerIconClickedHandler = (e?: MouseEvent) => {
+    e?.stopPropagation();
+    e?.preventDefault();
+    onClick?.($state.snapshot(asset), true);
+  };
+
   const callClickHandlers = () => {
     if (selected) {
       onIconClickedHandler();
@@ -344,6 +353,19 @@
         </div>
       {/if}
 
+      <!-- View Asset while selecting -->
+      {#if selectionActive && (usingMobileDevice || mouseOver)}
+        <button
+          type="button"
+          onclick={onViewerIconClickedHandler}
+          class={['absolute focus:outline-none bottom-2 end-2', { 'cursor-not-allowed': disabled }]}
+          tabindex={-1}
+          {disabled}
+        >
+          <Icon path={mdiMagnifyPlusOutline} size="24" class="text-white/80 hover:text-white" />
+        </button>
+      {/if}
+
       {#if (!loaded || thumbError) && asset.thumbhash}
         <canvas
           use:thumbhash={{ base64ThumbHash: asset.thumbhash }}

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -6,17 +6,6 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import MemoryPhotoViewer from '$lib/components/memory-page/memory-photo-viewer.svelte';
   import MemoryVideoViewer from '$lib/components/memory-page/memory-video-viewer.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeDescription from '$lib/components/photos-page/actions/change-description-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -25,6 +14,17 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -75,8 +75,9 @@
     assets: TimelineAsset[],
     groupTitle: string,
     asset: TimelineAsset,
+    forceView: boolean = false,
   ) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
+    if (!forceView && (isSelectionMode || assetInteraction.selectionActive)) {
       assetSelectHandler(timelineManager, asset, assets, groupTitle);
       return;
     }
@@ -218,11 +219,11 @@
             {showArchiveIcon}
             {asset}
             {groupIndex}
-            onClick={(asset) => {
+            onClick={(asset, forceView: boolean = false) => {
               if (typeof onThumbnailClick === 'function') {
                 onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
               } else {
-                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset, forceView);
               }
             }}
             onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
@@ -230,6 +231,7 @@
             selected={assetInteraction.hasSelectedAsset(asset.id) ||
               dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
             selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
+            selectionActive={assetInteraction.selectionActive}
             disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
             thumbnailWidth={position.width}
             thumbnailHeight={position.height}

web/src/lib/components/photos-page/asset-grid.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-  import Timeline from '$lib/components/timeline/timeline.svelte';
-  import type { AssetAction } from '$lib/constants';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import type { AlbumResponseDto, PersonResponseDto } from '@immich/sdk';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this asset grid is responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE
-      | null;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-    isShowDeleteConfirmation?: boolean;
-    onSelect?: (asset: TimelineAsset) => void;
-    onEscape?: () => void;
-    children?: Snippet;
-    empty?: Snippet;
-    customLayout?: Snippet<[TimelineAsset]>;
-    onThumbnailClick?: (
-      asset: TimelineAsset,
-      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
-      onClick: (
-        timelineManager: TimelineManager,
-        assets: TimelineAsset[],
-        groupTitle: string,
-        asset: TimelineAsset,
-      ) => void,
-    ) => void;
-  }
-
-  let {
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-    removeAction,
-    withStacked = false,
-    showArchiveIcon = false,
-    isShared = false,
-    album = null,
-    person = null,
-    isShowDeleteConfirmation = $bindable(false),
-    onSelect = () => {},
-    onEscape = () => {},
-    children,
-    empty,
-    customLayout,
-    onThumbnailClick,
-  }: Props = $props();
-
-  const onAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => {
-    if (onThumbnailClick) {
-      onThumbnailClick(asset, timelineManager, dayGroup, () => defaultAssetOpen());
-      return;
-    }
-    defaultAssetOpen();
-  };
-</script>
-
-<!-- AssetGrid Adapter: This is a compatibility layer that wraps the new Timeline component -->
-<!-- It maintains the old AssetGrid API while using the new Timeline implementation underneath -->
-<Timeline
-  {isSelectionMode}
-  {singleSelect}
-  {enableRouting}
-  bind:timelineManager
-  {assetInteraction}
-  {removeAction}
-  {withStacked}
-  {showArchiveIcon}
-  {isShared}
-  {album}
-  {person}
-  bind:isShowDeleteConfirmation
-  {onAssetOpen}
-  {onSelect}
-  {onEscape}
-  {children}
-  {empty}
-  customThumbnailLayout={customLayout}
-/>

web/src/lib/components/photos-page/asset-viewer-actions.svelte

@@ -1,162 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import { AssetAction } from '$lib/constants';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
-  import { navigate } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, gridScrollTarget, mutex } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE;
-    handlePreAction?: (action: Action) => Promise<void>;
-    handleAction?: (action: Action) => void;
-    handleNext?: () => Promise<boolean>;
-    handlePrevious?: () => Promise<boolean>;
-    handleRandom?: () => Promise<AssetResponseDto | undefined>;
-    handleClose?: (asset: { id: string }) => Promise<void>;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    showSkeleton = $bindable(false),
-    removeAction,
-    handlePreAction = $bindable(),
-    handleAction = $bindable(),
-    handleNext = $bindable(),
-    handlePrevious = $bindable(),
-    handleRandom = $bindable(),
-    handleClose = $bindable(),
-  }: Props = $props();
-
-  handlePrevious = async () => {
-    const release = await mutex.acquire();
-    const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
-
-    if (laterAsset) {
-      const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: laterAsset.id });
-    }
-
-    release();
-    return !!laterAsset;
-  };
-
-  handleNext = async () => {
-    const release = await mutex.acquire();
-    const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
-
-    if (earlierAsset) {
-      const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
-    }
-
-    release();
-    return !!earlierAsset;
-  };
-
-  handleRandom = async () => {
-    const randomAsset = await timelineManager.getRandomAsset();
-
-    if (randomAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
-      assetViewingStore.setAsset(asset);
-      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return asset;
-    }
-  };
-
-  handleClose = async (asset: { id: string }) => {
-    assetViewingStore.showAssetViewer(false);
-    showSkeleton = true;
-    $gridScrollTarget = { at: asset.id };
-    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
-  };
-
-  handlePreAction = async (action: Action) => {
-    switch (action.type) {
-      case removeAction:
-      case AssetAction.TRASH:
-      case AssetAction.RESTORE:
-      case AssetAction.DELETE:
-      case AssetAction.ARCHIVE:
-      case AssetAction.SET_VISIBILITY_LOCKED:
-      case AssetAction.SET_VISIBILITY_TIMELINE: {
-        // find the next asset to show or close the viewer
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
-
-        // delete after find the next one
-        timelineManager.removeAssets([action.asset.id]);
-        break;
-      }
-    }
-  };
-  handleAction = (action: Action) => {
-    switch (action.type) {
-      case AssetAction.ARCHIVE:
-      case AssetAction.UNARCHIVE:
-      case AssetAction.FAVORITE:
-      case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.UNSTACK: {
-        updateUnstackedAssetInTimeline(timelineManager, action.assets);
-        break;
-      }
-      case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.addAssets([toTimelineAsset(action.asset)]);
-        if (action.stack) {
-          //Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
-          updateUnstackedAssetInTimeline(
-            timelineManager,
-            action.stack.assets.map((asset) => toTimelineAsset(asset)),
-          );
-          updateStackedAssetInTimeline(timelineManager, {
-            stack: action.stack,
-            toDeleteIds: action.stack.assets
-              .filter((asset) => asset.id !== action.stack?.primaryAssetId)
-              .map((asset) => asset.id),
-          });
-        }
-        break;
-      }
-      case AssetAction.SET_STACK_PRIMARY_ASSET: {
-        //Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
-        updateUnstackedAssetInTimeline(
-          timelineManager,
-          action.stack.assets.map((asset) => toTimelineAsset(asset)),
-        );
-        updateStackedAssetInTimeline(timelineManager, {
-          stack: action.stack,
-          toDeleteIds: action.stack.assets
-            .filter((asset) => asset.id !== action.stack.primaryAssetId)
-            .map((asset) => asset.id),
-        });
-        break;
-      }
-    }
-  };
-</script>

web/src/lib/components/photos-page/asset-viewer-and-actions.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import AssetViewerActions from '$lib/components/photos-page/asset-viewer-actions.svelte';
-  import { AssetAction } from '$lib/constants';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, preloadAssets } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE;
-    withStacked?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-    isShowDeleteConfirmation?: boolean;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    showSkeleton = $bindable(false),
-    removeAction,
-    withStacked = false,
-    isShared = false,
-    album = null,
-    person = null,
-    isShowDeleteConfirmation = $bindable(false),
-  }: Props = $props();
-
-  let handlePreAction = <(action: Action) => Promise<void>>$state();
-  let handleAction = <(action: Action) => void>$state();
-  let handleNext = <() => Promise<boolean>>$state();
-  let handlePrevious = <() => Promise<boolean>>$state();
-  let handleRandom = <() => Promise<AssetResponseDto | undefined>>$state();
-  let handleClose = <(asset: { id: string }) => Promise<void>>$state();
-</script>
-
-<AssetViewerActions
-  {timelineManager}
-  {removeAction}
-  bind:showSkeleton
-  bind:handlePreAction
-  bind:handleAction
-  bind:handleNext
-  bind:handlePrevious
-  bind:handleRandom
-  bind:handleClose
-></AssetViewerActions>
-
-{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-  <AssetViewer
-    {withStacked}
-    asset={$viewingAsset}
-    preloadAssets={$preloadAssets}
-    {isShared}
-    {album}
-    {person}
-    preAction={handlePreAction}
-    onAction={handleAction}
-    onPrevious={handlePrevious}
-    onNext={handleNext}
-    onRandom={handleRandom}
-    onClose={handleClose}
-  />
-{/await}

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -2,6 +2,9 @@
   import { goto } from '$app/navigation';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import RemoveFromSharedLink from '$lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { Viewport } from '$lib/managers/timeline-manager/types';
@@ -17,9 +20,6 @@
   import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
-  import DownloadAction from '../photos-page/actions/download-action.svelte';
-  import RemoveFromSharedLink from '../photos-page/actions/remove-from-shared-link.svelte';
-  import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';

web/src/lib/components/shared-components/change-date.spec.ts

@@ -8,9 +8,6 @@ import ChangeDate from './change-date.svelte';
 describe('ChangeDate component', () => {
   const initialDate = DateTime.fromISO('2024-01-01');
   const initialTimeZone = 'Europe/Berlin';
-  const targetDate = DateTime.fromISO('2024-01-01').setZone('UTC+1', {
-    keepLocalTime: true,
-  });
   const currentInterval = {
     start: DateTime.fromISO('2000-02-01T14:00:00+01:00'),
     end: DateTime.fromISO('2001-02-01T14:00:00+01:00'),
@@ -46,11 +43,7 @@ describe('ChangeDate component', () => {
 
     await fireEvent.click(getConfirmButton());
 
-    expect(onConfirm).toHaveBeenCalledWith({
-      mode: 'absolute',
-      date: '2024-01-01T00:00:00.000+01:00',
-      dateTime: targetDate,
-    });
+    expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-01-01T00:00:00.000+01:00' });
   });
 
   test('calls onCancel on cancel', async () => {
@@ -65,9 +58,7 @@ describe('ChangeDate component', () => {
 
   describe('when date is in daylight saving time', () => {
     const dstDate = DateTime.fromISO('2024-07-01');
-    const targetDate = DateTime.fromISO('2024-07-01').setZone('UTC+2', {
-      keepLocalTime: true,
-    });
+
     test('should render correct timezone with offset', () => {
       render(ChangeDate, { initialDate: dstDate, initialTimeZone, onCancel, onConfirm });
 
@@ -81,11 +72,7 @@ describe('ChangeDate component', () => {
 
       await fireEvent.click(getConfirmButton());
 
-      expect(onConfirm).toHaveBeenCalledWith({
-        mode: 'absolute',
-        date: '2024-07-01T00:00:00.000+02:00',
-        dateTime: targetDate,
-      });
+      expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-07-01T00:00:00.000+02:00' });
     });
   });
 

web/src/lib/components/shared-components/change-date.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store';
-  import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
-  import { ConfirmModal, Field, Switch } from '@immich/ui';
-  import { mdiCalendarEdit } from '@mdi/js';
+  import { ConfirmModal } from '@immich/ui';
+  import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
-  import { get } from 'svelte/store';
   import DateInput from '../elements/date-input.svelte';
-  import DurationInput from '../elements/duration-input.svelte';
   import Combobox, { type ComboBoxOption } from './combobox.svelte';
+  import DurationInput from '../elements/duration-input.svelte';
+  import { Field, Switch } from '@immich/ui';
+  import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
+  import { locale } from '$lib/stores/preferences.store';
+  import { get } from 'svelte/store';
 
   interface Props {
     title?: string;
@@ -17,8 +18,6 @@
     timezoneInput?: boolean;
     withDuration?: boolean;
     currentInterval?: { start: DateTime; end: DateTime };
-    icon?: string;
-    confirmText?: string;
     onCancel: () => void;
     onConfirm: (result: AbsoluteResult | RelativeResult) => void;
   }
@@ -30,8 +29,6 @@
     timezoneInput = true,
     withDuration = true,
     currentInterval = undefined,
-    icon = mdiCalendarEdit,
-    confirmText,
     onCancel,
     onConfirm,
   }: Props = $props();
@@ -39,7 +36,6 @@
   export type AbsoluteResult = {
     mode: 'absolute';
     date: string;
-    dateTime: DateTime<true>;
   };
 
   export type RelativeResult = {
@@ -196,13 +192,9 @@
       const fixedOffsetZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
 
       // Create a DateTime object in this fixed-offset zone, preserving the local time.
-      const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone }) as DateTime<true>;
+      const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone });
 
-      onConfirm({
-        mode: 'absolute',
-        date: finalDateTime.toISO({ includeOffset: true }),
-        dateTime: finalDateTime,
-      });
+      onConfirm({ mode: 'absolute', date: finalDateTime.toISO({ includeOffset: true })! });
     }
 
     if (showRelative && (selectedDuration || selectedRelativeOption)) {
@@ -246,8 +238,7 @@
 <ConfirmModal
   confirmColor="primary"
   {title}
-  {icon}
-  {confirmText}
+  icon={mdiCalendarEditOutline}
   prompt="Please select a new date:"
   disabled={!date.isValid}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}

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

@@ -494,8 +494,8 @@
         >
           <Thumbnail
             readonly={disableAssetSelect}
-            onClick={() => {
-              if (assetInteraction.selectionActive) {
+            onClick={(asset, forceView: boolean = false) => {
+              if (assetInteraction.selectionActive && !forceView) {
                 handleSelectAssets(toTimelineAsset(currentAsset));
                 return;
               }
@@ -507,6 +507,7 @@
             asset={toTimelineAsset(currentAsset)}
             selected={assetInteraction.hasSelectedAsset(currentAsset.id)}
             selectionCandidate={assetInteraction.hasSelectionCandidate(currentAsset.id)}
+            selectionActive={assetInteraction.selectionActive}
             thumbnailWidth={layout.width}
             thumbnailHeight={layout.height}
           />
@@ -528,10 +529,12 @@
   <Portal target="body">
     <AssetViewer
       asset={$viewingAsset}
+      {assetInteraction}
       onAction={handleAction}
       onPrevious={handlePrevious}
       onNext={handleNext}
       onRandom={handleRandom}
+      onSelectAsset={handleSelectAssets}
       onClose={() => {
         assetViewingStore.showAssetViewer(false);
         handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));

web/src/lib/components/shared-components/scrubber/scrubber.svelte

@@ -4,38 +4,25 @@
   import type { ScrubberMonth } from '$lib/managers/timeline-manager/types';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { getTabbable } from '$lib/utils/focus-util';
-  import { type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
+  import { type ScrubberListener } from '$lib/utils/timeline-util';
   import { mdiPlay } from '@mdi/js';
   import { clamp } from 'lodash-es';
   import { onMount } from 'svelte';
   import { fade, fly } from 'svelte/transition';
 
   interface Props {
-    /** Offset from the top of the timeline (e.g., for headers) */
     timelineTopOffset?: number;
-    /** Offset from the bottom of the timeline (e.g., for footers) */
     timelineBottomOffset?: number;
-    /** Total height of the scrubber component */
     height?: number;
-    /** Timeline manager instance that controls the timeline state */
     timelineManager: TimelineManager;
-    /** Overall scroll percentage through the entire timeline (0-1), used when no specific month is targeted */
-    timelineScrollPercent?: number;
-    /** The percentage of scroll through the month that is currently intersecting the top boundary of the viewport */
-    viewportTopMonthScrollPercent?: number;
-    /** The year/month of the timeline month at the top of the viewport */
-    viewportTopMonth?: TimelineYearMonth;
-    /** Indicates whether the viewport is currently in the lead-out section (after all months) */
-    isInLeadOutSection?: boolean;
-    /** Width of the scrubber component in pixels (bindable for parent component margin adjustments) */
+    scrubOverallPercent?: number;
+    scrubberMonthPercent?: number;
+    scrubberMonth?: { year: number; month: number };
+    leadout?: boolean;
     scrubberWidth?: number;
-    /** Callback fired when user interacts with the scrubber to navigate */
     onScrub?: ScrubberListener;
-    /** Callback fired when keyboard events occur on the scrubber */
     onScrubKeyDown?: (event: KeyboardEvent, element: HTMLElement) => void;
-    /** Callback fired when scrubbing starts */
     startScrub?: ScrubberListener;
-    /** Callback fired when scrubbing stops */
     stopScrub?: ScrubberListener;
   }
 
@@ -44,10 +31,10 @@
     timelineBottomOffset = 0,
     height = 0,
     timelineManager,
-    timelineScrollPercent = 0,
-    viewportTopMonthScrollPercent = 0,
-    viewportTopMonth = undefined,
-    isInLeadOutSection = false,
+    scrubOverallPercent = 0,
+    scrubberMonthPercent = 0,
+    scrubberMonth = undefined,
+    leadout = false,
     onScrub = undefined,
     onScrubKeyDown = undefined,
     startScrub = undefined,
@@ -113,7 +100,7 @@
         offset += scrubberMonthPercent * relativeBottomOffset;
       }
       return offset;
-    } else if (isInLeadOutSection) {
+    } else if (leadout) {
       let offset = relativeTopOffset;
       for (const segment of segments) {
         offset += segment.height;
@@ -124,9 +111,7 @@
       return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
     }
   };
-  let scrollY = $derived(
-    toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
-  );
+  let scrollY = $derived(toScrollFromMonthGroupPercentage(scrubberMonth, scrubberMonthPercent, scrubOverallPercent));
   let timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight + timelineTopOffset + timelineBottomOffset);
   let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
   let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
@@ -310,24 +295,12 @@
 
     const scrollPercent = toTimelineY(hoverY);
     if (wasDragging === false && isDragging) {
-      void startScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-      void onScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
+      void startScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+      void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
     }
 
     if (wasDragging && !isDragging) {
-      void stopScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
+      void stopScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
       return;
     }
 
@@ -335,11 +308,7 @@
       return;
     }
 
-    void onScrub?.({
-      scrubberMonth: segmentDate!,
-      overallScrollPercent: scrollPercent,
-      scrubberMonthScrollPercent: monthGroupPercentY,
-    });
+    void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
   };
   /* eslint-disable tscompat/tscompat */
   const getTouch = (event: TouchEvent) => {
@@ -443,11 +412,7 @@
       }
       if (next) {
         event.preventDefault();
-        void onScrub?.({
-          scrubberMonth: { year: next.year, month: next.month },
-          overallScrollPercent: -1,
-          scrubberMonthScrollPercent: 0,
-        });
+        void onScrub?.({ year: next.year, month: next.month }, -1, 0);
         return true;
       }
     }
@@ -457,11 +422,7 @@
         const next = segments[idx + 1];
         if (next) {
           event.preventDefault();
-          void onScrub?.({
-            scrubberMonth: { year: next.year, month: next.month },
-            overallScrollPercent: -1,
-            scrubberMonthScrollPercent: 0,
-          });
+          void onScrub?.({ year: next.year, month: next.month }, -1, 0);
           return true;
         }
       }

web/src/lib/components/timeline/actions/AddToAlbumAction.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
   import type { OnAddToAlbum } from '$lib/utils/actions';
   import { addAssetsToAlbum, addAssetsToAlbums } from '$lib/utils/asset-utils';
   import { modalManager } from '@immich/ui';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     shared?: boolean;

web/src/lib/components/timeline/actions/ArchiveAction.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import type { OnArchive } from '$lib/utils/actions';
   import { archiveAssets } from '$lib/utils/asset-utils';
   import { AssetVisibility } from '@immich/sdk';
@@ -6,7 +7,6 @@
   import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     onArchive?: OnArchive;

web/src/lib/components/timeline/actions/AssetJobActions.svelte

@@ -4,11 +4,11 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetJobName, runAssetJobs } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     jobs?: AssetJobName[];

web/src/lib/components/timeline/actions/ChangeDateAction.svelte

@@ -3,16 +3,16 @@
     type AbsoluteResult,
     type RelativeResult,
   } from '$lib/components/shared-components/change-date.svelte';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { user } from '$lib/stores/user.store';
   import { getSelectedAssets } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
+  import { fromTimelinePlainDateTime } from '$lib/utils/timeline-util.js';
   import { updateAssets } from '@immich/sdk';
   import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { fromTimelinePlainDateTime } from '$lib/utils/timeline-util.js';
   interface Props {
     menuItem?: boolean;
   }

web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import AssetUpdateDescriptionConfirmModal from '$lib/modals/AssetUpdateDescriptionConfirmModal.svelte';
   import { user } from '$lib/stores/user.store';
   import { getSelectedAssets } from '$lib/utils/asset-utils';
@@ -8,7 +9,6 @@
   import { mdiText } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     menuItem?: boolean;

web/src/lib/components/timeline/actions/ChangeLocationAction.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { user } from '$lib/stores/user.store';
   import { getSelectedAssets } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -7,7 +8,6 @@
   import { mdiMapMarkerMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     menuItem?: boolean;

web/src/lib/components/timeline/actions/CreateSharedLinkAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { makeSharedLinkUrl } from '$lib/utils';

web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
+  import { IconButton } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import DeleteAssetDialog from '../delete-asset-dialog.svelte';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     onAssetDelete: OnDelete;

web/src/lib/components/timeline/actions/DownloadAction.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
 
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
   import { getAssetInfo } from '@immich/sdk';
@@ -8,7 +9,6 @@
   import { mdiDownload } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     filename?: string;

web/src/lib/components/timeline/actions/FavoriteAction.svelte

@@ -4,13 +4,13 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import type { OnFavorite } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     onFavorite?: OnFavorite;

web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import type { OnLink, OnUnlink } from '$lib/utils/actions';

web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte

@@ -3,12 +3,12 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     album: AlbumResponseDto;

web/src/lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { removeSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
@@ -6,7 +7,6 @@
   import { mdiDeleteOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { NotificationType, notificationController } from '../../shared-components/notification/notification';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;

web/src/lib/components/timeline/actions/RestoreAction.svelte

@@ -3,13 +3,13 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import type { OnRestore } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { restoreAssets } from '@immich/sdk';
-  import { mdiHistory } from '@mdi/js';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { t } from 'svelte-i18n';
   import { Button } from '@immich/ui';
+  import { mdiHistory } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     onRestore: OnRestore | undefined;

web/src/lib/components/timeline/actions/SetVisibilityAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import type { OnSetVisibility } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';

web/src/lib/components/timeline/actions/StackAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import type { OnStack, OnUnstack } from '$lib/utils/actions';
   import { deleteStack, stackAssets } from '$lib/utils/asset-utils';

web/src/lib/components/timeline/actions/TagAction.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
+  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiTagMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     menuItem?: boolean;

web/src/lib/components/timeline/actions/delete-asset-dialog.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { Checkbox, ConfirmModal, Label } from '@immich/ui';
-  import { mdiDeleteForeverOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    size: number;
-    onConfirm: () => void;
-    onCancel: () => void;
-  }
-
-  let { size, onConfirm, onCancel }: Props = $props();
-
-  let checked = $state(false);
-
-  const handleConfirm = () => {
-    if (checked) {
-      $showDeleteModal = false;
-    }
-    onConfirm();
-  };
-</script>
-
-<ConfirmModal
-  title={$t('permanently_delete_assets_count', { values: { count: size } })}
-  confirmText={$t('delete')}
-  icon={mdiDeleteForeverOutline}
-  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
->
-  {#snippet promptSnippet()}
-    <p>
-      <FormatMessage key="permanently_delete_assets_prompt" values={{ count: size }}>
-        {#snippet children({ message })}
-          <b>{message}</b>
-        {/snippet}
-      </FormatMessage>
-    </p>
-    <p><b>{$t('cannot_undo_this_action')}</b></p>
-
-    <div class="pt-4 flex justify-center items-center gap-2">
-      <Checkbox id="confirm-deletion-input" bind:checked color="secondary" />
-      <Label label={$t('do_not_show_again')} for="confirm-deletion-input" />
-    </div>
-  {/snippet}
-</ConfirmModal>

web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte

@@ -1,225 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
-  import {
-    setFocusToAsset as setFocusAssetInit,
-    setFocusTo as setFocusToInit,
-  } from '$lib/components/photos-page/actions/focus-actions';
-  import ChangeDate, {
-    type AbsoluteResult,
-    type RelativeResult,
-  } from '$lib/components/shared-components/change-date.svelte';
-  import { AppRoute } from '$lib/constants';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { deleteAssets, updateStackedAssetInTimeline } from '$lib/utils/actions';
-  import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
-  import { AssetVisibility } from '@immich/sdk';
-  import { modalManager } from '@immich/ui';
-  import { mdiCalendarBlankOutline } from '@mdi/js';
-  import { DateTime } from 'luxon';
-  import { t } from 'svelte-i18n';
-  import DeleteAssetDialog from './delete-asset-dialog.svelte';
-  let { isViewing: showAssetViewer } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    isShowDeleteConfirmation: boolean;
-    onEscape?: () => void;
-    scrollToAsset: (asset: TimelineAsset) => boolean;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    assetInteraction,
-    isShowDeleteConfirmation = $bindable(false),
-    onEscape,
-    scrollToAsset,
-  }: Props = $props();
-
-  let isShowSelectDate = $state(false);
-
-  const trashOrDelete = async (force: boolean = false) => {
-    isShowDeleteConfirmation = false;
-    await deleteAssets(
-      !(isTrashEnabled && !force),
-      (assetIds) => timelineManager.removeAssets(assetIds),
-      assetInteraction.selectedAssets,
-      !isTrashEnabled || force ? undefined : (assets) => timelineManager.addAssets(assets),
-    );
-    assetInteraction.clearMultiselect();
-  };
-
-  const onDelete = () => {
-    const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
-
-    if ($showDeleteModal && (!isTrashEnabled || hasTrashedAsset)) {
-      isShowDeleteConfirmation = true;
-      return;
-    }
-    handlePromiseError(trashOrDelete(hasTrashedAsset));
-  };
-
-  const onForceDelete = () => {
-    if ($showDeleteModal) {
-      isShowDeleteConfirmation = true;
-      return;
-    }
-    handlePromiseError(trashOrDelete(true));
-  };
-
-  const onStackAssets = async () => {
-    const result = await stackAssets(assetInteraction.selectedAssets);
-
-    updateStackedAssetInTimeline(timelineManager, result);
-
-    onEscape?.();
-  };
-
-  const toggleArchive = async () => {
-    const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
-    const ids = await archiveAssets(assetInteraction.selectedAssets, visibility);
-    timelineManager.updateAssetOperation(ids, (asset) => {
-      asset.visibility = visibility;
-      return { remove: false };
-    });
-    deselectAllAssets();
-  };
-
-  let shiftKeyIsDown = $state(false);
-
-  const deselectAllAssets = () => {
-    cancelMultiselect(assetInteraction);
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = true;
-    }
-  };
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = false;
-    }
-  };
-
-  const onSelectStart = (e: Event) => {
-    if (assetInteraction.selectionActive && shiftKeyIsDown) {
-      e.preventDefault();
-    }
-  };
-
-  const isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
-  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-  const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
-  let isShortcutModalOpen = false;
-
-  const handleOpenShortcutModal = async () => {
-    if (isShortcutModalOpen) {
-      return;
-    }
-
-    isShortcutModalOpen = true;
-    await modalManager.show(ShortcutsModal, {});
-    isShortcutModalOpen = false;
-  };
-
-  $effect(() => {
-    if (isEmpty) {
-      assetInteraction.clearMultiselect();
-    }
-  });
-
-  const setFocusTo = setFocusToInit.bind(undefined, scrollToAsset, timelineManager);
-  const setFocusAsset = setFocusAssetInit.bind(undefined, scrollToAsset);
-
-  let shortcutList = $derived(
-    (() => {
-      if (searchStore.isSearchEnabled || $showAssetViewer) {
-        return [];
-      }
-
-      const shortcuts: ShortcutOptions[] = [
-        { shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal },
-        { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
-        { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(timelineManager, assetInteraction) },
-        { shortcut: { key: 'ArrowRight' }, onShortcut: () => setFocusTo('earlier', 'asset') },
-        { shortcut: { key: 'ArrowLeft' }, onShortcut: () => setFocusTo('later', 'asset') },
-        { shortcut: { key: 'D' }, onShortcut: () => setFocusTo('earlier', 'day') },
-        { shortcut: { key: 'D', shift: true }, onShortcut: () => setFocusTo('later', 'day') },
-        { shortcut: { key: 'M' }, onShortcut: () => setFocusTo('earlier', 'month') },
-        { shortcut: { key: 'M', shift: true }, onShortcut: () => setFocusTo('later', 'month') },
-        { shortcut: { key: 'Y' }, onShortcut: () => setFocusTo('earlier', 'year') },
-        { shortcut: { key: 'Y', shift: true }, onShortcut: () => setFocusTo('later', 'year') },
-        { shortcut: { key: 'G' }, onShortcut: () => (isShowSelectDate = true) },
-      ];
-      if (onEscape) {
-        shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape });
-      }
-
-      if (assetInteraction.selectionActive) {
-        shortcuts.push(
-          { shortcut: { key: 'Delete' }, onShortcut: onDelete },
-          { shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
-          { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
-          { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
-          { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
-        );
-      }
-
-      return shortcuts;
-    })(),
-  );
-</script>
-
-<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} onselectstart={onSelectStart} use:shortcuts={shortcutList} />
-
-{#if isShowDeleteConfirmation}
-  <DeleteAssetDialog
-    size={idsSelectedAssets.length}
-    onCancel={() => (isShowDeleteConfirmation = false)}
-    onConfirm={() => handlePromiseError(trashOrDelete(true))}
-  />
-{/if}
-
-{#if isShowSelectDate}
-  <ChangeDate
-    withDuration={false}
-    icon={mdiCalendarBlankOutline}
-    confirmText={$t('navigate')}
-    title={$t('navigate_to_time')}
-    initialDate={DateTime.now()}
-    timezoneInput={false}
-    onConfirm={async (result: AbsoluteResult | RelativeResult) => {
-      isShowSelectDate = false;
-      if (result.mode === 'absolute') {
-        const asset = await timelineManager.getClosestAssetToDate(
-          (DateTime.fromISO(result.date) as DateTime<true>).toObject(),
-        );
-        if (asset) {
-          setFocusAsset(asset);
-        }
-      }
-    }}
-    onCancel={() => (isShowSelectDate = false)}
-  />
-{/if}

web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte

@@ -1,318 +0,0 @@
-<script lang="ts">
-  import { afterNavigate, beforeNavigate } from '$app/navigation';
-  import { page } from '$app/stores';
-  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import Hmr from '$lib/components/timeline/base-components/hmr.svelte';
-  import Skeleton from '$lib/components/timeline/base-components/skeleton.svelte';
-  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { onMount, type Snippet } from 'svelte';
-  import type { UpdatePayload } from 'vite';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this asset grid responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    showSkeleton?: boolean;
-    isShowDeleteConfirmation?: boolean;
-    styleMarginRightOverride?: string;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-    header?: Snippet<[scrollToFunction: (top: number) => void]>;
-    children?: Snippet;
-    empty?: Snippet;
-    handleTimelineScroll?: () => void;
-  }
-
-  let {
-    customThumbnailLayout,
-
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-    withStacked = false,
-    showSkeleton = $bindable(true),
-    showArchiveIcon = false,
-    styleMarginRightOverride,
-    isShowDeleteConfirmation = $bindable(false),
-
-    onAssetOpen,
-    onSelect,
-    children,
-    empty,
-    header,
-    handleTimelineScroll = () => {},
-  }: Props = $props();
-
-  let { gridScrollTarget } = assetViewingStore;
-
-  let element: HTMLElement | undefined = $state();
-  let timelineElement: HTMLElement | undefined = $state();
-
-  const maxMd = $derived(mobileDevice.maxMd);
-  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-
-  $effect(() => {
-    const layoutOptions = maxMd
-      ? {
-          rowHeight: 100,
-          headerHeight: 32,
-        }
-      : {
-          rowHeight: 235,
-          headerHeight: 48,
-        };
-    timelineManager.setLayoutOptions(layoutOptions);
-  });
-
-  const scrollTo = (top: number) => {
-    if (element) {
-      element.scrollTo({ top });
-    }
-    updateSlidingWindow();
-  };
-
-  const scrollBy = (y: number) => {
-    if (element) {
-      element.scrollBy(0, y);
-    }
-    updateSlidingWindow();
-  };
-
-  const scrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
-    const { heightDelta, scrollTop } = compensation;
-    if (heightDelta !== undefined) {
-      scrollBy(heightDelta);
-    } else if (scrollTop !== undefined) {
-      scrollTo(scrollTop);
-    }
-    timelineManager.clearScrollCompensation();
-  };
-
-  const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
-    // the following method may trigger any layouts, so need to
-    // handle any scroll compensation that may have been set
-    const height = monthGroup!.findAssetAbsolutePosition(assetId);
-
-    // this is in a while loop, since scrollCompensations invoke scrolls
-    // which may load months, triggering more scrollCompensations. Call
-    // this in a loop, until no more layouts occur.
-    while (timelineManager.scrollCompensation.monthGroup) {
-      scrollCompensation(timelineManager.scrollCompensation);
-    }
-    return height;
-  };
-
-  const assetIsVisible = (assetTop: number): boolean => {
-    if (!element) {
-      return false;
-    }
-
-    const { clientHeight, scrollTop } = element;
-    return assetTop >= scrollTop && assetTop < scrollTop + clientHeight;
-  };
-
-  const scrollToAssetId = async (assetId: string) => {
-    const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
-    if (!monthGroup) {
-      return false;
-    }
-    const height = getAssetHeight(assetId, monthGroup);
-
-    // If the asset is already visible, then don't scroll.
-    if (assetIsVisible(height)) {
-      return true;
-    }
-
-    scrollTo(height);
-    return true;
-  };
-
-  export const scrollToAsset = (asset: TimelineAsset) => {
-    const monthGroup = timelineManager.getMonthGroupByAssetId(asset.id);
-    if (!monthGroup) {
-      return false;
-    }
-    const height = getAssetHeight(asset.id, monthGroup);
-    scrollTo(height);
-    return true;
-  };
-
-  const completeNav = async () => {
-    const scrollTarget = $gridScrollTarget?.at;
-    let scrolled = false;
-    if (scrollTarget) {
-      scrolled = await scrollToAssetId(scrollTarget);
-    }
-    if (!scrolled) {
-      // if the asset is not found, scroll to the top
-      scrollTo(0);
-    }
-    showSkeleton = false;
-  };
-
-  beforeNavigate(() => (timelineManager.suspendTransitions = true));
-
-  afterNavigate((nav) => {
-    const { complete } = nav;
-    complete.then(completeNav, completeNav);
-  });
-
-  const updateIsScrolling = () => (timelineManager.scrolling = true);
-  // Yes, updateSlideWindow() is called by the onScroll event. However, if you also just scrolled
-  // by explicitly invoking element.scrollX functions, there may be a delay with enough time to
-  // set the intersecting property of the monthGroup to false, then true, which causes the DOM
-  // nodes to be recreated, causing bad perf, and also, disrupting focus of those elements.
-  // Also note: don't throttle, debounce, or otherwise do this function async - it causes flicker
-  const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0);
-
-  const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
-
-  onMount(() => {
-    if (!enableRouting) {
-      showSkeleton = false;
-    }
-  });
-</script>
-
-<Hmr
-  onAfterUpdate={(payload: UpdatePayload) => {
-    // when hmr happens, skeleton is initialized to true by default
-    // normally, loading asset-grid is part of a navigation event, and the completion of
-    // that event triggers a scroll-to-asset, if necessary, when then clears the skeleton.
-    // this handler will run the navigation/scroll-to-asset handler when hmr is performed,
-    // preventing skeleton from showing after hmr
-    const finishHmr = () => {
-      const asset = $page.url.searchParams.get('at');
-      if (asset) {
-        $gridScrollTarget = { at: asset };
-      }
-      void completeNav();
-    };
-    const assetGridUpdate = payload.updates.some((update) => update.path.endsWith('base-timeline-viewer.svelte'));
-    if (assetGridUpdate) {
-      // wait 500ms for the update to be fully swapped in
-      setTimeout(finishHmr, 500);
-    }
-  }}
-/>
-
-{@render header?.(scrollTo)}
-
-<!-- Right margin MUST be equal to the width of scrubber -->
-<section
-  id="asset-grid"
-  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
-  style:margin-right={styleMarginRightOverride}
-  tabindex="-1"
-  bind:clientHeight={timelineManager.viewportHeight}
-  bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
-  bind:this={element}
-  onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
->
-  <section
-    bind:this={timelineElement}
-    id="virtual-timeline"
-    class:invisible={showSkeleton}
-    style:height={timelineManager.timelineHeight + 'px'}
-  >
-    <section
-      use:resizeObserver={topSectionResizeObserver}
-      class:invisible={showSkeleton}
-      style:position="absolute"
-      style:left="0"
-      style:right="0"
-    >
-      {@render children?.()}
-      {#if isEmpty}
-        <!-- (optional) empty placeholder -->
-        {@render empty?.()}
-      {/if}
-    </section>
-
-    {#each timelineManager.months as monthGroup (monthGroup.viewId)}
-      {@const display = monthGroup.intersecting}
-      {@const absoluteHeight = monthGroup.top}
-
-      {#if !monthGroup.isLoaded}
-        <div
-          style:height={monthGroup.height + 'px'}
-          style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-          style:width="100%"
-        >
-          <Skeleton
-            height={monthGroup.height - monthGroup.timelineManager.headerHeight}
-            title={monthGroup.monthGroupTitle}
-          />
-        </div>
-      {:else if display}
-        <div
-          class="month-group"
-          style:height={monthGroup.height + 'px'}
-          style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-          style:width="100%"
-        >
-          <SelectableTimelineMonth
-            {customThumbnailLayout}
-            {withStacked}
-            {showArchiveIcon}
-            {assetInteraction}
-            {timelineManager}
-            {isSelectionMode}
-            {singleSelect}
-            {monthGroup}
-            {onAssetOpen}
-            onSelect={(isSingleSelect: boolean, asset: TimelineAsset) => {
-              if (isSingleSelect) {
-                scrollTo(0);
-              }
-              onSelect?.(asset);
-            }}
-            onScrollCompensationMonthInDOM={scrollCompensation}
-          />
-        </div>
-      {/if}
-    {/each}
-    <!-- spacer for lead-out -->
-    <div
-      class="h-[60px]"
-      style:position="absolute"
-      style:left="0"
-      style:right="0"
-      style:transform={`translate3d(0,${timelineManager.timelineHeight}px,0)`}
-    ></div>
-  </section>
-</section>
-
-<style>
-  #asset-grid {
-    contain: strict;
-    scrollbar-width: none;
-  }
-
-  .month-group {
-    contain: layout size paint;
-    transform-style: flat;
-    backface-visibility: hidden;
-    transform-origin: center center;
-  }
-</style>

web/src/lib/components/timeline/base-components/base-timeline.svelte

@@ -1,201 +0,0 @@
-<script lang="ts">
-  import BaseTimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { findMonthAtScrollPosition, type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
-  import type { Snippet } from 'svelte';
-  import Scrubber from './scrubber.svelte';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this timeline responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    showSkeleton?: boolean;
-
-    isShowDeleteConfirmation?: boolean;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-
-    children?: Snippet;
-    empty?: Snippet;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-
-    withStacked = false,
-    showArchiveIcon = false,
-    showSkeleton = $bindable(true),
-    isShowDeleteConfirmation = $bindable(false),
-    onAssetOpen,
-    onSelect = () => {},
-    children,
-    empty,
-  }: Props = $props();
-
-  const VIEWPORT_MULTIPLIER = 2; // Used to determine if timeline is "small"
-
-  // The percentage of scroll through the month that is currently intersecting the top boundary of the viewport.
-  // Note: There may be multiple months visible within the viewport at any given time.
-  let viewportTopMonthScrollPercent = $state(0);
-  // The timeline month intersecting the top position of the viewport
-  let viewportTopMonth: TimelineYearMonth | undefined = $state(undefined);
-  // Overall scroll percentage through the entire timeline (0-1)
-  let timelineScrollPercent: number = $state(0);
-  // Indicates whether the viewport is currently in the lead-out section (after all months)
-  let isInLeadOutSection = $state(false);
-  // Width of the scrubber component in pixels, used to adjust timeline margins
-  let scrubberWidth: number = $state(0);
-
-  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
-  // this function updates the scrubber position based on the current scroll position in the timeline
-  const handleTimelineScroll = () => {
-    isInLeadOutSection = false;
-
-    // Handle edge cases: small timeline (limited scroll) or lead-in area scrolling
-    const top = timelineManager.visibleWindow.top;
-    if (isSmallTimeline() || top < timelineManager.topSectionHeight) {
-      calculateTimelineScrollPercent();
-      return;
-    }
-
-    // Handle normal month scrolling
-    handleMonthScroll();
-  };
-
-  const handleMonthScroll = () => {
-    const scrollPosition = timelineManager.visibleWindow.top;
-    const months = timelineManager.months;
-    const maxScrollPercent = timelineManager.getMaxScrollPercent();
-
-    // Find the month at the current scroll position
-    const searchResult = findMonthAtScrollPosition(months, scrollPosition, maxScrollPercent);
-
-    if (searchResult) {
-      viewportTopMonth = searchResult.month;
-      viewportTopMonthScrollPercent = searchResult.monthScrollPercent;
-      isInLeadOutSection = false;
-      return;
-    }
-
-    // We're in lead-out section
-    isInLeadOutSection = true;
-    timelineScrollPercent = 1;
-    resetScrubberMonth();
-  };
-
-  const resetScrubberMonth = () => {
-    viewportTopMonth = undefined;
-    viewportTopMonthScrollPercent = 0;
-  };
-
-  const calculateTimelineScrollPercent = () => {
-    const maxScroll = timelineManager.getMaxScroll();
-    timelineScrollPercent = Math.min(1, timelineManager.visibleWindow.top / maxScroll);
-    resetScrubberMonth();
-  };
-
-  const handleOverallPercentScroll = (percent: number, scrollTo?: (offset: number) => void) => {
-    const maxScroll = timelineManager.getMaxScroll();
-    const offset = maxScroll * percent;
-    scrollTo?.(offset);
-  };
-
-  const findMonthGroup = (target: TimelineYearMonth) => {
-    return timelineManager.months.find(
-      ({ yearMonth }) => yearMonth.year === target.year && yearMonth.month === target.month,
-    );
-  };
-
-  const isSmallTimeline = () => {
-    return timelineManager.timelineHeight < timelineManager.viewportHeight * VIEWPORT_MULTIPLIER;
-  };
-
-  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
-  // this function scrolls the timeline to the specified month group and offset, based on scrubber interaction
-  const onScrub: ScrubberListener = (scrubberData) => {
-    const { scrubberMonth, overallScrollPercent, scrubberMonthScrollPercent, scrollToFunction } = scrubberData;
-
-    // Handle edge case or no month selected
-    if (!scrubberMonth || isSmallTimeline()) {
-      handleOverallPercentScroll(overallScrollPercent, scrollToFunction);
-      return;
-    }
-
-    // Find and scroll to the selected month
-    const monthGroup = findMonthGroup(scrubberMonth);
-    if (monthGroup) {
-      scrollToPositionWithinMonth(monthGroup, scrubberMonthScrollPercent, scrollToFunction);
-    }
-  };
-
-  const scrollToPositionWithinMonth = (
-    monthGroup: MonthGroup,
-    monthGroupScrollPercent: number,
-    handleScrollTop?: (top: number) => void,
-  ) => {
-    const topOffset = monthGroup.top;
-    const maxScrollPercent = timelineManager.getMaxScrollPercent();
-    const delta = monthGroup.height * monthGroupScrollPercent;
-    const scrollToTop = (topOffset + delta) * maxScrollPercent;
-
-    handleScrollTop?.(scrollToTop);
-  };
-  let baseTimelineViewer: BaseTimelineViewer | undefined = $state();
-  export const scrollToAsset = (asset: TimelineAsset) => baseTimelineViewer?.scrollToAsset(asset) ?? false;
-</script>
-
-<BaseTimelineViewer
-  bind:this={baseTimelineViewer}
-  {customThumbnailLayout}
-  {isSelectionMode}
-  {singleSelect}
-  {enableRouting}
-  {timelineManager}
-  {assetInteraction}
-  {withStacked}
-  {showArchiveIcon}
-  {showSkeleton}
-  {isShowDeleteConfirmation}
-  styleMarginRightOverride={scrubberWidth + 'px'}
-  {onAssetOpen}
-  {onSelect}
-  {children}
-  {empty}
-  {handleTimelineScroll}
->
-  {#snippet header(scrollToFunction)}
-    {#if timelineManager.months.length > 0}
-      <Scrubber
-        {timelineManager}
-        height={timelineManager.viewportHeight}
-        timelineTopOffset={timelineManager.topSectionHeight}
-        timelineBottomOffset={timelineManager.bottomSectionHeight}
-        {isInLeadOutSection}
-        {timelineScrollPercent}
-        {viewportTopMonthScrollPercent}
-        {viewportTopMonth}
-        onScrub={(scrubberData) => onScrub({ ...scrubberData, scrollToFunction })}
-        bind:scrubberWidth
-      />
-    {/if}
-  {/snippet}
-</BaseTimelineViewer>

web/src/lib/components/timeline/base-components/hmr.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import type { UpdatePayload } from 'vite';
-
-  interface Props {
-    onAfterUpdate: (payload: UpdatePayload) => void;
-  }
-
-  let { onAfterUpdate }: Props = $props();
-
-  onMount(() => {
-    const hot = import.meta.hot;
-    if (hot) {
-      hot.on('vite:afterUpdate', onAfterUpdate);
-      return () => hot.off('vite:afterUpdate', onAfterUpdate);
-    }
-  });
-</script>

web/src/lib/components/timeline/base-components/scrubber.svelte

@@ -1,593 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { ScrubberMonth } from '$lib/managers/timeline-manager/types';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { getTabbable } from '$lib/utils/focus-util';
-  import { type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
-  import { mdiPlay } from '@mdi/js';
-  import { clamp } from 'lodash-es';
-  import { onMount } from 'svelte';
-  import { fade, fly } from 'svelte/transition';
-
-  interface Props {
-    /** Offset from the top of the timeline (e.g., for headers) */
-    timelineTopOffset?: number;
-    /** Offset from the bottom of the timeline (e.g., for footers) */
-    timelineBottomOffset?: number;
-    /** Total height of the scrubber component */
-    height?: number;
-    /** Timeline manager instance that controls the timeline state */
-    timelineManager: TimelineManager;
-    /** Overall scroll percentage through the entire timeline (0-1), used when no specific month is targeted */
-    timelineScrollPercent?: number;
-    /** The percentage of scroll through the month that is currently intersecting the top boundary of the viewport */
-    viewportTopMonthScrollPercent?: number;
-    /** The year/month of the timeline month at the top of the viewport */
-    viewportTopMonth?: TimelineYearMonth;
-    /** Indicates whether the viewport is currently in the lead-out section (after all months) */
-    isInLeadOutSection?: boolean;
-    /** Width of the scrubber component in pixels (bindable for parent component margin adjustments) */
-    scrubberWidth?: number;
-    /** Callback fired when user interacts with the scrubber to navigate */
-    onScrub?: ScrubberListener;
-    /** Callback fired when keyboard events occur on the scrubber */
-    onScrubKeyDown?: (event: KeyboardEvent, element: HTMLElement) => void;
-    /** Callback fired when scrubbing starts */
-    startScrub?: ScrubberListener;
-    /** Callback fired when scrubbing stops */
-    stopScrub?: ScrubberListener;
-  }
-
-  let {
-    timelineTopOffset = 0,
-    timelineBottomOffset = 0,
-    height = 0,
-    timelineManager,
-    timelineScrollPercent = 0,
-    viewportTopMonthScrollPercent = 0,
-    viewportTopMonth = undefined,
-    isInLeadOutSection = false,
-    onScrub = undefined,
-    onScrubKeyDown = undefined,
-    startScrub = undefined,
-    stopScrub = undefined,
-    scrubberWidth = $bindable(),
-  }: Props = $props();
-
-  let isHover = $state(false);
-  let isDragging = $state(false);
-  let isHoverOnPaddingTop = $state(false);
-  let isHoverOnPaddingBottom = $state(false);
-  let hoverY = $state(0);
-  let clientY = 0;
-  let windowHeight = $state(0);
-  let scrollBar: HTMLElement | undefined = $state();
-
-  const toScrollY = (percent: number) => percent * (height - (PADDING_TOP + PADDING_BOTTOM));
-  const toTimelineY = (scrollY: number) => scrollY / (height - (PADDING_TOP + PADDING_BOTTOM));
-
-  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
-
-  const MOBILE_WIDTH = 20;
-  const DESKTOP_WIDTH = 60;
-  const HOVER_DATE_HEIGHT = 31.75;
-  const PADDING_TOP = $derived(usingMobileDevice ? 25 : HOVER_DATE_HEIGHT);
-  const PADDING_BOTTOM = $derived(usingMobileDevice ? 25 : 10);
-  const MIN_YEAR_LABEL_DISTANCE = 16;
-  const MIN_DOT_DISTANCE = 8;
-
-  const width = $derived.by(() => {
-    if (isDragging) {
-      return '100vw';
-    }
-    if (usingMobileDevice) {
-      if (timelineManager.scrolling) {
-        return MOBILE_WIDTH + 'px';
-      }
-      return '0px';
-    }
-    return DESKTOP_WIDTH + 'px';
-  });
-  $effect(() => {
-    scrubberWidth = usingMobileDevice ? MOBILE_WIDTH : DESKTOP_WIDTH;
-  });
-
-  const toScrollFromMonthGroupPercentage = (
-    scrubberMonth: { year: number; month: number } | undefined,
-    scrubberMonthPercent: number,
-    scrubOverallPercent: number,
-  ) => {
-    if (scrubberMonth) {
-      let offset = relativeTopOffset;
-      let match = false;
-      for (const segment of segments) {
-        if (segment.month === scrubberMonth.month && segment.year === scrubberMonth.year) {
-          offset += scrubberMonthPercent * segment.height;
-          match = true;
-          break;
-        }
-        offset += segment.height;
-      }
-      if (!match) {
-        offset += scrubberMonthPercent * relativeBottomOffset;
-      }
-      return offset;
-    } else if (isInLeadOutSection) {
-      let offset = relativeTopOffset;
-      for (const segment of segments) {
-        offset += segment.height;
-      }
-      offset += scrubOverallPercent * relativeBottomOffset;
-      return offset;
-    } else {
-      return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
-    }
-  };
-  let scrollY = $derived(
-    toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
-  );
-  let timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight + timelineTopOffset + timelineBottomOffset);
-  let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
-  let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
-
-  type Segment = {
-    count: number;
-    height: number;
-    dateFormatted: string;
-    year: number;
-    month: number;
-    hasLabel: boolean;
-    hasDot: boolean;
-  };
-
-  const calculateSegments = (months: ScrubberMonth[]) => {
-    let height = 0;
-    let dotHeight = 0;
-
-    let segments: Segment[] = [];
-    let previousLabeledSegment: Segment | undefined;
-
-    let top = 0;
-    for (const [i, scrubMonth] of months.entries()) {
-      const scrollBarPercentage = scrubMonth.height / timelineFullHeight;
-
-      const segment = {
-        top,
-        count: scrubMonth.assetCount,
-        height: toScrollY(scrollBarPercentage),
-        dateFormatted: scrubMonth.title,
-        year: scrubMonth.year,
-        month: scrubMonth.month,
-        hasLabel: false,
-        hasDot: false,
-      };
-      top += segment.height;
-      if (i === 0) {
-        segment.hasDot = true;
-        segment.hasLabel = true;
-        previousLabeledSegment = segment;
-      } else {
-        if (previousLabeledSegment?.year !== segment.year && height > MIN_YEAR_LABEL_DISTANCE) {
-          height = 0;
-          segment.hasLabel = true;
-          previousLabeledSegment = segment;
-        }
-        if (i !== 1 && segment.height > 5 && dotHeight > MIN_DOT_DISTANCE) {
-          segment.hasDot = true;
-          dotHeight = 0;
-        }
-
-        height += segment.height;
-        dotHeight += segment.height;
-      }
-      segments.push(segment);
-    }
-
-    return segments;
-  };
-  let activeSegment: HTMLElement | undefined = $state();
-  const segments = $derived(calculateSegments(timelineManager.scrubberMonths));
-  const hoverLabel = $derived.by(() => {
-    if (isHoverOnPaddingTop) {
-      return segments.at(0)?.dateFormatted;
-    }
-    if (isHoverOnPaddingBottom) {
-      return segments.at(-1)?.dateFormatted;
-    }
-    return activeSegment?.dataset.label;
-  });
-  const segmentDate = $derived.by(() => {
-    if (!activeSegment?.dataset.segmentYearMonth) {
-      return undefined;
-    }
-    const [year, month] = activeSegment.dataset.segmentYearMonth.split('-').map(Number);
-    return { year, month };
-  });
-  const scrollSegment = $derived.by(() => {
-    const y = scrollY;
-    let cur = relativeTopOffset;
-    for (const segment of segments) {
-      if (y < cur + segment.height) {
-        return segment;
-      }
-      cur += segment.height;
-    }
-    return null;
-  });
-  const scrollHoverLabel = $derived(scrollSegment?.dateFormatted || '');
-
-  const findElementBestY = (elements: Element[], y: number, ...ids: string[]) => {
-    if (ids.length === 0) {
-      return undefined;
-    }
-    const filtered = elements.filter((element) => {
-      if (element instanceof HTMLElement && element.dataset.id) {
-        return ids.includes(element.dataset.id);
-      }
-      return false;
-    }) as HTMLElement[];
-    const imperfect = [];
-    for (const element of filtered) {
-      const boundingClientRect = element.getBoundingClientRect();
-      if (boundingClientRect.y > y) {
-        imperfect.push({
-          element,
-          boundingClientRect,
-        });
-        continue;
-      }
-      if (y <= boundingClientRect.y + boundingClientRect.height) {
-        return {
-          element,
-          boundingClientRect,
-        };
-      }
-    }
-    return imperfect.at(0);
-  };
-
-  const getActive = (x: number, y: number) => {
-    const elements = document.elementsFromPoint(x, y);
-    const bestElement = findElementBestY(elements, y, 'time-segment', 'lead-in', 'lead-out');
-
-    if (bestElement) {
-      const segment = bestElement.element;
-      const boundingClientRect = bestElement.boundingClientRect;
-      const sy = boundingClientRect.y;
-      const relativeY = y - sy;
-      const monthGroupPercentY = relativeY / boundingClientRect.height;
-      return {
-        isOnPaddingTop: false,
-        isOnPaddingBottom: false,
-        segment,
-        monthGroupPercentY,
-      };
-    }
-
-    // check if padding
-    const bar = findElementBestY(elements, 0, 'scrubber');
-    let isOnPaddingTop = false;
-    let isOnPaddingBottom = false;
-
-    if (bar) {
-      const sr = bar.boundingClientRect;
-      if (y < sr.top + PADDING_TOP) {
-        isOnPaddingTop = true;
-      }
-      if (y > sr.bottom - PADDING_BOTTOM - 1) {
-        isOnPaddingBottom = true;
-      }
-    }
-
-    return {
-      isOnPaddingTop,
-      isOnPaddingBottom,
-      segment: undefined,
-      monthGroupPercentY: 0,
-    };
-  };
-
-  const handleMouseEvent = (event: { clientY: number; isDragging?: boolean }) => {
-    const wasDragging = isDragging;
-
-    isDragging = event.isDragging ?? isDragging;
-    clientY = event.clientY;
-
-    if (!scrollBar) {
-      return;
-    }
-
-    const rect = scrollBar.getBoundingClientRect()!;
-    const lower = 0;
-    const upper = rect?.height - (PADDING_TOP + PADDING_BOTTOM);
-    hoverY = clamp(clientY - rect?.top - PADDING_TOP, lower, upper);
-    const x = rect!.left + rect!.width / 2;
-    const { segment, monthGroupPercentY, isOnPaddingTop, isOnPaddingBottom } = getActive(x, clientY);
-    activeSegment = segment;
-    isHoverOnPaddingTop = isOnPaddingTop;
-    isHoverOnPaddingBottom = isOnPaddingBottom;
-
-    const scrollPercent = toTimelineY(hoverY);
-    if (wasDragging === false && isDragging) {
-      void startScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-      void onScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-    }
-
-    if (wasDragging && !isDragging) {
-      void stopScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-      return;
-    }
-
-    if (!isDragging) {
-      return;
-    }
-
-    void onScrub?.({
-      scrubberMonth: segmentDate!,
-      overallScrollPercent: scrollPercent,
-      scrubberMonthScrollPercent: monthGroupPercentY,
-    });
-  };
-  /* eslint-disable tscompat/tscompat */
-  const getTouch = (event: TouchEvent) => {
-    if (event.touches.length === 1) {
-      return event.touches[0];
-    }
-    return null;
-  };
-  const onTouchStart = (event: TouchEvent) => {
-    const touch = getTouch(event);
-    if (!touch) {
-      isHover = false;
-      return;
-    }
-    const elements = document.elementsFromPoint(touch.clientX, touch.clientY);
-    const isHoverScrollbar =
-      findElementBestY(elements, 0, 'scrubber', 'time-label', 'lead-in', 'lead-out') !== undefined;
-
-    isHover = isHoverScrollbar;
-
-    if (isHoverScrollbar) {
-      handleMouseEvent({
-        clientY: touch.clientY,
-        isDragging: true,
-      });
-    }
-  };
-  const onTouchEnd = () => {
-    if (isHover) {
-      isHover = false;
-    }
-    handleMouseEvent({
-      clientY,
-      isDragging: false,
-    });
-  };
-  const onTouchMove = (event: TouchEvent) => {
-    const touch = getTouch(event);
-    if (touch && isDragging) {
-      handleMouseEvent({
-        clientY: touch.clientY,
-      });
-    } else {
-      isHover = false;
-    }
-  };
-  /* eslint-enable tscompat/tscompat */
-  onMount(() => {
-    document.addEventListener('touchmove', onTouchMove, { capture: true, passive: true });
-    return () => {
-      document.removeEventListener('touchmove', onTouchMove, true);
-    };
-  });
-
-  onMount(() => {
-    document.addEventListener('touchstart', onTouchStart, { capture: true, passive: true });
-    document.addEventListener('touchend', onTouchEnd, { capture: true, passive: true });
-    return () => {
-      document.removeEventListener('touchstart', onTouchStart, true);
-      document.removeEventListener('touchend', onTouchEnd, true);
-    };
-  });
-
-  const isTabEvent = (event: KeyboardEvent) => event?.key === 'Tab';
-  const isTabForward = (event: KeyboardEvent) => isTabEvent(event) && !event.shiftKey;
-  const isTabBackward = (event: KeyboardEvent) => isTabEvent(event) && event.shiftKey;
-  const isArrowUp = (event: KeyboardEvent) => event?.key === 'ArrowUp';
-  const isArrowDown = (event: KeyboardEvent) => event?.key === 'ArrowDown';
-
-  const handleFocus = (event: KeyboardEvent) => {
-    const forward = isTabForward(event);
-    const backward = isTabBackward(event);
-    if (forward || backward) {
-      event.preventDefault();
-
-      const focusable = getTabbable(document.body);
-      if (scrollBar) {
-        const index = focusable.indexOf(scrollBar);
-        if (index !== -1) {
-          let next: HTMLElement;
-          next = forward
-            ? (focusable[(index + 1) % focusable.length] as HTMLElement)
-            : (focusable[(index - 1) % focusable.length] as HTMLElement);
-          next.focus();
-        }
-      }
-    }
-  };
-  const handleAccessibility = (event: KeyboardEvent) => {
-    if (isTabEvent(event)) {
-      handleFocus(event);
-      return true;
-    }
-    if (isArrowUp(event)) {
-      let next;
-      if (scrollSegment) {
-        const idx = segments.indexOf(scrollSegment);
-        next = idx === -1 ? segments.at(-2) : segments[idx - 1];
-      } else {
-        next = segments.at(-2);
-      }
-      if (next) {
-        event.preventDefault();
-        void onScrub?.({
-          scrubberMonth: { year: next.year, month: next.month },
-          overallScrollPercent: -1,
-          scrubberMonthScrollPercent: 0,
-        });
-        return true;
-      }
-    }
-    if (isArrowDown(event) && scrollSegment) {
-      const idx = segments.indexOf(scrollSegment);
-      if (idx !== -1) {
-        const next = segments[idx + 1];
-        if (next) {
-          event.preventDefault();
-          void onScrub?.({
-            scrubberMonth: { year: next.year, month: next.month },
-            overallScrollPercent: -1,
-            scrubberMonthScrollPercent: 0,
-          });
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-  const keydown = (event: KeyboardEvent) => {
-    let handled = handleAccessibility(event);
-    if (!handled) {
-      onScrubKeyDown?.(event, event.currentTarget as HTMLElement);
-    }
-  };
-</script>
-
-<svelte:window
-  bind:innerHeight={windowHeight}
-  onmousemove={({ clientY }) => (isDragging || isHover) && handleMouseEvent({ clientY })}
-  onmousedown={({ clientY }) => isHover && handleMouseEvent({ clientY, isDragging: true })}
-  onmouseup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })}
-/>
-
-<div
-  transition:fly={{ x: 50, duration: 250 }}
-  tabindex="0"
-  role="scrollbar"
-  aria-controls="time-label"
-  aria-valuetext={hoverLabel}
-  aria-valuenow={scrollY + PADDING_TOP}
-  aria-valuemax={toScrollY(1)}
-  aria-valuemin={toScrollY(0)}
-  data-id="scrubber"
-  class="absolute end-0 z-1 select-none hover:cursor-row-resize"
-  style:padding-top={PADDING_TOP + 'px'}
-  style:padding-bottom={PADDING_BOTTOM + 'px'}
-  style:width
-  style:height={height + 'px'}
-  style:background-color={isDragging ? 'transparent' : 'transparent'}
-  bind:this={scrollBar}
-  onmouseenter={() => (isHover = true)}
-  onmouseleave={() => (isHover = false)}
-  onkeydown={keydown}
-  draggable="false"
->
-  {#if !usingMobileDevice && hoverLabel && (isHover || isDragging)}
-    <div
-      id="time-label"
-      class={[
-        { 'border-b-2': isDragging },
-        { 'rounded-bl-md': !isDragging },
-        'bg-light truncate opacity-85 pointer-events-none absolute end-0 min-w-20 max-w-64 w-fit rounded-ss-md  border-immich-primary py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg z-1',
-      ]}
-      style:top="{hoverY + 2}px"
-    >
-      {hoverLabel}
-    </div>
-  {/if}
-  {#if usingMobileDevice && ((timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging)}
-    <div
-      id="time-label"
-      class="rounded-s-full w-[32px] ps-2 text-white bg-immich-primary dark:bg-gray-600 hover:cursor-pointer select-none"
-      style:top="{PADDING_TOP + (scrollY - 50 / 2)}px"
-      style:height="50px"
-      style:right="0"
-      style:position="absolute"
-      in:fade={{ duration: 200 }}
-      out:fade={{ duration: 200 }}
-    >
-      <Icon path={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-[2px]" />
-      <Icon path={mdiPlay} size="20" class="rotate-90 relative top-px -end-[2px]" />
-      {#if (timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging}
-        <p
-          transition:fade={{ duration: 200 }}
-          style:bottom={50 / 2 - 30 / 2 + 'px'}
-          style:right="36px"
-          style:width="fit-content"
-          class="truncate pointer-events-none absolute text-sm rounded-full w-[32px] py-2 px-4 text-white bg-immich-primary/90 dark:bg-gray-500 hover:cursor-pointer select-none font-semibold"
-        >
-          {scrollHoverLabel}
-        </p>
-      {/if}
-    </div>
-  {/if}
-  <!-- Scroll Position Indicator Line -->
-  {#if !usingMobileDevice && !isDragging}
-    <div class="absolute end-0 h-[2px] w-10 bg-primary" style:top="{scrollY + PADDING_TOP - 2}px">
-      {#if timelineManager.scrolling && scrollHoverLabel && !isHover}
-        <p
-          transition:fade={{ duration: 200 }}
-          class="truncate pointer-events-none absolute end-0 bottom-0 min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-subtle/90 z-1 py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg"
-        >
-          {scrollHoverLabel}
-        </p>
-      {/if}
-    </div>
-  {/if}
-  <div
-    class="relative"
-    style:height={relativeTopOffset + 'px'}
-    data-id="lead-in"
-    data-segment-year-month={segments.at(0)?.year + '-' + segments.at(0)?.month}
-    data-label={segments.at(0)?.dateFormatted}
-  >
-    {#if relativeTopOffset > 6}
-      <div class="absolute end-3 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
-    {/if}
-  </div>
-  <!-- Time Segment -->
-  {#each segments as segment (segment.year + '-' + segment.month)}
-    <div
-      class="relative"
-      data-id="time-segment"
-      data-segment-year-month={segment.year + '-' + segment.month}
-      data-label={segment.dateFormatted}
-      style:height={segment.height + 'px'}
-    >
-      {#if !usingMobileDevice}
-        {#if segment.hasLabel}
-          <div class="absolute end-5 top-[-16px] text-[12px] dark:text-immich-dark-fg font-immich-mono">
-            {segment.year}
-          </div>
-        {/if}
-        {#if segment.hasDot}
-          <div class="absolute end-3 bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
-        {/if}
-      {/if}
-    </div>
-  {/each}
-  <div data-id="lead-out" class="relative" style:height={relativeBottomOffset + 'px'}></div>
-</div>

web/src/lib/components/timeline/base-components/skeleton.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  interface Props {
-    height: number;
-    title: string;
-  }
-
-  let { height = 0, title }: Props = $props();
-</script>
-
-<div class="overflow-clip" style:height={height + 'px'}>
-  <div
-    class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
-  >
-    {title}
-  </div>
-  <div class="animate-pulse absolute h-full w-full" data-skeleton="true"></div>
-</div>
-
-<style>
-  [data-skeleton] {
-    background-image: url('/light_skeleton.png');
-    background-repeat: repeat;
-    background-size: 235px, 235px;
-  }
-  @media (max-width: 767px) {
-    [data-skeleton] {
-      background-size: 100px, 100px;
-    }
-  }
-  :global(.dark) [data-skeleton] {
-    background-image: url('/dark_skeleton.png');
-  }
-  @keyframes delayedVisibility {
-    to {
-      visibility: visible;
-    }
-  }
-  [data-skeleton] {
-    visibility: hidden;
-    animation:
-      0s linear 0.1s forwards delayedVisibility,
-      pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-</style>

web/src/lib/components/timeline/base-components/timeline-month.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-
-  import { flip } from 'svelte/animate';
-  import { fly, scale } from 'svelte/transition';
-
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { Snippet } from 'svelte';
-
-  let { isUploading } = uploadAssetsStore;
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-
-    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-
-    onHover: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onAssetSelect: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
-
-    // these should be replaced with reactive properties in timeline-manager.svelte.ts
-    isDayGroupSelected: (dayGroup: DayGroup) => boolean;
-    isAssetSelected: (asset: TimelineAsset) => boolean;
-    isAssetSelectionCandidate: (asset: TimelineAsset) => boolean;
-    isAssetDisabled: (asset: TimelineAsset) => boolean;
-  }
-
-  let {
-    customThumbnailLayout,
-
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup,
-    timelineManager,
-    onScrollCompensationMonthInDOM,
-
-    onHover,
-    onAssetOpen,
-    onAssetSelect,
-    onDayGroupSelect,
-
-    isDayGroupSelected,
-    isAssetSelected,
-    isAssetSelectionCandidate,
-    isAssetDisabled,
-  }: Props = $props();
-
-  let isMouseOverGroup = $state(false);
-  let hoveredDayGroup = $state();
-
-  const transitionDuration = $derived.by(() =>
-    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
-  );
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-
-  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
-    return intersectables.filter((intersectable) => intersectable.intersecting);
-  }
-
-  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
-      onScrollCompensationMonthInDOM(timelineManager.scrollCompensation);
-    }
-  });
-</script>
-
-{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const absoluteWidth = dayGroup.left}
-
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <section
-    class={[
-      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
-      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
-    ]}
-    data-group
-    style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
-    onmouseenter={() => {
-      isMouseOverGroup = true;
-      hoveredDayGroup = dayGroup.groupTitle;
-    }}
-    onmouseleave={() => {
-      isMouseOverGroup = false;
-      hoveredDayGroup = null;
-    }}
-  >
-    <!-- Date group title -->
-    <div
-      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
-      style:width={dayGroup.width + 'px'}
-    >
-      {#if !singleSelect && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || isDayGroupSelected(dayGroup))}
-        <div
-          transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
-          class="inline-block pe-2 hover:cursor-pointer"
-          onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-        >
-          {#if isDayGroupSelected(dayGroup)}
-            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
-          {:else}
-            <Icon path={mdiCircleOutline} size="24" color="#757575" />
-          {/if}
-        </div>
-      {/if}
-
-      <span class="w-full truncate first-letter:capitalize" title={dayGroup.groupTitleFull}>
-        {dayGroup.groupTitle}
-      </span>
-    </div>
-
-    <!-- Image grid -->
-    <div
-      data-image-grid
-      class="relative overflow-clip"
-      style:height={dayGroup.height + 'px'}
-      style:width={dayGroup.width + 'px'}
-    >
-      {#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
-        {@const position = viewerAsset.position!}
-        {@const asset = viewerAsset.asset!}
-
-        <!-- note: don't remove data-asset-id - its used by web e2e tests -->
-        <div
-          data-asset-id={asset.id}
-          class="absolute"
-          style:top={position.top + 'px'}
-          style:left={position.left + 'px'}
-          style:width={position.width + 'px'}
-          style:height={position.height + 'px'}
-          out:scale|global={{ start: 0.1, duration: scaleDuration }}
-          animate:flip={{ duration: transitionDuration }}
-        >
-          <Thumbnail
-            showStackedIcon={withStacked}
-            {showArchiveIcon}
-            {asset}
-            {groupIndex}
-            onClick={() => onAssetOpen?.(dayGroup, assetSnapshot(asset))}
-            onSelect={() => onAssetSelect(dayGroup, assetSnapshot(asset))}
-            onMouseEvent={() => onHover(dayGroup, assetSnapshot(asset))}
-            selected={isAssetSelected(asset)}
-            selectionCandidate={isAssetSelectionCandidate(asset)}
-            disabled={isAssetDisabled(asset)}
-            thumbnailWidth={position.width}
-            thumbnailHeight={position.height}
-          />
-          {#if customThumbnailLayout}
-            {@render customThumbnailLayout(asset)}
-          {/if}
-        </div>
-      {/each}
-    </div>
-  </section>
-{/each}
-
-<style>
-  section {
-    contain: layout paint style;
-  }
-  [data-image-grid] {
-    user-select: none;
-  }
-</style>

web/src/lib/components/timeline/internal-components/selectable-timeline-month.svelte

@@ -1,276 +0,0 @@
-<script lang="ts">
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { navigate } from '$lib/utils/navigation';
-
-  import TimelineMonth from '$lib/components/timeline/base-components/timeline-month.svelte';
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode: boolean;
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (isSingleSelect: boolean, asset: TimelineAsset) => void;
-    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode,
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup = $bindable(),
-    assetInteraction,
-    timelineManager,
-    onAssetOpen,
-    onSelect,
-    onScrollCompensationMonthInDOM,
-  }: Props = $props();
-
-  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
-  let shiftKeyIsDown = $state(false);
-  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-
-  $effect(() => {
-    if (!lastAssetMouseEvent || !lastAssetMouseEvent) {
-      assetInteraction.clearAssetSelectionCandidates();
-    }
-    if (shiftKeyIsDown && lastAssetMouseEvent) {
-      void selectAssetCandidates(lastAssetMouseEvent);
-    }
-    if (isEmpty) {
-      assetInteraction.clearMultiselect();
-    }
-  });
-
-  const defaultAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      handleAssetSelect(dayGroup, asset);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleOnAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (onAssetOpen) {
-      onAssetOpen(dayGroup, asset, () => defaultAssetOpen(dayGroup, asset));
-      return;
-    }
-    defaultAssetOpen(dayGroup, asset);
-  };
-
-  // called when clicking asset with shift key pressed or with mouse
-  const handleAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    void onSelectAssets(asset);
-
-    const assetsInDayGroup = dayGroup.getAssets();
-    const groupTitle = dayGroup.groupTitle;
-    // Check if all assets are selected in a group to toggle the group selection's icon
-    let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
-      assetInteraction.hasSelectedAsset(asset.id),
-    ).length;
-
-    // if all assets are selected in a group, add the group to selected group
-    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
-      assetInteraction.addGroupToMultiselectGroup(groupTitle);
-    } else {
-      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const handleSelectAsset = (asset: TimelineAsset) => {
-    if (!timelineManager.albumAssets.has(asset.id)) {
-      assetInteraction.selectAsset(asset);
-    }
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = true;
-    }
-  };
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = false;
-    }
-  };
-
-  const handleOnHover = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (assetInteraction.selectionActive) {
-      void selectAssetCandidates(asset);
-    }
-    lastAssetMouseEvent = asset;
-  };
-
-  const handleDayGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
-    const group = dayGroup.groupTitle;
-    if (assetInteraction.selectedGroup.has(group)) {
-      assetInteraction.removeGroupFromMultiselectGroup(group);
-      for (const asset of assets) {
-        assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-      }
-    } else {
-      assetInteraction.addGroupToMultiselectGroup(group);
-      for (const asset of assets) {
-        handleSelectAsset(asset);
-      }
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const onSelectAssets = async (asset: TimelineAsset) => {
-    if (!asset) {
-      return;
-    }
-    onSelect?.(singleSelect, asset);
-
-    if (singleSelect) {
-      // onScrollToTop();
-
-      return;
-    }
-
-    const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
-    const deselect = assetInteraction.hasSelectedAsset(asset.id);
-
-    // Select/deselect already loaded assets
-    if (deselect) {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
-      }
-      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-    } else {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        handleSelectAsset(candidate);
-      }
-      handleSelectAsset(asset);
-    }
-
-    assetInteraction.clearAssetSelectionCandidates();
-
-    if (assetInteraction.assetSelectionStart && rangeSelection) {
-      let startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
-      let endBucket = timelineManager.getMonthGroupByAssetId(asset.id);
-
-      if (startBucket === null || endBucket === null) {
-        return;
-      }
-
-      // Select/deselect assets in range (start,end)
-      let started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === endBucket) {
-          break;
-        }
-        if (started) {
-          await timelineManager.loadMonthGroup(monthGroup.yearMonth);
-          for (const asset of monthGroup.assetsIterator()) {
-            if (deselect) {
-              assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-            } else {
-              handleSelectAsset(asset);
-            }
-          }
-        }
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-      }
-
-      // Update date group selection in range [start,end]
-      started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-        if (started) {
-          // Split month group into day groups and check each group
-          for (const dayGroup of monthGroup.dayGroups) {
-            const dayGroupTitle = dayGroup.groupTitle;
-            if (dayGroup.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
-              assetInteraction.addGroupToMultiselectGroup(dayGroupTitle);
-            } else {
-              assetInteraction.removeGroupFromMultiselectGroup(dayGroupTitle);
-            }
-          }
-        }
-        if (monthGroup === endBucket) {
-          break;
-        }
-      }
-    }
-
-    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
-  };
-
-  const selectAssetCandidates = async (endAsset: TimelineAsset) => {
-    if (!shiftKeyIsDown) {
-      return;
-    }
-
-    const startAsset = assetInteraction.assetSelectionStart;
-    if (!startAsset) {
-      return;
-    }
-
-    const assets = assetsSnapshot(await timelineManager.retrieveRange(startAsset, endAsset));
-    assetInteraction.setAssetSelectionCandidates(assets);
-  };
-</script>
-
-<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
-
-<TimelineMonth
-  {customThumbnailLayout}
-  {singleSelect}
-  {withStacked}
-  {showArchiveIcon}
-  {monthGroup}
-  {timelineManager}
-  {onScrollCompensationMonthInDOM}
-  onHover={handleOnHover}
-  onAssetOpen={handleOnAssetOpen}
-  onAssetSelect={handleAssetSelect}
-  onDayGroupSelect={handleDayGroupSelect}
-  isDayGroupSelected={(dayGroup: DayGroup) => assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-  isAssetSelected={(asset) => assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
-  isAssetSelectionCandidate={(asset) => assetInteraction.hasSelectionCandidate(asset.id)}
-  isAssetDisabled={(asset) => timelineManager.albumAssets.has(asset.id)}
-/>

web/src/lib/components/timeline/internal-components/timeline-asset-viewer.svelte

@@ -1,177 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import { AssetAction } from '$lib/constants';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
-  import { navigate } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, gridScrollTarget, mutex, preloadAssets } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    withStacked?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE
-      | null;
-  }
-
-  let {
-    timelineManager,
-    showSkeleton = $bindable(false),
-    removeAction,
-    withStacked = false,
-    isShared = false,
-    album = null,
-    person = null,
-  }: Props = $props();
-
-  const handlePrevious = async () => {
-    const release = await mutex.acquire();
-    const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
-
-    if (laterAsset) {
-      const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: laterAsset.id });
-    }
-
-    release();
-    return !!laterAsset;
-  };
-
-  const handleNext = async () => {
-    const release = await mutex.acquire();
-    const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
-
-    if (earlierAsset) {
-      const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
-    }
-
-    release();
-    return !!earlierAsset;
-  };
-
-  const handleRandom = async () => {
-    const randomAsset = await timelineManager.getRandomAsset();
-
-    if (randomAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
-      assetViewingStore.setAsset(asset);
-      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return asset;
-    }
-  };
-
-  const handleClose = async (asset: { id: string }) => {
-    assetViewingStore.showAssetViewer(false);
-    showSkeleton = true;
-    $gridScrollTarget = { at: asset.id };
-    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
-  };
-
-  const handlePreAction = async (action: Action) => {
-    switch (action.type) {
-      case removeAction:
-      case AssetAction.TRASH:
-      case AssetAction.RESTORE:
-      case AssetAction.DELETE:
-      case AssetAction.ARCHIVE:
-      case AssetAction.SET_VISIBILITY_LOCKED:
-      case AssetAction.SET_VISIBILITY_TIMELINE: {
-        // find the next asset to show or close the viewer
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
-
-        // delete after find the next one
-        timelineManager.removeAssets([action.asset.id]);
-        break;
-      }
-    }
-  };
-  const handleAction = (action: Action) => {
-    switch (action.type) {
-      case AssetAction.ARCHIVE:
-      case AssetAction.UNARCHIVE:
-      case AssetAction.FAVORITE:
-      case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.UNSTACK: {
-        updateUnstackedAssetInTimeline(timelineManager, action.assets);
-        break;
-      }
-      case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.addAssets([toTimelineAsset(action.asset)]);
-        if (action.stack) {
-          //Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
-          updateUnstackedAssetInTimeline(
-            timelineManager,
-            action.stack.assets.map((asset) => toTimelineAsset(asset)),
-          );
-          updateStackedAssetInTimeline(timelineManager, {
-            stack: action.stack,
-            toDeleteIds: action.stack.assets
-              .filter((asset) => asset.id !== action.stack?.primaryAssetId)
-              .map((asset) => asset.id),
-          });
-        }
-        break;
-      }
-      case AssetAction.SET_STACK_PRIMARY_ASSET: {
-        //Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
-        updateUnstackedAssetInTimeline(
-          timelineManager,
-          action.stack.assets.map((asset) => toTimelineAsset(asset)),
-        );
-        updateStackedAssetInTimeline(timelineManager, {
-          stack: action.stack,
-          toDeleteIds: action.stack.assets
-            .filter((asset) => asset.id !== action.stack.primaryAssetId)
-            .map((asset) => asset.id),
-        });
-        break;
-      }
-    }
-  };
-</script>
-
-{#await import('../../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-  <AssetViewer
-    {withStacked}
-    asset={$viewingAsset}
-    preloadAssets={$preloadAssets}
-    {isShared}
-    {album}
-    {person}
-    preAction={handlePreAction}
-    onAction={handleAction}
-    onPrevious={handlePrevious}
-    onNext={handleNext}
-    onRandom={handleRandom}
-    onClose={handleClose}
-  />
-{/await}

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

@@ -1,102 +0,0 @@
-<script lang="ts">
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import TimelineKeyboardActions from '$lib/components/timeline/actions/timeline-keyboard-actions.svelte';
-  import BaseTimeline from '$lib/components/timeline/base-components/base-timeline.svelte';
-  import TimelineAssetViewer from '$lib/components/timeline/internal-components/timeline-asset-viewer.svelte';
-  import type { AssetAction } from '$lib/constants';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { AlbumResponseDto, PersonResponseDto } from '@immich/sdk';
-  import type { Snippet } from 'svelte';
-
-  let { isViewing: showAssetViewer } = assetViewingStore;
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this asset grid is responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE
-      | null;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-    isShowDeleteConfirmation?: boolean;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-    onEscape?: () => void;
-    children?: Snippet;
-    empty?: Snippet;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-    removeAction,
-    withStacked = false,
-    showArchiveIcon = false,
-    isShared = false,
-    album = null,
-    person = null,
-    isShowDeleteConfirmation = $bindable(false),
-    onAssetOpen,
-    onSelect = () => {},
-    onEscape = () => {},
-    children,
-    empty,
-  }: Props = $props();
-
-  let viewer: BaseTimeline | undefined = $state();
-  let showSkeleton: boolean = $state(true);
-</script>
-
-<BaseTimeline
-  bind:this={viewer}
-  {customThumbnailLayout}
-  {isSelectionMode}
-  {singleSelect}
-  {enableRouting}
-  {timelineManager}
-  {assetInteraction}
-  {withStacked}
-  {showArchiveIcon}
-  {isShowDeleteConfirmation}
-  {showSkeleton}
-  {onAssetOpen}
-  {onSelect}
-  {children}
-  {empty}
-/>
-
-<TimelineKeyboardActions
-  scrollToAsset={(asset) => viewer?.scrollToAsset(asset) ?? false}
-  {timelineManager}
-  {assetInteraction}
-  bind:isShowDeleteConfirmation
-  {onEscape}
-/>
-
-<Portal target="body">
-  {#if $showAssetViewer}
-    <TimelineAssetViewer bind:showSkeleton {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
-  {/if}
-</Portal>

web/src/lib/managers/timeline-manager/day-group.svelte.ts

@@ -13,7 +13,6 @@ export class DayGroup {
   readonly monthGroup: MonthGroup;
   readonly index: number;
   readonly groupTitle: string;
-  readonly groupTitleFull: string;
   readonly day: number;
   viewerAssets: ViewerAsset[] = $state([]);
 
@@ -27,12 +26,11 @@ export class DayGroup {
   #col = $state(0);
   #deferredLayout = false;
 
-  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string, groupTitleFull: string) {
+  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string) {
     this.index = index;
     this.monthGroup = monthGroup;
     this.day = day;
     this.groupTitle = groupTitle;
-    this.groupTitleFull = groupTitleFull;
   }
 
   get top() {

web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts

@@ -143,24 +143,3 @@ export function findMonthGroupForDate(timelineManager: TimelineManager, targetYe
     }
   }
 }
-
-export function findClosestGroupForDate(timelineManager: TimelineManager, targetYearMonth: TimelineYearMonth) {
-  let closestMonth: MonthGroup | undefined;
-  let minDifference = Number.MAX_SAFE_INTEGER;
-
-  for (const month of timelineManager.months) {
-    const { year, month: monthNum } = month.yearMonth;
-
-    // Calculate the absolute difference in months
-    const yearDiff = Math.abs(year - targetYearMonth.year);
-    const monthDiff = Math.abs(monthNum - targetYearMonth.month);
-    const totalDiff = yearDiff * 12 + monthDiff;
-
-    if (totalDiff < minDifference) {
-      minDifference = totalDiff;
-      closestMonth = month;
-    }
-  }
-
-  return closestMonth;
-}

web/src/lib/managers/timeline-manager/month-group.svelte.ts

@@ -4,7 +4,6 @@ import { CancellableTask } from '$lib/utils/cancellable-task';
 import { handleError } from '$lib/utils/handle-error';
 import {
   formatGroupTitle,
-  formatGroupTitleFull,
   formatMonthGroupTitle,
   fromTimelinePlainDate,
   fromTimelinePlainDateTime,
@@ -223,8 +222,7 @@ export class MonthGroup {
       addContext.setDayGroup(dayGroup, localDateTime);
     } else {
       const groupTitle = formatGroupTitle(fromTimelinePlainDate(localDateTime));
-      const groupTitleFull = formatGroupTitleFull(fromTimelinePlainDate(localDateTime));
-      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle, groupTitleFull);
+      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle);
       this.dayGroups.push(dayGroup);
       addContext.setDayGroup(dayGroup, localDateTime);
       addContext.newDayGroups.add(dayGroup);

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

@@ -41,7 +41,6 @@ export class TimelineManager {
   isInitialized = $state(false);
   months: MonthGroup[] = $state([]);
   topSectionHeight = $state(0);
-  bottomSectionHeight = $state(60);
   timelineHeight = $derived(this.months.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight);
   assetCount = $derived(this.months.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
 
@@ -553,13 +552,4 @@ export class TimelineManager {
   getAssetOrder() {
     return this.#options.order ?? AssetOrder.Desc;
   }
-
-  getMaxScrollPercent() {
-    const totalHeight = this.timelineHeight + this.bottomSectionHeight + this.topSectionHeight;
-    return (totalHeight - this.viewportHeight) / totalHeight;
-  }
-
-  getMaxScroll() {
-    return this.topSectionHeight + this.bottomSectionHeight + (this.timelineHeight - this.viewportHeight);
-  }
 }

web/src/lib/utils/timeline-util.ts

@@ -23,12 +23,11 @@ export type TimelineDateTime = TimelineDate & {
   millisecond: number;
 };
 
-export type ScrubberListener = (scrubberData: {
-  scrubberMonth: { year: number; month: number };
-  overallScrollPercent: number;
-  scrubberMonthScrollPercent: number;
-  scrollToFunction?: (top: number) => void;
-}) => void | Promise<void>;
+export type ScrubberListener = (
+  scrubberMonth: { year: number; month: number },
+  overallScrollPercent: number,
+  scrubberMonthScrollPercent: number,
+) => void | Promise<void>;
 
 // used for AssetResponseDto.dateTimeOriginal, amongst others
 export const fromISODateTime = (isoDateTime: string, timeZone: string): DateTime<true> =>
@@ -152,14 +151,6 @@ export function formatGroupTitle(_date: DateTime): string {
   return getDateLocaleString(date, { locale: get(locale) });
 }
 
-export const formatGroupTitleFull = (_date: DateTime): string => {
-  if (!_date.isValid) {
-    return _date.toString();
-  }
-  const date = _date as DateTime<true>;
-  return getDateLocaleString(date);
-};
-
 export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string =>
   date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);
 
@@ -243,79 +234,3 @@ export function setDifference<T>(setA: Set<T>, setB: Set<T>): SvelteSet<T> {
   }
   return result;
 }
-
-export interface MonthGroupForSearch {
-  yearMonth: TimelineYearMonth;
-  top: number;
-  height: number;
-}
-
-export interface BinarySearchResult {
-  month: TimelineYearMonth;
-  monthScrollPercent: number;
-}
-
-export function findMonthAtScrollPosition(
-  months: MonthGroupForSearch[],
-  scrollPosition: number,
-  maxScrollPercent: number,
-): BinarySearchResult | null {
-  const SUBPIXEL_TOLERANCE = -1; // Tolerance for scroll position checks
-  const NEAR_END_THRESHOLD = 0.9999; // Threshold for detecting near-end of month
-
-  if (months.length === 0) {
-    return null;
-  }
-
-  // Check if we're before the first month
-  const firstMonthTop = months[0].top * maxScrollPercent;
-  if (scrollPosition < firstMonthTop - SUBPIXEL_TOLERANCE) {
-    return null;
-  }
-
-  // Check if we're after the last month
-  const lastMonth = months.at(-1)!;
-  const lastMonthBottom = (lastMonth.top + lastMonth.height) * maxScrollPercent;
-  if (scrollPosition >= lastMonthBottom - SUBPIXEL_TOLERANCE) {
-    return null;
-  }
-
-  // Binary search to find the month containing the scroll position
-  let left = 0;
-  let right = months.length - 1;
-
-  while (left <= right) {
-    const mid = Math.floor((left + right) / 2);
-    const month = months[mid];
-    const monthTop = month.top * maxScrollPercent;
-    const monthBottom = monthTop + month.height * maxScrollPercent;
-
-    if (scrollPosition >= monthTop - SUBPIXEL_TOLERANCE && scrollPosition < monthBottom - SUBPIXEL_TOLERANCE) {
-      // Found the month containing the scroll position
-      const distanceIntoMonth = scrollPosition - monthTop;
-      const monthScrollPercent = Math.max(0, distanceIntoMonth / (month.height * maxScrollPercent));
-
-      // Handle month boundary edge case
-      if (monthScrollPercent > NEAR_END_THRESHOLD && mid < months.length - 1) {
-        return {
-          month: months[mid + 1].yearMonth,
-          monthScrollPercent: 0,
-        };
-      }
-
-      return {
-        month: month.yearMonth,
-        monthScrollPercent,
-      };
-    }
-
-    if (scrollPosition < monthTop) {
-      right = mid - 1;
-    } else {
-      left = mid + 1;
-    }
-  }
-
-  // Shouldn't reach here, but return null if we do
-  return null;
-}

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -9,21 +9,6 @@
   import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
   import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeDescription from '$lib/components/photos-page/actions/change-description-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import RemoveFromAlbum from '$lib/components/photos-page/actions/remove-from-album.svelte';
-  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -32,6 +17,21 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import RemoveFromAlbum from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AlbumPageViewMode, AppRoute } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@@ -443,7 +443,7 @@
 <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
   <div class="relative w-full shrink">
     <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-      <AssetGrid
+      <Timeline
         enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
         {album}
         {timelineManager}
@@ -544,7 +544,7 @@
             </section>
           {/if}
         {/if}
-      </AssetGrid>
+      </Timeline>
 
       {#if showActivityStatus && !activityManager.isLoading}
         <div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end">

web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
 
-  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { AssetVisibility } from '@immich/sdk';
@@ -47,7 +47,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  <AssetGrid
+  <Timeline
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -57,7 +57,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_archived_assets_message')} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>
 
 {#if assetInteraction.selectionActive}

web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeDescription from '$lib/components/photos-page/actions/change-description-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -51,7 +51,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  <AssetGrid
+  <Timeline
     enableRouting={true}
     withStacked={true}
     {timelineManager}
@@ -62,7 +62,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_favorites_message')} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>
 
 <!-- Multiselection mode app bar -->

web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -2,24 +2,24 @@
   import { afterNavigate, goto, invalidateAll } from '$app/navigation';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import AssetJobActions from '$lib/components/photos-page/actions/asset-job-actions.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeDescription from '$lib/components/photos-page/actions/change-description-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import AssetJobActions from '$lib/components/timeline/actions/AssetJobActions.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import type { Viewport } from '$lib/managers/timeline-manager/types';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';

web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -58,7 +58,7 @@
     </Button>
   {/snippet}
 
-  <AssetGrid
+  <Timeline
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -68,7 +68,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>
 
 <!-- Multi-selection mode app bar -->

web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AppRoute } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -43,7 +43,7 @@
 </script>
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
+  <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
 </main>
 
 {#if assetInteraction.selectionActive}

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -8,20 +8,6 @@
   import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
   import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
   import UnMergeFaceSelector from '$lib/components/faces-page/unmerge-face-selector.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeDescription from '$lib/components/photos-page/actions/change-description-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -30,6 +16,20 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -386,7 +386,7 @@
   }}
 >
   {#key person.id}
-    <AssetGrid
+    <Timeline
       enableRouting={true}
       {person}
       {timelineManager}
@@ -498,7 +498,7 @@
           {/if}
         </div>
       {/if}
-    </AssetGrid>
+    </Timeline>
   {/key}
 </main>
 

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

@@ -1,26 +1,26 @@
 <script lang="ts">
   import { beforeNavigate } from '$app/navigation';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import AssetJobActions from '$lib/components/photos-page/actions/asset-job-actions.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeDescription from '$lib/components/photos-page/actions/change-description-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import LinkLivePhotoAction from '$lib/components/photos-page/actions/link-live-photo-action.svelte';
-  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
-  import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import MemoryLane from '$lib/components/photos-page/memory-lane.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import AssetJobActions from '$lib/components/timeline/actions/AssetJobActions.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import LinkLivePhotoAction from '$lib/components/timeline/actions/LinkLivePhotoAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import StackAction from '$lib/components/timeline/actions/StackAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -89,7 +89,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}>
-  <AssetGrid
+  <Timeline
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -103,7 +103,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>
 
 {#if assetInteraction.selectionActive}

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -4,24 +4,24 @@
   import { shortcut } from '$lib/actions/shortcut';
   import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import AssetJobActions from '$lib/components/photos-page/actions/asset-job-actions.svelte';
-  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
-  import ChangeDescription from '$lib/components/photos-page/actions/change-description-action.svelte';
-  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import AssetJobActions from '$lib/components/timeline/actions/AssetJobActions.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';

web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -2,11 +2,11 @@
   import { goto } from '$app/navigation';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AppRoute, AssetAction, QueryParameter } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import TagCreateModal from '$lib/modals/TagCreateModal.svelte';
@@ -117,11 +117,11 @@
 
   <section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
     {#if tag.hasAssets}
-      <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
+      <Timeline enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
         {#snippet empty()}
           <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
         {/snippet}
-      </AssetGrid>
+      </Timeline>
     {:else}
       <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
     {/if}

web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -2,16 +2,16 @@
   import { goto } from '$app/navigation';
   import empty3Url from '$lib/assets/empty-3.svg';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
-  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import RestoreAssets from '$lib/components/timeline/actions/RestoreAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AppRoute } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -116,14 +116,14 @@
       </HStack>
     {/snippet}
 
-    <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
+    <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
         {$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
       </p>
       {#snippet empty()}
         <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} />
       {/snippet}
-    </AssetGrid>
+    </Timeline>
   </UserPageLayout>
 {/if}
 

web/src/routes/(user)/utilities/geolocation/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
@@ -185,7 +185,7 @@
     </div>
   {/if}
 
-  <AssetGrid
+  <Timeline
     isSelectionMode={true}
     enableRouting={true}
     {timelineManager}
@@ -209,5 +209,5 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>