fix: foreground cloud sync

* chore: use context menu for user table

* chore: reorder columns

---------

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

docs/docs/features/mobile-app.mdx

@@ -68,6 +68,56 @@ Now make sure that the local album is selected in the backup screen (steps 1-2 a
   title="Upload button after photos selection"
 />
 
+## Free Up Space
+
+The **Free Up Space** tool allows you to remove local media files from your device that have already been successfully backed up to your Immich server (and are not in the Immich trash). This helps reclaim storage on your mobile device without losing your memories.
+
+### How it works
+
+1.  **Configuration:**
+    - **Cutoff Date:** You can select a cutoff date. The tool will only look for photos and videos **on or before** this date.
+    - **Filter Options:** You can choose to remove **All** assets, or restrict removal to **Photos only** or **Videos only**.
+    - **Keep Favorites:** By default, local assets marked as favorites are preserved on your device, even if they match the cutoff date.
+2.  **Scan & Review:** Before any files are removed, you are presented with a review screen to verify which items will be deleted.
+3.  **Deletion:** Confirmed items are moved to your device's native Trash/Recycle Bin. They will be permanently removed by the OS based on your system settings (usually after 30 days).
+
+:::info Android Permissions
+For the smoothest experience on Android, you should grant Immich special delete privileges. Without this, you may be prompted to confirm deletion for every single image.
+
+Go to **Immich Settings > Advanced** and enable **"Media Management Access"**.
+:::
+
+### iCloud Photos (iOS Users)
+
+If you use **iCloud Photos** alongside Immich, it is vital to understand how deletion affects your data. iCloud utilizes a two-way sync; this means deleting a photo from your iPhone to free up space will **also delete it from iCloud**.
+
+:::warning iCloud & Backups
+If you rely on iCloud as a secondary backup (part of a 3-2-1 backup strategy), using the Free Up Space feature in Immich will remove the file from both your phone and iCloud.
+
+Once deleted, the photo will exist **only** on your Immich server (and your phone's "Recently Deleted" folder for 30 days).
+
+When you use iCloud Photos and delete a photo or video on one device, it's also deleted on all other devices where you're signed in with the same Apple Account.
+
+More information on the [Apple Support](https://support.apple.com/en-us/108922#iCloud_photo_library) website
+
+**Shared Albums**
+Assets that are part of an **iCloud Shared Album** are automatically excluded from the cleanup scan to ensure they remain viewable to others in the shared album.
+:::
+
+### External App Dependencies (WhatsApp, etc.)
+
+:::danger WhatsApp & Local Files
+Android applications like **WhatsApp** rely on local files to display media in chat history.
+
+If Immich backs up your WhatsApp folder and you run **Free Up Space**, the local copies of these images will be deleted. Consequently, **media in your WhatsApp chats will appear blurry or missing.** You will only be able to view these photos inside the Immich app; they will no longer be visible within the WhatsApp interface.
+
+**Recommendation:** If keeping chat history intact is important, please ensure you review the deletion list carefully or consider excluding WhatsApp folders from the backup if you intend to use this feature frequently.
+:::
+
+:::info reclaim storage
+You must empty the system/gallery trash manually to reclaim storage.
+:::
+
 ## Album Sync
 
 You can sync or mirror an album from your phone to the Immich server on your account. For example, if you select Recents, Camera and Videos album for backup, the corresponding album with the same name will be created on the server. Once the assets from those albums are uploaded, they will be put into the target albums automatically.

e2e/playwright.config.ts

@@ -8,7 +8,7 @@ dotenv.config({ path: resolve(import.meta.dirname, '.env') });
 export const playwrightHost = process.env.PLAYWRIGHT_HOST ?? '127.0.0.1';
 export const playwrightDbHost = process.env.PLAYWRIGHT_DB_HOST ?? '127.0.0.1';
 export const playwriteBaseUrl = process.env.PLAYWRIGHT_BASE_URL ?? `http://${playwrightHost}:2285`;
-export const playwriteSlowMo = parseInt(process.env.PLAYWRIGHT_SLOW_MO ?? '0');
+export const playwriteSlowMo = Number.parseInt(process.env.PLAYWRIGHT_SLOW_MO ?? '0');
 export const playwrightDisableWebserver = process.env.PLAYWRIGHT_DISABLE_WEBSERVER;
 
 process.env.PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS = '1';
@@ -39,13 +39,13 @@ const config: PlaywrightTestConfig = {
       testMatch: /.*\.e2e-spec\.ts/,
       workers: 1,
     },
-    {
-      name: 'parallel tests',
-      use: { ...devices['Desktop Chrome'] },
-      testMatch: /.*\.parallel-e2e-spec\.ts/,
-      fullyParallel: true,
-      workers: process.env.CI ? 3 : Math.max(1, Math.round(cpus().length * 0.75) - 1),
-    },
+    // {
+    //   name: 'parallel tests',
+    //   use: { ...devices['Desktop Chrome'] },
+    //   testMatch: /.*\.parallel-e2e-spec\.ts/,
+    //   fullyParallel: true,
+    //   workers: process.env.CI ? 3 : Math.max(1, Math.round(cpus().length * 0.75) - 1),
+    // },
 
     // {
     //   name: 'firefox',

e2e/src/web/specs/asset-viewer/asset-viewer.parallel-e2e-spec.ts

@@ -12,7 +12,7 @@ import {
 import { setupBaseMockApiRoutes } from 'src/mock-network/base-network';
 import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/mock-network/timeline-network';
 import { utils } from 'src/utils';
-import { assetViewerUtils, cancelAllPollers } from 'src/web/specs/timeline/utils';
+import { assetViewerUtils } from 'src/web/specs/timeline/utils';
 
 test.describe.configure({ mode: 'parallel' });
 test.describe('asset-viewer', () => {
@@ -49,7 +49,6 @@ test.describe('asset-viewer', () => {
   });
 
   test.afterEach(() => {
-    cancelAllPollers();
     testContext.slowBucket = false;
     changes.albumAdditions = [];
     changes.assetDeletions = [];

e2e/src/web/specs/timeline/timeline.parallel-e2e-spec.ts

@@ -18,7 +18,6 @@ import { pageRoutePromise, setupTimelineMockApiRoutes, TimelineTestContext } fro
 import { utils } from 'src/utils';
 import {
   assetViewerUtils,
-  cancelAllPollers,
   padYearMonth,
   pageUtils,
   poll,
@@ -64,7 +63,6 @@ test.describe('Timeline', () => {
   });
 
   test.afterEach(() => {
-    cancelAllPollers();
     testContext.slowBucket = false;
     changes.albumAdditions = [];
     changes.assetDeletions = [];

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

@@ -23,13 +23,6 @@ export async function throttlePage(context: BrowserContext, page: Page) {
   await session.send('Emulation.setCPUThrottlingRate', { rate: 10 });
 }
 
-let activePollsAbortController = new AbortController();
-
-export const cancelAllPollers = () => {
-  activePollsAbortController.abort();
-  activePollsAbortController = new AbortController();
-};
-
 export const poll = async <T>(
   page: Page,
   query: () => Promise<T>,
@@ -37,21 +30,14 @@ export const poll = async <T>(
 ) => {
   let result;
   const timeout = Date.now() + 10_000;
-  const signal = activePollsAbortController.signal;
 
   const terminate = callback || ((result: Awaited<T> | undefined) => !!result);
   while (!terminate(result) && Date.now() < timeout) {
-    if (signal.aborted) {
-      return;
-    }
     try {
       result = await query();
     } catch {
       // ignore
     }
-    if (signal.aborted) {
-      return;
-    }
     if (page.isClosed()) {
       return;
     }

i18n/en.json

@@ -1009,9 +1009,11 @@
   "error_getting_places": "Error getting places",
   "error_loading_image": "Error loading image",
   "error_loading_partners": "Error loading partners: {error}",
+  "error_retrieving_asset_information": "Error retrieving asset information",
   "error_saving_image": "Error: {error}",
   "error_tag_face_bounding_box": "Error tagging face - cannot get bounding box coordinates",
   "error_title": "Error - Something went wrong",
+  "error_while_navigating": "Error while navigating to asset",
   "errors": {
     "cannot_navigate_next_asset": "Cannot navigate to the next asset",
     "cannot_navigate_previous_asset": "Cannot navigate to previous asset",
@@ -1555,7 +1557,7 @@
   "no_albums_with_name_yet": "It looks like you do not have any albums with this name yet.",
   "no_albums_yet": "It looks like you do not have any albums yet.",
   "no_archived_assets_message": "Archive photos and videos to hide them from your Photos view",
-  "no_assets_message": "CLICK TO UPLOAD YOUR FIRST PHOTO",
+  "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",
@@ -2189,6 +2191,7 @@
   "theme_setting_theme_subtitle": "Choose the app's theme setting",
   "theme_setting_three_stage_loading_subtitle": "Three-stage loading might increase the loading performance but causes significantly higher network load",
   "theme_setting_three_stage_loading_title": "Enable three-stage loading",
+  "then": "Then",
   "they_will_be_merged_together": "They will be merged together",
   "third_party_resources": "Third-Party Resources",
   "time": "Time",

mobile/lib/domain/utils/background_sync.dart

@@ -1,6 +1,5 @@
 import 'dart:async';
 
-import 'package:immich_mobile/domain/utils/migrate_cloud_ids.dart' as m;
 import 'package:immich_mobile/domain/utils/sync_linked_album.dart';
 import 'package:immich_mobile/providers/infrastructure/sync.provider.dart';
 import 'package:immich_mobile/utils/isolate.dart';
@@ -23,13 +22,8 @@ class BackgroundSyncManager {
   final SyncCallback? onHashingComplete;
   final SyncErrorCallback? onHashingError;
 
-  final SyncCallback? onCloudIdSyncStart;
-  final SyncCallback? onCloudIdSyncComplete;
-  final SyncErrorCallback? onCloudIdSyncError;
-
   Cancelable<bool?>? _syncTask;
   Cancelable<void>? _syncWebsocketTask;
-  Cancelable<void>? _cloudIdSyncTask;
   Cancelable<void>? _deviceAlbumSyncTask;
   Cancelable<void>? _linkedAlbumSyncTask;
   Cancelable<void>? _hashTask;
@@ -44,9 +38,6 @@ class BackgroundSyncManager {
     this.onHashingStart,
     this.onHashingComplete,
     this.onHashingError,
-    this.onCloudIdSyncStart,
-    this.onCloudIdSyncComplete,
-    this.onCloudIdSyncError,
   });
 
   Future<void> cancel() async {
@@ -64,12 +55,6 @@ class BackgroundSyncManager {
     _syncWebsocketTask?.cancel();
     _syncWebsocketTask = null;
 
-    if (_cloudIdSyncTask != null) {
-      futures.add(_cloudIdSyncTask!.future);
-    }
-    _cloudIdSyncTask?.cancel();
-    _cloudIdSyncTask = null;
-
     if (_linkedAlbumSyncTask != null) {
       futures.add(_linkedAlbumSyncTask!.future);
     }
@@ -216,25 +201,6 @@ class BackgroundSyncManager {
       _linkedAlbumSyncTask = null;
     });
   }
-
-  Future<void> syncCloudIds() {
-    if (_cloudIdSyncTask != null) {
-      return _cloudIdSyncTask!.future;
-    }
-
-    onCloudIdSyncStart?.call();
-
-    _cloudIdSyncTask = runInIsolateGentle(computation: m.syncCloudIds);
-    return _cloudIdSyncTask!
-        .whenComplete(() {
-          onCloudIdSyncComplete?.call();
-          _cloudIdSyncTask = null;
-        })
-        .catchError((error) {
-          onCloudIdSyncError?.call(error.toString());
-          _cloudIdSyncTask = null;
-        });
-  }
 }
 
 Cancelable<void> _handleWsAssetUploadReadyV1Batch(List<dynamic> batchData) => runInIsolateGentle(

mobile/lib/domain/utils/migrate_cloud_ids.dart

@@ -10,14 +10,13 @@ import 'package:immich_mobile/infrastructure/repositories/local_album.repository
 import 'package:immich_mobile/platform/native_sync_api.g.dart';
 import 'package:immich_mobile/providers/api.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/sync.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:logging/logging.dart';
 // ignore: import_rule_openapi
 import 'package:openapi/api.dart' hide AssetVisibility;
 
-Future<void> syncCloudIds(ProviderContainer ref) async {
+Future<void> syncCloudIds(Ref ref) async {
   if (!CurrentPlatform.isIOS) {
     return;
   }
@@ -35,14 +34,6 @@ Future<void> syncCloudIds(ProviderContainer ref) async {
   }
   final canBulkUpdateMetadata = serverInfo.serverVersion.isAtLeast(major: 2, minor: 5);
 
-  // Wait for remote sync to complete, so we have up-to-date asset metadata entries
-  try {
-    await ref.read(syncStreamServiceProvider).sync();
-  } catch (e, s) {
-    logger.fine('Failed to complete remote sync before cloudId migration.', e, s);
-    return;
-  }
-
   // Fetch the mapping for backed up assets that have a cloud ID locally but do not have a cloud ID on the server
   final currentUser = ref.read(currentUserProvider);
   if (currentUser == null) {

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

@@ -10,6 +10,7 @@ import 'package:immich_mobile/providers/background_sync.provider.dart';
 import 'package:immich_mobile/providers/backup/backup.provider.dart';
 import 'package:immich_mobile/providers/backup/drift_backup.provider.dart';
 import 'package:immich_mobile/providers/gallery_permission.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/websocket.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:logging/logging.dart';
@@ -49,6 +50,7 @@ class SplashScreenPageState extends ConsumerState<SplashScreenPage> {
     final accessToken = Store.tryGet(StoreKey.accessToken);
 
     if (accessToken != null && serverUrl != null && endpoint != null) {
+      final infoProvider = ref.read(serverInfoProvider.notifier);
       final wsProvider = ref.read(websocketProvider.notifier);
       final backgroundManager = ref.read(backgroundSyncProvider);
       final backupProvider = ref.read(driftBackupProvider.notifier);
@@ -58,6 +60,7 @@ class SplashScreenPageState extends ConsumerState<SplashScreenPage> {
           (_) async {
             try {
               wsProvider.connect();
+              unawaited(infoProvider.getServerInfo());
 
               if (Store.isBetaTimelineEnabled) {
                 bool syncSuccess = false;
@@ -72,7 +75,6 @@ class SplashScreenPageState extends ConsumerState<SplashScreenPage> {
                       _resumeBackup(backupProvider);
                     }),
                     _resumeBackup(backupProvider),
-                    backgroundManager.syncCloudIds(),
                   ]);
                 } else {
                   await backgroundManager.hashAssets();

mobile/lib/providers/app_life_cycle.provider.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/services/log.service.dart';
+import 'package:immich_mobile/domain/utils/migrate_cloud_ids.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/models/backup/backup_state.model.dart';
@@ -156,11 +157,11 @@ class AppLifeCycleNotifier extends StateNotifier<AppLifeCycleEnum> {
       ]);
       if (syncSuccess) {
         await Future.wait([
+          _safeRun(syncCloudIds(_ref), "syncCloudIds"),
           _safeRun(backgroundManager.hashAssets(), "hashAssets").then((_) {
             _resumeBackup();
           }),
           _resumeBackup(),
-          backgroundManager.syncCloudIds(),
         ]);
       } else {
         await _safeRun(backgroundManager.hashAssets(), "hashAssets");

mobile/lib/providers/auth.provider.dart

@@ -1,19 +1,23 @@
+import 'dart:async';
+
 import 'package:flutter_udid/flutter_udid.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/domain/services/user.service.dart';
+import 'package:immich_mobile/domain/utils/migrate_cloud_ids.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/models/auth/auth_state.model.dart';
 import 'package:immich_mobile/models/auth/login_response.model.dart';
 import 'package:immich_mobile/providers/api.provider.dart';
+import 'package:immich_mobile/providers/background_sync.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/user.provider.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/auth.service.dart';
+import 'package:immich_mobile/services/background_upload.service.dart';
 import 'package:immich_mobile/services/foreground_upload.service.dart';
 import 'package:immich_mobile/services/secure_storage.service.dart';
-import 'package:immich_mobile/services/background_upload.service.dart';
 import 'package:immich_mobile/services/widget.service.dart';
 import 'package:immich_mobile/utils/debug_print.dart';
 import 'package:immich_mobile/utils/hash.dart';
@@ -172,6 +176,15 @@ class AuthNotifier extends StateNotifier<AuthState> {
       isAdmin: user.isAdmin,
     );
 
+    // TODO: Temporarily run cloud Id sync here until we have a better place to do it
+    unawaited(
+      _ref.read(backgroundSyncProvider).syncRemote().then((success) {
+        if (success) {
+          return syncCloudIds(_ref);
+        }
+      }),
+    );
+
     return true;
   }
 

mobile/lib/providers/background_sync.provider.dart

@@ -28,9 +28,6 @@ final backgroundSyncProvider = Provider<BackgroundSyncManager>((ref) {
     onHashingStart: syncStatusNotifier.startHashJob,
     onHashingComplete: syncStatusNotifier.completeHashJob,
     onHashingError: syncStatusNotifier.errorHashJob,
-    onCloudIdSyncStart: syncStatusNotifier.startCloudIdSync,
-    onCloudIdSyncComplete: syncStatusNotifier.completeCloudIdSync,
-    onCloudIdSyncError: syncStatusNotifier.errorCloudIdSync,
   );
   ref.onDispose(manager.cancel);
   return manager;

mobile/lib/providers/sync_status.provider.dart

@@ -21,7 +21,6 @@ class SyncStatusState {
   final SyncStatus remoteSyncStatus;
   final SyncStatus localSyncStatus;
   final SyncStatus hashJobStatus;
-  final SyncStatus cloudIdSyncStatus;
 
   final String? errorMessage;
 
@@ -29,7 +28,6 @@ class SyncStatusState {
     this.remoteSyncStatus = SyncStatus.idle,
     this.localSyncStatus = SyncStatus.idle,
     this.hashJobStatus = SyncStatus.idle,
-    this.cloudIdSyncStatus = SyncStatus.idle,
     this.errorMessage,
   });
 
@@ -37,14 +35,12 @@ class SyncStatusState {
     SyncStatus? remoteSyncStatus,
     SyncStatus? localSyncStatus,
     SyncStatus? hashJobStatus,
-    SyncStatus? cloudIdSyncStatus,
     String? errorMessage,
   }) {
     return SyncStatusState(
       remoteSyncStatus: remoteSyncStatus ?? this.remoteSyncStatus,
       localSyncStatus: localSyncStatus ?? this.localSyncStatus,
       hashJobStatus: hashJobStatus ?? this.hashJobStatus,
-      cloudIdSyncStatus: cloudIdSyncStatus ?? this.cloudIdSyncStatus,
       errorMessage: errorMessage ?? this.errorMessage,
     );
   }
@@ -52,7 +48,6 @@ class SyncStatusState {
   bool get isRemoteSyncing => remoteSyncStatus == SyncStatus.syncing;
   bool get isLocalSyncing => localSyncStatus == SyncStatus.syncing;
   bool get isHashing => hashJobStatus == SyncStatus.syncing;
-  bool get isCloudIdSyncing => cloudIdSyncStatus == SyncStatus.syncing;
 
   @override
   bool operator ==(Object other) {
@@ -61,12 +56,11 @@ class SyncStatusState {
         other.remoteSyncStatus == remoteSyncStatus &&
         other.localSyncStatus == localSyncStatus &&
         other.hashJobStatus == hashJobStatus &&
-        other.cloudIdSyncStatus == cloudIdSyncStatus &&
         other.errorMessage == errorMessage;
   }
 
   @override
-  int get hashCode => Object.hash(remoteSyncStatus, localSyncStatus, hashJobStatus, cloudIdSyncStatus, errorMessage);
+  int get hashCode => Object.hash(remoteSyncStatus, localSyncStatus, hashJobStatus, errorMessage);
 }
 
 class SyncStatusNotifier extends Notifier<SyncStatusState> {
@@ -77,7 +71,6 @@ class SyncStatusNotifier extends Notifier<SyncStatusState> {
       remoteSyncStatus: SyncStatus.idle,
       localSyncStatus: SyncStatus.idle,
       hashJobStatus: SyncStatus.idle,
-      cloudIdSyncStatus: SyncStatus.idle,
     );
   }
 
@@ -116,18 +109,6 @@ class SyncStatusNotifier extends Notifier<SyncStatusState> {
   void startHashJob() => setHashJobStatus(SyncStatus.syncing);
   void completeHashJob() => setHashJobStatus(SyncStatus.success);
   void errorHashJob(String error) => setHashJobStatus(SyncStatus.error, error);
-
-  ///
-  /// Cloud ID Sync Job
-  ///
-
-  void setCloudIdSyncStatus(SyncStatus status, [String? errorMessage]) {
-    state = state.copyWith(cloudIdSyncStatus: status, errorMessage: status == SyncStatus.error ? errorMessage : null);
-  }
-
-  void startCloudIdSync() => setCloudIdSyncStatus(SyncStatus.syncing);
-  void completeCloudIdSync() => setCloudIdSyncStatus(SyncStatus.success);
-  void errorCloudIdSync(String error) => setCloudIdSyncStatus(SyncStatus.error, error);
 }
 
 final syncStatusProvider = NotifierProvider<SyncStatusNotifier, SyncStatusState>(SyncStatusNotifier.new);

mobile/lib/services/background_upload.service.dart

@@ -285,7 +285,12 @@ class BackgroundUploadService {
       return null;
     }
 
-    final fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+    String fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+    final hasExtension = p.extension(fileName).isNotEmpty;
+    if (!hasExtension) {
+      fileName = p.setExtension(fileName, p.extension(asset.name));
+    }
+
     final originalFileName = entity.isLivePhoto ? p.setExtension(fileName, p.extension(file.path)) : fileName;
 
     String metadata = UploadTaskMetadata(
@@ -307,10 +312,10 @@ class BackgroundUploadService {
       priority: priority,
       isFavorite: asset.isFavorite,
       requiresWiFi: requiresWiFi,
-      cloudId: asset.cloudId,
-      adjustmentTime: asset.adjustmentTime?.toIso8601String(),
-      latitude: asset.latitude?.toString(),
-      longitude: asset.longitude?.toString(),
+      cloudId: entity.isLivePhoto ? null : asset.cloudId,
+      adjustmentTime: entity.isLivePhoto ? null : asset.adjustmentTime?.toIso8601String(),
+      latitude: entity.isLivePhoto ? null : asset.latitude?.toString(),
+      longitude: entity.isLivePhoto ? null : asset.longitude?.toString(),
     );
   }
 

mobile/lib/services/foreground_upload.service.dart

@@ -16,6 +16,7 @@ import 'package:immich_mobile/platform/connectivity_api.g.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/platform.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/storage.provider.dart';
+import 'package:immich_mobile/repositories/asset_media.repository.dart';
 import 'package:immich_mobile/repositories/upload.repository.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
@@ -40,6 +41,7 @@ final foregroundUploadServiceProvider = Provider((ref) {
     ref.watch(backupRepositoryProvider),
     ref.watch(connectivityApiProvider),
     ref.watch(appSettingsServiceProvider),
+    ref.watch(assetMediaRepositoryProvider),
   );
 });
 
@@ -55,6 +57,7 @@ class ForegroundUploadService {
     this._backupRepository,
     this._connectivityApi,
     this._appSettingsService,
+    this._assetMediaRepository,
   );
 
   final UploadRepository _uploadRepository;
@@ -62,6 +65,7 @@ class ForegroundUploadService {
   final DriftBackupRepository _backupRepository;
   final ConnectivityApi _connectivityApi;
   final AppSettingsService _appSettingsService;
+  final AssetMediaRepository _assetMediaRepository;
   final Logger _logger = Logger('ForegroundUploadService');
 
   bool shouldAbortUpload = false;
@@ -311,7 +315,17 @@ class ForegroundUploadService {
         return;
       }
 
-      final originalFileName = entity.isLivePhoto ? p.setExtension(asset.name, p.extension(file.path)) : asset.name;
+      String fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+
+      /// Handle special file name from DJI or Fusion app
+      /// If the file name has no extension, likely due to special renaming template by specific apps
+      /// we append the original extension from the asset name
+      final hasExtension = p.extension(fileName).isNotEmpty;
+      if (!hasExtension) {
+        fileName = p.setExtension(fileName, p.extension(asset.name));
+      }
+
+      final originalFileName = entity.isLivePhoto ? p.setExtension(fileName, p.extension(file.path)) : fileName;
       final deviceId = Store.get(StoreKey.deviceId);
 
       final headers = ApiService.getRequestHeaders();
@@ -322,19 +336,6 @@ class ForegroundUploadService {
         'fileModifiedAt': asset.updatedAt.toUtc().toIso8601String(),
         'isFavorite': asset.isFavorite.toString(),
         'duration': asset.duration.toString(),
-        if (CurrentPlatform.isIOS && asset.cloudId != null)
-          'metadata': jsonEncode([
-            RemoteAssetMetadataItem(
-              key: RemoteAssetMetadataKey.mobileApp,
-              value: RemoteAssetMobileAppMetadata(
-                cloudId: asset.cloudId,
-                createdAt: asset.createdAt.toIso8601String(),
-                adjustmentTime: asset.adjustmentTime?.toIso8601String(),
-                latitude: asset.latitude?.toString(),
-                longitude: asset.longitude?.toString(),
-              ),
-            ),
-          ]),
       };
 
       // Upload live photo video first if available
@@ -363,6 +364,22 @@ class ForegroundUploadService {
         fields['livePhotoVideoId'] = livePhotoVideoId;
       }
 
+      // Add cloudId metadata only to the still image, not the motion video, becasue when the sync id happens, the motion video can get associated with the wrong still image.
+      if (CurrentPlatform.isIOS && asset.cloudId != null) {
+        fields['metadata'] = jsonEncode([
+          RemoteAssetMetadataItem(
+            key: RemoteAssetMetadataKey.mobileApp,
+            value: RemoteAssetMobileAppMetadata(
+              cloudId: asset.cloudId,
+              createdAt: asset.createdAt.toIso8601String(),
+              adjustmentTime: asset.adjustmentTime?.toIso8601String(),
+              latitude: asset.latitude?.toString(),
+              longitude: asset.longitude?.toString(),
+            ),
+          ),
+        ]);
+      }
+
       final result = await _uploadRepository.uploadFile(
         file: file,
         originalFileName: originalFileName,

mobile/openapi/lib/model/permission.dart

@@ -82,6 +82,8 @@ class Permission {
   static const timelinePeriodRead = Permission._(r'timeline.read');
   static const timelinePeriodDownload = Permission._(r'timeline.download');
   static const maintenance = Permission._(r'maintenance');
+  static const mapPeriodRead = Permission._(r'map.read');
+  static const mapPeriodSearch = Permission._(r'map.search');
   static const memoryPeriodCreate = Permission._(r'memory.create');
   static const memoryPeriodRead = Permission._(r'memory.read');
   static const memoryPeriodUpdate = Permission._(r'memory.update');
@@ -238,6 +240,8 @@ class Permission {
     timelinePeriodRead,
     timelinePeriodDownload,
     maintenance,
+    mapPeriodRead,
+    mapPeriodSearch,
     memoryPeriodCreate,
     memoryPeriodRead,
     memoryPeriodUpdate,
@@ -429,6 +433,8 @@ class PermissionTypeTransformer {
         case r'timeline.read': return Permission.timelinePeriodRead;
         case r'timeline.download': return Permission.timelinePeriodDownload;
         case r'maintenance': return Permission.maintenance;
+        case r'map.read': return Permission.mapPeriodRead;
+        case r'map.search': return Permission.mapPeriodSearch;
         case r'memory.create': return Permission.memoryPeriodCreate;
         case r'memory.read': return Permission.memoryPeriodRead;
         case r'memory.update': return Permission.memoryPeriodUpdate;

open-api/immich-openapi-specs.json

@@ -6305,6 +6305,7 @@
             "state": "Stable"
           }
         ],
+        "x-immich-permission": "map.read",
         "x-immich-state": "Stable"
       }
     },
@@ -6376,6 +6377,7 @@
             "state": "Stable"
           }
         ],
+        "x-immich-permission": "map.search",
         "x-immich-state": "Stable"
       }
     },
@@ -18966,6 +18968,8 @@
           "timeline.read",
           "timeline.download",
           "maintenance",
+          "map.read",
+          "map.search",
           "memory.create",
           "memory.read",
           "memory.update",

open-api/typescript-sdk/src/fetch-client.ts

@@ -5534,6 +5534,8 @@ export enum Permission {
     TimelineRead = "timeline.read",
     TimelineDownload = "timeline.download",
     Maintenance = "maintenance",
+    MapRead = "map.read",
+    MapSearch = "map.search",
     MemoryCreate = "memory.create",
     MemoryRead = "memory.read",
     MemoryUpdate = "memory.update",

plugins/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-core",
-  "version": "2.4.1",
+  "version": "2.0.1",
   "title": "Immich Core",
   "description": "Core workflow capabilities for Immich",
   "author": "Immich Team",
@@ -12,7 +12,9 @@
       "methodName": "filterFileName",
       "title": "Filter by filename",
       "description": "Filter assets by filename pattern using text matching or regular expressions",
-      "supportedContexts": ["asset"],
+      "supportedContexts": [
+        "asset"
+      ],
       "schema": {
         "type": "object",
         "properties": {
@@ -24,7 +26,11 @@
           "matchType": {
             "type": "string",
             "title": "Match type",
-            "enum": ["contains", "regex", "exact"],
+            "enum": [
+              "contains",
+              "regex",
+              "exact"
+            ],
             "default": "contains",
             "description": "Type of pattern matching to perform"
           },
@@ -34,14 +40,18 @@
             "description": "Whether matching should be case-sensitive"
           }
         },
-        "required": ["pattern"]
+        "required": [
+          "pattern"
+        ]
       }
     },
     {
       "methodName": "filterFileType",
       "title": "Filter by file type",
       "description": "Filter assets by file type",
-      "supportedContexts": ["asset"],
+      "supportedContexts": [
+        "asset"
+      ],
       "schema": {
         "type": "object",
         "properties": {
@@ -50,19 +60,26 @@
             "title": "File types",
             "items": {
               "type": "string",
-              "enum": ["image", "video"]
+              "enum": [
+                "image",
+                "video"
+              ]
             },
             "description": "Allowed file types"
           }
         },
-        "required": ["fileTypes"]
+        "required": [
+          "fileTypes"
+        ]
       }
     },
     {
       "methodName": "filterPerson",
       "title": "Filter by person",
-      "description": "Filter assets by detected people in the photo",
-      "supportedContexts": ["person"],
+      "description": "Filter by detected person",
+      "supportedContexts": [
+        "person"
+      ],
       "schema": {
         "type": "object",
         "properties": {
@@ -75,14 +92,15 @@
             "description": "List of person to match",
             "subType": "people-picker"
           },
-          "matchMode": {
-            "type": "string",
-            "title": "Match mode",
-            "enum": ["any", "all", "exact"],
-            "default": "any"
+          "matchAny": {
+            "type": "boolean",
+            "default": true,
+            "description": "Match any name (true) or require all names (false)"
           }
         },
-        "required": ["personIds"]
+        "required": [
+          "personIds"
+        ]
       }
     }
   ],
@@ -91,14 +109,18 @@
       "methodName": "actionArchive",
       "title": "Archive",
       "description": "Move the asset to archive",
-      "supportedContexts": ["asset"],
+      "supportedContexts": [
+        "asset"
+      ],
       "schema": {}
     },
     {
       "methodName": "actionFavorite",
       "title": "Favorite",
       "description": "Mark the asset as favorite or unfavorite",
-      "supportedContexts": ["asset"],
+      "supportedContexts": [
+        "asset"
+      ],
       "schema": {
         "type": "object",
         "properties": {
@@ -114,7 +136,10 @@
       "methodName": "actionAddToAlbum",
       "title": "Add to Album",
       "description": "Add the item to a specified album",
-      "supportedContexts": ["asset", "person"],
+      "supportedContexts": [
+        "asset",
+        "person"
+      ],
       "schema": {
         "type": "object",
         "properties": {
@@ -125,7 +150,9 @@
             "subType": "album-picker"
           }
         },
-        "required": ["albumId"]
+        "required": [
+          "albumId"
+        ]
       }
     }
   ]

plugins/src/index.d.ts

@@ -1,6 +1,5 @@
 declare module 'main' {
   export function filterFileName(): I32;
-  export function filterPerson(): I32;
   export function actionAddToAlbum(): I32;
   export function actionArchive(): I32;
 }
@@ -9,6 +8,5 @@ declare module 'extism:host' {
   interface user {
     updateAsset(ptr: PTR): I32;
     addAssetToAlbum(ptr: PTR): I32;
-    getFacesForAsset(ptr: PTR): PTR;
   }
 }

plugins/src/index.ts

@@ -1,4 +1,4 @@
-const { updateAsset, addAssetToAlbum, getFacesForAsset } = Host.getFunctions();
+const { updateAsset, addAssetToAlbum } = Host.getFunctions();
 
 function parseInput() {
   return JSON.parse(Host.inputString());
@@ -9,64 +9,6 @@ function returnOutput(output: any) {
   return 0;
 }
 
-/**
- * Filter by person - checks if the recognized person matches the configured person IDs.
- *
- * For PersonRecognized trigger:
- * - data.personId contains the ID of the person that was just recognized
- * - Checks if personId is in the configured list
- *
- * matchMode options:
- * - 'any': passes if the triggering person is in the list
- * - 'all': passes if all configured persons are present in the asset
- * - 'exact': passes if the asset contains exactly the configured persons
- */
-export function filterPerson() {
-  const input = parseInput();
-  const { authToken, data, config } = input;
-  const { personIds, matchMode = 'any' } = config;
-
-  if (!personIds || personIds.length === 0) {
-    return returnOutput({ passed: true });
-  }
-
-  const triggerPersonId = data.personId;
-
-  if (matchMode === 'any') {
-    const passed = triggerPersonId && personIds.includes(triggerPersonId);
-    return returnOutput({ passed });
-  }
-
-  const payload = Memory.fromJsonObject({
-    authToken,
-    assetId: data.asset.id,
-  });
-
-  const resultPtr = getFacesForAsset(payload.offset);
-  payload.free();
-
-  const faces = JSON.parse(Memory.find(resultPtr).readJsonObject());
-
-  const assetPersonIds: string[] = faces
-    .filter((face: { personId: string | null }) => face.personId !== null)
-    .map((face: { personId: string }) => face.personId);
-
-  let passed = false;
-
-  if (matchMode === 'all') {
-    passed = personIds.every((id: string) => assetPersonIds.includes(id));
-  } else if (matchMode === 'exact') {
-    const uniquePersonIds = new Set(personIds);
-    const uniqueAssetPersonIds = new Set(assetPersonIds);
-
-    passed =
-      uniquePersonIds.size === uniqueAssetPersonIds.size &&
-      personIds.every((id: string) => uniqueAssetPersonIds.has(id));
-  }
-
-  return returnOutput({ passed });
-}
-
 export function filterFileName() {
   const input = parseInput();
   const { data, config } = input;
@@ -102,7 +44,7 @@ export function actionAddToAlbum() {
       authToken,
       assetId: data.asset.id,
       albumId: albumId,
-    }),
+    })
   );
 
   addAssetToAlbum(ptr.offset);
@@ -119,7 +61,7 @@ export function actionArchive() {
       authToken,
       id: data.asset.id,
       visibility: 'archive',
-    }),
+    })
   );
 
   updateAsset(ptr.offset);

readme_i18n/README_de_DE.md

@@ -38,11 +38,6 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Warnung
-
-- ⚠️ Das Projekt befindet sich in **sehr aktiver** Entwicklung.
-- ⚠️ Gehe von möglichen Fehlern und von Änderungen mit Breaking-Changes aus.
-- ⚠️ **Nutze die App auf keinen Fall als einziges Speichermedium für deine Fotos und Videos.**
 - ⚠️ Befolge immer die [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) Backup-Regel für deine wertvollen Fotos und Videos!
 
 > [!NOTE]
@@ -62,7 +57,7 @@
 
 ## Demo
 
-Die Web-Demo kannst Du unter https://demo.immich.app finden. Für die Handy-App kannst Du `https://demo.immich.app` als `Server Endpoint URL` angeben.
+Die Web-Demo kannst Du unter https://demo.immich.app finden. Für die Smartphone-App kannst Du `https://demo.immich.app` als `Server Endpoint URL` angeben.
 
 ### Login Daten
 
@@ -93,7 +88,7 @@ Die Web-Demo kannst Du unter https://demo.immich.app finden. Für die Handy-App
 | LivePhoto/MotionPhoto Sicherung und Wiedergabe       | Ja     | Ja    |
 | Unterstützung für 360-Grad-Bilder     	             | Nein   | Ja    |
 | Benutzerdefinierte Speicherstruktur                  | Ja     | Ja    |
-| Öffentliches Teilen                                  | Nein   | Ja    |
+| Öffentliches Teilen                                  | Ja     | Ja    |
 | Archiv und Favoriten                                 | Ja     | Ja    |
 | Globale Karte                                        | Ja     | Ja    |
 | Partnerfreigabe (Teilen)                             | Ja     | Ja    |
@@ -103,7 +98,7 @@ Die Web-Demo kannst Du unter https://demo.immich.app finden. Für die Handy-App
 | Schreibgeschützte Gallerie                           | Ja     | Ja    |
 | Gestapelte Bilder                                    | Ja     | Ja    |
 | Tags                                                 | Nein   | Ja    |
-| Ordner-Ansicht                                       | Nein   | Ja    |
+| Ordner-Ansicht                                       | Ja     | Ja    |
 
 
 ## Übersetzungen

server/src/controllers/map.controller.ts

@@ -8,7 +8,7 @@ import {
   MapReverseGeocodeDto,
   MapReverseGeocodeResponseDto,
 } from 'src/dtos/map.dto';
-import { ApiTag } from 'src/enum';
+import { ApiTag, Permission } from 'src/enum';
 import { Auth, Authenticated } from 'src/middleware/auth.guard';
 import { MapService } from 'src/services/map.service';
 
@@ -18,7 +18,7 @@ export class MapController {
   constructor(private service: MapService) {}
 
   @Get('markers')
-  @Authenticated()
+  @Authenticated({ permission: Permission.MapRead })
   @Endpoint({
     summary: 'Retrieve map markers',
     description: 'Retrieve a list of latitude and longitude coordinates for every asset with location data.',
@@ -28,8 +28,8 @@ export class MapController {
     return this.service.getMapMarkers(auth, options);
   }
 
-  @Authenticated()
   @Get('reverse-geocode')
+  @Authenticated({ permission: Permission.MapSearch })
   @HttpCode(HttpStatus.OK)
   @Endpoint({
     summary: 'Reverse geocode coordinates',

server/src/cores/storage.core.ts

@@ -1,7 +1,15 @@
 import { randomUUID } from 'node:crypto';
 import { dirname, join, resolve } from 'node:path';
 import { StorageAsset } from 'src/database';
-import { AssetFileType, AssetPathType, ImageFormat, PathType, PersonPathType, StorageFolder } from 'src/enum';
+import {
+  AssetFileType,
+  AssetPathType,
+  ImageFormat,
+  PathType,
+  PersonPathType,
+  RawExtractedFormat,
+  StorageFolder,
+} from 'src/enum';
 import { AssetRepository } from 'src/repositories/asset.repository';
 import { ConfigRepository } from 'src/repositories/config.repository';
 import { CryptoRepository } from 'src/repositories/crypto.repository';
@@ -24,15 +32,6 @@ export interface MoveRequest {
   };
 }
 
-export type GeneratedImageType =
-  | AssetPathType.Preview
-  | AssetPathType.Thumbnail
-  | AssetPathType.FullSize
-  | AssetPathType.EditedPreview
-  | AssetPathType.EditedThumbnail
-  | AssetPathType.EditedFullSize;
-export type GeneratedAssetType = GeneratedImageType | AssetPathType.EncodedVideo;
-
 export type ThumbnailPathEntity = { id: string; ownerId: string };
 
 let instance: StorageCore | null;
@@ -111,8 +110,19 @@ export class StorageCore {
     return StorageCore.getNestedPath(StorageFolder.Thumbnails, person.ownerId, `${person.id}.jpeg`);
   }
 
-  static getImagePath(asset: ThumbnailPathEntity, type: GeneratedImageType, format: 'jpeg' | 'webp') {
-    return StorageCore.getNestedPath(StorageFolder.Thumbnails, asset.ownerId, `${asset.id}-${type}.${format}`);
+  static getImagePath(
+    asset: ThumbnailPathEntity,
+    {
+      fileType,
+      format,
+      isEdited,
+    }: { fileType: AssetFileType; format: ImageFormat | RawExtractedFormat; isEdited: boolean },
+  ) {
+    return StorageCore.getNestedPath(
+      StorageFolder.Thumbnails,
+      asset.ownerId,
+      `${asset.id}_${fileType}${isEdited ? '_edited' : ''}.${format}`,
+    );
   }
 
   static getEncodedVideoPath(asset: ThumbnailPathEntity) {
@@ -137,14 +147,14 @@ export class StorageCore {
     return normalizedPath.startsWith(normalizedAppMediaLocation);
   }
 
-  async moveAssetImage(asset: StorageAsset, pathType: GeneratedImageType, format: ImageFormat) {
+  async moveAssetImage(asset: StorageAsset, fileType: AssetFileType, format: ImageFormat) {
     const { id: entityId, files } = asset;
-    const oldFile = getAssetFile(files, pathType);
+    const oldFile = getAssetFile(files, fileType, { isEdited: false });
     return this.moveFile({
       entityId,
-      pathType,
+      pathType: fileType,
       oldPath: oldFile?.path || null,
-      newPath: StorageCore.getImagePath(asset, pathType, format),
+      newPath: StorageCore.getImagePath(asset, { fileType, format, isEdited: false }),
     });
   }
 
@@ -298,19 +308,19 @@ export class StorageCore {
       case AssetPathType.Original: {
         return this.assetRepository.update({ id, originalPath: newPath });
       }
-      case AssetPathType.FullSize: {
+      case AssetFileType.FullSize: {
         return this.assetRepository.upsertFile({ assetId: id, type: AssetFileType.FullSize, path: newPath });
       }
-      case AssetPathType.Preview: {
+      case AssetFileType.Preview: {
         return this.assetRepository.upsertFile({ assetId: id, type: AssetFileType.Preview, path: newPath });
       }
-      case AssetPathType.Thumbnail: {
+      case AssetFileType.Thumbnail: {
         return this.assetRepository.upsertFile({ assetId: id, type: AssetFileType.Thumbnail, path: newPath });
       }
       case AssetPathType.EncodedVideo: {
         return this.assetRepository.update({ id, encodedVideoPath: newPath });
       }
-      case AssetPathType.Sidecar: {
+      case AssetFileType.Sidecar: {
         return this.assetRepository.upsertFile({ assetId: id, type: AssetFileType.Sidecar, path: newPath });
       }
       case PersonPathType.Face: {

server/src/database.ts

@@ -39,6 +39,7 @@ export type AssetFile = {
   id: string;
   type: AssetFileType;
   path: string;
+  isEdited: boolean;
 };
 
 export type Library = {
@@ -344,7 +345,7 @@ export const columns = {
     'asset.width',
     'asset.height',
   ],
-  assetFiles: ['asset_file.id', 'asset_file.path', 'asset_file.type'],
+  assetFiles: ['asset_file.id', 'asset_file.path', 'asset_file.type', 'asset_file.isEdited'],
   authUser: ['user.id', 'user.name', 'user.email', 'user.isAdmin', 'user.quotaUsageInBytes', 'user.quotaSizeInBytes'],
   authApiKey: ['api_key.id', 'api_key.permissions'],
   authSession: ['session.id', 'session.updatedAt', 'session.pinExpiresAt', 'session.appVersion'],
@@ -457,6 +458,7 @@ export const columns = {
     'asset_exif.projectionType',
     'asset_exif.rating',
     'asset_exif.state',
+    'asset_exif.tags',
     'asset_exif.timeZone',
   ],
   plugin: [
@@ -480,4 +482,5 @@ export const lockableProperties = [
   'longitude',
   'rating',
   'timeZone',
+  'tags',
 ] as const;

server/src/enum.ts

@@ -45,9 +45,6 @@ export enum AssetFileType {
   Preview = 'preview',
   Thumbnail = 'thumbnail',
   Sidecar = 'sidecar',
-  FullSizeEdited = 'fullsize_edited',
-  PreviewEdited = 'preview_edited',
-  ThumbnailEdited = 'thumbnail_edited',
 }
 
 export enum AlbumUserRole {
@@ -163,6 +160,9 @@ export enum Permission {
 
   Maintenance = 'maintenance',
 
+  MapRead = 'map.read',
+  MapSearch = 'map.search',
+
   MemoryCreate = 'memory.create',
   MemoryRead = 'memory.read',
   MemoryUpdate = 'memory.update',
@@ -369,14 +369,7 @@ export enum ManualJobName {
 
 export enum AssetPathType {
   Original = 'original',
-  FullSize = 'fullsize',
-  Preview = 'preview',
-  EditedFullSize = 'edited_fullsize',
-  EditedPreview = 'edited_preview',
-  EditedThumbnail = 'edited_thumbnail',
-  Thumbnail = 'thumbnail',
   EncodedVideo = 'encoded_video',
-  Sidecar = 'sidecar',
 }
 
 export enum PersonPathType {
@@ -387,7 +380,7 @@ export enum UserPathType {
   Profile = 'profile',
 }
 
-export type PathType = AssetPathType | PersonPathType | UserPathType;
+export type PathType = AssetFileType | AssetPathType | PersonPathType | UserPathType;
 
 export enum TranscodePolicy {
   All = 'all',

server/src/queries/asset.job.repository.sql

@@ -29,7 +29,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -37,20 +38,6 @@ select
           and "asset_file"."type" = $1
       ) as agg
   ) as "files",
-  (
-    select
-      coalesce(json_agg(agg), '[]')
-    from
-      (
-        select
-          "tag"."value"
-        from
-          "tag"
-          inner join "tag_asset" on "tag"."id" = "tag_asset"."tagId"
-        where
-          "asset"."id" = "tag_asset"."assetId"
-      ) as agg
-  ) as "tags",
   to_json("asset_exif") as "exifInfo"
 from
   "asset"
@@ -72,7 +59,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -99,7 +87,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -145,7 +134,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -174,7 +164,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -244,7 +235,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -269,7 +261,8 @@ where
 select
   "asset_file"."id",
   "asset_file"."path",
-  "asset_file"."type"
+  "asset_file"."type",
+  "asset_file"."isEdited"
 from
   "asset_file"
 where
@@ -318,7 +311,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -357,7 +351,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -444,7 +439,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -536,7 +532,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where
@@ -575,7 +572,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where

server/src/queries/asset.repository.sql

@@ -286,7 +286,8 @@ select
         select
           "asset_file"."id",
           "asset_file"."path",
-          "asset_file"."type"
+          "asset_file"."type",
+          "asset_file"."isEdited"
         from
           "asset_file"
         where

server/src/queries/person.repository.sql

@@ -122,7 +122,6 @@ select
   "asset_face"."id",
   "asset_face"."personId",
   "asset_face"."sourceType",
-  "asset_face"."assetId",
   (
     select
       to_json(obj)

server/src/queries/stack.repository.sql

@@ -43,6 +43,7 @@ select
               "asset_exif"."projectionType",
               "asset_exif"."rating",
               "asset_exif"."state",
+              "asset_exif"."tags",
               "asset_exif"."timeZone"
             from
               "asset_exif"
@@ -127,6 +128,7 @@ select
               "asset_exif"."projectionType",
               "asset_exif"."rating",
               "asset_exif"."state",
+              "asset_exif"."tags",
               "asset_exif"."timeZone"
             from
               "asset_exif"

server/src/repositories/album.repository.ts

@@ -318,7 +318,6 @@ export class AlbumRepository {
     await db
       .insertInto('album_asset')
       .values(assetIds.map((assetId) => ({ albumId, assetId })))
-      .onConflict((oc) => oc.columns(['albumId', 'assetId']).doNothing())
       .execute();
   }
 
@@ -327,11 +326,7 @@ export class AlbumRepository {
     if (values.length === 0) {
       return;
     }
-    await this.db
-      .insertInto('album_asset')
-      .values(values)
-      .onConflict((oc) => oc.columns(['albumId', 'assetId']).doNothing())
-      .execute();
+    await this.db.insertInto('album_asset').values(values).execute();
   }
 
   /**

server/src/repositories/asset-job.repository.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@nestjs/common';
 import { Kysely } from 'kysely';
-import { jsonArrayFrom } from 'kysely/helpers/postgres';
 import { InjectKysely } from 'nestjs-kysely';
 import { Asset, columns } from 'src/database';
 import { DummyValue, GenerateSql } from 'src/decorators';
@@ -42,15 +41,6 @@ export class AssetJobRepository {
       .where('asset.id', '=', asUuid(id))
       .select(['id', 'originalPath'])
       .select((eb) => withFiles(eb, AssetFileType.Sidecar))
-      .select((eb) =>
-        jsonArrayFrom(
-          eb
-            .selectFrom('tag')
-            .select(['tag.value'])
-            .innerJoin('tag_asset', 'tag.id', 'tag_asset.tagId')
-            .whereRef('asset.id', '=', 'tag_asset.assetId'),
-        ).as('tags'),
-      )
       .$call(withExifInner)
       .limit(1)
       .executeTakeFirst();

server/src/repositories/asset.repository.ts

@@ -178,6 +178,7 @@ export class AssetRepository {
                 bitsPerSample: ref('bitsPerSample'),
                 rating: ref('rating'),
                 fps: ref('fps'),
+                tags: ref('tags'),
                 lockedProperties:
                   lockedPropertiesBehavior === 'append'
                     ? distinctLocked(eb, exif.lockedProperties ?? null)
@@ -903,20 +904,22 @@ export class AssetRepository {
       .execute();
   }
 
-  async upsertFile(file: Pick<Insertable<AssetFileTable>, 'assetId' | 'path' | 'type'>): Promise<void> {
+  async upsertFile(file: Pick<Insertable<AssetFileTable>, 'assetId' | 'path' | 'type' | 'isEdited'>): Promise<void> {
     const value = { ...file, assetId: asUuid(file.assetId) };
     await this.db
       .insertInto('asset_file')
       .values(value)
       .onConflict((oc) =>
-        oc.columns(['assetId', 'type']).doUpdateSet((eb) => ({
+        oc.columns(['assetId', 'type', 'isEdited']).doUpdateSet((eb) => ({
           path: eb.ref('excluded.path'),
         })),
       )
       .execute();
   }
 
-  async upsertFiles(files: Pick<Insertable<AssetFileTable>, 'assetId' | 'path' | 'type'>[]): Promise<void> {
+  async upsertFiles(
+    files: Pick<Insertable<AssetFileTable>, 'assetId' | 'path' | 'type' | 'isEdited'>[],
+  ): Promise<void> {
     if (files.length === 0) {
       return;
     }
@@ -926,7 +929,7 @@ export class AssetRepository {
       .insertInto('asset_file')
       .values(values)
       .onConflict((oc) =>
-        oc.columns(['assetId', 'type']).doUpdateSet((eb) => ({
+        oc.columns(['assetId', 'type', 'isEdited']).doUpdateSet((eb) => ({
           path: eb.ref('excluded.path'),
         })),
       )

server/src/repositories/event.repository.ts

@@ -44,7 +44,6 @@ type EventMap = {
 
   // asset events
   AssetCreate: [{ asset: Asset }];
-  PersonRecognized: [{ assetId: string; ownerId: string; personId: string }];
   AssetTag: [{ assetId: string }];
   AssetUntag: [{ assetId: string }];
   AssetHide: [{ assetId: string; userId: string }];

server/src/repositories/person.repository.ts

@@ -248,7 +248,7 @@ export class PersonRepository {
   getFaceForFacialRecognitionJob(id: string) {
     return this.db
       .selectFrom('asset_face')
-      .select(['asset_face.id', 'asset_face.personId', 'asset_face.sourceType', 'asset_face.assetId'])
+      .select(['asset_face.id', 'asset_face.personId', 'asset_face.sourceType'])
       .select((eb) =>
         jsonObjectFrom(
           eb

server/src/schema/migrations/1768828334807-AddIsEditedToAssetFile.ts

@@ -0,0 +1,13 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "asset_file" DROP CONSTRAINT "asset_file_assetId_type_uq";`.execute(db);
+  await sql`ALTER TABLE "asset_file" ADD "isEdited" boolean NOT NULL DEFAULT false;`.execute(db);
+  await sql`ALTER TABLE "asset_file" ADD CONSTRAINT "asset_file_assetId_type_isEdited_uq" UNIQUE ("assetId", "type", "isEdited");`.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "asset_file" DROP CONSTRAINT "asset_file_assetId_type_isEdited_uq";`.execute(db);
+  await sql`ALTER TABLE "asset_file" ADD CONSTRAINT "asset_file_assetId_type_uq" UNIQUE ("assetId", "type");`.execute(db);
+  await sql`ALTER TABLE "asset_file" DROP COLUMN "isEdited";`.execute(db);
+}

server/src/schema/migrations/1768847456553-AddTagsToExif.ts

@@ -0,0 +1,9 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "asset_exif" ADD "tags" character varying[];`.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "asset_exif" DROP COLUMN "tags";`.execute(db);
+}

server/src/schema/tables/asset-exif.table.ts

@@ -93,6 +93,9 @@ export class AssetExifTable {
   @Column({ type: 'integer', nullable: true })
   rating!: number | null;
 
+  @Column({ type: 'character varying', array: true, nullable: true })
+  tags!: string[] | null;
+
   @UpdateDateColumn({ default: () => 'clock_timestamp()' })
   updatedAt!: Generated<Date>;
 

server/src/schema/tables/asset-file.table.ts

@@ -14,7 +14,7 @@ import {
 } from 'src/sql-tools';
 
 @Table('asset_file')
-@Unique({ columns: ['assetId', 'type'] })
+@Unique({ columns: ['assetId', 'type', 'isEdited'] })
 @UpdatedAtTrigger('asset_file_updatedAt')
 export class AssetFileTable {
   @PrimaryGeneratedColumn()
@@ -37,4 +37,7 @@ export class AssetFileTable {
 
   @UpdateIdColumn({ index: true })
   updateId!: Generated<string>;
+
+  @Column({ type: 'boolean', default: false })
+  isEdited!: Generated<boolean>;
 }

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

@@ -529,9 +529,10 @@ describe(AssetMediaService.name, () => {
           ...assetStub.withCropEdit.files,
           {
             id: 'edited-file',
-            type: AssetFileType.FullSizeEdited,
+            type: AssetFileType.FullSize,
             path: '/uploads/user-id/fullsize/edited.jpg',
-          } as AssetFile,
+            isEdited: true,
+          },
         ],
       };
       mocks.access.asset.checkOwnerAccess.mockResolvedValue(new Set(['asset-1']));
@@ -554,9 +555,10 @@ describe(AssetMediaService.name, () => {
           ...assetStub.withCropEdit.files,
           {
             id: 'edited-file',
-            type: AssetFileType.FullSizeEdited,
+            type: AssetFileType.FullSize,
             path: '/uploads/user-id/fullsize/edited.jpg',
-          } as AssetFile,
+            isEdited: true,
+          },
         ],
       };
       mocks.access.asset.checkOwnerAccess.mockResolvedValue(new Set(['asset-1']));
@@ -579,9 +581,10 @@ describe(AssetMediaService.name, () => {
           ...assetStub.withCropEdit.files,
           {
             id: 'edited-file',
-            type: AssetFileType.FullSizeEdited,
+            type: AssetFileType.FullSize,
             path: '/uploads/user-id/fullsize/edited.jpg',
-          } as AssetFile,
+            isEdited: true,
+          },
         ],
       };
       mocks.access.asset.checkOwnerAccess.mockResolvedValue(new Set(['asset-1']));
@@ -656,6 +659,7 @@ describe(AssetMediaService.name, () => {
             id: '42',
             path: '/path/to/preview',
             type: AssetFileType.Thumbnail,
+            isEdited: false,
           },
         ],
       });
@@ -673,6 +677,7 @@ describe(AssetMediaService.name, () => {
             id: '42',
             path: '/path/to/preview.jpg',
             type: AssetFileType.Preview,
+            isEdited: false,
           },
         ],
       });

server/src/services/asset.service.ts

@@ -4,7 +4,7 @@ import { DateTime, Duration } from 'luxon';
 import { JOBS_ASSET_PAGINATION_SIZE } from 'src/constants';
 import { AssetFile } from 'src/database';
 import { OnJob } from 'src/decorators';
-import { AssetResponseDto, MapAsset, SanitizedAssetResponseDto, mapAsset } from 'src/dtos/asset-response.dto';
+import { AssetResponseDto, SanitizedAssetResponseDto, mapAsset } from 'src/dtos/asset-response.dto';
 import {
   AssetBulkDeleteDto,
   AssetBulkUpdateDto,
@@ -112,7 +112,7 @@ export class AssetService extends BaseService {
     const { description, dateTimeOriginal, latitude, longitude, rating, ...rest } = dto;
     const repos = { asset: this.assetRepository, event: this.eventRepository };
 
-    let previousMotion: MapAsset | null = null;
+    let previousMotion: { id: string } | null = null;
     if (rest.livePhotoVideoId) {
       await onBeforeLink(repos, { userId: auth.user.id, livePhotoVideoId: rest.livePhotoVideoId });
     } else if (rest.livePhotoVideoId === null) {

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

@@ -241,21 +241,21 @@ describe(MediaService.name, () => {
       await expect(sut.handleAssetMigration({ id: assetStub.image.id })).resolves.toBe(JobStatus.Success);
       expect(mocks.move.create).toHaveBeenCalledWith({
         entityId: assetStub.image.id,
-        pathType: AssetPathType.FullSize,
+        pathType: AssetFileType.FullSize,
         oldPath: '/uploads/user-id/fullsize/path.webp',
-        newPath: expect.stringContaining('/data/thumbs/user-id/as/se/asset-id-fullsize.jpeg'),
+        newPath: expect.stringContaining('/data/thumbs/user-id/as/se/asset-id_fullsize.jpeg'),
       });
       expect(mocks.move.create).toHaveBeenCalledWith({
         entityId: assetStub.image.id,
-        pathType: AssetPathType.Preview,
+        pathType: AssetFileType.Preview,
         oldPath: '/uploads/user-id/thumbs/path.jpg',
-        newPath: expect.stringContaining('/data/thumbs/user-id/as/se/asset-id-preview.jpeg'),
+        newPath: expect.stringContaining('/data/thumbs/user-id/as/se/asset-id_preview.jpeg'),
       });
       expect(mocks.move.create).toHaveBeenCalledWith({
         entityId: assetStub.image.id,
-        pathType: AssetPathType.Thumbnail,
+        pathType: AssetFileType.Thumbnail,
         oldPath: '/uploads/user-id/webp/path.ext',
-        newPath: expect.stringContaining('/data/thumbs/user-id/as/se/asset-id-thumbnail.webp'),
+        newPath: expect.stringContaining('/data/thumbs/user-id/as/se/asset-id_thumbnail.webp'),
       });
       expect(mocks.move.create).toHaveBeenCalledTimes(3);
     });
@@ -385,11 +385,13 @@ describe(MediaService.name, () => {
           assetId: 'asset-id',
           type: AssetFileType.Preview,
           path: expect.any(String),
+          isEdited: false,
         },
         {
           assetId: 'asset-id',
           type: AssetFileType.Thumbnail,
           path: expect.any(String),
+          isEdited: false,
         },
       ]);
       expect(mocks.asset.update).toHaveBeenCalledWith({ id: 'asset-id', thumbhash: thumbhashBuffer });
@@ -421,11 +423,13 @@ describe(MediaService.name, () => {
           assetId: 'asset-id',
           type: AssetFileType.Preview,
           path: expect.any(String),
+          isEdited: false,
         },
         {
           assetId: 'asset-id',
           type: AssetFileType.Thumbnail,
           path: expect.any(String),
+          isEdited: false,
         },
       ]);
     });
@@ -456,11 +460,13 @@ describe(MediaService.name, () => {
           assetId: 'asset-id',
           type: AssetFileType.Preview,
           path: expect.any(String),
+          isEdited: false,
         },
         {
           assetId: 'asset-id',
           type: AssetFileType.Thumbnail,
           path: expect.any(String),
+          isEdited: false,
         },
       ]);
     });
@@ -548,8 +554,8 @@ describe(MediaService.name, () => {
       mocks.assetJob.getForGenerateThumbnailJob.mockResolvedValue(assetStub.image);
       const thumbhashBuffer = Buffer.from('a thumbhash', 'utf8');
       mocks.media.generateThumbhash.mockResolvedValue(thumbhashBuffer);
-      const previewPath = `/data/thumbs/user-id/as/se/asset-id-preview.${format}`;
-      const thumbnailPath = `/data/thumbs/user-id/as/se/asset-id-thumbnail.webp`;
+      const previewPath = `/data/thumbs/user-id/as/se/asset-id_preview.${format}`;
+      const thumbnailPath = `/data/thumbs/user-id/as/se/asset-id_thumbnail.webp`;
 
       await sut.handleGenerateThumbnails({ id: assetStub.image.id });
 
@@ -595,8 +601,8 @@ describe(MediaService.name, () => {
       mocks.assetJob.getForGenerateThumbnailJob.mockResolvedValue(assetStub.image);
       const thumbhashBuffer = Buffer.from('a thumbhash', 'utf8');
       mocks.media.generateThumbhash.mockResolvedValue(thumbhashBuffer);
-      const previewPath = expect.stringContaining(`/data/thumbs/user-id/as/se/asset-id-preview.jpeg`);
-      const thumbnailPath = expect.stringContaining(`/data/thumbs/user-id/as/se/asset-id-thumbnail.${format}`);
+      const previewPath = expect.stringContaining(`/data/thumbs/user-id/as/se/asset-id_preview.jpeg`);
+      const thumbnailPath = expect.stringContaining(`/data/thumbs/user-id/as/se/asset-id_thumbnail.${format}`);
 
       await sut.handleGenerateThumbnails({ id: assetStub.image.id });
 
@@ -1026,9 +1032,9 @@ describe(MediaService.name, () => {
 
       expect(mocks.asset.upsertFiles).toHaveBeenCalledWith(
         expect.arrayContaining([
-          expect.objectContaining({ type: AssetFileType.FullSizeEdited }),
-          expect.objectContaining({ type: AssetFileType.PreviewEdited }),
-          expect.objectContaining({ type: AssetFileType.ThumbnailEdited }),
+          expect.objectContaining({ type: AssetFileType.FullSize, isEdited: true }),
+          expect.objectContaining({ type: AssetFileType.Preview, isEdited: true }),
+          expect.objectContaining({ type: AssetFileType.Thumbnail, isEdited: true }),
         ]),
       );
     });
@@ -1098,17 +1104,17 @@ describe(MediaService.name, () => {
       expect(mocks.media.generateThumbnail).toHaveBeenCalledWith(
         rawBuffer,
         expect.anything(),
-        expect.stringContaining('edited_preview.jpeg'),
+        expect.stringContaining('preview_edited.jpeg'),
       );
       expect(mocks.media.generateThumbnail).toHaveBeenCalledWith(
         rawBuffer,
         expect.anything(),
-        expect.stringContaining('edited_thumbnail.webp'),
+        expect.stringContaining('thumbnail_edited.webp'),
       );
       expect(mocks.media.generateThumbnail).toHaveBeenCalledWith(
         rawBuffer,
         expect.anything(),
-        expect.stringContaining('edited_fullsize.jpeg'),
+        expect.stringContaining('fullsize_edited.jpeg'),
       );
     });
 
@@ -3254,13 +3260,13 @@ describe(MediaService.name, () => {
       };
 
       await sut['syncFiles'](asset, [
-        { type: AssetFileType.Preview, newPath: '/new/preview.jpg' },
-        { type: AssetFileType.Thumbnail, newPath: '/new/thumbnail.jpg' },
+        { type: AssetFileType.Preview, newPath: '/new/preview.jpg', isEdited: false },
+        { type: AssetFileType.Thumbnail, newPath: '/new/thumbnail.jpg', isEdited: false },
       ]);
 
       expect(mocks.asset.upsertFiles).toHaveBeenCalledWith([
-        { assetId: 'asset-id', path: '/new/preview.jpg', type: AssetFileType.Preview },
-        { assetId: 'asset-id', path: '/new/thumbnail.jpg', type: AssetFileType.Thumbnail },
+        { assetId: 'asset-id', path: '/new/preview.jpg', type: AssetFileType.Preview, isEdited: false },
+        { assetId: 'asset-id', path: '/new/thumbnail.jpg', type: AssetFileType.Thumbnail, isEdited: false },
       ]);
       expect(mocks.asset.deleteFiles).not.toHaveBeenCalled();
       expect(mocks.job.queue).not.toHaveBeenCalled();
@@ -3270,19 +3276,31 @@ describe(MediaService.name, () => {
       const asset = {
         id: 'asset-id',
         files: [
-          { id: 'file-1', assetId: 'asset-id', type: AssetFileType.Preview, path: '/old/preview.jpg' },
-          { id: 'file-2', assetId: 'asset-id', type: AssetFileType.Thumbnail, path: '/old/thumbnail.jpg' },
+          {
+            id: 'file-1',
+            assetId: 'asset-id',
+            type: AssetFileType.Preview,
+            path: '/old/preview.jpg',
+            isEdited: false,
+          },
+          {
+            id: 'file-2',
+            assetId: 'asset-id',
+            type: AssetFileType.Thumbnail,
+            path: '/old/thumbnail.jpg',
+            isEdited: false,
+          },
         ],
       };
 
       await sut['syncFiles'](asset, [
-        { type: AssetFileType.Preview, newPath: '/new/preview.jpg' },
-        { type: AssetFileType.Thumbnail, newPath: '/new/thumbnail.jpg' },
+        { type: AssetFileType.Preview, newPath: '/new/preview.jpg', isEdited: false },
+        { type: AssetFileType.Thumbnail, newPath: '/new/thumbnail.jpg', isEdited: false },
       ]);
 
       expect(mocks.asset.upsertFiles).toHaveBeenCalledWith([
-        { assetId: 'asset-id', path: '/new/preview.jpg', type: AssetFileType.Preview },
-        { assetId: 'asset-id', path: '/new/thumbnail.jpg', type: AssetFileType.Thumbnail },
+        { assetId: 'asset-id', path: '/new/preview.jpg', type: AssetFileType.Preview, isEdited: false },
+        { assetId: 'asset-id', path: '/new/thumbnail.jpg', type: AssetFileType.Thumbnail, isEdited: false },
       ]);
       expect(mocks.asset.deleteFiles).not.toHaveBeenCalled();
       expect(mocks.job.queue).toHaveBeenCalledWith({
@@ -3295,17 +3313,38 @@ describe(MediaService.name, () => {
       const asset = {
         id: 'asset-id',
         files: [
-          { id: 'file-1', assetId: 'asset-id', type: AssetFileType.Preview, path: '/old/preview.jpg' },
-          { id: 'file-2', assetId: 'asset-id', type: AssetFileType.Thumbnail, path: '/old/thumbnail.jpg' },
+          {
+            id: 'file-1',
+            assetId: 'asset-id',
+            type: AssetFileType.Preview,
+            path: '/old/preview.jpg',
+            isEdited: false,
+          },
+          {
+            id: 'file-2',
+            assetId: 'asset-id',
+            type: AssetFileType.Thumbnail,
+            path: '/old/thumbnail.jpg',
+            isEdited: false,
+          },
         ],
       };
 
-      await sut['syncFiles'](asset, [{ type: AssetFileType.Preview }, { type: AssetFileType.Thumbnail }]);
+      await sut['syncFiles'](asset, [
+        { type: AssetFileType.Preview, isEdited: false },
+        { type: AssetFileType.Thumbnail, isEdited: false },
+      ]);
 
       expect(mocks.asset.upsertFiles).not.toHaveBeenCalled();
       expect(mocks.asset.deleteFiles).toHaveBeenCalledWith([
-        { id: 'file-1', assetId: 'asset-id', type: AssetFileType.Preview, path: '/old/preview.jpg' },
-        { id: 'file-2', assetId: 'asset-id', type: AssetFileType.Thumbnail, path: '/old/thumbnail.jpg' },
+        { id: 'file-1', assetId: 'asset-id', type: AssetFileType.Preview, path: '/old/preview.jpg', isEdited: false },
+        {
+          id: 'file-2',
+          assetId: 'asset-id',
+          type: AssetFileType.Thumbnail,
+          path: '/old/thumbnail.jpg',
+          isEdited: false,
+        },
       ]);
       expect(mocks.job.queue).toHaveBeenCalledWith({
         name: JobName.FileDelete,
@@ -3317,14 +3356,26 @@ describe(MediaService.name, () => {
       const asset = {
         id: 'asset-id',
         files: [
-          { id: 'file-1', assetId: 'asset-id', type: AssetFileType.Preview, path: '/same/preview.jpg' },
-          { id: 'file-2', assetId: 'asset-id', type: AssetFileType.Thumbnail, path: '/same/thumbnail.jpg' },
+          {
+            id: 'file-1',
+            assetId: 'asset-id',
+            type: AssetFileType.Preview,
+            path: '/same/preview.jpg',
+            isEdited: false,
+          },
+          {
+            id: 'file-2',
+            assetId: 'asset-id',
+            type: AssetFileType.Thumbnail,
+            path: '/same/thumbnail.jpg',
+            isEdited: false,
+          },
         ],
       };
 
       await sut['syncFiles'](asset, [
-        { type: AssetFileType.Preview, newPath: '/same/preview.jpg' },
-        { type: AssetFileType.Thumbnail, newPath: '/same/thumbnail.jpg' },
+        { type: AssetFileType.Preview, newPath: '/same/preview.jpg', isEdited: false },
+        { type: AssetFileType.Thumbnail, newPath: '/same/thumbnail.jpg', isEdited: false },
       ]);
 
       expect(mocks.asset.upsertFiles).not.toHaveBeenCalled();
@@ -3336,23 +3387,41 @@ describe(MediaService.name, () => {
       const asset = {
         id: 'asset-id',
         files: [
-          { id: 'file-1', assetId: 'asset-id', type: AssetFileType.Preview, path: '/old/preview.jpg' },
-          { id: 'file-2', assetId: 'asset-id', type: AssetFileType.Thumbnail, path: '/old/thumbnail.jpg' },
+          {
+            id: 'file-1',
+            assetId: 'asset-id',
+            type: AssetFileType.Preview,
+            path: '/old/preview.jpg',
+            isEdited: false,
+          },
+          {
+            id: 'file-2',
+            assetId: 'asset-id',
+            type: AssetFileType.Thumbnail,
+            path: '/old/thumbnail.jpg',
+            isEdited: false,
+          },
         ],
       };
 
       await sut['syncFiles'](asset, [
-        { type: AssetFileType.Preview, newPath: '/new/preview.jpg' }, // replace
-        { type: AssetFileType.Thumbnail }, // delete
-        { type: AssetFileType.FullSize, newPath: '/new/fullsize.jpg' }, // new
+        { type: AssetFileType.Preview, newPath: '/new/preview.jpg', isEdited: false }, // replace
+        { type: AssetFileType.Thumbnail, isEdited: false }, // delete
+        { type: AssetFileType.FullSize, newPath: '/new/fullsize.jpg', isEdited: false }, // new
       ]);
 
       expect(mocks.asset.upsertFiles).toHaveBeenCalledWith([
-        { assetId: 'asset-id', path: '/new/preview.jpg', type: AssetFileType.Preview },
-        { assetId: 'asset-id', path: '/new/fullsize.jpg', type: AssetFileType.FullSize },
+        { assetId: 'asset-id', path: '/new/preview.jpg', type: AssetFileType.Preview, isEdited: false },
+        { assetId: 'asset-id', path: '/new/fullsize.jpg', type: AssetFileType.FullSize, isEdited: false },
       ]);
       expect(mocks.asset.deleteFiles).toHaveBeenCalledWith([
-        { id: 'file-2', assetId: 'asset-id', type: AssetFileType.Thumbnail, path: '/old/thumbnail.jpg' },
+        {
+          id: 'file-2',
+          assetId: 'asset-id',
+          type: AssetFileType.Thumbnail,
+          path: '/old/thumbnail.jpg',
+          isEdited: false,
+        },
       ]);
       expect(mocks.job.queue).toHaveBeenCalledWith({
         name: JobName.FileDelete,
@@ -3376,11 +3445,19 @@ describe(MediaService.name, () => {
     it('should delete non-existent file types when newPath is not provided', async () => {
       const asset = {
         id: 'asset-id',
-        files: [{ id: 'file-1', assetId: 'asset-id', type: AssetFileType.Preview, path: '/old/preview.jpg' }],
+        files: [
+          {
+            id: 'file-1',
+            assetId: 'asset-id',
+            type: AssetFileType.Preview,
+            path: '/old/preview.jpg',
+            isEdited: false,
+          },
+        ],
       };
 
       await sut['syncFiles'](asset, [
-        { type: AssetFileType.Thumbnail }, // file doesn't exist, newPath not provided
+        { type: AssetFileType.Thumbnail, isEdited: false }, // file doesn't exist, newPath not provided
       ]);
 
       expect(mocks.asset.upsertFiles).not.toHaveBeenCalled();

server/src/services/media.service.ts

@@ -8,7 +8,6 @@ import { AssetEditAction, CropParameters } from 'src/dtos/editing.dto';
 import { SystemConfigFFmpegDto } from 'src/dtos/system-config.dto';
 import {
   AssetFileType,
-  AssetPathType,
   AssetType,
   AssetVisibility,
   AudioCodec,
@@ -50,6 +49,7 @@ interface UpsertFileOptions {
   assetId: string;
   type: AssetFileType;
   path: string;
+  isEdited: boolean;
 }
 
 type ThumbnailAsset = NonNullable<Awaited<ReturnType<AssetJobRepository['getForGenerateThumbnailJob']>>>;
@@ -160,9 +160,9 @@ export class MediaService extends BaseService {
       return JobStatus.Failed;
     }
 
-    await this.storageCore.moveAssetImage(asset, AssetPathType.FullSize, image.fullsize.format);
-    await this.storageCore.moveAssetImage(asset, AssetPathType.Preview, image.preview.format);
-    await this.storageCore.moveAssetImage(asset, AssetPathType.Thumbnail, image.thumbnail.format);
+    await this.storageCore.moveAssetImage(asset, AssetFileType.FullSize, image.fullsize.format);
+    await this.storageCore.moveAssetImage(asset, AssetFileType.Preview, image.preview.format);
+    await this.storageCore.moveAssetImage(asset, AssetFileType.Thumbnail, image.thumbnail.format);
     await this.storageCore.moveAssetVideo(asset);
 
     return JobStatus.Success;
@@ -236,9 +236,9 @@ export class MediaService extends BaseService {
     }
 
     await this.syncFiles(asset, [
-      { type: AssetFileType.Preview, newPath: generated.previewPath },
-      { type: AssetFileType.Thumbnail, newPath: generated.thumbnailPath },
-      { type: AssetFileType.FullSize, newPath: generated.fullsizePath },
+      { type: AssetFileType.Preview, newPath: generated.previewPath, isEdited: false },
+      { type: AssetFileType.Thumbnail, newPath: generated.thumbnailPath, isEdited: false },
+      { type: AssetFileType.FullSize, newPath: generated.fullsizePath, isEdited: false },
     ]);
 
     const editiedGenerated = await this.generateEditedThumbnails(asset);
@@ -307,16 +307,16 @@ export class MediaService extends BaseService {
 
   private async generateImageThumbnails(asset: ThumbnailAsset, useEdits: boolean = false) {
     const { image } = await this.getConfig({ withCache: true });
-    const previewPath = StorageCore.getImagePath(
-      asset,
-      useEdits ? AssetPathType.EditedPreview : AssetPathType.Preview,
-      image.preview.format,
-    );
-    const thumbnailPath = StorageCore.getImagePath(
-      asset,
-      useEdits ? AssetPathType.EditedThumbnail : AssetPathType.Thumbnail,
-      image.thumbnail.format,
-    );
+    const previewPath = StorageCore.getImagePath(asset, {
+      fileType: AssetFileType.Preview,
+      isEdited: useEdits,
+      format: image.preview.format,
+    });
+    const thumbnailPath = StorageCore.getImagePath(asset, {
+      fileType: AssetFileType.Thumbnail,
+      isEdited: useEdits,
+      format: image.thumbnail.format,
+    });
     this.storageCore.ensureFolders(previewPath);
 
     // Handle embedded preview extraction for RAW files
@@ -343,11 +343,11 @@ export class MediaService extends BaseService {
 
     if (convertFullsize) {
       // convert a new fullsize image from the same source as the thumbnail
-      fullsizePath = StorageCore.getImagePath(
-        asset,
-        useEdits ? AssetPathType.EditedFullSize : AssetPathType.FullSize,
-        image.fullsize.format,
-      );
+      fullsizePath = StorageCore.getImagePath(asset, {
+        fileType: AssetFileType.FullSize,
+        isEdited: useEdits,
+        format: image.fullsize.format,
+      });
       const fullsizeOptions = {
         format: image.fullsize.format,
         quality: image.fullsize.quality,
@@ -355,7 +355,11 @@ export class MediaService extends BaseService {
       };
       promises.push(this.mediaRepository.generateThumbnail(data, fullsizeOptions, fullsizePath));
     } else if (generateFullsize && extracted && extracted.format === RawExtractedFormat.Jpeg) {
-      fullsizePath = StorageCore.getImagePath(asset, AssetPathType.FullSize, extracted.format);
+      fullsizePath = StorageCore.getImagePath(asset, {
+        fileType: AssetFileType.FullSize,
+        format: extracted.format,
+        isEdited: false,
+      });
       this.storageCore.ensureFolders(fullsizePath);
 
       // Write the buffer to disk with essential EXIF data
@@ -489,8 +493,16 @@ export class MediaService extends BaseService {
 
   private async generateVideoThumbnails(asset: ThumbnailPathEntity & { originalPath: string }) {
     const { image, ffmpeg } = await this.getConfig({ withCache: true });
-    const previewPath = StorageCore.getImagePath(asset, AssetPathType.Preview, image.preview.format);
-    const thumbnailPath = StorageCore.getImagePath(asset, AssetPathType.Thumbnail, image.thumbnail.format);
+    const previewPath = StorageCore.getImagePath(asset, {
+      fileType: AssetFileType.Preview,
+      format: image.preview.format,
+      isEdited: false,
+    });
+    const thumbnailPath = StorageCore.getImagePath(asset, {
+      fileType: AssetFileType.Thumbnail,
+      format: image.thumbnail.format,
+      isEdited: false,
+    });
     this.storageCore.ensureFolders(previewPath);
 
     const { format, audioStreams, videoStreams } = await this.mediaRepository.probe(asset.originalPath);
@@ -779,18 +791,18 @@ export class MediaService extends BaseService {
 
   private async syncFiles(
     asset: { id: string; files: AssetFile[] },
-    files: { type: AssetFileType; newPath?: string }[],
+    files: { type: AssetFileType; newPath?: string; isEdited: boolean }[],
   ) {
     const toUpsert: UpsertFileOptions[] = [];
     const pathsToDelete: string[] = [];
     const toDelete: AssetFile[] = [];
 
-    for (const { type, newPath } of files) {
-      const existingFile = asset.files.find((file) => file.type === type);
+    for (const { type, newPath, isEdited } of files) {
+      const existingFile = asset.files.find((file) => file.type === type && file.isEdited === isEdited);
 
       // upsert new file path
       if (newPath && existingFile?.path !== newPath) {
-        toUpsert.push({ assetId: asset.id, path: newPath, type });
+        toUpsert.push({ assetId: asset.id, path: newPath, type, isEdited });
 
         // delete old file from disk
         if (existingFile) {
@@ -829,9 +841,9 @@ export class MediaService extends BaseService {
     const generated = asset.edits.length > 0 ? await this.generateImageThumbnails(asset, true) : undefined;
 
     await this.syncFiles(asset, [
-      { type: AssetFileType.PreviewEdited, newPath: generated?.previewPath },
-      { type: AssetFileType.ThumbnailEdited, newPath: generated?.thumbnailPath },
-      { type: AssetFileType.FullSizeEdited, newPath: generated?.fullsizePath },
+      { type: AssetFileType.Preview, newPath: generated?.previewPath, isEdited: true },
+      { type: AssetFileType.Thumbnail, newPath: generated?.thumbnailPath, isEdited: true },
+      { type: AssetFileType.FullSize, newPath: generated?.fullsizePath, isEdited: true },
     ]);
 
     const crop = asset.edits.find((e) => e.action === AssetEditAction.Crop);

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

@@ -35,7 +35,7 @@ const forSidecarJob = (
   asset: {
     id?: string;
     originalPath?: string;
-    files?: { id: string; type: AssetFileType; path: string }[];
+    files?: { id: string; type: AssetFileType; path: string; isEdited: boolean }[];
   } = {},
 ) => {
   return {
@@ -387,6 +387,7 @@ describe(MetadataService.name, () => {
 
     it('should extract tags from TagsList', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent'] } } as any);
       mockReadTags({ TagsList: ['Parent'] });
       mocks.tag.upsertValue.mockResolvedValue(tagStub.parentUpsert);
 
@@ -397,6 +398,7 @@ describe(MetadataService.name, () => {
 
     it('should extract hierarchy from TagsList', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent/Child'] } } as any);
       mockReadTags({ TagsList: ['Parent/Child'] });
       mocks.tag.upsertValue.mockResolvedValueOnce(tagStub.parentUpsert);
       mocks.tag.upsertValue.mockResolvedValueOnce(tagStub.childUpsert);
@@ -417,6 +419,7 @@ describe(MetadataService.name, () => {
 
     it('should extract tags from Keywords as a string', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent'] } } as any);
       mockReadTags({ Keywords: 'Parent' });
       mocks.tag.upsertValue.mockResolvedValue(tagStub.parentUpsert);
 
@@ -427,6 +430,7 @@ describe(MetadataService.name, () => {
 
     it('should extract tags from Keywords as a list', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent'] } } as any);
       mockReadTags({ Keywords: ['Parent'] });
       mocks.tag.upsertValue.mockResolvedValue(tagStub.parentUpsert);
 
@@ -437,6 +441,7 @@ describe(MetadataService.name, () => {
 
     it('should extract tags from Keywords as a list with a number', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent', '2024'] } } as any);
       mockReadTags({ Keywords: ['Parent', 2024] });
       mocks.tag.upsertValue.mockResolvedValue(tagStub.parentUpsert);
 
@@ -448,6 +453,7 @@ describe(MetadataService.name, () => {
 
     it('should extract hierarchal tags from Keywords', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent/Child'] } } as any);
       mockReadTags({ Keywords: 'Parent/Child' });
       mocks.tag.upsertValue.mockResolvedValue(tagStub.parentUpsert);
 
@@ -467,6 +473,7 @@ describe(MetadataService.name, () => {
 
     it('should ignore Keywords when TagsList is present', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent/Child', 'Child'] } } as any);
       mockReadTags({ Keywords: 'Child', TagsList: ['Parent/Child'] });
       mocks.tag.upsertValue.mockResolvedValue(tagStub.parentUpsert);
 
@@ -486,6 +493,7 @@ describe(MetadataService.name, () => {
 
     it('should extract hierarchy from HierarchicalSubject', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent/Child', 'TagA'] } } as any);
       mockReadTags({ HierarchicalSubject: ['Parent|Child', 'TagA'] });
       mocks.tag.upsertValue.mockResolvedValueOnce(tagStub.parentUpsert);
       mocks.tag.upsertValue.mockResolvedValueOnce(tagStub.childUpsert);
@@ -507,6 +515,7 @@ describe(MetadataService.name, () => {
 
     it('should extract tags from HierarchicalSubject as a list with a number', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(removeNonSidecarFiles(assetStub.image));
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent', '2024'] } } as any);
       mockReadTags({ HierarchicalSubject: ['Parent', 2024] });
       mocks.tag.upsertValue.mockResolvedValue(tagStub.parentUpsert);
 
@@ -518,6 +527,7 @@ describe(MetadataService.name, () => {
 
     it('should extract ignore / characters in a HierarchicalSubject tag', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(assetStub.image);
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Mom|Dad'] } } as any);
       mockReadTags({ HierarchicalSubject: ['Mom/Dad'] });
       mocks.tag.upsertValue.mockResolvedValueOnce(tagStub.parentUpsert);
 
@@ -532,6 +542,7 @@ describe(MetadataService.name, () => {
 
     it('should ignore HierarchicalSubject when TagsList is present', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(assetStub.image);
+      mocks.asset.getById.mockResolvedValue({ exifInfo: { tags: ['Parent/Child', 'Parent2/Child2'] } } as any);
       mockReadTags({ HierarchicalSubject: ['Parent2|Child2'], TagsList: ['Parent/Child'] });
       mocks.tag.upsertValue.mockResolvedValue(tagStub.parentUpsert);
 
@@ -896,6 +907,7 @@ describe(MetadataService.name, () => {
         ProfileDescription: 'extensive description',
         ProjectionType: 'equirectangular',
         tz: 'UTC-11:30',
+        TagsList: ['parent/child'],
         Rating: 3,
       };
 
@@ -935,6 +947,7 @@ describe(MetadataService.name, () => {
           country: null,
           state: null,
           city: null,
+          tags: ['parent/child'],
         },
         { lockedPropertiesBehavior: 'skip' },
       );
@@ -1084,6 +1097,7 @@ describe(MetadataService.name, () => {
             id: 'some-id',
             type: AssetFileType.Sidecar,
             path: '/path/to/something',
+            isEdited: false,
           },
         ],
       });
@@ -1691,7 +1705,7 @@ describe(MetadataService.name, () => {
     it('should unset sidecar path if file no longer exist', async () => {
       const asset = forSidecarJob({
         originalPath: '/path/to/IMG_123.jpg',
-        files: [{ id: 'sidecar', path: '/path/to/IMG_123.jpg.xmp', type: AssetFileType.Sidecar }],
+        files: [{ id: 'sidecar', path: '/path/to/IMG_123.jpg.xmp', type: AssetFileType.Sidecar, isEdited: false }],
       });
       mocks.assetJob.getForSidecarCheckJob.mockResolvedValue(asset);
       mocks.storage.checkFileExists.mockResolvedValue(false);
@@ -1704,7 +1718,7 @@ describe(MetadataService.name, () => {
     it('should do nothing if the sidecar file still exists', async () => {
       const asset = forSidecarJob({
         originalPath: '/path/to/IMG_123.jpg',
-        files: [{ id: 'sidecar', path: '/path/to/IMG_123.jpg.xmp', type: AssetFileType.Sidecar }],
+        files: [{ id: 'sidecar', path: '/path/to/IMG_123.jpg.xmp', type: AssetFileType.Sidecar, isEdited: false }],
       });
 
       mocks.assetJob.getForSidecarCheckJob.mockResolvedValue(asset);

server/src/services/metadata.service.ts

@@ -254,6 +254,8 @@ export class MetadataService extends BaseService {
       }
     }
 
+    const tags = this.getTagList(exifTags);
+
     const exifData: Insertable<AssetExifTable> = {
       assetId: asset.id,
 
@@ -296,6 +298,8 @@ export class MetadataService extends BaseService {
       // grouping
       livePhotoCID: (exifTags.ContentIdentifier || exifTags.MediaGroupUUID) ?? null,
       autoStackId: this.getAutoStackId(exifTags),
+
+      tags: tags.length > 0 ? tags : null,
     };
 
     const isSidewards = exifTags.Orientation && this.isOrientationSidewards(exifTags.Orientation);
@@ -316,9 +320,10 @@ export class MetadataService extends BaseService {
         width: asset.width == null ? assetWidth : undefined,
         height: asset.height == null ? assetHeight : undefined,
       }),
-      this.applyTagList(asset, exifTags),
     ];
 
+    await this.applyTagList(asset);
+
     if (this.isMotionPhoto(asset, exifTags)) {
       promises.push(this.applyMotionPhotos(asset, exifTags, dates, stats));
     }
@@ -405,35 +410,35 @@ export class MetadataService extends BaseService {
 
   @OnEvent({ name: 'AssetTag' })
   async handleTagAsset({ assetId }: ArgOf<'AssetTag'>) {
-    await this.jobRepository.queue({ name: JobName.SidecarWrite, data: { id: assetId, tags: true } });
+    await this.jobRepository.queue({ name: JobName.SidecarWrite, data: { id: assetId } });
   }
 
   @OnEvent({ name: 'AssetUntag' })
   async handleUntagAsset({ assetId }: ArgOf<'AssetUntag'>) {
-    await this.jobRepository.queue({ name: JobName.SidecarWrite, data: { id: assetId, tags: true } });
+    await this.jobRepository.queue({ name: JobName.SidecarWrite, data: { id: assetId } });
   }
 
   @OnJob({ name: JobName.SidecarWrite, queue: QueueName.Sidecar })
   async handleSidecarWrite(job: JobOf<JobName.SidecarWrite>): Promise<JobStatus> {
-    const { id, tags } = job;
+    const { id } = job;
     const asset = await this.assetJobRepository.getForSidecarWriteJob(id);
     if (!asset) {
       return JobStatus.Failed;
     }
 
     const lockedProperties = await this.assetJobRepository.getLockedPropertiesForMetadataExtraction(id);
-    const tagsList = (asset.tags || []).map((tag) => tag.value);
 
     const { sidecarFile } = getAssetFiles(asset.files);
     const sidecarPath = sidecarFile?.path || `${asset.originalPath}.xmp`;
 
-    const { description, dateTimeOriginal, latitude, longitude, rating } = _.pick(
+    const { description, dateTimeOriginal, latitude, longitude, rating, tags } = _.pick(
       {
         description: asset.exifInfo.description,
         dateTimeOriginal: asset.exifInfo.dateTimeOriginal,
         latitude: asset.exifInfo.latitude,
         longitude: asset.exifInfo.longitude,
         rating: asset.exifInfo.rating,
+        tags: asset.exifInfo.tags,
       },
       lockedProperties,
     );
@@ -446,7 +451,7 @@ export class MetadataService extends BaseService {
         GPSLatitude: latitude,
         GPSLongitude: longitude,
         Rating: rating,
-        TagsList: tags ? tagsList : undefined,
+        TagsList: tags?.length ? tags : undefined,
       },
       _.isUndefined,
     );
@@ -560,11 +565,14 @@ export class MetadataService extends BaseService {
     return tags;
   }
 
-  private async applyTagList(asset: { id: string; ownerId: string }, exifTags: ImmichTags) {
-    const tags = this.getTagList(exifTags);
-    const results = await upsertTags(this.tagRepository, { userId: asset.ownerId, tags });
+  private async applyTagList({ id, ownerId }: { id: string; ownerId: string }) {
+    const asset = await this.assetRepository.getById(id, { exifInfo: true });
+    const results = await upsertTags(this.tagRepository, {
+      userId: ownerId,
+      tags: asset?.exifInfo?.tags ?? [],
+    });
     await this.tagRepository.replaceAssetTags(
-      asset.id,
+      id,
       results.map((tag) => tag.id),
     );
   }

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

@@ -372,7 +372,7 @@ describe(NotificationService.name, () => {
       mocks.notification.create.mockResolvedValue(notificationStub.albumEvent);
       mocks.email.renderEmail.mockResolvedValue({ html: '', text: '' });
       mocks.assetJob.getAlbumThumbnailFiles.mockResolvedValue([
-        { id: '1', type: AssetFileType.Thumbnail, path: 'path-to-thumb.jpg' },
+        { id: '1', type: AssetFileType.Thumbnail, path: 'path-to-thumb.jpg', isEdited: false },
       ]);
 
       await expect(sut.handleAlbumInvite({ id: '', recipientId: '' })).resolves.toBe(JobStatus.Success);
@@ -403,7 +403,7 @@ describe(NotificationService.name, () => {
       mocks.systemMetadata.get.mockResolvedValue({ server: {} });
       mocks.notification.create.mockResolvedValue(notificationStub.albumEvent);
       mocks.email.renderEmail.mockResolvedValue({ html: '', text: '' });
-      mocks.assetJob.getAlbumThumbnailFiles.mockResolvedValue([assetStub.image.files[2]]);
+      mocks.assetJob.getAlbumThumbnailFiles.mockResolvedValue([{ ...assetStub.image.files[2], isEdited: false }]);
 
       await expect(sut.handleAlbumInvite({ id: '', recipientId: '' })).resolves.toBe(JobStatus.Success);
       expect(mocks.assetJob.getAlbumThumbnailFiles).toHaveBeenCalledWith(

server/src/services/person.service.ts

@@ -540,12 +540,6 @@ export class PersonService extends BaseService {
     if (personId) {
       this.logger.debug(`Assigning face ${id} to person ${personId}`);
       await this.personRepository.reassignFaces({ faceIds: [id], newPersonId: personId });
-
-      await this.eventRepository.emit('PersonRecognized', {
-        assetId: face.assetId,
-        ownerId: face.asset.ownerId,
-        personId,
-      });
     }
 
     return JobStatus.Success;

server/src/services/plugin-host.functions.ts

@@ -7,7 +7,6 @@ import { AlbumRepository } from 'src/repositories/album.repository';
 import { AssetRepository } from 'src/repositories/asset.repository';
 import { CryptoRepository } from 'src/repositories/crypto.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
-import { PersonRepository } from 'src/repositories/person.repository';
 import { AssetTable } from 'src/schema/tables/asset.table';
 import { requireAccess } from 'src/utils/access';
 
@@ -21,7 +20,6 @@ export class PluginHostFunctions {
     private albumRepository: AlbumRepository,
     private accessRepository: AccessRepository,
     private cryptoRepository: CryptoRepository,
-    private personRepository: PersonRepository,
     private logger: LoggingRepository,
     private pluginJwtSecret: string,
   ) {}
@@ -35,7 +33,6 @@ export class PluginHostFunctions {
       'extism:host/user': {
         updateAsset: (cp: CurrentPlugin, offs: bigint) => this.handleUpdateAsset(cp, offs),
         addAssetToAlbum: (cp: CurrentPlugin, offs: bigint) => this.handleAddAssetToAlbum(cp, offs),
-        getFacesForAsset: (cp: CurrentPlugin, offs: bigint) => this.handleGetFacesForAsset(cp, offs),
       },
     };
   }
@@ -120,28 +117,4 @@ export class PluginHostFunctions {
     await this.albumRepository.addAssetIds(albumId, [assetId]);
     return 0;
   }
-
-  /**
-   * Host function wrapper for getFacesForAsset.
-   * Reads the input from the plugin, parses it, and returns faces data.
-   */
-  private async handleGetFacesForAsset(cp: CurrentPlugin, offs: bigint) {
-    const input = JSON.parse(cp.read(offs)!.text());
-    const result = await this.getFacesForAsset(input);
-    return cp.store(JSON.stringify(result));
-  }
-
-  async getFacesForAsset(input: { authToken: string; assetId: string }) {
-    const { authToken, assetId } = input;
-
-    const auth = this.validateToken(authToken);
-
-    await requireAccess(this.accessRepository, {
-      auth: { user: { id: auth.userId } } as any,
-      permission: Permission.AssetRead,
-      ids: [assetId],
-    });
-
-    return this.personRepository.getFaces(assetId);
-  }
 }

server/src/services/plugin.service.ts

@@ -17,7 +17,6 @@ import { IWorkflowJob, JobItem, JobOf, WorkflowData } from 'src/types';
 interface WorkflowContext {
   authToken: string;
   asset: Asset;
-  personId?: string;
 }
 
 interface PluginInput<T = unknown> {
@@ -25,7 +24,6 @@ interface PluginInput<T = unknown> {
   config: T;
   data: {
     asset: Asset;
-    personId?: string;
   };
 }
 
@@ -46,7 +44,6 @@ export class PluginService extends BaseService {
       this.albumRepository,
       this.accessRepository,
       this.cryptoRepository,
-      this.personRepository,
       this.logger,
       this.pluginJwtSecret,
     );
@@ -120,9 +117,7 @@ export class PluginService extends BaseService {
 
   private async loadPluginToDatabase(manifest: PluginManifestDto, basePath: string): Promise<void> {
     const currentPlugin = await this.pluginRepository.getPluginByName(manifest.name);
-    const isDev = this.configRepository.isDev();
-
-    if (currentPlugin != null && currentPlugin.version === manifest.version && !isDev) {
+    if (currentPlugin != null && currentPlugin.version === manifest.version) {
       this.logger.log(`Plugin ${manifest.name} is up to date (version ${manifest.version}). Skipping`);
       return;
     }
@@ -183,14 +178,6 @@ export class PluginService extends BaseService {
     });
   }
 
-  @OnEvent({ name: 'PersonRecognized' })
-  async handlePersonRecognized({ assetId, ownerId, personId }: ArgOf<'PersonRecognized'>) {
-    await this.handleTrigger(PluginTriggerType.PersonRecognized, {
-      ownerId,
-      event: { userId: ownerId, assetId, personId },
-    });
-  }
-
   private async handleTrigger<T extends PluginTriggerType>(
     triggerType: T,
     params: { ownerId: string; event: WorkflowData[T] },
@@ -232,7 +219,7 @@ export class PluginService extends BaseService {
 
           const authToken = this.cryptoRepository.signJwt({ userId: data.userId }, this.pluginJwtSecret);
 
-          const context: WorkflowContext = {
+          const context = {
             authToken,
             asset,
           };
@@ -243,35 +230,13 @@ export class PluginService extends BaseService {
           }
 
           await this.executeActions(workflowActions, context);
-          this.logger.debug(`Workflow ${workflowId} executed successfully for AssetCreate`);
+          this.logger.debug(`Workflow ${workflowId} executed successfully`);
           return JobStatus.Success;
         }
 
         case PluginTriggerType.PersonRecognized: {
-          const data = event as WorkflowData[PluginTriggerType.PersonRecognized];
-
-          const asset = await this.assetRepository.getById(data.assetId);
-          if (!asset) {
-            this.logger.error(`Asset ${data.assetId} not found for workflow ${workflowId}`);
-            return JobStatus.Failed;
-          }
-
-          const authToken = this.cryptoRepository.signJwt({ userId: data.userId }, this.pluginJwtSecret);
-
-          const context: WorkflowContext = {
-            authToken,
-            asset,
-            personId: data.personId,
-          };
-
-          const filtersPassed = await this.executeFilters(workflowFilters, context);
-          if (!filtersPassed) {
-            return JobStatus.Skipped;
-          }
-
-          await this.executeActions(workflowActions, context);
-          this.logger.debug(`Workflow ${workflowId} executed successfully for PersonRecognized`);
-          return JobStatus.Success;
+          this.logger.error('unimplemented');
+          return JobStatus.Skipped;
         }
 
         default: {
@@ -304,7 +269,6 @@ export class PluginService extends BaseService {
         config: workflowFilter.filterConfig,
         data: {
           asset: context.asset,
-          personId: context.personId,
         },
       };
 
@@ -347,7 +311,6 @@ export class PluginService extends BaseService {
         config: workflowAction.actionConfig,
         data: {
           asset: context.asset,
-          personId: context.personId,
         },
       };
 

server/src/services/storage-template.service.ts

@@ -240,11 +240,11 @@ export class StorageTemplateService extends BaseService {
           assetInfo: { sizeInBytes: fileSizeInByte, checksum },
         });
 
-        const sidecarPath = getAssetFile(asset.files, AssetFileType.Sidecar)?.path;
+        const sidecarPath = getAssetFile(asset.files, AssetFileType.Sidecar, { isEdited: false })?.path;
         if (sidecarPath) {
           await this.storageCore.moveFile({
             entityId: id,
-            pathType: AssetPathType.Sidecar,
+            pathType: AssetFileType.Sidecar,
             oldPath: sidecarPath,
             newPath: `${newPath}.xmp`,
           });

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

@@ -191,6 +191,7 @@ describe(TagService.name, () => {
     it('should upsert records', async () => {
       mocks.access.tag.checkOwnerAccess.mockResolvedValue(new Set(['tag-1', 'tag-2']));
       mocks.access.asset.checkOwnerAccess.mockResolvedValue(new Set(['asset-1', 'asset-2', 'asset-3']));
+      mocks.asset.getById.mockResolvedValue({ tags: [{ value: 'tag-1' }, { value: 'tag-2' }] } as any);
       mocks.tag.upsertAssetIds.mockResolvedValue([
         { tagId: 'tag-1', assetId: 'asset-1' },
         { tagId: 'tag-1', assetId: 'asset-2' },
@@ -204,6 +205,18 @@ describe(TagService.name, () => {
       ).resolves.toEqual({
         count: 6,
       });
+      expect(mocks.asset.upsertExif).toHaveBeenCalledWith(
+        { assetId: 'asset-1', lockedProperties: ['tags'], tags: ['tag-1', 'tag-2'] },
+        { lockedPropertiesBehavior: 'append' },
+      );
+      expect(mocks.asset.upsertExif).toHaveBeenCalledWith(
+        { assetId: 'asset-2', lockedProperties: ['tags'], tags: ['tag-1', 'tag-2'] },
+        { lockedPropertiesBehavior: 'append' },
+      );
+      expect(mocks.asset.upsertExif).toHaveBeenCalledWith(
+        { assetId: 'asset-3', lockedProperties: ['tags'], tags: ['tag-1', 'tag-2'] },
+        { lockedPropertiesBehavior: 'append' },
+      );
       expect(mocks.tag.upsertAssetIds).toHaveBeenCalledWith([
         { tagId: 'tag-1', assetId: 'asset-1' },
         { tagId: 'tag-1', assetId: 'asset-2' },
@@ -229,6 +242,7 @@ describe(TagService.name, () => {
       mocks.tag.get.mockResolvedValue(tagStub.tag);
       mocks.tag.getAssetIds.mockResolvedValue(new Set(['asset-1']));
       mocks.tag.addAssetIds.mockResolvedValue();
+      mocks.asset.getById.mockResolvedValue({ tags: [{ value: 'tag-1' }] } as any);
       mocks.access.asset.checkOwnerAccess.mockResolvedValue(new Set(['asset-2']));
 
       await expect(
@@ -240,6 +254,14 @@ describe(TagService.name, () => {
         { id: 'asset-2', success: true },
       ]);
 
+      expect(mocks.asset.upsertExif).not.toHaveBeenCalledWith(
+        { assetId: 'asset-1', lockedProperties: ['tags'], tags: ['tag-1'] },
+        { lockedPropertiesBehavior: 'append' },
+      );
+      expect(mocks.asset.upsertExif).toHaveBeenCalledWith(
+        { assetId: 'asset-2', lockedProperties: ['tags'], tags: ['tag-1'] },
+        { lockedPropertiesBehavior: 'append' },
+      );
       expect(mocks.tag.getAssetIds).toHaveBeenCalledWith('tag-1', ['asset-1', 'asset-2']);
       expect(mocks.tag.addAssetIds).toHaveBeenCalledWith('tag-1', ['asset-2']);
     });

server/src/services/tag.service.ts

@@ -16,6 +16,7 @@ import { JobName, JobStatus, Permission, QueueName } from 'src/enum';
 import { TagAssetTable } from 'src/schema/tables/tag-asset.table';
 import { BaseService } from 'src/services/base.service';
 import { addAssets, removeAssets } from 'src/utils/asset.util';
+import { updateLockedColumns } from 'src/utils/database';
 import { upsertTags } from 'src/utils/tag';
 
 @Injectable()
@@ -90,6 +91,7 @@ export class TagService extends BaseService {
 
     const results = await this.tagRepository.upsertAssetIds(items);
     for (const assetId of new Set(results.map((item) => item.assetId))) {
+      await this.updateTags(assetId);
       await this.eventRepository.emit('AssetTag', { assetId });
     }
 
@@ -107,6 +109,7 @@ export class TagService extends BaseService {
 
     for (const { id: assetId, success } of results) {
       if (success) {
+        await this.updateTags(assetId);
         await this.eventRepository.emit('AssetTag', { assetId });
       }
     }
@@ -125,6 +128,7 @@ export class TagService extends BaseService {
 
     for (const { id: assetId, success } of results) {
       if (success) {
+        await this.updateTags(assetId);
         await this.eventRepository.emit('AssetUntag', { assetId });
       }
     }
@@ -145,4 +149,12 @@ export class TagService extends BaseService {
     }
     return tag;
   }
+
+  private async updateTags(assetId: string) {
+    const asset = await this.assetRepository.getById(assetId, { tags: true });
+    await this.assetRepository.upsertExif(
+      updateLockedColumns({ assetId, tags: asset?.tags?.map(({ value }) => value) ?? [] }),
+      { lockedPropertiesBehavior: 'append' },
+    );
+  }
 }

server/src/types.ts

@@ -259,9 +259,8 @@ export interface WorkflowData {
     asset: Asset;
   };
   [PluginTriggerType.PersonRecognized]: {
-    userId: string;
-    assetId: string;
     personId: string;
+    assetId: string;
   };
 }
 
@@ -319,7 +318,7 @@ export type JobItem =
   // Sidecar Scanning
   | { name: JobName.SidecarQueueAll; data: IBaseJob }
   | { name: JobName.SidecarCheck; data: IEntityJob }
-  | { name: JobName.SidecarWrite; data: ISidecarWriteJob }
+  | { name: JobName.SidecarWrite; data: IEntityJob }
 
   // Facial Recognition
   | { name: JobName.AssetDetectFacesQueueAll; data: IBaseJob }

server/src/utils/asset.util.ts

@@ -1,5 +1,5 @@
 import { BadRequestException } from '@nestjs/common';
-import { GeneratedImageType, StorageCore } from 'src/cores/storage.core';
+import { StorageCore } from 'src/cores/storage.core';
 import { AssetFile, Exif } from 'src/database';
 import { BulkIdErrorReason, BulkIdResponseDto } from 'src/dtos/asset-ids.response.dto';
 import { UploadFieldName } from 'src/dtos/asset-media.dto';
@@ -14,19 +14,19 @@ import { PartnerRepository } from 'src/repositories/partner.repository';
 import { IBulkAsset, ImmichFile, UploadFile, UploadRequest } from 'src/types';
 import { checkAccess } from 'src/utils/access';
 
-export const getAssetFile = (files: AssetFile[], type: AssetFileType | GeneratedImageType) => {
-  return files.find((file) => file.type === type);
+export const getAssetFile = (files: AssetFile[], type: AssetFileType, { isEdited }: { isEdited: boolean }) => {
+  return files.find((file) => file.type === type && file.isEdited === isEdited);
 };
 
 export const getAssetFiles = (files: AssetFile[]) => ({
-  fullsizeFile: getAssetFile(files, AssetFileType.FullSize),
-  previewFile: getAssetFile(files, AssetFileType.Preview),
-  thumbnailFile: getAssetFile(files, AssetFileType.Thumbnail),
-  sidecarFile: getAssetFile(files, AssetFileType.Sidecar),
+  fullsizeFile: getAssetFile(files, AssetFileType.FullSize, { isEdited: false }),
+  previewFile: getAssetFile(files, AssetFileType.Preview, { isEdited: false }),
+  thumbnailFile: getAssetFile(files, AssetFileType.Thumbnail, { isEdited: false }),
+  sidecarFile: getAssetFile(files, AssetFileType.Sidecar, { isEdited: false }),
 
-  editedFullsizeFile: getAssetFile(files, AssetFileType.FullSizeEdited),
-  editedPreviewFile: getAssetFile(files, AssetFileType.PreviewEdited),
-  editedThumbnailFile: getAssetFile(files, AssetFileType.ThumbnailEdited),
+  editedFullsizeFile: getAssetFile(files, AssetFileType.FullSize, { isEdited: true }),
+  editedPreviewFile: getAssetFile(files, AssetFileType.Preview, { isEdited: true }),
+  editedThumbnailFile: getAssetFile(files, AssetFileType.Preview, { isEdited: true }),
 });
 
 export const addAssets = async (

server/test/fixtures/asset.stub.ts

@@ -31,18 +31,21 @@ const sidecarFileWithoutExt = factory.assetFile({
 });
 
 const editedPreviewFile = factory.assetFile({
-  type: AssetFileType.PreviewEdited,
+  type: AssetFileType.Preview,
   path: '/uploads/user-id/preview/path_edited.jpg',
+  isEdited: true,
 });
 
 const editedThumbnailFile = factory.assetFile({
-  type: AssetFileType.ThumbnailEdited,
+  type: AssetFileType.Thumbnail,
   path: '/uploads/user-id/thumbnail/path_edited.jpg',
+  isEdited: true,
 });
 
 const editedFullsizeFile = factory.assetFile({
-  type: AssetFileType.FullSizeEdited,
+  type: AssetFileType.FullSize,
   path: '/uploads/user-id/fullsize/path_edited.jpg',
+  isEdited: true,
 });
 
 const files: AssetFile[] = [fullsizeFile, previewFile, thumbnailFile];

server/test/fixtures/shared-link.stub.ts

@@ -147,6 +147,7 @@ export const sharedLinkStub = {
           visibility: AssetVisibility.Timeline,
           width: 500,
           height: 500,
+          tags: [],
         },
         sharedLinks: [],
         faces: [],

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

@@ -1,12 +1,15 @@
 import { Kysely } from 'kysely';
 import { JobStatus } from 'src/enum';
 import { AccessRepository } from 'src/repositories/access.repository';
+import { AssetRepository } from 'src/repositories/asset.repository';
+import { EventRepository } from 'src/repositories/event.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 import { TagRepository } from 'src/repositories/tag.repository';
 import { DB } from 'src/schema';
 import { TagService } from 'src/services/tag.service';
 import { upsertTags } from 'src/utils/tag';
 import { newMediumService } from 'test/medium.factory';
+import { factory } from 'test/small.factory';
 import { getKyselyDB } from 'test/utils';
 
 let defaultDatabase: Kysely<DB>;
@@ -14,8 +17,8 @@ let defaultDatabase: Kysely<DB>;
 const setup = (db?: Kysely<DB>) => {
   return newMediumService(TagService, {
     database: db || defaultDatabase,
-    real: [TagRepository, AccessRepository],
-    mock: [LoggingRepository],
+    real: [AssetRepository, TagRepository, AccessRepository],
+    mock: [EventRepository, LoggingRepository],
   });
 };
 
@@ -24,6 +27,32 @@ beforeAll(async () => {
 });
 
 describe(TagService.name, () => {
+  describe('addAssets', () => {
+    it('should lock exif column', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      const [tag] = await upsertTags(ctx.get(TagRepository), { userId: user.id, tags: ['tag-1'] });
+      const authDto = factory.auth({ user });
+
+      await sut.addAssets(authDto, tag.id, { ids: [asset.id] });
+      await expect(
+        ctx.database
+          .selectFrom('asset_exif')
+          .select(['lockedProperties', 'tags'])
+          .where('assetId', '=', asset.id)
+          .executeTakeFirstOrThrow(),
+      ).resolves.toEqual({
+        lockedProperties: ['tags'],
+        tags: ['tag-1'],
+      });
+      await expect(ctx.get(TagRepository).getByValue(user.id, 'tag-1')).resolves.toEqual(
+        expect.objectContaining({ id: tag.id }),
+      );
+      await expect(ctx.get(TagRepository).getAssetIds(tag.id, [asset.id])).resolves.toContain(asset.id);
+    });
+  });
   describe('deleteEmptyTags', () => {
     it('single tag exists, not connected to any assets, and is deleted', async () => {
       const { sut, ctx } = setup();

server/test/small.factory.ts

@@ -335,6 +335,7 @@ const assetSidecarWriteFactory = () => {
         id: newUuid(),
         path: '/path/to/original-path.jpg.xmp',
         type: AssetFileType.Sidecar,
+        isEdited: false,
       },
     ],
     exifInfo: {
@@ -386,6 +387,7 @@ const assetFileFactory = (file: Partial<AssetFile> = {}): AssetFile => ({
   id: newUuid(),
   type: AssetFileType.Preview,
   path: '/uploads/user-id/thumbs/path.jpg',
+  isEdited: false,
   ...file,
 });
 

web/src/app.css

@@ -4,7 +4,7 @@
 /* @import '/usr/ui/dist/theme/default.css'; */
 
 @utility immich-form-input {
-  @apply rounded-xl bg-slate-200 px-3 py-3 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-100 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800 dark:disabled:text-gray-200;
+  @apply bg-gray-100 ring-1 ring-gray-200 transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900 flex w-full items-center rounded-lg disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 flex-1 py-2.5 text-base pl-4 pr-4;
 }
 
 @utility immich-form-label {

web/src/lib/components/QueueCard.svelte

@@ -5,6 +5,7 @@
   import { Route } from '$lib/route';
   import { asQueueItem } from '$lib/services/queue.service';
   import { locale } from '$lib/stores/preferences.store';
+  import { transformToTitleCase } from '$lib/utils';
   import { QueueCommand, type QueueCommandDto, type QueueResponseDto } from '@immich/sdk';
   import { Icon, IconButton, Link } from '@immich/ui';
   import {
@@ -53,7 +54,7 @@
       <div class="flex items-center gap-2 text-xl font-semibold text-primary">
         <Link class="flex items-center gap-2 hover:underline" href={Route.viewQueue(queue)} underline={false}>
           <Icon {icon} size="1.25em" class="hidden shrink-0 sm:block" />
-          <span class="uppercase">{title}</span>
+          <span>{transformToTitleCase(title)}</span>
         </Link>
         <IconButton
           color="primary"
@@ -131,7 +132,7 @@
         onClick={() => onCommand({ command: QueueCommand.Start, force: false })}
       >
         <Icon icon={mdiAlertCircle} size="36" />
-        <span class="uppercase">{$t('disabled')}</span>
+        <span>{$t('disabled')}</span>
       </QueueCardButton>
     {/if}
 
@@ -139,7 +140,7 @@
       {#if waitingCount > 0}
         <QueueCardButton color="gray" onClick={() => onCommand({ command: QueueCommand.Empty, force: false })}>
           <Icon icon={mdiClose} size="24" />
-          <span class="uppercase">{$t('clear')}</span>
+          <span>{$t('clear')}</span>
         </QueueCardButton>
       {/if}
       {#if queue.isPaused}
@@ -147,12 +148,12 @@
         <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Resume, force: false })}>
           <!-- size property is not reactive, so have to use width and height -->
           <Icon icon={mdiFastForward} {size} />
-          <span class="uppercase">{$t('resume')}</span>
+          <span>{$t('resume')}</span>
         </QueueCardButton>
       {:else}
         <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Pause, force: false })}>
           <Icon icon={mdiPause} size="24" />
-          <span class="uppercase">{$t('pause')}</span>
+          <span>{$t('pause')}</span>
         </QueueCardButton>
       {/if}
     {/if}
@@ -161,25 +162,25 @@
       {#if allText}
         <QueueCardButton color="dark-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: true })}>
           <Icon icon={mdiAllInclusive} size="24" />
-          <span class="uppercase">{allText}</span>
+          <span>{allText}</span>
         </QueueCardButton>
       {/if}
       {#if refreshText}
         <QueueCardButton color="gray" onClick={() => onCommand({ command: QueueCommand.Start, force: undefined })}>
           <Icon icon={mdiImageRefreshOutline} size="24" />
-          <span class="uppercase">{refreshText}</span>
+          <span>{refreshText}</span>
         </QueueCardButton>
       {/if}
       <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
         <Icon icon={mdiSelectionSearch} size="24" />
-        <span class="uppercase">{missingText}</span>
+        <span>{missingText}</span>
       </QueueCardButton>
     {/if}
 
     {#if !disabled && !multipleButtons && isIdle}
       <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
         <Icon icon={mdiPlay} size="48" />
-        <span class="uppercase">{missingText}</span>
+        <span>{missingText}</span>
       </QueueCardButton>
     {/if}
   </div>

web/src/lib/components/admin-settings/StorageTemplateSettings.svelte

@@ -12,7 +12,7 @@
   import { handleSystemConfigSave } from '$lib/services/system-config.service';
   import { user } from '$lib/stores/user.store';
   import { getStorageTemplateOptions, type SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
-  import { LoadingSpinner } from '@immich/ui';
+  import { Heading, LoadingSpinner, Text } from '@immich/ui';
   import handlebar from 'handlebars';
   import * as luxon from 'luxon';
   import { onDestroy } from 'svelte';
@@ -158,7 +158,9 @@
       {#if configToEdit.storageTemplate.enabled}
         <hr />
 
-        <h3 class="text-base font-medium text-primary">{$t('variables')}</h3>
+        <Heading size="tiny" color="primary">
+          {$t('variables')}
+        </Heading>
 
         <section class="support-date">
           {#await getSupportDateTimeFormat()}
@@ -174,11 +176,14 @@
           <SupportedVariablesPanel />
         </section>
 
-        <div class="flex flex-col mt-4">
-          <h3 class="text-base font-medium text-primary">{$t('template')}</h3>
+        <div class="flex flex-col mt-2">
+          <!-- <h3 class="text-base font-medium text-primary">{$t('template')}</h3> -->
+          <Heading size="tiny" color="primary">
+            {$t('template')}
+          </Heading>
 
-          <div class="my-2 text-sm">
-            <h4 class="uppercase">{$t('preview')}</h4>
+          <div class="my-2">
+            <Text size="small">{$t('preview')}</Text>
           </div>
 
           <p class="text-sm">
@@ -249,7 +254,9 @@
 
             {#if !minified}
               <div id="migration-info" class="mt-2 text-sm">
-                <h3 class="text-base font-medium text-primary">{$t('notes')}</h3>
+                <Heading size="tiny" color="primary">
+                  {$t('notes')}
+                </Heading>
                 <section class="flex flex-col gap-2">
                   <p>
                     <FormatMessage

web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { locale } from '$lib/stores/preferences.store';
   import type { SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
+  import { Card, CardBody, CardHeader, Text } from '@immich/ui';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
@@ -15,78 +16,80 @@
   };
 </script>
 
-<div class="mt-2 text-sm">
-  <h4 class="uppercase">{$t('date_and_time')}</h4>
-</div>
+<Text size="small">{$t('date_and_time')}</Text>
 
 <!-- eslint-disable svelte/no-useless-mustaches -->
-<div class="mt-2 rounded-lg bg-gray-200 p-4 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
-  <div class="mb-2 text-gray-600 dark:text-immich-dark-fg">
-    <p>{$t('admin.storage_template_date_time_description')}</p>
-    <p>{$t('admin.storage_template_date_time_sample', { values: { date: '2022-02-03T20:03:05.250' } })}</p>
-  </div>
-  <div class="flex gap-10">
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('year')}</p>
-      <ul>
-        {#each options.yearOptions as yearFormat, index (index)}
-          <li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
-        {/each}
-      </ul>
-    </div>
+<Card class="mt-2 text-sm bg-light-50 shadow-none">
+  <CardHeader>
+    <Text class="mb-1">{$t('admin.storage_template_date_time_description')}</Text>
+    <Text color="primary"
+      >{$t('admin.storage_template_date_time_sample', { values: { date: '2022-02-03T20:03:05.250' } })}</Text
+    >
+  </CardHeader>
+  <CardBody>
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4">
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('year')}</Text>
+        <ul>
+          {#each options.yearOptions as yearFormat, index (index)}
+            <li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
+          {/each}
+        </ul>
+      </div>
 
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('month')}</p>
-      <ul>
-        {#each options.monthOptions as monthFormat, index (index)}
-          <li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
-        {/each}
-      </ul>
-    </div>
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('month')}</Text>
+        <ul>
+          {#each options.monthOptions as monthFormat, index (index)}
+            <li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
+          {/each}
+        </ul>
+      </div>
 
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('week')}</p>
-      <ul>
-        {#each options.weekOptions as weekFormat, index (index)}
-          <li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li>
-        {/each}
-      </ul>
-    </div>
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('week')}</Text>
+        <ul>
+          {#each options.weekOptions as weekFormat, index (index)}
+            <li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li>
+          {/each}
+        </ul>
+      </div>
 
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('day')}</p>
-      <ul>
-        {#each options.dayOptions as dayFormat, index (index)}
-          <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-        {/each}
-      </ul>
-    </div>
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('day')}</Text>
+        <ul>
+          {#each options.dayOptions as dayFormat, index (index)}
+            <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
+          {/each}
+        </ul>
+      </div>
 
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('hour')}</p>
-      <ul>
-        {#each options.hourOptions as dayFormat, index (index)}
-          <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-        {/each}
-      </ul>
-    </div>
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('hour')}</Text>
+        <ul>
+          {#each options.hourOptions as dayFormat, index (index)}
+            <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
+          {/each}
+        </ul>
+      </div>
 
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('minute')}</p>
-      <ul>
-        {#each options.minuteOptions as dayFormat, index (index)}
-          <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-        {/each}
-      </ul>
-    </div>
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('minute')}</Text>
+        <ul>
+          {#each options.minuteOptions as dayFormat, index (index)}
+            <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
+          {/each}
+        </ul>
+      </div>
 
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('second')}</p>
-      <ul>
-        {#each options.secondOptions as dayFormat, index (index)}
-          <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-        {/each}
-      </ul>
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('second')}</Text>
+        <ul>
+          {#each options.secondOptions as dayFormat, index (index)}
+            <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
+          {/each}
+        </ul>
+      </div>
     </div>
-  </div>
-</div>
+  </CardBody>
+</Card>

web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte

@@ -1,56 +1,59 @@
 <script lang="ts">
+  import { Card, CardBody, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 </script>
 
-<div class="mt-4 text-sm">
-  <h4 class="uppercase">{$t('other_variables')}</h4>
-</div>
+<Text size="small">{$t('other_variables')}</Text>
 
-<div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
-  <div class="flex gap-12">
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('filename')}</p>
-      <ul>
-        <li>{`{{filename}}`} - IMG_123</li>
-        <li>{`{{ext}}`} - jpg</li>
-      </ul>
-    </div>
+<Card class="mt-2 text-sm bg-light-50 shadow-none">
+  <CardBody>
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('filename')}</Text>
+        <ul>
+          <li>{`{{filename}}`} - IMG_123</li>
+          <li>{`{{ext}}`} - jpg</li>
+        </ul>
+      </div>
 
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('filetype')}</p>
-      <ul>
-        <li>{`{{filetype}}`} - VID or IMG</li>
-        <li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
-      </ul>
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('filetype')}</Text>
+        <ul>
+          <li>{`{{filetype}}`} - VID or IMG</li>
+          <li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
+        </ul>
+      </div>
+
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('camera')}</Text>
+        <ul>
+          <li>{`{{make}}`} - FUJIFILM</li>
+          <li>{`{{model}}`} - X-T50</li>
+          <li>{`{{lensModel}}`} - XF27mm F2.8 R WR</li>
+        </ul>
+      </div>
+
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('album')}</Text>
+        <ul>
+          <li>{`{{album}}`} - Album Name</li>
+          <li>
+            {`{{album-startDate-x}}`} - Album Start Date and Time (e.g. album-startDate-yy).
+            {$t('admin.storage_template_date_time_sample', { values: { date: '2021-12-31T05:32:41.750' } })}
+          </li>
+          <li>
+            {`{{album-endDate-x}}`} - Album End Date and Time (e.g. album-endDate-MM).
+            {$t('admin.storage_template_date_time_sample', { values: { date: '2023-05-06T09:15:17.100' } })}
+          </li>
+        </ul>
+      </div>
+      <div>
+        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('other')}</Text>
+        <ul>
+          <li>{`{{assetId}}`} - Asset ID</li>
+          <li>{`{{assetIdShort}}`} - Asset ID (last 12 characters)</li>
+        </ul>
+      </div>
     </div>
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('album')}</p>
-      <ul>
-        <li>{`{{album}}`} - Album Name</li>
-        <li>
-          {`{{album-startDate-x}}`} - Album Start Date and Time (e.g. album-startDate-yy).
-          {$t('admin.storage_template_date_time_sample', { values: { date: '2021-12-31T05:32:41.750' } })}
-        </li>
-        <li>
-          {`{{album-endDate-x}}`} - Album End Date and Time (e.g. album-endDate-MM).
-          {$t('admin.storage_template_date_time_sample', { values: { date: '2023-05-06T09:15:17.100' } })}
-        </li>
-      </ul>
-    </div>
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('camera')}</p>
-      <ul>
-        <li>{`{{make}}`} - FUJIFILM</li>
-        <li>{`{{model}}`} - X-T50</li>
-        <li>{`{{lensModel}}`} - XF27mm F2.8 R WR</li>
-      </ul>
-    </div>
-    <div>
-      <p class="uppercase font-medium text-primary">{$t('other')}</p>
-      <ul>
-        <li>{`{{assetId}}`} - Asset ID</li>
-        <li>{`{{assetIdShort}}`} - Asset ID (last 12 characters)</li>
-      </ul>
-    </div>
-  </div>
-</div>
+  </CardBody>
+</Card>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -16,7 +16,7 @@ describe('AssetViewerNavBar component', () => {
     preAction: () => {},
     onZoomImage: () => {},
     onAction: () => {},
-    onRunJob: () => {},
+    onEdit: () => {},
     onPlaySlideshow: () => {},
     onClose: () => {},
     playOriginalVideo: false,

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

@@ -28,12 +28,11 @@
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getAssetJobName, getSharedLink, withoutIcons } from '$lib/utils';
+  import { getSharedLink, withoutIcons } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
-    AssetJobName,
     AssetTypeEnum,
     AssetVisibility,
     type AlbumResponseDto,
@@ -44,13 +43,9 @@
   import { CommandPaletteDefaultProvider, IconButton, type ActionItem } from '@immich/ui';
   import {
     mdiArrowLeft,
-    mdiCogRefreshOutline,
     mdiCompare,
     mdiContentCopy,
-    mdiDatabaseRefreshOutline,
     mdiDotsVertical,
-    mdiHeadSyncOutline,
-    mdiImageRefreshOutline,
     mdiImageSearch,
     mdiMagnifyMinusOutline,
     mdiMagnifyPlusOutline,
@@ -71,7 +66,6 @@
     preAction: PreAction;
     onAction: OnAction;
     onUndoDelete?: OnUndoDelete;
-    onRunJob: (name: AssetJobName) => void;
     onPlaySlideshow: () => void;
     onEdit: () => void;
     onClose?: () => void;
@@ -90,7 +84,6 @@
     preAction,
     onAction,
     onUndoDelete = undefined,
-    onRunJob,
     onPlaySlideshow,
     onClose,
     onEdit,
@@ -124,6 +117,10 @@
     PlayMotionPhoto,
     StopMotionPhoto,
     Info,
+    RefreshFacesJob,
+    RefreshMetadataJob,
+    RegenerateThumbnailJob,
+    TranscodeVideoJob,
   } = $derived(getAssetActions($t, asset));
   const sharedLink = getSharedLink();
 
@@ -140,7 +137,24 @@
 
 <CommandPaletteDefaultProvider
   name={$t('assets')}
-  actions={withoutIcons([Close, Share, Offline, Favorite, Unfavorite, PlayMotionPhoto, StopMotionPhoto, Info])}
+  actions={withoutIcons([
+    Close,
+    Cast,
+    Share,
+    Download,
+    DownloadOriginal,
+    SharedLinkDownload,
+    Offline,
+    Favorite,
+    Unfavorite,
+    PlayMotionPhoto,
+    StopMotionPhoto,
+    Info,
+    RefreshFacesJob,
+    RefreshMetadataJob,
+    RegenerateThumbnailJob,
+    TranscodeVideoJob,
+  ])}
 />
 
 <div
@@ -275,28 +289,10 @@
         {/if}
         {#if isOwner}
           <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}
-            <MenuOption
-              icon={mdiCogRefreshOutline}
-              onClick={() => onRunJob(AssetJobName.TranscodeVideo)}
-              text={$getAssetJobName(AssetJobName.TranscodeVideo)}
-            />
-          {/if}
+          <ActionMenuItem action={RefreshFacesJob} />
+          <ActionMenuItem action={RefreshMetadataJob} />
+          <ActionMenuItem action={RegenerateThumbnailJob} />
+          <ActionMenuItem action={TranscodeVideoJob} />
         {/if}
       </ButtonContextMenu>
     {/if}

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

@@ -11,6 +11,7 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { preloadManager } from '$lib/managers/PreloadManager.svelte';
   import { Route } from '$lib/route';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -18,7 +19,7 @@
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
-  import { getAssetJobMessage, getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
+  import { getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { navigateToAsset } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -27,18 +28,15 @@
   import { preloadImageUrl } from '$lib/utils/sw-messaging';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
-    AssetJobName,
     AssetTypeEnum,
     getAllAlbums,
     getAssetInfo,
     getStack,
-    runAssetJobs,
     type AlbumResponseDto,
     type AssetResponseDto,
     type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
-  import { toastManager } from '@immich/ui';
   import { onDestroy, onMount, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
@@ -251,7 +249,7 @@
           await handleStopSlideshow();
         }
       }
-    });
+    }, $t('error_while_navigating'));
   };
 
   const showEditor = () => {
@@ -261,15 +259,6 @@
     isShowEditor = !isShowEditor;
   };
 
-  const handleRunJob = async (name: AssetJobName) => {
-    try {
-      await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
-      toastManager.success($getAssetJobMessage(name));
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_submit_job'));
-    }
-  };
-
   /**
    * Slide show mode
    */
@@ -321,6 +310,11 @@
         await handleGetAllAlbums();
         break;
       }
+      case AssetAction.DELETE:
+      case AssetAction.TRASH: {
+        eventManager.emit('AssetsDelete', [asset.id]);
+        break;
+      }
       case AssetAction.REMOVE_ASSET_FROM_STACK: {
         stack = action.stack;
         if (stack) {
@@ -467,7 +461,6 @@
         onAction={handleAction}
         {onUndoDelete}
         onEdit={showEditor}
-        onRunJob={handleRunJob}
         onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
         onClose={onClose ? () => onClose(asset) : undefined}
         {playOriginalVideo}

web/src/lib/components/asset-viewer/detail-panel-tags.svelte

@@ -5,7 +5,7 @@
   import { Route } from '$lib/route';
   import { removeTag } from '$lib/utils/asset-utils';
   import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-  import { Icon, modalManager } from '@immich/ui';
+  import { Icon, modalManager, Text } from '@immich/ui';
   import { mdiClose, mdiPlus } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -38,7 +38,7 @@
 {#if isOwner && !authManager.isSharedLink}
   <section class="px-4 mt-4">
     <div class="flex h-10 w-full items-center justify-between text-sm">
-      <h2 class="uppercase">{$t('tags')}</h2>
+      <Text color="muted">{$t('tags')}</Text>
     </div>
     <section class="flex flex-wrap pt-2 gap-1" data-testid="detail-panel-tags">
       {#each tags as tag (tag.id)}

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

@@ -20,7 +20,7 @@
   import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { getParentPath } from '$lib/utils/tree-utils';
   import { AssetMediaSize, getAssetInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
-  import { Icon, IconButton, LoadingSpinner, modalManager } from '@immich/ui';
+  import { Icon, IconButton, LoadingSpinner, modalManager, Text } from '@immich/ui';
   import {
     mdiCalendar,
     mdiCamera,
@@ -160,7 +160,7 @@
   {#if !authManager.isSharedLink && isOwner}
     <section class="px-4 pt-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
-        <h2 class="uppercase">{$t('people')}</h2>
+        <Text size="small" color="muted">{$t('people')}</Text>
         <div class="flex gap-2 items-center">
           {#if people.some((person) => person.isHidden)}
             <IconButton
@@ -259,10 +259,10 @@
   <div class="px-4 py-4">
     {#if asset.exifInfo}
       <div class="flex h-10 w-full items-center justify-between text-sm">
-        <h2 class="uppercase">{$t('details')}</h2>
+        <Text size="small" color="muted">{$t('details')}</Text>
       </div>
     {:else}
-      <p class="uppercase text-sm">{$t('no_exif_info_available')}</p>
+      <Text size="small" color="muted">{$t('no_exif_info_available')}</Text>
     {/if}
 
     {#if dateTime}
@@ -487,7 +487,7 @@
 
 {#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
   <section class="px-6 dark:text-immich-dark-fg mt-4">
-    <p class="uppercase text-sm">{$t('shared_by')}</p>
+    <Text size="small" color="muted">{$t('shared_by')}</Text>
     <div class="flex gap-4 pt-4">
       <div>
         <UserAvatar user={asset.owner} size="md" />
@@ -504,7 +504,9 @@
 
 {#if albums.length > 0}
   <section class="px-6 py-6 dark:text-immich-dark-fg">
-    <p class="uppercase pb-4 text-sm">{$t('appears_in')}</p>
+    <div class="pb-4">
+      <Text size="small" color="muted">{$t('appears_in')}</Text>
+    </div>
     {#each albums as album (album.id)}
       <a href={Route.viewAlbum(album)}>
         <div class="flex gap-4 pt-2 hover:cursor-pointer items-center">

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -147,7 +147,7 @@
     {/if}
   </div>
   <div class="px-4 py-4 text-sm">
-    <h2 class="mb-8 mt-4 uppercase">{$t('all_people')}</h2>
+    <h2 class="mb-8 mt-4">{$t('all_people')}</h2>
     {#if isShowLoadingPeople}
       <div class="flex w-full justify-center">
         <LoadingSpinner />

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
-  import { websocketEvents } from '$lib/stores/websocket';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { zoomImageToBase64 } from '$lib/utils/people-utils';
@@ -70,8 +70,8 @@
     isShowLoadingPeople = false;
   }
 
-  const onPersonThumbnail = (personId: string) => {
-    assetFaceGenerated.push(personId);
+  const onPersonThumbnailReady = ({ id }: { id: string }) => {
+    assetFaceGenerated.push(id);
     if (
       isEqual(assetFaceGenerated, peopleToCreate) &&
       loaderLoadingDoneTimeout &&
@@ -86,7 +86,6 @@
 
   onMount(() => {
     handlePromiseError(loadPeople());
-    return websocketEvents.on('on_person_thumbnail', onPersonThumbnail);
   });
 
   const isEqual = (a: string[], b: string[]): boolean => {
@@ -184,6 +183,8 @@
   };
 </script>
 
+<OnEvents {onPersonThumbnailReady} />
+
 <section
   transition:fly={{ x: 360, duration: 100, easing: linear }}
   class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"

web/src/lib/components/onboarding-page/onboarding-card.svelte

@@ -39,7 +39,7 @@
         <Icon {icon} size="30" class="text-primary" />
       {/if}
       {#if title}
-        <p class="uppercase text-xl text-primary">
+        <p class="text-xl text-primary font-medium">
           {title}
         </p>
       {/if}

web/src/lib/components/onboarding-page/onboarding-theme.svelte

@@ -19,7 +19,7 @@
         class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
       >
         <Icon icon={sunPath} viewBox={sunViewBox} size="96" />
-        <p class="uppercase font-semibold text-4xl">{$t('light')}</p>
+        <p class="font-semibold text-4xl">{$t('light')}</p>
       </div>
     </button>
     <button
@@ -31,7 +31,7 @@
         class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"
       >
         <Icon icon={moonPath} viewBox={moonViewBox} size="96" />
-        <p class="uppercase font-semibold text-4xl">{$t('dark')}</p>
+        <p class="font-semibold text-4xl">{$t('dark')}</p>
       </div>
     </button>
   </div>

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

@@ -24,7 +24,7 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import { generateId } from '$lib/utils/generate-id';
   import { Icon, IconButton, Label } from '@immich/ui';
-  import { mdiClose, mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
+  import { mdiChevronDown, mdiClose, mdiMagnify } from '@mdi/js';
   import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { FormEventHandler } from 'svelte/elements';
@@ -251,7 +251,7 @@
 </script>
 
 <svelte:window onresize={onPositionChange} />
-<Label class="block mb-1 {hideLabel ? 'sr-only' : ''}" for={inputId}>{label}</Label>
+<Label class="block mb-1 {hideLabel ? 'sr-only' : ''} text-xs text-neutral-500 font-light" for={inputId}>{label}</Label>
 <div
   class="relative w-full dark:text-gray-300 text-gray-700 text-base"
   use:focusOutside={{ onFocusOut: deactivate }}
@@ -351,7 +351,7 @@
           size="small"
         />
       {:else if !isOpen}
-        <Icon icon={mdiUnfoldMoreHorizontal} aria-hidden />
+        <Icon icon={mdiChevronDown} aria-hidden />
       {/if}
     </div>
   </div>
@@ -391,7 +391,7 @@
         <li
           aria-selected={index === selectedIndex}
           bind:this={optionRefs[index]}
-          class="text-start w-full px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-200 aria-selected:dark:bg-gray-700 break-words"
+          class="text-start w-full px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-200 aria-selected:dark:bg-gray-700 wrap-break-words"
           id={`${listboxId}-${index}`}
           onclick={() => handleSelect(option)}
           role="option"

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

@@ -10,6 +10,7 @@
 
 <script lang="ts">
   import { afterNavigate } from '$app/navigation';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import { Theme } from '$lib/constants';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
@@ -292,8 +293,14 @@
 
     untrack(() => map?.jumpTo({ center, zoom }));
   });
+
+  const onAssetsDelete = async () => {
+    mapMarkers = await loadMapMarkers();
+  };
 </script>
 
+<OnEvents {onAssetsDelete} />
+
 <!--  We handle style loading ourselves so we set style blank here -->
 <MapLibre
   {hash}

web/src/lib/components/shared-components/search-bar/search-camera-section.svelte

@@ -10,6 +10,7 @@
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
+  import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -81,8 +82,7 @@
 </script>
 
 <div id="camera-selection">
-  <p class="uppercase immich-form-label">{$t('camera')}</p>
-
+  <Text fontWeight="medium">{$t('camera')}</Text>
   <div class="grid grid-auto-fit-40 gap-5 mt-1">
     <div class="w-full">
       <Combobox

web/src/lib/components/shared-components/search-bar/search-date-section.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
   export interface SearchDateFilter {
-    takenBefore?: string;
-    takenAfter?: string;
+    takenBefore?: DateTime;
+    takenAfter?: DateTime;
   }
 </script>
 
 <script lang="ts">
-  import DateInput from '$lib/elements/DateInput.svelte';
-  import { Text } from '@immich/ui';
+  import { DatePicker, Text } from '@immich/ui';
+  import type { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -17,23 +17,19 @@
   let { filters = $bindable() }: Props = $props();
 
   let invalid = $derived(filters.takenAfter && filters.takenBefore && filters.takenAfter > filters.takenBefore);
-
-  const inputClasses = $derived(
-    `immich-form-input w-full mt-1 hover:cursor-pointer ${invalid ? 'border border-danger' : ''}`,
-  );
 </script>
 
 <div class="flex flex-col gap-1">
   <div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
-    <label class="immich-form-label" for="start-date">
-      <span class="uppercase">{$t('start_date')}</span>
-      <DateInput class={inputClasses} type="date" id="start-date" name="start-date" bind:value={filters.takenAfter} />
-    </label>
+    <div>
+      <Text class="mb-2" fontWeight="medium">{$t('start_date')}</Text>
+      <DatePicker bind:value={filters.takenAfter} />
+    </div>
 
-    <label class="immich-form-label" for="end-date">
-      <span class="uppercase">{$t('end_date')}</span>
-      <DateInput class={inputClasses} type="date" id="end-date" name="end-date" bind:value={filters.takenBefore} />
-    </label>
+    <div>
+      <Text class="mb-2" fontWeight="medium">{$t('end_date')}</Text>
+      <DatePicker bind:value={filters.takenBefore} />
+    </div>
   </div>
   {#if invalid}
     <Text color="danger">{$t('start_date_before_end_date')}</Text>

web/src/lib/components/shared-components/search-bar/search-display-section.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-  import { Checkbox, Label } from '@immich/ui';
+  import { Checkbox, Label, Text } from '@immich/ui';
 
   import { t } from 'svelte-i18n';
 
@@ -20,19 +20,20 @@
 
 <div id="display-options-selection">
   <fieldset>
-    <legend class="uppercase immich-form-label">{$t('display_options')}</legend>
+    <Text class="mb-2" fontWeight="medium">{$t('display_options')}</Text>
+
     <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
       <div class="flex items-center gap-2">
         <Checkbox id="not-in-album-checkbox" size="tiny" bind:checked={filters.isNotInAlbum} />
-        <Label label={$t('not_in_any_album')} for="not-in-album-checkbox" />
+        <Label label={$t('not_in_any_album')} for="not-in-album-checkbox" class="text-sm font-normal" />
       </div>
       <div class="flex items-center gap-2">
         <Checkbox id="archive-checkbox" size="tiny" bind:checked={filters.isArchive} />
-        <Label label={$t('archive')} for="archive-checkbox" />
+        <Label label={$t('archive')} for="archive-checkbox" class="text-sm font-normal" />
       </div>
       <div class="flex items-center gap-2">
         <Checkbox id="favorites-checkbox" size="tiny" bind:checked={filters.isFavorite} />
-        <Label label={$t('favorites')} for="favorites-checkbox" />
+        <Label label={$t('favorites')} for="favorites-checkbox" class="text-sm font-normal" />
       </div>
     </div>
   </fieldset>

web/src/lib/components/shared-components/search-bar/search-history-box.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { searchStore } from '$lib/stores/search.svelte';
-  import { Icon, IconButton } from '@immich/ui';
+  import { Icon, IconButton, Text } from '@immich/ui';
   import { mdiClose, mdiMagnify } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
@@ -97,7 +97,7 @@
       class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300 z-1"
     >
       <div class="flex items-center justify-between px-5 pt-5 text-xs">
-        <p class="uppercase py-2" aria-hidden={true}>{$t('recent_searches')}</p>
+        <Text class="py-2" color="muted" aria-hidden={true}>{$t('recent_searches')}</Text>
         {#if showClearAll}
           <button
             id={getId(0)}

web/src/lib/components/shared-components/search-bar/search-location-section.svelte

@@ -10,6 +10,7 @@
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
+  import { Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -74,7 +75,7 @@
 </script>
 
 <div id="location-selection">
-  <p class="uppercase immich-form-label">{$t('place')}</p>
+  <Text fontWeight="medium">{$t('place')}</Text>
 
   <div class="grid grid-auto-fit-40 gap-5 mt-1">
     <div class="w-full">

web/src/lib/components/shared-components/search-bar/search-media-section.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { MediaType } from '$lib/constants';
   import RadioButton from '$lib/elements/RadioButton.svelte';
+  import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -12,7 +13,8 @@
 
 <div id="media-type-selection">
   <fieldset>
-    <legend class="uppercase immich-form-label">{$t('media_type')}</legend>
+    <Text class="mb-2" fontWeight="medium">{$t('media_type')}</Text>
+
     <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
       <RadioButton name="media-type" id="type-all" bind:group={filteredMedia} label={$t('all')} value={MediaType.All} />
       <RadioButton

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -5,7 +5,7 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
-  import { Button, LoadingSpinner } from '@immich/ui';
+  import { Button, LoadingSpinner, Text } from '@immich/ui';
   import { mdiArrowRight, mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { SvelteSet } from 'svelte/reactivity';
@@ -63,12 +63,12 @@
 
     <div id="people-selection" class="max-h-60 -mb-4 overflow-y-auto immich-scrollbar">
       <div class="flex items-center w-full justify-between gap-6">
-        <p class="uppercase immich-form-label py-3">{$t('people')}</p>
+        <Text class="py-3" fontWeight="medium">{$t('people')}</Text>
         <SearchBar bind:name placeholder={$t('filter_people')} showLoadingSpinner={false} />
       </div>
 
       <SingleGridRow
-        class="grid grid-auto-fill-20 gap-1 mt-2 overflow-y-auto immich-scrollbar"
+        class="grid grid-auto-fill-20 gap-1 mt-2 overflow-y-auto immich-scrollbar space-between"
         bind:itemCount={numberOfPeople}
       >
         {#each peopleList as person (person.id)}

web/src/lib/components/shared-components/search-bar/search-ratings-section.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import Combobox from '../combobox.svelte';
 
@@ -18,16 +19,14 @@
   ];
 </script>
 
-<div class="grid grid-auto-fit-40 gap-5">
-  <label class="immich-form-label" for="start-date">
-    <div class="[&_label]:uppercase">
-      <Combobox
-        label={$t('rating')}
-        placeholder={$t('search_rating')}
-        {options}
-        selectedOption={rating === undefined ? undefined : options[rating]}
-        onSelect={(r) => (rating = r === undefined ? undefined : Number.parseInt(r.value))}
-      />
-    </div>
-  </label>
+<div class="flex flex-col">
+  <Text class="mb-2" fontWeight="medium">{$t('rating')}</Text>
+  <Combobox
+    label={$t('rating')}
+    placeholder={$t('search_rating')}
+    hideLabel
+    {options}
+    selectedOption={rating === undefined ? undefined : options[rating]}
+    onSelect={(r) => (rating = r === undefined ? undefined : Number.parseInt(r.value))}
+  />
 </div>

web/src/lib/components/shared-components/search-bar/search-tags-section.svelte

@@ -2,7 +2,7 @@
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
-  import { Checkbox, Icon, Label } from '@immich/ui';
+  import { Checkbox, Icon, Label, Text } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -43,18 +43,18 @@
 {#if $preferences?.tags?.enabled}
   <div id="location-selection">
     <form autocomplete="off" id="create-tag-form">
-      <div class="my-4 flex flex-col gap-2">
-        <div class="[&_label]:uppercase">
-          <Combobox
-            disabled={selectedTags === null}
-            onSelect={handleSelect}
-            label={$t('tags')}
-            defaultFirstOption
-            options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
-            bind:selectedOption
-            placeholder={$t('search_tags')}
-          />
-        </div>
+      <div class="mb-4 flex flex-col">
+        <Text class="py-3" fontWeight="medium">{$t('tags')}</Text>
+        <Combobox
+          disabled={selectedTags === null}
+          hideLabel
+          onSelect={handleSelect}
+          label={$t('tags')}
+          defaultFirstOption
+          options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
+          bind:selectedOption
+          placeholder={$t('search_tags')}
+        />
       </div>
       <div class="flex items-center gap-2">
         <Checkbox
@@ -65,7 +65,7 @@
             selectedTags = checked ? null : new SvelteSet();
           }}
         />
-        <Label label={$t('untagged')} for="untagged-checkbox" />
+        <Label label={$t('untagged')} for="untagged-checkbox" class="text-sm font-normal" />
       </div>
     </form>
 

web/src/lib/components/shared-components/search-bar/search-text-section.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import RadioButton from '$lib/elements/RadioButton.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { Field, Input, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -11,73 +12,48 @@
   let { query = $bindable(), queryType = $bindable('smart') }: Props = $props();
 </script>
 
-<fieldset>
-  <legend class="immich-form-label">{$t('search_type')}</legend>
-  <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1 mb-2">
-    {#if featureFlagsManager.value.smartSearch}
-      <RadioButton name="query-type" id="context-radio" label={$t('context')} bind:group={queryType} value="smart" />
-    {/if}
-    <RadioButton
-      name="query-type"
-      id="file-name-radio"
-      label={$t('file_name_or_extension')}
-      bind:group={queryType}
-      value="metadata"
-    />
-    <RadioButton
-      name="query-type"
-      id="description-radio"
-      label={$t('description')}
-      bind:group={queryType}
-      value="description"
-    />
-    {#if featureFlagsManager.value.ocr}
-      <RadioButton name="query-type" id="ocr-radio" label={$t('ocr')} bind:group={queryType} value="ocr" />
-    {/if}
-  </div>
-</fieldset>
+<section>
+  <fieldset>
+    <Text class="mb-2" fontWeight="medium">{$t('search_type')}</Text>
+    <div class="flex flex-wrap gap-x-5 gap-y-2 my-2">
+      {#if featureFlagsManager.value.smartSearch}
+        <RadioButton name="query-type" id="context-radio" label={$t('context')} bind:group={queryType} value="smart" />
+      {/if}
+      <RadioButton
+        name="query-type"
+        id="file-name-radio"
+        label={$t('file_name_or_extension')}
+        bind:group={queryType}
+        value="metadata"
+      />
+      <RadioButton
+        name="query-type"
+        id="description-radio"
+        label={$t('description')}
+        bind:group={queryType}
+        value="description"
+      />
+      {#if featureFlagsManager.value.ocr}
+        <RadioButton name="query-type" id="ocr-radio" label={$t('ocr')} bind:group={queryType} value="ocr" />
+      {/if}
+    </div>
+  </fieldset>
 
-{#if queryType === 'smart'}
-  <label for="context-input" class="immich-form-label">{$t('search_by_context')}</label>
-  <input
-    class="immich-form-input hover:cursor-text w-full mt-1!"
-    type="text"
-    id="context-input"
-    name="context"
-    placeholder={$t('sunrise_on_the_beach')}
-    bind:value={query}
-  />
-{:else if queryType === 'metadata'}
-  <label for="file-name-input" class="immich-form-label">{$t('search_by_filename')}</label>
-  <input
-    class="immich-form-input hover:cursor-text w-full mt-1!"
-    type="text"
-    id="file-name-input"
-    name="file-name"
-    placeholder={$t('search_by_filename_example')}
-    bind:value={query}
-    aria-labelledby="file-name-label"
-  />
-{:else if queryType === 'description'}
-  <label for="description-input" class="immich-form-label">{$t('search_by_description')}</label>
-  <input
-    class="immich-form-input hover:cursor-text w-full mt-1!"
-    type="text"
-    id="description-input"
-    name="description"
-    placeholder={$t('search_by_description_example')}
-    bind:value={query}
-    aria-labelledby="description-label"
-  />
-{:else if queryType === 'ocr'}
-  <label for="ocr-input" class="immich-form-label">{$t('search_by_ocr')}</label>
-  <input
-    class="immich-form-input hover:cursor-text w-full mt-1!"
-    type="text"
-    id="ocr-input"
-    name="ocr"
-    placeholder={$t('search_by_ocr_example')}
-    bind:value={query}
-    aria-labelledby="ocr-label"
-  />
-{/if}
+  {#if queryType === 'smart'}
+    <Field label={$t('search_by_context')}>
+      <Input type="text" placeholder={$t('sunrise_on_the_beach')} bind:value={query} />
+    </Field>
+  {:else if queryType === 'metadata'}
+    <Field label={$t('search_by_filename')}>
+      <Input type="text" placeholder={$t('search_by_filename_example')} bind:value={query} />
+    </Field>
+  {:else if queryType === 'description'}
+    <Field label={$t('search_by_description')}>
+      <Input type="text" placeholder={$t('search_by_description_example')} bind:value={query} />
+    </Field>
+  {:else if queryType === 'ocr'}
+    <Field label={$t('search_by_ocr')}>
+      <Input type="text" placeholder={$t('search_by_ocr_example')} bind:value={query} />
+    </Field>
+  {/if}
+</section>

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -81,7 +81,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex place-items-center gap-1">
-    <label class="font-medium text-primary text-sm min-h-6 uppercase" for={label}>{label}</label>
+    <label class="font-medium text-primary text-sm min-h-6" for={label}>{label}</label>
     {#if required}
       <div class="text-red-400">*</div>
     {/if}

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

@@ -11,10 +11,12 @@
   import { handlePromiseError } from '$lib/utils';
   import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
   import { navigateToAsset } from '$lib/utils/asset-utils';
+  import { handleErrorAsync } from '$lib/utils/handle-error';
   import { navigate } from '$lib/utils/navigation';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto, getAssetInfo } from '@immich/sdk';
   import { onDestroy, onMount, untrack } from 'svelte';
+  import { t } from 'svelte-i18n';
 
   let { asset: viewingAsset, gridScrollTarget } = assetViewingStore;
 
@@ -38,28 +40,27 @@
     person,
   }: Props = $props();
 
-  const getNextAsset = async (currentAsset: AssetResponseDto, preload: boolean = true) => {
-    const earlierTimelineAsset = await timelineManager.getEarlierAsset(currentAsset);
-    if (earlierTimelineAsset) {
-      const asset = await assetCacheManager.getAsset({ ...authManager.params, id: earlierTimelineAsset.id });
-      if (preload) {
-        // also pre-cache an extra one, to pre-cache these assetInfos for the next nav after this one is complete
-        void getNextAsset(asset, false);
-      }
-      return asset;
-    }
+  const getAsset = (id: string) => {
+    return handleErrorAsync(
+      () => assetCacheManager.getAsset({ ...authManager.params, id }),
+      $t('error_retrieving_asset_information'),
+    );
   };
 
-  const getPreviousAsset = async (currentAsset: AssetResponseDto, preload: boolean = true) => {
-    const laterTimelineAsset = await timelineManager.getLaterAsset(currentAsset);
-    if (laterTimelineAsset) {
-      const asset = await assetCacheManager.getAsset({ ...authManager.params, id: laterTimelineAsset.id });
-      if (preload) {
-        // also pre-cache an extra one, to pre-cache these assetInfos for the next nav after this one is complete
-        void getPreviousAsset(asset, false);
-      }
-      return asset;
+  const getNextAsset = async (currentAsset: AssetResponseDto) => {
+    const earlierTimelineAsset = await timelineManager.getEarlierAsset(currentAsset);
+    if (!earlierTimelineAsset) {
+      return;
     }
+    return getAsset(earlierTimelineAsset.id);
+  };
+
+  const getPreviousAsset = async (currentAsset: AssetResponseDto) => {
+    const laterTimelineAsset = await timelineManager.getLaterAsset(currentAsset);
+    if (!laterTimelineAsset) {
+      return;
+    }
+    return getAsset(laterTimelineAsset.id);
   };
 
   let assetCursor = $state<AssetCursor>({
@@ -87,10 +88,12 @@
 
   const handleRandom = async () => {
     const randomAsset = await timelineManager.getRandomAsset();
-    if (randomAsset) {
-      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return { id: randomAsset.id };
+    if (!randomAsset) {
+      return;
     }
+
+    await navigate({ targetRoute: 'current', assetId: randomAsset.id });
+    return { id: randomAsset.id };
   };
 
   const handleClose = async (asset: { id: string }) => {
@@ -180,12 +183,14 @@
   };
   const handleUndoDelete = async (assets: TimelineAsset[]) => {
     timelineManager.upsertAssets(assets);
-    if (assets.length > 0) {
-      const restoredAsset = assets[0];
-      const asset = await getAssetInfo({ ...authManager.params, id: restoredAsset.id });
-      assetViewingStore.setAsset(asset);
-      await navigate({ targetRoute: 'current', assetId: restoredAsset.id });
+    if (assets.length === 0) {
+      return;
     }
+
+    const restoredAsset = assets[0];
+    const asset = await getAssetInfo({ ...authManager.params, id: restoredAsset.id });
+    assetViewingStore.setAsset(asset);
+    await navigate({ targetRoute: 'current', assetId: restoredAsset.id });
   };
 
   const handleUpdateOrUpload = (asset: AssetResponseDto) => {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
+  import { getAssetJobIcon, getAssetJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetJobName, runAssetJobs } from '@immich/sdk';
   import { toastManager } from '@immich/ui';
@@ -22,7 +22,7 @@
     try {
       const ids = [...getOwnedAssets()].map(({ id }) => id);
       await runAssetJobs({ assetJobsDto: { assetIds: ids, name } });
-      toastManager.success($getAssetJobMessage(name));
+      toastManager.success(getAssetJobName($t, name));
       clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_submit_job'));
@@ -32,6 +32,6 @@
 
 {#each jobs as job (job)}
   {#if isAllVideos || job !== AssetJobName.TranscodeVideo}
-    <MenuOption text={$getAssetJobName(job)} icon={getAssetJobIcon(job)} onClick={() => handleRunJob(job)} />
+    <MenuOption text={getAssetJobName($t, job)} icon={getAssetJobIcon(job)} onClick={() => handleRunJob(job)} />
   {/if}
 {/each}

web/src/lib/components/user-settings-page/device-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { handleError } from '$lib/utils/handle-error';
   import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
-  import { Button, modalManager, toastManager } from '@immich/ui';
+  import { Button, modalManager, Text, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import DeviceCard from './device-card.svelte';
 
@@ -52,17 +52,17 @@
 <section class="my-4">
   {#if currentSession}
     <div class="mb-6">
-      <h3 class="uppercase mb-2 text-xs font-medium text-primary">
+      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
         {$t('current_device')}
-      </h3>
+      </Text>
       <DeviceCard session={currentSession} />
     </div>
   {/if}
   {#if otherSessions.length > 0}
     <div class="mb-6">
-      <h3 class="uppercase mb-2 text-xs font-medium text-primary">
+      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
         {$t('other_devices')}
-      </h3>
+      </Text>
       {#each otherSessions as session, index (session.id)}
         <DeviceCard {session} onDelete={() => handleDelete(session)} />
         {#if index !== otherSessions.length - 1}
@@ -70,9 +70,11 @@
         {/if}
       {/each}
     </div>
-    <h3 class="uppercase mb-2 text-xs font-medium text-primary">
-      {$t('log_out_all_devices')}
-    </h3>
+
+    <div class="my-3">
+      <hr />
+    </div>
+
     <div class="flex justify-end">
       <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
     </div>

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -12,7 +12,7 @@
     type PartnerResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button, Icon, IconButton, modalManager } from '@immich/ui';
+  import { Button, Icon, IconButton, modalManager, Text } from '@immich/ui';
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -157,10 +157,12 @@
           <!-- I am sharing my assets with this user -->
           {#if partner.sharedByMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
-            <p class="uppercase text-xs font-medium my-4">
+            <Text class="my-4" size="small" fontWeight="medium">
               {$t('shared_with_partner', { values: { partner: partner.user.name } })}
-            </p>
-            <p class="text-md">{$t('partner_can_access', { values: { partner: partner.user.name } })}</p>
+            </Text>
+            <Text size="tiny" fontWeight="medium"
+              >{$t('partner_can_access', { values: { partner: partner.user.name } })}</Text
+            >
             <ul class="text-sm">
               <li class="flex gap-2 place-items-center py-1 mt-2">
                 <Icon icon={mdiCheck} />
@@ -176,9 +178,10 @@
           <!-- this user is sharing assets with me -->
           {#if partner.sharedWithMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
-            <p class="uppercase text-xs font-medium my-4">
+            <Text class="my-4" size="small" fontWeight="medium">
               {$t('shared_from_partner', { values: { partner: partner.user.name } })}
-            </p>
+            </Text>
+
             <SettingSwitch
               title={$t('show_in_timeline')}
               subtitle={$t('show_in_timeline_setting_description')}

web/src/lib/components/utilities-page/utilities-menu.svelte

@@ -2,7 +2,7 @@
   import AppDownloadModal from '$lib/modals/AppDownloadModal.svelte';
   import ObtainiumConfigModal from '$lib/modals/ObtainiumConfigModal.svelte';
   import { Route } from '$lib/route';
-  import { Icon, modalManager } from '@immich/ui';
+  import { Icon, modalManager, Text } from '@immich/ui';
   import {
     mdiCellphoneArrowDownVariant,
     mdiContentDuplicate,
@@ -22,7 +22,7 @@
 </script>
 
 <div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
-  <p class="uppercase text-xs font-medium p-4">{$t('organize_your_library')}</p>
+  <Text size="tiny" color="muted" fontWeight="medium" class="p-4">{$t('organize_your_library')}</Text>
 
   {#each links as link (link.href)}
     <a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
@@ -33,7 +33,8 @@
 </div>
 <br />
 <div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
-  <p class="uppercase text-xs font-medium p-4">{$t('download')}</p>
+  <Text size="tiny" color="muted" fontWeight="medium" class="p-4">{$t('download')}</Text>
+
   <button
     type="button"
     onclick={() => modalManager.show(ObtainiumConfigModal, {})}

web/src/lib/components/workflows/WorkflowSummary.svelte

@@ -113,7 +113,7 @@
         <div class="rounded-lg bg-light-100 border p-3">
           <div class="flex items-center gap-2 mb-1">
             <Icon icon={mdiFlashOutline} size="18" class="text-primary" />
-            <span class="text-[10px] font-semibold uppercase tracking-wide">{$t('trigger')}</span>
+            <Text size="tiny" fontWeight="semi-bold">{$t('trigger')}</Text>
           </div>
           <p class="text-sm truncate pl-5">{getTriggerName(trigger.type)}</p>
         </div>
@@ -128,7 +128,7 @@
           <div class="rounded-lg bg-light-100 border p-3">
             <div class="flex items-center gap-2 mb-2">
               <Icon icon={mdiFilterOutline} size="18" class="text-warning" />
-              <span class="text-[10px] font-semibold uppercase tracking-wide">{$t('filters')}</span>
+              <Text size="tiny" fontWeight="semi-bold">{$t('filters')}</Text>
             </div>
             <div class="space-y-1 pl-5">
               {#each filters as filter, index (index)}
@@ -154,7 +154,7 @@
           <div class="rounded-lg bg-light-100 border p-3">
             <div class="flex items-center gap-2 mb-2">
               <Icon icon={mdiPlayCircleOutline} size="18" class="text-success" />
-              <span class="text-[10px] font-semibold uppercase tracking-wide">{$t('actions')}</span>
+              <Text size="tiny" fontWeight="semi-bold">{$t('actions')}</Text>
             </div>
             <div class="space-y-1 pl-5">
               {#each actions as action, index (index)}

web/src/lib/elements/RadioButton.svelte

@@ -12,5 +12,5 @@
 
 <div class="flex items-center gap-2">
   <input type="radio" {name} {id} {value} class="focus-visible:ring" bind:group />
-  <label for={id}>{label}</label>
+  <label for={id} class="text-sm">{label}</label>
 </div>

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

@@ -44,6 +44,7 @@ export type Events = {
   AlbumUserDelete: [{ albumId: string; userId: string }];
 
   PersonUpdate: [PersonResponseDto];
+  PersonThumbnailReady: [{ id: string }];
 
   BackupDeleteStatus: [{ filename: string; isDeleting: boolean }];
   BackupDeleted: [{ filename: string }];

web/src/lib/modals/SearchFilterModal.svelte

@@ -37,6 +37,7 @@
   import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
   import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiTune } from '@mdi/js';
+  import type { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
 
@@ -47,8 +48,8 @@
 
   let { searchQuery, onClose }: Props = $props();
 
-  const parseOptionalDate = (dateString?: string) => (dateString ? parseUtcDate(dateString) : undefined);
-  const toStartOfDayDate = (dateString: string) => parseUtcDate(dateString)?.startOf('day').toISODate() || undefined;
+  const parseOptionalDate = (dateString?: DateTime) => (dateString ? parseUtcDate(dateString.toString()) : undefined);
+  const toStartOfDayDate = (dateString: string) => parseUtcDate(dateString)?.startOf('day') || undefined;
   const formId = generateId();
 
   // combobox and all the search components have terrible support for value | null so we use empty string instead.
@@ -187,7 +188,7 @@
 <Modal icon={mdiTune} size="giant" title={$t('search_options')} {onClose}>
   <ModalBody>
     <form id={formId} autocomplete="off" {onsubmit} {onreset}>
-      <div class="flex flex-col gap-4 pb-10" tabindex="-1">
+      <div class="flex flex-col gap-5 pb-10" tabindex="-1">
         <!-- PEOPLE -->
         <SearchPeopleSection bind:selectedPeople={filter.personIds} />
 

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

@@ -3,28 +3,36 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
 import { user as authUser, preferences } from '$lib/stores/user.store';
-import { getSharedLink, sleep } from '$lib/utils';
+import { getAssetJobName, getSharedLink, sleep } from '$lib/utils';
 import { downloadUrl } from '$lib/utils/asset-utils';
 import { openFileUploadDialog } from '$lib/utils/file-uploader';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import { asQueryString } from '$lib/utils/shared-links';
 import {
+  AssetJobName,
+  AssetTypeEnum,
   AssetVisibility,
   copyAsset,
   deleteAssets,
   getAssetInfo,
   getBaseUrl,
+  runAssetJobs,
   updateAsset,
+  type AssetJobsDto,
   type AssetResponseDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import {
   mdiAlertOutline,
+  mdiCogRefreshOutline,
+  mdiDatabaseRefreshOutline,
   mdiDownload,
   mdiDownloadBox,
+  mdiHeadSyncOutline,
   mdiHeart,
   mdiHeartOutline,
+  mdiImageRefreshOutline,
   mdiInformationOutline,
   mdiMotionPauseOutline,
   mdiMotionPlayOutline,
@@ -124,6 +132,31 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
     shortcuts: [{ key: 'i' }],
   };
 
+  const RefreshFacesJob: ActionItem = {
+    title: getAssetJobName($t, AssetJobName.RefreshFaces),
+    icon: mdiHeadSyncOutline,
+    onAction: () => handleRunAssetJob({ name: AssetJobName.RefreshFaces, assetIds: [asset.id] }),
+  };
+
+  const RefreshMetadataJob: ActionItem = {
+    title: getAssetJobName($t, AssetJobName.RefreshMetadata),
+    icon: mdiDatabaseRefreshOutline,
+    onAction: () => handleRunAssetJob({ name: AssetJobName.RefreshMetadata, assetIds: [asset.id] }),
+  };
+
+  const RegenerateThumbnailJob: ActionItem = {
+    title: getAssetJobName($t, AssetJobName.RegenerateThumbnail),
+    icon: mdiImageRefreshOutline,
+    onAction: () => handleRunAssetJob({ name: AssetJobName.RegenerateThumbnail, assetIds: [asset.id] }),
+  };
+
+  const TranscodeVideoJob: ActionItem = {
+    title: getAssetJobName($t, AssetJobName.TranscodeVideo),
+    icon: mdiCogRefreshOutline,
+    onAction: () => handleRunAssetJob({ name: AssetJobName.TranscodeVideo, assetIds: [asset.id] }),
+    $if: () => asset.type === AssetTypeEnum.Video,
+  };
+
   return {
     Share,
     Download,
@@ -135,6 +168,10 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
     Unfavorite,
     PlayMotionPhoto,
     StopMotionPhoto,
+    RefreshFacesJob,
+    RefreshMetadataJob,
+    RegenerateThumbnailJob,
+    TranscodeVideoJob,
   };
 };
 
@@ -217,3 +254,14 @@ export const handleReplaceAsset = async (oldAssetId: string) => {
 
   eventManager.emit('AssetReplace', { oldAssetId, newAssetId });
 };
+
+const handleRunAssetJob = async (dto: AssetJobsDto) => {
+  const $t = await getFormatter();
+
+  try {
+    await runAssetJobs({ assetJobsDto: dto });
+    toastManager.success(getAssetJobName($t, dto.name));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_submit_job'));
+  }
+};

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

@@ -0,0 +1,14 @@
+import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
+import { modalManager, type ActionItem } from '@immich/ui';
+import { mdiKeyboard } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getKeyboardActions = ($t: MessageFormatter) => {
+  const KeyboardShortcuts: ActionItem = {
+    title: $t('show_keyboard_shortcuts'),
+    icon: mdiKeyboard,
+    onAction: () => modalManager.show(ShortcutsModal, {}),
+  };
+
+  return { KeyboardShortcuts };
+};

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

@@ -20,7 +20,7 @@ import {
   type UpdateLibraryDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
+import { mdiInformationOutline, mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
 export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResponseDto[]) => {
@@ -45,6 +45,13 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
 };
 
 export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponseDto) => {
+  const Detail: ActionItem = {
+    icon: mdiInformationOutline,
+    type: $t('command'),
+    title: $t('details'),
+    onAction: () => goto(Route.viewLibrary(library)),
+  };
+
   const Edit: ActionItem = {
     icon: mdiPencilOutline,
     type: $t('command'),
@@ -84,7 +91,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     shortcuts: { shift: true, key: 'r' },
   };
 
-  return { Edit, Delete, AddFolder, AddExclusionPattern, Scan };
+  return { Detail, Edit, Delete, AddFolder, AddExclusionPattern, Scan };
 };
 
 export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryResponseDto, folder: string) => {

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

@@ -4,7 +4,13 @@ import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import { updatePerson, type PersonResponseDto } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiCalendarEditOutline } from '@mdi/js';
+import {
+  mdiCalendarEditOutline,
+  mdiEyeOffOutline,
+  mdiEyeOutline,
+  mdiHeartMinusOutline,
+  mdiHeartOutline,
+} from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
 export const getPersonActions = ($t: MessageFormatter, person: PersonResponseDto) => {
@@ -14,7 +20,83 @@ export const getPersonActions = ($t: MessageFormatter, person: PersonResponseDto
     onAction: () => modalManager.show(PersonEditBirthDateModal, { person }),
   };
 
-  return { SetDateOfBirth };
+  const Favorite: ActionItem = {
+    title: $t('to_favorite'),
+    icon: mdiHeartOutline,
+    $if: () => !person.isFavorite,
+    onAction: () => handleFavoritePerson(person),
+  };
+
+  const Unfavorite: ActionItem = {
+    title: $t('unfavorite'),
+    icon: mdiHeartMinusOutline,
+    $if: () => !!person.isFavorite,
+    onAction: () => handleUnfavoritePerson(person),
+  };
+
+  const HidePerson: ActionItem = {
+    title: $t('hide_person'),
+    icon: mdiEyeOffOutline,
+    $if: () => !person.isHidden,
+    onAction: () => handleHidePerson(person),
+  };
+
+  const ShowPerson: ActionItem = {
+    title: $t('unhide_person'),
+    icon: mdiEyeOutline,
+    $if: () => !!person.isHidden,
+    onAction: () => handleShowPerson(person),
+  };
+
+  return { SetDateOfBirth, Favorite, Unfavorite, HidePerson, ShowPerson };
+};
+
+const handleFavoritePerson = async (person: { id: string }) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { isFavorite: true } });
+    eventManager.emit('PersonUpdate', response);
+    toastManager.success($t('added_to_favorites'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: false } }));
+  }
+};
+
+const handleUnfavoritePerson = async (person: { id: string }) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { isFavorite: false } });
+    eventManager.emit('PersonUpdate', response);
+    toastManager.success($t('removed_from_favorites'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: false } }));
+  }
+};
+
+const handleHidePerson = async (person: { id: string }) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { isHidden: true } });
+    toastManager.success($t('changed_visibility_successfully'));
+    eventManager.emit('PersonUpdate', response);
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_hide_person'));
+  }
+};
+
+const handleShowPerson = async (person: { id: string }) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { isHidden: false } });
+    toastManager.success($t('changed_visibility_successfully'));
+    eventManager.emit('PersonUpdate', response);
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
 };
 
 export const handleUpdatePersonBirthDate = async (person: PersonResponseDto, birthDate: string) => {

web/src/lib/services/user-admin.service.ts

@@ -23,6 +23,7 @@ import {
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import {
   mdiDeleteRestore,
+  mdiInformationOutline,
   mdiLockReset,
   mdiLockSmart,
   mdiPencilOutline,
@@ -46,6 +47,12 @@ export const getUserAdminsActions = ($t: MessageFormatter) => {
 };
 
 export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminResponseDto) => {
+  const Detail: ActionItem = {
+    icon: mdiInformationOutline,
+    title: $t('details'),
+    onAction: () => goto(Route.viewUser(user)),
+  };
+
   const Update: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('edit'),
@@ -92,7 +99,7 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     onAction: () => handleResetPinCodeUserAdmin(user),
   };
 
-  return { Update, Delete, Restore, ResetPassword, ResetPinCode };
+  return { Detail, Update, Delete, Restore, ResetPassword, ResetPinCode };
 };
 
 export const handleCreateUserAdmin = async (dto: UserAdminCreateDto) => {

web/src/lib/stores/websocket.ts

@@ -76,6 +76,7 @@ websocket
   .on('on_new_release', (event) => eventManager.emit('ReleaseEvent', event))
   .on('on_session_delete', () => authManager.logout())
   .on('on_user_delete', (id) => eventManager.emit('UserAdminDeleted', { id }))
+  .on('on_person_thumbnail', (id) => eventManager.emit('PersonThumbnailReady', { id }))
   .on('on_notification', () => notificationManager.refresh())
   .on('connect_error', (e) => console.log('Websocket Connect Error', e));