chore: version v1.136.0

Revert "fix(web): prevent flashing white background in dark mode on page load/reload (#19934)"

This reverts commit 32f23b8d38.

cli/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@immich/cli",
-  "version": "2.2.72",
+  "version": "2.2.73",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@immich/cli",
-      "version": "2.2.72",
+      "version": "2.2.73",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "chokidar": "^4.0.3",
@@ -54,7 +54,7 @@
     },
     "../open-api/typescript-sdk": {
       "name": "@immich/sdk",
-      "version": "1.135.3",
+      "version": "1.136.0",
       "dev": true,
       "license": "GNU Affero General Public License version 3",
       "dependencies": {

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/cli",
-  "version": "2.2.72",
+  "version": "2.2.73",
   "description": "Command Line Interface (CLI) for Immich",
   "type": "module",
   "exports": "./dist/index.js",

docs/docs/install/environment-variables.md

@@ -29,29 +29,26 @@ These environment variables are used by the `docker-compose.yml` file and do **N
 
 ## General
 
-| Variable                            | Description                                                                               |               Default               | Containers               | Workers            |
+| Variable                            | Description                                                                               |           Default            | Containers               | Workers            |
-| :---------------------------------- | :---------------------------------------------------------------------------------------- | :---------------------------------: | :----------------------- | :----------------- |
+| :---------------------------------- | :---------------------------------------------------------------------------------------- | :--------------------------: | :----------------------- | :----------------- |
-| `TZ`                                | Timezone                                                                                  |           <sup>\*1</sup>            | server                   | microservices      |
+| `TZ`                                | Timezone                                                                                  |        <sup>\*1</sup>        | server                   | microservices      |
-| `IMMICH_ENV`                        | Environment (production, development)                                                     |            `production`             | server, machine learning | api, microservices |
+| `IMMICH_ENV`                        | Environment (production, development)                                                     |         `production`         | server, machine learning | api, microservices |
-| `IMMICH_LOG_LEVEL`                  | Log level (verbose, debug, log, warn, error)                                              |                `log`                | server, machine learning | api, microservices |
+| `IMMICH_LOG_LEVEL`                  | Log level (verbose, debug, log, warn, error)                                              |            `log`             | server, machine learning | api, microservices |
-| `IMMICH_MEDIA_LOCATION`             | Media location inside the container ⚠️**You probably shouldn't set this**<sup>\*2</sup>⚠️ | `/usr/src/app/upload`<sup>\*3</sup> | server                   | api, microservices |
+| `IMMICH_MEDIA_LOCATION`             | Media location inside the container ⚠️**You probably shouldn't set this**<sup>\*2</sup>⚠️ |    `/usr/src/app/upload`     | server                   | api, microservices |
-| `IMMICH_CONFIG_FILE`                | Path to config file                                                                       |                                     | server                   | api, microservices |
+| `IMMICH_CONFIG_FILE`                | Path to config file                                                                       |                              | server                   | api, microservices |
-| `NO_COLOR`                          | Set to `true` to disable color-coded log output                                           |               `false`               | server, machine learning |                    |
+| `NO_COLOR`                          | Set to `true` to disable color-coded log output                                           |           `false`            | server, machine learning |                    |
-| `CPU_CORES`                         | Number of cores available to the Immich server                                            |    auto-detected CPU core count     | server                   |                    |
+| `CPU_CORES`                         | Number of cores available to the Immich server                                            | auto-detected CPU core count | server                   |                    |
-| `IMMICH_API_METRICS_PORT`           | Port for the OTEL metrics                                                                 |               `8081`                | server                   | api                |
+| `IMMICH_API_METRICS_PORT`           | Port for the OTEL metrics                                                                 |            `8081`            | server                   | api                |
-| `IMMICH_MICROSERVICES_METRICS_PORT` | Port for the OTEL metrics                                                                 |               `8082`                | server                   | microservices      |
+| `IMMICH_MICROSERVICES_METRICS_PORT` | Port for the OTEL metrics                                                                 |            `8082`            | server                   | microservices      |
-| `IMMICH_PROCESS_INVALID_IMAGES`     | When `true`, generate thumbnails for invalid images                                       |                                     | server                   | microservices      |
+| `IMMICH_PROCESS_INVALID_IMAGES`     | When `true`, generate thumbnails for invalid images                                       |                              | server                   | microservices      |
-| `IMMICH_TRUSTED_PROXIES`            | List of comma-separated IPs set as trusted proxies                                        |                                     | server                   | api                |
+| `IMMICH_TRUSTED_PROXIES`            | List of comma-separated IPs set as trusted proxies                                        |                              | server                   | api                |
-| `IMMICH_IGNORE_MOUNT_CHECK_ERRORS`  | See [System Integrity](/docs/administration/system-integrity)                             |                                     | server                   | api, microservices |
+| `IMMICH_IGNORE_MOUNT_CHECK_ERRORS`  | See [System Integrity](/docs/administration/system-integrity)                             |                              | server                   | api, microservices |
 
 \*1: `TZ` should be set to a `TZ identifier` from [this list][tz-list]. For example, `TZ="Etc/UTC"`.
 `TZ` is used by `exiftool` as a fallback in case the timezone cannot be determined from the image metadata. It is also used for logfile timestamps and cron job execution.
 
 \*2: This path is where the Immich code looks for the files, which is internal to the docker container. Setting it to a path on your host will certainly break things, you should use the `UPLOAD_LOCATION` variable instead.
 
-\*3: With the default `WORKDIR` of `/usr/src/app`, this path will resolve to `/usr/src/app/upload`.
-It only needs to be set if the Immich deployment method is changing.
-
 ## Workers
 
 | Variable                 | Description                                                                                          | Default | Containers |

docs/static/archived-versions.json

@@ -1,4 +1,8 @@
 [
+  {
+    "label": "v1.136.0",
+    "url": "https://v1.136.0.archive.immich.app"
+  },
   {
     "label": "v1.135.3",
     "url": "https://v1.135.3.archive.immich.app"

e2e/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "immich-e2e",
-  "version": "1.135.3",
+  "version": "1.136.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "immich-e2e",
-      "version": "1.135.3",
+      "version": "1.136.0",
       "license": "GNU Affero General Public License version 3",
       "devDependencies": {
         "@eslint/eslintrc": "^3.1.0",
@@ -46,7 +46,7 @@
     },
     "../cli": {
       "name": "@immich/cli",
-      "version": "2.2.72",
+      "version": "2.2.73",
       "dev": true,
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
@@ -95,7 +95,7 @@
     },
     "../open-api/typescript-sdk": {
       "name": "@immich/sdk",
-      "version": "1.135.3",
+      "version": "1.136.0",
       "dev": true,
       "license": "GNU Affero General Public License version 3",
       "dependencies": {

e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-e2e",
-  "version": "1.135.3",
+  "version": "1.136.0",
   "description": "",
   "main": "index.js",
   "type": "module",

mobile/android/fastlane/Fastfile

@@ -35,8 +35,8 @@ platform :android do
       task: 'bundle', 
       build_type: 'Release',
       properties: {
-        "android.injected.version.code" => 204,
+        "android.injected.version.code" => 205,
-        "android.injected.version.name" => "1.135.3",
+        "android.injected.version.name" => "1.136.0",
       }
     )
     upload_to_play_store(skip_upload_apk: true, skip_upload_images: true, skip_upload_screenshots: true, aab: '../build/app/outputs/bundle/release/app-release.aab')

mobile/ios/fastlane/Fastfile

@@ -22,7 +22,7 @@ platform :ios do
       path: "./Runner.xcodeproj",
     )
     increment_version_number(
-      version_number: "1.135.3"
+      version_number: "1.136.0"
     )
     increment_build_number(
       build_number: latest_testflight_build_number + 1,

mobile/openapi/README.md

@@ -3,7 +3,7 @@ Immich API
 
 This Dart package is automatically generated by the [OpenAPI Generator](https://openapi-generator.tech) project:
 
-- API version: 1.135.3
+- API version: 1.136.0
 - Generator version: 7.8.0
 - Build package: org.openapitools.codegen.languages.DartClientCodegen
 

mobile/pubspec.yaml

@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone
 
 publish_to: 'none'
-version: 1.135.3+204
+version: 1.136.0+205
 
 environment:
   sdk: '>=3.3.0 <4.0.0'

open-api/immich-openapi-specs.json

@@ -8663,7 +8663,7 @@
   "info": {
     "title": "Immich",
     "description": "Immich API",
-    "version": "1.135.3",
+    "version": "1.136.0",
     "contact": {}
   },
   "tags": [],

open-api/typescript-sdk/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@immich/sdk",
-  "version": "1.135.3",
+  "version": "1.136.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@immich/sdk",
-      "version": "1.135.3",
+      "version": "1.136.0",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@oazapfts/runtime": "^1.0.2"

open-api/typescript-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/sdk",
-  "version": "1.135.3",
+  "version": "1.136.0",
   "description": "Auto-generated TypeScript SDK for the Immich API",
   "type": "module",
   "main": "./build/index.js",

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

@@ -1,6 +1,6 @@
 /**
  * Immich
- * 1.135.3
+ * 1.136.0
  * DO NOT MODIFY - This file has been generated using oazapfts.
  * See https://www.npmjs.com/package/oazapfts
  */

server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "immich",
-  "version": "1.135.3",
+  "version": "1.136.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "immich",
-      "version": "1.135.3",
+      "version": "1.136.0",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@nestjs/bullmq": "^11.0.1",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich",
-  "version": "1.135.3",
+  "version": "1.136.0",
   "description": "",
   "author": "",
   "private": true,

server/src/repositories/logging.repository.ts

@@ -85,8 +85,13 @@ export class LoggingRepository {
     this.logger = new MyConsoleLogger(cls, { context: LoggingRepository.name, color: !noColor });
   }
 
-  static create() {
+  static create(context?: string) {
-    return new LoggingRepository(undefined, undefined);
+    const logger = new LoggingRepository(undefined, undefined);
+    if (context) {
+      logger.setContext(context);
+    }
+
+    return logger;
   }
 
   setAppName(name: string): void {

server/src/schema/migrations/1750323941566-UnsetPrewarmDimParameter.ts

@@ -1,25 +1,10 @@
-import { Kysely, sql } from 'kysely';
+// this file used to try to reset the `vchordrq.prewarm_dim;` parameter
+// that ends up being a problem on pg 15 + since the extension is not installed.
 
-export async function up(qb: Kysely<any>): Promise<void> {
+export async function up(): Promise<void> {
-  type Conf = { db: string; guc: string[] };
+  // noop
-  const res = await sql<Conf>`
-    select current_database() db, to_json(setconfig) guc
-    from pg_db_role_setting
-    where setdatabase = (select oid from pg_database where datname = current_database())
-      and setrole = 0;`.execute(qb);
-  if (res.rows.length === 0) {
-    return;
-  }
-
-  const { db, guc } = res.rows[0];
-  await sql.raw(`alter database "${db}" reset all;`).execute(qb);
-  for (const parameter of guc) {
-    const [key, value] = parameter.split('=');
-    if (key === 'vchordrq.prewarm_dim') {
-      continue;
-    }
-    await sql.raw(`alter database "${db}" set ${key} to ${value};`).execute(qb);
-  }
 }
 
-export async function down(): Promise<void> {}
+export async function down(): Promise<void> {
+  // noop
+}

server/src/schema/migrations/1752759108283-ConvertToAbsolutePaths.ts

@@ -1,8 +1,7 @@
 import { Kysely, sql } from 'kysely';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 
-const logger = LoggingRepository.create();
+const logger = LoggingRepository.create('Migrations');
-logger.setContext('Migrations');
 
 export async function up(db: Kysely<any>): Promise<void> {
   if (process.env.IMMICH_MEDIA_LOCATION) {

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

@@ -459,18 +459,34 @@ describe(AuthService.name, () => {
 
       mocks.apiKey.getKey.mockResolvedValue({ ...authApiKey, user: authUser });
 
-      await expect(
+      const result = sut.authenticate({
-        sut.authenticate({
+        headers: { 'x-api-key': 'auth_token' },
-          headers: { 'x-api-key': 'auth_token' },
+        queryParams: {},
-          queryParams: {},
+        metadata: { adminRoute: false, sharedLinkRoute: false, uri: 'test', permission: Permission.AssetRead },
-          metadata: { adminRoute: false, sharedLinkRoute: false, uri: 'test', permission: Permission.AssetRead },
+      });
-        }),
+
-      ).rejects.toBeInstanceOf(ForbiddenException);
+      await expect(result).rejects.toBeInstanceOf(ForbiddenException);
+      await expect(result).rejects.toThrow('Missing required permission: asset.read');
+    });
+
+    it('should default to requiring the all permission when omitted', async () => {
+      const authUser = factory.authUser();
+      const authApiKey = factory.authApiKey({ permissions: [Permission.AssetRead] });
+
+      mocks.apiKey.getKey.mockResolvedValue({ ...authApiKey, user: authUser });
+
+      const result = sut.authenticate({
+        headers: { 'x-api-key': 'auth_token' },
+        queryParams: {},
+        metadata: { adminRoute: false, sharedLinkRoute: false, uri: 'test' },
+      });
+      await expect(result).rejects.toBeInstanceOf(ForbiddenException);
+      await expect(result).rejects.toThrow('Missing required permission: all');
     });
 
     it('should return an auth dto', async () => {
       const authUser = factory.authUser();
-      const authApiKey = factory.authApiKey({ permissions: [] });
+      const authApiKey = factory.authApiKey({ permissions: [Permission.All] });
 
       mocks.apiKey.getKey.mockResolvedValue({ ...authApiKey, user: authUser });
 

server/src/services/auth.service.ts

@@ -174,7 +174,8 @@ export class AuthService extends BaseService {
 
   async authenticate({ headers, queryParams, metadata }: ValidateRequest): Promise<AuthDto> {
     const authDto = await this.validate({ headers, queryParams });
-    const { adminRoute, sharedLinkRoute, permission, uri } = metadata;
+    const { adminRoute, sharedLinkRoute, uri } = metadata;
+    const requestedPermission = metadata.permission ?? Permission.All;
 
     if (!authDto.user.isAdmin && adminRoute) {
       this.logger.warn(`Denied access to admin only route: ${uri}`);
@@ -186,8 +187,8 @@ export class AuthService extends BaseService {
       throw new ForbiddenException('Forbidden');
     }
 
-    if (authDto.apiKey && permission && !isGranted({ requested: [permission], current: authDto.apiKey.permissions })) {
+    if (authDto.apiKey && !isGranted({ requested: [requestedPermission], current: authDto.apiKey.permissions })) {
-      throw new ForbiddenException(`Missing required permission: ${permission}`);
+      throw new ForbiddenException(`Missing required permission: ${requestedPermission}`);
     }
 
     return authDto;

web/package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "immich-web",
-  "version": "1.135.3",
+  "version": "1.136.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "immich-web",
-      "version": "1.135.3",
+      "version": "1.136.0",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@formatjs/icu-messageformat-parser": "^2.9.8",
         "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.23.2",
+        "@immich/ui": "^0.23.5",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -94,7 +94,7 @@
     },
     "../open-api/typescript-sdk": {
       "name": "@immich/sdk",
-      "version": "1.135.3",
+      "version": "1.136.0",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@oazapfts/runtime": "^1.0.2"
@@ -1357,9 +1357,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.23.3",
+      "version": "0.23.5",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.23.3.tgz",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.23.5.tgz",
-      "integrity": "sha512-YbYJSv3HqDu2+6MmiHhLThSessZ6HkoVOWun/ZoGb8mKj5x/ZZ4AyXGPIqbyKTamsjzbcD9FInij70G+m4egkg==",
+      "integrity": "sha512-1wlFMmfDmtGC+Kcc8cYTT00mQaSumR41KEOOOmVn5Rw/8z9pUhpNY8mGl1AxY4qhtnaz+G3dH6vowYzL23D+YQ==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",
@@ -2512,6 +2512,66 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.4.3",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.0.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.4.3",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.0.2",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.11",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.9.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.9.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-web",
-  "version": "1.135.3",
+  "version": "1.136.0",
   "license": "GNU Affero General Public License version 3",
   "type": "module",
   "scripts": {
@@ -28,7 +28,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.23.2",
+    "@immich/ui": "^0.23.5",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/app.html

@@ -21,11 +21,6 @@
       html {
         height: 100%;
         width: 100%;
-        background-color: rgb(255, 255, 255);
-      }
-
-      html.dark {
-        background-color: rgb(10, 10, 10);
       }
 
       body,
@@ -34,10 +29,6 @@
         padding: 0;
       }
 
-      body {
-        transition: background-color 0.15s ease;
-      }
-
       @keyframes delayedVisibility {
         to {
           visibility: visible;

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -3,11 +3,11 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { getJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { JobCommand, JobName, sendJobCommand, type AllJobStatusResponseDto, type JobCommandDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import {
     mdiContentDuplicate,
     mdiFaceRecognition,

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -6,9 +6,9 @@
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
   import { OAuthTokenEndpointAuthMethod, type SystemConfigDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { isEqual } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';

web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte

@@ -4,11 +4,10 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import EmailTemplatePreviewModal from '$lib/modals/EmailTemplatePreviewModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, modalManager } from '@immich/ui';
   import { mdiEyeOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import MapModal from '$lib/modals/MapModal.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/album-page/albums-list.svelte

@@ -9,7 +9,6 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
   import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
@@ -38,6 +37,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { normalizeSearchString } from '$lib/utils/string-utils';
   import { addUsersToAlbum, deleteAlbum, isHttpError, type AlbumResponseDto, type AlbumUserAddDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiDeleteOutline, mdiFolderDownloadOutline, mdiRenameOutline, mdiShareVariantOutline } from '@mdi/js';
   import { groupBy } from 'lodash-es';
   import { onMount, type Snippet } from 'svelte';

web/src/lib/components/asset-viewer/actions/add-to-album-action.svelte

@@ -3,11 +3,11 @@
   import type { OnAction } from '$lib/components/asset-viewer/actions/action';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AssetAction } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
   import { addAssetsToAlbum } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AssetResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

web/src/lib/components/asset-viewer/actions/keep-this-delete-others.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-
   import { AssetAction } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { keepThisDeleteOthers } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AssetResponseDto, StackResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiPinOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction } from './action';

web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ProfileImageCropperModal from '$lib/modals/ProfileImageCropperModal.svelte';
   import type { AssetResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiAccountCircleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-
   import { AssetAction } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetVisibility, updateAssets } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiLockOpenVariantOutline, mdiLockOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction, PreAction } from './action';

web/src/lib/components/asset-viewer/actions/share-action.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { makeSharedLinkUrl } from '$lib/utils';
   import type { AssetResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

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

@@ -3,10 +3,10 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
   import { removeTag } from '$lib/utils/asset-utils';
   import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiClose, mdiPlus } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

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

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { type AssetResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { ConfirmModal, IconButton } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -1,13 +1,12 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import { notificationController } from '$lib/components/shared-components/notification/notification';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
-  import { Button, Input } from '@immich/ui';
+  import { Button, Input, modalManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -2,10 +2,9 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
   import { ProgressBarStatus } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import SlideshowSettingsModal from '$lib/modals/SlideshowSettingsModal.svelte';
   import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { swipe } from 'svelte-gestures';

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -3,10 +3,9 @@
   import { page } from '$app/state';
   import Icon from '$lib/components/elements/icon.svelte';
   import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { getAllPeople, getPerson, mergePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -2,7 +2,6 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
@@ -20,7 +19,7 @@
     type AssetFaceResponseDto,
     type PersonResponseDto,
   } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiAccountOff, mdiArrowLeftThin, mdiPencil, mdiRestart, mdiTrashCan } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
   import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
   import { validate, type LibraryResponseDto } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/forms/library-scan-settings-form.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import LibraryExclusionPatternModal from '$lib/modals/LibraryExclusionPatternModal.svelte';
   import { type LibraryResponseDto } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiPencilOutline } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
   import type { OnAddToAlbum } from '$lib/utils/actions';
   import { addAssetsToAlbum } from '$lib/utils/asset-utils';
+  import { modalManager } from '@immich/ui';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';

web/src/lib/components/photos-page/actions/change-description-action.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import AssetUpdateDescriptionConfirmModal from '$lib/modals/AssetUpdateDescriptionConfirmModal.svelte';
-  import AssetUpdateDecriptionConfirmModal from '$lib/modals/AssetUpdateDecriptionConfirmModal.svelte';
   import { user } from '$lib/stores/user.store';
   import { getSelectedAssets } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiText } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
@@ -18,7 +18,7 @@
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
   const handleUpdateDescription = async () => {
-    const description = await modalManager.show(AssetUpdateDecriptionConfirmModal);
+    const description = await modalManager.show(AssetUpdateDescriptionConfirmModal);
     if (description) {
       const ids = getSelectedAssets(getOwnedAssets(), $user);
 

web/src/lib/components/photos-page/actions/create-shared-link.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { makeSharedLinkUrl } from '$lib/utils';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { IconButton } from '@immich/ui';
 
   const { getAssets } = getAssetControlContext();
 

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -3,9 +3,8 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

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

web/src/lib/components/photos-page/actions/set-visibility-action.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
-
   import type { OnSetVisibility } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetVisibility, updateAssets } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, modalManager } from '@immich/ui';
   import { mdiLockOpenVariantOutline, mdiLockOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

web/src/lib/components/photos-page/actions/tag-action.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiTagMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';

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

@@ -13,7 +13,6 @@
   import Scrubber from '$lib/components/shared-components/scrubber/scrubber.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -37,6 +36,7 @@
     type TimelinePlainYearMonth,
   } from '$lib/utils/timeline-util';
   import { AssetVisibility, getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { DateTime } from 'luxon';
   import { onMount, type Snippet } from 'svelte';
   import type { UpdatePayload } from 'vite';
@@ -729,7 +729,7 @@
     }
 
     isShortcutModalOpen = true;
-    await modalManager.show(ShortcutsModal);
+    await modalManager.show(ShortcutsModal, {});
     isShortcutModalOpen = false;
   };
 

web/src/lib/components/photos-page/delete-asset-dialog.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { Checkbox, Label } from '@immich/ui';
+  import { Checkbox, ConfirmModal, Label } from '@immich/ui';
   import { mdiDeleteForeverOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

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

@@ -12,8 +12,8 @@ describe('ChangeDate component', () => {
 
   const getDateInput = () => screen.getByLabelText('date_and_time') as HTMLInputElement;
   const getTimeZoneInput = () => screen.getByLabelText('timezone') as HTMLInputElement;
-  const getCancelButton = () => screen.getByText('cancel');
+  const getCancelButton = () => screen.getByText('Cancel');
-  const getConfirmButton = () => screen.getByText('confirm');
+  const getConfirmButton = () => screen.getByText('Confirm');
 
   beforeEach(() => {
     vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
+  import { ConfirmModal } from '@immich/ui';
   import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -184,8 +184,6 @@
   disabled={!date.isValid}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >
-  <!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
-  <!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
   {#snippet promptSnippet()}
     <div class="flex flex-col text-start gap-2">
       <div class="flex flex-col">

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

@@ -6,11 +6,11 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import type Map from '$lib/components/shared-components/map/map.svelte';
   import { timeDebounceOnSearch, timeToLoadTheMap } from '$lib/constants';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { lastChosenLocation } from '$lib/stores/asset-editor.store';
   import { delay } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
+  import { ConfirmModal } from '@immich/ui';
   import { mdiMapMarkerMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { get } from 'svelte/store';

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

@@ -4,7 +4,6 @@
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -20,6 +19,7 @@
   import { navigate } from '$lib/utils/navigation';
   import { isTimelineAsset, toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetVisibility, type AssetResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';

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

@@ -10,13 +10,13 @@
   import { afterNavigate } from '$app/navigation';
   import Icon from '$lib/components/elements/icon.svelte';
   import { Theme } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import MapSettingsModal from '$lib/modals/MapSettingsModal.svelte';
   import { mapSettings } from '$lib/stores/preferences.store';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
   import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';

web/src/lib/components/shared-components/modal-header.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
-  import { IconButton } from '@immich/ui';
-  import { mdiClose } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    /**
-     * Unique identifier for the header text.
-     */
-    id: string;
-    title: string;
-    onClose: () => void;
-    /**
-     * If true, the logo will be displayed next to the modal title.
-     */
-    showLogo?: boolean;
-    /**
-     * Optional icon to display next to the modal title, if `showLogo` is false.
-     */
-    icon?: string;
-  }
-
-  let { id, title, onClose, showLogo = false, icon = undefined }: Props = $props();
-</script>
-
-<div class="flex place-items-center justify-between px-5 pb-3">
-  <div class="flex gap-2 place-items-center">
-    {#if showLogo}
-      <ImmichLogo noText={true} class="h-[40px]" />
-    {:else if icon}
-      <Icon path={icon} size={24} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
-    {/if}
-    <h1 {id}>
-      {title}
-    </h1>
-  </div>
-
-  <IconButton
-    shape="round"
-    color="secondary"
-    variant="ghost"
-    onclick={onClose}
-    icon={mdiClose}
-    size="medium"
-    aria-label={$t('close')}
-  />
-</div>

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -3,13 +3,12 @@
   import { focusTrap } from '$lib/actions/focus-trap';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
   import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
   import { user } from '$lib/stores/user.store';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -3,14 +3,13 @@
   import { focusOutside } from '$lib/actions/focus-outside';
   import { shortcuts } from '$lib/actions/shortcut';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import SearchFilterModal from '$lib/modals/SearchFilterModal.svelte';
   import { searchStore } from '$lib/stores/search.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { generateId } from '$lib/utils/generate-id';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
   import { onDestroy, tick } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/components/shared-components/side-bar/purchase-info.svelte

@@ -5,7 +5,6 @@
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { preferences } from '$lib/stores/user.store';
@@ -13,11 +12,11 @@
   import { handleError } from '$lib/utils/handle-error';
   import { getButtonVisibility } from '$lib/utils/purchase-utils';
   import { updateMyPreferences } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiClose, mdiInformationOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
   import { SvelteDate } from 'svelte/reactivity';
+  import { fade } from 'svelte/transition';
 
   let showMessage = $state(false);
   let hoverMessage = $state(false);

web/src/lib/components/shared-components/side-bar/server-status.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ServerAboutModal from '$lib/modals/ServerAboutModal.svelte';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { websocketStore } from '$lib/stores/websocket';
@@ -11,6 +10,7 @@
     type ServerAboutResponseDto,
     type ServerVersionHistoryResponseDto,
   } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { mdiAlert } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, modalManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import PartnerSelectionModal from '$lib/modals/PartnerSelectionModal.svelte';
   import {
     createPartner,
@@ -12,7 +11,7 @@
     type PartnerResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { dateFormats } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ApiKeyModal from '$lib/modals/ApiKeyModal.svelte';
   import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { createApiKey, deleteApiKey, getApiKeys, updateApiKey, type ApiKeyResponseDto } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';

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

@@ -5,7 +5,6 @@
   import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { dateFormats } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { preferences, user } from '$lib/stores/user.store';
@@ -20,7 +19,7 @@
     isHttpError,
     type LicenseResponseDto,
   } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, modalManager } from '@immich/ui';
   import { mdiKey } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -1,53 +0,0 @@
-import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
-import { mount, unmount, type Component, type ComponentProps } from 'svelte';
-
-type OnCloseData<T> = T extends { onClose: (data?: infer R) => void }
-  ? R | undefined
-  : T extends { onClose: (data: infer R) => void }
-    ? R
-    : never;
-type ExtendsEmptyObject<T> = keyof T extends never ? never : T;
-type StripValueIfOptional<T> = T extends undefined ? undefined : T;
-
-// if the modal does not expect any props, makes the props param optional but also allows passing `{}` and `undefined`
-type OptionalParamIfEmpty<T> = ExtendsEmptyObject<T> extends never ? [] | [Record<string, never> | undefined] : [T];
-
-class ModalManager {
-  show<T extends object>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>) {
-    return this.open(Component, ...props).onClose;
-  }
-
-  open<T extends object, K = OnCloseData<T>>(
-    Component: Component<T>,
-    ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>
-  ) {
-    let modal: object = {};
-    let onClose: (...args: [StripValueIfOptional<K>]) => Promise<void>;
-
-    const deferred = new Promise<StripValueIfOptional<K>>((resolve) => {
-      onClose = async (...args: [StripValueIfOptional<K>]) => {
-        await unmount(modal);
-        setTimeout(() => resolve(args?.[0]), 0);
-      };
-
-      modal = mount(Component, {
-        target: document.body,
-        props: {
-          ...((props?.[0] ?? {}) as T),
-          onClose,
-        },
-      });
-    });
-
-    return {
-      onClose: deferred,
-      close: (...args: [StripValueIfOptional<K>]) => onClose(args[0]),
-    };
-  }
-
-  showDialog(options: Omit<ComponentProps<typeof ConfirmModal>, 'onClose'>) {
-    return this.show(ConfirmModal, options);
-  }
-}
-
-export const modalManager = new ModalManager();

web/src/lib/modals/AlbumOptionsModal.svelte

@@ -4,7 +4,6 @@
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import {
     AlbumUserRole,
@@ -15,7 +14,7 @@
     type AlbumResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Modal, ModalBody } from '@immich/ui';
+  import { Modal, ModalBody, modalManager } from '@immich/ui';
   import { mdiArrowDownThin, mdiArrowUpThin, mdiDotsVertical, mdiPlus } from '@mdi/js';
   import { findKey } from 'lodash-es';
   import { t } from 'svelte-i18n';

web/src/lib/modals/AlbumUsersModal.svelte

@@ -6,7 +6,6 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import {
     AlbumUserRole,
@@ -16,7 +15,7 @@
     type AlbumResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Modal, ModalBody } from '@immich/ui';
+  import { Modal, ModalBody, modalManager } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/lib/modals/AssetUpdateDescriptionConfirmModal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
+  import { ConfirmModal, Input } from '@immich/ui';
-  import { Input } from '@immich/ui';
   import { mdiText } from '@mdi/js';
   import { t } from 'svelte-i18n';
 

web/src/lib/modals/ConfirmModal.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { Button, HStack, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
-  import type { Snippet } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    title?: string;
-    prompt?: string;
-    confirmText?: string;
-    confirmColor?: Color;
-    disabled?: boolean;
-    size?: 'small' | 'medium';
-    icon?: string;
-    onClose: (confirmed: boolean) => void;
-    promptSnippet?: Snippet;
-  }
-
-  let {
-    title = $t('confirm'),
-    prompt = $t('are_you_sure_to_do_this'),
-    confirmText = $t('confirm'),
-    confirmColor = 'danger',
-    disabled = false,
-    size = 'small',
-    icon = undefined,
-    onClose,
-    promptSnippet,
-  }: Props = $props();
-
-  const handleConfirm = () => {
-    onClose(true);
-  };
-</script>
-
-<Modal {title} {icon} onClose={() => onClose(false)} {size}>
-  <ModalBody>
-    {#if promptSnippet}{@render promptSnippet()}{:else}
-      <p>{prompt}</p>
-    {/if}
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
-        {$t('cancel')}
-      </Button>
-      <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
-        {confirmText}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>

web/src/lib/modals/JobCreateModal.svelte

@@ -4,9 +4,9 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { createJob, ManualJobName } from '@immich/sdk';
+  import { ConfirmModal } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   type Props = { onClose: (confirmed: boolean) => void };

web/src/lib/modals/UserDeleteConfirmModal.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { deleteUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
-  import { Checkbox, Label } from '@immich/ui';
+  import { Checkbox, ConfirmModal, Label } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {

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

@@ -1,6 +1,5 @@
 import { goto } from '$app/navigation';
 import { AppRoute } from '$lib/constants';
-import { modalManager } from '$lib/managers/modal-manager.svelte';
 import {
   AlbumFilter,
   AlbumGroupBy,
@@ -13,6 +12,7 @@ import {
 import { handleError } from '$lib/utils/handle-error';
 import type { AlbumResponseDto } from '@immich/sdk';
 import * as sdk from '@immich/sdk';
+import { modalManager } from '@immich/ui';
 import { orderBy } from 'lodash-es';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';

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

@@ -34,7 +34,6 @@
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AlbumPageViewMode, AppRoute } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
@@ -70,7 +69,7 @@
     updateAlbumInfo,
     type AlbumUserAddDto,
   } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import {
     mdiArrowLeft,
     mdiCogOutline,

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

@@ -15,7 +15,6 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import { ActionQueryParameterValue, AppRoute, QueryParameter, SessionStorageKey } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
   import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
@@ -24,7 +23,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { clearQueryParam } from '$lib/utils/navigation';
   import { getAllPeople, getPerson, searchPerson, updatePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, modalManager } from '@immich/ui';
   import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -31,7 +31,6 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
@@ -51,6 +50,7 @@
     updatePerson,
     type PersonResponseDto,
   } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import {
     mdiAccountBoxOutline,
     mdiAccountMultipleCheckOutline,

web/src/routes/(user)/shared-links/[[id=id]]/+page.svelte

@@ -9,10 +9,10 @@
   } from '$lib/components/shared-components/notification/notification';
   import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { getAllSharedLinks, removeSharedLink, SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';

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

@@ -8,14 +8,13 @@
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
   import { AppRoute, AssetAction, QueryParameter } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import TagCreateModal from '$lib/modals/TagCreateModal.svelte';
   import TagEditModal from '$lib/modals/TagEditModal.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
   import { deleteTag, getAllTags, type TagResponseDto } from '@immich/sdk';
-  import { Button, HStack, Text } from '@immich/ui';
+  import { Button, HStack, modalManager, Text } from '@immich/ui';
   import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -9,18 +9,17 @@
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
-    NotificationType,
     notificationController,
+    NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { emptyTrash, restoreTrash } from '@immich/sdk';
-  import { Button, HStack, Text } from '@immich/ui';
+  import { Button, HStack, modalManager, Text } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';

web/src/routes/(user)/user-settings/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
-  import { Container, IconButton } from '@immich/ui';
+  import { Container, IconButton, modalManager } from '@immich/ui';
   import { mdiKeyboard } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';

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

@@ -1,11 +1,10 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import {
-    NotificationType,
     notificationController,
+    NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import DuplicatesInformationModal from '$lib/modals/DuplicatesInformationModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
@@ -15,7 +14,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import type { AssetResponseDto } from '@immich/sdk';
   import { deleteAssets, deleteDuplicates, updateAssets } from '@immich/sdk';
-  import { Button, HStack, IconButton, Text } from '@immich/ui';
+  import { Button, HStack, IconButton, modalManager, Text } from '@immich/ui';
   import { mdiCheckOutline, mdiInformationOutline, mdiKeyboard, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';

web/src/routes/+layout.svelte

@@ -9,7 +9,6 @@
   import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
@@ -22,7 +21,7 @@
   import { copyToClipboard } from '$lib/utils';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
   import type { ServerVersionResponseDto } from '@immich/sdk';
-  import { setTranslations } from '@immich/ui';
+  import { modalManager, setTranslations } from '@immich/ui';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { run } from 'svelte/legacy';

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

@@ -2,11 +2,10 @@
   import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
   import { asyncTimeout } from '$lib/utils';
   import { getAllJobsStatus, type AllJobStatusResponseDto } from '@immich/sdk';
-  import { Button, HStack, Text } from '@immich/ui';
+  import { Button, HStack, modalManager, Text } from '@immich/ui';
   import { mdiCog, mdiPlus } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -10,7 +10,6 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
   import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
   import LibraryUserPickerModal from '$lib/modals/LibraryUserPickerModal.svelte';
@@ -32,7 +31,7 @@
     type LibraryStatsResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button, Text } from '@immich/ui';
+  import { Button, modalManager, Text } from '@immich/ui';
   import { mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';

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

@@ -7,7 +7,6 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
   import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
   import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
@@ -17,7 +16,7 @@
   import { websocketEvents } from '$lib/stores/websocket';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { UserStatus, searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, HStack, IconButton, Text } from '@immich/ui';
+  import { Button, HStack, IconButton, Text, modalManager } from '@immich/ui';
   import { mdiDeleteRestore, mdiEyeOutline, mdiInfinity, mdiPlusBoxOutline, mdiTrashCanOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { onMount } from 'svelte';

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

@@ -1,12 +1,12 @@
 <script lang="ts">
   import StatsCard from '$lib/components/admin-page/server-stats/stats-card.svelte';
+  import FeatureSetting from '$lib/components/admin-page/user/feature-setting.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
   import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
   import UserEditModal from '$lib/modals/UserEditModal.svelte';
@@ -29,6 +29,7 @@
     Heading,
     HStack,
     Icon,
+    modalManager,
     Stack,
     Text,
   } from '@immich/ui';
@@ -48,7 +49,6 @@
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import FeatureSetting from '$lib/components/admin-page/user/feature-setting.svelte';
 
   interface Props {
     data: PageData;