feat: header context menu

Prevent OOM on reverse proxy servers

Added configuration to disable buffering for uploads.

docs/docs/administration/backup-and-restore.md

@@ -41,7 +41,7 @@ By default, Immich will keep the last 14 database dumps and create a new dump ev
 
 #### Trigger Dump
 
-You are able to trigger a database dump in the [admin job status page](http://my.immich.app/admin/jobs-status).
+You are able to trigger a database dump in the [admin job status page](http://my.immich.app/admin/queues).
 Visit the page, open the "Create job" modal from the top right, select "Create Database Dump" and click "Confirm".
 A job will run and trigger a dump, you can verify this worked correctly by checking the logs or the `backups/` folder.
 This dumps will count towards the last `X` dumps that will be kept based on your settings.

docs/docs/administration/reverse-proxy.md

@@ -21,6 +21,9 @@ server {
     # allow large file uploads
     client_max_body_size 50000M;
 
+    # disable buffering uploads to prevent OOM on reverse proxy server and make uploads twice as fast (no pause)
+    proxy_request_buffering off;
+
     # Set headers
     proxy_set_header Host              $host;
     proxy_set_header X-Real-IP         $remote_addr;

docs/docs/features/searching.md

@@ -1222,4 +1222,4 @@ Feel free to make a feature request if there's a model you want to use that we d
 [huggingface-clip]: https://huggingface.co/collections/immich-app/clip-654eaefb077425890874cd07
 [huggingface-multilingual-clip]: https://huggingface.co/collections/immich-app/multilingual-clip-654eb08c2382f591eeb8c2a7
 [smart-search-settings]: https://my.immich.app/admin/system-settings?isOpen=machine-learning+smart-search
-[job-status-page]: https://my.immich.app/admin/jobs-status
+[job-status-page]: https://my.immich.app/admin/queues

docs/docs/guides/remote-machine-learning.md

@@ -53,7 +53,7 @@ Version mismatches between both hosts may cause bugs and instability, so remembe
 
 Adding a new URL to the settings is recommended over replacing the existing URL. This is because it will allow machine learning tasks to be processed successfully when the remote server is down by falling back to the local machine learning container. If you do not want machine learning tasks to be processed locally when the remote server is not available, you can instead replace the existing URL and only provide the remote container's URL. If doing this, you can remove the `immich-machine-learning` section of the local `docker-compose.yml` file to save resources, as this service will never be used.
 
-Do note that this will mean that Smart Search and Face Detection jobs will fail to be processed when the remote instance is not available. This in turn means that tasks dependent on these features—Duplicate Detection and Facial Recognition—will not run for affected assets. If this occurs, you must manually click the _Missing_ button next to Smart Search and Face Detection in the [Job Status](http://my.immich.app/admin/jobs-status) page for the jobs to be retried.
+Do note that this will mean that Smart Search and Face Detection jobs will fail to be processed when the remote instance is not available. This in turn means that tasks dependent on these features—Duplicate Detection and Facial Recognition—will not run for affected assets. If this occurs, you must manually click the _Missing_ button next to Smart Search and Face Detection in the [Job Status](http://my.immich.app/admin/queues) page for the jobs to be retried.
 
 ## Load balancing
 

i18n/en.json

@@ -7,6 +7,7 @@
   "action_common_update": "Update",
   "actions": "Actions",
   "active": "Active",
+  "active_count": "Active: {count}",
   "activity": "Activity",
   "activity_changed": "Activity is {enabled, select, true {enabled} other {disabled}}",
   "add": "Add",
@@ -77,7 +78,6 @@
     "exclusion_pattern_description": "Exclusion patterns lets you ignore files and folders when scanning your library. This is useful if you have folders that contain files you don't want to import, such as RAW files.",
     "export_config_as_json_description": "Download the current system config as a JSON file",
     "external_libraries_page_description": "Admin external library page",
-    "external_library_management": "External Library Management",
     "face_detection": "Face detection",
     "face_detection_description": "Detect the faces in assets using machine learning. For videos, only the thumbnail is considered. \"Refresh\" (re-)processes all assets. \"Reset\" additionally clears all current face data. \"Missing\" queues assets that haven't been processed yet. Detected faces will be queued for Facial Recognition after Face Detection is complete, grouping them into existing or new people.",
     "facial_recognition_job_description": "Group detected faces into people. This step runs after Face Detection is complete. \"Reset\" (re-)clusters all faces. \"Missing\" queues faces that don't have a person assigned.",
@@ -111,10 +111,9 @@
     "job_not_concurrency_safe": "This job is not concurrency-safe.",
     "job_settings": "Job Settings",
     "job_settings_description": "Manage job concurrency",
-    "job_status": "Job Status",
     "jobs_delayed": "{jobCount, plural, other {# delayed}}",
     "jobs_failed": "{jobCount, plural, other {# failed}}",
-    "jobs_page_description": "Admin jobs page",
+    "jobs_over_time": "Jobs over time",
     "library_created": "Created library: {library}",
     "library_deleted": "Library deleted",
     "library_details": "Library details",
@@ -277,10 +276,14 @@
     "password_settings_description": "Manage password login settings",
     "paths_validated_successfully": "All paths validated successfully",
     "person_cleanup_job": "Person cleanup",
+    "queue_details": "Queue Details",
+    "queues": "Job Queues",
+    "queues_page_description": "Admin job queues page",
     "quota_size_gib": "Quota Size (GiB)",
     "refreshing_all_libraries": "Refreshing all libraries",
     "registration": "Admin Registration",
     "registration_description": "Since you are the first user on the system, you will be assigned as the Admin and are responsible for administrative tasks, and additional users will be created by you.",
+    "remove_failed_jobs": "Remove failed jobs",
     "require_password_change_on_login": "Require user to change password on first login",
     "reset_settings_to_default": "Reset settings to default",
     "reset_settings_to_recent_saved": "Reset settings to the recent saved settings",
@@ -1102,6 +1105,7 @@
   "external_network_sheet_info": "When not on the preferred Wi-Fi network, the app will connect to the server through the first of the below URLs it can reach, starting from top to bottom",
   "face_unassigned": "Unassigned",
   "failed": "Failed",
+  "failed_count": "Failed: {count}",
   "failed_to_authenticate": "Failed to authenticate",
   "failed_to_load_assets": "Failed to load assets",
   "failed_to_load_folder": "Failed to load folder",
@@ -2209,6 +2213,7 @@
   "viewer_unstack": "Un-Stack",
   "visibility_changed": "Visibility changed for {count, plural, one {# person} other {# people}}",
   "waiting": "Waiting",
+  "waiting_count": "Waiting: {count}",
   "warning": "Warning",
   "week": "Week",
   "welcome": "Welcome",

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

@@ -37,7 +37,7 @@ class ExifInfo {
 
   String get fNumber => f == null ? "" : f!.toStringAsFixed(1);
 
-  String get focalLength => mm == null ? "" : mm!.toStringAsFixed(1);
+  String get focalLength => mm == null ? "" : mm!.toStringAsFixed(3);
 
   const ExifInfo({
     this.assetId,

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

@@ -166,5 +166,6 @@ extension RemoteExifEntityDataDomainEx on RemoteExifEntityData {
     mm: focalLength?.toDouble(),
     lens: lens,
     isFlipped: ExifDtoConverter.isOrientationFlipped(orientation),
+    exposureSeconds: ExifDtoConverter.exposureTimeToSeconds(exposureTime),
   );
 }

mobile/lib/infrastructure/utils/exif.converter.dart

@@ -22,7 +22,7 @@ abstract final class ExifDtoConverter {
       f: dto.fNumber?.toDouble(),
       mm: dto.focalLength?.toDouble(),
       iso: dto.iso?.toInt(),
-      exposureSeconds: _exposureTimeToSeconds(dto.exposureTime),
+      exposureSeconds: exposureTimeToSeconds(dto.exposureTime),
     );
   }
 
@@ -36,15 +36,15 @@ abstract final class ExifDtoConverter {
     return isRotated90CW || isRotated270CW;
   }
 
-  static double? _exposureTimeToSeconds(String? s) {
-    if (s == null) {
+  static double? exposureTimeToSeconds(String? second) {
+    if (second == null) {
       return null;
     }
-    double? value = double.tryParse(s);
+    double? value = double.tryParse(second);
     if (value != null) {
       return value;
     }
-    final parts = s.split("/");
+    final parts = second.split("/");
     if (parts.length == 2) {
       final numerator = double.tryParse(parts.firstOrNull ?? "-");
       final denominator = double.tryParse(parts.lastOrNull ?? "-");

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

@@ -49,7 +49,7 @@ class MapLocationPickerPage extends HookConsumerWidget {
 
       var currentLatLng = LatLng(currentLocation.latitude, currentLocation.longitude);
       selectedLatLng.value = currentLatLng;
-      await controller.value?.animateCamera(CameraUpdate.newLatLng(currentLatLng));
+      await controller.value?.animateCamera(CameraUpdate.newLatLngZoom(currentLatLng, 12));
     }
 
     return MapThemeOverride(
@@ -66,7 +66,10 @@ class MapLocationPickerPage extends HookConsumerWidget {
                 borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)),
               ),
               child: MapLibreMap(
-                initialCameraPosition: CameraPosition(target: initialLatLng, zoom: 12),
+                initialCameraPosition: CameraPosition(
+                  target: initialLatLng,
+                  zoom: (initialLatLng.latitude == 0 && initialLatLng.longitude == 0) ? 1 : 12,
+                ),
                 styleString: style,
                 onMapCreated: (mapController) => controller.value = mapController,
                 onStyleLoadedCallback: onStyleLoaded,

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

@@ -251,8 +251,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
                 color: context.textTheme.labelLarge?.color,
               ),
               subtitle: _getFileInfo(asset, exifInfo),
-              subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-                color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+              subtitleStyle: context.textTheme.labelMedium?.copyWith(
+                color: context.textTheme.labelMedium?.color?.withAlpha(200),
               ),
             );
           },
@@ -268,8 +268,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
             color: context.textTheme.labelLarge?.color,
           ),
           subtitle: _getFileInfo(asset, exifInfo),
-          subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-            color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+          subtitleStyle: context.textTheme.labelMedium?.copyWith(
+            color: context.textTheme.labelMedium?.color?.withAlpha(200),
           ),
         );
       }
@@ -280,7 +280,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         // Asset Date and Time
         SheetTile(
           title: _getDateTime(context, asset, exifInfo),
-          titleStyle: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
+          titleStyle: context.textTheme.labelLarge,
           trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
           onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,
         ),
@@ -289,7 +289,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         const SheetLocationDetails(),
         // Details header
         SheetTile(
-          title: 'exif_bottom_sheet_details'.t(context: context),
+          title: 'details'.t(context: context).toUpperCase(),
           titleStyle: context.textTheme.labelMedium?.copyWith(
             color: context.textTheme.labelMedium?.color?.withAlpha(200),
             fontWeight: FontWeight.w600,
@@ -298,29 +298,33 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         // File info
         buildFileInfoTile(),
         // Camera info
-        if (cameraTitle != null)
+        if (cameraTitle != null) ...[
+          const SizedBox(height: 16),
           SheetTile(
             title: cameraTitle,
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_alt_outlined, size: 24, color: context.textTheme.labelLarge?.color),
             subtitle: _getCameraInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-              color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+            subtitleStyle: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(200),
             ),
           ),
+        ],
         // Lens info
-        if (lensTitle != null)
+        if (lensTitle != null) ...[
+          const SizedBox(height: 16),
           SheetTile(
             title: lensTitle,
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
             subtitle: _getLensInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-              color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+            subtitleStyle: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(200),
             ),
           ),
+        ],
         // Appears in (Albums)
-        _buildAppearsInList(ref, context),
+        Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
         // padding at the bottom to avoid cut-off
         const SizedBox(height: 100),
       ],

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

@@ -78,7 +78,7 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           SheetTile(
-            title: 'exif_bottom_sheet_location'.t(context: context),
+            title: 'location'.t(context: context).toUpperCase(),
             titleStyle: context.textTheme.labelMedium?.copyWith(
               color: context.textTheme.labelMedium?.color?.withAlpha(200),
               fontWeight: FontWeight.w600,
@@ -102,7 +102,7 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
                   Text(
                     coordinates,
                     style: context.textTheme.labelMedium?.copyWith(
-                      color: context.textTheme.labelMedium?.color?.withAlpha(150),
+                      color: context.textTheme.labelMedium?.color?.withAlpha(200),
                     ),
                   ),
                 ],

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

@@ -46,7 +46,7 @@ class SheetTile extends ConsumerWidget {
     } else {
       titleWidget = Container(
         width: double.infinity,
-        padding: const EdgeInsets.only(left: 15),
+        padding: const EdgeInsets.only(left: 15, right: 15),
         child: Text(title, style: titleStyle),
       );
     }

mobile/lib/providers/app_life_cycle.provider.dart

@@ -4,6 +4,7 @@ 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/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/models/backup/backup_state.model.dart';
 import 'package:immich_mobile/providers/album/album.provider.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
@@ -150,7 +151,7 @@ class AppLifeCycleNotifier extends StateNotifier<AppLifeCycleEnum> {
     try {
       bool syncSuccess = false;
       await Future.wait([
-        _safeRun(backgroundManager.syncLocal(), "syncLocal"),
+        _safeRun(backgroundManager.syncLocal(full: CurrentPlatform.isAndroid ? true : false), "syncLocal"),
         _safeRun(backgroundManager.syncRemote().then((success) => syncSuccess = success), "syncRemote"),
       ]);
       if (syncSuccess) {

pnpm-lock.yaml

@@ -717,8 +717,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.49.2
-        version: 0.49.3(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)
+        specifier: ^0.50.0
+        version: 0.50.0(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -818,6 +818,9 @@ importers:
       thumbhash:
         specifier: ^0.1.1
         version: 0.1.1
+      uplot:
+        specifier: ^1.6.32
+        version: 1.6.32
     devDependencies:
       '@eslint/js':
         specifier: ^9.36.0
@@ -2986,8 +2989,8 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  '@immich/ui@0.49.3':
-    resolution: {integrity: sha512-joqT72Y6gmGK6z25Suzr2VhYANrLo43g20T4UHmbQenz/z/Ax6sl1Ao9SjIOwEkKMm9N3Txoh7WOOzmHVl04OA==}
+  '@immich/ui@0.50.0':
+    resolution: {integrity: sha512-7AW9SRZTAgal8xlkUAxm7o4+pSG7HcKb+Bh9JpWLaDRRdGyPCZMmsNa9CjZglOQ7wkAD07tQ9u4+zezBLe0dlQ==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -11276,6 +11279,9 @@ packages:
     resolution: {integrity: sha512-EDxhTEVPZZRLWYcJ4ZXjGFN0oP7qYvbXWzEgRm/Yql4dHX5wDbvh89YHP6PK1lzZJYrMtXUuZZz8XGK+U6U1og==}
     engines: {node: '>=14.16'}
 
+  uplot@1.6.32:
+    resolution: {integrity: sha512-KIMVnG68zvu5XXUbC4LQEPnhwOxBuLyW1AHtpm6IKTXImkbLgkMy+jabjLgSLMasNuGGzQm/ep3tOkyTxpiQIw==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -14694,7 +14700,7 @@ snapshots:
     dependencies:
       svelte: 5.45.2
 
-  '@immich/ui@0.49.3(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)':
+  '@immich/ui@0.50.0(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)':
     dependencies:
       '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.45.2)
       '@internationalized/date': 3.10.0
@@ -24536,6 +24542,8 @@ snapshots:
       semver-diff: 4.0.0
       xdg-basedir: 5.1.0
 
+  uplot@1.6.32: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1

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

@@ -369,6 +369,7 @@ select
   "asset"."livePhotoVideoId",
   "asset"."encodedVideoPath",
   "asset"."originalPath",
+  "asset"."isOffline",
   to_json("asset_exif") as "exifInfo",
   (
     select

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

@@ -232,6 +232,7 @@ export class AssetJobRepository {
         'asset.livePhotoVideoId',
         'asset.encodedVideoPath',
         'asset.originalPath',
+        'asset.isOffline',
       ])
       .$call(withExif)
       .select(withFacesAndPeople)

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

@@ -585,8 +585,6 @@ describe(AssetService.name, () => {
                 '/uploads/user-id/webp/path.ext',
                 '/uploads/user-id/thumbs/path.jpg',
                 '/uploads/user-id/fullsize/path.webp',
-                assetWithFace.encodedVideoPath, // this value is null
-                undefined, // no sidecar path
                 assetWithFace.originalPath,
               ],
             },
@@ -648,8 +646,6 @@ describe(AssetService.name, () => {
                 '/uploads/user-id/webp/path.ext',
                 '/uploads/user-id/thumbs/path.jpg',
                 '/uploads/user-id/fullsize/path.webp',
-                undefined,
-                undefined,
                 'fake_path/asset_1.jpeg',
               ],
             },
@@ -676,8 +672,6 @@ describe(AssetService.name, () => {
                 '/uploads/user-id/webp/path.ext',
                 '/uploads/user-id/thumbs/path.jpg',
                 '/uploads/user-id/fullsize/path.webp',
-                undefined,
-                undefined,
                 'fake_path/asset_1.jpeg',
               ],
             },

server/src/services/asset.service.ts

@@ -363,11 +363,11 @@ export class AssetService extends BaseService {
     const { fullsizeFile, previewFile, thumbnailFile, sidecarFile } = getAssetFiles(asset.files ?? []);
     const files = [thumbnailFile?.path, previewFile?.path, fullsizeFile?.path, asset.encodedVideoPath];
 
-    if (deleteOnDisk) {
+    if (deleteOnDisk && !asset.isOffline) {
       files.push(sidecarFile?.path, asset.originalPath);
     }
 
-    await this.jobRepository.queue({ name: JobName.FileDelete, data: { files } });
+    await this.jobRepository.queue({ name: JobName.FileDelete, data: { files: files.filter(Boolean) } });
 
     return JobStatus.Success;
   }

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

@@ -2,13 +2,16 @@ import { Kysely } from 'kysely';
 import { AssetFileType, JobName, SharedLinkType } from 'src/enum';
 import { AccessRepository } from 'src/repositories/access.repository';
 import { AlbumRepository } from 'src/repositories/album.repository';
+import { AssetJobRepository } from 'src/repositories/asset-job.repository';
 import { AssetRepository } from 'src/repositories/asset.repository';
+import { EventRepository } from 'src/repositories/event.repository';
 import { JobRepository } from 'src/repositories/job.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 import { SharedLinkAssetRepository } from 'src/repositories/shared-link-asset.repository';
 import { SharedLinkRepository } from 'src/repositories/shared-link.repository';
 import { StackRepository } from 'src/repositories/stack.repository';
 import { StorageRepository } from 'src/repositories/storage.repository';
+import { UserRepository } from 'src/repositories/user.repository';
 import { DB } from 'src/schema';
 import { AssetService } from 'src/services/asset.service';
 import { newMediumService } from 'test/medium.factory';
@@ -20,8 +23,16 @@ let defaultDatabase: Kysely<DB>;
 const setup = (db?: Kysely<DB>) => {
   return newMediumService(AssetService, {
     database: db || defaultDatabase,
-    real: [AssetRepository, AlbumRepository, AccessRepository, SharedLinkAssetRepository, StackRepository],
-    mock: [LoggingRepository, JobRepository, StorageRepository],
+    real: [
+      AssetRepository,
+      AssetJobRepository,
+      AlbumRepository,
+      AccessRepository,
+      SharedLinkAssetRepository,
+      StackRepository,
+      UserRepository,
+    ],
+    mock: [EventRepository, LoggingRepository, JobRepository, StorageRepository],
   });
 };
 
@@ -210,4 +221,51 @@ describe(AssetService.name, () => {
       });
     });
   });
+
+  describe('delete', () => {
+    it('should delete asset', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      const thumbnailPath = '/path/to/thumbnail.jpg';
+      const previewPath = '/path/to/preview.jpg';
+      const sidecarPath = '/path/to/sidecar.xmp';
+      await Promise.all([
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Thumbnail, path: thumbnailPath }),
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Preview, path: previewPath }),
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Sidecar, path: sidecarPath }),
+      ]);
+
+      await sut.handleAssetDeletion({ id: asset.id, deleteOnDisk: true });
+
+      expect(ctx.getMock(JobRepository).queue).toHaveBeenCalledWith({
+        name: JobName.FileDelete,
+        data: { files: [thumbnailPath, previewPath, sidecarPath, asset.originalPath] },
+      });
+    });
+
+    it('should not delete offline assets', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id, isOffline: true });
+      const thumbnailPath = '/path/to/thumbnail.jpg';
+      const previewPath = '/path/to/preview.jpg';
+      await Promise.all([
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Thumbnail, path: thumbnailPath }),
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Preview, path: previewPath }),
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Sidecar, path: `/path/to/sidecar.xmp` }),
+      ]);
+
+      await sut.handleAssetDeletion({ id: asset.id, deleteOnDisk: true });
+
+      expect(ctx.getMock(JobRepository).queue).toHaveBeenCalledWith({
+        name: JobName.FileDelete,
+        data: { files: [thumbnailPath, previewPath] },
+      });
+    });
+  });
 });

web/package.json

@@ -28,7 +28,7 @@
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.49.2",
+    "@immich/ui": "^0.50.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",
@@ -61,7 +61,8 @@
     "svelte-maplibre": "^1.2.5",
     "svelte-persisted-store": "^0.12.0",
     "tabbable": "^6.2.0",
-    "thumbhash": "^0.1.1"
+    "thumbhash": "^0.1.1",
+    "uplot": "^1.6.32"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

web/src/lib/components/HeaderActionButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HeaderButtonActionItem } from '$lib/types';
+  import { Button } from '@immich/ui';
+
+  type Props = {
+    action: HeaderButtonActionItem;
+  };
+
+  const { action }: Props = $props();
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
+</script>
+
+{#if action.$if?.() ?? true}
+  <Button
+    variant="ghost"
+    size="small"
+    {color}
+    leadingIcon={icon}
+    onclick={() => onAction(action)}
+    title={action.data?.title}
+  >
+    {title}
+  </Button>
+{/if}

web/src/lib/components/HeaderButton.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { type ActionItem, Button, Text } from '@immich/ui';
-
-  type Props = {
-    action: ActionItem;
-    title?: string;
-  };
-
-  const { action, title: titleAttr }: Props = $props();
-  const { title, icon, color = 'secondary', onAction } = $derived(action);
-</script>
-
-{#if action.$if?.() ?? true}
-  <Button variant="ghost" size="small" {color} leadingIcon={icon} onclick={() => onAction(action)} title={titleAttr}>
-    <Text class="hidden md:block">{title}</Text>
-  </Button>
-{/if}

web/src/lib/components/QueueCard.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+  import QueueCardBadge from '$lib/components/QueueCardBadge.svelte';
+  import QueueCardButton from '$lib/components/QueueCardButton.svelte';
   import Badge from '$lib/elements/Badge.svelte';
+  import { asQueueItem, getQueueDetailUrl } from '$lib/services/queue.service';
   import { locale } from '$lib/stores/preferences.store';
-  import { QueueCommand, type QueueCommandDto, type QueueStatisticsDto, type QueueStatusLegacyDto } from '@immich/sdk';
-  import { Icon, IconButton } from '@immich/ui';
+  import { QueueCommand, type QueueCommandDto, type QueueResponseDto } from '@immich/sdk';
+  import { Icon, IconButton, Link } from '@immich/ui';
   import {
     mdiAlertCircle,
     mdiAllInclusive,
+    mdiChartLine,
     mdiClose,
     mdiFastForward,
     mdiImageRefreshOutline,
@@ -15,39 +19,23 @@
   } from '@mdi/js';
   import { type Component } from 'svelte';
   import { t } from 'svelte-i18n';
-  import JobTileButton from './JobTileButton.svelte';
-  import JobTileStatus from './JobTileStatus.svelte';
 
   interface Props {
-    title: string;
-    subtitle: string | undefined;
-    description: Component | undefined;
-    statistics: QueueStatisticsDto;
-    queueStatus: QueueStatusLegacyDto;
-    icon: string;
+    queue: QueueResponseDto;
+    description?: Component;
     disabled?: boolean;
-    allText: string | undefined;
-    refreshText: string | undefined;
+    allText?: string;
+    refreshText?: string;
     missingText: string;
     onCommand: (command: QueueCommandDto) => void;
   }
 
-  let {
-    title,
-    subtitle,
-    description,
-    statistics,
-    queueStatus,
-    icon,
-    disabled = false,
-    allText,
-    refreshText,
-    missingText,
-    onCommand,
-  }: Props = $props();
+  let { queue, description, disabled = false, allText, refreshText, missingText, onCommand }: Props = $props();
 
+  const { icon, title, subtitle } = $derived(asQueueItem($t, queue));
+  const { statistics } = $derived(queue);
   let waitingCount = $derived(statistics.waiting + statistics.paused + statistics.delayed);
-  let isIdle = $derived(!queueStatus.isActive && !queueStatus.isPaused);
+  let isIdle = $derived(statistics.active + statistics.waiting === 0 && !queue.isPaused);
   let multipleButtons = $derived(allText || refreshText);
 
   const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pe-4 ps-6';
@@ -55,17 +43,25 @@
 
 <div class="flex flex-col overflow-hidden rounded-2xl bg-gray-100 dark:bg-immich-dark-gray sm:flex-row sm:rounded-9">
   <div class="flex w-full flex-col">
-    {#if queueStatus.isPaused}
-      <JobTileStatus color="warning">{$t('paused')}</JobTileStatus>
-    {:else if queueStatus.isActive}
-      <JobTileStatus color="success">{$t('active')}</JobTileStatus>
+    {#if queue.isPaused}
+      <QueueCardBadge color="warning">{$t('paused')}</QueueCardBadge>
+    {:else if statistics.active > 0}
+      <QueueCardBadge color="success">{$t('active')}</QueueCardBadge>
     {/if}
     <div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
-      <div class="flex items-center gap-4 text-xl font-semibold text-primary">
-        <span class="flex items-center gap-2">
+      <div class="flex items-center gap-2 text-xl font-semibold text-primary">
+        <Link class="flex items-center gap-2 hover:underline" href={getQueueDetailUrl(queue)} underline={false}>
           <Icon {icon} size="1.25em" class="hidden shrink-0 sm:block" />
           <span class="uppercase">{title}</span>
-        </span>
+        </Link>
+        <IconButton
+          color="primary"
+          icon={mdiChartLine}
+          aria-label={$t('view_details')}
+          size="small"
+          variant="ghost"
+          href={getQueueDetailUrl(queue)}
+        />
         <div class="flex gap-2">
           {#if statistics.failed > 0}
             <Badge>
@@ -128,62 +124,62 @@
   </div>
   <div class="flex w-full flex-row overflow-hidden sm:w-32 sm:flex-col">
     {#if disabled}
-      <JobTileButton
+      <QueueCardButton
         disabled={true}
         color="light-gray"
         onClick={() => onCommand({ command: QueueCommand.Start, force: false })}
       >
         <Icon icon={mdiAlertCircle} size="36" />
         <span class="uppercase">{$t('disabled')}</span>
-      </JobTileButton>
+      </QueueCardButton>
     {/if}
 
     {#if !disabled && !isIdle}
       {#if waitingCount > 0}
-        <JobTileButton color="gray" onClick={() => onCommand({ command: QueueCommand.Empty, force: false })}>
+        <QueueCardButton color="gray" onClick={() => onCommand({ command: QueueCommand.Empty, force: false })}>
           <Icon icon={mdiClose} size="24" />
           <span class="uppercase">{$t('clear')}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {/if}
-      {#if queueStatus.isPaused}
+      {#if queue.isPaused}
         {@const size = waitingCount > 0 ? '24' : '48'}
-        <JobTileButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Resume, force: false })}>
+        <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>
-        </JobTileButton>
+        </QueueCardButton>
       {:else}
-        <JobTileButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Pause, force: false })}>
+        <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Pause, force: false })}>
           <Icon icon={mdiPause} size="24" />
           <span class="uppercase">{$t('pause')}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {/if}
     {/if}
 
     {#if !disabled && multipleButtons && isIdle}
       {#if allText}
-        <JobTileButton color="dark-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: true })}>
+        <QueueCardButton color="dark-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: true })}>
           <Icon icon={mdiAllInclusive} size="24" />
           <span class="uppercase">{allText}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {/if}
       {#if refreshText}
-        <JobTileButton color="gray" onClick={() => onCommand({ command: QueueCommand.Start, force: undefined })}>
+        <QueueCardButton color="gray" onClick={() => onCommand({ command: QueueCommand.Start, force: undefined })}>
           <Icon icon={mdiImageRefreshOutline} size="24" />
           <span class="uppercase">{refreshText}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {/if}
-      <JobTileButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
+      <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
         <Icon icon={mdiSelectionSearch} size="24" />
         <span class="uppercase">{missingText}</span>
-      </JobTileButton>
+      </QueueCardButton>
     {/if}
 
     {#if !disabled && !multipleButtons && isIdle}
-      <JobTileButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
+      <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
         <Icon icon={mdiPlay} size="48" />
         <span class="uppercase">{missingText}</span>
-      </JobTileButton>
+      </QueueCardButton>
     {/if}
   </div>
 </div>

web/src/lib/components/QueueGraph.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import type { QueueSnapshot } from '$lib/types';
+  import type { QueueResponseDto } from '@immich/sdk';
+  import { LoadingSpinner, Theme, theme } from '@immich/ui';
+  import { DateTime } from 'luxon';
+  import { onMount } from 'svelte';
+  import uPlot, { type AlignedData, type Axis } from 'uplot';
+  import 'uplot/dist/uPlot.min.css';
+
+  type Props = {
+    queue: QueueResponseDto;
+    class?: string;
+  };
+
+  const { queue, class: className = '' }: Props = $props();
+
+  type Data = number | null;
+  type NormalizedData = [
+    Data[], // timestamps
+    Data[], // failed counts
+    Data[], // active counts
+    Data[], // waiting counts
+  ];
+
+  const normalizeData = (snapshots: QueueSnapshot[]) => {
+    const items: NormalizedData = [[], [], [], []];
+
+    for (const { timestamp, snapshot } of snapshots) {
+      items[0].push(timestamp);
+
+      const statistics = (snapshot || []).find(({ name }) => name === queue.name)?.statistics;
+
+      if (statistics) {
+        items[1].push(statistics.failed);
+        items[2].push(statistics.active);
+        items[3].push(statistics.waiting + statistics.paused);
+      } else {
+        items[0].push(timestamp);
+        items[1].push(null);
+        items[2].push(null);
+        items[3].push(null);
+      }
+    }
+
+    items[0].push(Date.now() + 5000);
+    items[1].push(items[1].at(-1) ?? 0);
+    items[2].push(items[2].at(-1) ?? 0);
+    items[3].push(items[3].at(-1) ?? 0);
+
+    return items;
+  };
+
+  const data = $derived(normalizeData(queueManager.snapshots));
+
+  let chartElement: HTMLDivElement | undefined = $state();
+  let isDark = $derived(theme.value === Theme.Dark);
+  let plot: uPlot;
+
+  const axisOptions: Axis = {
+    stroke: () => (isDark ? '#ccc' : 'black'),
+    ticks: {
+      show: true,
+      stroke: () => (isDark ? '#444' : '#ddd'),
+    },
+    grid: {
+      show: true,
+      stroke: () => (isDark ? '#444' : '#ddd'),
+    },
+  };
+
+  const seriesOptions: uPlot.Series = {
+    spanGaps: false,
+    points: {
+      show: false,
+    },
+    width: 2,
+  };
+
+  const options: uPlot.Options = {
+    legend: {
+      show: false,
+    },
+    cursor: {
+      show: false,
+      lock: true,
+      drag: {
+        setScale: false,
+      },
+    },
+    width: 200,
+    height: 200,
+    ms: 1,
+    pxAlign: true,
+    scales: {
+      y: {
+        distr: 1,
+      },
+    },
+    series: [
+      {},
+      {
+        stroke: '#d94a4a',
+        ...seriesOptions,
+      },
+      {
+        stroke: '#4250af',
+        ...seriesOptions,
+      },
+      {
+        stroke: '#1075db',
+        ...seriesOptions,
+      },
+    ],
+
+    axes: [
+      {
+        ...axisOptions,
+        values: (plot, values) => {
+          return values.map((value) => {
+            if (!value) {
+              return '';
+            }
+            return DateTime.fromMillis(value).toFormat('hh:mm:ss');
+          });
+        },
+      },
+      axisOptions,
+    ],
+  };
+
+  const onThemeChange = () => plot?.redraw(false);
+
+  $effect(() => theme.value && onThemeChange());
+
+  onMount(() => {
+    plot = new uPlot(options, data as AlignedData, chartElement);
+  });
+
+  const update = () => {
+    if (plot && chartElement && data[0].length > 0) {
+      const now = Date.now();
+      const scale = { min: now - chartElement!.clientWidth * 100, max: now };
+
+      plot.setData(data as AlignedData, false);
+      plot.setScale('x', scale);
+      plot.setSize({ width: chartElement.clientWidth, height: chartElement.clientHeight });
+    }
+
+    requestAnimationFrame(update);
+  };
+
+  requestAnimationFrame(update);
+</script>
+
+<div class="w-full {className}" bind:this={chartElement}>
+  {#if data[0].length === 0}
+    <LoadingSpinner size="giant" />
+  {/if}
+</div>

web/src/lib/components/QueuePanel.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import QueueCard from '$lib/components/QueueCard.svelte';
+  import QueueStorageMigrationDescription from '$lib/components/QueueStorageMigrationDescription.svelte';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import { asQueueItem } from '$lib/services/queue.service';
+  import { handleError } from '$lib/utils/handle-error';
+  import {
+    QueueCommand,
+    type QueueCommandDto,
+    QueueName,
+    type QueueResponseDto,
+    runQueueCommandLegacy,
+  } from '@immich/sdk';
+  import { modalManager, toastManager } from '@immich/ui';
+  import type { Component } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    queues: QueueResponseDto[];
+  };
+
+  let { queues }: Props = $props();
+  const featureFlags = featureFlagsManager.value;
+
+  type QueueDetails = {
+    description?: Component;
+    allText?: string;
+    refreshText?: string;
+    missingText: string;
+    disabled?: boolean;
+    handleCommand?: (jobId: QueueName, jobCommand: QueueCommandDto) => Promise<void>;
+  };
+
+  const queueDetails: Partial<Record<QueueName, QueueDetails>> = {
+    [QueueName.ThumbnailGeneration]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.MetadataExtraction]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.Library]: {
+      missingText: $t('rescan'),
+    },
+    [QueueName.Sidecar]: {
+      allText: $t('sync'),
+      missingText: $t('discover'),
+      disabled: !featureFlags.sidecar,
+    },
+    [QueueName.SmartSearch]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.smartSearch,
+    },
+    [QueueName.DuplicateDetection]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.duplicateDetection,
+    },
+    [QueueName.FaceDetection]: {
+      allText: $t('reset'),
+      refreshText: $t('refresh'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.facialRecognition,
+    },
+    [QueueName.FacialRecognition]: {
+      allText: $t('reset'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.facialRecognition,
+    },
+    [QueueName.Ocr]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.ocr,
+    },
+    [QueueName.VideoConversion]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.StorageTemplateMigration]: {
+      missingText: $t('start'),
+      description: QueueStorageMigrationDescription,
+    },
+    [QueueName.Migration]: {
+      missingText: $t('start'),
+    },
+  };
+
+  let queueList = Object.entries(queueDetails) as [QueueName, QueueDetails][];
+
+  const handleCommand = async (name: QueueName, dto: QueueCommandDto) => {
+    const item = asQueueItem($t, { name });
+
+    switch (name) {
+      case QueueName.FaceDetection:
+      case QueueName.FacialRecognition: {
+        if (dto.force) {
+          const confirmed = await modalManager.showDialog({ prompt: $t('admin.confirm_reprocess_all_faces') });
+          if (!confirmed) {
+            return;
+          }
+          break;
+        }
+      }
+    }
+
+    try {
+      await runQueueCommandLegacy({ name, queueCommandDto: dto });
+      await queueManager.refresh();
+
+      switch (dto.command) {
+        case QueueCommand.Empty: {
+          toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
+          break;
+        }
+      }
+    } catch (error) {
+      handleError(error, $t('admin.failed_job_command', { values: { command: dto.command, job: item.title } }));
+    }
+  };
+</script>
+
+<div class="flex flex-col gap-7 mt-10">
+  {#each queueList as [queueName, props] (queueName)}
+    {@const queue = queues.find(({ name }) => name === queueName)}
+    {#if queue}
+      <QueueCard {queue} onCommand={(command) => handleCommand(queueName, command)} {...props} />
+    {/if}
+  {/each}
+</div>

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

@@ -254,7 +254,7 @@
                       values={{ job: $t('admin.storage_template_migration_job') }}
                     >
                       {#snippet children({ message })}
-                        <a href={resolve(AppRoute.ADMIN_JOBS)} class="text-primary">
+                        <a href={resolve(AppRoute.ADMIN_QUEUES)} class="text-primary">
                           {message}
                         </a>
                       {/snippet}

web/src/lib/components/jobs/JobsPanel.svelte

@@ -1,197 +0,0 @@
-<script lang="ts">
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { getQueueName } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import {
-    QueueCommand,
-    type QueueCommandDto,
-    QueueName,
-    type QueuesResponseLegacyDto,
-    runQueueCommandLegacy,
-  } from '@immich/sdk';
-  import { modalManager, toastManager } from '@immich/ui';
-  import {
-    mdiContentDuplicate,
-    mdiFaceRecognition,
-    mdiFileJpgBox,
-    mdiFileXmlBox,
-    mdiFolderMove,
-    mdiImageSearch,
-    mdiLibraryShelves,
-    mdiOcr,
-    mdiTable,
-    mdiTagFaces,
-    mdiVideo,
-  } from '@mdi/js';
-  import type { Component } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import JobTile from './JobTile.svelte';
-  import StorageMigrationDescription from './StorageMigrationDescription.svelte';
-
-  interface Props {
-    jobs: QueuesResponseLegacyDto;
-  }
-
-  let { jobs = $bindable() }: Props = $props();
-  const featureFlags = featureFlagsManager.value;
-
-  type JobDetails = {
-    title: string;
-    subtitle?: string;
-    description?: Component;
-    allText?: string;
-    refreshText?: string;
-    missingText: string;
-    disabled?: boolean;
-    icon: string;
-    handleCommand?: (jobId: QueueName, jobCommand: QueueCommandDto) => Promise<void>;
-  };
-
-  const handleConfirmCommand = async (jobId: QueueName, dto: QueueCommandDto) => {
-    if (dto.force) {
-      const isConfirmed = await modalManager.showDialog({
-        prompt: $t('admin.confirm_reprocess_all_faces'),
-      });
-
-      if (isConfirmed) {
-        await handleCommand(jobId, { command: QueueCommand.Start, force: true });
-        return;
-      }
-
-      return;
-    }
-
-    await handleCommand(jobId, dto);
-  };
-
-  let jobDetails: Partial<Record<QueueName, JobDetails>> = {
-    [QueueName.ThumbnailGeneration]: {
-      icon: mdiFileJpgBox,
-      title: $getQueueName(QueueName.ThumbnailGeneration),
-      subtitle: $t('admin.thumbnail_generation_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-    },
-    [QueueName.MetadataExtraction]: {
-      icon: mdiTable,
-      title: $getQueueName(QueueName.MetadataExtraction),
-      subtitle: $t('admin.metadata_extraction_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-    },
-    [QueueName.Library]: {
-      icon: mdiLibraryShelves,
-      title: $getQueueName(QueueName.Library),
-      subtitle: $t('admin.library_tasks_description'),
-      missingText: $t('rescan'),
-    },
-    [QueueName.Sidecar]: {
-      title: $getQueueName(QueueName.Sidecar),
-      icon: mdiFileXmlBox,
-      subtitle: $t('admin.sidecar_job_description'),
-      allText: $t('sync'),
-      missingText: $t('discover'),
-      disabled: !featureFlags.sidecar,
-    },
-    [QueueName.SmartSearch]: {
-      icon: mdiImageSearch,
-      title: $getQueueName(QueueName.SmartSearch),
-      subtitle: $t('admin.smart_search_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-      disabled: !featureFlags.smartSearch,
-    },
-    [QueueName.DuplicateDetection]: {
-      icon: mdiContentDuplicate,
-      title: $getQueueName(QueueName.DuplicateDetection),
-      subtitle: $t('admin.duplicate_detection_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-      disabled: !featureFlags.duplicateDetection,
-    },
-    [QueueName.FaceDetection]: {
-      icon: mdiFaceRecognition,
-      title: $getQueueName(QueueName.FaceDetection),
-      subtitle: $t('admin.face_detection_description'),
-      allText: $t('reset'),
-      refreshText: $t('refresh'),
-      missingText: $t('missing'),
-      handleCommand: handleConfirmCommand,
-      disabled: !featureFlags.facialRecognition,
-    },
-    [QueueName.FacialRecognition]: {
-      icon: mdiTagFaces,
-      title: $getQueueName(QueueName.FacialRecognition),
-      subtitle: $t('admin.facial_recognition_job_description'),
-      allText: $t('reset'),
-      missingText: $t('missing'),
-      handleCommand: handleConfirmCommand,
-      disabled: !featureFlags.facialRecognition,
-    },
-    [QueueName.Ocr]: {
-      icon: mdiOcr,
-      title: $getQueueName(QueueName.Ocr),
-      subtitle: $t('admin.ocr_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-      disabled: !featureFlags.ocr,
-    },
-    [QueueName.VideoConversion]: {
-      icon: mdiVideo,
-      title: $getQueueName(QueueName.VideoConversion),
-      subtitle: $t('admin.video_conversion_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-    },
-    [QueueName.StorageTemplateMigration]: {
-      icon: mdiFolderMove,
-      title: $getQueueName(QueueName.StorageTemplateMigration),
-      missingText: $t('start'),
-      description: StorageMigrationDescription,
-    },
-    [QueueName.Migration]: {
-      icon: mdiFolderMove,
-      title: $getQueueName(QueueName.Migration),
-      subtitle: $t('admin.migration_job_description'),
-      missingText: $t('start'),
-    },
-  };
-
-  let jobList = Object.entries(jobDetails) as [QueueName, JobDetails][];
-
-  async function handleCommand(name: QueueName, dto: QueueCommandDto) {
-    const title = jobDetails[name]?.title;
-
-    try {
-      jobs[name] = await runQueueCommandLegacy({ name, queueCommandDto: dto });
-
-      switch (dto.command) {
-        case QueueCommand.Empty: {
-          toastManager.success($t('admin.cleared_jobs', { values: { job: title } }));
-          break;
-        }
-      }
-    } catch (error) {
-      handleError(error, $t('admin.failed_job_command', { values: { command: dto.command, job: title } }));
-    }
-  }
-</script>
-
-<div class="flex flex-col gap-7">
-  {#each jobList as [jobName, { title, subtitle, description, disabled, allText, refreshText, missingText, icon, handleCommand: handleCommandOverride }] (jobName)}
-    {@const { jobCounts: statistics, queueStatus } = jobs[jobName]}
-    <JobTile
-      {icon}
-      {title}
-      {disabled}
-      {subtitle}
-      {description}
-      {allText}
-      {refreshText}
-      {missingText}
-      {statistics}
-      {queueStatus}
-      onCommand={(command) => (handleCommandOverride || handleCommand)(jobName, command)}
-    />
-  {/each}
-</div>

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

@@ -1,19 +1,33 @@
 <script lang="ts">
   import PageContent from '$lib/components/layouts/PageContent.svelte';
-  import TitleLayout from '$lib/components/layouts/TitleLayout.svelte';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import AdminSidebar from '$lib/sidebars/AdminSidebar.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable, type BreadcrumbItem } from '@immich/ui';
+  import type { HeaderButtonActionItem } from '$lib/types';
+  import {
+    AppShell,
+    AppShellHeader,
+    AppShellSidebar,
+    Breadcrumbs,
+    Button,
+    ContextMenuButton,
+    HStack,
+    MenuItemType,
+    Scrollable,
+    isMenuItemType,
+    type BreadcrumbItem,
+  } from '@immich/ui';
+  import { mdiSlashForward } from '@mdi/js';
   import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
 
   type Props = {
     breadcrumbs: BreadcrumbItem[];
-    buttons?: Snippet;
+    actions?: Array<HeaderButtonActionItem | MenuItemType>;
     children?: Snippet;
   };
 
-  let { breadcrumbs, buttons, children }: Props = $props();
+  let { breadcrumbs, actions = [], children }: Props = $props();
 </script>
 
 <AppShell>
@@ -24,11 +38,37 @@
     <AdminSidebar />
   </AppShellSidebar>
 
-  <TitleLayout {breadcrumbs} {buttons}>
+  <div class="h-full flex flex-col">
+    <div class="flex h-16 w-full justify-between items-center border-b py-2 px-4 md:px-2">
+      <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
+
+      {#if actions.length > 0}
+        <div class="hidden md:block">
+          <HStack gap={0}>
+            {#each actions as action, i (i)}
+              {#if !isMenuItemType(action) && (action.$if?.() ?? true)}
+                <Button
+                  variant="ghost"
+                  size="small"
+                  color={action.color ?? 'secondary'}
+                  leadingIcon={action.icon}
+                  onclick={() => action.onAction(action)}
+                  title={action.data?.title}
+                >
+                  {action.title}
+                </Button>
+              {/if}
+            {/each}
+          </HStack>
+        </div>
+
+        <ContextMenuButton aria-label={$t('open')} items={actions} class="md:hidden" />
+      {/if}
+    </div>
     <Scrollable class="grow">
       <PageContent>
         {@render children?.()}
       </PageContent>
     </Scrollable>
-  </TitleLayout>
+  </div>
 </AppShell>

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

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { Breadcrumbs, type BreadcrumbItem } from '@immich/ui';
-  import { mdiSlashForward } from '@mdi/js';
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    breadcrumbs: BreadcrumbItem[];
-    buttons?: Snippet;
-    children?: Snippet;
-  };
-
-  let { breadcrumbs, buttons, children }: Props = $props();
-</script>
-
-<div class="h-full flex flex-col">
-  <div class="flex h-16 w-full place-items-center justify-between border-b p-2">
-    <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
-    {@render buttons?.()}
-  </div>
-  {@render children?.()}
-</div>

web/src/lib/constants.ts

@@ -23,7 +23,7 @@ export enum AppRoute {
   ADMIN_LIBRARY_MANAGEMENT = '/admin/library-management',
   ADMIN_SETTINGS = '/admin/system-settings',
   ADMIN_STATS = '/admin/server-status',
-  ADMIN_JOBS = '/admin/jobs-status',
+  ADMIN_QUEUES = '/admin/queues',
   ADMIN_REPAIR = '/admin/repair',
 
   ALBUMS = '/albums',

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

@@ -4,6 +4,7 @@ import type {
   AlbumResponseDto,
   LibraryResponseDto,
   LoginResponseDto,
+  QueueResponseDto,
   SharedLinkResponseDto,
   SystemConfigDto,
   UserAdminResponseDto,
@@ -21,6 +22,8 @@ export type Events = {
 
   AlbumDelete: [AlbumResponseDto];
 
+  QueueUpdate: [QueueResponseDto];
+
   SharedLinkCreate: [SharedLinkResponseDto];
   SharedLinkUpdate: [SharedLinkResponseDto];
   SharedLinkDelete: [SharedLinkResponseDto];

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

@@ -0,0 +1,45 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import type { QueueSnapshot } from '$lib/types';
+import { getQueues, type QueueResponseDto } from '@immich/sdk';
+import { DateTime } from 'luxon';
+
+export class QueueManager {
+  #snapshots = $state<QueueSnapshot[]>([]);
+  #queues: QueueResponseDto[] = $derived(this.#snapshots.at(-1)?.snapshot ?? []);
+
+  #interval?: ReturnType<typeof setInterval>;
+  #listenerCount = 0;
+
+  get snapshots() {
+    return this.#snapshots;
+  }
+
+  get queues() {
+    return this.#queues;
+  }
+
+  constructor() {
+    eventManager.on('QueueUpdate', () => void this.refresh());
+  }
+
+  listen() {
+    if (!this.#interval) {
+      this.#interval = setInterval(() => void this.refresh(true), 3000);
+    }
+
+    this.#listenerCount++;
+    void this.refresh();
+
+    return () => this.#listenerCount--;
+  }
+
+  async refresh(tick = false) {
+    this.#snapshots.push({
+      timestamp: DateTime.now().toMillis(),
+      snapshot: this.#listenerCount > 0 || !tick ? await getQueues().catch(() => undefined) : undefined,
+    });
+    this.#snapshots = this.#snapshots.slice(-30);
+  }
+}
+
+export const queueManager = new QueueManager();

web/src/lib/modals/UserEditModal.svelte

@@ -89,7 +89,7 @@
 
       <Text size="small" class="mt-2" color="muted">
         {$t('admin.note_apply_storage_label_previous_assets')}
-        <Link href={AppRoute.ADMIN_JOBS}>
+        <Link href={AppRoute.ADMIN_QUEUES}>
           {$t('admin.storage_template_migration_job')}
         </Link>
       </Text>

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

@@ -28,7 +28,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
     title: $t('scan_all_libraries'),
     type: $t('command'),
     icon: mdiSync,
-    onAction: () => void handleScanAllLibraries(),
+    onAction: () => handleScanAllLibraries(),
     shortcuts: { shift: true, key: 'r' },
     $if: () => libraries.length > 0,
   };
@@ -37,7 +37,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
     title: $t('create_library'),
     type: $t('command'),
     icon: mdiPlusBoxOutline,
-    onAction: () => void handleCreateLibrary(),
+    onAction: () => handleCreateLibrary(),
     shortcuts: { shift: true, key: 'n' },
   };
 
@@ -49,7 +49,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('rename'),
-    onAction: () => void modalManager.show(LibraryRenameModal, { library }),
+    onAction: () => modalManager.show(LibraryRenameModal, { library }),
     shortcuts: { key: 'r' },
   };
 
@@ -58,7 +58,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     type: $t('command'),
     title: $t('delete'),
     color: 'danger',
-    onAction: () => void handleDeleteLibrary(library),
+    onAction: () => handleDeleteLibrary(library),
     shortcuts: { key: 'Backspace' },
   };
 
@@ -66,21 +66,21 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     icon: mdiPlusBoxOutline,
     type: $t('command'),
     title: $t('add'),
-    onAction: () => void modalManager.show(LibraryFolderAddModal, { library }),
+    onAction: () => modalManager.show(LibraryFolderAddModal, { library }),
   };
 
   const AddExclusionPattern: ActionItem = {
     icon: mdiPlusBoxOutline,
     type: $t('command'),
     title: $t('add'),
-    onAction: () => void modalManager.show(LibraryExclusionPatternAddModal, { library }),
+    onAction: () => modalManager.show(LibraryExclusionPatternAddModal, { library }),
   };
 
   const Scan: ActionItem = {
     icon: mdiSync,
     type: $t('command'),
     title: $t('scan_library'),
-    onAction: () => void handleScanLibrary(library),
+    onAction: () => handleScanLibrary(library),
     shortcuts: { shift: true, key: 'r' },
   };
 
@@ -92,14 +92,14 @@ export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryRe
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('edit'),
-    onAction: () => void modalManager.show(LibraryFolderEditModal, { folder, library }),
+    onAction: () => modalManager.show(LibraryFolderEditModal, { folder, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     type: $t('command'),
     title: $t('delete'),
-    onAction: () => void handleDeleteLibraryFolder(library, folder),
+    onAction: () => handleDeleteLibraryFolder(library, folder),
   };
 
   return { Edit, Delete };
@@ -114,14 +114,14 @@ export const getLibraryExclusionPatternActions = (
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('edit'),
-    onAction: () => void modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
+    onAction: () => modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     type: $t('command'),
     title: $t('delete'),
-    onAction: () => void handleDeleteExclusionPattern(library, exclusionPattern),
+    onAction: () => handleDeleteExclusionPattern(library, exclusionPattern),
   };
 
   return { Edit, Delete };
@@ -273,7 +273,7 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
   });
 
   if (!confirmed) {
-    return false;
+    return;
   }
 
   try {
@@ -285,10 +285,7 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
     toastManager.success($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
-    return false;
   }
-
-  return true;
 };
 
 export const handleAddLibraryExclusionPattern = async (library: LibraryResponseDto, exclusionPattern: string) => {
@@ -345,9 +342,8 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
   const $t = await getFormatter();
 
   const confirmed = await modalManager.showDialog({ prompt: $t('admin.library_remove_exclusion_pattern_prompt') });
-
   if (!confirmed) {
-    return false;
+    return;
   }
 
   try {
@@ -361,8 +357,5 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
     toastManager.success($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
-    return false;
   }
-
-  return true;
 };

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

@@ -0,0 +1,271 @@
+import { goto } from '$app/navigation';
+import { AppRoute } from '$lib/constants';
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import { queueManager } from '$lib/managers/queue-manager.svelte';
+import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
+import { user } from '$lib/stores/user.store';
+import type { HeaderButtonActionItem } from '$lib/types';
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import {
+  emptyQueue,
+  getQueue,
+  QueueCommand,
+  QueueName,
+  runQueueCommandLegacy,
+  updateQueue,
+  type QueueResponseDto,
+} from '@immich/sdk';
+import { modalManager, toastManager, type ActionItem, type IconLike } from '@immich/ui';
+import {
+  mdiClose,
+  mdiCog,
+  mdiContentDuplicate,
+  mdiDatabaseOutline,
+  mdiFaceRecognition,
+  mdiFileJpgBox,
+  mdiFileXmlBox,
+  mdiFolderMove,
+  mdiImageSearch,
+  mdiLibraryShelves,
+  mdiOcr,
+  mdiPause,
+  mdiPlay,
+  mdiPlus,
+  mdiStateMachine,
+  mdiSync,
+  mdiTable,
+  mdiTagFaces,
+  mdiTrashCanOutline,
+  mdiTrayFull,
+  mdiVideo,
+} from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+import { get } from 'svelte/store';
+
+type QueueItem = {
+  icon: IconLike;
+  title: string;
+  subtitle?: string;
+};
+
+export const getQueuesActions = ($t: MessageFormatter, queues: QueueResponseDto[] | undefined) => {
+  const pausedQueues = (queues ?? []).filter(({ isPaused }) => isPaused).map(({ name }) => name);
+
+  const ResumePaused: HeaderButtonActionItem = {
+    title: $t('resume_paused_jobs', { values: { count: pausedQueues.length } }),
+    $if: () => pausedQueues.length > 0,
+    icon: mdiPlay,
+    onAction: () => handleResumePausedJobs(pausedQueues),
+    data: {
+      title: pausedQueues.join(', '),
+    },
+  };
+
+  const CreateJob: ActionItem = {
+    icon: mdiPlus,
+    title: $t('admin.create_job'),
+    type: $t('command'),
+    shortcuts: { shift: true, key: 'n' },
+    onAction: async () => {
+      await modalManager.show(JobCreateModal, {});
+    },
+  };
+
+  const ManageConcurrency: ActionItem = {
+    icon: mdiCog,
+    title: $t('admin.manage_concurrency'),
+    description: $t('admin.manage_concurrency_description'),
+    type: $t('page'),
+    onAction: () => goto(`${AppRoute.ADMIN_SETTINGS}?isOpen=job`),
+  };
+
+  return { ResumePaused, ManageConcurrency, CreateJob };
+};
+
+export const getQueueActions = ($t: MessageFormatter, queue: QueueResponseDto) => {
+  const Pause: ActionItem = {
+    icon: mdiPause,
+    title: $t('pause'),
+    $if: () => !queue.isPaused,
+    onAction: () => handlePauseQueue(queue),
+  };
+
+  const Resume: ActionItem = {
+    icon: mdiPlay,
+    title: $t('resume'),
+    $if: () => queue.isPaused,
+    onAction: () => handleResumeQueue(queue),
+  };
+
+  const Empty: ActionItem = {
+    icon: mdiClose,
+    title: $t('clear'),
+    onAction: () => handleEmptyQueue(queue),
+  };
+
+  const RemoveFailedJobs: ActionItem = {
+    icon: mdiTrashCanOutline,
+    color: 'danger',
+    title: $t('admin.remove_failed_jobs'),
+    onAction: () => handleRemoveFailedJobs(queue),
+  };
+
+  return { Pause, Resume, Empty, RemoveFailedJobs };
+};
+
+export const handlePauseQueue = async (queue: QueueResponseDto) => {
+  const response = await updateQueue({ name: queue.name, queueUpdateDto: { isPaused: true } });
+  eventManager.emit('QueueUpdate', response);
+};
+
+export const handleResumeQueue = async (queue: QueueResponseDto) => {
+  const response = await updateQueue({ name: queue.name, queueUpdateDto: { isPaused: false } });
+  eventManager.emit('QueueUpdate', response);
+};
+
+export const handleEmptyQueue = async (queue: QueueResponseDto) => {
+  const $t = await getFormatter();
+  const item = asQueueItem($t, queue);
+
+  try {
+    await emptyQueue({ name: queue.name, queueDeleteDto: { failed: false } });
+    const response = await getQueue({ name: queue.name });
+    eventManager.emit('QueueUpdate', response);
+    toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
+};
+
+const handleResumePausedJobs = async (queues: QueueName[]) => {
+  const $t = await getFormatter();
+
+  try {
+    for (const name of queues) {
+      await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
+    }
+    await queueManager.refresh();
+  } catch (error) {
+    handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
+  }
+};
+
+const handleRemoveFailedJobs = async (queue: QueueResponseDto) => {
+  const $t = await getFormatter();
+
+  try {
+    await emptyQueue({ name: queue.name, queueDeleteDto: { failed: true } });
+    const response = await getQueue({ name: queue.name });
+    eventManager.emit('QueueUpdate', response);
+    toastManager.success();
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
+};
+
+export const asQueueItem = ($t: MessageFormatter, queue: { name: QueueName }): QueueItem => {
+  // TODO merge this mapping with data from QueuePanel.svelte
+  const items: Record<QueueName, QueueItem> = {
+    [QueueName.ThumbnailGeneration]: {
+      icon: mdiFileJpgBox,
+      title: $t('admin.thumbnail_generation_job'),
+      subtitle: $t('admin.thumbnail_generation_job_description'),
+    },
+    [QueueName.MetadataExtraction]: {
+      icon: mdiTable,
+      title: $t('admin.metadata_extraction_job'),
+      subtitle: $t('admin.metadata_extraction_job_description'),
+    },
+    [QueueName.Library]: {
+      icon: mdiLibraryShelves,
+      title: $t('external_libraries'),
+      subtitle: $t('admin.library_tasks_description'),
+    },
+    [QueueName.Sidecar]: {
+      title: $t('admin.sidecar_job'),
+      icon: mdiFileXmlBox,
+      subtitle: $t('admin.sidecar_job_description'),
+    },
+    [QueueName.SmartSearch]: {
+      icon: mdiImageSearch,
+      title: $t('admin.machine_learning_smart_search'),
+      subtitle: $t('admin.smart_search_job_description'),
+    },
+    [QueueName.DuplicateDetection]: {
+      icon: mdiContentDuplicate,
+      title: $t('admin.machine_learning_duplicate_detection'),
+      subtitle: $t('admin.duplicate_detection_job_description'),
+    },
+    [QueueName.FaceDetection]: {
+      icon: mdiFaceRecognition,
+      title: $t('admin.face_detection'),
+      subtitle: $t('admin.face_detection_description'),
+    },
+    [QueueName.FacialRecognition]: {
+      icon: mdiTagFaces,
+      title: $t('admin.machine_learning_facial_recognition'),
+      subtitle: $t('admin.facial_recognition_job_description'),
+    },
+    [QueueName.Ocr]: {
+      icon: mdiOcr,
+      title: $t('admin.machine_learning_ocr'),
+      subtitle: $t('admin.ocr_job_description'),
+    },
+    [QueueName.VideoConversion]: {
+      icon: mdiVideo,
+      title: $t('admin.video_conversion_job'),
+      subtitle: $t('admin.video_conversion_job_description'),
+    },
+    [QueueName.StorageTemplateMigration]: {
+      icon: mdiFolderMove,
+      title: $t('admin.storage_template_migration'),
+    },
+    [QueueName.Migration]: {
+      icon: mdiFolderMove,
+      title: $t('admin.migration_job'),
+      subtitle: $t('admin.migration_job_description'),
+    },
+    [QueueName.BackgroundTask]: {
+      icon: mdiTrayFull,
+      title: $t('admin.background_task_job'),
+    },
+    [QueueName.Search]: {
+      icon: '',
+      title: $t('search'),
+    },
+    [QueueName.Notifications]: {
+      icon: '',
+      title: $t('notifications'),
+    },
+    [QueueName.BackupDatabase]: {
+      icon: mdiDatabaseOutline,
+      title: $t('admin.backup_database'),
+    },
+    [QueueName.Workflow]: {
+      icon: mdiStateMachine,
+      title: $t('workflow'),
+    },
+  };
+
+  return items[queue.name];
+};
+
+export const asQueueSlug = (name: QueueName) => {
+  return name.replaceAll(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+};
+
+export const fromQueueSlug = (slug: string): QueueName | undefined => {
+  const name = slug.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+  if (Object.values(QueueName).includes(name as QueueName)) {
+    return name as QueueName;
+  }
+};
+
+export const getQueueDetailUrl = (queue: QueueResponseDto) => {
+  return `${AppRoute.ADMIN_QUEUES}/${asQueueSlug(queue.name)}`;
+};
+
+export const handleViewQueue = (queue: QueueResponseDto) => {
+  return goto(getQueueDetailUrl(queue));
+};

web/src/lib/services/shared-link.service.ts

@@ -24,26 +24,26 @@ export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLin
   const Edit: ActionItem = {
     title: $t('edit_link'),
     icon: mdiPencilOutline,
-    onAction: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
+    onAction: () => goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
   };
 
   const Delete: ActionItem = {
     title: $t('delete_link'),
     icon: mdiTrashCanOutline,
     color: 'danger',
-    onAction: () => void handleDeleteSharedLink(sharedLink),
+    onAction: () => handleDeleteSharedLink(sharedLink),
   };
 
   const Copy: ActionItem = {
     title: $t('copy_link'),
     icon: mdiContentCopy,
-    onAction: () => void copyToClipboard(asUrl(sharedLink)),
+    onAction: () => copyToClipboard(asUrl(sharedLink)),
   };
 
   const ViewQrCode: ActionItem = {
     title: $t('view_qr_code'),
     icon: mdiQrcode,
-    onAction: () => void handleShowSharedLinkQrCode(sharedLink),
+    onAction: () => handleShowSharedLinkQrCode(sharedLink),
   };
 
   return { Edit, Delete, Copy, ViewQrCode };
@@ -88,7 +88,7 @@ export const handleUpdateSharedLink = async (sharedLink: SharedLinkResponseDto,
   }
 };
 
-export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto): Promise<boolean> => {
+const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto) => {
   const $t = await getFormatter();
   const success = await modalManager.showDialog({
     title: $t('delete_shared_link'),
@@ -96,17 +96,15 @@ export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto):
     confirmText: $t('delete'),
   });
   if (!success) {
-    return false;
+    return;
   }
 
   try {
     await removeSharedLink({ id: sharedLink.id });
     eventManager.emit('SharedLinkDelete', sharedLink);
     toastManager.success($t('deleted_shared_link'));
-    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_delete_shared_link'));
-    return false;
   }
 };
 

web/src/lib/services/system-config.service.ts

@@ -20,7 +20,7 @@ export const getSystemConfigActions = (
     description: $t('admin.copy_config_to_clipboard_description'),
     type: $t('command'),
     icon: mdiContentCopy,
-    onAction: () => void handleCopyToClipboard(config),
+    onAction: () => handleCopyToClipboard(config),
     shortcuts: { shift: true, key: 'c' },
   };
 

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

@@ -1,11 +1,13 @@
 import { goto } from '$app/navigation';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
 import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
 import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
 import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
 import UserEditModal from '$lib/modals/UserEditModal.svelte';
 import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
 import { user as authUser } from '$lib/stores/user.store';
+import type { HeaderButtonActionItem } from '$lib/types';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -28,6 +30,7 @@ import {
   mdiPlusBoxOutline,
   mdiTrashCanOutline,
 } from '@mdi/js';
+import { DateTime } from 'luxon';
 import type { MessageFormatter } from 'svelte-i18n';
 import { get } from 'svelte/store';
 
@@ -36,7 +39,7 @@ export const getUserAdminsActions = ($t: MessageFormatter) => {
     title: $t('create_user'),
     type: $t('command'),
     icon: mdiPlusBoxOutline,
-    onAction: () => void modalManager.show(UserCreateModal, {}),
+    onAction: () => modalManager.show(UserCreateModal, {}),
     shortcuts: { shift: true, key: 'n' },
   };
 
@@ -60,11 +63,17 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     shortcuts: { key: 'Backspace' },
   };
 
-  const Restore: ActionItem = {
+  const getDeleteDate = (deletedAt: string): Date =>
+    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
+
+  const Restore: HeaderButtonActionItem = {
     icon: mdiDeleteRestore,
     title: $t('restore'),
     type: $t('command'),
     color: 'primary',
+    data: {
+      title: $t('admin.user_restore_scheduled_removal', { values: { date: getDeleteDate(user.deletedAt!) } }),
+    },
     $if: () => !!user.deletedAt && user.status === UserStatus.Deleted,
     onAction: () => modalManager.show(UserRestoreConfirmModal, { user }),
   };
@@ -74,14 +83,14 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     title: $t('reset_password'),
     type: $t('command'),
     $if: () => get(authUser).id !== user.id,
-    onAction: () => void handleResetPasswordUserAdmin(user),
+    onAction: () => handleResetPasswordUserAdmin(user),
   };
 
   const ResetPinCode: ActionItem = {
     icon: mdiLockSmart,
     type: $t('command'),
     title: $t('reset_pin_code'),
-    onAction: () => void handleResetPinCodeUserAdmin(user),
+    onAction: () => handleResetPinCodeUserAdmin(user),
   };
 
   return { Update, Delete, Restore, ResetPassword, ResetPinCode };
@@ -162,12 +171,12 @@ const generatePassword = (length: number = 16) => {
   return generatedPassword;
 };
 
-export const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
+const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
   const $t = await getFormatter();
   const prompt = $t('admin.confirm_user_password_reset', { values: { user: user.name } });
   const success = await modalManager.showDialog({ prompt });
   if (!success) {
-    return false;
+    return;
   }
 
   try {
@@ -176,28 +185,24 @@ export const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) =
     eventManager.emit('UserAdminUpdate', response);
     toastManager.success();
     await modalManager.show(PasswordResetSuccessModal, { newPassword: dto.password });
-    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_reset_password'));
-    return false;
   }
 };
 
-export const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
+const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
   const $t = await getFormatter();
   const prompt = $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } });
   const success = await modalManager.showDialog({ prompt });
   if (!success) {
-    return false;
+    return;
   }
 
   try {
     const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
     eventManager.emit('UserAdminUpdate', response);
     toastManager.success($t('pin_code_reset_successfully'));
-    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_reset_pin_code'));
-    return false;
   }
 };

web/src/lib/sidebars/AdminSidebar.svelte

@@ -2,16 +2,16 @@
   import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
   import { AppRoute } from '$lib/constants';
   import { NavbarItem } from '@immich/ui';
-  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync } from '@mdi/js';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiTrayFull } from '@mdi/js';
   import { t } from 'svelte-i18n';
 </script>
 
 <div class="h-full flex flex-col justify-between gap-2">
   <div class="flex flex-col pt-8 pe-4 gap-1">
     <NavbarItem title={$t('users')} href={AppRoute.ADMIN_USERS} icon={mdiAccountMultipleOutline} />
-    <NavbarItem title={$t('jobs')} href={AppRoute.ADMIN_JOBS} icon={mdiSync} />
-    <NavbarItem title={$t('settings')} href={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
     <NavbarItem title={$t('external_libraries')} href={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
+    <NavbarItem title={$t('admin.queues')} href={AppRoute.ADMIN_QUEUES} icon={mdiTrayFull} />
+    <NavbarItem title={$t('settings')} href={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
     <NavbarItem title={$t('server_stats')} href={AppRoute.ADMIN_STATS} icon={mdiServer} />
   </div>
 

web/src/lib/types.ts

@@ -1,4 +1,5 @@
-import type { ServerVersionResponseDto } from '@immich/sdk';
+import type { QueueResponseDto, ServerVersionResponseDto } from '@immich/sdk';
+import type { ActionItem } from '@immich/ui';
 
 export interface ReleaseEvent {
   isAvailable: boolean;
@@ -7,3 +8,7 @@ export interface ReleaseEvent {
   serverVersion: ServerVersionResponseDto;
   releaseVersion: ServerVersionResponseDto;
 }
+
+export type QueueSnapshot = { timestamp: number; snapshot?: QueueResponseDto[] };
+
+export type HeaderButtonActionItem = ActionItem & { data?: { title?: string } };

web/src/routes/+layout.svelte

@@ -14,13 +14,14 @@
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
   import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
+  import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import { user } from '$lib/stores/user.store';
   import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
   import type { ReleaseEvent } from '$lib/types';
   import { copyToClipboard, getReleaseType, semverToName } from '$lib/utils';
   import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
-  import { CommandPaletteContext, modalManager, setTranslations, type ActionItem } from '@immich/ui';
+  import { CommandPaletteContext, modalManager, setTranslations, toastManager, type ActionItem } from '@immich/ui';
   import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiThemeLightDark } from '@mdi/js';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -52,6 +53,8 @@
     return new URL(page.url.pathname + page.url.search, 'https://my.immich.app');
   };
 
+  toastManager.setOptions({ class: 'top-16' });
+
   onMount(() => {
     const element = document.querySelector('#stencil');
     element?.remove();
@@ -61,6 +64,10 @@
   eventManager.emit('AppInit');
 
   beforeNavigate(({ from, to }) => {
+    if (sidebarStore.isOpen) {
+      sidebarStore.reset();
+    }
+
     if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {
       return;
     }
@@ -142,18 +149,19 @@
       icon: mdiAccountMultipleOutline,
       onAction: () => goto(AppRoute.ADMIN_USERS),
     },
-    {
-      title: $t('jobs'),
-      description: $t('admin.jobs_page_description'),
-      icon: mdiSync,
-      onAction: () => goto(AppRoute.ADMIN_JOBS),
-    },
     {
       title: $t('settings'),
-      description: $t('admin.jobs_page_description'),
+      description: $t('admin.settings_page_description'),
       icon: mdiCog,
       onAction: () => goto(AppRoute.ADMIN_SETTINGS),
     },
+    {
+      title: $t('admin.queues'),
+      description: $t('admin.queues_page_description'),
+      icon: mdiSync,
+      type: $t('page'),
+      onAction: () => goto(AppRoute.ADMIN_QUEUES),
+    },
     {
       title: $t('external_libraries'),
       description: $t('admin.external_libraries_page_description'),

web/src/routes/admin/jobs-status/+page.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import JobsPanel from '$lib/components/jobs/JobsPanel.svelte';
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import { AppRoute } from '$lib/constants';
-  import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
-  import { asyncTimeout } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import {
-    getQueuesLegacy,
-    QueueCommand,
-    QueueName,
-    runQueueCommandLegacy,
-    type QueuesResponseLegacyDto,
-  } from '@immich/sdk';
-  import { Button, CommandPaletteContext, HStack, modalManager, Text, type ActionItem } from '@immich/ui';
-  import { mdiCog, mdiPlay, mdiPlus } from '@mdi/js';
-  import { onDestroy, onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import type { PageData } from './$types';
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  let jobs: QueuesResponseLegacyDto | undefined = $state();
-
-  let running = true;
-
-  const pausedJobs = $derived(
-    Object.entries(jobs ?? {})
-      .filter(([_, queue]) => queue.queueStatus?.isPaused)
-      .map(([name]) => name as QueueName),
-  );
-
-  const handleResumePausedJobs = async () => {
-    try {
-      for (const name of pausedJobs) {
-        await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
-      }
-      // Refresh jobs status immediately after resuming
-      jobs = await getQueuesLegacy();
-    } catch (error) {
-      handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
-    }
-  };
-
-  const handleCreateJob = () => modalManager.show(JobCreateModal);
-
-  const jobConcurrencyLink = `${AppRoute.ADMIN_SETTINGS}?isOpen=job`;
-
-  const commands: ActionItem[] = [
-    {
-      title: $t('admin.create_job'),
-      type: $t('command'),
-      icon: mdiPlus,
-      onAction: () => void handleCreateJob(),
-      shortcuts: { shift: true, key: 'n' },
-    },
-    {
-      title: $t('admin.manage_concurrency'),
-      description: $t('admin.manage_concurrency_description'),
-      type: $t('page'),
-      icon: mdiCog,
-      onAction: () => goto(jobConcurrencyLink),
-    },
-  ];
-
-  onMount(async () => {
-    while (running) {
-      jobs = await getQueuesLegacy();
-      await asyncTimeout(5000);
-    }
-  });
-
-  onDestroy(() => {
-    running = false;
-  });
-</script>
-
-<CommandPaletteContext {commands} />
-
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={0}>
-      {#if pausedJobs.length > 0}
-        <Button
-          leadingIcon={mdiPlay}
-          onclick={handleResumePausedJobs}
-          size="small"
-          variant="ghost"
-          title={pausedJobs.join(', ')}
-        >
-          <Text class="hidden md:block">
-            {$t('resume_paused_jobs', { values: { count: pausedJobs.length } })}
-          </Text>
-        </Button>
-      {/if}
-      <Button leadingIcon={mdiPlus} onclick={handleCreateJob} size="small" variant="ghost" color="secondary">
-        <Text class="hidden md:block">{$t('admin.create_job')}</Text>
-      </Button>
-      <Button leadingIcon={mdiCog} href={jobConcurrencyLink} size="small" variant="ghost" color="secondary">
-        <Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
-      </Button>
-    </HStack>
-  {/snippet}
-  <section id="setting-content" class="flex place-content-center sm:mx-4">
-    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
-      {#if jobs}
-        <JobsPanel {jobs} />
-      {/if}
-    </section>
-  </section>
-</AdminPageLayout>

web/src/routes/admin/jobs-status/+page.ts

@@ -1,18 +1,5 @@
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { getQueuesLegacy } from '@immich/sdk';
+import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ url }) => {
-  await authenticate(url, { admin: true });
-
-  const jobs = await getQueuesLegacy();
-  const $t = await getFormatter();
-
-  return {
-    jobs,
-    meta: {
-      title: $t('admin.job_status'),
-    },
-  };
-}) satisfies PageLoad;
+export const load = (() => redirect(307, AppRoute.ADMIN_QUEUES)) satisfies PageLoad;

web/src/routes/admin/library-management/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -60,17 +59,11 @@
 
 <CommandPaletteContext commands={[Create, ScanAll]} />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      <HeaderButton action={ScanAll} />
-      <HeaderButton action={Create} />
-    </div>
-  {/snippet}
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
   <section class="my-4">
     <div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
       {#if libraries.length > 0}
-        <table class="w-3/4 text-start">
+        <table class="text-start">
           <thead
             class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
           >

web/src/routes/admin/library-management/+page.ts

@@ -23,7 +23,7 @@ export const load = (async ({ url }) => {
     statistics: Object.fromEntries(statistics),
     owners: Object.fromEntries(owners),
     meta: {
-      title: $t('admin.external_library_management'),
+      title: $t('external_libraries'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/admin/library-management/[id]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
+  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -53,18 +53,9 @@
 <CommandPaletteContext commands={[Rename, Delete, AddFolder, AddExclusionPattern, Scan]} />
 
 <AdminPageLayout
-  breadcrumbs={[
-    { title: $t('admin.external_library_management'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT },
-    { title: library.name },
-  ]}
+  breadcrumbs={[{ title: $t('external_libraries'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT }, { title: library.name }]}
+  actions={[Scan, Rename, Delete]}
 >
-  {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      <HeaderButton action={Scan} />
-      <HeaderButton action={Rename} />
-      <HeaderButton action={Delete} />
-    </div>
-  {/snippet}
   <Container size="large" center>
     <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
       <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
@@ -80,7 +71,7 @@
               <Icon icon={mdiFolderOutline} size="1.5rem" />
               <CardTitle>{$t('folders')}</CardTitle>
             </div>
-            <HeaderButton action={AddFolder} />
+            <HeaderActionButton action={AddFolder} />
           </div>
         </CardHeader>
         <CardBody>
@@ -120,7 +111,7 @@
               <Icon icon={mdiFilterMinusOutline} size="1.5rem" />
               <CardTitle>{$t('exclusion_pattern')}</CardTitle>
             </div>
-            <HeaderButton action={AddExclusionPattern} />
+            <HeaderActionButton action={AddExclusionPattern} />
           </div>
         </CardHeader>
         <CardBody>

web/src/routes/admin/queues/+page.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import JobsPanel from '$lib/components/QueuePanel.svelte';
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import { getQueuesActions } from '$lib/services/queue.service';
+  import { type QueueResponseDto } from '@immich/sdk';
+  import { CommandPaletteContext, type ActionItem } from '@immich/ui';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+
+  onMount(() => queueManager.listen());
+
+  let queues = $derived<QueueResponseDto[]>(queueManager.queues);
+
+  const { ResumePaused, CreateJob, ManageConcurrency } = $derived(getQueuesActions($t, queueManager.queues));
+  const commands: ActionItem[] = $derived([CreateJob, ManageConcurrency]);
+
+  const onQueueUpdate = (update: QueueResponseDto) => {
+    queues = queues.map((queue) => {
+      if (queue.name === update.name) {
+        return update;
+      }
+      return queue;
+    });
+  };
+</script>
+
+<CommandPaletteContext {commands} />
+
+<OnEvents {onQueueUpdate} />
+
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ResumePaused, CreateJob, ManageConcurrency]}>
+  <section id="setting-content" class="flex place-content-center sm:mx-4">
+    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
+      {#if queues}
+        <JobsPanel {queues} />
+      {/if}
+    </section>
+  </section>
+</AdminPageLayout>

web/src/routes/admin/queues/+page.ts

@@ -0,0 +1,18 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getQueues } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url, { admin: true });
+
+  const queues = await getQueues();
+  const $t = await getFormatter();
+
+  return {
+    queues,
+    meta: {
+      title: $t('admin.queues'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/admin/queues/[name]/+page.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import QueueGraph from '$lib/components/QueueGraph.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import { asQueueItem, getQueueActions } from '$lib/services/queue.service';
+  import { type QueueResponseDto } from '@immich/sdk';
+  import {
+    Badge,
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Container,
+    Heading,
+    Icon,
+    MenuItemType,
+    Text,
+  } from '@immich/ui';
+  import { mdiClockTimeTwoOutline } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+
+  let queue = $derived(data.queue);
+
+  const { Pause, Resume, Empty, RemoveFailedJobs } = $derived(getQueueActions($t, queue));
+  const item = $derived(asQueueItem($t, queue));
+
+  onMount(() => queueManager.listen());
+
+  const onQueueUpdate = (update: QueueResponseDto) => {
+    if (update.name === queue.name) {
+      queue = update;
+    }
+  };
+</script>
+
+<OnEvents {onQueueUpdate} />
+
+<AdminPageLayout
+  breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}
+  actions={[Pause, Resume, Empty, MenuItemType.Divider, RemoveFailedJobs]}
+>
+  <div>
+    <Container size="large" center>
+      <div class="mb-1 mt-4 flex items-center gap-2">
+        <Heading tag="h1" size="large">{item.title}</Heading>
+        {#if queue.isPaused}
+          <Badge color="warning">
+            {$t('paused')}
+          </Badge>
+        {/if}
+      </div>
+      <Text color="muted" class="mb-4">{item.subtitle}</Text>
+
+      <div class="flex gap-1 mb-4">
+        <Badge>{$t('active_count', { values: { count: queue.statistics.active } })}</Badge>
+        <Badge>{$t('waiting_count', { values: { count: queue.statistics.waiting } })}</Badge>
+        {#if queue.statistics.failed > 0}
+          <Badge color="danger">{$t('failed_count', { values: { count: queue.statistics.failed } })}</Badge>
+        {/if}
+      </div>
+
+      <div class="mt-8">
+        <Card color="secondary">
+          <CardHeader>
+            <div class="flex items-center gap-2 text-primary">
+              <Icon icon={mdiClockTimeTwoOutline} size="1.5rem" />
+              <CardTitle>{$t('admin.jobs_over_time')}</CardTitle>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <QueueGraph {queue} class="h-[300px]" />
+          </CardBody>
+        </Card>
+      </div>
+    </Container>
+  </div>
+</AdminPageLayout>

web/src/routes/admin/queues/[name]/+page.ts

@@ -0,0 +1,31 @@
+import { AppRoute } from '$lib/constants';
+import { fromQueueSlug } from '$lib/services/queue.service';
+import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getQueue, getQueueJobs, QueueJobStatus } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params, url }) => {
+  await authenticate(url, { admin: true });
+  await requestServerInfo();
+
+  const name = fromQueueSlug(params.name);
+  if (!name) {
+    redirect(302, AppRoute.ADMIN_QUEUES);
+  }
+
+  const [queue, failedJobs] = await Promise.all([
+    getQueue({ name }),
+    getQueueJobs({ name, status: [QueueJobStatus.Failed, QueueJobStatus.Paused] }),
+  ]);
+  const $t = await getFormatter();
+
+  return {
+    queue,
+    failedJobs,
+    meta: {
+      title: $t('admin.queue_details'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/admin/system-settings/+page.svelte

@@ -18,7 +18,6 @@
   import ThemeSettings from '$lib/components/admin-settings/ThemeSettings.svelte';
   import TrashSettings from '$lib/components/admin-settings/TrashSettings.svelte';
   import UserSettings from '$lib/components/admin-settings/UserSettings.svelte';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
@@ -27,7 +26,7 @@
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { getSystemConfigActions } from '$lib/services/system-config.service';
-  import { Alert, CommandPaletteContext, HStack } from '@immich/ui';
+  import { Alert, CommandPaletteContext } from '@immich/ui';
   import {
     mdiAccountOutline,
     mdiBackupRestore,
@@ -217,24 +216,13 @@
 
 <CommandPaletteContext commands={[CopyToClipboard, Upload, Download]} />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={1}>
-      <div class="hidden lg:block">
-        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-      </div>
-      <HeaderButton action={CopyToClipboard} />
-      <HeaderButton action={Download} />
-      <HeaderButton action={Upload} />
-    </HStack>
-  {/snippet}
-
-  <section id="setting-content" class="flex place-content-center sm:mx-4">
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[CopyToClipboard, Download, Upload]}>
+  <section id="setting-content" class="flex place-content-center sm:mx-4 mt-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
       {#if featureFlagsManager.value.configFile}
         <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
       {/if}
-      <div class="block lg:hidden">
+      <div>
         <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
       </div>
       <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>

web/src/routes/admin/users/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { getUserAdminsActions, handleNavigateUserAdmin } from '$lib/services/user-admin.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext, HStack, Icon } from '@immich/ui';
+  import { Button, CommandPaletteContext, Icon } from '@immich/ui';
   import { mdiInfinity } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -45,12 +44,7 @@
 
 <CommandPaletteContext commands={[Create]} />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={1}>
-      <HeaderButton action={Create} />
-    </HStack>
-  {/snippet}
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[Create]}>
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 lg:w-212.5">
       <table class="my-5 w-full text-start">

web/src/routes/admin/users/[id]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -8,7 +7,6 @@
   import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
   import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
   import { AppRoute } from '$lib/constants';
-  import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import { getUserAdminActions } from '$lib/services/user-admin.service';
   import { locale } from '$lib/stores/preferences.store';
   import { createDateFormatter, findLocale } from '$lib/utils';
@@ -26,8 +24,8 @@
     Container,
     getByteUnitString,
     Heading,
-    HStack,
     Icon,
+    MenuItemType,
     Stack,
     Text,
   } from '@immich/ui';
@@ -42,15 +40,14 @@
     mdiPlayCircle,
     mdiTrashCanOutline,
   } from '@mdi/js';
-  import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  interface Props {
+  type Props = {
     data: PageData;
-  }
+  };
 
-  let { data }: Props = $props();
+  const { data }: Props = $props();
 
   let user = $derived(data.user);
   const userPreferences = $derived(data.userPreferences);
@@ -94,9 +91,6 @@
       await goto(AppRoute.ADMIN_USERS);
     }
   };
-
-  const getDeleteDate = (deletedAt: string): Date =>
-    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
 </script>
 
 <OnEvents
@@ -110,19 +104,8 @@
 
 <AdminPageLayout
   breadcrumbs={[{ title: $t('admin.user_management'), href: AppRoute.ADMIN_USERS }, { title: user.name }]}
+  actions={[ResetPassword, ResetPinCode, Update, Restore, MenuItemType.Divider, Delete]}
 >
-  {#snippet buttons()}
-    <HStack gap={0}>
-      <HeaderButton action={ResetPassword} />
-      <HeaderButton action={ResetPinCode} />
-      <HeaderButton action={Update} />
-      <HeaderButton
-        action={Restore}
-        title={$t('admin.user_restore_scheduled_removal', { values: { date: getDeleteDate(user.deletedAt!) } })}
-      />
-      <HeaderButton action={Delete} />
-    </HStack>
-  {/snippet}
   <div>
     <Container size="large" center>
       {#if user.deletedAt}