light theme

.github/DISCUSSION_TEMPLATE/feature-request.yaml

@@ -6,14 +6,6 @@ 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: "Yes"
-          required: true
-
   - type: textarea
     id: feature
     attributes:

.github/workflows/cli.yml

@@ -58,7 +58,7 @@ jobs:
         uses: docker/setup-qemu-action@v3.0.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.3.0
+        uses: docker/setup-buildx-action@v3.2.0
 
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v3

.github/workflows/docker.yml

@@ -66,7 +66,7 @@ jobs:
         uses: docker/setup-qemu-action@v3.0.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.3.0
+        uses: docker/setup-buildx-action@v3.2.0
 
       - name: Login to Docker Hub
         # Only push to Docker Hub when making a release

CODEOWNERS

@@ -1,4 +0,0 @@
-/.github/ @bo0tzz
-/docker/ @bo0tzz
-/server/ @danieldietzler
-/e2e/ @danieldietzler

cli/.eslintrc.cjs

@@ -21,7 +21,6 @@ module.exports = {
     'unicorn/prefer-module': 'off',
     'unicorn/prevent-abbreviations': 'off',
     'unicorn/no-process-exit': 'off',
-    'unicorn/import-style': 'off',
     curly: 2,
     'prettier/prettier': 0,
   },

cli/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine3.19@sha256:7e227295e96f5b00aa79555ae166f50610940d888fc2e321cf36304cbd17d7d6 as core
+FROM node:20-alpine3.19@sha256:ef3f47741e161900ddd07addcaca7e76534a9205e4cd73b2ed091ba339004a75 as core
 
 WORKDIR /usr/src/open-api/typescript-sdk
 COPY open-api/typescript-sdk/package*.json open-api/typescript-sdk/tsconfig*.json ./

cli/package-lock.json

@@ -30,7 +30,7 @@
         "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-unicorn": "^52.0.0",
+        "eslint-plugin-unicorn": "^51.0.0",
         "glob": "^10.3.1",
         "mock-fs": "^5.2.0",
         "prettier": "^3.2.5",
@@ -2194,9 +2194,9 @@
       }
     },
     "node_modules/eslint-plugin-unicorn": {
-      "version": "52.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-52.0.0.tgz",
-      "integrity": "sha512-1Yzm7/m+0R4djH0tjDjfVei/ju2w3AzUGjG6q8JnuNIL5xIwsflyCooW5sfBvQp2pMYQFSWWCFONsjCax1EHng==",
+      "version": "51.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-51.0.1.tgz",
+      "integrity": "sha512-MuR/+9VuB0fydoI0nIn2RDA5WISRn4AsJyNSaNKLVwie9/ONvQhxOBbkfSICBPnzKrB77Fh6CZZXjgTt/4Latw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",

cli/package.json

@@ -28,7 +28,7 @@
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-unicorn": "^51.0.0",
     "glob": "^10.3.1",
     "mock-fs": "^5.2.0",
     "prettier": "^3.2.5",

cli/src/commands/asset.ts

@@ -56,13 +56,14 @@ class UploadFile extends File {
 export const upload = async (paths: string[], baseOptions: BaseOptions, options: UploadOptionsDto) => {
   await authenticate(baseOptions);
 
-  const scanFiles = await scan(paths, options);
-  if (scanFiles.length === 0) {
+  const files = await scan(paths, options);
+  if (files.length === 0) {
     console.log('No files found, exiting');
     return;
   }
 
-  const { newFiles, duplicates } = await checkForDuplicates(scanFiles, options);
+  const { newFiles, duplicates } = await checkForDuplicates(files, options);
+
   const newAssets = await uploadFiles(newFiles, options);
   await updateAlbums([...newAssets, ...duplicates], options);
   await deleteFiles(newFiles, options);
@@ -83,12 +84,7 @@ const scan = async (pathsToCrawl: string[], options: UploadOptionsDto) => {
   return files;
 };
 
-const checkForDuplicates = async (files: string[], { concurrency, skipHash }: UploadOptionsDto) => {
-  if (skipHash) {
-    console.log('Skipping hash check, assuming all files are new');
-    return { newFiles: files, duplicates: [] };
-  }
-
+const checkForDuplicates = async (files: string[], { concurrency }: UploadOptionsDto) => {
   const progressBar = new SingleBar(
     { format: 'Checking files | {bar} | {percentage}% | ETA: {eta}s | {value}/{total} assets' },
     Presets.shades_classic,
@@ -151,32 +147,17 @@ const uploadFiles = async (files: string[], { dryRun, concurrency }: UploadOptio
   uploadProgress.start(totalSize, 0);
   uploadProgress.update({ value_formatted: 0, total_formatted: byteSize(totalSize) });
 
-  let duplicateCount = 0;
-  let duplicateSize = 0;
-  let successCount = 0;
-  let successSize = 0;
-
+  let totalSizeUploaded = 0;
   const newAssets: Asset[] = [];
-
   try {
     for (const items of chunk(files, concurrency)) {
       await Promise.all(
         items.map(async (filepath) => {
           const stats = statsMap.get(filepath) as Stats;
           const response = await uploadFile(filepath, stats);
-
+          totalSizeUploaded += stats.size ?? 0;
+          uploadProgress.update(totalSizeUploaded, { value_formatted: byteSize(totalSizeUploaded) });
           newAssets.push({ id: response.id, filepath });
-
-          if (response.duplicate) {
-            duplicateCount++;
-            duplicateSize += stats.size ?? 0;
-          } else {
-            successCount++;
-            successSize += stats.size ?? 0;
-          }
-
-          uploadProgress.update(successSize, { value_formatted: byteSize(successSize + duplicateSize) });
-
           return response;
         }),
       );
@@ -185,10 +166,7 @@ const uploadFiles = async (files: string[], { dryRun, concurrency }: UploadOptio
     uploadProgress.stop();
   }
 
-  console.log(`Successfully uploaded ${successCount} new asset${s(successCount)} (${byteSize(successSize)})`);
-  if (duplicateCount > 0) {
-    console.log(`Skipped ${duplicateCount} duplicate asset${s(duplicateCount)} (${byteSize(duplicateSize)})`);
-  }
+  console.log(`Successfully uploaded ${newAssets.length} asset${s(newAssets.length)} (${byteSize(totalSizeUploaded)})`);
   return newAssets;
 };
 

docker/docker-compose.yml

@@ -69,8 +69,9 @@ services:
       POSTGRES_USER: ${DB_USERNAME}
       POSTGRES_DB: ${DB_DATABASE_NAME}
     volumes:
-      - ${DB_DATA_LOCATION}:/var/lib/postgresql/data
+      - pgdata:/var/lib/postgresql/data
     restart: always
 
 volumes:
+  pgdata:
   model-cache:

docker/example.env

@@ -14,6 +14,5 @@ DB_PASSWORD=postgres
 DB_HOSTNAME=immich_postgres
 DB_USERNAME=postgres
 DB_DATABASE_NAME=immich
-DB_DATA_LOCATION=./postgres
 
 REDIS_HOSTNAME=immich_redis

docs/docs/administration/repair-page.md

@@ -20,6 +20,10 @@ In any other situation, there are 3 different options that can appear:
 
 - OFFLINE PATHS - These files are the result of manually deleting files in the upload library or a failed file move in the past (losing track of a file).
 
+:::tip
+To get rid of Offline paths you can follow this [guide](/docs/guides/remove-offline-files.md)
+:::
+
 - UNTRACKED FILES - These files are not tracked by the application. They can be the result of failed moves, interrupted uploads, or left behind due to a bug.
 
 In addition, you can download the information from a page, mark everything (in order to check hashing) and correct the problem if a match is found in the hashing.

docs/docs/community-projects.mdx

@@ -1,12 +0,0 @@
-# Community Projects
-
-This page lists community projects that are built around Immich, but not officially supported by the development team.
-
-:::warning
-This list comes with no guarantees about security, performance, reliability, or accuracy. Use at your own risk.
-:::
-
-import CommunityProjects from '../src/components/community-projects.tsx';
-import React from 'react';
-
-<CommunityProjects />

docs/docs/features/partner-sharing.md

@@ -1,57 +1,17 @@
 # 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' />

docs/docs/features/reverse-geocoding.md

@@ -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 [Smart Search](/docs/features/smart-search.md).
+Data from a reverse geocode is displayed in the image details, and used in [Search](/docs/features/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' />

docs/docs/features/search.md

@@ -0,0 +1,14 @@
+# 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' />

docs/docs/features/smart-search.md

@@ -1,49 +0,0 @@
-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>

docs/docs/guides/api-album-sync.md

@@ -0,0 +1,130 @@
+# API Album Sync (Python Script)
+
+This is an example of a python script for syncing an album to a local folder. This was used for a digital photoframe so the displayed photos could be managed from the immich web or app UI.
+
+The script is copied below in it's current form. A repository is hosted [here](https://git.orenit.solutions/open/immichalbumpull).
+
+:::danger
+This guide uses a generated API key. This key gives the same access to your immich instance as the user it is attached to, so be careful how the config file is stored and transferred.
+:::
+
+### Prerequisites
+
+- Python 3.7+
+- [requests library](https://pypi.org/project/requests/)
+
+### Installing
+
+Copy the contents of 'pull.py' (shown below) to your chosen location or clone the repository:
+
+```bash
+git clone https://git.orenit.solutions/open/immichalbumpull
+```
+
+Edit or create the 'config.ini' file in the same directory as the script with the necessary details:
+
+```ini title='config.ini'
+[immich]
+# URL of target immich instance
+url = https://photo.example.com
+# API key from Account Settings -> API Keys
+apikey = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+# Full local path to target directory
+destination = /home/photo/photos
+# immich album name
+album = Photoframe
+```
+
+### Usage
+
+Run the script directly:
+
+```bash
+./pull.py
+```
+
+Or from cron (every 5 minutes):
+
+```bash
+*/5 * * * * /usr/bin/python /home/user/immichalbumpull/pull.py
+```
+
+### Python Script
+
+```python title='pull.py'
+#!/usr/bin/env python
+
+import requests
+import configparser
+import os
+import shutil
+
+# Read config file
+config = configparser.ConfigParser()
+config.read('config.ini')
+
+url = config['immich']['url']
+apikey = config['immich']['apikey']
+photodir = config['immich']['destination']
+albumname = config['immich']['album']
+
+headers = {
+    'Accept': 'application/json',
+    'x-api-key': apikey
+}
+
+# Set up the directory for the downloaded images
+os.makedirs(photodir, exist_ok=True)
+
+# Get the list of albums from the API
+response = requests.get(url + "/api/album", headers=headers)
+
+# Parse the JSON response
+data = response.json()
+
+# Find the chosen album id
+for item in data:
+    if item['albumName'] == albumname:
+        albumid = item['id']
+
+# Get the list of photos from the API using the albumid
+response = requests.get(url + "/api/album/" + albumid, headers=headers)
+
+# Parse the JSON response and extract the URLs of the images
+data = response.json()
+image_urls = data['assets']
+
+# Download each image from the URL and save it to the directory
+headers = {
+    'Accept': 'application/octet-stream',
+    'x-api-key': apikey
+}
+
+photolist = []
+
+for id in image_urls:
+    # Query asset info endpoint for correct extension
+    assetinfourl = url + "/api/asset/" + str(id['id'])
+    response = requests.get(assetinfourl, headers=headers)
+    assetinfo = response.json()
+    ext = os.path.splitext(assetinfo['originalFileName'])
+
+    asseturl = url + "/api/download/asset/" + str(id['id'])
+    response = requests.post(asseturl, headers=headers, stream=True)
+
+    # Build current photo list for deletions below
+    photo = os.path.basename(asseturl) + ext[1]
+    photolist.append(photo)
+
+    photofullpath = photodir + '/' + os.path.basename(asseturl) + ext[1]
+    # Only download file if it doesn't already exist
+    if not os.path.exists(photofullpath):
+        with open(photofullpath, 'wb') as f:
+            for chunk in response.iter_content(1024):
+                f.write(chunk)
+
+# Delete old photos removed from album
+for filename in os.listdir(photodir):
+    if filename not in photolist:
+        os.unlink(os.path.join(photodir, filename))
+```

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

@@ -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`.
+- Start the container by running `docker-compose up -d` or `docker compose up -d` (depending on your Docker version).
 
 :::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.

docs/docs/guides/remove-offline-files.md

@@ -0,0 +1,176 @@
+# Remove Offline Files [Community]
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+:::note
+**Before running the script**, please make sure you have a [backup](/docs/administration/backup-and-restore) of your assets and database.
+:::
+
+:::info
+**None** of the scripts can delete orphaned files from the external library.
+:::
+
+This page is a guide to get rid of offline files from the repair page.
+
+<Tabs>
+
+<TabItem value="Python script (Best way)" label="Python script (Best way)">
+
+This way works by retrieving a file that contains a list of all the files that are defined as offline files, running a script that uses the [Immich API](/docs/api/delete-assets) in order to remove the offline files.
+
+1. Create an API key under Admin User -> Account Settings -> API Keys -> New API Key -> Copy to clipboard.
+2. Copy and save the code to file -> `Immich Remove Offline Files.py`.
+3. Run the script and follow the instructions.
+
+:::note
+You might need to run `pip install halo tabulate tqdm` if these dependencies are missing on your machine.
+:::
+
+```bash title='Python'
+#!/usr/bin/env python3
+
+# Note: you might need to run "pip install halo tabulate tqdm" if these dependencies are missing on your machine
+
+import argparse
+import json
+import requests
+
+from datetime import datetime
+from halo import Halo
+from tabulate import tabulate
+from tqdm import tqdm
+from urllib.parse import urlparse
+
+def parse_arguments():
+    parser = argparse.ArgumentParser(description='Fetch file report and delete orphaned media assets from Immich.')
+    parser.add_argument('--apikey', help='Immich API key for authentication')
+    parser.add_argument('--immichaddress', help='Full address for Immich, including protocol and port')
+    parser.add_argument('--no_prompt', action='store_true', help='Delete orphaned media assets without confirmation')
+    args = parser.parse_args()
+    return args
+
+def filter_entities(response_json, entity_type):
+    return [
+        {'pathValue': entity['pathValue'], 'entityId': entity['entityId'], 'entityType': entity['entityType']}
+        for entity in response_json.get('orphans', []) if entity.get('entityType') == entity_type
+    ]
+
+def main():
+    args = parse_arguments()
+    try:
+        if args.apikey:
+            api_key = args.apikey
+        else:
+            api_key = input('Enter the Immich API key: ')
+
+        if args.immichaddress:
+            immich_server = args.immichaddress
+        else:
+            immich_server = input('Enter the full web address for Immich, including protocol and port: ')
+        immich_parsed_url = urlparse(immich_server)
+        base_url = f'{immich_parsed_url.scheme}://{immich_parsed_url.netloc}'
+        api_url = f'{base_url}/api'
+        file_report_url = api_url + '/audit/file-report'
+        headers = {'x-api-key': api_key}
+
+        print()
+        spinner = Halo(text='Retrieving list of orphaned media assets...', spinner='dots')
+        spinner.start()
+
+        try:
+            response = requests.get(file_report_url, headers=headers)
+            response.raise_for_status()
+            spinner.succeed('Success!')
+        except requests.exceptions.RequestException as e:
+            spinner.fail(f'Failed to fetch assets: {str(e)}')
+
+        person_assets = filter_entities(response.json(), 'person')
+        orphan_media_assets = filter_entities(response.json(), 'asset')
+
+        num_entries = len(orphan_media_assets)
+
+        if num_entries == 0:
+            print('No orphaned media assets found; exiting.')
+            return
+
+        else:
+            if not args.no_prompt:
+                table_data = []
+                for asset in orphan_media_assets:
+                    table_data.append([asset['pathValue'], asset['entityId']])
+                print(tabulate(table_data, headers=['Path Value', 'Entity ID'], tablefmt='pretty'))
+                print()
+
+                if person_assets:
+                    print('Found orphaned person assets! Please run the "RECOGNIZE FACES > ALL" job in Immich after running this tool to correct this.')
+                    print()
+
+                if num_entries > 0:
+                    summary = f'There {"is" if num_entries == 1 else "are"} {num_entries} orphaned media asset{"s" if num_entries != 1 else ""}. Would you like to delete {"them" if num_entries != 1 else "it"} from Immich? (yes/no): '
+                    user_input = input(summary).lower()
+                    print()
+
+                    if user_input not in ('y', 'yes'):
+                        print('Exiting without making any changes.')
+                        return
+
+            with tqdm(total=num_entries, desc="Deleting orphaned media assets", unit="asset") as progress_bar:
+                for asset in orphan_media_assets:
+                    entity_id = asset['entityId']
+                    asset_url = f'{api_url}/asset'
+                    delete_payload = json.dumps({'force': True, 'ids': [entity_id]})
+                    headers = {'Content-Type': 'application/json', 'x-api-key': api_key}
+                    response = requests.delete(asset_url, headers=headers, data=delete_payload)
+                    response.raise_for_status()
+                    progress_bar.set_postfix_str(entity_id)
+                    progress_bar.update(1)
+            print()
+            print('Orphaned media assets deleted successfully!')
+    except Exception as e:
+        print()
+        print(f"An error occurred: {str(e)}")
+
+if __name__ == '__main__':
+    main()
+```
+
+Thanks to [DooMRunneR](https://discord.com/channels/979116623879368755/1179655214870040596/1194308198413373482) and [Sircharlo](https://discord.com/channels/979116623879368755/1179655214870040596/1195038609812758639) for writing this script.
+
+</TabItem>
+
+<TabItem value="Bash and PowerShell script" label="Bash and PowerShell script" default>
+
+This way works by downloading a JSON file that contains a list of all the files that are defined as offline files, running a script that uses the [Immich API](/docs/api/delete-assets) in order to remove the offline files.
+
+1. Create an API key under Admin User -> Account Settings -> API Keys -> New API Key -> Copy to clipboard.
+2. Download the JSON file under Administration -> repair -> Export.
+3. Replace `YOUR_IP_HERE` and `YOUR_API_KEY_HERE` with your actual IP address and API key in the script.
+4. Run the script in the same folder where the JSON file is located.
+
+## Script for Linux based systems:
+
+```bash title='Bash'
+awk -F\" '/entityId/ {print $4}' orphans.json | while read line; do curl --location --request DELETE 'http://YOUR_IP_HERE:2283/api/asset' --header 'Content- Type: application/json' --header 'x-api-key: YOUR_API_KEY_HERE' --data '{ "force": true, "ids": ["'"$line"'"]}';done
+```
+
+## Script for the Windows system (run through PowerShell):
+
+```powershell title='PowerShell'
+Get-Content orphans.json | Select-String -Pattern 'entityId' | ForEach-Object {
+  $line = $_ -split '"' | Select-Object -Index 3
+  $body = [pscustomobject]@{
+    'ids' = @($line)
+    'force' = (' true ' | ConvertFrom-Json)
+  } | ConvertTo-Json -Depth 3
+  Invoke-RestMethod -Uri 'http://YOUR_IP_HERE:2283/api/asset' -Method Delete -Headers @{
+    'Content-Type' = 'application/json'
+    'x-api-key' = 'YOUR_API_KEY_HERE'
+  } -Body $body
+}
+```
+
+Thanks to [DooMRunneR](https://discord.com/channels/979116623879368755/1179655214870040596/1194308198413373482) for writing this script.
+
+</TabItem>
+</Tabs>

docs/docs/install/podman-quadlet.md

@@ -1,134 +0,0 @@
----
-sidebar_position: 90
----
-
-# Podman deploy with quadlets
-
-You can deploy Immich on Podman using quadlets.
-
-Here are some sample rootless quadlet container files that can be placed in /etc/containers/systemd/users/${ID} where ID is the uid of whatever your rootless user is.
-
-Please note you'll need :z or :Z for selinux enabled hosts.
-
-immich-database.container
-```bash
-[Unit]
-Description=Immich Database
-Requires=immich-redis.service
-
-[Container]
-AutoUpdate=registry
-EnvironmentFile=${location_of_env_file}
-Image=registry.hub.docker.com/tensorchord/pgvecto-rs:pg16-v0.2.1
-Label=registry
-Network=slirp4netns:port_handler=slirp4netns
-PublishPort=5432:5432
-Volume=${host_database_directory}:/var/lib/postgresql/data:z
-Volume=/etc/localtime:/etc/localtime:ro
-
-[Service]
-Restart=always
-
-[Install]
-WantedBy=multi-user.target default.target
-```
-
-immich-microservices.container
-```bash
-[Unit]
-Description=Immich Microservices
-Requires=immich-redis.service immich-database.service
-
-[Container]
-#AddDevice=/dev/dri:/dev/dri #Needed for HWA
-#AddDevice=nvidia.com/gpu=0 #Needed for nvidia HWA, after setting up container tools
-AutoUpdate=registry
-EnvironmentFile=${location_of_env_file}
-Image=ghcr.io/immich-app/immich-server:release
-Label=registry
-Network=slirp4netns:port_handler=slirp4netns
-PublishPort=3002:3002
-Volume=${host_upload_directory}:/usr/src/app/upload:z
-Volume=/etc/localtime:/etc/localtime:ro
-Exec=start.sh microservices
-#Unmask=/dev/dri:/dev/dri #May be needed if doing HWA
-#UserNS=keep-id #May be needed if doing HWA
-
-[Service]
-Restart=always
-
-[Install]
-WantedBy=multi-user.target default.target
-```
-
-immich-ml.container
-```bash
-
-[Unit]
-Description=Immich Machine Learning
-Requires=immich-redis.service immich-database.service
-
-[Container]
-#AddDevice=/dev/dri:/dev/dri #Needed for HWA
-#AddDevice=nvidia.com/gpu=0 #Needed for nvidia HWA, after setting up container tools
-AutoUpdate=registry
-EnvironmentFile=${location_of_env_file}
-Image=ghcr.io/immich-app/immich-machine-learning:release
-Label=registry
-Network=slirp4netns:port_handler=slirp4netns
-PublishPort=3003:3003
-Volume=${cache_directory}:/cache:z
-Volume=/etc/localtime:/etc/localtime:ro
-#Unmask=/dev/dri:/dev/dri #May be needed for HWA
-
-[Service]
-Restart=always
-
-[Install]
-WantedBy=multi-user.target default.target
-```
-
-immich-redis.container
-```bash
-[Unit]
-Description=Immich Redis
-
-[Container]
-AutoUpdate=registry
-Image=registry.hub.docker.com/library/redis:6.2-alpine@sha256:51d6c56749a4243096327e3fb964a48ed92254357108449cb6e23999c37773c5
-Label=registry
-Network=slirp4netns:port_handler=slirp4netns
-PublishPort=6379:6379
-Timezone=America/Montreal
-
-[Service]
-Restart=always
-
-[Install]
-WantedBy=multi-user.target default.target
-```
-
-immich-server.container
-```bash
-[Unit]
-Description=Immich Server
-Requires=immich-redis.service immich-database.service
-
-[Container]
-AutoUpdate=registry
-EnvironmentFile=${location_of_env_file}
-Image=ghcr.io/immich-app/immich-server:release
-Label=registry
-Network=slirp4netns:port_handler=slirp4netns
-Exec=start.sh immich
-PublishPort=3000:3000
-PublishPort=3001:3001
-Volume=${host_upload_directory}:/usr/src/app/upload
-Volume=/etc/localtime:/etc/localtime:ro
-
-[Service]
-Restart=always
-
-[Install]
-WantedBy=multi-user.target default.target
-```

docs/docs/install/post-install.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 100
+sidebar_position: 90
 ---
 
 import RegisterAdminUser from '/docs/partials/_register-admin.md';

docs/docs/install/requirements.md

@@ -11,10 +11,6 @@ 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.
 :::

docs/docs/install/script.md

@@ -17,11 +17,12 @@ 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. Start the containers.
+2. Populate the `.env` file with necessary information based on the current directory path.
+3. 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-app` relative to the current directory.
+The directory which is used to store the library files is `./immich-data` relative to the current directory.
 
 :::tip
 For common next steps, see [Post Install Steps](/docs/install/post-install.mdx).

docs/docs/install/unraid.md

@@ -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_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.
+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.
 
 <img
 src={require('./img/unraid06.webp').default}

docs/src/components/community-projects.tsx

@@ -1,66 +0,0 @@
-import Link from '@docusaurus/Link';
-import React from 'react';
-
-interface CommunityProjectProps {
-  title: string;
-  description: string;
-  url: string;
-}
-
-const projects: CommunityProjectProps[] = [
-  {
-    title: 'immich-go',
-    description: `An alternative to the immich-CLI command that doesn't depend on nodejs installation. It tries its best for importing google photos takeout archives.`,
-    url: 'https://github.com/simulot/immich-go',
-  },
-  {
-    title: 'ImmichFrame',
-    description: 'Run an Immich slideshow in a photo frame.',
-    url: 'https://github.com/3rob3/ImmichFrame',
-  },
-  {
-    title: 'API Album Sync',
-    description: 'A python script to sync folders as albums.',
-    url: 'https://git.orenit.solutions/open/immichalbumpull',
-  },
-  {
-    title: 'Remove offline files',
-    description: 'A python script to remove offline files.',
-    url: 'https://gist.github.com/Thoroslives/ca5d8e1efd15111febc1e7b34ac72668',
-  },
-];
-
-function CommunityProject({ title, description, url }: CommunityProjectProps): JSX.Element {
-  return (
-    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl p-4">
-      <div className="flex flex-col gap-2">
-        <p className="m-0 items-start flex gap-2">
-          <span>{title}</span>
-        </p>
-
-        <p className="m-0 text-sm text-gray-600 dark:text-gray-300">{description}</p>
-        <p className="m-0 text-sm text-gray-600 dark:text-gray-300">
-          <a href={url}>{url}</a>
-        </p>
-      </div>
-      <div className="flex">
-        <Link
-          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300  rounded-full hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
-          to={url}
-        >
-          View Project
-        </Link>
-      </div>
-    </section>
-  );
-}
-
-export default function CommunityProjects(): JSX.Element {
-  return (
-    <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
-      {projects.map((project) => (
-        <CommunityProject {...project} />
-      ))}
-    </div>
-  );
-}

docs/static/_redirects

@@ -25,6 +25,3 @@
 /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
-/docs/guides/api-album-sync /docs/community-projects 301
-/docs/guides/remove-offline-files /docs/community-projects 301

e2e/.eslintrc.cjs

@@ -19,7 +19,6 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-floating-promises': 'error',
     'unicorn/prefer-module': 'off',
-    'unicorn/import-style': 'off',
     curly: 2,
     'prettier/prettier': 0,
     'unicorn/prevent-abbreviations': 'off',

e2e/package-lock.json

@@ -23,7 +23,7 @@
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-unicorn": "^52.0.0",
+        "eslint-plugin-unicorn": "^51.0.1",
         "exiftool-vendored": "^24.5.0",
         "luxon": "^3.4.4",
         "pg": "^8.11.3",
@@ -63,7 +63,7 @@
         "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-unicorn": "^52.0.0",
+        "eslint-plugin-unicorn": "^51.0.0",
         "glob": "^10.3.1",
         "mock-fs": "^5.2.0",
         "prettier": "^3.2.5",
@@ -2343,9 +2343,9 @@
       }
     },
     "node_modules/eslint-plugin-unicorn": {
-      "version": "52.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-52.0.0.tgz",
-      "integrity": "sha512-1Yzm7/m+0R4djH0tjDjfVei/ju2w3AzUGjG6q8JnuNIL5xIwsflyCooW5sfBvQp2pMYQFSWWCFONsjCax1EHng==",
+      "version": "51.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-51.0.1.tgz",
+      "integrity": "sha512-MuR/+9VuB0fydoI0nIn2RDA5WISRn4AsJyNSaNKLVwie9/ONvQhxOBbkfSICBPnzKrB77Fh6CZZXjgTt/4Latw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",

e2e/package.json

@@ -33,7 +33,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-unicorn": "^51.0.1",
     "exiftool-vendored": "^24.5.0",
     "luxon": "^3.4.4",
     "pg": "^8.11.3",

e2e/src/api/specs/activity.e2e-spec.ts

@@ -148,7 +148,7 @@ describe('/activity', () => {
     });
 
     it('should filter by userId', async () => {
-      const reaction = await createActivity({ albumId: album.id, type: ReactionType.Like });
+      const [reaction] = await Promise.all([createActivity({ albumId: album.id, type: ReactionType.Like })]);
 
       const response1 = await request(app)
         .get('/activity')
@@ -250,7 +250,8 @@ describe('/activity', () => {
     });
 
     it('should return a 200 for a duplicate like on the album', async () => {
-      const reaction = await createActivity({ albumId: album.id, type: ReactionType.Like });
+      const [reaction] = await Promise.all([createActivity({ albumId: album.id, type: ReactionType.Like })]);
+
       const { status, body } = await request(app)
         .post('/activity')
         .set('Authorization', `Bearer ${admin.accessToken}`)
@@ -260,11 +261,13 @@ describe('/activity', () => {
     });
 
     it('should not confuse an album like with an asset like', async () => {
-      const reaction = await createActivity({
-        albumId: album.id,
-        assetId: asset.id,
-        type: ReactionType.Like,
-      });
+      const [reaction] = await Promise.all([
+        createActivity({
+          albumId: album.id,
+          assetId: asset.id,
+          type: ReactionType.Like,
+        }),
+      ]);
       const { status, body } = await request(app)
         .post('/activity')
         .set('Authorization', `Bearer ${admin.accessToken}`)
@@ -311,11 +314,13 @@ describe('/activity', () => {
     });
 
     it('should return a 200 for a duplicate like on an asset', async () => {
-      const reaction = await createActivity({
-        albumId: album.id,
-        assetId: asset.id,
-        type: ReactionType.Like,
-      });
+      const [reaction] = await Promise.all([
+        createActivity({
+          albumId: album.id,
+          assetId: asset.id,
+          type: ReactionType.Like,
+        }),
+      ]);
 
       const { status, body } = await request(app)
         .post('/activity')

e2e/src/api/specs/asset.e2e-spec.ts

@@ -111,7 +111,7 @@ describe('/asset', () => {
       utils.createAsset(user1.accessToken),
     ]);
 
-    user2Assets = [await utils.createAsset(user2.accessToken)];
+    user2Assets = await Promise.all([utils.createAsset(user2.accessToken)]);
 
     await Promise.all([
       utils.createAsset(timeBucketUser.accessToken, { fileCreatedAt: new Date('1970-01-01').toISOString() }),

e2e/src/cli/specs/upload.e2e-spec.ts

@@ -1,5 +1,4 @@
 import { LoginResponseDto, getAllAlbums, getAllAssets } from '@immich/sdk';
-import { readFileSync } from 'node:fs';
 import { mkdir, readdir, rm, symlink } from 'node:fs/promises';
 import { asKeyAuth, immichCli, testAssetDir, utils } from 'src/utils';
 import { beforeAll, beforeEach, describe, expect, it } from 'vitest';
@@ -24,7 +23,7 @@ describe(`immich upload`, () => {
       const { stderr, stdout, exitCode } = await immichCli(['upload', `${testAssetDir}/albums/nature/silver_fir.jpg`]);
       expect(stderr).toBe('');
       expect(stdout.split('\n')).toEqual(
-        expect.arrayContaining([expect.stringContaining('Successfully uploaded 1 new asset')]),
+        expect.arrayContaining([expect.stringContaining('Successfully uploaded 1 asset')]),
       );
       expect(exitCode).toBe(0);
 
@@ -36,7 +35,7 @@ describe(`immich upload`, () => {
       const first = await immichCli(['upload', `${testAssetDir}/albums/nature/silver_fir.jpg`]);
       expect(first.stderr).toBe('');
       expect(first.stdout.split('\n')).toEqual(
-        expect.arrayContaining([expect.stringContaining('Successfully uploaded 1 new asset')]),
+        expect.arrayContaining([expect.stringContaining('Successfully uploaded 1 asset')]),
       );
       expect(first.exitCode).toBe(0);
 
@@ -70,7 +69,7 @@ describe(`immich upload`, () => {
       const { stderr, stdout, exitCode } = await immichCli(['upload', `${testAssetDir}/albums/nature/`, '--recursive']);
       expect(stderr).toBe('');
       expect(stdout.split('\n')).toEqual(
-        expect.arrayContaining([expect.stringContaining('Successfully uploaded 9 new assets')]),
+        expect.arrayContaining([expect.stringContaining('Successfully uploaded 9 assets')]),
       );
       expect(exitCode).toBe(0);
 
@@ -89,7 +88,7 @@ describe(`immich upload`, () => {
       ]);
       expect(stdout.split('\n')).toEqual(
         expect.arrayContaining([
-          expect.stringContaining('Successfully uploaded 9 new assets'),
+          expect.stringContaining('Successfully uploaded 9 assets'),
           expect.stringContaining('Successfully created 1 new album'),
           expect.stringContaining('Successfully updated 9 assets'),
         ]),
@@ -108,7 +107,7 @@ describe(`immich upload`, () => {
     it('should add existing assets to albums', async () => {
       const response1 = await immichCli(['upload', `${testAssetDir}/albums/nature/`, '--recursive']);
       expect(response1.stdout.split('\n')).toEqual(
-        expect.arrayContaining([expect.stringContaining('Successfully uploaded 9 new assets')]),
+        expect.arrayContaining([expect.stringContaining('Successfully uploaded 9 assets')]),
       );
       expect(response1.stderr).toBe('');
       expect(response1.exitCode).toBe(0);
@@ -148,7 +147,7 @@ describe(`immich upload`, () => {
       ]);
       expect(stdout.split('\n')).toEqual(
         expect.arrayContaining([
-          expect.stringContaining('Successfully uploaded 9 new assets'),
+          expect.stringContaining('Successfully uploaded 9 assets'),
           expect.stringContaining('Successfully created 1 new album'),
           expect.stringContaining('Successfully updated 9 assets'),
         ]),
@@ -181,7 +180,7 @@ describe(`immich upload`, () => {
 
       expect(stdout.split('\n')).toEqual(
         expect.arrayContaining([
-          expect.stringContaining('Successfully uploaded 9 new assets'),
+          expect.stringContaining('Successfully uploaded 9 assets'),
           expect.stringContaining('Deleting assets that have been uploaded'),
         ]),
       );
@@ -193,32 +192,6 @@ describe(`immich upload`, () => {
     });
   });
 
-  describe('immich upload --skip-hash', () => {
-    it('should skip hashing', async () => {
-      const filename = `albums/nature/silver_fir.jpg`;
-      await utils.createAsset(admin.accessToken, {
-        assetData: {
-          bytes: readFileSync(`${testAssetDir}/${filename}`),
-          filename: 'silver_fit.jpg',
-        },
-      });
-      const { stderr, stdout, exitCode } = await immichCli(['upload', `${testAssetDir}/${filename}`, '--skip-hash']);
-
-      expect(stderr).toBe('');
-      expect(stdout.split('\n')).toEqual(
-        expect.arrayContaining([
-          'Skipping hash check, assuming all files are new',
-          expect.stringContaining('Successfully uploaded 0 new assets'),
-          expect.stringContaining('Skipped 1 duplicate asset'),
-        ]),
-      );
-      expect(exitCode).toBe(0);
-
-      const assets = await getAllAssets({}, { headers: asKeyAuth(key) });
-      expect(assets.length).toBe(1);
-    });
-  });
-
   describe('immich upload --concurrency <number>', () => {
     it('should work', async () => {
       const { stderr, stdout, exitCode } = await immichCli([
@@ -230,10 +203,7 @@ describe(`immich upload`, () => {
 
       expect(stderr).toBe('');
       expect(stdout.split('\n')).toEqual(
-        expect.arrayContaining([
-          'Found 9 new files and 0 duplicates',
-          expect.stringContaining('Successfully uploaded 9 new assets'),
-        ]),
+        expect.arrayContaining([expect.stringContaining('Successfully uploaded 9 assets')]),
       );
       expect(exitCode).toBe(0);
 

e2e/src/setup.ts

@@ -1,7 +1,7 @@
 import { exec, spawn } from 'node:child_process';
 import { setTimeout } from 'node:timers';
 
-const setup = async () => {
+export default async () => {
   let _resolve: () => unknown;
   let _reject: (error: Error) => unknown;
 
@@ -31,5 +31,3 @@ const setup = async () => {
     await new Promise<void>((resolve) => exec('docker compose down', () => resolve()));
   };
 };
-
-export default setup;

install.sh

@@ -1,78 +1,62 @@
 #!/usr/bin/env bash
-set -o nounset
-set -o pipefail
 
-create_immich_directory() { local -r Tgt='./immich-app'
+echo "Starting Immich installation..."
+
+ip_address=$(hostname -I | awk '{print $1}')
+
+create_immich_directory() {
   echo "Creating Immich directory..."
-  if [[ -e $Tgt ]]; then
-    echo "Found existing directory $Tgt, will overwrite YAML files"
-  else
-    mkdir "$Tgt" || return
-  fi 
-  cd "$Tgt" || return
+  mkdir -p ./immich-app
+  cd ./immich-app || exit
 }
 
 download_docker_compose_file() {
   echo "Downloading docker-compose.yml..."
-  "${Curl[@]}" "$RepoUrl"/docker-compose.yml -o ./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
 }
 
 download_dot_env_file() {
   echo "Downloading .env file..."
-  "${Curl[@]}" "$RepoUrl"/example.env -o ./.env
+  curl -L https://github.com/immich-app/immich/releases/latest/download/example.env -o ./.env >/dev/null 2>&1
 }
 
 start_docker_compose() {
   echo "Starting Immich's docker containers"
 
-  if ! docker compose >/dev/null 2>&1; then
-    echo "failed to find 'docker compose'"
-    return 1
+  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
   fi
 
-  if ! docker compose up --remove-orphans -d; then
+  if $docker_bin up --remove-orphans -d; then
+    show_friendly_message
+    exit 0
+  else
     echo "Could not start. Check for errors above."
-    return 1
+    exit 1
   fi
-  show_friendly_message
 }
 
 show_friendly_message() {
-  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. 
+  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. 
   
-  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
-EOF
+  3. Finally, bring the containers back up with the command 'docker-compose up --remove-orphans -d' in the immich-app directory"
+
 }
 
 # MAIN
-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"
+create_immich_directory
+download_docker_compose_file
+download_dot_env_file
+start_docker_compose

mobile/openapi/doc/CreateLibraryDto.md

@@ -11,6 +11,7 @@ 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) |  | 

mobile/openapi/lib/model/create_library_dto.dart

@@ -16,6 +16,7 @@ class CreateLibraryDto {
     this.exclusionPatterns = const [],
     this.importPaths = const [],
     this.isVisible,
+    this.isWatched,
     this.name,
     required this.ownerId,
     required this.type,
@@ -33,6 +34,14 @@ 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
@@ -50,6 +59,7 @@ 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;
@@ -60,12 +70,13 @@ 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, name=$name, ownerId=$ownerId, type=$type]';
+  String toString() => 'CreateLibraryDto[exclusionPatterns=$exclusionPatterns, importPaths=$importPaths, isVisible=$isVisible, isWatched=$isWatched, name=$name, ownerId=$ownerId, type=$type]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
@@ -76,6 +87,11 @@ 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 {
@@ -101,6 +117,7 @@ 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'])!,

mobile/openapi/test/create_library_dto_test.dart

@@ -31,6 +31,11 @@ void main() {
       // TODO
     });
 
+    // bool isWatched
+    test('to test the property `isWatched`', () async {
+      // TODO
+    });
+
     // String name
     test('to test the property `name`', () async {
       // TODO

open-api/immich-openapi-specs.json

@@ -8000,6 +8000,9 @@
           "isVisible": {
             "type": "boolean"
           },
+          "isWatched": {
+            "type": "boolean"
+          },
           "name": {
             "type": "string"
           },

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

@@ -461,6 +461,7 @@ export type CreateLibraryDto = {
     exclusionPatterns?: string[];
     importPaths?: string[];
     isVisible?: boolean;
+    isWatched?: boolean;
     name?: string;
     ownerId: string;
     "type": LibraryType;

server/.eslintrc.js

@@ -25,7 +25,6 @@ module.exports = {
     'unicorn/prefer-top-level-await': 'off',
     'unicorn/prefer-event-target': 'off',
     'unicorn/no-thenable': 'off',
-    'unicorn/import-style': 'off',
     '@typescript-eslint/await-thenable': 'error',
     '@typescript-eslint/no-floating-promises': 'error',
     '@typescript-eslint/no-misused-promises': 'error',

server/Dockerfile

@@ -5,7 +5,7 @@ RUN apt-get install --no-install-recommends -yqq tini
 WORKDIR /usr/src/app
 COPY server/package.json server/package-lock.json ./
 RUN npm ci && \
-    # exiftool-vendored.pl, sharp-linux-x64 and sharp-linux-arm64 are the only ones we need
+    # sharp-linux-x64 and sharp-linux-arm64 are the only ones we need
     # they're marked as optional dependencies, so we need to copy them manually after pruning
     rm -rf node_modules/@img/sharp-libvips* && \
     rm -rf node_modules/@img/sharp-linuxmusl-x64
@@ -22,10 +22,9 @@ FROM dev AS prod
 RUN npm run build
 RUN npm prune --omit=dev --omit=optional
 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:3fb85a68652064ab109ed9730f45a3ede11f064afdd3ad9f96ef7e8a3c55f47e as web
+FROM node:iron-alpine3.18@sha256:fa5d3cf51725bd42d32e67917623038539dbe720dab082f590785c001eb4dfef as web
 
 WORKDIR /usr/src/open-api/typescript-sdk
 COPY open-api/typescript-sdk/package*.json open-api/typescript-sdk/tsconfig*.json ./

server/package-lock.json

@@ -35,6 +35,7 @@
         "class-validator": "^0.14.0",
         "cookie-parser": "^1.4.6",
         "exiftool-vendored": "~24.6.0",
+        "exiftool-vendored.pl": "12.78",
         "fast-glob": "^3.3.2",
         "fluent-ffmpeg": "^2.1.2",
         "geo-tz": "^8.0.0",
@@ -88,7 +89,7 @@
         "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-unicorn": "^52.0.0",
+        "eslint-plugin-unicorn": "^51.0.0",
         "jest": "^29.6.4",
         "jest-when": "^3.6.0",
         "mock-fs": "^5.2.0",
@@ -7493,9 +7494,9 @@
       }
     },
     "node_modules/eslint-plugin-unicorn": {
-      "version": "52.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-52.0.0.tgz",
-      "integrity": "sha512-1Yzm7/m+0R4djH0tjDjfVei/ju2w3AzUGjG6q8JnuNIL5xIwsflyCooW5sfBvQp2pMYQFSWWCFONsjCax1EHng==",
+      "version": "51.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-51.0.1.tgz",
+      "integrity": "sha512-MuR/+9VuB0fydoI0nIn2RDA5WISRn4AsJyNSaNKLVwie9/ONvQhxOBbkfSICBPnzKrB77Fh6CZZXjgTt/4Latw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -7773,7 +7774,6 @@
       "version": "12.78.0",
       "resolved": "https://registry.npmjs.org/exiftool-vendored.pl/-/exiftool-vendored.pl-12.78.0.tgz",
       "integrity": "sha512-K8j9NgxRpTFskFuXEl0AGsc692yYyThe4i3SXgx7xc0fu/vwD2c7tRGljkEtvaweYnMmfrF4DhCpuTu0aux6sg==",
-      "optional": true,
       "os": [
         "!win32"
       ]
@@ -19876,9 +19876,9 @@
       }
     },
     "eslint-plugin-unicorn": {
-      "version": "52.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-52.0.0.tgz",
-      "integrity": "sha512-1Yzm7/m+0R4djH0tjDjfVei/ju2w3AzUGjG6q8JnuNIL5xIwsflyCooW5sfBvQp2pMYQFSWWCFONsjCax1EHng==",
+      "version": "51.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-51.0.1.tgz",
+      "integrity": "sha512-MuR/+9VuB0fydoI0nIn2RDA5WISRn4AsJyNSaNKLVwie9/ONvQhxOBbkfSICBPnzKrB77Fh6CZZXjgTt/4Latw==",
       "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -20051,8 +20051,7 @@
     "exiftool-vendored.pl": {
       "version": "12.78.0",
       "resolved": "https://registry.npmjs.org/exiftool-vendored.pl/-/exiftool-vendored.pl-12.78.0.tgz",
-      "integrity": "sha512-K8j9NgxRpTFskFuXEl0AGsc692yYyThe4i3SXgx7xc0fu/vwD2c7tRGljkEtvaweYnMmfrF4DhCpuTu0aux6sg==",
-      "optional": true
+      "integrity": "sha512-K8j9NgxRpTFskFuXEl0AGsc692yYyThe4i3SXgx7xc0fu/vwD2c7tRGljkEtvaweYnMmfrF4DhCpuTu0aux6sg=="
     },
     "exit": {
       "version": "0.1.2",

server/package.json

@@ -59,6 +59,7 @@
     "class-validator": "^0.14.0",
     "cookie-parser": "^1.4.6",
     "exiftool-vendored": "~24.6.0",
+    "exiftool-vendored.pl": "12.78",
     "fast-glob": "^3.3.2",
     "fluent-ffmpeg": "^2.1.2",
     "geo-tz": "^8.0.0",
@@ -112,7 +113,7 @@
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-unicorn": "^51.0.0",
     "jest": "^29.6.4",
     "jest-when": "^3.6.0",
     "mock-fs": "^5.2.0",

server/src/dtos/library.dto.ts

@@ -32,6 +32,9 @@ export class CreateLibraryDto {
   @ArrayUnique()
   @ArrayMaxSize(128)
   exclusionPatterns?: string[];
+
+  @ValidateBoolean({ optional: true })
+  isWatched?: boolean;
 }
 
 export class UpdateLibraryDto {

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

@@ -695,7 +695,7 @@ describe(AssetService.name, () => {
       });
     });
 
-    it('should only delete generated files for readonly assets', async () => {
+    it('should not schedule delete-files job for readonly assets', async () => {
       when(assetMock.getById)
         .calledWith(assetStub.readOnly.id, {
           faces: {
@@ -709,20 +709,7 @@ describe(AssetService.name, () => {
 
       await sut.handleAssetDeletion({ id: assetStub.readOnly.id });
 
-      expect(jobMock.queue.mock.calls).toEqual([
-        [
-          {
-            name: JobName.DELETE_FILES,
-            data: {
-              files: [
-                assetStub.readOnly.thumbnailPath,
-                assetStub.readOnly.previewPath,
-                assetStub.readOnly.encodedVideoPath,
-              ],
-            },
-          },
-        ],
-      ]);
+      expect(jobMock.queue.mock.calls).toEqual([]);
 
       expect(assetMock.remove).toHaveBeenCalledWith(assetStub.readOnly);
     });
@@ -761,6 +748,7 @@ describe(AssetService.name, () => {
                 assetStub.external.thumbnailPath,
                 assetStub.external.previewPath,
                 assetStub.external.encodedVideoPath,
+                assetStub.external.sidecarPath,
               ],
             },
           },

server/src/services/asset.service.ts

@@ -399,12 +399,14 @@ export class AssetService {
       await this.jobRepository.queue({ name: JobName.ASSET_DELETION, data: { id: asset.livePhotoVideoId } });
     }
 
-    const files = [asset.thumbnailPath, asset.previewPath, asset.encodedVideoPath];
-    if (!(asset.isExternal || asset.isReadOnly)) {
-      files.push(asset.sidecarPath, asset.originalPath);
+    const files = [asset.thumbnailPath, asset.previewPath, asset.encodedVideoPath, asset.sidecarPath];
+    if (!fromExternal) {
+      files.push(asset.originalPath);
     }
 
-    await this.jobRepository.queue({ name: JobName.DELETE_FILES, data: { files } });
+    if (!asset.isReadOnly) {
+      await this.jobRepository.queue({ name: JobName.DELETE_FILES, data: { files } });
+    }
 
     return JobStatus.SUCCESS;
   }

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

@@ -1058,6 +1058,14 @@ 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();
+      });
     });
   });
 

server/src/services/library.service.ts

@@ -266,6 +266,9 @@ 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;
       }
     }

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

@@ -210,21 +210,25 @@ describe(MediaService.name, () => {
       expect(assetMock.update).not.toHaveBeenCalledWith();
     });
 
-    it.each(Object.values(ImageFormat))('should generate a %s preview for an image when specified', async (format) => {
-      configMock.load.mockResolvedValue([{ key: SystemConfigKey.IMAGE_PREVIEW_FORMAT, value: format }]);
+    it('should generate a thumbnail for an image', async () => {
       assetMock.getByIds.mockResolvedValue([assetStub.image]);
-      const previewPath = `upload/thumbs/user-id/as/se/asset-id-preview.${format}`;
-
       await sut.handleGeneratePreview({ id: assetStub.image.id });
 
       expect(storageMock.mkdirSync).toHaveBeenCalledWith('upload/thumbs/user-id/as/se');
-      expect(mediaMock.resize).toHaveBeenCalledWith('/original/path.jpg', previewPath, {
-        size: 1440,
-        format,
-        quality: 80,
-        colorspace: Colorspace.SRGB,
+      expect(mediaMock.resize).toHaveBeenCalledWith(
+        '/original/path.jpg',
+        'upload/thumbs/user-id/as/se/asset-id-preview.jpeg',
+        {
+          size: 1440,
+          format: ImageFormat.JPEG,
+          quality: 80,
+          colorspace: Colorspace.SRGB,
+        },
+      );
+      expect(assetMock.update).toHaveBeenCalledWith({
+        id: 'asset-id',
+        previewPath: 'upload/thumbs/user-id/as/se/asset-id-preview.jpeg',
       });
-      expect(assetMock.update).toHaveBeenCalledWith({ id: 'asset-id', previewPath });
     });
 
     it('should generate a P3 thumbnail for a wide gamut image', async () => {
@@ -338,25 +342,25 @@ describe(MediaService.name, () => {
       expect(assetMock.update).not.toHaveBeenCalledWith();
     });
 
-    it.each(Object.values(ImageFormat))(
-      'should generate a %s thumbnail for an image when specified',
-      async (format) => {
-        configMock.load.mockResolvedValue([{ key: SystemConfigKey.IMAGE_THUMBNAIL_FORMAT, value: format }]);
-        assetMock.getByIds.mockResolvedValue([assetStub.image]);
-        const thumbnailPath = `upload/thumbs/user-id/as/se/asset-id-thumbnail.${format}`;
+    it('should generate a thumbnail', async () => {
+      assetMock.getByIds.mockResolvedValue([assetStub.image]);
+      await sut.handleGenerateThumbnail({ id: assetStub.image.id });
 
-        await sut.handleGenerateThumbnail({ id: assetStub.image.id });
-
-        expect(storageMock.mkdirSync).toHaveBeenCalledWith('upload/thumbs/user-id/as/se');
-        expect(mediaMock.resize).toHaveBeenCalledWith('/original/path.jpg', thumbnailPath, {
+      expect(mediaMock.resize).toHaveBeenCalledWith(
+        '/original/path.jpg',
+        'upload/thumbs/user-id/as/se/asset-id-thumbnail.webp',
+        {
+          format: ImageFormat.WEBP,
           size: 250,
-          format,
           quality: 80,
           colorspace: Colorspace.SRGB,
-        });
-        expect(assetMock.update).toHaveBeenCalledWith({ id: 'asset-id', thumbnailPath });
-      },
-    );
+        },
+      );
+      expect(assetMock.update).toHaveBeenCalledWith({
+        id: 'asset-id',
+        thumbnailPath: 'upload/thumbs/user-id/as/se/asset-id-thumbnail.webp',
+      });
+    });
   });
 
   it('should generate a P3 thumbnail for a wide gamut image', async () => {
@@ -743,67 +747,6 @@ describe(MediaService.name, () => {
       );
     });
 
-    it('should not include hevc tag when target is hevc and video stream is copied from a different codec', async () => {
-      mediaMock.probe.mockResolvedValue(probeStub.videoStreamH264);
-      configMock.load.mockResolvedValue([
-        { key: SystemConfigKey.FFMPEG_TARGET_VIDEO_CODEC, value: VideoCodec.HEVC },
-        { key: SystemConfigKey.FFMPEG_ACCEPTED_VIDEO_CODECS, value: [VideoCodec.H264, VideoCodec.HEVC] },
-        { key: SystemConfigKey.FFMPEG_ACCEPTED_AUDIO_CODECS, value: [AudioCodec.AAC] },
-      ]);
-      assetMock.getByIds.mockResolvedValue([assetStub.video]);
-      await sut.handleVideoConversion({ id: assetStub.video.id });
-      expect(mediaMock.transcode).toHaveBeenCalledWith(
-        '/original/path.ext',
-        'upload/encoded-video/user-id/as/se/asset-id.mp4',
-        {
-          inputOptions: [],
-          outputOptions: [
-            '-c:v copy',
-            '-c:a aac',
-            '-movflags faststart',
-            '-fps_mode passthrough',
-            '-map 0:0',
-            '-map 0:1',
-            '-v verbose',
-            '-preset ultrafast',
-            '-crf 23',
-          ],
-          twoPass: false,
-        },
-      );
-    });
-
-    it('should include hevc tag when target is hevc and copying hevc video stream', async () => {
-      mediaMock.probe.mockResolvedValue(probeStub.matroskaContainer);
-      configMock.load.mockResolvedValue([
-        { key: SystemConfigKey.FFMPEG_TARGET_VIDEO_CODEC, value: VideoCodec.HEVC },
-        { key: SystemConfigKey.FFMPEG_ACCEPTED_VIDEO_CODECS, value: [VideoCodec.H264, VideoCodec.HEVC] },
-        { key: SystemConfigKey.FFMPEG_ACCEPTED_AUDIO_CODECS, value: [AudioCodec.AAC] },
-      ]);
-      assetMock.getByIds.mockResolvedValue([assetStub.video]);
-      await sut.handleVideoConversion({ id: assetStub.video.id });
-      expect(mediaMock.transcode).toHaveBeenCalledWith(
-        '/original/path.ext',
-        'upload/encoded-video/user-id/as/se/asset-id.mp4',
-        {
-          inputOptions: [],
-          outputOptions: [
-            '-c:v copy',
-            '-c:a aac',
-            '-movflags faststart',
-            '-fps_mode passthrough',
-            '-map 0:0',
-            '-map 0:1',
-            '-tag:v hvc1',
-            '-v verbose',
-            '-preset ultrafast',
-            '-crf 23',
-          ],
-          twoPass: false,
-        },
-      );
-    });
-
     it('should copy audio stream when audio matches target', async () => {
       mediaMock.probe.mockResolvedValue(probeStub.audioStreamAac);
       configMock.load.mockResolvedValue([{ key: SystemConfigKey.FFMPEG_TRANSCODE, value: TranscodePolicy.OPTIMAL }]);
@@ -1148,9 +1091,9 @@ describe(MediaService.name, () => {
       );
     });
 
-    it('should disable thread pooling for h264 if thread limit is 1', async () => {
+    it('should disable thread pooling for h264 if thread limit is above 0', async () => {
       mediaMock.probe.mockResolvedValue(probeStub.matroskaContainer);
-      configMock.load.mockResolvedValue([{ key: SystemConfigKey.FFMPEG_THREADS, value: 1 }]);
+      configMock.load.mockResolvedValue([{ key: SystemConfigKey.FFMPEG_THREADS, value: 2 }]);
       assetMock.getByIds.mockResolvedValue([assetStub.video]);
       await sut.handleVideoConversion({ id: assetStub.video.id });
       expect(mediaMock.transcode).toHaveBeenCalledWith(
@@ -1168,8 +1111,9 @@ describe(MediaService.name, () => {
             '-v verbose',
             '-vf scale=-2:720,format=yuv420p',
             '-preset ultrafast',
-            '-threads 1',
-            '-x264-params frame-threads=1:pools=none',
+            '-threads 2',
+            '-x264-params "pools=none"',
+            '-x264-params "frame-threads=2"',
             '-crf 23',
           ],
           twoPass: false,
@@ -1204,10 +1148,10 @@ describe(MediaService.name, () => {
       );
     });
 
-    it('should disable thread pooling for hevc if thread limit is 1', async () => {
+    it('should disable thread pooling for hevc if thread limit is above 0', async () => {
       mediaMock.probe.mockResolvedValue(probeStub.videoStreamVp9);
       configMock.load.mockResolvedValue([
-        { key: SystemConfigKey.FFMPEG_THREADS, value: 1 },
+        { key: SystemConfigKey.FFMPEG_THREADS, value: 2 },
         { key: SystemConfigKey.FFMPEG_TARGET_VIDEO_CODEC, value: VideoCodec.HEVC },
       ]);
       assetMock.getByIds.mockResolvedValue([assetStub.video]);
@@ -1228,8 +1172,9 @@ describe(MediaService.name, () => {
             '-v verbose',
             '-vf scale=-2:720,format=yuv420p',
             '-preset ultrafast',
-            '-threads 1',
-            '-x265-params frame-threads=1:pools=none',
+            '-threads 2',
+            '-x265-params "pools=none"',
+            '-x265-params "frame-threads=2"',
             '-crf 23',
           ],
           twoPass: false,

server/src/services/media.service.ts

@@ -167,15 +167,12 @@ export class MediaService {
   }
 
   async handleGeneratePreview({ id }: IEntityJob): Promise<JobStatus> {
-    const [{ image }, [asset]] = await Promise.all([
-      this.configCore.getConfig(),
-      this.assetRepository.getByIds([id], { exifInfo: true }),
-    ]);
+    const [asset] = await this.assetRepository.getByIds([id], { exifInfo: true });
     if (!asset) {
       return JobStatus.FAILED;
     }
 
-    const previewPath = await this.generateThumbnail(asset, AssetPathType.PREVIEW, image.previewFormat);
+    const previewPath = await this.generateThumbnail(asset, AssetPathType.PREVIEW, ImageFormat.JPEG);
     await this.assetRepository.update({ id: asset.id, previewPath });
     return JobStatus.SUCCESS;
   }
@@ -213,21 +210,18 @@ export class MediaService {
       }
     }
     this.logger.log(
-      `Successfully generated ${format.toUpperCase()} ${asset.type.toLowerCase()} ${type} for asset ${asset.id}`,
+      `Successfully generated ${format.toUpperCase()} ${asset.type.toLowerCase()} thumbnail for asset ${asset.id}`,
     );
     return path;
   }
 
   async handleGenerateThumbnail({ id }: IEntityJob): Promise<JobStatus> {
-    const [{ image }, [asset]] = await Promise.all([
-      this.configCore.getConfig(),
-      this.assetRepository.getByIds([id], { exifInfo: true }),
-    ]);
+    const [asset] = await this.assetRepository.getByIds([id], { exifInfo: true });
     if (!asset) {
       return JobStatus.FAILED;
     }
 
-    const thumbnailPath = await this.generateThumbnail(asset, AssetPathType.THUMBNAIL, image.thumbnailFormat);
+    const thumbnailPath = await this.generateThumbnail(asset, AssetPathType.THUMBNAIL, ImageFormat.WEBP);
     await this.assetRepository.update({ id: asset.id, thumbnailPath });
     return JobStatus.SUCCESS;
   }

server/src/services/system-config.service.spec.ts

@@ -346,6 +346,19 @@ 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);

server/src/services/system-config.service.ts

@@ -90,6 +90,13 @@ 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();
 

server/src/utils/media.ts

@@ -37,12 +37,9 @@ class BaseConfig implements VideoCodecSWConfig {
   }
 
   getBaseOutputOptions(target: TranscodeTarget, videoStream: VideoStreamInfo, audioStream?: AudioStreamInfo) {
-    const videoCodec = [TranscodeTarget.ALL, TranscodeTarget.VIDEO].includes(target) ? this.getVideoCodec() : 'copy';
-    const audioCodec = [TranscodeTarget.ALL, TranscodeTarget.AUDIO].includes(target) ? this.getAudioCodec() : 'copy';
-
     const options = [
-      `-c:v ${videoCodec}`,
-      `-c:a ${audioCodec}`,
+      `-c:v ${[TranscodeTarget.ALL, TranscodeTarget.VIDEO].includes(target) ? this.getVideoCodec() : 'copy'}`,
+      `-c:a ${[TranscodeTarget.ALL, TranscodeTarget.AUDIO].includes(target) ? this.getAudioCodec() : 'copy'}`,
       // Makes a second pass moving the moov atom to the
       // beginning of the file for improved playback speed.
       '-movflags faststart',
@@ -64,10 +61,7 @@ class BaseConfig implements VideoCodecSWConfig {
       options.push(`-g ${this.getGopSize()}`);
     }
 
-    if (
-      this.config.targetVideoCodec === VideoCodec.HEVC &&
-      (videoCodec !== 'copy' || videoStream.codecName === 'hevc')
-    ) {
+    if (this.config.targetVideoCodec === VideoCodec.HEVC) {
       options.push('-tag:v hvc1');
     }
 
@@ -349,23 +343,27 @@ export class ThumbnailConfig extends BaseConfig {
 
 export class H264Config extends BaseConfig {
   getThreadOptions() {
-    const options = super.getThreadOptions();
-    if (this.config.threads === 1) {
-      options.push('-x264-params frame-threads=1:pools=none');
+    if (this.config.threads <= 0) {
+      return [];
     }
-
-    return options;
+    return [
+      ...super.getThreadOptions(),
+      '-x264-params "pools=none"',
+      `-x264-params "frame-threads=${this.config.threads}"`,
+    ];
   }
 }
 
 export class HEVCConfig extends BaseConfig {
   getThreadOptions() {
-    const options = super.getThreadOptions();
-    if (this.config.threads === 1) {
-      options.push('-x265-params frame-threads=1:pools=none');
+    if (this.config.threads <= 0) {
+      return [];
     }
-
-    return options;
+    return [
+      ...super.getThreadOptions(),
+      '-x265-params "pools=none"',
+      `-x265-params "frame-threads=${this.config.threads}"`,
+    ];
   }
 }
 

server/test/fixtures/media.stub.ts

@@ -173,8 +173,4 @@ export const probeStub = {
       bitrate: 0,
     },
   }),
-  videoStreamH264: Object.freeze<VideoInfo>({
-    ...probeStubDefault,
-    videoStreams: [{ ...probeStubDefaultVideoStream[0], codecName: 'h264' }],
-  }),
 };

web/.eslintrc.cjs

@@ -50,7 +50,6 @@ module.exports = {
     'unicorn/no-nested-ternary': 'off',
     'unicorn/consistent-function-scoping': 'off',
     'unicorn/prefer-top-level-await': 'off',
-    'unicorn/import-style': 'off',
     // TODO: set recommended-type-checked and remove these rules
     '@typescript-eslint/await-thenable': 'error',
     '@typescript-eslint/no-floating-promises': 'error',

web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:iron-alpine3.18@sha256:3fb85a68652064ab109ed9730f45a3ede11f064afdd3ad9f96ef7e8a3c55f47e
+FROM node:iron-alpine3.18@sha256:fa5d3cf51725bd42d32e67917623038539dbe720dab082f590785c001eb4dfef
 
 RUN apk add --no-cache tini
 USER node

web/package-lock.json

@@ -45,7 +45,7 @@
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.35.1",
-        "eslint-plugin-unicorn": "^52.0.0",
+        "eslint-plugin-unicorn": "^51.0.1",
         "factory.ts": "^1.4.1",
         "postcss": "^8.4.35",
         "prettier": "^3.2.5",
@@ -4167,9 +4167,9 @@
       "dev": true
     },
     "node_modules/eslint-plugin-unicorn": {
-      "version": "52.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-52.0.0.tgz",
-      "integrity": "sha512-1Yzm7/m+0R4djH0tjDjfVei/ju2w3AzUGjG6q8JnuNIL5xIwsflyCooW5sfBvQp2pMYQFSWWCFONsjCax1EHng==",
+      "version": "51.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-51.0.1.tgz",
+      "integrity": "sha512-MuR/+9VuB0fydoI0nIn2RDA5WISRn4AsJyNSaNKLVwie9/ONvQhxOBbkfSICBPnzKrB77Fh6CZZXjgTt/4Latw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",

web/package.json

@@ -41,7 +41,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
-    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-unicorn": "^51.0.1",
     "factory.ts": "^1.4.1",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",

web/src/lib/components/admin-page/delete-confirm-dialoge.svelte

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

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

@@ -147,7 +147,6 @@
 
 {#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)}

web/src/lib/components/admin-page/restore-dialoge.svelte

@@ -28,8 +28,7 @@
 </script>
 
 <ConfirmDialogue
-  id="restore-user-modal"
-  title="Restore user"
+  title="Restore User"
   confirmText="Continue"
   confirmColor="green"
   onConfirm={handleRestoreUser}

web/src/lib/components/admin-page/settings/confirm-disable-login.svelte

@@ -5,7 +5,7 @@
   export let onConfirm: () => void;
 </script>
 
-<ConfirmDialogue id="disable-login-modal" title="Disable login" onClose={onCancel} {onConfirm}>
+<ConfirmDialogue 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>

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

@@ -179,7 +179,7 @@
         <SettingSelect
           label="TRANSCODE POLICY"
           {disabled}
-          desc="Policy for when a video should be transcoded. HDR videos will always be transcoded (except if transcoding is disabled)."
+          desc="Policy for when a video should be transcoded."
           bind:value={config.ffmpeg.transcode}
           name="transcode"
           options={[
@@ -355,7 +355,7 @@
         <SettingButtonsRow
           on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['ffmpeg'] })}
           on:save={() => dispatch('save', { ffmpeg: config.ffmpeg })}
-          showResetToDefault={!isEqual(savedConfig.ffmpeg, defaultConfig.ffmpeg)}
+          showResetToDefault={!isEqual(savedConfig.ffmpeg, defaultConfig)}
           {disabled}
         />
       </div>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Colorspace, ImageFormat, type SystemConfigDto } from '@immich/sdk';
+  import { Colorspace, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
@@ -24,19 +24,6 @@
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
-        <SettingSelect
-          label="THUMBNAIL FORMAT"
-          desc="WebP produces smaller files than JPEG, but is slower to encode."
-          bind:value={config.image.thumbnailFormat}
-          options={[
-            { value: ImageFormat.Jpeg, text: 'JPEG' },
-            { value: ImageFormat.Webp, text: 'WebP' },
-          ]}
-          name="format"
-          isEdited={config.image.thumbnailFormat !== savedConfig.image.thumbnailFormat}
-          {disabled}
-        />
-
         <SettingSelect
           label="THUMBNAIL RESOLUTION"
           desc="Used when viewing groups of photos (main timeline, album view, etc.). Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
@@ -54,19 +41,6 @@
           {disabled}
         />
 
-        <SettingSelect
-          label="PREVIEW FORMAT"
-          desc="WebP produces smaller files than JPEG, but is slower to encode."
-          bind:value={config.image.previewFormat}
-          options={[
-            { value: ImageFormat.Jpeg, text: 'JPEG' },
-            { value: ImageFormat.Webp, text: 'WebP' },
-          ]}
-          name="format"
-          isEdited={config.image.previewFormat !== savedConfig.image.previewFormat}
-          {disabled}
-        />
-
         <SettingSelect
           label="PREVIEW RESOLUTION"
           desc="Used when viewing a single photo and for machine learning. Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
@@ -107,7 +81,7 @@
         <SettingButtonsRow
           on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['image'] })}
           on:save={() => dispatch('save', { image: config.image })}
-          showResetToDefault={!isEqual(savedConfig.image, defaultConfig.image)}
+          showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />
       </div>

web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte

@@ -29,7 +29,7 @@
         <SettingButtonsRow
           on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['newVersionCheck'] })}
           on:save={() => dispatch('save', { newVersionCheck: config.newVersionCheck })}
-          showResetToDefault={!isEqual(savedConfig.newVersionCheck, defaultConfig.newVersionCheck)}
+          showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />
       </div>

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

@@ -41,7 +41,7 @@
           <SettingButtonsRow
             on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['server'] })}
             on:save={() => dispatch('save', { server: config.server })}
-            showResetToDefault={!isEqual(savedConfig.server, defaultConfig.server)}
+            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />
         </div>

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

@@ -236,7 +236,7 @@
         <SettingButtonsRow
           on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['storageTemplate'] })}
           on:save={() => dispatch('save', { storageTemplate: config.storageTemplate })}
-          showResetToDefault={!isEqual(savedConfig.storageTemplate, defaultConfig.storageTemplate) && !minified}
+          showResetToDefault={!isEqual(savedConfig, defaultConfig) && !minified}
           {disabled}
         />
       {/if}

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

@@ -45,7 +45,7 @@
         <SettingButtonsRow
           on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['trash'] })}
           on:save={() => dispatch('save', { trash: config.trash })}
-          showResetToDefault={!isEqual(savedConfig.trash, defaultConfig.trash)}
+          showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />
       </div>

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

@@ -36,7 +36,7 @@
         <SettingButtonsRow
           on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['user'] })}
           on:save={() => dispatch('save', { user: config.user })}
-          showResetToDefault={!isEqual(savedConfig.user, defaultConfig.user)}
+          showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />
       </div>

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

@@ -1,8 +1,10 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { updateAlbumInfo, type AlbumResponseDto, type UserResponseDto, AssetOrder } from '@immich/sdk';
-  import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus } from '@mdi/js';
+  import { mdiArrowDownThin, mdiArrowUpThin, mdiClose, 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';
@@ -50,52 +52,67 @@
   };
 </script>
 
-<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">
+<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>
           <div>
-            <UserAvatar {user} size="md" />
+            <CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
           </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 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')}
+              />
             </div>
-            <div class="w-full">{user.name}</div>
           </div>
-        {/each}
+          <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>
       </div>
     </div>
   </div>

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

@@ -432,7 +432,7 @@
 {#if allowEdit}
   <!-- Edit Modal -->
   {#if albumToEdit}
-    <FullScreenModal id="edit-album-modal" title="Edit album" width="wide" onClose={() => (albumToEdit = null)}>
+    <FullScreenModal onClose={() => (albumToEdit = null)}>
       <EditAlbumForm album={albumToEdit} onEditSuccess={successEditAlbumInfo} onCancel={() => (albumToEdit = null)} />
     </FullScreenModal>
   {/if}
@@ -458,8 +458,7 @@
   <!-- Delete Modal -->
   {#if albumToDelete}
     <ConfirmDialogue
-      id="delete-album-dialogue-modal"
-      title="Delete album"
+      title="Delete Album"
       confirmText="Delete"
       onConfirm={deleteSelectedAlbum}
       onClose={() => (albumToDelete = null)}

web/src/lib/components/album-page/share-info-modal.svelte

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

web/src/lib/components/elements/buttons/button.svelte

@@ -42,7 +42,7 @@
       'text-immich-primary dark:text-immich-dark-primary enabled:dark:hover:bg-immich-dark-primary/10 enabled:hover:bg-immich-primary/10',
     'light-red': 'bg-[#F9DEDC] text-[#410E0B] enabled:hover:bg-red-50',
     red: 'bg-red-500 text-white enabled:hover:bg-red-400',
-    green: 'bg-green-500 text-gray-800 enabled:hover:bg-green-400/90',
+    green: 'bg-green-600 text-white enabled:hover:bg-green-400/90',
     gray: 'bg-gray-500 dark:bg-gray-200 enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
     'transparent-gray':
       'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25',

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

@@ -161,7 +161,6 @@
 
     {#if isShowConfirmation}
       <ConfirmDialogue
-        id="merge-people-modal"
         title="Merge people"
         confirmText="Merge"
         onConfirm={handleMerge}

web/src/lib/components/faces-page/merge-suggestion-modal.svelte

@@ -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, mdiMerge } from '@mdi/js';
+  import { mdiArrowLeft, mdiClose, mdiMerge } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import Button from '../elements/buttons/button.svelte';
@@ -30,80 +30,95 @@
   };
 </script>
 
-<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])}
-        />
+<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')} />
+        </div>
       </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 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>
-        </div>
-      </div>
-    {/if}
-  </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>
+          <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>
 </FullScreenModal>

web/src/lib/components/faces-page/set-birth-date-modal.svelte

@@ -3,6 +3,7 @@
   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;
@@ -20,27 +21,36 @@
   };
 </script>
 
-<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>
+<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>
 
-  <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}
-      />
+      <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>
-    <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>
+
+    <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>
+  </div>
 </FullScreenModal>

web/src/lib/components/forms/api-key-form.svelte

@@ -1,4 +1,5 @@
 <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';
@@ -7,7 +8,7 @@
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
   export let apiKey: Partial<ApiKeyResponseDto>;
-  export let title: string;
+  export let title = 'API Key';
   export let cancelText = 'Cancel';
   export let submitText = 'Save';
 
@@ -28,16 +29,29 @@
   };
 </script>
 
-<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} />
+<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>
     </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>
+    <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>
 </FullScreenModal>

web/src/lib/components/forms/api-key-secret.svelte

@@ -1,4 +1,5 @@
 <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';
@@ -19,22 +20,31 @@
   });
 </script>
 
-<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>
+<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>
 
-  <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>
+      <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="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 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>
 </FullScreenModal>

web/src/lib/components/forms/create-user-form.svelte

@@ -5,6 +5,7 @@
   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';
 
@@ -68,53 +69,62 @@
   }
 </script>
 
-<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
+  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>
   </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>
+  <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="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="password">Password</label>
+      <PasswordField id="password" bind:password 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 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 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 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="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="immich-form-label" for="name">Name</label>
+      <input class="immich-form-input" id="name" bind:value={name} type="text" required />
+    </div>
 
-  {#if error}
-    <p class="text-sm text-red-400">{error}</p>
-  {/if}
+    <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 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>
+    {#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>

web/src/lib/components/forms/edit-album-form.svelte

@@ -34,29 +34,39 @@
   };
 </script>
 
-<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="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>
   </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>
+  <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>
-  </div>
-</form>
+
+    <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>

web/src/lib/components/forms/edit-user-form.svelte

@@ -1,12 +1,16 @@
 <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;
@@ -87,64 +91,82 @@
   }
 </script>
 
-<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="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="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
+    <div
+      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
     >
-    <input class="immich-form-input" id="quotaSize" name="quotaSize" type="number" min="0" bind:value={quotaSize} />
-    <p>Note: Enter 0 for unlimited quota</p>
+      <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>
   </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>
+</FocusTrap>
 
 {#if isShowResetPasswordConfirmation}
   <ConfirmDialogue
-    id="reset-password-modal"
-    title="Reset password"
+    title="Reset Password"
     confirmText="Reset"
     onConfirm={resetPassword}
     onClose={() => (isShowResetPasswordConfirmation = false)}

web/src/lib/components/forms/library-exclusion-pattern-form.svelte

@@ -2,6 +2,7 @@
   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';
 
@@ -28,42 +29,48 @@
   const handleSubmit = () => dispatch('submit', { excludePattern: exclusionPattern });
 </script>
 
-<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}
-      />
+<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>
     </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}
 
-      <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>
+    <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>
 </FullScreenModal>

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

@@ -1,5 +1,6 @@
 <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';
@@ -30,30 +31,45 @@
   const handleSubmit = () => dispatch('submit', { importPath });
 </script>
 
-<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} />
+<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>
     </div>
 
-    <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}
+    <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>
 
-      <Button type="submit" disabled={!canSubmit} fullwidth>{submitText}</Button>
-    </div>
+      <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>
 
-    <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>
+      <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>
 </FullScreenModal>

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

@@ -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}

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

@@ -169,7 +169,7 @@
             size="sm"
             on:click={() => {
               addExclusionPattern = true;
-            }}>Add exclusion pattern</Button
+            }}>Add Exclusion Pattern</Button
           ></td
         ></tr
       >

web/src/lib/components/forms/library-user-picker-form.svelte

@@ -1,5 +1,6 @@
 <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';
@@ -27,21 +28,27 @@
   const handleSubmit = () => dispatch('submit', { ownerId });
 </script>
 
-<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>
+<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>
     </div>
-  </form>
+
+    <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>
 </FullScreenModal>

web/src/lib/components/map-page/map-settings-modal.svelte

@@ -21,92 +21,98 @@
   const handleClose = () => dispatch('close');
 </script>
 
-<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"
+<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"
   >
-    <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',
-            },
-          ]}
-        />
-        <div class="text-xs">
-          <LinkButton
-            on:click={() => {
-              customDateRange = true;
-              settings.relativeDate = '';
-            }}
-          >
-            Use custom date range instead
-          </LinkButton>
-        </div>
-      </div>
-    {/if}
+    <h1 class="self-center text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Map Settings</h1>
 
-    <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>
+    <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',
+              },
+            ]}
+          />
+          <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>
+  </div>
 </FullScreenModal>