fix(deps): update typescript-projects

Revert "fix(deps): update typescript-projects (#8647 )" (#8650 )
This reverts commit 301c217303.
2024-04-09 04:56:55 +00:00 · 2024-04-09 06:53:48 +02:00 · 2024-04-08 23:44:48 -04:00 · 2024-04-08 22:34:09 -04:00 · 2024-04-08 22:33:50 -04:00 · 2024-04-08 19:01:57 -04:00
93 changed files with 2359 additions and 2503 deletions
@@ -6,13 +6,14 @@ body:
    attributes:
      value: |
        Please use this form to request new feature for Immich
-  
+
  - type: checkboxes
    attributes:
+      label: I have searched the existing feature requests to make sure this is not a duplicate request.
      options:
-        - label: I have searched the existing feature requests to make sure this is not a duplicate request.
+        - label: "Yes"
          required: true
-  
+
  - type: textarea
    id: feature
    attributes:
@@ -0,0 +1,4 @@
+/.github/ @bo0tzz
+/docker/ @bo0tzz
+/server/ @danieldietzler
+/e2e/ @danieldietzler
@@ -1,4 +1,4 @@
-FROM node:20-alpine3.19@sha256:ef3f47741e161900ddd07addcaca7e76534a9205e4cd73b2ed091ba339004a75 as core
+FROM node:20-alpine3.19@sha256:7e227295e96f5b00aa79555ae166f50610940d888fc2e321cf36304cbd17d7d6 as core

 WORKDIR /usr/src/open-api/typescript-sdk
 COPY open-api/typescript-sdk/package*.json open-api/typescript-sdk/tsconfig*.json ./
@@ -54,7 +54,7 @@
        "@oazapfts/runtime": "^1.0.2"
      },
      "devDependencies": {
-        "@types/node": "^20.11.0",
+        "@types/node": "^20.12.4",
        "typescript": "^5.3.3"
      }
    },
@@ -1230,9 +1230,9 @@
      }
    },
    "node_modules/@types/node": {
-      "version": "20.11.30",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
-      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "version": "20.12.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz",
+      "integrity": "sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==",
      "dev": true,
      "dependencies": {
        "undici-types": "~5.26.4"
@@ -1251,16 +1251,16 @@
      "dev": true
    },
    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz",
-      "integrity": "sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.5.0.tgz",
+      "integrity": "sha512-HpqNTH8Du34nLxbKgVMGljZMG0rJd2O9ecvr2QLYp+7512ty1j42KnsFwspPXg1Vh8an9YImf6CokUBltisZFQ==",
      "dev": true,
      "dependencies": {
        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/type-utils": "7.4.0",
-        "@typescript-eslint/utils": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/type-utils": "7.5.0",
+        "@typescript-eslint/utils": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4",
        "graphemer": "^1.4.0",
        "ignore": "^5.2.4",
@@ -1286,15 +1286,15 @@
      }
    },
    "node_modules/@typescript-eslint/parser": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.4.0.tgz",
-      "integrity": "sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.5.0.tgz",
+      "integrity": "sha512-cj+XGhNujfD2/wzR1tabNsidnYRaFfEkcULdcIyVBYcXjBvBKOes+mpMBP7hMpOyk+gBcfXsrg4NBGAStQyxjQ==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/typescript-estree": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4"
      },
      "engines": {
@@ -1314,13 +1314,13 @@
      }
    },
    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz",
-      "integrity": "sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.5.0.tgz",
+      "integrity": "sha512-Z1r7uJY0MDeUlql9XJ6kRVgk/sP11sr3HKXn268HZyqL7i4cEfrdFuSSY/0tUqT37l5zT0tJOsuDP16kio85iA==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0"
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0"
      },
      "engines": {
        "node": "^18.18.0 || >=20.0.0"
@@ -1331,13 +1331,13 @@
      }
    },
    "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz",
-      "integrity": "sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.5.0.tgz",
+      "integrity": "sha512-A021Rj33+G8mx2Dqh0nMO9GyjjIBK3MqgVgZ2qlKf6CJy51wY/lkkFqq3TqqnH34XyAHUkq27IjlUkWlQRpLHw==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.4.0",
-        "@typescript-eslint/utils": "7.4.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
+        "@typescript-eslint/utils": "7.5.0",
        "debug": "^4.3.4",
        "ts-api-utils": "^1.0.1"
      },
@@ -1358,9 +1358,9 @@
      }
    },
    "node_modules/@typescript-eslint/types": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.4.0.tgz",
-      "integrity": "sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.5.0.tgz",
+      "integrity": "sha512-tv5B4IHeAdhR7uS4+bf8Ov3k793VEVHd45viRRkehIUZxm0WF82VPiLgHzA/Xl4TGPg1ZD49vfxBKFPecD5/mg==",
      "dev": true,
      "engines": {
        "node": "^18.18.0 || >=20.0.0"
@@ -1371,13 +1371,13 @@
      }
    },
    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz",
-      "integrity": "sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.5.0.tgz",
+      "integrity": "sha512-YklQQfe0Rv2PZEueLTUffiQGKQneiIEKKnfIqPIOxgM9lKSZFCjT5Ad4VqRKj/U4+kQE3fa8YQpskViL7WjdPQ==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4",
        "globby": "^11.1.0",
        "is-glob": "^4.0.3",
@@ -1399,17 +1399,17 @@
      }
    },
    "node_modules/@typescript-eslint/utils": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.4.0.tgz",
-      "integrity": "sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.5.0.tgz",
+      "integrity": "sha512-3vZl9u0R+/FLQcpy2EHyRGNqAS/ofJ3Ji8aebilfJe+fobK8+LbIFmrHciLVDxjDoONmufDcnVSF38KwMEOjzw==",
      "dev": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.4.0",
        "@types/json-schema": "^7.0.12",
        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/typescript-estree": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
        "semver": "^7.5.4"
      },
      "engines": {
@@ -1424,12 +1424,12 @@
      }
    },
    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz",
-      "integrity": "sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.5.0.tgz",
+      "integrity": "sha512-mcuHM/QircmA6O7fy6nn2w/3ditQkj+SgtOc8DW3uQ10Yfj42amm2i+6F2K4YAOPNNTmE6iM1ynM6lrSwdendA==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
+        "@typescript-eslint/types": "7.5.0",
        "eslint-visitor-keys": "^3.4.1"
      },
      "engines": {
@@ -4456,9 +4456,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.7.tgz",
-      "integrity": "sha512-k14PWOKLI6pMaSzAuGtT+Cf0YmIx12z9YGon39onaJNy8DLBfBJrzg9FQEmkAM5lpHBZs9wksWAsyF/HkpEwJA==",
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
      "dev": true,
      "dependencies": {
        "esbuild": "^0.20.1",
@@ -69,9 +69,8 @@ services:
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
    volumes:
-      - pgdata:/var/lib/postgresql/data
+      - ${DB_DATA_LOCATION}:/var/lib/postgresql/data
    restart: always

 volumes:
-  pgdata:
  model-cache:
@@ -14,5 +14,6 @@ DB_PASSWORD=postgres
 DB_HOSTNAME=immich_postgres
 DB_USERNAME=postgres
 DB_DATABASE_NAME=immich
+DB_DATA_LOCATION=./postgres

 REDIS_HOSTNAME=immich_redis
@@ -1,17 +1,57 @@
 # Partner Sharing

-Immich allows you to share your library with other users. They can then view your library and download the assets.
-
-You can manage one or multiple users to have access to your library from the [User Settings](docs/features/user-settings.md) page.
-
-<img src={require('./img/partner-sharing-1.png').default} title='Partner Sharing 1' />
-
-<img src={require('./img/partner-sharing-2.png').default} title='Partner Sharing 2' />
-
-Accessing the shared library can be done from the Sharing page.
-
-<img src={require('./img/partner-sharing-3.png').default} title='Partner Sharing 3' />
-
 :::tip Sharing specific assets
 For sharing a specific set of assets, you can use the shared album feature of Immich.
 :::
+
+Immich allows you to share your library with other users. They can then view your library and download the assets. You can manage Partner Sharing from the [User Settings](docs/features/user-settings.md) page on the web.
+
+Partner Sharing includes:
+
+- Access to all non-archived and trashed photos and videos.
+- Access to all metadata, including GPS information.
+- Access to share assets via shared links, albums, etc.
+
+:::info
+Partner sharing is one-way. To view your partner's assets, they must also share them with you.
+:::
+
+## Sharing with a Partner
+
+:::note Duplicates
+Partner sharing may result in displaying duplicate assets on the main timeline.
+:::
+
+<img src={require('./img/partner-sharing-1.png').default} width="70%" title='Add Partner 1' />
+
+<img src={require('./img/partner-sharing-2.png').default} width="70%" title='Add Partner 2' />
+
+<img src={require('./img/partner-sharing-4.png').default} width="70%" title='Add Partner 4' />
+
+## Viewing Partner Assets
+
+Access partner assets via the Sharing page.
+
+<img src={require('./img/partner-sharing-3.png').default} width="70%" title='Access to the Shared Library' />
+
+## Timeline Integration
+
+Partner shared photos can be displayed in the main timeline. This feature can be enabled on a per-partner basis and can be viewed and updated on both the web and mobile app.
+
+### Web:
+
+Account Settings -> Sharing -> Show in timeline
+
+<img src={require('./img/partner-sharing-5.png').default} width="70%" title='Partner Sharing for the web interface' />
+
+### Mobile App:
+
+From the partner’s view, on the top right corner of the app bar
+
+<img src={require('./img/partner-sharing-6.png').default} width="30%" title='Partner Sharing for the mobile app' />
+
+## Removing Access
+
+In order to remove a partner, you can go to User -> Account Settings -> Sharing and click on the X button.
+
+<img src={require('./img/partner-sharing-7.png').default} width="70%" title='Remove Partner' />
@@ -8,7 +8,7 @@ During Exif Extraction, assets with latitudes and longitudes are reverse geocode

 ## Usage

-Data from a reverse geocode is displayed in the image details, and used in [Search](/docs/features/search.md).
+Data from a reverse geocode is displayed in the image details, and used in [Smart Search](/docs/features/smart-search.md).

 <img src={require('./img/reverse-geocoding-mobile1.png').default} width='33%' title='Reverse Geocoding' />
 <img src={require('./img/reverse-geocoding-mobile2.png').default} width='33%' title='Reverse Geocoding' />
@@ -1,14 +0,0 @@
-# Search
-
-Immich uses Postgres as its search database for both metadata and smart search.
-
-Smart search is powered by the [pgvecto.rs](https://github.com/tensorchord/pgvecto.rs) extension, utilizing machine learning models like CLIP to provide relevant search results. This allows for freeform searches without requiring specific keywords in the image or video metadata.
-
-Metadata search (prefixed with `m:`) can search specifically by text without the use of a model.
-
-Archived photos are not included in search results by default. To include them, add the query parameter `withArchived=true` to the url.
-
-Some search examples:
-<img src={require('./img/search-ex-2.webp').default} title='Search Example 1' />
-
-<img src={require('./img/search-ex-3.webp').default} title='Search Example 2' />
@@ -0,0 +1,49 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Smart Search
+
+Immich uses Postgres as its search database for both metadata and smart search.
+
+Smart search is powered by the [pgvecto.rs](https://github.com/tensorchord/pgvecto.rs) extension, utilizing machine learning models like [CLIP](https://openai.com/research/clip) to provide relevant search results. This allows for freeform searches without requiring specific keywords in the image or video metadata.
+
+Archived photos are not included in search results by default. To include them, mark the checkbox in [advanced search filters](/docs/features/smart-search#advanced-search-filters).
+
+:::tip Alternative CLIP Models
+More powerful models can be used for more accurate search results. For more information, see the related [FAQ](/docs/FAQ#can-i-use-a-custom-clip-model).
+:::
+
+:::info
+Smart Search is currently limited to 5,000 results for a single search on the web.
+:::
+
+## Advanced Search Filters
+
+In addition, Immich offers advanced search functionality, allowing you to find specific content using customizable search filters. These filters include location, one or more faces, specific albums, and more. You can try out the search filters on the [Demo site](https://demo.immich.app).
+
+Smart search features include:
+
+- Search for one or more faces (with or without context search).
+- Search by Country or State or City or by all three.
+- Search by camera make and model.
+- Search by date range.
+- Search by file name.
+- Search by media types: image, video or all (**Note:** Image includes live images).
+- Search by condition: not in any album or archive or Favorite or all conditions.
+
+<Tabs>
+  <TabItem value="Computer" label="Computer" default>
+
+Some search examples:
+
+<img src={require('./img/advanced-search-filters.webp').default} width="70%" title='Advanced search filters' />
+
+<img src={require('./img/search-ex-1.png').default} width="70%" title='Search Example 1' />
+
+</TabItem>
+  <TabItem value="Mobile" label="Mobile">
+
+<img src={require('./img/moblie-smart-serach.webp').default} width="30%" title='Smart search on mobile' />
+
+</TabItem>
+</Tabs>
@@ -4,7 +4,7 @@ To alleviate [performance issues on low-memory systems](/docs/FAQ.mdx#why-is-imm

 - Set the URL in Machine Learning Settings on the Admin Settings page to point to the designated ML system, e.g. `http://workstation:3003`.
 - Copy the following `docker-compose.yml` to your ML system.
- Start the container by running `docker-compose up -d` or `docker compose up -d` (depending on your Docker version).
+- Start the container by running `docker compose up -d`.

 :::note Info
 Starting with version v1.93.0 face detection work and face recognize were split. From now on face detection is done in the immich_machine_learning service, but facial recognition is done in the immich_microservices service.
@@ -11,6 +11,10 @@ Hardware and software requirements for Immich
 - [Docker](https://docs.docker.com/get-docker/)
 - [Docker Compose](https://docs.docker.com/compose/install/)

+:::note
+Immich requires the command `docker compose` - the similarly named `docker-compose` is [deprecated](https://docs.docker.com/compose/migrate/) and is no longer compatible with Immich.
+:::
+
 :::info Podman
 You can also use Podman to run the application. However, additional configuration might be required.
 :::
@@ -17,12 +17,11 @@ curl -o- https://raw.githubusercontent.com/immich-app/immich/main/install.sh | b
 The script will perform the following actions:

 1. Download [docker-compose.yml](https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml), and the [.env](https://github.com/immich-app/immich/releases/latest/download/example.env) file from the main branch of the [repository](https://github.com/immich-app/immich).
-2. Populate the `.env` file with necessary information based on the current directory path.
-3. Start the containers.
+2. Start the containers.

 The web application will be available at `http://<machine-ip-address>:2283`, and the server URL for the mobile app will be `http://<machine-ip-address>:2283/api`

-The directory which is used to store the library files is `./immich-data` relative to the current directory.
+The directory which is used to store the library files is `./immich-app` relative to the current directory.

 :::tip
 For common next steps, see [Post Install Steps](/docs/install/post-install.mdx).
@@ -98,7 +98,7 @@ alt="Select Plugins > Compose.Manager > Add New Stack > Label it Immich"

    > Note: This can take several minutes depending on your Internet speed and Unraid hardware

-9.  Once on the Docker page you will see several Immich containers, one of them will be labelled `immich_web` and will have a port mapping. Visit the `IP:PORT` displayed in your web browser and you should see the Immich admin setup page.
+9.  Once on the Docker page you will see several Immich containers, one of them will be labelled `immich_server` and will have a port mapping. Visit the `IP:PORT` displayed in your web browser and you should see the Immich admin setup page.

 <img
 src={require('./img/unraid06.webp').default}
@@ -2185,9 +2185,9 @@
      }
    },
    "node_modules/@docusaurus/core": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.1.1.tgz",
-      "integrity": "sha512-2nQfKFcf+MLEM7JXsXwQxPOmQAR6ytKMZVSx7tVi9HEm9WtfwBH1fp6bn8Gj4zLUhjWKCLoysQ9/Wm+EZCQ4yQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-WTO6vW4404nhTmK9NL+95nd13I1JveFwZ8iOBYxb4xt+N2S3KzY+mm+1YtWw2vV37FbYfH+w+KrlrRaWuy5Hzw==",
      "dependencies": {
        "@babel/core": "^7.23.3",
        "@babel/generator": "^7.23.3",
@@ -2199,14 +2199,13 @@
        "@babel/runtime": "^7.22.6",
        "@babel/runtime-corejs3": "^7.22.6",
        "@babel/traverse": "^7.22.8",
-        "@docusaurus/cssnano-preset": "3.1.1",
-        "@docusaurus/logger": "3.1.1",
-        "@docusaurus/mdx-loader": "3.1.1",
+        "@docusaurus/cssnano-preset": "3.2.0",
+        "@docusaurus/logger": "3.2.0",
+        "@docusaurus/mdx-loader": "3.2.0",
        "@docusaurus/react-loadable": "5.5.2",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-common": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
-        "@slorber/static-site-generator-webpack-plugin": "^4.0.7",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-common": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "@svgr/webpack": "^6.5.1",
        "autoprefixer": "^10.4.14",
        "babel-loader": "^9.1.3",
@@ -2227,6 +2226,7 @@
        "detect-port": "^1.5.1",
        "escape-html": "^1.0.3",
        "eta": "^2.2.0",
+        "eval": "^0.1.8",
        "file-loader": "^6.2.0",
        "fs-extra": "^11.1.1",
        "html-minifier-terser": "^7.2.0",
@@ -2235,6 +2235,7 @@
        "leven": "^3.1.0",
        "lodash": "^4.17.21",
        "mini-css-extract-plugin": "^2.7.6",
+        "p-map": "^4.0.0",
        "postcss": "^8.4.26",
        "postcss-loader": "^7.3.3",
        "prompts": "^2.4.2",
@@ -2271,9 +2272,9 @@
      }
    },
    "node_modules/@docusaurus/cssnano-preset": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.1.1.tgz",
-      "integrity": "sha512-LnoIDjJWbirdbVZDMq+4hwmrTl2yHDnBf9MLG9qyExeAE3ac35s4yUhJI8yyTCdixzNfKit4cbXblzzqMu4+8g==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.2.0.tgz",
+      "integrity": "sha512-H88RXGUia7r/VF3XfyoA4kbwgpUZcKsObF6VvwBOP91EdArTf6lnHbJ/x8Ca79KS/zf98qaWyBGzW+5ez58Iyw==",
      "dependencies": {
        "cssnano-preset-advanced": "^5.3.10",
        "postcss": "^8.4.26",
@@ -2285,9 +2286,9 @@
      }
    },
    "node_modules/@docusaurus/logger": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.1.1.tgz",
-      "integrity": "sha512-BjkNDpQzewcTnST8trx4idSoAla6zZ3w22NqM/UMcFtvYJgmoE4layuTzlfql3VFPNuivvj7BOExa/+21y4X2Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.2.0.tgz",
+      "integrity": "sha512-Z1R1NcOGXZ8CkIJSvjvyxnuDDSlx/+1xlh20iVTw1DZRjonFmI3T3tTgk40YpXyWUYQpIgAoqqPMpuseMMdgRQ==",
      "dependencies": {
        "chalk": "^4.1.2",
        "tslib": "^2.6.0"
@@ -2297,15 +2298,13 @@
      }
    },
    "node_modules/@docusaurus/mdx-loader": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.1.1.tgz",
-      "integrity": "sha512-xN2IccH9+sv7TmxwsDJNS97BHdmlqWwho+kIVY4tcCXkp+k4QuzvWBeunIMzeayY4Fu13A6sAjHGv5qm72KyGA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.2.0.tgz",
+      "integrity": "sha512-JtkI5o6R/rJSr1Y23cHKz085aBJCvJw3AYHihJ7r+mBX+O8EuQIynG0e6/XpbSCpr7Ino0U50UtxaXcEbFwg9Q==",
      "dependencies": {
-        "@babel/parser": "^7.22.7",
-        "@babel/traverse": "^7.22.8",
-        "@docusaurus/logger": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/logger": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "@mdx-js/mdx": "^3.0.0",
        "@slorber/remark-comment": "^1.0.0",
        "escape-html": "^1.0.3",
@@ -2337,12 +2336,12 @@
      }
    },
    "node_modules/@docusaurus/module-type-aliases": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-3.1.1.tgz",
-      "integrity": "sha512-xBJyx0TMfAfVZ9ZeIOb1awdXgR4YJMocIEzTps91rq+hJDFJgJaylDtmoRhUxkwuYmNK1GJpW95b7DLztSBJ3A==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-3.2.0.tgz",
+      "integrity": "sha512-jRSp9YkvBwwNz6Xgy0RJPsnie+Ebb//gy7GdbkJ2pW2gvvlYKGib2+jSF0pfIzvyZLulfCynS1KQdvDKdSl8zQ==",
      "dependencies": {
        "@docusaurus/react-loadable": "5.5.2",
-        "@docusaurus/types": "3.1.1",
+        "@docusaurus/types": "3.2.0",
        "@types/history": "^4.7.11",
        "@types/react": "*",
        "@types/react-router-config": "*",
@@ -2356,17 +2355,17 @@
      }
    },
    "node_modules/@docusaurus/plugin-content-blog": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.1.1.tgz",
-      "integrity": "sha512-ew/3VtVoG3emoAKmoZl7oKe1zdFOsI0NbcHS26kIxt2Z8vcXKCUgK9jJJrz0TbOipyETPhqwq4nbitrY3baibg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.2.0.tgz",
+      "integrity": "sha512-MABqwjSicyHmYEfQueMthPCz18JkVxhK3EGhXTSRWwReAZ0UTuw9pG6+Wo+uXAugDaIcJH28rVZSwTDINPm2bw==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/logger": "3.1.1",
-        "@docusaurus/mdx-loader": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-common": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/logger": "3.2.0",
+        "@docusaurus/mdx-loader": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-common": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "cheerio": "^1.0.0-rc.12",
        "feed": "^4.2.2",
        "fs-extra": "^11.1.1",
@@ -2387,17 +2386,18 @@
      }
    },
    "node_modules/@docusaurus/plugin-content-docs": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.1.1.tgz",
-      "integrity": "sha512-lhFq4E874zw0UOH7ujzxnCayOyAt0f9YPVYSb9ohxrdCM8B4szxitUw9rIX4V9JLLHVoqIJb6k+lJJ1jrcGJ0A==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.2.0.tgz",
+      "integrity": "sha512-uuqhahmsBnirxOz+SXksnWt7+wc+iN4ntxNRH48BUgo7QRNLATWjHCgI8t6zrMJxK4o+QL9DhLaPDlFHs91B3Q==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/logger": "3.1.1",
-        "@docusaurus/mdx-loader": "3.1.1",
-        "@docusaurus/module-type-aliases": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/logger": "3.2.0",
+        "@docusaurus/mdx-loader": "3.2.0",
+        "@docusaurus/module-type-aliases": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-common": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "@types/react-router-config": "^5.0.7",
        "combine-promises": "^1.1.0",
        "fs-extra": "^11.1.1",
@@ -2416,15 +2416,15 @@
      }
    },
    "node_modules/@docusaurus/plugin-content-pages": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.1.1.tgz",
-      "integrity": "sha512-NQHncNRAJbyLtgTim9GlEnNYsFhuCxaCNkMwikuxLTiGIPH7r/jpb7O3f3jUMYMebZZZrDq5S7om9a6rvB/YCA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.2.0.tgz",
+      "integrity": "sha512-4ofAN7JDsdb4tODO9OIrizWY5DmEJXr0eu+UDIkLqGP+gXXTahJZv8h2mlxO+lPXGXRCVBOfA14OG1hOYJVPwA==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/mdx-loader": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/mdx-loader": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "fs-extra": "^11.1.1",
        "tslib": "^2.6.0",
        "webpack": "^5.88.1"
@@ -2438,13 +2438,13 @@
      }
    },
    "node_modules/@docusaurus/plugin-debug": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-3.1.1.tgz",
-      "integrity": "sha512-xWeMkueM9wE/8LVvl4+Qf1WqwXmreMjI5Kgr7GYCDoJ8zu4kD+KaMhrh7py7MNM38IFvU1RfrGKacCEe2DRRfQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-3.2.0.tgz",
+      "integrity": "sha512-p6WxtO5XZGz66y6QNQtCJwBefq4S6/w75XaXVvH1/2P9uaijvF7R+Cm2EWQZ5WsvA5wl//DFWblyDHRyVC207Q==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
        "fs-extra": "^11.1.1",
        "react-json-view-lite": "^1.2.0",
        "tslib": "^2.6.0"
@@ -2458,13 +2458,13 @@
      }
    },
    "node_modules/@docusaurus/plugin-google-analytics": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.1.1.tgz",
-      "integrity": "sha512-+q2UpWTqVi8GdlLoSlD5bS/YpxW+QMoBwrPrUH/NpvpuOi0Of7MTotsQf9JWd3hymZxl2uu1o3PIrbpxfeDFDQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.2.0.tgz",
+      "integrity": "sha512-//TepJTEyAZSvBwHKEbXHu9xT/VkK3wUil2ZakKvQZYfUC01uWn6A1E3toa8R7WhCy1xPUeIukqmJy1Clg8njQ==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "tslib": "^2.6.0"
      },
      "engines": {
@@ -2476,13 +2476,13 @@
      }
    },
    "node_modules/@docusaurus/plugin-google-gtag": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.1.1.tgz",
-      "integrity": "sha512-0mMPiBBlQ5LFHTtjxuvt/6yzh8v7OxLi3CbeEsxXZpUzcKO/GC7UA1VOWUoBeQzQL508J12HTAlR3IBU9OofSw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.2.0.tgz",
+      "integrity": "sha512-3s6zxlaMMb87MW2Rxy6EnSRDs0WDEQPuHilZZH402C8kOrUnIwlhlfjWZ4ZyLDziGl/Eec/DvD0PVqj0qHRomA==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "@types/gtag.js": "^0.0.12",
        "tslib": "^2.6.0"
      },
@@ -2495,13 +2495,13 @@
      }
    },
    "node_modules/@docusaurus/plugin-google-tag-manager": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.1.1.tgz",
-      "integrity": "sha512-d07bsrMLdDIryDtY17DgqYUbjkswZQr8cLWl4tzXrt5OR/T/zxC1SYKajzB3fd87zTu5W5klV5GmUwcNSMXQXA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.2.0.tgz",
+      "integrity": "sha512-rAKtsJ11vPHA7dTAqWCgyIy7AyFRF/lpI77Zd/4HKgqcIvIayVBvL3QtelhUazfYTLTH6ls6kQ9wjMcIFxRiGg==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "tslib": "^2.6.0"
      },
      "engines": {
@@ -2513,16 +2513,16 @@
      }
    },
    "node_modules/@docusaurus/plugin-sitemap": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.1.1.tgz",
-      "integrity": "sha512-iJ4hCaMmDaUqRv131XJdt/C/jJQx8UreDWTRqZKtNydvZVh/o4yXGRRFOplea1D9b/zpwL1Y+ZDwX7xMhIOTmg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.2.0.tgz",
+      "integrity": "sha512-gnWDFt6MStjLkdtt63Lzc+14EPSd8B6mzJGJp9GQMvWDUoMAUijUqpVIHYQq+DPMcI4PJZ5I2nsl5XFf1vOldA==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/logger": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-common": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/logger": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-common": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "fs-extra": "^11.1.1",
        "sitemap": "^7.1.1",
        "tslib": "^2.6.0"
@@ -2536,23 +2536,23 @@
      }
    },
    "node_modules/@docusaurus/preset-classic": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-3.1.1.tgz",
-      "integrity": "sha512-jG4ys/hWYf69iaN/xOmF+3kjs4Nnz1Ay3CjFLDtYa8KdxbmUhArA9HmP26ru5N0wbVWhY+6kmpYhTJpez5wTyg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-3.2.0.tgz",
+      "integrity": "sha512-t7tXyk8kUgT7hUqEOgSJnPs+Foem9ucuan/a9QVYaVFCDjp92Sb2FpCY8bVasAokYCjodYe2LfpAoSCj5YDYWg==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/plugin-content-blog": "3.1.1",
-        "@docusaurus/plugin-content-docs": "3.1.1",
-        "@docusaurus/plugin-content-pages": "3.1.1",
-        "@docusaurus/plugin-debug": "3.1.1",
-        "@docusaurus/plugin-google-analytics": "3.1.1",
-        "@docusaurus/plugin-google-gtag": "3.1.1",
-        "@docusaurus/plugin-google-tag-manager": "3.1.1",
-        "@docusaurus/plugin-sitemap": "3.1.1",
-        "@docusaurus/theme-classic": "3.1.1",
-        "@docusaurus/theme-common": "3.1.1",
-        "@docusaurus/theme-search-algolia": "3.1.1",
-        "@docusaurus/types": "3.1.1"
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/plugin-content-blog": "3.2.0",
+        "@docusaurus/plugin-content-docs": "3.2.0",
+        "@docusaurus/plugin-content-pages": "3.2.0",
+        "@docusaurus/plugin-debug": "3.2.0",
+        "@docusaurus/plugin-google-analytics": "3.2.0",
+        "@docusaurus/plugin-google-gtag": "3.2.0",
+        "@docusaurus/plugin-google-tag-manager": "3.2.0",
+        "@docusaurus/plugin-sitemap": "3.2.0",
+        "@docusaurus/theme-classic": "3.2.0",
+        "@docusaurus/theme-common": "3.2.0",
+        "@docusaurus/theme-search-algolia": "3.2.0",
+        "@docusaurus/types": "3.2.0"
      },
      "engines": {
        "node": ">=18.0"
@@ -2575,22 +2575,22 @@
      }
    },
    "node_modules/@docusaurus/theme-classic": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.1.1.tgz",
-      "integrity": "sha512-GiPE/jbWM8Qv1A14lk6s9fhc0LhPEQ00eIczRO4QL2nAQJZXkjPG6zaVx+1cZxPFWbAsqSjKe2lqkwF3fGkQ7Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.2.0.tgz",
+      "integrity": "sha512-4oSO5BQOJ5ja7WYdL6jK1n4J96tp+VJHamdwao6Ea252sA3W3vvR0otTflG4p4XVjNZH6hlPQoi5lKW0HeRgfQ==",
      "dependencies": {
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/mdx-loader": "3.1.1",
-        "@docusaurus/module-type-aliases": "3.1.1",
-        "@docusaurus/plugin-content-blog": "3.1.1",
-        "@docusaurus/plugin-content-docs": "3.1.1",
-        "@docusaurus/plugin-content-pages": "3.1.1",
-        "@docusaurus/theme-common": "3.1.1",
-        "@docusaurus/theme-translations": "3.1.1",
-        "@docusaurus/types": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-common": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/mdx-loader": "3.2.0",
+        "@docusaurus/module-type-aliases": "3.2.0",
+        "@docusaurus/plugin-content-blog": "3.2.0",
+        "@docusaurus/plugin-content-docs": "3.2.0",
+        "@docusaurus/plugin-content-pages": "3.2.0",
+        "@docusaurus/theme-common": "3.2.0",
+        "@docusaurus/theme-translations": "3.2.0",
+        "@docusaurus/types": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-common": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "@mdx-js/react": "^3.0.0",
        "clsx": "^2.0.0",
        "copy-text-to-clipboard": "^3.2.0",
@@ -2614,17 +2614,17 @@
      }
    },
    "node_modules/@docusaurus/theme-common": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.1.1.tgz",
-      "integrity": "sha512-38urZfeMhN70YaXkwIGXmcUcv2CEYK/2l4b05GkJPrbEbgpsIZM3Xc+Js2ehBGGZmfZq8GjjQ5RNQYG+MYzCYg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.2.0.tgz",
+      "integrity": "sha512-sFbw9XviNJJ+760kAcZCQMQ3jkNIznGqa6MQ70E5BnbP+ja36kGgPOfjcsvAcNey1H1Rkhh3p2Mhf4HVLdKVVw==",
      "dependencies": {
-        "@docusaurus/mdx-loader": "3.1.1",
-        "@docusaurus/module-type-aliases": "3.1.1",
-        "@docusaurus/plugin-content-blog": "3.1.1",
-        "@docusaurus/plugin-content-docs": "3.1.1",
-        "@docusaurus/plugin-content-pages": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-common": "3.1.1",
+        "@docusaurus/mdx-loader": "3.2.0",
+        "@docusaurus/module-type-aliases": "3.2.0",
+        "@docusaurus/plugin-content-blog": "3.2.0",
+        "@docusaurus/plugin-content-docs": "3.2.0",
+        "@docusaurus/plugin-content-pages": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-common": "3.2.0",
        "@types/history": "^4.7.11",
        "@types/react": "*",
        "@types/react-router-config": "*",
@@ -2643,18 +2643,18 @@
      }
    },
    "node_modules/@docusaurus/theme-search-algolia": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.1.1.tgz",
-      "integrity": "sha512-tBH9VY5EpRctVdaAhT+b1BY8y5dyHVZGFXyCHgTrvcXQy5CV4q7serEX7U3SveNT9zksmchPyct6i1sFDC4Z5g==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.2.0.tgz",
+      "integrity": "sha512-PgvF4qHoqJp8+GfqClUbTF/zYNOsz4De251IuzXon7+7FAXwvb2qmYtA2nEwyMbB7faKOz33Pxzv+y+153KS/g==",
      "dependencies": {
        "@docsearch/react": "^3.5.2",
-        "@docusaurus/core": "3.1.1",
-        "@docusaurus/logger": "3.1.1",
-        "@docusaurus/plugin-content-docs": "3.1.1",
-        "@docusaurus/theme-common": "3.1.1",
-        "@docusaurus/theme-translations": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
-        "@docusaurus/utils-validation": "3.1.1",
+        "@docusaurus/core": "3.2.0",
+        "@docusaurus/logger": "3.2.0",
+        "@docusaurus/plugin-content-docs": "3.2.0",
+        "@docusaurus/theme-common": "3.2.0",
+        "@docusaurus/theme-translations": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-validation": "3.2.0",
        "algoliasearch": "^4.18.0",
        "algoliasearch-helper": "^3.13.3",
        "clsx": "^2.0.0",
@@ -2673,9 +2673,9 @@
      }
    },
    "node_modules/@docusaurus/theme-translations": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.1.1.tgz",
-      "integrity": "sha512-xvWQFwjxHphpJq5fgk37FXCDdAa2o+r7FX8IpMg+bGZBNXyWBu3MjZ+G4+eUVNpDhVinTc+j6ucL0Ain5KCGrg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.2.0.tgz",
+      "integrity": "sha512-VXzZJBuyVEmwUYyud+7IgJQEBRM6R2u/s10Rp3DOP19CBQxeKgHYTKkKhFtDeKMHDassb665kjgOi0YlJfUT6w==",
      "dependencies": {
        "fs-extra": "^11.1.1",
        "tslib": "^2.6.0"
@@ -2685,9 +2685,9 @@
      }
    },
    "node_modules/@docusaurus/types": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.1.1.tgz",
-      "integrity": "sha512-grBqOLnubUecgKFXN9q3uit2HFbCxTWX4Fam3ZFbMN0sWX9wOcDoA7lwdX/8AmeL20Oc4kQvWVgNrsT8bKRvzg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.2.0.tgz",
+      "integrity": "sha512-uG3FfTkkkbZIPPNYx6xRfZHKeGyRd/inIT1cqvYt1FobFLd+7WhRXrSBqwJ9JajJjEAjNioRMVFgGofGf/Wdww==",
      "dependencies": {
        "@mdx-js/mdx": "^3.0.0",
        "@types/history": "^4.7.11",
@@ -2705,11 +2705,12 @@
      }
    },
    "node_modules/@docusaurus/utils": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.1.1.tgz",
-      "integrity": "sha512-ZJfJa5cJQtRYtqijsPEnAZoduW6sjAQ7ZCWSZavLcV10Fw0Z3gSaPKA/B4micvj2afRZ4gZxT7KfYqe5H8Cetg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.2.0.tgz",
+      "integrity": "sha512-3rgrE7iL60yV2JQivlcoxUNNTK2APmn+OHLUmTvX2pueIM8DEOCEFHpJO4MiWjFO7V/Wq3iA/W1M03JnjdugVw==",
      "dependencies": {
-        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/logger": "3.2.0",
+        "@docusaurus/utils-common": "3.2.0",
        "@svgr/webpack": "^6.5.1",
        "escape-string-regexp": "^4.0.0",
        "file-loader": "^6.2.0",
@@ -2721,6 +2722,7 @@
        "js-yaml": "^4.1.0",
        "lodash": "^4.17.21",
        "micromatch": "^4.0.5",
+        "prompts": "^2.4.2",
        "resolve-pathname": "^3.0.0",
        "shelljs": "^0.8.5",
        "tslib": "^2.6.0",
@@ -2740,9 +2742,9 @@
      }
    },
    "node_modules/@docusaurus/utils-common": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.1.1.tgz",
-      "integrity": "sha512-eGne3olsIoNfPug5ixjepZAIxeYFzHHnor55Wb2P57jNbtVaFvij/T+MS8U0dtZRFi50QU+UPmRrXdVUM8uyMg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.2.0.tgz",
+      "integrity": "sha512-WEQT5L2lT/tBQgDRgeZQAIi9YJBrwEILb1BuObQn1St3T/4K1gx5fWwOT8qdLOov296XLd1FQg9Ywu27aE9svw==",
      "dependencies": {
        "tslib": "^2.6.0"
      },
@@ -2759,12 +2761,13 @@
      }
    },
    "node_modules/@docusaurus/utils-validation": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.1.1.tgz",
-      "integrity": "sha512-KlY4P9YVDnwL+nExvlIpu79abfEv6ZCHuOX4ZQ+gtip+Wxj0daccdReIWWtqxM/Fb5Cz1nQvUCc7VEtT8IBUAA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.2.0.tgz",
+      "integrity": "sha512-rCzMTqwNrBrEOyU8EaD1fYWdig4TDhfj+YLqB8DY68VUAqSIgbY+yshpqFKB0bznFYNBJbn0bGpvVuImQOa/vA==",
      "dependencies": {
-        "@docusaurus/logger": "3.1.1",
-        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/logger": "3.2.0",
+        "@docusaurus/utils": "3.2.0",
+        "@docusaurus/utils-common": "3.2.0",
        "joi": "^17.9.2",
        "js-yaml": "^4.1.0",
        "tslib": "^2.6.0"
@@ -3153,19 +3156,6 @@
        "micromark-util-symbol": "^1.0.1"
      }
    },
-    "node_modules/@slorber/static-site-generator-webpack-plugin": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@slorber/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.7.tgz",
-      "integrity": "sha512-Ug7x6z5lwrz0WqdnNFOMYrDQNTPAprvHLSh6+/fmml3qUiz6l5eq+2MzLKWtn/q5K5NpSiFsZTP/fck/3vjSxA==",
-      "dependencies": {
-        "eval": "^0.1.8",
-        "p-map": "^4.0.0",
-        "webpack-sources": "^3.2.2"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
      "version": "6.5.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
@@ -4300,13 +4290,11 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
-      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
      "dependencies": {
-        "follow-redirects": "^1.15.4",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
+        "follow-redirects": "^1.14.8"
      }
    },
    "node_modules/babel-loader": {
@@ -6137,21 +6125,22 @@
      }
    },
    "node_modules/docusaurus-plugin-openapi": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/docusaurus-plugin-openapi/-/docusaurus-plugin-openapi-0.7.3.tgz",
-      "integrity": "sha512-JOMlP4HarpSYQhBHgVCQecy4BXvt3bVLob1PXfBMEBYBy26Y8fwN+QktBdLJ4YLoQ8FoDO13+q5/335b790tiA==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-openapi/-/docusaurus-plugin-openapi-0.7.4.tgz",
+      "integrity": "sha512-JZSAIPQFQ4FyUiHZcQ00/fIRIr1f74rxqVvzjuMmODQvUXvlOgPyxErmGJwYVf4sAxPl05IiYDPtmVeZZixPMg==",
      "dependencies": {
-        "@docusaurus/mdx-loader": "^3.0.0",
-        "@docusaurus/plugin-content-docs": "^3.0.0",
-        "@docusaurus/utils": "^3.0.0",
-        "@docusaurus/utils-validation": "^3.0.0",
-        "axios": "^1.6.7",
+        "@docusaurus/mdx-loader": "^3.2.0",
+        "@docusaurus/plugin-content-docs": "^3.2.0",
+        "@docusaurus/utils": "^3.2.0",
+        "@docusaurus/utils-common": "^3.2.0",
+        "@docusaurus/utils-validation": "^3.2.0",
+        "axios": "^0.26.1",
        "chalk": "^4.1.2",
        "clsx": "^1.2.1",
        "js-yaml": "^4.1.0",
        "json-refs": "^3.0.15",
        "json-schema-resolve-allof": "^1.5.0",
-        "lodash": "^4.17.21",
+        "lodash": "^4.17.20",
        "openapi-to-postmanv2": "^1.2.1",
        "postman-collection": "^4.1.0",
        "webpack": "^5.88.1"
@@ -6173,22 +6162,22 @@
      }
    },
    "node_modules/docusaurus-plugin-proxy": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/docusaurus-plugin-proxy/-/docusaurus-plugin-proxy-0.7.3.tgz",
-      "integrity": "sha512-7DbDtPo6ZQK2kGROwSxtfMrdDiTJ2Bn+OQ591IBVduuH3dwVgzyKgzjxBknfDQjF5peZWDazVHwCV8ZZoI+6ew==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-proxy/-/docusaurus-plugin-proxy-0.7.4.tgz",
+      "integrity": "sha512-utnMCZF1ewMjVHTmXqvx0O8jAy1hL6GiJWzo8U8sl5asGI78Qi8GZjVkdj9l3FGDA9LRtCK96rme3Aa0x7dFxg==",
      "engines": {
        "node": ">=14"
      }
    },
    "node_modules/docusaurus-preset-openapi": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/docusaurus-preset-openapi/-/docusaurus-preset-openapi-0.7.3.tgz",
-      "integrity": "sha512-gXDhnSjl6QeJnUU6txPfNoITKyKKNQoxeiRKLh7npuI5KB3kWWL+jRneYTEph+LhtGf4LRlKNm06ZBS6MODRRw==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/docusaurus-preset-openapi/-/docusaurus-preset-openapi-0.7.4.tgz",
+      "integrity": "sha512-O2Pje1aa7cTwhfBHTJgD3Gx+MgzhsSOCj97Ez8CWZDOJ2Mta68wFbQQV3UMWfujsvcy3ttNCgAe/LahtFo7jyg==",
      "dependencies": {
-        "@docusaurus/preset-classic": "^3.0.0",
-        "docusaurus-plugin-openapi": "^0.7.3",
-        "docusaurus-plugin-proxy": "^0.7.3",
-        "docusaurus-theme-openapi": "^0.7.3"
+        "@docusaurus/preset-classic": "^3.2.0",
+        "docusaurus-plugin-openapi": "^0.7.4",
+        "docusaurus-plugin-proxy": "^0.7.4",
+        "docusaurus-theme-openapi": "^0.7.4"
      },
      "engines": {
        "node": ">=18"
@@ -6199,11 +6188,11 @@
      }
    },
    "node_modules/docusaurus-theme-openapi": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/docusaurus-theme-openapi/-/docusaurus-theme-openapi-0.7.3.tgz",
-      "integrity": "sha512-KNcCgEcoNZT2uFGM0/SWIt9YOuBQYKnI10py7z8IJ4Ev02wo7c1DStVstlONIohyzFMTjqSbZ8hifZ/29AHJBQ==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/docusaurus-theme-openapi/-/docusaurus-theme-openapi-0.7.4.tgz",
+      "integrity": "sha512-E5nZJM/Z/YSWGtkvz8Mw3ueUt+uJcD2LMRK0He23u5ufUZPwGeRxL93DxtOL7mkEvdV6rFzH7LtzysOdqyGy3A==",
      "dependencies": {
-        "@docusaurus/theme-common": "^3.0.0",
+        "@docusaurus/theme-common": "^3.2.0",
        "@mdx-js/react": "^3.0.0",
        "@monaco-editor/react": "^4.3.1",
        "@reduxjs/toolkit": "^1.7.1",
@@ -6212,7 +6201,7 @@
        "crypto-js": "^4.1.1",
        "docusaurus-plugin-openapi": "^0.7.3",
        "immer": "^9.0.7",
-        "lodash": "^4.17.21",
+        "lodash": "^4.17.20",
        "marked": "^11.0.0",
        "monaco-editor": "^0.31.1",
        "postman-code-generators": "^1.0.0",
@@ -13611,11 +13600,6 @@
        "node": ">= 0.10"
      }
    },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -25,3 +25,4 @@
 /docs/developer/contributing /docs/developer/pr-checklist 301
 /docs/guides/machine-learning /docs/guides/remote-machine-learning 301
 /docs/administration/password-login /docs/administration/system-settings 301
+/docs/features/search /docs/features/smart-search 301
@@ -87,7 +87,7 @@
        "@oazapfts/runtime": "^1.0.2"
      },
      "devDependencies": {
-        "@types/node": "^20.11.0",
+        "@types/node": "^20.12.4",
        "typescript": "^5.3.3"
      }
    },
@@ -1158,9 +1158,9 @@
      "dev": true
    },
    "node_modules/@types/node": {
-      "version": "20.11.30",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
-      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "version": "20.12.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz",
+      "integrity": "sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==",
      "dev": true,
      "dependencies": {
        "undici-types": "~5.26.4"
@@ -1277,16 +1277,16 @@
      }
    },
    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz",
-      "integrity": "sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.5.0.tgz",
+      "integrity": "sha512-HpqNTH8Du34nLxbKgVMGljZMG0rJd2O9ecvr2QLYp+7512ty1j42KnsFwspPXg1Vh8an9YImf6CokUBltisZFQ==",
      "dev": true,
      "dependencies": {
        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/type-utils": "7.4.0",
-        "@typescript-eslint/utils": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/type-utils": "7.5.0",
+        "@typescript-eslint/utils": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4",
        "graphemer": "^1.4.0",
        "ignore": "^5.2.4",
@@ -1312,15 +1312,15 @@
      }
    },
    "node_modules/@typescript-eslint/parser": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.4.0.tgz",
-      "integrity": "sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.5.0.tgz",
+      "integrity": "sha512-cj+XGhNujfD2/wzR1tabNsidnYRaFfEkcULdcIyVBYcXjBvBKOes+mpMBP7hMpOyk+gBcfXsrg4NBGAStQyxjQ==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/typescript-estree": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4"
      },
      "engines": {
@@ -1340,13 +1340,13 @@
      }
    },
    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz",
-      "integrity": "sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.5.0.tgz",
+      "integrity": "sha512-Z1r7uJY0MDeUlql9XJ6kRVgk/sP11sr3HKXn268HZyqL7i4cEfrdFuSSY/0tUqT37l5zT0tJOsuDP16kio85iA==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0"
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0"
      },
      "engines": {
        "node": "^18.18.0 || >=20.0.0"
@@ -1357,13 +1357,13 @@
      }
    },
    "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz",
-      "integrity": "sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.5.0.tgz",
+      "integrity": "sha512-A021Rj33+G8mx2Dqh0nMO9GyjjIBK3MqgVgZ2qlKf6CJy51wY/lkkFqq3TqqnH34XyAHUkq27IjlUkWlQRpLHw==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.4.0",
-        "@typescript-eslint/utils": "7.4.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
+        "@typescript-eslint/utils": "7.5.0",
        "debug": "^4.3.4",
        "ts-api-utils": "^1.0.1"
      },
@@ -1384,9 +1384,9 @@
      }
    },
    "node_modules/@typescript-eslint/types": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.4.0.tgz",
-      "integrity": "sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.5.0.tgz",
+      "integrity": "sha512-tv5B4IHeAdhR7uS4+bf8Ov3k793VEVHd45viRRkehIUZxm0WF82VPiLgHzA/Xl4TGPg1ZD49vfxBKFPecD5/mg==",
      "dev": true,
      "engines": {
        "node": "^18.18.0 || >=20.0.0"
@@ -1397,13 +1397,13 @@
      }
    },
    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz",
-      "integrity": "sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.5.0.tgz",
+      "integrity": "sha512-YklQQfe0Rv2PZEueLTUffiQGKQneiIEKKnfIqPIOxgM9lKSZFCjT5Ad4VqRKj/U4+kQE3fa8YQpskViL7WjdPQ==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4",
        "globby": "^11.1.0",
        "is-glob": "^4.0.3",
@@ -1449,17 +1449,17 @@
      }
    },
    "node_modules/@typescript-eslint/utils": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.4.0.tgz",
-      "integrity": "sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.5.0.tgz",
+      "integrity": "sha512-3vZl9u0R+/FLQcpy2EHyRGNqAS/ofJ3Ji8aebilfJe+fobK8+LbIFmrHciLVDxjDoONmufDcnVSF38KwMEOjzw==",
      "dev": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.4.0",
        "@types/json-schema": "^7.0.12",
        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/typescript-estree": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
        "semver": "^7.5.4"
      },
      "engines": {
@@ -1474,12 +1474,12 @@
      }
    },
    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz",
-      "integrity": "sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.5.0.tgz",
+      "integrity": "sha512-mcuHM/QircmA6O7fy6nn2w/3ditQkj+SgtOc8DW3uQ10Yfj42amm2i+6F2K4YAOPNNTmE6iM1ynM6lrSwdendA==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
+        "@typescript-eslint/types": "7.5.0",
        "eslint-visitor-keys": "^3.4.1"
      },
      "engines": {
@@ -1765,15 +1765,6 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
-    "node_modules/buffer-writer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-writer/-/buffer-writer-2.0.0.tgz",
-      "integrity": "sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/builtin-modules": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
@@ -3650,12 +3641,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/packet-reader": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/packet-reader/-/packet-reader-1.0.0.tgz",
-      "integrity": "sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ==",
-      "dev": true
-    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3744,16 +3729,14 @@
      }
    },
    "node_modules/pg": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.11.3.tgz",
-      "integrity": "sha512-+9iuvG8QfaaUrrph+kpF24cXkH1YOOUeArRNYIxq1viYHZagBxrTno7cecY1Fa44tJeZvaoG+Djpkc3JwehN5g==",
+      "version": "8.11.5",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.11.5.tgz",
+      "integrity": "sha512-jqgNHSKL5cbDjFlHyYsCXmQDrfIX/3RsNwYqpd4N0Kt8niLuNoRNH+aazv6cOd43gPh9Y4DjQCtb+X0MH0Hvnw==",
      "dev": true,
      "dependencies": {
-        "buffer-writer": "2.0.0",
-        "packet-reader": "1.0.0",
-        "pg-connection-string": "^2.6.2",
-        "pg-pool": "^3.6.1",
-        "pg-protocol": "^1.6.0",
+        "pg-connection-string": "^2.6.4",
+        "pg-pool": "^3.6.2",
+        "pg-protocol": "^1.6.1",
        "pg-types": "^2.1.0",
        "pgpass": "1.x"
      },
@@ -3780,9 +3763,9 @@
      "optional": true
    },
    "node_modules/pg-connection-string": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.6.2.tgz",
-      "integrity": "sha512-ch6OwaeaPYcova4kKZ15sbJ2hKb/VP48ZD2gE7i1J+L4MspCtBMAx8nMgz7bksc7IojCIIWuEhHibSMFH8m8oA==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.6.4.tgz",
+      "integrity": "sha512-v+Z7W/0EO707aNMaAEfiGnGL9sxxumwLl2fJvCQtMn9Fxsg+lPpPkdcyBSv/KFgpGdYkMfn+EI1Or2EHjpgLCA==",
      "dev": true
    },
    "node_modules/pg-int8": {
@@ -3804,18 +3787,18 @@
      }
    },
    "node_modules/pg-pool": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.6.1.tgz",
-      "integrity": "sha512-jizsIzhkIitxCGfPRzJn1ZdcosIt3pz9Sh3V01fm1vZnbnCMgmGl5wvGGdNN2EL9Rmb0EcFoCkixH4Pu+sP9Og==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.6.2.tgz",
+      "integrity": "sha512-Htjbg8BlwXqSBQ9V8Vjtc+vzf/6fVUuak/3/XXKA9oxZprwW3IMDQTGHP+KDmVL7rtd+R1QjbnCFPuTHm3G4hg==",
      "dev": true,
      "peerDependencies": {
        "pg": ">=8.0"
      }
    },
    "node_modules/pg-protocol": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.6.0.tgz",
-      "integrity": "sha512-M+PDm637OY5WM307051+bsDia5Xej6d9IR4GwJse1qA1DIhiKlksvrneZOYQq42OM+spubpcNYEo2FcKQrDk+Q==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.6.1.tgz",
+      "integrity": "sha512-jPIlvgoD63hrEuihvIg+tJhoGjUsLPn6poJY9N5CnlPd91c2T18T/9zBtLxZSb1EhYxBRoZJtzScCaWlYLtktg==",
      "dev": true
    },
    "node_modules/pg-types": {
@@ -1,62 +1,78 @@
 #!/usr/bin/env bash
+set -o nounset
+set -o pipefail

-echo "Starting Immich installation..."
-
-ip_address=$(hostname -I | awk '{print $1}')
-
-create_immich_directory() {
+create_immich_directory() { local -r Tgt='./immich-app'
  echo "Creating Immich directory..."
-  mkdir -p ./immich-app
-  cd ./immich-app || exit
+  if [[ -e $Tgt ]]; then
+    echo "Found existing directory $Tgt, will overwrite YAML files"
+  else
+    mkdir "$Tgt" || return
+  fi 
+  cd "$Tgt" || return
 }

 download_docker_compose_file() {
  echo "Downloading docker-compose.yml..."
-  curl -L https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml -o ./docker-compose.yml >/dev/null 2>&1
+  "${Curl[@]}" "$RepoUrl"/docker-compose.yml -o ./docker-compose.yml
 }

 download_dot_env_file() {
  echo "Downloading .env file..."
-  curl -L https://github.com/immich-app/immich/releases/latest/download/example.env -o ./.env >/dev/null 2>&1
+  "${Curl[@]}" "$RepoUrl"/example.env -o ./.env
 }

 start_docker_compose() {
  echo "Starting Immich's docker containers"

-  if docker compose >/dev/null 2>&1; then
-    docker_bin="docker compose"
-  elif docker-compose >/dev/null 2>&1; then
-    docker_bin="docker-compose"
-  else
-    echo "Cannot find \`docker compose\` or \`docker-compose\`."
-    exit 1
+  if ! docker compose >/dev/null 2>&1; then
+    echo "failed to find 'docker compose'"
+    return 1
  fi

-  if $docker_bin up --remove-orphans -d; then
-    show_friendly_message
-    exit 0
-  else
+  if ! docker compose up --remove-orphans -d; then
    echo "Could not start. Check for errors above."
-    exit 1
+    return 1
  fi
+  show_friendly_message
 }

 show_friendly_message() {
-  echo "Successfully deployed Immich!"
-  echo "You can access the website at http://$ip_address:2283 and the server URL for the mobile app is http://$ip_address:2283/api"
-  echo "---------------------------------------------------"
-  echo "If you want to configure custom information of the server, including the database, Redis information, or the backup (or upload) location, etc. 
+  local ip_address
+  ip_address=$(hostname -I | awk '{print $1}')
+  cat << EOF
+Successfully deployed Immich!
+You can access the website at http://$ip_address:2283 and the server URL for the mobile app is http://$ip_address:2283/api
+---------------------------------------------------
+If you want to configure custom information of the server, including the database, Redis information, or the backup (or upload) location, etc. 
  
-  1. First bring down the containers with the command 'docker-compose down' in the immich-app directory, 
+  1. First bring down the containers with the command 'docker compose down' in the immich-app directory, 
  
  2. Then change the information that fits your needs in the '.env' file, 
  
-  3. Finally, bring the containers back up with the command 'docker-compose up --remove-orphans -d' in the immich-app directory"
-
+  3. Finally, bring the containers back up with the command 'docker compose up --remove-orphans -d' in the immich-app directory
+EOF
 }

 # MAIN
-create_immich_directory
-download_docker_compose_file
-download_dot_env_file
-start_docker_compose
+main() {
+  echo "Starting Immich installation..."
+  local -r RepoUrl='https://github.com/immich-app/immich/releases/latest/download'
+  local -a Curl
+  if command -v curl >/dev/null; then
+    Curl=(curl -fsSL)
+  else
+    echo 'no curl binary found; please install curl and try again'
+    return 14
+  fi
+
+  create_immich_directory || { echo 'error creating Immich directory'; return 10; }
+  download_docker_compose_file || { echo 'error downloading Docker Compose file'; return 11; }
+  download_dot_env_file || { echo 'error downloading .env'; return 12; }
+  start_docker_compose || { echo 'error starting Docker'; return 13; }
+  return 0; }
+
+main
+Exit=$?
+[[ $Exit == 0 ]] || echo "There was an error installing Immich. Exit code: $Exit. Please provide these logs when asking for assistance."
+exit "$Exit"
@@ -11,7 +11,6 @@ Name | Type | Description | Notes
 **exclusionPatterns** | **List<String>** |  | [optional] [default to const []]
 **importPaths** | **List<String>** |  | [optional] [default to const []]
 **isVisible** | **bool** |  | [optional] 
-**isWatched** | **bool** |  | [optional] 
 **name** | **String** |  | [optional] 
 **ownerId** | **String** |  | 
 **type** | [**LibraryType**](LibraryType.md) |  | 
@@ -16,7 +16,6 @@ class CreateLibraryDto {
    this.exclusionPatterns = const [],
    this.importPaths = const [],
    this.isVisible,
-    this.isWatched,
    this.name,
    required this.ownerId,
    required this.type,
@@ -34,14 +33,6 @@ class CreateLibraryDto {
  ///
  bool? isVisible;

-  ///
-  /// Please note: This property should have been non-nullable! Since the specification file
-  /// does not include a default value (using the "default:" property), however, the generated
-  /// source code must fall back to having a nullable type.
-  /// Consider adding a "default:" property in the specification file to hide this note.
-  ///
-  bool? isWatched;
-
  ///
  /// Please note: This property should have been non-nullable! Since the specification file
  /// does not include a default value (using the "default:" property), however, the generated
@@ -59,7 +50,6 @@ class CreateLibraryDto {
    _deepEquality.equals(other.exclusionPatterns, exclusionPatterns) &&
    _deepEquality.equals(other.importPaths, importPaths) &&
    other.isVisible == isVisible &&
-    other.isWatched == isWatched &&
    other.name == name &&
    other.ownerId == ownerId &&
    other.type == type;
@@ -70,13 +60,12 @@ class CreateLibraryDto {
    (exclusionPatterns.hashCode) +
    (importPaths.hashCode) +
    (isVisible == null ? 0 : isVisible!.hashCode) +
-    (isWatched == null ? 0 : isWatched!.hashCode) +
    (name == null ? 0 : name!.hashCode) +
    (ownerId.hashCode) +
    (type.hashCode);

  @override
-  String toString() => 'CreateLibraryDto[exclusionPatterns=$exclusionPatterns, importPaths=$importPaths, isVisible=$isVisible, isWatched=$isWatched, name=$name, ownerId=$ownerId, type=$type]';
+  String toString() => 'CreateLibraryDto[exclusionPatterns=$exclusionPatterns, importPaths=$importPaths, isVisible=$isVisible, name=$name, ownerId=$ownerId, type=$type]';

  Map<String, dynamic> toJson() {
    final json = <String, dynamic>{};
@@ -87,11 +76,6 @@ class CreateLibraryDto {
    } else {
    //  json[r'isVisible'] = null;
    }
-    if (this.isWatched != null) {
-      json[r'isWatched'] = this.isWatched;
-    } else {
-    //  json[r'isWatched'] = null;
-    }
    if (this.name != null) {
      json[r'name'] = this.name;
    } else {
@@ -117,7 +101,6 @@ class CreateLibraryDto {
            ? (json[r'importPaths'] as Iterable).cast<String>().toList(growable: false)
            : const [],
        isVisible: mapValueOfType<bool>(json, r'isVisible'),
-        isWatched: mapValueOfType<bool>(json, r'isWatched'),
        name: mapValueOfType<String>(json, r'name'),
        ownerId: mapValueOfType<String>(json, r'ownerId')!,
        type: LibraryType.fromJson(json[r'type'])!,
@@ -31,11 +31,6 @@ void main() {
      // TODO
    });

-    // bool isWatched
-    test('to test the property `isWatched`', () async {
-      // TODO
-    });
-
    // String name
    test('to test the property `name`', () async {
      // TODO
@@ -8000,9 +8000,6 @@
          "isVisible": {
            "type": "boolean"
          },
-          "isWatched": {
-            "type": "boolean"
-          },
          "name": {
            "type": "string"
          },
@@ -22,9 +22,9 @@
      "integrity": "sha512-V33FjR6V+AkGRWYQW3XPm5BLn2loGl2ujSeja1TzdjjEn2zjGgl3ve0dcFf/jEwPZEOqQZl6YwIgIB/clXVqWw=="
    },
    "node_modules/@types/node": {
-      "version": "20.11.30",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
-      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "version": "20.12.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz",
+      "integrity": "sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==",
      "dev": true,
      "dependencies": {
        "undici-types": "~5.26.4"
@@ -461,7 +461,6 @@ export type CreateLibraryDto = {
    exclusionPatterns?: string[];
    importPaths?: string[];
    isVisible?: boolean;
-    isWatched?: boolean;
    name?: string;
    ownerId: string;
    "type": LibraryType;
@@ -25,7 +25,7 @@ COPY --from=dev /usr/src/app/node_modules/@img ./node_modules/@img
 COPY --from=dev /usr/src/app/node_modules/exiftool-vendored.pl ./node_modules/exiftool-vendored.pl

 # web build
-FROM node:iron-alpine3.18@sha256:fa5d3cf51725bd42d32e67917623038539dbe720dab082f590785c001eb4dfef as web
+FROM node:iron-alpine3.18@sha256:3fb85a68652064ab109ed9730f45a3ede11f064afdd3ad9f96ef7e8a3c55f47e as web

 WORKDIR /usr/src/open-api/typescript-sdk
 COPY open-api/typescript-sdk/package*.json open-api/typescript-sdk/tsconfig*.json ./
@@ -45,9 +45,9 @@
    "@nestjs/swagger": "^7.1.8",
    "@nestjs/typeorm": "^10.0.0",
    "@nestjs/websockets": "^10.2.2",
-    "@opentelemetry/auto-instrumentations-node": "^0.43.0",
-    "@opentelemetry/exporter-prometheus": "^0.49.0",
-    "@opentelemetry/sdk-node": "^0.49.0",
+    "@opentelemetry/auto-instrumentations-node": "^0.44.0",
+    "@opentelemetry/exporter-prometheus": "^0.50.0",
+    "@opentelemetry/sdk-node": "^0.50.0",
    "@socket.io/postgres-adapter": "^0.3.1",
    "@types/picomatch": "^2.3.3",
    "archiver": "^7.0.0",
@@ -167,6 +167,6 @@
    "globalSetup": "<rootDir>/test/global-setup.js"
  },
  "volta": {
-    "node": "20.12.0"
+    "node": "20.12.1"
  }
 }
@@ -32,9 +32,6 @@ export class CreateLibraryDto {
  @ArrayUnique()
  @ArrayMaxSize(128)
  exclusionPatterns?: string[];
-
-  @ValidateBoolean({ optional: true })
-  isWatched?: boolean;
 }

 export class UpdateLibraryDto {
@@ -1058,14 +1058,6 @@ describe(LibraryService.name, () => {

        expect(libraryMock.create).not.toHaveBeenCalled();
      });
-
-      it('should not create watched', async () => {
-        await expect(
-          sut.create({ ownerId: authStub.admin.user.id, type: LibraryType.UPLOAD, isWatched: true }),
-        ).rejects.toBeInstanceOf(BadRequestException);
-
-        expect(storageMock.watch).not.toHaveBeenCalled();
-      });
    });
  });

@@ -266,9 +266,6 @@ export class LibraryService extends EventEmitter {
        if (dto.exclusionPatterns && dto.exclusionPatterns.length > 0) {
          throw new BadRequestException('Upload libraries cannot have exclusion patterns');
        }
-        if (dto.isWatched) {
-          throw new BadRequestException('Upload libraries cannot be watched');
-        }
        break;
      }
    }
@@ -346,19 +346,6 @@ describe(SystemConfigService.name, () => {
    });
  });

-  describe('refreshConfig', () => {
-    it('should notify the subscribers', async () => {
-      const changeMock = jest.fn();
-      const subscription = sut.config$.subscribe(changeMock);
-
-      await sut.refreshConfig();
-
-      expect(changeMock).toHaveBeenCalledWith(defaults);
-
-      subscription.unsubscribe();
-    });
-  });
-
  describe('getCustomCss', () => {
    it('should return the default theme', async () => {
      await expect(sut.getCustomCss()).resolves.toEqual(defaults.theme.customCss);
@@ -90,13 +90,6 @@ export class SystemConfigService {
    return mapConfig(newConfig);
  }

-  // this is only used by the cli on config change, and it's not actually needed anymore
-  async refreshConfig() {
-    this.eventRepository.serverSend(ServerEvent.CONFIG_UPDATE, null);
-    await this.core.refreshConfig();
-    return true;
-  }
-
  getStorageTemplateOptions(): SystemConfigTemplateStorageOptionDto {
    const options = new SystemConfigTemplateStorageOptionDto();

@@ -1,4 +1,4 @@
-FROM node:iron-alpine3.18@sha256:fa5d3cf51725bd42d32e67917623038539dbe720dab082f590785c001eb4dfef
+FROM node:iron-alpine3.18@sha256:3fb85a68652064ab109ed9730f45a3ede11f064afdd3ad9f96ef7e8a3c55f47e

 RUN apk add --no-cache tini
 USER node
@@ -29,7 +29,7 @@
        "@faker-js/faker": "^8.4.1",
        "@socket.io/component-emitter": "^3.1.0",
        "@sveltejs/adapter-static": "^3.0.1",
-        "@sveltejs/enhanced-img": "^0.1.8",
+        "@sveltejs/enhanced-img": "^0.2.0",
        "@sveltejs/kit": "^2.5.2",
        "@sveltejs/vite-plugin-svelte": "^3.0.2",
        "@testing-library/jest-dom": "^6.4.2",
@@ -69,7 +69,7 @@
        "@oazapfts/runtime": "^1.0.2"
      },
      "devDependencies": {
-        "@types/node": "^20.11.0",
+        "@types/node": "^20.12.4",
        "typescript": "^5.3.3"
      }
    },
@@ -449,9 +449,9 @@
      "dev": true
    },
    "node_modules/@emnapi/runtime": {
-      "version": "0.45.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.45.0.tgz",
-      "integrity": "sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.1.1.tgz",
+      "integrity": "sha512-3bfqkzuR1KLx57nZfjr2NLnFOobvyS0aTszaEGCGqmYMVDRaGvgIZbjGSV/MHSSmLgQ/b9JFHQ5xm5WRZYd+XQ==",
      "dev": true,
      "optional": true,
      "dependencies": {
@@ -842,9 +842,9 @@
      }
    },
    "node_modules/@eslint-community/regexpp": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.1.tgz",
-      "integrity": "sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
+      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
      "dev": true,
      "engines": {
        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -947,9 +947,9 @@
      "dev": true
    },
    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.2.tgz",
-      "integrity": "sha512-itHBs1rPmsmGF9p4qRe++CzCgd+kFYktnsoR1sbIAfsRMrJZau0Tt1AH9KVnufc2/tU02Gf6Ibujx+15qRE03w==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",
+      "integrity": "sha512-FaNiGX1MrOuJ3hxuNzWgsT/mg5OHG/Izh59WW2mk1UwYHUwtfbhk5QNKYZgxf0pLOhx9ctGiGa2OykD71vOnSw==",
      "cpu": [
        "arm64"
      ],
@@ -969,13 +969,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.0.1"
+        "@img/sharp-libvips-darwin-arm64": "1.0.2"
      }
    },
    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.2.tgz",
-      "integrity": "sha512-/rK/69Rrp9x5kaWBjVN07KixZanRr+W1OiyKdXcbjQD6KbW+obaTeBBtLUAtbBsnlTTmWthw99xqoOS7SsySDg==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.3.tgz",
+      "integrity": "sha512-2QeSl7QDK9ru//YBT4sQkoq7L0EAJZA3rtV+v9p8xTKl4U1bUqTIaCnoC7Ctx2kCjQgwFXDasOtPTCT8eCTXvw==",
      "cpu": [
        "x64"
      ],
@@ -995,13 +995,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.0.1"
+        "@img/sharp-libvips-darwin-x64": "1.0.2"
      }
    },
    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.1.tgz",
-      "integrity": "sha512-kQyrSNd6lmBV7O0BUiyu/OEw9yeNGFbQhbxswS1i6rMDwBBSX+e+rPzu3S+MwAiGU3HdLze3PanQ4Xkfemgzcw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
      "cpu": [
        "arm64"
      ],
@@ -1021,9 +1021,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.1.tgz",
-      "integrity": "sha512-eVU/JYLPVjhhrd8Tk6gosl5pVlvsqiFlt50wotCvdkFGf+mDNBJxMh+bvav+Wt3EBnNZWq8Sp2I7XfSjm8siog==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==",
      "cpu": [
        "x64"
      ],
@@ -1043,9 +1043,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.1.tgz",
-      "integrity": "sha512-FtdMvR4R99FTsD53IA3LxYGghQ82t3yt0ZQ93WMZ2xV3dqrb0E8zq4VHaTOuLEAuA83oDawHV3fd+BsAPadHIQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz",
+      "integrity": "sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==",
      "cpu": [
        "arm"
      ],
@@ -1065,9 +1065,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.1.tgz",
-      "integrity": "sha512-bnGG+MJjdX70mAQcSLxgeJco11G+MxTz+ebxlz8Y3dxyeb3Nkl7LgLI0mXupoO+u1wRNx/iRj5yHtzA4sde1yA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz",
+      "integrity": "sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==",
      "cpu": [
        "arm64"
      ],
@@ -1087,9 +1087,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.1.tgz",
-      "integrity": "sha512-3+rzfAR1YpMOeA2zZNp+aYEzGNWK4zF3+sdMxuCS3ey9HhDbJ66w6hDSHDMoap32DueFwhhs3vwooAB2MaK4XQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz",
+      "integrity": "sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==",
      "cpu": [
        "s390x"
      ],
@@ -1109,9 +1109,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.1.tgz",
-      "integrity": "sha512-3NR1mxFsaSgMMzz1bAnnKbSAI+lHXVTqAHgc1bgzjHuXjo4hlscpUxc0vFSAPKI3yuzdzcZOkq7nDPrP2F8Jgw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz",
+      "integrity": "sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==",
      "cpu": [
        "x64"
      ],
@@ -1131,9 +1131,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.1.tgz",
-      "integrity": "sha512-5aBRcjHDG/T6jwC3Edl3lP8nl9U2Yo8+oTl5drd1dh9Z1EBfzUKAJFUDTDisDjUwc7N4AjnPGfCA3jl3hY8uDg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz",
+      "integrity": "sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==",
      "cpu": [
        "arm64"
      ],
@@ -1153,9 +1153,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.1.tgz",
-      "integrity": "sha512-dcT7inI9DBFK6ovfeWRe3hG30h51cBAP5JXlZfx6pzc/Mnf9HFCQDLtYf4MCBjxaaTfjCCjkBxcy3XzOAo5txw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz",
+      "integrity": "sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==",
      "cpu": [
        "x64"
      ],
@@ -1175,9 +1175,9 @@
      }
    },
    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.2.tgz",
-      "integrity": "sha512-Fndk/4Zq3vAc4G/qyfXASbS3HBZbKrlnKZLEJzPLrXoJuipFNNwTes71+Ki1hwYW5lch26niRYoZFAtZVf3EGA==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.3.tgz",
+      "integrity": "sha512-Q7Ee3fFSC9P7vUSqVEF0zccJsZ8GiiCJYGWDdhEjdlOeS9/jdkyJ6sUSPj+bL8VuOYFSbofrW0t/86ceVhx32w==",
      "cpu": [
        "arm"
      ],
@@ -1197,13 +1197,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.0.1"
+        "@img/sharp-libvips-linux-arm": "1.0.2"
      }
    },
    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.2.tgz",
-      "integrity": "sha512-pz0NNo882vVfqJ0yNInuG9YH71smP4gRSdeL09ukC2YLE6ZyZePAlWKEHgAzJGTiOh8Qkaov6mMIMlEhmLdKew==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.3.tgz",
+      "integrity": "sha512-Zf+sF1jHZJKA6Gor9hoYG2ljr4wo9cY4twaxgFDvlG0Xz9V7sinsPp8pFd1XtlhTzYo0IhDbl3rK7P6MzHpnYA==",
      "cpu": [
        "arm64"
      ],
@@ -1223,13 +1223,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.0.1"
+        "@img/sharp-libvips-linux-arm64": "1.0.2"
      }
    },
    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.2.tgz",
-      "integrity": "sha512-MBoInDXDppMfhSzbMmOQtGfloVAflS2rP1qPcUIiITMi36Mm5YR7r0ASND99razjQUpHTzjrU1flO76hKvP5RA==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.3.tgz",
+      "integrity": "sha512-vFk441DKRFepjhTEH20oBlFrHcLjPfI8B0pMIxGm3+yilKyYeHEVvrZhYFdqIseSclIqbQ3SnZMwEMWonY5XFA==",
      "cpu": [
        "s390x"
      ],
@@ -1249,13 +1249,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.0.1"
+        "@img/sharp-libvips-linux-s390x": "1.0.2"
      }
    },
    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.2.tgz",
-      "integrity": "sha512-xUT82H5IbXewKkeF5aiooajoO1tQV4PnKfS/OZtb5DDdxS/FCI/uXTVZ35GQ97RZXsycojz/AJ0asoz6p2/H/A==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.3.tgz",
+      "integrity": "sha512-Q4I++herIJxJi+qmbySd072oDPRkCg/SClLEIDh5IL9h1zjhqjv82H0Seupd+q2m0yOfD+/fJnjSoDFtKiHu2g==",
      "cpu": [
        "x64"
      ],
@@ -1275,13 +1275,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.0.1"
+        "@img/sharp-libvips-linux-x64": "1.0.2"
      }
    },
    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.2.tgz",
-      "integrity": "sha512-F+0z8JCu/UnMzg8IYW1TMeiViIWBVg7IWP6nE0p5S5EPQxlLd76c8jYemG21X99UzFwgkRo5yz2DS+zbrnxZeA==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.3.tgz",
+      "integrity": "sha512-qnDccehRDXadhM9PM5hLvcPRYqyFCBN31kq+ErBSZtZlsAc1U4Z85xf/RXv1qolkdu+ibw64fUDaRdktxTNP9A==",
      "cpu": [
        "arm64"
      ],
@@ -1301,13 +1301,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.1"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2"
      }
    },
    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.2.tgz",
-      "integrity": "sha512-+ZLE3SQmSL+Fn1gmSaM8uFusW5Y3J9VOf+wMGNnTtJUMUxFhv+P4UPaYEYT8tqnyYVaOVGgMN/zsOxn9pSsO2A==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.3.tgz",
+      "integrity": "sha512-Jhchim8kHWIU/GZ+9poHMWRcefeaxFIs9EBqf9KtcC14Ojk6qua7ghKiPs0sbeLbLj/2IGBtDcxHyjCdYWkk2w==",
      "cpu": [
        "x64"
      ],
@@ -1327,20 +1327,20 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.1"
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2"
      }
    },
    "node_modules/@img/sharp-wasm32": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.2.tgz",
-      "integrity": "sha512-fLbTaESVKuQcpm8ffgBD7jLb/CQLcATju/jxtTXR1XCLwbOQt+OL5zPHSDMmp2JZIeq82e18yE0Vv7zh6+6BfQ==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.3.tgz",
+      "integrity": "sha512-68zivsdJ0koE96stdUfM+gmyaK/NcoSZK5dV5CAjES0FUXS9lchYt8LAB5rTbM7nlWtxaU/2GON0HVN6/ZYJAQ==",
      "cpu": [
        "wasm32"
      ],
      "dev": true,
      "optional": true,
      "dependencies": {
-        "@emnapi/runtime": "^0.45.0"
+        "@emnapi/runtime": "^1.1.0"
      },
      "engines": {
        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
@@ -1353,9 +1353,9 @@
      }
    },
    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.2.tgz",
-      "integrity": "sha512-okBpql96hIGuZ4lN3+nsAjGeggxKm7hIRu9zyec0lnfB8E7Z6p95BuRZzDDXZOl2e8UmR4RhYt631i7mfmKU8g==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.3.tgz",
+      "integrity": "sha512-CyimAduT2whQD8ER4Ux7exKrtfoaUiVr7HG0zZvO0XTFn2idUWljjxv58GxNTkFb8/J9Ub9AqITGkJD6ZginxQ==",
      "cpu": [
        "ia32"
      ],
@@ -1375,9 +1375,9 @@
      }
    },
    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.2.tgz",
-      "integrity": "sha512-E4magOks77DK47FwHUIGH0RYWSgRBfGdK56kIHSVeB9uIS4pPFr4N2kIVsXdQQo4LzOsENKV5KAhRlRL7eMAdg==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.3.tgz",
+      "integrity": "sha512-viT4fUIDKnli3IfOephGnolMzhz5VaTvDRkYqtZxOMIoMQ4MrAziO7pT1nVnOt2FAm7qW5aa+CCc13aEY6Le0g==",
      "cpu": [
        "x64"
      ],
@@ -1814,14 +1814,14 @@
      }
    },
    "node_modules/@sveltejs/enhanced-img": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/@sveltejs/enhanced-img/-/enhanced-img-0.1.9.tgz",
-      "integrity": "sha512-gUgaiG88P6moWcxZx4YrzMhAlw1TgggKRp7n9gdfCREDeXHysCd1l9GpQR3sh109SM3rNlkiaAzt+iPLT0aG1w==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/enhanced-img/-/enhanced-img-0.2.0.tgz",
+      "integrity": "sha512-W6wG0RxQYoL13LmUl8IBHeQatMXSd2ybrjg/WQuE5EoIJq+wUkf1hUDaMp9PHe4ubpnzWK/c0QaE5Ls+zjHimA==",
      "dev": true,
      "dependencies": {
        "magic-string": "^0.30.5",
        "svelte-parse-markup": "^0.1.2",
-        "vite-imagetools": "^6.2.8"
+        "vite-imagetools": "^7.0.1"
      }
    },
    "node_modules/@sveltejs/kit": {
@@ -2264,16 +2264,16 @@
      }
    },
    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz",
-      "integrity": "sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.5.0.tgz",
+      "integrity": "sha512-HpqNTH8Du34nLxbKgVMGljZMG0rJd2O9ecvr2QLYp+7512ty1j42KnsFwspPXg1Vh8an9YImf6CokUBltisZFQ==",
      "dev": true,
      "dependencies": {
        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/type-utils": "7.4.0",
-        "@typescript-eslint/utils": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/type-utils": "7.5.0",
+        "@typescript-eslint/utils": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4",
        "graphemer": "^1.4.0",
        "ignore": "^5.2.4",
@@ -2332,15 +2332,15 @@
      "dev": true
    },
    "node_modules/@typescript-eslint/parser": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.4.0.tgz",
-      "integrity": "sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.5.0.tgz",
+      "integrity": "sha512-cj+XGhNujfD2/wzR1tabNsidnYRaFfEkcULdcIyVBYcXjBvBKOes+mpMBP7hMpOyk+gBcfXsrg4NBGAStQyxjQ==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/typescript-estree": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4"
      },
      "engines": {
@@ -2360,13 +2360,13 @@
      }
    },
    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz",
-      "integrity": "sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.5.0.tgz",
+      "integrity": "sha512-Z1r7uJY0MDeUlql9XJ6kRVgk/sP11sr3HKXn268HZyqL7i4cEfrdFuSSY/0tUqT37l5zT0tJOsuDP16kio85iA==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0"
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0"
      },
      "engines": {
        "node": "^18.18.0 || >=20.0.0"
@@ -2377,13 +2377,13 @@
      }
    },
    "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz",
-      "integrity": "sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.5.0.tgz",
+      "integrity": "sha512-A021Rj33+G8mx2Dqh0nMO9GyjjIBK3MqgVgZ2qlKf6CJy51wY/lkkFqq3TqqnH34XyAHUkq27IjlUkWlQRpLHw==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.4.0",
-        "@typescript-eslint/utils": "7.4.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
+        "@typescript-eslint/utils": "7.5.0",
        "debug": "^4.3.4",
        "ts-api-utils": "^1.0.1"
      },
@@ -2404,9 +2404,9 @@
      }
    },
    "node_modules/@typescript-eslint/types": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.4.0.tgz",
-      "integrity": "sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.5.0.tgz",
+      "integrity": "sha512-tv5B4IHeAdhR7uS4+bf8Ov3k793VEVHd45viRRkehIUZxm0WF82VPiLgHzA/Xl4TGPg1ZD49vfxBKFPecD5/mg==",
      "dev": true,
      "engines": {
        "node": "^18.18.0 || >=20.0.0"
@@ -2417,13 +2417,13 @@
      }
    },
    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz",
-      "integrity": "sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.5.0.tgz",
+      "integrity": "sha512-YklQQfe0Rv2PZEueLTUffiQGKQneiIEKKnfIqPIOxgM9lKSZFCjT5Ad4VqRKj/U4+kQE3fa8YQpskViL7WjdPQ==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/visitor-keys": "7.4.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/visitor-keys": "7.5.0",
        "debug": "^4.3.4",
        "globby": "^11.1.0",
        "is-glob": "^4.0.3",
@@ -2502,17 +2502,17 @@
      "dev": true
    },
    "node_modules/@typescript-eslint/utils": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.4.0.tgz",
-      "integrity": "sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.5.0.tgz",
+      "integrity": "sha512-3vZl9u0R+/FLQcpy2EHyRGNqAS/ofJ3Ji8aebilfJe+fobK8+LbIFmrHciLVDxjDoONmufDcnVSF38KwMEOjzw==",
      "dev": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.4.0",
        "@types/json-schema": "^7.0.12",
        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "7.4.0",
-        "@typescript-eslint/types": "7.4.0",
-        "@typescript-eslint/typescript-estree": "7.4.0",
+        "@typescript-eslint/scope-manager": "7.5.0",
+        "@typescript-eslint/types": "7.5.0",
+        "@typescript-eslint/typescript-estree": "7.5.0",
        "semver": "^7.5.4"
      },
      "engines": {
@@ -2560,12 +2560,12 @@
      "dev": true
    },
    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz",
-      "integrity": "sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.5.0.tgz",
+      "integrity": "sha512-mcuHM/QircmA6O7fy6nn2w/3ditQkj+SgtOc8DW3uQ10Yfj42amm2i+6F2K4YAOPNNTmE6iM1ynM6lrSwdendA==",
      "dev": true,
      "dependencies": {
-        "@typescript-eslint/types": "7.4.0",
+        "@typescript-eslint/types": "7.5.0",
        "eslint-visitor-keys": "^3.4.1"
      },
      "engines": {
@@ -3787,9 +3787,9 @@
      }
    },
    "node_modules/detect-libc": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
-      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
      "dev": true,
      "engines": {
        "node": ">=8"
@@ -5090,24 +5090,24 @@
      ]
    },
    "node_modules/ignore": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
-      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
      "dev": true,
      "engines": {
        "node": ">= 4"
      }
    },
    "node_modules/imagetools-core": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-6.0.4.tgz",
-      "integrity": "sha512-N1qs5qn7u9nR3kboISkYuvJm8MohiphCfBa+wx1UOropVaFis9/mh6wuDPLHJNhl6/64C7q2Pch5NASVKAaSrg==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-7.0.0.tgz",
+      "integrity": "sha512-6fYbD7u4VIOt6fqKrOlbF77JXgUVyUmEJIPlfYVTuR/S2Ig9cX3gukGiLEU0aSetcfE7CYnhLTPtTEu4mLwhCw==",
      "dev": true,
      "dependencies": {
        "sharp": "^0.33.1"
      },
      "engines": {
-        "node": ">=12.0.0"
+        "node": ">=18.0.0"
      }
    },
    "node_modules/import-fresh": {
@@ -7508,43 +7508,43 @@
      }
    },
    "node_modules/sharp": {
-      "version": "0.33.2",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.2.tgz",
-      "integrity": "sha512-WlYOPyyPDiiM07j/UO+E720ju6gtNtHjEGg5vovUk1Lgxyjm2LFO+37Nt/UI3MMh2l6hxTWQWi7qk3cXJTutcQ==",
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.3.tgz",
+      "integrity": "sha512-vHUeXJU1UvlO/BNwTpT0x/r53WkLUVxrmb5JTgW92fdFCFk0ispLMAeu/jPO2vjkXM1fYUi3K7/qcLF47pwM1A==",
      "dev": true,
      "hasInstallScript": true,
      "dependencies": {
        "color": "^4.2.3",
-        "detect-libc": "^2.0.2",
-        "semver": "^7.5.4"
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.0"
      },
      "engines": {
-        "libvips": ">=8.15.1",
+        "libvips": ">=8.15.2",
        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
      },
      "funding": {
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.33.2",
-        "@img/sharp-darwin-x64": "0.33.2",
-        "@img/sharp-libvips-darwin-arm64": "1.0.1",
-        "@img/sharp-libvips-darwin-x64": "1.0.1",
-        "@img/sharp-libvips-linux-arm": "1.0.1",
-        "@img/sharp-libvips-linux-arm64": "1.0.1",
-        "@img/sharp-libvips-linux-s390x": "1.0.1",
-        "@img/sharp-libvips-linux-x64": "1.0.1",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.1",
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.1",
-        "@img/sharp-linux-arm": "0.33.2",
-        "@img/sharp-linux-arm64": "0.33.2",
-        "@img/sharp-linux-s390x": "0.33.2",
-        "@img/sharp-linux-x64": "0.33.2",
-        "@img/sharp-linuxmusl-arm64": "0.33.2",
-        "@img/sharp-linuxmusl-x64": "0.33.2",
-        "@img/sharp-wasm32": "0.33.2",
-        "@img/sharp-win32-ia32": "0.33.2",
-        "@img/sharp-win32-x64": "0.33.2"
+        "@img/sharp-darwin-arm64": "0.33.3",
+        "@img/sharp-darwin-x64": "0.33.3",
+        "@img/sharp-libvips-darwin-arm64": "1.0.2",
+        "@img/sharp-libvips-darwin-x64": "1.0.2",
+        "@img/sharp-libvips-linux-arm": "1.0.2",
+        "@img/sharp-libvips-linux-arm64": "1.0.2",
+        "@img/sharp-libvips-linux-s390x": "1.0.2",
+        "@img/sharp-libvips-linux-x64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+        "@img/sharp-linux-arm": "0.33.3",
+        "@img/sharp-linux-arm64": "0.33.3",
+        "@img/sharp-linux-s390x": "0.33.3",
+        "@img/sharp-linux-x64": "0.33.3",
+        "@img/sharp-linuxmusl-arm64": "0.33.3",
+        "@img/sharp-linuxmusl-x64": "0.33.3",
+        "@img/sharp-wasm32": "0.33.3",
+        "@img/sharp-win32-ia32": "0.33.3",
+        "@img/sharp-win32-x64": "0.33.3"
      }
    },
    "node_modules/sharp/node_modules/lru-cache": {
@@ -8039,9 +8039,9 @@
      }
    },
    "node_modules/svelte-check": {
-      "version": "3.6.8",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.8.tgz",
-      "integrity": "sha512-rhXU7YCDtL+lq2gCqfJDXKTxJfSsCgcd08d7VWBFxTw6IWIbMWSaASbAOD3N0VV9TYSSLUqEBiratLd8WxAJJA==",
+      "version": "3.6.9",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.9.tgz",
+      "integrity": "sha512-hDQrk3L0osX07djQyMiXocKysTLfusqi8AriNcCiQxhQR49/LonYolcUGMtZ0fbUR8HTR198Prrgf52WWU9wEg==",
      "dev": true,
      "dependencies": {
        "@jridgewell/trace-mapping": "^0.3.17",
@@ -8470,12 +8470,12 @@
      }
    },
    "node_modules/ts-api-utils": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
-      "integrity": "sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
      "dev": true,
      "engines": {
-        "node": ">=16.13.0"
+        "node": ">=16"
      },
      "peerDependencies": {
        "typescript": ">=4.2.0"
@@ -8677,9 +8677,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.7.tgz",
-      "integrity": "sha512-k14PWOKLI6pMaSzAuGtT+Cf0YmIx12z9YGon39onaJNy8DLBfBJrzg9FQEmkAM5lpHBZs9wksWAsyF/HkpEwJA==",
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
      "dev": true,
      "dependencies": {
        "esbuild": "^0.20.1",
@@ -8732,16 +8732,16 @@
      }
    },
    "node_modules/vite-imagetools": {
-      "version": "6.2.9",
-      "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-6.2.9.tgz",
-      "integrity": "sha512-C4ZYhgj2vAj43/TpZ06XlDNP0p/7LIeYbgUYr+xG44nM++4HGX6YZBKAYpiBNgiCFUTJ6eXkRppWBrfPMevgmg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-7.0.1.tgz",
+      "integrity": "sha512-23jnLhkTH0HR9Vd9LxMYnajOLeo0RJNEAHhtlsQP6kfPuOBoTzt54rWbEWB9jmhEXAOflLQpM+FrmilVPAoyGA==",
      "dev": true,
      "dependencies": {
        "@rollup/pluginutils": "^5.0.5",
-        "imagetools-core": "^6.0.4"
+        "imagetools-core": "^7.0.0"
      },
      "engines": {
-        "node": ">=12.0.0"
+        "node": ">=18.0.0"
      }
    },
    "node_modules/vite-node": {
@@ -25,7 +25,7 @@
    "@faker-js/faker": "^8.4.1",
    "@socket.io/component-emitter": "^3.1.0",
    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/enhanced-img": "^0.1.8",
+    "@sveltejs/enhanced-img": "^0.2.0",
    "@sveltejs/kit": "^2.5.2",
    "@sveltejs/vite-plugin-svelte": "^3.0.2",
    "@testing-library/jest-dom": "^6.4.2",
@@ -42,7 +42,8 @@
 </script>

 <ConfirmDialogue
-  title="Delete User"
+  id="delete-user-confirmation-modal"
+  title="Delete user"
  confirmText={forceDelete ? 'Permanently Delete' : 'Delete'}
  onConfirm={handleDeleteUser}
  onClose={() => dispatch('cancel')}
@@ -147,6 +147,7 @@

 {#if confirmJob}
  <ConfirmDialogue
+    id="reprocess-faces-modal"
    prompt="Are you sure you want to reprocess all faces? This will also clear named people."
    {onConfirm}
    onClose={() => (confirmJob = null)}
@@ -28,7 +28,8 @@
 </script>

 <ConfirmDialogue
-  title="Restore User"
+  id="restore-user-modal"
+  title="Restore user"
  confirmText="Continue"
  confirmColor="green"
  onConfirm={handleRestoreUser}
@@ -5,7 +5,7 @@
  export let onConfirm: () => void;
 </script>

-<ConfirmDialogue title="Disable Login" onClose={onCancel} {onConfirm}>
+<ConfirmDialogue id="disable-login-modal" title="Disable login" onClose={onCancel} {onConfirm}>
  <svelte:fragment slot="prompt">
    <div class="flex flex-col gap-4">
      <p>Are you sure you want to disable all login methods? Login will be completely disabled.</p>
@@ -179,7 +179,7 @@
        <SettingSelect
          label="TRANSCODE POLICY"
          {disabled}
-          desc="Policy for when a video should be transcoded."
+          desc="Policy for when a video should be transcoded. HDR videos will always be transcoded (except if transcoding is disabled)."
          bind:value={config.ffmpeg.transcode}
          name="transcode"
          options={[
@@ -1,10 +1,8 @@
 <script lang="ts">
  import Icon from '$lib/components/elements/icon.svelte';
  import { updateAlbumInfo, type AlbumResponseDto, type UserResponseDto, AssetOrder } from '@immich/sdk';
-  import { mdiArrowDownThin, mdiArrowUpThin, mdiClose, mdiPlus } from '@mdi/js';
+  import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus } from '@mdi/js';
  import { createEventDispatcher } from 'svelte';
-
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
@@ -52,67 +50,52 @@
  };
 </script>

-<FullScreenModal onClose={() => dispatch('close')}>
-  <div class="flex h-full w-full place-content-center place-items-center overflow-hidden p-2 md:p-0">
-    <div
-      class="w-[550px] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-    >
-      <div class="px-2 pt-2">
-        <div class="flex items-center">
-          <h1 class="px-4 w-full self-center font-medium text-immich-primary dark:text-immich-dark-primary">Options</h1>
+<FullScreenModal id="album-options-modal" title="Options" onClose={() => dispatch('close')}>
+  <div class="items-center justify-center">
+    <div class="py-2">
+      <h2 class="text-gray text-sm mb-2">SETTINGS</h2>
+      <div class="grid p-2 gap-y-2">
+        {#if order}
+          <SettingDropdown
+            title="Display order"
+            options={Object.values(options)}
+            selectedOption={options[order]}
+            onToggle={handleToggle}
+          />
+        {/if}
+        <SettingSwitch
+          id="comments-likes"
+          title="Comments & likes"
+          subtitle="Let others respond"
+          checked={album.isActivityEnabled}
+          on:toggle={() => dispatch('toggleEnableActivity')}
+        />
+      </div>
+    </div>
+    <div class="py-2">
+      <div class="text-gray text-sm mb-3">PEOPLE</div>
+      <div class="p-2">
+        <button class="flex items-center gap-2" on:click={() => dispatch('showSelectSharedUser')}>
+          <div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
+            <div><Icon path={mdiPlus} size="25" /></div>
+          </div>
+          <div>Invite People</div>
+        </button>
+        <div class="flex items-center gap-2 py-2 mt-2">
          <div>
-            <CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
+            <UserAvatar {user} size="md" />
          </div>
+          <div class="w-full">{user.name}</div>
+          <div>Owner</div>
        </div>
-
-        <div class=" items-center justify-center p-4">
-          <div class="py-2">
-            <h2 class="text-gray text-sm mb-2">SETTINGS</h2>
-            <div class="grid p-2 gap-y-2">
-              {#if order}
-                <SettingDropdown
-                  title="Display order"
-                  options={Object.values(options)}
-                  selectedOption={options[order]}
-                  onToggle={handleToggle}
-                />
-              {/if}
-              <SettingSwitch
-                id="comments-likes"
-                title="Comments & likes"
-                subtitle="Let others respond"
-                checked={album.isActivityEnabled}
-                on:toggle={() => dispatch('toggleEnableActivity')}
-              />
+        {#each album.sharedUsers as user (user.id)}
+          <div class="flex items-center gap-2 py-2">
+            <div>
+              <UserAvatar {user} size="md" />
            </div>
+            <div class="w-full">{user.name}</div>
          </div>
-          <div class="py-2">
-            <div class="text-gray text-sm mb-3">PEOPLE</div>
-            <div class="p-2">
-              <button class="flex items-center gap-2" on:click={() => dispatch('showSelectSharedUser')}>
-                <div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
-                  <div><Icon path={mdiPlus} size="25" /></div>
-                </div>
-                <div>Invite People</div>
-              </button>
-              <div class="flex items-center gap-2 py-2 mt-2">
-                <div>
-                  <UserAvatar {user} size="md" />
-                </div>
-                <div class="w-full">{user.name}</div>
-                <div>Owner</div>
-              </div>
-              {#each album.sharedUsers as user (user.id)}
-                <div class="flex items-center gap-2 py-2">
-                  <div>
-                    <UserAvatar {user} size="md" />
-                  </div>
-                  <div class="w-full">{user.name}</div>
-                </div>
-              {/each}
-            </div>
-          </div>
-        </div>
+        {/each}
      </div>
    </div>
  </div>
@@ -432,7 +432,7 @@
 {#if allowEdit}
  <!-- Edit Modal -->
  {#if albumToEdit}
-    <FullScreenModal onClose={() => (albumToEdit = null)}>
+    <FullScreenModal id="edit-album-modal" title="Edit album" width="wide" onClose={() => (albumToEdit = null)}>
      <EditAlbumForm album={albumToEdit} onEditSuccess={successEditAlbumInfo} onCancel={() => (albumToEdit = null)} />
    </FullScreenModal>
  {/if}
@@ -458,7 +458,8 @@
  <!-- Delete Modal -->
  {#if albumToDelete}
    <ConfirmDialogue
-      title="Delete Album"
+      id="delete-album-dialogue-modal"
+      title="Delete album"
      confirmText="Delete"
      onConfirm={deleteSelectedAlbum}
      onClose={() => (albumToDelete = null)}
@@ -121,7 +121,8 @@

 {#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
  <ConfirmDialogue
-    title="Leave Album?"
+    id="leave-album-modal"
+    title="Leave album?"
    prompt="Are you sure you want to leave {album.albumName}?"
    confirmText="Leave"
    onConfirm={handleRemoveUser}
@@ -131,7 +132,8 @@

 {#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
  <ConfirmDialogue
-    title="Remove User?"
+    id="remove-user-modal"
+    title="Remove user?"
    prompt="Are you sure you want to remove {selectedRemoveUser.name}"
    confirmText="Remove"
    onConfirm={handleRemoveUser}
@@ -21,7 +21,7 @@

  export let peopleWithFaces: AssetFaceResponseDto[];
  export let allPeople: PersonResponseDto[];
-  export let editedPerson: PersonResponseDto;
+  export let editedPersonIndex: number;
  export let assetType: AssetTypeEnum;
  export let assetId: string;

@@ -106,7 +106,7 @@

  const handleCreatePerson = async () => {
    const timeout = setTimeout(() => (isShowLoadingNewPerson = true), timeBeforeShowLoadingSpinner);
-    const personToUpdate = peopleWithFaces.find((face) => face.person?.id === editedPerson.id);
+    const personToUpdate = peopleWithFaces.find((person) => person.id === peopleWithFaces[editedPersonIndex].id);

    const newFeaturePhoto = personToUpdate ? await zoomImageToBase64(personToUpdate) : null;

@@ -229,7 +229,7 @@
    <div class="immich-scrollbar mt-4 flex flex-wrap gap-2 overflow-y-auto">
      {#if searchName == ''}
        {#each allPeople as person (person.id)}
-          {#if person.id !== editedPerson.id}
+          {#if person.id !== peopleWithFaces[editedPersonIndex].person?.id}
            <div class="w-fit">
              <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
                <div class="relative">
@@ -255,7 +255,7 @@
        {/each}
      {:else}
        {#each searchedPeople as person (person.id)}
-          {#if person.id !== editedPerson.id}
+          {#if person.id !== peopleWithFaces[editedPersonIndex].person?.id}
            <div class="w-fit">
              <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
                <div class="relative">
@@ -161,6 +161,7 @@

    {#if isShowConfirmation}
      <ConfirmDialogue
+        id="merge-people-modal"
        title="Merge people"
        confirmText="Merge"
        onConfirm={handleMerge}
@@ -3,7 +3,7 @@
  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
  import { getPeopleThumbnailUrl } from '$lib/utils';
  import { type PersonResponseDto } from '@immich/sdk';
-  import { mdiArrowLeft, mdiClose, mdiMerge } from '@mdi/js';
+  import { mdiArrowLeft, mdiMerge } from '@mdi/js';
  import { createEventDispatcher } from 'svelte';
  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
  import Button from '../elements/buttons/button.svelte';
@@ -30,95 +30,80 @@
  };
 </script>

-<FullScreenModal onClose={() => dispatch('close')}>
-  <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
-    <div
-      class="w-[250px] max-w-[125vw] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg md:w-[375px]"
-    >
-      <div class="relative flex items-center justify-between">
-        <h1 class="truncate px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">
-          Merge People - {title}
-        </h1>
-        <div class="p-2">
-          <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
+<FullScreenModal id="merge-people-modal" title="Merge people - {title}" onClose={() => dispatch('close')}>
+  <div class="flex items-center justify-center py-4 md:h-36 md:py-4">
+    {#if !choosePersonToMerge}
+      <div class="flex h-20 w-20 items-center px-1 md:h-24 md:w-24 md:px-2">
+        <ImageThumbnail
+          circle
+          shadow
+          url={getPeopleThumbnailUrl(personMerge1.id)}
+          altText={personMerge1.name}
+          widthStyle="100%"
+        />
+      </div>
+      <div class="mx-0.5 flex md:mx-2">
+        <CircleIconButton
+          title="Swap merge direction"
+          icon={mdiMerge}
+          on:click={() => ([personMerge1, personMerge2] = [personMerge2, personMerge1])}
+        />
+      </div>
+
+      <button
+        disabled={potentialMergePeople.length === 0}
+        class="flex h-28 w-28 items-center rounded-full border-2 border-immich-primary px-1 dark:border-immich-dark-primary md:h-32 md:w-32 md:px-2"
+        on:click={() => {
+          if (potentialMergePeople.length > 0) {
+            choosePersonToMerge = !choosePersonToMerge;
+          }
+        }}
+      >
+        <ImageThumbnail
+          border={potentialMergePeople.length > 0}
+          circle
+          shadow
+          url={getPeopleThumbnailUrl(personMerge2.id)}
+          altText={personMerge2.name}
+          widthStyle="100%"
+        />
+      </button>
+    {:else}
+      <div class="grid w-full grid-cols-1 gap-2">
+        <div class="px-2">
+          <button on:click={() => (choosePersonToMerge = false)}> <Icon path={mdiArrowLeft} /></button>
+        </div>
+        <div class="flex items-center justify-center">
+          <div class="flex flex-wrap justify-center md:grid md:grid-cols-{potentialMergePeople.length}">
+            {#each potentialMergePeople as person (person.id)}
+              <div class="h-24 w-24 md:h-28 md:w-28">
+                <button class="p-2 w-full" on:click={() => changePersonToMerge(person)}>
+                  <ImageThumbnail
+                    border={true}
+                    circle
+                    shadow
+                    url={getPeopleThumbnailUrl(person.id)}
+                    altText={person.name}
+                    widthStyle="100%"
+                    on:click={() => changePersonToMerge(person)}
+                  />
+                </button>
+              </div>
+            {/each}
+          </div>
        </div>
      </div>
+    {/if}
+  </div>

-      <div class="flex items-center justify-center px-2 py-4 md:h-36 md:px-4 md:py-4">
-        {#if !choosePersonToMerge}
-          <div class="flex h-20 w-20 items-center px-1 md:h-24 md:w-24 md:px-2">
-            <ImageThumbnail
-              circle
-              shadow
-              url={getPeopleThumbnailUrl(personMerge1.id)}
-              altText={personMerge1.name}
-              widthStyle="100%"
-            />
-          </div>
-          <div class="mx-0.5 flex md:mx-2">
-            <CircleIconButton
-              title="Swap merge direction"
-              icon={mdiMerge}
-              on:click={() => ([personMerge1, personMerge2] = [personMerge2, personMerge1])}
-            />
-          </div>
-
-          <button
-            disabled={potentialMergePeople.length === 0}
-            class="flex h-28 w-28 items-center rounded-full border-2 border-immich-primary px-1 dark:border-immich-dark-primary md:h-32 md:w-32 md:px-2"
-            on:click={() => {
-              if (potentialMergePeople.length > 0) {
-                choosePersonToMerge = !choosePersonToMerge;
-              }
-            }}
-          >
-            <ImageThumbnail
-              border={potentialMergePeople.length > 0}
-              circle
-              shadow
-              url={getPeopleThumbnailUrl(personMerge2.id)}
-              altText={personMerge2.name}
-              widthStyle="100%"
-            />
-          </button>
-        {:else}
-          <div class="grid w-full grid-cols-1 gap-2">
-            <div class="px-2">
-              <button on:click={() => (choosePersonToMerge = false)}> <Icon path={mdiArrowLeft} /></button>
-            </div>
-            <div class="flex items-center justify-center">
-              <div class="flex flex-wrap justify-center md:grid md:grid-cols-{potentialMergePeople.length}">
-                {#each potentialMergePeople as person (person.id)}
-                  <div class="h-24 w-24 md:h-28 md:w-28">
-                    <button class="p-2 w-full" on:click={() => changePersonToMerge(person)}>
-                      <ImageThumbnail
-                        border={true}
-                        circle
-                        shadow
-                        url={getPeopleThumbnailUrl(person.id)}
-                        altText={person.name}
-                        widthStyle="100%"
-                        on:click={() => changePersonToMerge(person)}
-                      />
-                    </button>
-                  </div>
-                {/each}
-              </div>
-            </div>
-          </div>
-        {/if}
-      </div>
-
-      <div class="flex px-4 md:px-8 md:pt-4">
-        <h1 class="text-xl text-gray-500 dark:text-gray-300">Are these the same person?</h1>
-      </div>
-      <div class="flex px-4 pt-2 md:px-8">
-        <p class="text-sm text-gray-500 dark:text-gray-300">They will be merged together</p>
-      </div>
-      <div class="mt-8 flex w-full gap-4 px-4 pb-4">
-        <Button fullwidth color="gray" on:click={() => dispatch('reject')}>No</Button>
-        <Button fullwidth on:click={() => dispatch('confirm', [personMerge1, personMerge2])}>Yes</Button>
-      </div>
-    </div>
+  <div class="flex px-4 md:pt-4">
+    <h1 class="text-xl text-gray-500 dark:text-gray-300">Are these the same person?</h1>
+  </div>
+  <div class="flex px-4 pt-2">
+    <p class="text-sm text-gray-500 dark:text-gray-300">They will be merged together</p>
+  </div>
+  <div class="mt-8 flex w-full gap-4 pb-4">
+    <Button fullwidth color="gray" on:click={() => dispatch('reject')}>No</Button>
+    <Button fullwidth on:click={() => dispatch('confirm', [personMerge1, personMerge2])}>Yes</Button>
  </div>
 </FullScreenModal>
@@ -28,14 +28,14 @@
  export let assetType: AssetTypeEnum;

  // keep track of the changes
-  let peopleToCreate: string[] = [];
-  let assetFaceGenerated: string[] = [];
+  let numberOfPersonToCreate: string[] = [];
+  let numberOfAssetFaceGenerated: string[] = [];

  // faces
  let peopleWithFaces: AssetFaceResponseDto[] = [];
-  let selectedPersonToReassign: Record<string, PersonResponseDto> = {};
-  let selectedPersonToCreate: Record<string, string> = {};
-  let editedPerson: PersonResponseDto;
+  let selectedPersonToReassign: (PersonResponseDto | null)[];
+  let selectedPersonToCreate: (string | null)[];
+  let editedPersonIndex: number;

  // loading spinners
  let isShowLoadingDone = false;
@@ -49,8 +49,6 @@
  let loaderLoadingDoneTimeout: ReturnType<typeof setTimeout>;
  let automaticRefreshTimeout: ReturnType<typeof setTimeout>;

-  const thumbnailWidth = '90px';
-
  const dispatch = createEventDispatcher<{
    close: void;
    refresh: void;
@@ -62,6 +60,8 @@
      const { people } = await getAllPeople({ withHidden: true });
      allPeople = people;
      peopleWithFaces = await getFaces({ id: assetId });
+      selectedPersonToCreate = Array.from({ length: peopleWithFaces.length });
+      selectedPersonToReassign = Array.from({ length: peopleWithFaces.length });
    } catch (error) {
      handleError(error, "Can't get faces");
    } finally {
@@ -71,12 +71,12 @@
  }

  const onPersonThumbnail = (personId: string) => {
-    assetFaceGenerated.push(personId);
+    numberOfAssetFaceGenerated.push(personId);
    if (
-      isEqual(assetFaceGenerated, peopleToCreate) &&
+      isEqual(numberOfAssetFaceGenerated, numberOfPersonToCreate) &&
      loaderLoadingDoneTimeout &&
      automaticRefreshTimeout &&
-      Object.keys(selectedPersonToCreate).length === peopleToCreate.length
+      selectedPersonToCreate.filter((person) => person !== null).length === numberOfPersonToCreate.length
    ) {
      clearTimeout(loaderLoadingDoneTimeout);
      clearTimeout(automaticRefreshTimeout);
@@ -97,41 +97,36 @@
    dispatch('close');
  };

-  const handleReset = (id: string) => {
-    if (selectedPersonToReassign[id]) {
-      delete selectedPersonToReassign[id];
-
-      // trigger reactivity
-      selectedPersonToReassign = selectedPersonToReassign;
+  const handleReset = (index: number) => {
+    if (selectedPersonToReassign[index]) {
+      selectedPersonToReassign[index] = null;
    }
-    if (selectedPersonToCreate[id]) {
-      delete selectedPersonToCreate[id];
-
-      // trigger reactivity
-      selectedPersonToCreate = selectedPersonToCreate;
+    if (selectedPersonToCreate[index]) {
+      selectedPersonToCreate[index] = null;
    }
  };

  const handleEditFaces = async () => {
    loaderLoadingDoneTimeout = setTimeout(() => (isShowLoadingDone = true), timeBeforeShowLoadingSpinner);
-    const numberOfChanges = Object.keys(selectedPersonToCreate).length + Object.keys(selectedPersonToReassign).length;
-
+    const numberOfChanges =
+      selectedPersonToCreate.filter((person) => person !== null).length +
+      selectedPersonToReassign.filter((person) => person !== null).length;
    if (numberOfChanges > 0) {
      try {
-        for (const personWithFace of peopleWithFaces) {
-          const personId = selectedPersonToReassign[personWithFace.id]?.id;
+        for (const [index, peopleWithFace] of peopleWithFaces.entries()) {
+          const personId = selectedPersonToReassign[index]?.id;

          if (personId) {
            await reassignFacesById({
              id: personId,
-              faceDto: { id: personWithFace.id },
+              faceDto: { id: peopleWithFace.id },
            });
-          } else if (selectedPersonToCreate[personWithFace.id]) {
+          } else if (selectedPersonToCreate[index]) {
            const data = await createPerson({ personCreateDto: {} });
-            peopleToCreate.push(data.id);
+            numberOfPersonToCreate.push(data.id);
            await reassignFacesById({
              id: data.id,
-              faceDto: { id: personWithFace.id },
+              faceDto: { id: peopleWithFace.id },
            });
          }
        }
@@ -146,7 +141,7 @@
    }

    isShowLoadingDone = false;
-    if (peopleToCreate.length === 0) {
+    if (numberOfPersonToCreate.length === 0) {
      clearTimeout(loaderLoadingDoneTimeout);
      dispatch('refresh');
    } else {
@@ -155,26 +150,23 @@
  };

  const handleCreatePerson = (newFeaturePhoto: string | null) => {
-    const personToUpdate = peopleWithFaces.find((face) => face.person?.id === editedPerson.id);
+    const personToUpdate = peopleWithFaces.find((person) => person.id === peopleWithFaces[editedPersonIndex].id);
    if (newFeaturePhoto && personToUpdate) {
-      selectedPersonToCreate[personToUpdate.id] = newFeaturePhoto;
+      selectedPersonToCreate[peopleWithFaces.indexOf(personToUpdate)] = newFeaturePhoto;
    }
    showSeletecFaces = false;
  };

  const handleReassignFace = (person: PersonResponseDto | null) => {
-    const personToUpdate = peopleWithFaces.find((face) => face.person?.id === editedPerson.id);
-    if (person && personToUpdate) {
-      selectedPersonToReassign[personToUpdate.id] = person;
+    if (person) {
+      selectedPersonToReassign[editedPersonIndex] = person;
      showSeletecFaces = false;
    }
  };

-  const handlePersonPicker = (person: PersonResponseDto | null) => {
-    if (person) {
-      editedPerson = person;
-      showSeletecFaces = true;
-    }
+  const handlePersonPicker = (index: number) => {
+    editedPersonIndex = index;
+    showSeletecFaces = true;
  };
 </script>

@@ -225,48 +217,35 @@
                on:mouseleave={() => ($boundingBoxesArray = [])}
              >
                <div class="relative">
-                  {#if selectedPersonToCreate[face.id]}
-                    <ImageThumbnail
-                      curve
-                      shadow
-                      url={selectedPersonToCreate[face.id]}
-                      altText={selectedPersonToCreate[face.id]}
-                      title={'New person'}
-                      widthStyle={thumbnailWidth}
-                      heightStyle={thumbnailWidth}
-                    />
-                  {:else if selectedPersonToReassign[face.id]}
-                    <ImageThumbnail
-                      curve
-                      shadow
-                      url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id].id)}
-                      altText={selectedPersonToReassign[face.id]?.name || selectedPersonToReassign[face.id].id}
-                      title={getPersonNameWithHiddenValue(
-                        selectedPersonToReassign[face.id].name,
-                        face.person?.isHidden,
-                      )}
-                      widthStyle={thumbnailWidth}
-                      heightStyle={thumbnailWidth}
-                      hidden={selectedPersonToReassign[face.id].isHidden}
-                    />
-                  {:else}
-                    <ImageThumbnail
-                      curve
-                      shadow
-                      url={getPeopleThumbnailUrl(face.person.id)}
-                      altText={face.person.name || face.person.id}
-                      title={getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)}
-                      widthStyle={thumbnailWidth}
-                      heightStyle={thumbnailWidth}
-                      hidden={face.person.isHidden}
-                    />
-                  {/if}
+                  <ImageThumbnail
+                    curve
+                    shadow
+                    url={selectedPersonToCreate[index] ||
+                      getPeopleThumbnailUrl(selectedPersonToReassign[index]?.id || face.person.id)}
+                    altText={selectedPersonToReassign[index]
+                      ? selectedPersonToReassign[index]?.name
+                      : selectedPersonToCreate[index]
+                        ? 'New person'
+                        : getPersonNameWithHiddenValue(face.person?.name, face.person?.isHidden)}
+                    title={selectedPersonToReassign[index]
+                      ? selectedPersonToReassign[index]?.name
+                      : selectedPersonToCreate[index]
+                        ? 'New person'
+                        : getPersonNameWithHiddenValue(face.person?.name, face.person?.isHidden)}
+                    widthStyle="90px"
+                    heightStyle="90px"
+                    thumbhash={null}
+                    hidden={selectedPersonToReassign[index]
+                      ? selectedPersonToReassign[index]?.isHidden
+                      : selectedPersonToCreate[index]
+                        ? false
+                        : face.person?.isHidden}
+                  />
                </div>
-
-                {#if !selectedPersonToCreate[face.id]}
+                {#if !selectedPersonToCreate[index]}
                  <p class="relative mt-1 truncate font-medium" title={face.person?.name}>
-                    {#if selectedPersonToReassign[face.id]?.id}
-                      {selectedPersonToReassign[face.id]?.name}
+                    {#if selectedPersonToReassign[index]?.id}
+                      {selectedPersonToReassign[index]?.name}
                    {:else}
                      {face.person?.name}
                    {/if}
@@ -274,8 +253,8 @@
                {/if}

                <div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full bg-blue-700">
-                  {#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
-                    <button on:click={() => handleReset(face.id)} class="flex h-full w-full">
+                  {#if selectedPersonToCreate[index] || selectedPersonToReassign[index]}
+                    <button on:click={() => handleReset(index)} class="flex h-full w-full">
                      <div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
                        <div>
                          <Icon path={mdiRestart} size={18} />
@@ -283,7 +262,7 @@
                      </div>
                    </button>
                  {:else}
-                    <button on:click={() => handlePersonPicker(face.person)} class="flex h-full w-full">
+                    <button on:click={() => handlePersonPicker(index)} class="flex h-full w-full">
                      <div
                        class="absolute left-1/2 top-1/2 h-[2px] w-[14px] translate-x-[-50%] translate-y-[-50%] transform bg-white"
                      />
@@ -303,7 +282,7 @@
  <AssignFaceSidePanel
    {peopleWithFaces}
    {allPeople}
-    {editedPerson}
+    {editedPersonIndex}
    {assetType}
    {assetId}
    on:close={() => (showSeletecFaces = false)}
@@ -3,7 +3,6 @@
  import Button from '../elements/buttons/button.svelte';
  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
  import { mdiCake } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
  import DateInput from '../elements/date-input.svelte';

  export let birthDate: string;
@@ -21,36 +20,27 @@
  };
 </script>

-<FullScreenModal onClose={handleCancel}>
-  <div
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <Icon path={mdiCake} size="4em" />
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Set date of birth</h1>
-
-      <p class="text-sm dark:text-immich-dark-fg">
-        Date of birth is used to calculate the age of this person at the time of a photo.
-      </p>
-    </div>
-
-    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
-      <div class="m-4 flex flex-col gap-2">
-        <DateInput
-          class="immich-form-input"
-          id="birthDate"
-          name="birthDate"
-          type="date"
-          bind:value={birthDate}
-          max={todayFormatted}
-        />
-      </div>
-      <div class="mt-8 flex w-full gap-4 px-4">
-        <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
-        <Button type="submit" fullwidth>Set</Button>
-      </div>
-    </form>
+<FullScreenModal id="set-birthday-modal" title="Set date of birth" icon={mdiCake} onClose={handleCancel}>
+  <div class="text-immich-primary dark:text-immich-dark-primary">
+    <p class="text-sm dark:text-immich-dark-fg">
+      Date of birth is used to calculate the age of this person at the time of a photo.
+    </p>
  </div>
+
+  <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+    <div class="my-4 flex flex-col gap-2">
+      <DateInput
+        class="immich-form-input"
+        id="birthDate"
+        name="birthDate"
+        type="date"
+        bind:value={birthDate}
+        max={todayFormatted}
+      />
+    </div>
+    <div class="mt-8 flex w-full gap-4">
+      <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
+      <Button type="submit" fullwidth>Set</Button>
+    </div>
+  </form>
 </FullScreenModal>
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
  import type { ApiKeyResponseDto } from '@immich/sdk';
  import { mdiKeyVariant } from '@mdi/js';
  import { createEventDispatcher } from 'svelte';
@@ -8,7 +7,7 @@
  import { NotificationType, notificationController } from '../shared-components/notification/notification';

  export let apiKey: Partial<ApiKeyResponseDto>;
-  export let title = 'API Key';
+  export let title: string;
  export let cancelText = 'Cancel';
  export let submitText = 'Save';

@@ -29,29 +28,16 @@
  };
 </script>

-<FullScreenModal onClose={handleCancel}>
-  <div
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <Icon path={mdiKeyVariant} size="4em" />
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
-        {title}
-      </h1>
+<FullScreenModal id="api-key-modal" {title} icon={mdiKeyVariant} onClose={handleCancel}>
+  <form on:submit|preventDefault={handleSubmit} autocomplete="off">
+    <div class="mb-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="name">Name</label>
+      <input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKey.name} />
    </div>

-    <form on:submit|preventDefault={handleSubmit} autocomplete="off">
-      <div class="m-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="name">Name</label>
-        <input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKey.name} />
-      </div>
-
-      <div class="mt-8 flex w-full gap-4 px-4">
-        <Button color="gray" fullwidth on:click={handleCancel}>{cancelText}</Button>
-        <Button type="submit" fullwidth>{submitText}</Button>
-      </div>
-    </form>
-  </div>
+    <div class="mt-8 flex w-full gap-4">
+      <Button color="gray" fullwidth on:click={handleCancel}>{cancelText}</Button>
+      <Button type="submit" fullwidth>{submitText}</Button>
+    </div>
+  </form>
 </FullScreenModal>
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
  import { copyToClipboard } from '$lib/utils';
  import { mdiKeyVariant } from '@mdi/js';
  import { createEventDispatcher, onMount } from 'svelte';
@@ -20,31 +19,22 @@
  });
 </script>

-<FullScreenModal>
-  <div
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <Icon path={mdiKeyVariant} size="4em" />
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">API Key</h1>
+<FullScreenModal id="api-key-secret-modal" title="API key" icon={mdiKeyVariant} onClose={() => handleDone()}>
+  <div class="text-immich-primary dark:text-immich-dark-primary">
+    <p class="text-sm dark:text-immich-dark-fg">
+      This value will only be shown once. Please be sure to copy it before closing the window.
+    </p>
+  </div>

-      <p class="text-sm dark:text-immich-dark-fg">
-        This value will only be shown once. Please be sure to copy it before closing the window.
-      </p>
-    </div>
+  <div class="my-4 flex flex-col gap-2">
+    <!-- <label class="immich-form-label" for="secret">API Key</label> -->
+    <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret} />
+  </div>

-    <div class="m-4 flex flex-col gap-2">
-      <!-- <label class="immich-form-label" for="secret">API Key</label> -->
-      <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret} />
-    </div>
-
-    <div class="mt-8 flex w-full gap-4 px-4">
-      {#if canCopyImagesToClipboard}
-        <Button on:click={() => copyToClipboard(secret)} fullwidth>Copy to Clipboard</Button>
-      {/if}
-      <Button on:click={() => handleDone()} fullwidth>Done</Button>
-    </div>
+  <div class="mt-8 flex w-full gap-4">
+    {#if canCopyImagesToClipboard}
+      <Button on:click={() => copyToClipboard(secret)} fullwidth>Copy to Clipboard</Button>
+    {/if}
+    <Button on:click={() => handleDone()} fullwidth>Done</Button>
  </div>
 </FullScreenModal>
@@ -5,7 +5,6 @@
  import { createUser } from '@immich/sdk';
  import { createEventDispatcher } from 'svelte';
  import Button from '../elements/buttons/button.svelte';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
  import PasswordField from '../shared-components/password-field.svelte';
  import Slider from '../elements/slider.svelte';

@@ -69,62 +68,53 @@
  }
 </script>

-<div
-  class="max-h-screen w-[500px] max-w-[95vw] overflow-y-auto immich-scrollbar rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
->
-  <div class="flex flex-col place-content-center place-items-center gap-4 px-4">
-    <ImmichLogo noText class="text-center" height="75" width="75" />
-    <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Create new user</h1>
+<form on:submit|preventDefault={registerUser} autocomplete="off">
+  <div class="my-4 flex flex-col gap-2">
+    <label class="immich-form-label" for="email">Email</label>
+    <input class="immich-form-input" id="email" bind:value={email} type="email" required />
  </div>

-  <form on:submit|preventDefault={registerUser} autocomplete="off">
-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="email">Email</label>
-      <input class="immich-form-input" id="email" bind:value={email} type="email" required />
-    </div>
+  <div class="my-4 flex flex-col gap-2">
+    <label class="immich-form-label" for="password">Password</label>
+    <PasswordField id="password" bind:password autocomplete="new-password" />
+  </div>

-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="password">Password</label>
-      <PasswordField id="password" bind:password autocomplete="new-password" />
-    </div>
+  <div class="my-4 flex flex-col gap-2">
+    <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
+    <PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
+  </div>

-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
-      <PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
-    </div>
+  <div class="my-4 flex place-items-center justify-between gap-2">
+    <label class="text-sm dark:text-immich-dark-fg" for="require-password-change">
+      Require user to change password on first login
+    </label>
+    <Slider id="require-password-change" bind:checked={shouldChangePassword} />
+  </div>

-    <div class="m-4 flex place-items-center justify-between gap-2">
-      <label class="text-sm dark:text-immich-dark-fg" for="require-password-change">
-        Require user to change password on first login
-      </label>
-      <Slider id="require-password-change" bind:checked={shouldChangePassword} />
-    </div>
+  <div class="my-4 flex flex-col gap-2">
+    <label class="immich-form-label" for="name">Name</label>
+    <input class="immich-form-input" id="name" bind:value={name} type="text" required />
+  </div>

-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="name">Name</label>
-      <input class="immich-form-input" id="name" bind:value={name} type="text" required />
-    </div>
+  <div class="my-4 flex flex-col gap-2">
+    <label class="flex items-center gap-2 immich-form-label" for="quotaSize">
+      Quota Size (GiB)
+      {#if quotaSizeWarning}
+        <p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
+      {/if}
+    </label>
+    <input class="immich-form-input" id="quotaSize" type="number" min="0" bind:value={quotaSize} />
+  </div>

-    <div class="m-4 flex flex-col gap-2">
-      <label class="flex items-center gap-2 immich-form-label" for="quotaSize">
-        Quota Size (GiB)
-        {#if quotaSizeWarning}
-          <p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
-        {/if}
-      </label>
-      <input class="immich-form-input" id="quotaSize" type="number" min="0" bind:value={quotaSize} />
-    </div>
+  {#if error}
+    <p class="text-sm text-red-400">{error}</p>
+  {/if}

-    {#if error}
-      <p class="ml-4 text-sm text-red-400">{error}</p>
-    {/if}
-
-    {#if success}
-      <p class="ml-4 text-sm text-immich-primary">{success}</p>
-    {/if}
-    <div class="flex w-full gap-4 p-4">
-      <Button color="gray" fullwidth on:click={() => dispatch('cancel')}>Cancel</Button>
-      <Button type="submit" disabled={isCreatingUser} fullwidth>Create</Button>
-    </div>
-  </form>
-</div>
+  {#if success}
+    <p class="text-sm text-immich-primary">{success}</p>
+  {/if}
+  <div class="flex w-full gap-4 pt-4">
+    <Button color="gray" fullwidth on:click={() => dispatch('cancel')}>Cancel</Button>
+    <Button type="submit" disabled={isCreatingUser} fullwidth>Create</Button>
+  </div>
+</form>
@@ -34,39 +34,29 @@
  };
 </script>

-<div
-  class="max-h-screen w-[700px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
->
-  <div
-    class="flex flex-col place-content-center place-items-center gap-4 px-4 mb-4 text-immich-primary dark:text-immich-dark-primary"
-  >
-    <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit Album</h1>
+<form on:submit|preventDefault={handleUpdateAlbumInfo} autocomplete="off">
+  <div class="flex items-center">
+    <div class="hidden sm:flex">
+      <AlbumCover {album} css="h-[200px] w-[200px] m-4 shadow-lg" />
+    </div>
+
+    <div class="flex-grow">
+      <div class="m-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="name">Name</label>
+        <input class="immich-form-input" id="name" type="text" bind:value={albumName} />
+      </div>
+
+      <div class="m-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="description">Description</label>
+        <textarea class="immich-form-input" id="description" bind:value={description} />
+      </div>
+    </div>
  </div>

-  <form on:submit|preventDefault={handleUpdateAlbumInfo} autocomplete="off">
-    <div class="flex items-center">
-      <div class="hidden sm:flex">
-        <AlbumCover {album} css="h-[200px] w-[200px] m-4 shadow-lg" />
-      </div>
-
-      <div class="flex-grow">
-        <div class="m-4 flex flex-col gap-2">
-          <label class="immich-form-label" for="name">Name</label>
-          <input class="immich-form-input" id="name" type="text" bind:value={albumName} />
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-          <label class="immich-form-label" for="description">Description</label>
-          <textarea class="immich-form-input" id="description" bind:value={description} />
-        </div>
-      </div>
+  <div class="flex justify-center">
+    <div class="mt-8 flex w-full sm:w-2/3 gap-4">
+      <Button color="gray" fullwidth on:click={() => onCancel?.()}>Cancel</Button>
+      <Button type="submit" fullwidth disabled={isSubmitting}>OK</Button>
    </div>
-
-    <div class="flex justify-center">
-      <div class="mt-8 flex w-full sm:w-2/3 gap-4 px-4">
-        <Button color="gray" fullwidth on:click={() => onCancel?.()}>Cancel</Button>
-        <Button type="submit" fullwidth disabled={isSubmitting}>OK</Button>
-      </div>
-    </div>
-  </form>
-</div>
+  </div>
+</form>
@@ -1,16 +1,12 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
  import { AppRoute } from '$lib/constants';
  import { serverInfo } from '$lib/stores/server-info.store';
  import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
  import { handleError } from '$lib/utils/handle-error';
  import { updateUser, type UserResponseDto } from '@immich/sdk';
-  import { mdiAccountEditOutline, mdiClose } from '@mdi/js';
  import { createEventDispatcher } from 'svelte';
  import Button from '../elements/buttons/button.svelte';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';

  export let user: UserResponseDto;
  export let canResetPassword = true;
@@ -91,82 +87,64 @@
  }
 </script>

-<FocusTrap>
-  <div
-    class="relative max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-  >
-    <div class="absolute top-0 right-0 px-2 py-2 h-fit">
-      <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
-    </div>
-
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <Icon path={mdiAccountEditOutline} size="4em" />
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit user</h1>
-    </div>
-
-    <form on:submit|preventDefault={editUser} autocomplete="off">
-      <div class="m-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="email">Email</label>
-        <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
-      </div>
-
-      <div class="m-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="name">Name</label>
-        <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
-      </div>
-
-      <div class="m-4 flex flex-col gap-2">
-        <label class="flex items-center gap-2 immich-form-label" for="quotaSize"
-          >Quota Size (GiB) {#if quotaSizeWarning}
-            <p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
-          {/if}</label
-        >
-        <input class="immich-form-input" id="quotaSize" name="quotaSize" type="number" min="0" bind:value={quotaSize} />
-        <p>Note: Enter 0 for unlimited quota</p>
-      </div>
-
-      <div class="m-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="storage-label">Storage Label</label>
-        <input
-          class="immich-form-input"
-          id="storage-label"
-          name="storage-label"
-          type="text"
-          bind:value={user.storageLabel}
-        />
-
-        <p>
-          Note: To apply the Storage Label to previously uploaded assets, run the
-          <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
-            Storage Migration Job</a
-          >
-        </p>
-      </div>
-
-      {#if error}
-        <p class="ml-4 text-sm text-red-400">{error}</p>
-      {/if}
-
-      {#if success}
-        <p class="ml-4 text-sm text-immich-primary">{success}</p>
-      {/if}
-      <div class="mt-8 flex w-full gap-4 px-4">
-        {#if canResetPassword}
-          <Button color="light-red" fullwidth on:click={() => (isShowResetPasswordConfirmation = true)}
-            >Reset password</Button
-          >
-        {/if}
-        <Button type="submit" fullwidth>Confirm</Button>
-      </div>
-    </form>
+<form on:submit|preventDefault={editUser} autocomplete="off">
+  <div class="my-4 flex flex-col gap-2">
+    <label class="immich-form-label" for="email">Email</label>
+    <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
  </div>
-</FocusTrap>
+
+  <div class="my-4 flex flex-col gap-2">
+    <label class="immich-form-label" for="name">Name</label>
+    <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
+  </div>
+
+  <div class="my-4 flex flex-col gap-2">
+    <label class="flex items-center gap-2 immich-form-label" for="quotaSize"
+      >Quota Size (GiB) {#if quotaSizeWarning}
+        <p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
+      {/if}</label
+    >
+    <input class="immich-form-input" id="quotaSize" name="quotaSize" type="number" min="0" bind:value={quotaSize} />
+    <p>Note: Enter 0 for unlimited quota</p>
+  </div>
+
+  <div class="my-4 flex flex-col gap-2">
+    <label class="immich-form-label" for="storage-label">Storage Label</label>
+    <input
+      class="immich-form-input"
+      id="storage-label"
+      name="storage-label"
+      type="text"
+      bind:value={user.storageLabel}
+    />
+
+    <p>
+      Note: To apply the Storage Label to previously uploaded assets, run the
+      <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary"> Storage Migration Job</a>
+    </p>
+  </div>
+
+  {#if error}
+    <p class="ml-4 text-sm text-red-400">{error}</p>
+  {/if}
+
+  {#if success}
+    <p class="ml-4 text-sm text-immich-primary">{success}</p>
+  {/if}
+  <div class="mt-8 flex w-full gap-4">
+    {#if canResetPassword}
+      <Button color="light-red" fullwidth on:click={() => (isShowResetPasswordConfirmation = true)}
+        >Reset password</Button
+      >
+    {/if}
+    <Button type="submit" fullwidth>Confirm</Button>
+  </div>
+</form>

 {#if isShowResetPasswordConfirmation}
  <ConfirmDialogue
-    title="Reset Password"
+    id="reset-password-modal"
+    title="Reset password"
    confirmText="Reset"
    onConfirm={resetPassword}
    onClose={() => (isShowResetPasswordConfirmation = false)}
@@ -2,7 +2,6 @@
  import { createEventDispatcher } from 'svelte';
  import Button from '../elements/buttons/button.svelte';
  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
  import { mdiFolderRemove } from '@mdi/js';
  import { onMount } from 'svelte';

@@ -29,48 +28,42 @@
  const handleSubmit = () => dispatch('submit', { excludePattern: exclusionPattern });
 </script>

-<FullScreenModal onClose={handleCancel}>
-  <div
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <Icon path={mdiFolderRemove} size="4em" />
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Add Exclusion pattern</h1>
+<FullScreenModal
+  id="add-exclusion-pattern-modal"
+  title="Add exclusion pattern"
+  icon={mdiFolderRemove}
+  onClose={handleCancel}
+>
+  <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+    <p class="py-5 text-sm">
+      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.
+      <br /><br />
+      Add exclusion patterns. Globbing using *, **, and ? is supported. To ignore all files in any directory named "Raw",
+      use "**/Raw/**". To ignore all files ending in ".tif", use "**/*.tif". To ignore an absolute path, use "/path/to/ignore".
+    </p>
+    <div class="my-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="exclusionPattern">Pattern</label>
+      <input
+        class="immich-form-input"
+        id="exclusionPattern"
+        name="exclusionPattern"
+        type="text"
+        bind:value={exclusionPattern}
+      />
    </div>
+    <div class="mt-8 flex w-full gap-4">
+      <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
+      {#if isEditing}
+        <Button color="red" fullwidth on:click={() => dispatch('delete')}>Delete</Button>
+      {/if}

-    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
-      <p class="p-5 text-sm">
-        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.
-        <br /><br />
-        Add exclusion patterns. Globbing using *, **, and ? is supported. To ignore all files in any directory named "Raw",
-        use "**/Raw/**". To ignore all files ending in ".tif", use "**/*.tif". To ignore an absolute path, use "/path/to/ignore".
-      </p>
-      <div class="m-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="exclusionPattern">Pattern</label>
-        <input
-          class="immich-form-input"
-          id="exclusionPattern"
-          name="exclusionPattern"
-          type="text"
-          bind:value={exclusionPattern}
-        />
-      </div>
-      <div class="mt-8 flex w-full gap-4 px-4">
-        <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
-        {#if isEditing}
-          <Button color="red" fullwidth on:click={() => dispatch('delete')}>Delete</Button>
-        {/if}
-
-        <Button type="submit" disabled={!canSubmit} fullwidth>{submitText}</Button>
-      </div>
-      <div class="mt-8 flex w-full gap-4 px-4">
-        {#if isDuplicate}
-          <p class="text-red-500 text-sm">This exclusion pattern already exists.</p>
-        {/if}
-      </div>
-    </form>
-  </div>
+      <Button type="submit" disabled={!canSubmit} fullwidth>{submitText}</Button>
+    </div>
+    <div class="mt-8 flex w-full gap-4">
+      {#if isDuplicate}
+        <p class="text-red-500 text-sm">This exclusion pattern already exists.</p>
+      {/if}
+    </div>
+  </form>
 </FullScreenModal>
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { createEventDispatcher } from 'svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
  import Button from '../elements/buttons/button.svelte';
  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
  import { mdiFolderSync } from '@mdi/js';
@@ -31,45 +30,30 @@
  const handleSubmit = () => dispatch('submit', { importPath });
 </script>

-<FullScreenModal onClose={handleCancel}>
-  <div
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <Icon path={mdiFolderSync} size="4em" />
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
-        {title}
-      </h1>
+<FullScreenModal id="library-import-path-modal" {title} icon={mdiFolderSync} onClose={handleCancel}>
+  <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+    <p class="py-5 text-sm">
+      Specify a folder to import. This folder, including subfolders, will be scanned for images and videos.
+    </p>
+
+    <div class="my-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="path">Path</label>
+      <input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
    </div>

-    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
-      <p class="p-5 text-sm">
-        Specify a folder to import. This folder, including subfolders, will be scanned for images and videos. Note that
-        you are only allowed to import paths inside of your account's external path, configured in the administrative
-        settings.
-      </p>
+    <div class="mt-8 flex w-full gap-4">
+      <Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
+      {#if isEditing}
+        <Button color="red" fullwidth on:click={() => dispatch('delete')}>Delete</Button>
+      {/if}

-      <div class="m-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="path">Path</label>
-        <input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
-      </div>
+      <Button type="submit" disabled={!canSubmit} fullwidth>{submitText}</Button>
+    </div>

-      <div class="mt-8 flex w-full gap-4 px-4">
-        <Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
-        {#if isEditing}
-          <Button color="red" fullwidth on:click={() => dispatch('delete')}>Delete</Button>
-        {/if}
-
-        <Button type="submit" disabled={!canSubmit} fullwidth>{submitText}</Button>
-      </div>
-
-      <div class="mt-8 flex w-full gap-4 px-4">
-        {#if isDuplicate}
-          <p class="text-red-500 text-sm">This import path already exists.</p>
-        {/if}
-      </div>
-    </form>
-  </div>
+    <div class="mt-8 flex w-full gap-4">
+      {#if isDuplicate}
+        <p class="text-red-500 text-sm">This import path already exists.</p>
+      {/if}
+    </div>
+  </form>
 </FullScreenModal>
@@ -152,7 +152,7 @@

 {#if addImportPath}
  <LibraryImportPathForm
-    title="Add Import Path"
+    title="Add import path"
    submitText="Add"
    bind:importPath={importPathToAdd}
    {importPaths}
@@ -166,7 +166,7 @@

 {#if editImportPath != undefined}
  <LibraryImportPathForm
-    title="Edit Import Path"
+    title="Edit import path"
    submitText="Save"
    isEditing={true}
    bind:importPath={editedImportPath}
@@ -169,7 +169,7 @@
            size="sm"
            on:click={() => {
              addExclusionPattern = true;
-            }}>Add Exclusion Pattern</Button
+            }}>Add exclusion pattern</Button
          ></td
        ></tr
      >
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { createEventDispatcher } from 'svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
  import Button from '../elements/buttons/button.svelte';
  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
  import { mdiFolderSync } from '@mdi/js';
@@ -28,27 +27,21 @@
  const handleSubmit = () => dispatch('submit', { ownerId });
 </script>

-<FullScreenModal onClose={handleCancel}>
-  <div
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <Icon path={mdiFolderSync} size="4em" />
-      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Select library owner</h1>
+<FullScreenModal
+  id="select-library-owner-modal"
+  title="Select library owner"
+  icon={mdiFolderSync}
+  onClose={handleCancel}
+>
+  <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+    <p class="p-5 text-sm">NOTE: This cannot be changed later!</p>
+
+    <SettingSelect bind:value={ownerId} options={userOptions} name="user" />
+
+    <div class="mt-8 flex w-full gap-4">
+      <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
+
+      <Button type="submit" fullwidth>Create</Button>
    </div>
-
-    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
-      <p class="p-5 text-sm">NOTE: This cannot be changed later!</p>
-
-      <SettingSelect bind:value={ownerId} options={userOptions} name="user" />
-
-      <div class="mt-8 flex w-full gap-4 px-4">
-        <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
-
-        <Button type="submit" fullwidth>Create</Button>
-      </div>
-    </form>
-  </div>
+  </form>
 </FullScreenModal>
@@ -21,98 +21,92 @@
  const handleClose = () => dispatch('close');
 </script>

-<FullScreenModal onClose={handleClose}>
-  <div
-    class="flex w-96 max-w-lg flex-col gap-8 rounded-3xl border bg-white p-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray"
+<FullScreenModal id="map-settings-modal" title="Map settings" onClose={handleClose}>
+  <form
+    on:submit|preventDefault={() => dispatch('save', settings)}
+    class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
  >
-    <h1 class="self-center text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Map Settings</h1>
-
-    <form
-      on:submit|preventDefault={() => dispatch('save', settings)}
-      class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <SettingSwitch id="allow-dark-mode" title="Allow dark mode" bind:checked={settings.allowDarkMode} />
-      <SettingSwitch id="only-favorites" title="Only favorites" bind:checked={settings.onlyFavorites} />
-      <SettingSwitch id="include-archived" title="Include archived" bind:checked={settings.includeArchived} />
-      <SettingSwitch id="include-shared-with-me" title="Include shared with me" bind:checked={settings.withPartners} />
-      {#if customDateRange}
-        <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
-          <div class="flex items-center justify-between gap-8">
-            <label class="immich-form-label shrink-0 text-sm" for="date-after">Date after</label>
-            <DateInput
-              class="immich-form-input w-40"
-              type="date"
-              id="date-after"
-              max={settings.dateBefore}
-              bind:value={settings.dateAfter}
-            />
-          </div>
-          <div class="flex items-center justify-between gap-8">
-            <label class="immich-form-label shrink-0 text-sm" for="date-before">Date before</label>
-            <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
-          </div>
-          <div class="flex justify-center text-xs">
-            <LinkButton
-              on:click={() => {
-                customDateRange = false;
-                settings.dateAfter = '';
-                settings.dateBefore = '';
-              }}
-            >
-              Remove custom date range
-            </LinkButton>
-          </div>
-        </div>
-      {:else}
-        <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
-          <SettingSelect
-            label="Date range"
-            name="date-range"
-            bind:value={settings.relativeDate}
-            options={[
-              {
-                value: '',
-                text: 'All',
-              },
-              {
-                value: Duration.fromObject({ hours: 24 }).toISO() || '',
-                text: 'Past 24 hours',
-              },
-              {
-                value: Duration.fromObject({ days: 7 }).toISO() || '',
-                text: 'Past 7 days',
-              },
-              {
-                value: Duration.fromObject({ days: 30 }).toISO() || '',
-                text: 'Past 30 days',
-              },
-              {
-                value: Duration.fromObject({ years: 1 }).toISO() || '',
-                text: 'Past year',
-              },
-              {
-                value: Duration.fromObject({ years: 3 }).toISO() || '',
-                text: 'Past 3 years',
-              },
-            ]}
+    <SettingSwitch id="allow-dark-mode" title="Allow dark mode" bind:checked={settings.allowDarkMode} />
+    <SettingSwitch id="only-favorites" title="Only favorites" bind:checked={settings.onlyFavorites} />
+    <SettingSwitch id="include-archived" title="Include archived" bind:checked={settings.includeArchived} />
+    <SettingSwitch id="include-shared-with-me" title="Include shared with me" bind:checked={settings.withPartners} />
+    {#if customDateRange}
+      <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
+        <div class="flex items-center justify-between gap-8">
+          <label class="immich-form-label shrink-0 text-sm" for="date-after">Date after</label>
+          <DateInput
+            class="immich-form-input w-40"
+            type="date"
+            id="date-after"
+            max={settings.dateBefore}
+            bind:value={settings.dateAfter}
          />
-          <div class="text-xs">
-            <LinkButton
-              on:click={() => {
-                customDateRange = true;
-                settings.relativeDate = '';
-              }}
-            >
-              Use custom date range instead
-            </LinkButton>
-          </div>
        </div>
-      {/if}
-
-      <div class="mt-4 flex w-full gap-4">
-        <Button color="gray" size="sm" fullwidth on:click={handleClose}>Cancel</Button>
-        <Button type="submit" size="sm" fullwidth>Save</Button>
+        <div class="flex items-center justify-between gap-8">
+          <label class="immich-form-label shrink-0 text-sm" for="date-before">Date before</label>
+          <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
+        </div>
+        <div class="flex justify-center text-xs">
+          <LinkButton
+            on:click={() => {
+              customDateRange = false;
+              settings.dateAfter = '';
+              settings.dateBefore = '';
+            }}
+          >
+            Remove custom date range
+          </LinkButton>
+        </div>
      </div>
-    </form>
-  </div>
+    {:else}
+      <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
+        <SettingSelect
+          label="Date range"
+          name="date-range"
+          bind:value={settings.relativeDate}
+          options={[
+            {
+              value: '',
+              text: 'All',
+            },
+            {
+              value: Duration.fromObject({ hours: 24 }).toISO() || '',
+              text: 'Past 24 hours',
+            },
+            {
+              value: Duration.fromObject({ days: 7 }).toISO() || '',
+              text: 'Past 7 days',
+            },
+            {
+              value: Duration.fromObject({ days: 30 }).toISO() || '',
+              text: 'Past 30 days',
+            },
+            {
+              value: Duration.fromObject({ years: 1 }).toISO() || '',
+              text: 'Past year',
+            },
+            {
+              value: Duration.fromObject({ years: 3 }).toISO() || '',
+              text: 'Past 3 years',
+            },
+          ]}
+        />
+        <div class="text-xs">
+          <LinkButton
+            on:click={() => {
+              customDateRange = true;
+              settings.relativeDate = '';
+            }}
+          >
+            Use custom date range instead
+          </LinkButton>
+        </div>
+      </div>
+    {/if}
+
+    <div class="mt-4 flex w-full gap-4">
+      <Button color="gray" size="sm" fullwidth on:click={handleClose}>Cancel</Button>
+      <Button type="submit" size="sm" fullwidth>Save</Button>
+    </div>
+  </form>
 </FullScreenModal>
@@ -57,6 +57,7 @@

 {#if isShowConfirmation}
  <ConfirmDialogue
+    id="remove-from-album-modal"
    title="Remove from {album.albumName}"
    confirmText="Remove"
    onConfirm={removeFromAlbum}
@@ -50,7 +50,8 @@

 {#if removing}
  <ConfirmDialogue
-    title="Remove Assets?"
+    id="remove-assets-modal"
+    title="Remove assets?"
    prompt="Are you sure you want to remove {getAssets().size} asset(s) from this shared link?"
    confirmText="Remove"
    onConfirm={() => handleRemove()}
@@ -25,7 +25,8 @@
 </script>

 <ConfirmDialogue
-  title="Permanently Delete Asset{size > 1 ? 's' : ''}"
+  id="permanently-delete-asset-modal"
+  title="Permanently delete asset{size > 1 ? 's' : ''}"
  confirmText="Delete"
  onConfirm={handleConfirm}
  onClose={() => dispatch('cancel')}
@@ -3,12 +3,9 @@
  import { quintOut } from 'svelte/easing';
  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
  import { browser } from '$app/environment';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
  import { clickOutside } from '$lib/utils/click-outside';
-  import { mdiClose } from '@mdi/js';
  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
+  import ModalHeader from '$lib/components/shared-components/modal-header.svelte';

  const dispatch = createEventDispatcher<{
    close: void;
@@ -28,6 +25,8 @@
   */
  export let icon: string | undefined = undefined;

+  $: titleId = `${id}-title`;
+
  onMount(() => {
    if (browser) {
      const scrollTop = document.documentElement.scrollTop;
@@ -51,7 +50,7 @@
 <FocusTrap>
  <div
    aria-modal="true"
-    aria-labelledby={`${id}-title`}
+    aria-labelledby={titleId}
    style:z-index={zIndex}
    transition:fade={{ duration: 100, easing: quintOut }}
    class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
@@ -61,23 +60,11 @@
        onOutclick: () => dispatch('close'),
        onEscape: () => dispatch('close'),
      }}
-      class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
+      class="min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar scroll-pb-20"
+      style="max-height: min(95vh, 800px);"
      tabindex="-1"
    >
-      <div class="flex place-items-center justify-between px-5 py-3">
-        <div class="flex gap-2 place-items-center">
-          {#if showLogo}
-            <ImmichLogo noText={true} width={32} />
-          {:else if icon}
-            <Icon path={icon} size={32} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
-          {/if}
-          <h1 id={`${id}-title`}>
-            {title}
-          </h1>
-        </div>
-
-        <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
-      </div>
+      <ModalHeader id={titleId} {title} {showLogo} {icon} on:close />

      <div>
        <slot />
@@ -63,16 +63,16 @@

 <div role="presentation" on:keydown={handleKeydown}>
  <ConfirmDialogue
+    id="edit-date-time-modal"
    confirmColor="primary"
    cancelColor="secondary"
-    title="Edit date & time"
+    title="Edit date and time"
    prompt="Please select a new date:"
    disabled={!date.isValid}
    onConfirm={handleConfirm}
    onClose={handleCancel}
  >
    <div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
-      <div class="mt-2" />
      <div class="flex flex-col">
        <label for="datetime">Date and Time</label>
        <DateInput
@@ -12,7 +12,6 @@
  import SearchBar from '../elements/search-bar.svelte';
  import { listNavigation } from '$lib/utils/list-navigation';

-  export const title = 'Change Location';
  export let asset: AssetResponseDto | undefined = undefined;

  interface Point {
@@ -95,10 +94,11 @@
 </script>

 <ConfirmDialogue
+  id="change-location-modal"
  confirmColor="primary"
  cancelColor="secondary"
-  title="Change Location"
-  width={800}
+  title="Change location"
+  width="wide"
  onConfirm={handleConfirm}
  onClose={handleCancel}
 >
@@ -3,6 +3,7 @@
  import Button from '../elements/buttons/button.svelte';
  import type { Color } from '$lib/components/elements/buttons/button.svelte';

+  export let id: string;
  export let title = 'Confirm';
  export let prompt = 'Are you sure you want to do this?';
  export let confirmText = 'Confirm';
@@ -11,7 +12,7 @@
  export let cancelColor: Color = 'primary';
  export let hideCancelButton = false;
  export let disabled = false;
-  export let width = 500;
+  export let width: 'wide' | 'narrow' = 'narrow';
  export let onClose: () => void;
  export let onConfirm: () => void;

@@ -23,35 +24,21 @@
  };
 </script>

-<FullScreenModal {onClose}>
-  <div
-    class="max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-    style="width: {width}px"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <h1 class="pb-2 text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
-        {title}
-      </h1>
-    </div>
-    <div>
-      <div class="text-md px-4 py-5 text-center">
-        <slot name="prompt">
-          <p>{prompt}</p>
-        </slot>
-      </div>
+<FullScreenModal {title} {id} {onClose} {width}>
+  <div class="text-md py-5 text-center">
+    <slot name="prompt">
+      <p>{prompt}</p>
+    </slot>
+  </div>

-      <div class="mt-4 flex w-full gap-4 px-4">
-        {#if !hideCancelButton}
-          <Button color={cancelColor} fullwidth on:click={onClose}>
-            {cancelText}
-          </Button>
-        {/if}
-        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={disabled || isConfirmButtonDisabled}>
-          {confirmText}
-        </Button>
-      </div>
-    </div>
+  <div class="mt-4 flex flex-col sm:flex-row w-full gap-4">
+    {#if !hideCancelButton}
+      <Button color={cancelColor} fullwidth on:click={onClose}>
+        {cancelText}
+      </Button>
+    {/if}
+    <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={disabled || isConfirmButtonDisabled}>
+      {confirmText}
+    </Button>
  </div>
 </FullScreenModal>
@@ -2,8 +2,44 @@
  import { clickOutside } from '../../utils/click-outside';
  import { fade } from 'svelte/transition';
  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
+  import ModalHeader from '$lib/components/shared-components/modal-header.svelte';

-  export let onClose: (() => void) | undefined = undefined;
+  export let onClose: () => void;
+
+  /**
+   * Unique identifier for the modal.
+   */
+  export let id: string;
+  export let title: string;
+  /**
+   * If true, the logo will be displayed next to the modal title.
+   */
+  export let showLogo = false;
+  /**
+   * Optional icon to display next to the modal title, if `showLogo` is false.
+   */
+  export let icon: string | undefined = undefined;
+  /**
+   * Sets the width of the modal.
+   *
+   * - `wide`: 750px
+   * - `narrow`: 450px
+   * - `auto`: fits the width of the modal content, up to a maximum of 550px
+   */
+  export let width: 'wide' | 'narrow' | 'auto' = 'narrow';
+
+  $: titleId = `${id}-title`;
+
+  let modalWidth: string;
+  $: {
+    if (width === 'wide') {
+      modalWidth = 'w-[750px]';
+    } else if (width === 'narrow') {
+      modalWidth = 'w-[450px]';
+    } else {
+      modalWidth = 'sm:max-w-[550px]';
+    }
+  }
 </script>

 <FocusTrap>
@@ -12,8 +48,17 @@
    out:fade={{ duration: 100 }}
    class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
  >
-    <div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }} tabindex="-1">
-      <slot />
+    <div
+      class="z-[9999] max-w-[95vw] max-h-[95vh] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
+      use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
+      tabindex="-1"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <ModalHeader id={titleId} {title} {showLogo} {icon} on:close={() => onClose?.()} />
+      <div class="p-5 pt-0">
+        <slot />
+      </div>
    </div>
  </section>
 </FocusTrap>
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { mdiClose } from '@mdi/js';
+
+  const dispatch = createEventDispatcher<{
+    close: void;
+  }>();
+
+  /**
+   * Unique identifier for the header text.
+   */
+  export let id: string;
+  export let title: string;
+  /**
+   * If true, the logo will be displayed next to the modal title.
+   */
+  export let showLogo = false;
+  /**
+   * Optional icon to display next to the modal title, if `showLogo` is false.
+   */
+  export let icon: string | undefined = undefined;
+</script>
+
+<div class="flex place-items-center justify-between px-5 py-3">
+  <div class="flex gap-2 place-items-center">
+    {#if showLogo}
+      <ImmichLogo noText={true} width={32} />
+    {:else if icon}
+      <Icon path={icon} size={32} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
+    {/if}
+    <h1 {id}>
+      {title}
+    </h1>
+  </div>
+
+  <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
+</div>
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
  import { UserAvatarColor, type UserResponseDto } from '@immich/sdk';
-  import { mdiClose } from '@mdi/js';
  import { createEventDispatcher } from 'svelte';
  import FullScreenModal from '../full-screen-modal.svelte';
  import UserAvatar from '../user-avatar.svelte';
@@ -15,28 +13,14 @@
  const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
 </script>

-<FullScreenModal onClose={() => dispatch('close')}>
-  <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
-    <div
-      class=" rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg p-4"
-    >
-      <div class="flex items-center">
-        <h1 class="px-4 w-full self-center font-medium text-immich-primary dark:text-immich-dark-primary text-sm">
-          SELECT AVATAR COLOR
-        </h1>
-        <div>
-          <CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
-        </div>
-      </div>
-      <div class="flex items-center justify-center p-4 mt-4">
-        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-          {#each colors as color}
-            <button on:click={() => dispatch('choose', color)}>
-              <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
-            </button>
-          {/each}
-        </div>
-      </div>
+<FullScreenModal id="avatar-selector-modal" title="Select avatar color" width="auto" onClose={() => dispatch('close')}>
+  <div class="flex items-center justify-center mt-4">
+    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+      {#each colors as color}
+        <button on:click={() => dispatch('choose', color)}>
+          <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
+        </button>
+      {/each}
    </div>
  </div>
 </FullScreenModal>
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
  import { createEventDispatcher } from 'svelte';
  import FullScreenModal from './full-screen-modal.svelte';
-  import { mdiClose, mdiInformationOutline } from '@mdi/js';
+  import { mdiInformationOutline } from '@mdi/js';
  import Icon from '../elements/icon.svelte';

  interface Shortcuts {
@@ -38,63 +37,51 @@
  }>();
 </script>

-<FullScreenModal onClose={() => dispatch('close')}>
-  <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
-    <div
-      class="rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-    >
-      <div class="relative px-4 pt-4">
-        <h1 class="px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">Keyboard Shortcuts</h1>
-        <div class="absolute inset-y-0 right-0 px-4 py-4">
-          <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
-        </div>
+<FullScreenModal
+  id="keyboard-shortcuts-modal"
+  title="Keyboard shortcuts"
+  width="auto"
+  onClose={() => dispatch('close')}
+>
+  <div class="grid grid-cols-1 gap-4 px-4 pb-4 md:grid-cols-2">
+    <div class="p-4">
+      <h2>General</h2>
+      <div class="text-sm">
+        {#each shortcuts.general as shortcut}
+          <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
+            <div class="flex justify-self-end">
+              {#each shortcut.key as key}
+                <p class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2">
+                  {key}
+                </p>
+              {/each}
+            </div>
+            <p class="mb-1 mt-1 flex">{shortcut.action}</p>
+          </div>
+        {/each}
      </div>
+    </div>

-      <div class="grid grid-cols-1 gap-4 px-4 pb-4 md:grid-cols-2">
-        <div class="px-4 py-4">
-          <h2>General</h2>
-          <div class="text-sm">
-            {#each shortcuts.general as shortcut}
-              <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
-                <div class="flex justify-self-end">
-                  {#each shortcut.key as key}
-                    <p
-                      class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2"
-                    >
-                      {key}
-                    </p>
-                  {/each}
-                </div>
-                <p class="mb-1 mt-1 flex">{shortcut.action}</p>
-              </div>
-            {/each}
+    <div class="p-4">
+      <h2>Actions</h2>
+      <div class="text-sm">
+        {#each shortcuts.actions as shortcut}
+          <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
+            <div class="flex justify-self-end">
+              {#each shortcut.key as key}
+                <p class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2">
+                  {key}
+                </p>
+              {/each}
+            </div>
+            <div class="flex items-center gap-2">
+              <p class="mb-1 mt-1 flex">{shortcut.action}</p>
+              {#if shortcut.info}
+                <Icon path={mdiInformationOutline} title={shortcut.info} />
+              {/if}
+            </div>
          </div>
-        </div>
-
-        <div class="px-4 py-4">
-          <h2>Actions</h2>
-          <div class="text-sm">
-            {#each shortcuts.actions as shortcut}
-              <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
-                <div class="flex justify-self-end">
-                  {#each shortcut.key as key}
-                    <p
-                      class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2"
-                    >
-                      {key}
-                    </p>
-                  {/each}
-                </div>
-                <div class="flex items-center gap-2">
-                  <p class="mb-1 mt-1 flex">{shortcut.action}</p>
-                  {#if shortcut.info}
-                    <Icon path={mdiInformationOutline} title={shortcut.info} />
-                  {/if}
-                </div>
-              </div>
-            {/each}
-          </div>
-        </div>
+        {/each}
      </div>
    </div>
  </div>
@@ -33,34 +33,28 @@
 </script>

 {#if showModal}
-  <FullScreenModal onClose={() => (showModal = false)}>
-    <div
-      class="max-w-lg rounded-3xl border bg-immich-bg px-8 py-10 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-    >
-      <p class="mb-4 text-2xl">🎉 NEW VERSION AVAILABLE 🎉</p>
+  <FullScreenModal id="new-version-modal" title="🎉 NEW VERSION AVAILABLE" onClose={() => (showModal = false)}>
+    <div>
+      Hi friend, there is a new version of the application please take your time to visit the
+      <span class="font-medium underline"
+        ><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
+          >release notes</a
+        ></span
+      >
+      and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
+      especially if you use WatchTower or any mechanism that handles updating your application automatically.
+    </div>

-      <div>
-        Hi friend, there is a new version of the application please take your time to visit the
-        <span class="font-medium underline"
-          ><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
-            >release notes</a
-          ></span
-        >
-        and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
-        especially if you use WatchTower or any mechanism that handles updating your application automatically.
-      </div>
+    <div class="mt-4 font-medium">Your friend, Alex</div>

-      <div class="mt-4 font-medium">Your friend, Alex</div>
+    <div class="font-sm mt-8">
+      <code>Server Version: {serverVersion}</code>
+      <br />
+      <code>Latest Version: {releaseVersion}</code>
+    </div>

-      <div class="font-sm mt-8">
-        <code>Server Version: {serverVersion}</code>
-        <br />
-        <code>Latest Version: {releaseVersion}</code>
-      </div>
-
-      <div class="mt-8 text-right">
-        <Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
-      </div>
+    <div class="mt-8 text-right">
+      <Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
    </div>
  </FullScreenModal>
 {/if}
@@ -30,31 +30,22 @@
  };
 </script>

-<FullScreenModal {onClose}>
-  <div
-    class="flex w-full md:w-96 max-w-lg flex-col gap-8 rounded-3xl border bg-white p-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-  >
-    <h1 class="self-center text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
-      Slideshow Settings
-    </h1>
-
-    <div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
-      <SettingDropdown
-        title="Direction"
-        options={Object.values(options)}
-        selectedOption={options[$slideshowNavigation]}
-        onToggle={(option) => handleToggle(option)}
-      />
-      <SettingSwitch id="show-progress-bar" title="Show Progress Bar" bind:checked={$showProgressBar} />
-      <SettingInputField
-        inputType={SettingInputFieldType.NUMBER}
-        label="Duration"
-        desc="Number of seconds to display each image"
-        min={1}
-        bind:value={$slideshowDelay}
-      />
-
-      <Button class="w-full" color="gray" on:click={onClose}>Done</Button>
-    </div>
+<FullScreenModal id="slideshow-settings-modal" title="Slideshow settings" {onClose}>
+  <div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
+    <SettingDropdown
+      title="Direction"
+      options={Object.values(options)}
+      selectedOption={options[$slideshowNavigation]}
+      onToggle={(option) => handleToggle(option)}
+    />
+    <SettingSwitch id="show-progress-bar" title="Show Progress Bar" bind:checked={$showProgressBar} />
+    <SettingInputField
+      inputType={SettingInputFieldType.NUMBER}
+      label="Duration"
+      desc="Number of seconds to display each image"
+      min={1}
+      bind:value={$slideshowDelay}
+    />
+    <Button class="w-full" color="gray" on:click={onClose}>Done</Button>
  </div>
 </FullScreenModal>
@@ -49,6 +49,7 @@

 {#if deleteDevice}
  <ConfirmDialogue
+    id="log-out-device-modal"
    prompt="Are you sure you want to log out this device?"
    onConfirm={() => handleDelete()}
    onClose={() => (deleteDevice = null)}
@@ -57,6 +58,7 @@

 {#if deleteAll}
  <ConfirmDialogue
+    id="log-out-all-modal"
    prompt="Are you sure you want to log out all devices?"
    onConfirm={() => handleDeleteAll()}
    onClose={() => (deleteAll = false)}
@@ -189,6 +189,7 @@

 {#if removePartnerDto}
  <ConfirmDialogue
+    id="stop-sharing-photos-modal"
    title="Stop sharing your photos?"
    prompt="{removePartnerDto.name} will no longer be able to access your photos."
    onClose={() => (removePartnerDto = null)}
@@ -81,7 +81,7 @@

 {#if newKey}
  <APIKeyForm
-    title="New API Key"
+    title="New API key"
    submitText="Create"
    apiKey={newKey}
    on:submit={({ detail }) => handleCreate(detail)}
@@ -95,6 +95,7 @@

 {#if editKey}
  <APIKeyForm
+    title="API key"
    submitText="Save"
    apiKey={editKey}
    on:submit={({ detail }) => handleUpdate(detail)}
@@ -104,7 +105,8 @@

 {#if deleteKey}
  <ConfirmDialogue
-    prompt="Are you sure you want to delete this API Key?"
+    id="confirm-api-key-delete-modal"
+    prompt="Are you sure you want to delete this API key?"
    onConfirm={() => handleDelete()}
    onClose={() => (deleteKey = null)}
  />
@@ -683,6 +683,7 @@

 {#if viewMode === ViewMode.CONFIRM_DELETE}
  <ConfirmDialogue
+    id="delete-album-modal"
    title="Delete album"
    confirmText="Delete"
    onConfirm={handleRemoveAlbum}
@@ -463,35 +463,25 @@
  {/if}

  {#if showChangeNameModal}
-    <FullScreenModal onClose={() => (showChangeNameModal = false)}>
-      <div
-        class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
-      >
-        <div
-          class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-        >
-          <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Change name</h1>
+    <FullScreenModal id="change-name-modal" title="Change name" onClose={() => (showChangeNameModal = false)}>
+      <form on:submit|preventDefault={submitNameChange} autocomplete="off">
+        <div class="flex flex-col gap-2">
+          <label class="immich-form-label" for="name">Name</label>
+          <!-- svelte-ignore a11y-autofocus -->
+          <input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} autofocus />
        </div>

-        <form on:submit|preventDefault={submitNameChange} autocomplete="off">
-          <div class="m-4 flex flex-col gap-2">
-            <label class="immich-form-label" for="name">Name</label>
-            <!-- svelte-ignore a11y-autofocus -->
-            <input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} autofocus />
-          </div>
-
-          <div class="mt-8 flex w-full gap-4 px-4">
-            <Button
-              color="gray"
-              fullwidth
-              on:click={() => {
-                showChangeNameModal = false;
-              }}>Cancel</Button
-            >
-            <Button type="submit" fullwidth>Ok</Button>
-          </div>
-        </form>
-      </div>
+        <div class="mt-8 flex w-full gap-4">
+          <Button
+            color="gray"
+            fullwidth
+            on:click={() => {
+              showChangeNameModal = false;
+            }}>Cancel</Button
+          >
+          <Button type="submit" fullwidth>Ok</Button>
+        </div>
+      </form>
    </FullScreenModal>
  {/if}

@@ -88,7 +88,8 @@

 {#if deleteLinkId}
  <ConfirmDialogue
-    title="Delete Shared Link"
+    id="delete-shared-link-modal"
+    title="Delete shared link"
    prompt="Are you sure you want to delete this shared link?"
    confirmText="Delete"
    onConfirm={() => handleDeleteLink()}
@@ -98,7 +98,8 @@

 {#if isShowEmptyConfirmation}
  <ConfirmDialogue
-    title="Empty Trash"
+    id="empty-trash-modal"
+    title="Empty trash"
    confirmText="Empty"
    onConfirm={handleEmptyTrash}
    onClose={() => (isShowEmptyConfirmation = false)}
@@ -118,7 +118,9 @@

  const handleCreate = async (ownerId: string) => {
    try {
-      const createdLibrary = await createLibrary({ createLibraryDto: { ownerId, type: LibraryType.External } });
+      const createdLibrary = await createLibrary({
+        createLibraryDto: { ownerId, type: LibraryType.External },
+      });

      notificationController.show({
        message: `Created library: ${createdLibrary.name}`,
@@ -300,6 +302,7 @@

 {#if confirmDeleteLibrary}
  <ConfirmDialogue
+    id="warning-modal"
    title="Warning!"
    prompt="Are you sure you want to delete this library? This will delete all {deleteAssetCount} contained assets from Immich and cannot be undone. Files will remain on disk."
    onConfirm={handleDelete}
@@ -1,9 +1,9 @@
 <script lang="ts">
  import { page } from '$app/stores';
  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
+  import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialogue.svelte';
  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
+  import RestoreDialogue from '$lib/components/admin-page/restore-dialogue.svelte';
  import Button from '$lib/components/elements/buttons/button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
@@ -21,7 +21,14 @@
  import { asByteUnitString } from '$lib/utils/byte-units';
  import { copyToClipboard } from '$lib/utils';
  import { UserStatus, getAllUsers, type UserResponseDto } from '@immich/sdk';
-  import { mdiClose, mdiContentCopy, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
+  import {
+    mdiAccountEditOutline,
+    mdiClose,
+    mdiContentCopy,
+    mdiDeleteRestore,
+    mdiPencilOutline,
+    mdiTrashCanOutline,
+  } from '@mdi/js';
  import { DateTime } from 'luxon';
  import { onMount } from 'svelte';
  import type { PageData } from './$types';
@@ -116,13 +123,23 @@
  <section id="setting-content" class="flex place-content-center sm:mx-4">
    <section class="w-full pb-28 lg:w-[850px]">
      {#if shouldShowCreateUserForm}
-        <FullScreenModal onClose={() => (shouldShowCreateUserForm = false)}>
+        <FullScreenModal
+          id="create-new-user-modal"
+          title="Create new user"
+          showLogo
+          onClose={() => (shouldShowCreateUserForm = false)}
+        >
          <CreateUserForm on:submit={onUserCreated} on:cancel={() => (shouldShowCreateUserForm = false)} />
        </FullScreenModal>
      {/if}

      {#if shouldShowEditUserForm}
-        <FullScreenModal onClose={() => (shouldShowEditUserForm = false)}>
+        <FullScreenModal
+          id="edit-user-modal"
+          title="Edit user"
+          icon={mdiAccountEditOutline}
+          onClose={() => (shouldShowEditUserForm = false)}
+        >
          <EditUserForm
            user={selectedUser}
            bind:newPassword
@@ -153,40 +170,39 @@
      {/if}

      {#if shouldShowPasswordResetSuccess}
-        <FullScreenModal onClose={() => (shouldShowPasswordResetSuccess = false)}>
-          <ConfirmDialogue
-            title="Password Reset Success"
-            confirmText="Done"
-            onConfirm={() => (shouldShowPasswordResetSuccess = false)}
-            onClose={() => (shouldShowPasswordResetSuccess = false)}
-            hideCancelButton={true}
-            confirmColor="green"
-          >
-            <svelte:fragment slot="prompt">
-              <div class="flex flex-col gap-4">
-                <p>The user's password has been reset:</p>
+        <ConfirmDialogue
+          id="password-reset-success-modal"
+          title="Password reset success"
+          confirmText="Done"
+          onConfirm={() => (shouldShowPasswordResetSuccess = false)}
+          onClose={() => (shouldShowPasswordResetSuccess = false)}
+          hideCancelButton={true}
+          confirmColor="green"
+        >
+          <svelte:fragment slot="prompt">
+            <div class="flex flex-col gap-4">
+              <p>The user's password has been reset:</p>

-                <div class="flex justify-center gap-2">
-                  <code
-                    class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
-                  >
-                    {newPassword}
-                  </code>
-                  <LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
-                    <div class="flex place-items-center gap-2 text-sm">
-                      <Icon path={mdiContentCopy} size="18" />
-                    </div>
-                  </LinkButton>
-                </div>
-
-                <p>
-                  Please provide the temporary password to the user and inform them they will need to change the
-                  password at their next login.
-                </p>
+              <div class="flex justify-center gap-2">
+                <code
+                  class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
+                >
+                  {newPassword}
+                </code>
+                <LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
+                  <div class="flex place-items-center gap-2 text-sm">
+                    <Icon path={mdiContentCopy} size="18" />
+                  </div>
+                </LinkButton>
              </div>
-            </svelte:fragment>
-          </ConfirmDialogue>
-        </FullScreenModal>
+
+              <p>
+                Please provide the temporary password to the user and inform them they will need to change the password
+                at their next login.
+              </p>
+            </div>
+          </svelte:fragment>
+        </ConfirmDialogue>
      {/if}

      <table class="my-5 w-full text-left">
Author	SHA1	Message	Date
renovate[bot]	bce256a166	fix(deps): update typescript-projects	2024-04-09 04:56:55 +00:00
Alex	327b9bd59c	Revert "fix(deps): update typescript-projects (#8647 )" (#8650 ) This reverts commit `301c217303`.	2024-04-09 06:53:48 +02:00
renovate[bot]	301c217303	fix(deps): update typescript-projects (#8647 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-04-08 23:44:48 -04:00
renovate[bot]	9883473376	chore(deps): update node.js to 7e22729 (#8644 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-04-08 22:34:09 -04:00
renovate[bot]	6631e6eedc	chore(deps): update node.js to 3fb85a6 (#8643 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-04-08 22:33:50 -04:00
Matthew Momjian	933b6b67f5	feat: Improve error handling for Install Script (#8422 ) * Update install.sh * Update install.sh * Update install.sh * Update install.sh * Update install.sh * Update install.sh * Update install.sh * Update install.sh * Update install.sh * Update docs immich-app vs immich-data We do not actually touch the .env file * Remove docker-compose Docker-compose is no longer supported by Immich * Update remote-machine-learning.md * Update install.sh * Update install.sh * Update requirements.md * Update requirements.md	2024-04-08 19:01:57 -04:00
Daniel Dietzler	56e0e5d6ad	chore: add to codeowners (#8640 ) add to codeowners	2024-04-08 22:48:47 +00:00
Jason Rasmussen	369bd17c8b	chore(server): remove unused method (#8639 )	2024-04-08 17:23:45 -04:00
Theo Patron	9681f5b360	chore(web): fixed typo expect instead of except (#8638 ) * chore(web): specify that HDR videos will always be transcoded * chore(web): fixed typo expect instead of except	2024-04-08 21:19:36 +00:00
bo0tzz	b107894976	feat(github): Create CODEOWNERS file (#8636 )	2024-04-08 21:04:25 +00:00
Ben	796c933fb8	feat(web,a11y): standardize the FullScreenModal UI (#8566 ) * feat(web,a11y): standardize the FullScreenModal look * consistent header, padding, close button, and radius as BaseModal * vertically stacking ConfirmDialogue CTA buttons in narrow screens * adding aria-modal tags for screen reader * add viewport-specific height limits on modals, to enable scrolling * prevent focus from being hidden under sticky content in modals * standardize FullScreenModal widths using a Prop * wip: consistent padding with header * fix: alignment on "create user" and "edit user" modals * fix: horizontal modal content alignment * fix: create user CTA buttons * chore: remove unnecessary warning --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>	2024-04-08 21:02:09 +00:00
Theo Patron	d43daaee81	chore(web): specify that HDR videos will always be transcoded (#8634 )	2024-04-08 16:39:38 -04:00
Daniel Dietzler	b6cdffa509	mount postgres folder to local directory by default (#8443 )	2024-04-08 16:11:25 -04:00
Daniel Dietzler	7b1562c050	fix(server): remove isWatched from DTO (#8598 ) * fix: remove isWatched * chore: open api	2024-04-08 16:00:08 -04:00
Poolitzer	20583d5334	docs: update docker container name in unraid setup docs (#8476 ) Fix: change web to server docker name	2024-04-08 15:58:27 -04:00
aviv926	2d03d7c373	feat(docs): update partner sharing (#8308 ) * New info * PR feedback * PR feedback * chore: refinement --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>	2024-04-08 19:23:48 +00:00
bo0tzz	dd15d33bce	fix(gh-templates): Add required label attribute (#8632 ) * fix(gh-templates): Add required label attribute	2024-04-08 15:01:39 -04:00
aviv926	c5e8f38e1e	docs: update Smart Search feature (#8625 ) * Up-to-date information on the Smart Search feature * npm run format:fix * fix * chore: refinement --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>	2024-04-08 14:58:24 -04:00