fix(mobile): handle missing extension during uploads

* fix(maintenance): prevent CLI hanging on occassion
fix(maintenance): always ack messages
fix(maintenance): ensure Redis is connected first

* chore(maintenance): validate app restart responses

* chore: mock the app restart callback

* fix: ack may not exist depending on caller

* refactor: move one shot into app.repository

* fix: send correct state in one shot

* chore: log restart event

cli/package.json

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

docs/static/archived-versions.json

@@ -1,4 +1,8 @@
 [
+  {
+    "label": "v2.4.1",
+    "url": "https://docs.v2.4.1.archive.immich.app"
+  },
   {
     "label": "v2.4.0",
     "url": "https://docs.v2.4.0.archive.immich.app"

e2e/package.json

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

machine-learning/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "immich-ml"
-version = "2.4.0"
+version = "2.4.1"
 description = ""
 authors = [{ name = "Hau Tran", email = "alex.tran1502@gmail.com" }]
 requires-python = ">=3.10,<4.0"

mobile/android/fastlane/Fastfile

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

mobile/lib/services/upload.service.dart

@@ -271,12 +271,12 @@ class UploadService {
       return null;
     }
 
-    final file = await _storageRepository.getFileForAsset(asset.id);
-    if (file == null) {
+    final uploadFileResult = await prepareUploadFile(asset, isLivePhoto: entity.isLivePhoto);
+    if (uploadFileResult == null) {
       return null;
     }
 
-    final originalFileName = entity.isLivePhoto ? p.setExtension(asset.name, p.extension(file.path)) : asset.name;
+    final (:file, :originalFilename) = uploadFileResult;
 
     String metadata = UploadTaskMetadata(
       localAssetId: asset.id,
@@ -290,7 +290,7 @@ class UploadService {
         file,
         createdAt: asset.createdAt,
         modifiedAt: asset.updatedAt,
-        originalFileName: originalFileName,
+        originalFileName: originalFilename,
         deviceAssetId: asset.id,
         metadata: metadata,
         group: "group",
@@ -308,8 +308,6 @@ class UploadService {
       return null;
     }
 
-    File? file;
-
     /// iOS LivePhoto has two files: a photo and a video.
     /// They are uploaded separately, with video file being upload first, then returned with the assetId
     /// The assetId is then used as a metadata for the photo file upload task.
@@ -320,18 +318,12 @@ class UploadService {
     /// The cancel operation will only cancel the video group (normal group), the photo group will not
     /// be touched, as the video file is already uploaded.
 
-    if (entity.isLivePhoto) {
-      file = await _storageRepository.getMotionFileForAsset(asset);
-    } else {
-      file = await _storageRepository.getFileForAsset(asset.id);
-    }
-
-    if (file == null) {
+    final uploadFileResult = await prepareUploadFile(asset, isLivePhoto: entity.isLivePhoto);
+    if (uploadFileResult == null) {
       return null;
     }
 
-    final fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
-    final originalFileName = entity.isLivePhoto ? p.setExtension(fileName, p.extension(file.path)) : fileName;
+    final (:file, :originalFilename) = uploadFileResult;
 
     String metadata = UploadTaskMetadata(
       localAssetId: asset.id,
@@ -345,7 +337,7 @@ class UploadService {
       file,
       createdAt: asset.createdAt,
       modifiedAt: asset.updatedAt,
-      originalFileName: originalFileName,
+      originalFileName: originalFilename,
       deviceAssetId: asset.id,
       metadata: metadata,
       group: group,
@@ -362,21 +354,20 @@ class UploadService {
       return null;
     }
 
-    final file = await _storageRepository.getFileForAsset(asset.id);
-    if (file == null) {
+    final result = await prepareUploadFile(asset);
+    if (result == null) {
       return null;
     }
 
     final fields = {'livePhotoVideoId': livePhotoVideoId};
 
     final requiresWiFi = _shouldRequireWiFi(asset);
-    final originalFileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
 
     return buildUploadTask(
-      file,
+      result.file,
       createdAt: asset.createdAt,
       modifiedAt: asset.updatedAt,
-      originalFileName: originalFileName,
+      originalFileName: result.originalFilename,
       deviceAssetId: asset.id,
       fields: fields,
       group: kBackupLivePhotoGroup,
@@ -398,6 +389,54 @@ class UploadService {
     return requiresWiFi;
   }
 
+  @visibleForTesting
+  Future<({File file, String originalFilename})?> prepareUploadFile(
+    LocalAsset asset, {
+    bool isLivePhoto = false,
+  }) async {
+    final file = isLivePhoto
+        ? await _storageRepository.getMotionFileForAsset(asset)
+        : await _storageRepository.getFileForAsset(asset.id);
+
+    if (file == null) {
+      return null;
+    }
+
+    final originalFilename = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+
+    if (isLivePhoto) {
+      final livePhotoFilename = p.setExtension(originalFilename, p.extension(file.path));
+      return (file: file, originalFilename: livePhotoFilename);
+    }
+
+    final filenameExt = p.extension(originalFilename);
+    if (filenameExt.isNotEmpty) {
+      return (file: file, originalFilename: originalFilename);
+    }
+
+    final assetNameExt = p.extension(asset.name);
+    if (assetNameExt.isNotEmpty) {
+      final correctedFilename = p.setExtension(originalFilename, assetNameExt);
+      _logger.fine(
+        "Corrected filename $originalFilename to $correctedFilename using asset.name extension $assetNameExt",
+      );
+      return (file: file, originalFilename: correctedFilename);
+    }
+
+    final filePathExt = p.extension(file.path);
+    if (filePathExt.isEmpty) {
+      _logger.warning(
+        "Asset ${asset.id} has no file extension in any source, using original filename - $originalFilename",
+      );
+      return (file: file, originalFilename: originalFilename);
+    }
+
+    final correctedFilename = p.setExtension(originalFilename, filePathExt);
+    _logger.fine("Corrected filename $originalFilename to $correctedFilename using file path extension $filePathExt");
+
+    return (file: file, originalFilename: correctedFilename);
+  }
+
   Future<UploadTask> buildUploadTask(
     File file, {
     required String group,

mobile/openapi/README.md

@@ -3,7 +3,7 @@ Immich API
 
 This Dart package is automatically generated by the [OpenAPI Generator](https://openapi-generator.tech) project:
 
-- API version: 2.4.0
+- API version: 2.4.1
 - Generator version: 7.8.0
 - Build package: org.openapitools.codegen.languages.DartClientCodegen
 
@@ -107,7 +107,6 @@ Class | Method | HTTP request | Description
 *AssetsApi* | [**getAssetMetadataByKey**](doc//AssetsApi.md#getassetmetadatabykey) | **GET** /assets/{id}/metadata/{key} | Retrieve asset metadata by key
 *AssetsApi* | [**getAssetOcr**](doc//AssetsApi.md#getassetocr) | **GET** /assets/{id}/ocr | Retrieve asset OCR data
 *AssetsApi* | [**getAssetStatistics**](doc//AssetsApi.md#getassetstatistics) | **GET** /assets/statistics | Get asset statistics
-*AssetsApi* | [**getAssetTile**](doc//AssetsApi.md#getassettile) | **GET** /assets/{id}/tiles/{level}/{col}/{row} | Get an image tile
 *AssetsApi* | [**getRandom**](doc//AssetsApi.md#getrandom) | **GET** /assets/random | Get random assets
 *AssetsApi* | [**playAssetVideo**](doc//AssetsApi.md#playassetvideo) | **GET** /assets/{id}/video/playback | Play asset video
 *AssetsApi* | [**replaceAsset**](doc//AssetsApi.md#replaceasset) | **PUT** /assets/{id}/original | Replace asset

mobile/openapi/lib/api/assets_api.dart

@@ -738,93 +738,6 @@ class AssetsApi {
     return null;
   }
 
-  /// Get an image tile
-  ///
-  /// Download a specific tile from an image at the specified level and position
-  ///
-  /// Note: This method returns the HTTP [Response].
-  ///
-  /// Parameters:
-  ///
-  /// * [num] col (required):
-  ///
-  /// * [String] id (required):
-  ///
-  /// * [num] level (required):
-  ///
-  /// * [num] row (required):
-  ///
-  /// * [String] key:
-  ///
-  /// * [String] slug:
-  Future<Response> getAssetTileWithHttpInfo(num col, String id, num level, num row, { String? key, String? slug, }) async {
-    // ignore: prefer_const_declarations
-    final apiPath = r'/assets/{id}/tiles/{level}/{col}/{row}'
-      .replaceAll('{col}', col.toString())
-      .replaceAll('{id}', id)
-      .replaceAll('{level}', level.toString())
-      .replaceAll('{row}', row.toString());
-
-    // ignore: prefer_final_locals
-    Object? postBody;
-
-    final queryParams = <QueryParam>[];
-    final headerParams = <String, String>{};
-    final formParams = <String, String>{};
-
-    if (key != null) {
-      queryParams.addAll(_queryParams('', 'key', key));
-    }
-    if (slug != null) {
-      queryParams.addAll(_queryParams('', 'slug', slug));
-    }
-
-    const contentTypes = <String>[];
-
-
-    return apiClient.invokeAPI(
-      apiPath,
-      'GET',
-      queryParams,
-      postBody,
-      headerParams,
-      formParams,
-      contentTypes.isEmpty ? null : contentTypes.first,
-    );
-  }
-
-  /// Get an image tile
-  ///
-  /// Download a specific tile from an image at the specified level and position
-  ///
-  /// Parameters:
-  ///
-  /// * [num] col (required):
-  ///
-  /// * [String] id (required):
-  ///
-  /// * [num] level (required):
-  ///
-  /// * [num] row (required):
-  ///
-  /// * [String] key:
-  ///
-  /// * [String] slug:
-  Future<MultipartFile?> getAssetTile(num col, String id, num level, num row, { String? key, String? slug, }) async {
-    final response = await getAssetTileWithHttpInfo(col, id, level, row,  key: key, slug: slug, );
-    if (response.statusCode >= HttpStatus.badRequest) {
-      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
-    }
-    // When a remote server returns no body with a status of 204, we shall not decode it.
-    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
-    // FormatException when trying to decode an empty string.
-    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'MultipartFile',) as MultipartFile;
-    
-    }
-    return null;
-  }
-
   /// Get random assets
   ///
   /// Retrieve a specified number of random assets for the authenticated user.

mobile/pubspec.yaml

@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone
 
 publish_to: 'none'
-version: 2.4.0+3029
+version: 2.4.1+3030
 
 environment:
   sdk: '>=3.8.0 <4.0.0'

mobile/test/services/upload.service_test.dart

@@ -4,6 +4,7 @@ import 'package:drift/drift.dart' hide isNull, isNotNull;
 import 'package:drift/native.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/services/store.service.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
@@ -16,8 +17,8 @@ import 'package:mocktail/mocktail.dart';
 import '../domain/service.mock.dart';
 import '../fixtures/asset.stub.dart';
 import '../infrastructure/repository.mock.dart';
-import '../repository.mocks.dart';
 import '../mocks/asset_entity.mock.dart';
+import '../repository.mocks.dart';
 
 void main() {
   late UploadService sut;
@@ -165,4 +166,174 @@ void main() {
       verify(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).called(1);
     });
   });
+
+  group('prepareUploadFile', () {
+    test('should keep filename with existing extension unchanged', () async {
+      final asset = LocalAssetStub.image1;
+      final mockFile = File('/tmp/123.jpg');
+
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => 'photo.jpg');
+
+      final result = await sut.prepareUploadFile(asset);
+      expect(result, isNotNull);
+      expect(result!.file.path, equals('/tmp/123.jpg'));
+      expect(result.originalFilename, equals('photo.jpg'));
+    });
+
+    test('should use asset.name extension when original filename lacks one', () async {
+      final asset = LocalAssetStub.image1;
+      final mockFile = File('/tmp/cache/123.mov');
+
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => '2024-10-23_17-00-30');
+
+      final result = await sut.prepareUploadFile(asset);
+      expect(result, isNotNull);
+      expect(result!.originalFilename, equals('2024-10-23_17-00-30.jpg'));
+    });
+
+    test('should use file path extension as final fallback', () async {
+      final asset = LocalAssetStub.image1.copyWith(name: 'document');
+      final mockFile = File('/tmp/cache/123.mov');
+
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => 'document');
+
+      final result = await sut.prepareUploadFile(asset);
+      expect(result, isNotNull);
+      expect(result!.originalFilename, equals('document.mov'));
+    });
+
+    test('should handle file without extension anywhere', () async {
+      final asset = LocalAssetStub.image1.copyWith(name: 'document');
+      final mockFile = File('/tmp/temp');
+
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => 'document');
+
+      final result = await sut.prepareUploadFile(asset);
+      expect(result, isNotNull);
+      expect(result!.originalFilename, equals('document'));
+    });
+
+    test('should preserve existing extension even if asset.name has different one', () async {
+      final asset = LocalAssetStub.image1;
+      final mockFile = File('/tmp/123.mov');
+
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => 'photo.HEIC');
+
+      final result = await sut.prepareUploadFile(asset);
+      expect(result, isNotNull);
+      expect(result!.originalFilename, equals('photo.HEIC'));
+    });
+
+    test('should fall back to asset.name when getOriginalFilename returns null', () async {
+      final asset = LocalAssetStub.image1.copyWith(name: 'VID_1234.mp4');
+      final mockFile = File('/tmp/video.mov');
+
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => null);
+
+      final result = await sut.prepareUploadFile(asset);
+      expect(result, isNotNull);
+      expect(result!.originalFilename, equals('VID_1234.mp4')); // Uses asset.name directly
+    });
+
+    test('should return null when file is not found', () async {
+      final asset = LocalAssetStub.image1;
+
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => null);
+
+      final result = await sut.prepareUploadFile(asset);
+      expect(result, isNull);
+    });
+  });
+
+  group('getUploadTask with missing extensions', () {
+    test('should add extension for regular photo without extension', () async {
+      final asset = LocalAssetStub.image1;
+      final mockEntity = MockAssetEntity();
+      final mockFile = File('/path/to/file.jpg');
+
+      when(() => mockEntity.isLivePhoto).thenReturn(false);
+      when(() => mockStorageRepository.getAssetEntityForAsset(asset)).thenAnswer((_) async => mockEntity);
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => '2024-10-23_17-00-30');
+
+      final task = await sut.getUploadTask(asset);
+
+      expect(task, isNotNull);
+      expect(task!.fields['filename'], equals('2024-10-23_17-00-30.jpg'));
+    });
+
+    test('should preserve existing extension for regular photo', () async {
+      final asset = LocalAssetStub.image1;
+      final mockEntity = MockAssetEntity();
+      final mockFile = File('/path/to/file.jpg');
+
+      when(() => mockEntity.isLivePhoto).thenReturn(false);
+      when(() => mockStorageRepository.getAssetEntityForAsset(asset)).thenAnswer((_) async => mockEntity);
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => 'MyPhoto.HEIC');
+
+      final task = await sut.getUploadTask(asset);
+
+      expect(task, isNotNull);
+      expect(task!.fields['filename'], equals('MyPhoto.HEIC'));
+    });
+
+    test('should add extension for video without extension', () async {
+      // Create a video asset using copyWith since image2 is a video type
+      final asset = LocalAssetStub.image1.copyWith(id: 'video1', name: 'VID_20241023_170030', type: AssetType.video);
+      final mockEntity = MockAssetEntity();
+      final mockFile = File('/path/to/video.mov');
+
+      when(() => mockEntity.isLivePhoto).thenReturn(false);
+      when(() => mockStorageRepository.getAssetEntityForAsset(asset)).thenAnswer((_) async => mockEntity);
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => 'VID_20241023_170030');
+
+      final task = await sut.getUploadTask(asset);
+
+      expect(task, isNotNull);
+      expect(task!.fields['filename'], equals('VID_20241023_170030.mov'));
+    });
+  });
+
+  group('getLivePhotoUploadTask with missing extensions', () {
+    test('should add extension when live photo filename lacks one', () async {
+      final asset = LocalAssetStub.image1.copyWith(name: 'IMG_1234.heic');
+      final mockEntity = MockAssetEntity();
+      final mockFile = File('/path/to/photo.heic');
+
+      when(() => mockEntity.isLivePhoto).thenReturn(true);
+      when(() => mockStorageRepository.getAssetEntityForAsset(asset)).thenAnswer((_) async => mockEntity);
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => 'IMG_1234');
+
+      final task = await sut.getLivePhotoUploadTask(asset, 'video-id-123');
+
+      expect(task, isNotNull);
+      expect(task!.fields['filename'], equals('IMG_1234.heic'));
+      expect(task.fields['livePhotoVideoId'], equals('video-id-123'));
+    });
+
+    test('should preserve extension when live photo filename has one', () async {
+      final asset = LocalAssetStub.image1;
+      final mockEntity = MockAssetEntity();
+      final mockFile = File('/path/to/photo.heic');
+
+      when(() => mockEntity.isLivePhoto).thenReturn(true);
+      when(() => mockStorageRepository.getAssetEntityForAsset(asset)).thenAnswer((_) async => mockEntity);
+      when(() => mockStorageRepository.getFileForAsset(asset.id)).thenAnswer((_) async => mockFile);
+      when(() => mockAssetMediaRepository.getOriginalFilename(asset.id)).thenAnswer((_) async => 'MyLivePhoto.HEIC');
+
+      final task = await sut.getLivePhotoUploadTask(asset, 'video-id-456');
+
+      expect(task, isNotNull);
+      expect(task!.fields['filename'], equals('MyLivePhoto.HEIC'));
+    });
+  });
 }

open-api/immich-openapi-specs.json

@@ -3756,103 +3756,6 @@
         "x-immich-state": "Stable"
       }
     },
-    "/assets/{id}/tiles/{level}/{col}/{row}": {
-      "get": {
-        "description": "Download a specific tile from an image at the specified level and position",
-        "operationId": "getAssetTile",
-        "parameters": [
-          {
-            "name": "col",
-            "required": true,
-            "in": "path",
-            "schema": {
-              "type": "number"
-            }
-          },
-          {
-            "name": "id",
-            "required": true,
-            "in": "path",
-            "schema": {
-              "format": "uuid",
-              "type": "string"
-            }
-          },
-          {
-            "name": "key",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "level",
-            "required": true,
-            "in": "path",
-            "schema": {
-              "type": "number"
-            }
-          },
-          {
-            "name": "row",
-            "required": true,
-            "in": "path",
-            "schema": {
-              "type": "number"
-            }
-          },
-          {
-            "name": "slug",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "string"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "content": {
-              "application/octet-stream": {
-                "schema": {
-                  "format": "binary",
-                  "type": "string"
-                }
-              }
-            },
-            "description": ""
-          }
-        },
-        "security": [
-          {
-            "bearer": []
-          },
-          {
-            "cookie": []
-          },
-          {
-            "api_key": []
-          }
-        ],
-        "summary": "Get an image tile",
-        "tags": [
-          "Assets"
-        ],
-        "x-immich-history": [
-          {
-            "version": "v2.4.0",
-            "state": "Added"
-          },
-          {
-            "version": "v2.4.0",
-            "state": "Stable"
-          }
-        ],
-        "x-immich-permission": "asset.view",
-        "x-immich-state": "Stable"
-      }
-    },
     "/assets/{id}/video/playback": {
       "get": {
         "description": "Streams the video file for the specified asset. This endpoint also supports byte range requests.",
@@ -14365,7 +14268,7 @@
   "info": {
     "title": "Immich",
     "description": "Immich API",
-    "version": "2.4.0",
+    "version": "2.4.1",
     "contact": {}
   },
   "tags": [

open-api/typescript-sdk/package.json

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

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

@@ -1,6 +1,6 @@
 /**
  * Immich
- * 2.4.0
+ * 2.4.1
  * DO NOT MODIFY - This file has been generated using oazapfts.
  * See https://www.npmjs.com/package/oazapfts
  */
@@ -2652,27 +2652,6 @@ export function viewAsset({ id, key, size, slug }: {
         ...opts
     }));
 }
-/**
- * Get an image tile
- */
-export function getAssetTile({ col, id, key, level, row, slug }: {
-    col: number;
-    id: string;
-    key?: string;
-    level: number;
-    row: number;
-    slug?: string;
-}, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.ok(oazapfts.fetchBlob<{
-        status: 200;
-        data: Blob;
-    }>(`/assets/${encodeURIComponent(id)}/tiles/${encodeURIComponent(level)}/${encodeURIComponent(col)}/${encodeURIComponent(row)}${QS.query(QS.explode({
-        key,
-        slug
-    }))}`, {
-        ...opts
-    }));
-}
 /**
  * Play asset video
  */

open-api/typescript-sdk/src/index.ts

@@ -55,13 +55,6 @@ export const getAssetThumbnailPath = (id: string) => `/assets/${id}/thumbnail`;
 export const getAssetPlaybackPath = (id: string) =>
   `/assets/${id}/video/playback`;
 
-export const getAssetTilePath = (
-  id: string,
-  level: number,
-  col: number,
-  row: number
-) => `/assets/${id}/tiles/${level}/${col}/${row}`;
-
 export const getUserProfileImagePath = (userId: string) =>
   `/users/${userId}/profile-image`;
 

pnpm-lock.yaml

@@ -728,9 +728,6 @@ importers:
       '@photo-sphere-viewer/core':
         specifier: ^5.14.0
         version: 5.14.0
-      '@photo-sphere-viewer/equirectangular-tiles-adapter':
-        specifier: ^5.14.0
-        version: 5.14.0(@photo-sphere-viewer/core@5.14.0)
       '@photo-sphere-viewer/equirectangular-video-adapter':
         specifier: ^5.14.0
         version: 5.14.0(@photo-sphere-viewer/core@5.14.0)(@photo-sphere-viewer/video-plugin@5.14.0(@photo-sphere-viewer/core@5.14.0))
@@ -3771,11 +3768,6 @@ packages:
   '@photo-sphere-viewer/core@5.14.0':
     resolution: {integrity: sha512-V0JeDSB1D2Q60Zqn7+0FPjq8gqbKEwuxMzNdTLydefkQugVztLvdZykO+4k5XTpweZ2QAWPH/QOI1xZbsdvR9A==}
 
-  '@photo-sphere-viewer/equirectangular-tiles-adapter@5.14.0':
-    resolution: {integrity: sha512-PEZreZg79tdkYbiswKppmLuwkJnMnhLVHTHJdWYqpjFt6PJ/ieh7Eg/8fIACc+DPtFrgzyCcH/6QAHPUE9nblQ==}
-    peerDependencies:
-      '@photo-sphere-viewer/core': 5.14.0
-
   '@photo-sphere-viewer/equirectangular-video-adapter@5.14.0':
     resolution: {integrity: sha512-Ez88sZ4sj3fONpZSortnN3gLXlvV/hn5U/88LsWtxI73YwhkZ06ZtXFYLXU4MBaJvqCbMGaR6j39uVXTWFo5rw==}
     peerDependencies:
@@ -15587,10 +15579,6 @@ snapshots:
     dependencies:
       three: 0.179.1
 
-  '@photo-sphere-viewer/equirectangular-tiles-adapter@5.14.0(@photo-sphere-viewer/core@5.14.0)':
-    dependencies:
-      '@photo-sphere-viewer/core': 5.14.0
-
   '@photo-sphere-viewer/equirectangular-video-adapter@5.14.0(@photo-sphere-viewer/core@5.14.0)(@photo-sphere-viewer/video-plugin@5.14.0(@photo-sphere-viewer/core@5.14.0))':
     dependencies:
       '@photo-sphere-viewer/core': 5.14.0

server/package.json

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

server/src/constants.ts

@@ -55,7 +55,6 @@ export const LOGIN_URL = '/auth/login?autoLaunch=0';
 export const excludePaths = ['/.well-known/immich', '/custom.css', '/favicon.ico'];
 
 export const FACE_THUMBNAIL_SIZE = 250;
-export const TILE_TARGET_SIZE = 1024;
 
 type ModelInfo = { dimSize: number };
 export const CLIP_MODEL_INFO: Record<string, ModelInfo> = {

server/src/controllers/asset-media.controller.ts

@@ -7,7 +7,6 @@ import {
   Next,
   Param,
   ParseFilePipe,
-  ParseIntPipe,
   Post,
   Put,
   Query,
@@ -168,26 +167,6 @@ export class AssetMediaController {
     }
   }
 
-  @Get(':id/tiles/:level/:col/:row')
-  @FileResponse()
-  @Authenticated({ permission: Permission.AssetView, sharedLink: true })
-  @Endpoint({
-    summary: 'Get an image tile',
-    description: 'Download a specific tile from an image at the specified level and position',
-    history: new HistoryBuilder().added('v2.4.0').stable('v2.4.0'),
-  })
-  async getAssetTile(
-    @Auth() auth: AuthDto,
-    @Param() { id }: UUIDParamDto,
-    @Param('level', ParseIntPipe) level: number,
-    @Param('col', ParseIntPipe) col: number,
-    @Param('row', ParseIntPipe) row: number,
-    @Res() res: Response,
-    @Next() next: NextFunction,
-  ) {
-    await sendFile(res, next, () => this.service.getAssetTile(auth, id, level, col, row), this.logger);
-  }
-
   @Get(':id/video/playback')
   @FileResponse()
   @Authenticated({ permission: Permission.AssetView, sharedLink: true })

server/src/cores/storage.core.ts

@@ -24,11 +24,7 @@ export interface MoveRequest {
   };
 }
 
-export type GeneratedImageType =
-  | AssetPathType.Thumbnail
-  | AssetPathType.Preview
-  | AssetPathType.FullSize
-  | AssetPathType.Tiles;
+export type GeneratedImageType = AssetPathType.Preview | AssetPathType.Thumbnail | AssetPathType.FullSize;
 export type GeneratedAssetType = GeneratedImageType | AssetPathType.EncodedVideo;
 
 export type ThumbnailPathEntity = { id: string; ownerId: string };
@@ -109,7 +105,7 @@ export class StorageCore {
     return StorageCore.getNestedPath(StorageFolder.Thumbnails, person.ownerId, `${person.id}.jpeg`);
   }
 
-  static getImagePath(asset: ThumbnailPathEntity, type: GeneratedImageType, format: 'jpeg' | 'webp' | 'dz') {
+  static getImagePath(asset: ThumbnailPathEntity, type: GeneratedImageType, format: 'jpeg' | 'webp') {
     return StorageCore.getNestedPath(StorageFolder.Thumbnails, asset.ownerId, `${asset.id}-${type}.${format}`);
   }
 

server/src/emails/components/footer.template.tsx

@@ -7,14 +7,22 @@ export const ImmichFooter = () => (
       <Column align="center" className="w-6/12 sm:w-full">
         <div>
           <Link href="https://play.google.com/store/apps/details?id=app.alextran.immich" className="object-contain">
-            <Img className="max-w-full" src={`https://immich.app/img/google-play-badge.png`} />
+            <Img
+              alt="Get it on Google Play"
+              className="max-w-full"
+              src={`https://immich.app/img/google-play-badge.png`}
+            />
           </Link>
         </div>
       </Column>
       <Column align="center" className="w-6/12 sm:w-full">
         <div className="h-full p-6">
           <Link href="https://apps.apple.com/sg/app/immich/id1613945652">
-            <Img src={`https://immich.app/img/ios-app-store-badge.png`} alt="Immich" className="max-w-full" />
+            <Img
+              alt="Download on the App Store"
+              className="max-w-full"
+              src={`https://immich.app/img/ios-app-store-badge.png`}
+            />
           </Link>
         </div>
       </Column>

server/src/enum.ts

@@ -45,8 +45,6 @@ export enum AssetFileType {
   Preview = 'preview',
   Thumbnail = 'thumbnail',
   Sidecar = 'sidecar',
-  /** Folder structure containing tiles of the image */
-  Tiles = 'tiles',
 }
 
 export enum AlbumUserRole {
@@ -361,8 +359,6 @@ export enum AssetPathType {
   FullSize = 'fullsize',
   Preview = 'preview',
   Thumbnail = 'thumbnail',
-  /** Folder structure containing tiles of the image */
-  Tiles = 'tiles',
   EncodedVideo = 'encoded_video',
   Sidecar = 'sidecar',
 }

server/src/maintenance/maintenance-websocket.repository.ts

@@ -37,7 +37,13 @@ export class MaintenanceWebsocketRepository implements OnGatewayConnection, OnGa
 
   afterInit(websocketServer: Server) {
     this.logger.log('Initialized websocket server');
-    websocketServer.on('AppRestart', () => this.appRepository.exitApp());
+
+    websocketServer.on('AppRestart', (event: ArgsOf<'AppRestart'>, ack?: (ok: 'ok') => void) => {
+      this.logger.log(`Restarting due to event... ${JSON.stringify(event)}`);
+
+      ack?.('ok');
+      this.appRepository.exitApp();
+    });
   }
 
   clientBroadcast<T extends keyof ClientEventMap>(event: T, ...data: ClientEventMap[T]) {

server/src/repositories/app.repository.ts

@@ -1,5 +1,10 @@
 import { Injectable } from '@nestjs/common';
+import { createAdapter } from '@socket.io/redis-adapter';
+import Redis from 'ioredis';
+import { Server as SocketIO } from 'socket.io';
 import { ExitCode } from 'src/enum';
+import { ConfigRepository } from 'src/repositories/config.repository';
+import { AppRestartEvent } from 'src/repositories/event.repository';
 
 @Injectable()
 export class AppRepository {
@@ -17,4 +22,26 @@ export class AppRepository {
   setCloseFn(fn: () => Promise<void>) {
     this.closeFn = fn;
   }
+
+  async sendOneShotAppRestart(state: AppRestartEvent): Promise<void> {
+    const server = new SocketIO();
+    const { redis } = new ConfigRepository().getEnv();
+    const pubClient = new Redis({ ...redis, lazyConnect: true });
+    const subClient = pubClient.duplicate();
+
+    await Promise.all([pubClient.connect(), subClient.connect()]);
+
+    server.adapter(createAdapter(pubClient, subClient));
+
+    // => corresponds to notification.service.ts#onAppRestart
+    server.emit('AppRestartV1', state, async () => {
+      const responses = await server.serverSideEmitWithAck('AppRestart', state);
+      if (responses.some((response) => response !== 'ok')) {
+        throw new Error("One or more node(s) returned a non-'ok' response to our restart request!");
+      }
+
+      pubClient.disconnect();
+      subClient.disconnect();
+    });
+  }
 }

server/src/repositories/media.repository.ts

@@ -152,19 +152,6 @@ export class MediaRepository {
       .toFile(output);
   }
 
-  /**
-   * For output file path 'output.dz', this creates an 'output.dzi' file and 'output_files' directory containing tiles
-   */
-  async generateTiles(input: string | Buffer, options: GenerateThumbnailOptions, output: string): Promise<void> {
-    await this.getImageDecodingPipeline(input, options)
-      .toFormat(options.format)
-      .tile({
-        depth: 'one',
-        size: options.size,
-      })
-      .toFile(output);
-  }
-
   private getImageDecodingPipeline(input: string | Buffer, options: DecodeToBufferOptions) {
     let pipeline = sharp(input, {
       // some invalid images can still be processed by sharp, but we want to fail on them by default to avoid crashes

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

@@ -248,33 +248,6 @@ export class AssetMediaService extends BaseService {
     });
   }
 
-  async getAssetTile(auth: AuthDto, id: string, level: number, col: number, row: number): Promise<ImmichFileResponse> {
-    await this.requireAccess({ auth, permission: Permission.AssetView, ids: [id] });
-
-    const asset = await this.findOrFail(id);
-    const { tilesPath } = getAssetFiles(asset.files ?? []);
-    if (!tilesPath) {
-      // TODO: placeholder tiles.
-      return new ImmichFileResponse({
-        fileName: `${level}_${col}_${row}.jpg`,
-        path: `/data/sluis_files/0/${col}_${row}.jpg`,
-        contentType: 'image/jpg',
-        cacheControl: CacheControl.None,
-      });
-      throw new NotFoundException('Asset tiles not found');
-    }
-
-    const tileName = getFileNameWithoutExtension(asset.originalFileName) + `_${level}_${col}_${row}.jpg`;
-    const tilePath = tilesPath.path.replace('.dz', '_files') + `/${level}/${col}_${row}.jpg`;
-
-    return new ImmichFileResponse({
-      fileName: tileName,
-      path: tilePath,
-      contentType: 'image/jpg',
-      cacheControl: CacheControl.PrivateWithCache,
-    });
-  }
-
   async playbackVideo(auth: AuthDto, id: string): Promise<ImmichFileResponse> {
     await this.requireAccess({ auth, permission: Permission.AssetView, ids: [id] });
 

server/src/services/asset.service.ts

@@ -144,14 +144,28 @@ export class AssetService extends BaseService {
     await this.requireAccess({ auth, permission: Permission.AssetUpdate, ids });
 
     const assetDto = _.omitBy({ isFavorite, visibility, duplicateId }, _.isUndefined);
-    const exifDto = _.omitBy({ latitude, longitude, rating, description, dateTimeOriginal }, _.isUndefined);
+    const exifDto = _.omitBy(
+      {
+        latitude,
+        longitude,
+        rating,
+        description,
+        dateTimeOriginal,
+      },
+      _.isUndefined,
+    );
+    const extractedTimeZone = dateTimeOriginal ? DateTime.fromISO(dateTimeOriginal, { setZone: true }).zone : undefined;
 
     if (Object.keys(exifDto).length > 0) {
       await this.assetRepository.updateAllExif(ids, exifDto);
     }
 
-    if ((dateTimeRelative !== undefined && dateTimeRelative !== 0) || timeZone !== undefined) {
-      await this.assetRepository.updateDateTimeOriginal(ids, dateTimeRelative, timeZone);
+    if (
+      (dateTimeRelative !== undefined && dateTimeRelative !== 0) ||
+      timeZone !== undefined ||
+      extractedTimeZone?.type === 'fixed'
+    ) {
+      await this.assetRepository.updateDateTimeOriginal(ids, dateTimeRelative, timeZone ?? extractedTimeZone?.name);
     }
 
     if (Object.keys(assetDto).length > 0) {
@@ -436,7 +450,19 @@ export class AssetService extends BaseService {
     rating?: number;
   }) {
     const { id, description, dateTimeOriginal, latitude, longitude, rating } = dto;
-    const writes = _.omitBy({ description, dateTimeOriginal, latitude, longitude, rating }, _.isUndefined);
+    const extractedTimeZone = dateTimeOriginal ? DateTime.fromISO(dateTimeOriginal, { setZone: true }).zone : undefined;
+    const writes = _.omitBy(
+      {
+        description,
+        dateTimeOriginal,
+        timeZone: extractedTimeZone?.type === 'fixed' ? extractedTimeZone.name : undefined,
+        latitude,
+        longitude,
+        rating,
+      },
+      _.isUndefined,
+    );
+
     if (Object.keys(writes).length > 0) {
       await this.assetRepository.upsertExif(
         updateLockedColumns({

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

@@ -89,6 +89,7 @@ describe(CliService.name, () => {
         alreadyDisabled: true,
       });
 
+      expect(mocks.app.sendOneShotAppRestart).toHaveBeenCalledTimes(0);
       expect(mocks.systemMetadata.set).toHaveBeenCalledTimes(0);
       expect(mocks.event.emit).toHaveBeenCalledTimes(0);
     });
@@ -99,6 +100,7 @@ describe(CliService.name, () => {
         alreadyDisabled: false,
       });
 
+      expect(mocks.app.sendOneShotAppRestart).toHaveBeenCalled();
       expect(mocks.systemMetadata.set).toHaveBeenCalledWith(SystemMetadataKey.MaintenanceMode, {
         isMaintenanceMode: false,
       });
@@ -114,6 +116,7 @@ describe(CliService.name, () => {
         }),
       );
 
+      expect(mocks.app.sendOneShotAppRestart).toHaveBeenCalledTimes(0);
       expect(mocks.systemMetadata.set).toHaveBeenCalledTimes(0);
       expect(mocks.event.emit).toHaveBeenCalledTimes(0);
     });
@@ -126,6 +129,7 @@ describe(CliService.name, () => {
         }),
       );
 
+      expect(mocks.app.sendOneShotAppRestart).toHaveBeenCalled();
       expect(mocks.systemMetadata.set).toHaveBeenCalledWith(SystemMetadataKey.MaintenanceMode, {
         isMaintenanceMode: true,
         secret: expect.stringMatching(/^\w{128}$/),

server/src/services/cli.service.ts

@@ -5,7 +5,7 @@ import { MaintenanceAuthDto } from 'src/dtos/maintenance.dto';
 import { UserAdminResponseDto, mapUserAdmin } from 'src/dtos/user.dto';
 import { SystemMetadataKey } from 'src/enum';
 import { BaseService } from 'src/services/base.service';
-import { createMaintenanceLoginUrl, generateMaintenanceSecret, sendOneShotAppRestart } from 'src/utils/maintenance';
+import { createMaintenanceLoginUrl, generateMaintenanceSecret } from 'src/utils/maintenance';
 import { getExternalDomain } from 'src/utils/misc';
 
 @Injectable()
@@ -55,8 +55,7 @@ export class CliService extends BaseService {
 
     const state = { isMaintenanceMode: false as const };
     await this.systemMetadataRepository.set(SystemMetadataKey.MaintenanceMode, state);
-
-    sendOneShotAppRestart(state);
+    await this.appRepository.sendOneShotAppRestart(state);
 
     return {
       alreadyDisabled: false,
@@ -89,7 +88,7 @@ export class CliService extends BaseService {
       secret,
     });
 
-    sendOneShotAppRestart({
+    await this.appRepository.sendOneShotAppRestart({
       isMaintenanceMode: true,
     });
 

server/src/services/maintenance.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { OnEvent } from 'src/decorators';
 import { MaintenanceAuthDto } from 'src/dtos/maintenance.dto';
 import { SystemMetadataKey } from 'src/enum';
+import { ArgOf } from 'src/repositories/event.repository';
 import { BaseService } from 'src/services/base.service';
 import { MaintenanceModeState } from 'src/types';
 import { createMaintenanceLoginUrl, generateMaintenanceSecret, signMaintenanceJwt } from 'src/utils/maintenance';
@@ -31,7 +32,10 @@ export class MaintenanceService extends BaseService {
   }
 
   @OnEvent({ name: 'AppRestart', server: true })
-  onRestart(): void {
+  onRestart(event: ArgOf<'AppRestart'>, ack?: (ok: 'ok') => void): void {
+    this.logger.log(`Restarting due to event... ${JSON.stringify(event)}`);
+
+    ack?.('ok');
     this.appRepository.exitApp();
   }
 

server/src/services/media.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-import { FACE_THUMBNAIL_SIZE, JOBS_ASSET_PAGINATION_SIZE, TILE_TARGET_SIZE } from 'src/constants';
+import { FACE_THUMBNAIL_SIZE, JOBS_ASSET_PAGINATION_SIZE } from 'src/constants';
 import { StorageCore, ThumbnailPathEntity } from 'src/cores/storage.core';
 import { Exif } from 'src/database';
 import { OnEvent, OnJob } from 'src/decorators';
@@ -47,15 +47,6 @@ interface UpsertFileOptions {
   path: string;
 }
 
-interface TileInfo {
-  path: string;
-  info: {
-    width: number;
-    cols: number;
-    rows: number;
-  };
-}
-
 @Injectable()
 export class MediaService extends BaseService {
   videoInterfaces: VideoInterfaces = { dri: [], mali: false };
@@ -158,8 +149,6 @@ export class MediaService extends BaseService {
     await this.storageCore.moveAssetImage(asset, AssetPathType.FullSize, image.fullsize.format);
     await this.storageCore.moveAssetImage(asset, AssetPathType.Preview, image.preview.format);
     await this.storageCore.moveAssetImage(asset, AssetPathType.Thumbnail, image.thumbnail.format);
-    // TODO:
-    // await this.storageCore.moveAssetImage(asset, AssetPathType.Tiles, image.???.format);
     await this.storageCore.moveAssetVideo(asset);
 
     return JobStatus.Success;
@@ -182,7 +171,6 @@ export class MediaService extends BaseService {
       previewPath: string;
       thumbnailPath: string;
       fullsizePath?: string;
-      tileInfo?: TileInfo;
       thumbhash: Buffer;
     };
     if (asset.type === AssetType.Video || asset.originalFileName.toLowerCase().endsWith('.gif')) {
@@ -196,7 +184,7 @@ export class MediaService extends BaseService {
       return JobStatus.Skipped;
     }
 
-    const { previewFile, thumbnailFile, fullsizeFile, tilesPath } = getAssetFiles(asset.files);
+    const { previewFile, thumbnailFile, fullsizeFile } = getAssetFiles(asset.files);
     const toUpsert: UpsertFileOptions[] = [];
     if (previewFile?.path !== generated.previewPath) {
       toUpsert.push({ assetId: asset.id, path: generated.previewPath, type: AssetFileType.Preview });
@@ -210,11 +198,6 @@ export class MediaService extends BaseService {
       toUpsert.push({ assetId: asset.id, path: generated.fullsizePath, type: AssetFileType.FullSize });
     }
 
-    if (generated.tileInfo?.path && tilesPath?.path !== generated.tileInfo.path) {
-      // TODO: save tileInfo.info (width, cols, rows) somewhere in the db.
-      toUpsert.push({ assetId: asset.id, path: generated.tileInfo.path, type: AssetFileType.Tiles });
-    }
-
     if (toUpsert.length > 0) {
       await this.assetRepository.upsertFiles(toUpsert);
     }
@@ -239,12 +222,6 @@ export class MediaService extends BaseService {
       }
     }
 
-    if (tilesPath && tilesPath.path !== generated.tileInfo?.path) {
-      this.logger.debug(`Deleting old tiles for asset ${asset.id}`);
-      pathsToDelete.push(tilesPath.path.replace('.dz', '.dzi'));
-      await this.storageRepository.unlinkDir(tilesPath.path.replace('.dz', '_files'), { recursive: true });
-    }
-
     if (pathsToDelete.length > 0) {
       await Promise.all(pathsToDelete.map((path) => this.storageRepository.unlink(path)));
     }
@@ -339,39 +316,6 @@ export class MediaService extends BaseService {
       );
     }
 
-    // TODO: probably extract to helper method
-    let tileInfo: TileInfo | undefined;
-    if (asset.exifInfo.projectionType === 'EQUIRECTANGULAR') {
-      // TODO: get uncropped width from asset (FullPanoWidthPixels if present).
-      const originalSize = 12_988;
-      // Get the number of tiles at the exact target size, rounded up (to at least 1 tile).
-      const numTilesExact = Math.ceil(originalSize / TILE_TARGET_SIZE);
-      // Then round up to the nearest power of 2 (photo-sphere-viewer requirement).
-      const numTiles = Math.pow(2, Math.ceil(Math.log2(numTilesExact)));
-      const tileSize = Math.ceil(originalSize / numTiles);
-
-      const tileOptions = {
-        format: image.preview.format,
-        size: tileSize,
-        quality: image.preview.quality,
-        ...thumbnailOptions,
-      };
-
-      tileInfo = {
-        path: StorageCore.getImagePath(asset, AssetPathType.Tiles, 'dz'),
-        info: {
-          width: originalSize,
-          cols: numTiles,
-          rows: numTiles / 2,
-        }
-      };
-      // TODO: reverse comment state
-      // TODO: handle cropped panoramas here. Tile as normal but save some offset?
-      // promises.push(this.mediaRepository.generateTiles(data, tileOptions, tileInfo.path));
-      console.log(tileOptions, tileInfo);
-      tileInfo = undefined;
-    }
-
     const outputs = await Promise.all(promises);
 
     if (asset.exifInfo.projectionType === 'EQUIRECTANGULAR') {
@@ -384,7 +328,7 @@ export class MediaService extends BaseService {
       await Promise.all(promises);
     }
 
-    return { previewPath, thumbnailPath, fullsizePath, tileInfo, thumbhash: outputs[0] as Buffer };
+    return { previewPath, thumbnailPath, fullsizePath, thumbhash: outputs[0] as Buffer };
   }
 
   @OnJob({ name: JobName.PersonGenerateThumbnail, queue: QueueName.ThumbnailGeneration })

server/src/utils/asset.util.ts

@@ -22,7 +22,6 @@ export const getAssetFiles = (files: AssetFile[]) => ({
   previewFile: getAssetFile(files, AssetFileType.Preview),
   thumbnailFile: getAssetFile(files, AssetFileType.Thumbnail),
   sidecarFile: getAssetFile(files, AssetFileType.Sidecar),
-  tilesPath: getAssetFile(files, AssetFileType.Tiles),
 });
 
 export const addAssets = async (

server/src/utils/maintenance.ts

@@ -1,55 +1,6 @@
-import { createAdapter } from '@socket.io/redis-adapter';
-import Redis from 'ioredis';
 import { SignJWT } from 'jose';
 import { randomBytes } from 'node:crypto';
-import { Server as SocketIO } from 'socket.io';
 import { MaintenanceAuthDto } from 'src/dtos/maintenance.dto';
-import { ConfigRepository } from 'src/repositories/config.repository';
-import { AppRestartEvent } from 'src/repositories/event.repository';
-
-export function sendOneShotAppRestart(state: AppRestartEvent): void {
-  const server = new SocketIO();
-  const { redis } = new ConfigRepository().getEnv();
-  const pubClient = new Redis(redis);
-  const subClient = pubClient.duplicate();
-  server.adapter(createAdapter(pubClient, subClient));
-
-  /**
-   * Keep trying until we manage to stop Immich
-   *
-   * Sometimes there appear to be communication
-   * issues between to the other servers.
-   *
-   * This issue only occurs with this method.
-   */
-  async function tryTerminate() {
-    while (true) {
-      try {
-        const responses = await server.serverSideEmitWithAck('AppRestart', state);
-        if (responses.length > 0) {
-          return;
-        }
-      } catch (error) {
-        console.error(error);
-        console.error('Encountered an error while telling Immich to stop.');
-      }
-
-      console.info(
-        "\nIt doesn't appear that Immich stopped, trying again in a moment.\nIf Immich is already not running, you can ignore this error.",
-      );
-
-      await new Promise((r) => setTimeout(r, 1e3));
-    }
-  }
-
-  // => corresponds to notification.service.ts#onAppRestart
-  server.emit('AppRestartV1', state, () => {
-    void tryTerminate().finally(() => {
-      pubClient.disconnect();
-      subClient.disconnect();
-    });
-  });
-}
 
 export async function createMaintenanceLoginUrl(
   baseUrl: string,

server/test/medium/specs/repositories/asset.repository.spec.ts

@@ -0,0 +1,90 @@
+import { Kysely } from 'kysely';
+import { AssetRepository } from 'src/repositories/asset.repository';
+import { LoggingRepository } from 'src/repositories/logging.repository';
+import { DB } from 'src/schema';
+import { BaseService } from 'src/services/base.service';
+import { newMediumService } from 'test/medium.factory';
+import { getKyselyDB } from 'test/utils';
+
+let defaultDatabase: Kysely<DB>;
+
+const setup = (db?: Kysely<DB>) => {
+  const { ctx } = newMediumService(BaseService, {
+    database: db || defaultDatabase,
+    real: [],
+    mock: [LoggingRepository],
+  });
+  return { ctx, sut: ctx.get(AssetRepository) };
+};
+
+beforeAll(async () => {
+  defaultDatabase = await getKyselyDB();
+});
+
+describe(AssetRepository.name, () => {
+  describe('upsertExif', () => {
+    it('should append to locked columns', async () => {
+      const { ctx, sut } = setup();
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      await ctx.newExif({
+        assetId: asset.id,
+        dateTimeOriginal: '2023-11-19T18:11:00',
+        lockedProperties: ['dateTimeOriginal'],
+      });
+
+      await expect(
+        ctx.database
+          .selectFrom('asset_exif')
+          .select('lockedProperties')
+          .where('assetId', '=', asset.id)
+          .executeTakeFirstOrThrow(),
+      ).resolves.toEqual({ lockedProperties: ['dateTimeOriginal'] });
+
+      await sut.upsertExif(
+        { assetId: asset.id, lockedProperties: ['description'] },
+        { lockedPropertiesBehavior: 'append' },
+      );
+
+      await expect(
+        ctx.database
+          .selectFrom('asset_exif')
+          .select('lockedProperties')
+          .where('assetId', '=', asset.id)
+          .executeTakeFirstOrThrow(),
+      ).resolves.toEqual({ lockedProperties: ['description', 'dateTimeOriginal'] });
+    });
+
+    it('should deduplicate locked columns', async () => {
+      const { ctx, sut } = setup();
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      await ctx.newExif({
+        assetId: asset.id,
+        dateTimeOriginal: '2023-11-19T18:11:00',
+        lockedProperties: ['dateTimeOriginal', 'description'],
+      });
+
+      await expect(
+        ctx.database
+          .selectFrom('asset_exif')
+          .select('lockedProperties')
+          .where('assetId', '=', asset.id)
+          .executeTakeFirstOrThrow(),
+      ).resolves.toEqual({ lockedProperties: ['dateTimeOriginal', 'description'] });
+
+      await sut.upsertExif(
+        { assetId: asset.id, lockedProperties: ['description'] },
+        { lockedPropertiesBehavior: 'append' },
+      );
+
+      await expect(
+        ctx.database
+          .selectFrom('asset_exif')
+          .select('lockedProperties')
+          .where('assetId', '=', asset.id)
+          .executeTakeFirstOrThrow(),
+      ).resolves.toEqual({ lockedProperties: ['description', 'dateTimeOriginal'] });
+    });
+  });
+});

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

@@ -270,13 +270,13 @@ describe(AssetService.name, () => {
   });
 
   describe('update', () => {
-    it('should update dateTimeOriginal', async () => {
+    it('should automatically lock lockable columns', async () => {
       const { sut, ctx } = setup();
       ctx.getMock(JobRepository).queue.mockResolvedValue();
       const { user } = await ctx.newUser();
       const auth = factory.auth({ user });
       const { asset } = await ctx.newAsset({ ownerId: user.id });
-      await ctx.newExif({ assetId: asset.id, description: 'test' });
+      await ctx.newExif({ assetId: asset.id, dateTimeOriginal: '2023-11-19T18:11:00' });
 
       await expect(
         ctx.database
@@ -285,7 +285,14 @@ describe(AssetService.name, () => {
           .where('assetId', '=', asset.id)
           .executeTakeFirstOrThrow(),
       ).resolves.toEqual({ lockedProperties: null });
-      await sut.update(auth, asset.id, { dateTimeOriginal: '2023-11-19T18:11:00.000-07:00' });
+
+      await sut.update(auth, asset.id, {
+        latitude: 42,
+        longitude: 42,
+        rating: 3,
+        description: 'foo',
+        dateTimeOriginal: '2023-11-19T18:11:00+01:00',
+      });
 
       await expect(
         ctx.database
@@ -293,16 +300,83 @@ describe(AssetService.name, () => {
           .select('lockedProperties')
           .where('assetId', '=', asset.id)
           .executeTakeFirstOrThrow(),
-      ).resolves.toEqual({ lockedProperties: ['dateTimeOriginal'] });
+      ).resolves.toEqual({
+        lockedProperties: ['timeZone', 'rating', 'description', 'latitude', 'longitude', 'dateTimeOriginal'],
+      });
+    });
+
+    it('should update dateTimeOriginal', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const auth = factory.auth({ user });
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      await ctx.newExif({ assetId: asset.id, description: 'test' });
+
+      await sut.update(auth, asset.id, { dateTimeOriginal: '2023-11-19T18:11:00' });
+
       await expect(ctx.get(AssetRepository).getById(asset.id, { exifInfo: true })).resolves.toEqual(
         expect.objectContaining({
-          exifInfo: expect.objectContaining({ dateTimeOriginal: '2023-11-20T01:11:00+00:00' }),
+          exifInfo: expect.objectContaining({ dateTimeOriginal: '2023-11-19T18:11:00+00:00', timeZone: null }),
+        }),
+      );
+    });
+
+    it('should update dateTimeOriginal with time zone', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const auth = factory.auth({ user });
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      await ctx.newExif({ assetId: asset.id, description: 'test' });
+
+      await sut.update(auth, asset.id, { dateTimeOriginal: '2023-11-19T18:11:00.000-07:00' });
+
+      await expect(ctx.get(AssetRepository).getById(asset.id, { exifInfo: true })).resolves.toEqual(
+        expect.objectContaining({
+          exifInfo: expect.objectContaining({ dateTimeOriginal: '2023-11-20T01:11:00+00:00', timeZone: 'UTC-7' }),
         }),
       );
     });
   });
 
   describe('updateAll', () => {
+    it('should automatically lock lockable columns', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(JobRepository).queueAll.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const auth = factory.auth({ user });
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      await ctx.newExif({ assetId: asset.id, dateTimeOriginal: '2023-11-19T18:11:00' });
+
+      await expect(
+        ctx.database
+          .selectFrom('asset_exif')
+          .select('lockedProperties')
+          .where('assetId', '=', asset.id)
+          .executeTakeFirstOrThrow(),
+      ).resolves.toEqual({ lockedProperties: null });
+
+      await sut.updateAll(auth, {
+        ids: [asset.id],
+        latitude: 42,
+        description: 'foo',
+        longitude: 42,
+        rating: 3,
+        dateTimeOriginal: '2023-11-19T18:11:00+01:00',
+      });
+
+      await expect(
+        ctx.database
+          .selectFrom('asset_exif')
+          .select('lockedProperties')
+          .where('assetId', '=', asset.id)
+          .executeTakeFirstOrThrow(),
+      ).resolves.toEqual({
+        lockedProperties: ['timeZone', 'rating', 'description', 'latitude', 'longitude', 'dateTimeOriginal'],
+      });
+    });
+
     it('should relatively update assets', async () => {
       const { sut, ctx } = setup();
       ctx.getMock(JobRepository).queueAll.mockResolvedValue();
@@ -313,13 +387,6 @@ describe(AssetService.name, () => {
 
       await sut.updateAll(auth, { ids: [asset.id], dateTimeRelative: -11 });
 
-      await expect(
-        ctx.database
-          .selectFrom('asset_exif')
-          .select('lockedProperties')
-          .where('assetId', '=', asset.id)
-          .executeTakeFirstOrThrow(),
-      ).resolves.toEqual({ lockedProperties: ['timeZone', 'dateTimeOriginal'] });
       await expect(ctx.get(AssetRepository).getById(asset.id, { exifInfo: true })).resolves.toEqual(
         expect.objectContaining({
           exifInfo: expect.objectContaining({
@@ -328,5 +395,39 @@ describe(AssetService.name, () => {
         }),
       );
     });
+
+    it('should update dateTimeOriginal', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(JobRepository).queueAll.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const auth = factory.auth({ user });
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      await ctx.newExif({ assetId: asset.id, description: 'test' });
+
+      await sut.updateAll(auth, { ids: [asset.id], dateTimeOriginal: '2023-11-19T18:11:00' });
+
+      await expect(ctx.get(AssetRepository).getById(asset.id, { exifInfo: true })).resolves.toEqual(
+        expect.objectContaining({
+          exifInfo: expect.objectContaining({ dateTimeOriginal: '2023-11-19T18:11:00+00:00', timeZone: null }),
+        }),
+      );
+    });
+
+    it('should update dateTimeOriginal with time zone', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(JobRepository).queueAll.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const auth = factory.auth({ user });
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      await ctx.newExif({ assetId: asset.id, description: 'test' });
+
+      await sut.updateAll(auth, { ids: [asset.id], dateTimeOriginal: '2023-11-19T18:11:00.000-07:00' });
+
+      await expect(ctx.get(AssetRepository).getById(asset.id, { exifInfo: true })).resolves.toEqual(
+        expect.objectContaining({
+          exifInfo: expect.objectContaining({ dateTimeOriginal: '2023-11-20T01:11:00+00:00', timeZone: 'UTC-7' }),
+        }),
+      );
+    });
   });
 });

server/test/repositories/media.repository.mock.ts

@@ -5,7 +5,6 @@ import { Mocked, vitest } from 'vitest';
 export const newMediaRepositoryMock = (): Mocked<RepositoryInterface<MediaRepository>> => {
   return {
     generateThumbnail: vitest.fn().mockImplementation(() => Promise.resolve()),
-    generateTiles: vitest.fn().mockImplementation(() => Promise.resolve()),
     writeExif: vitest.fn().mockImplementation(() => Promise.resolve()),
     copyTagGroup: vitest.fn().mockImplementation(() => Promise.resolve()),
     generateThumbhash: vitest.fn().mockResolvedValue(Buffer.from('')),

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-web",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "license": "GNU Affero General Public License version 3",
   "type": "module",
   "scripts": {
@@ -32,7 +32,6 @@
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",
-    "@photo-sphere-viewer/equirectangular-tiles-adapter": "^5.14.0",
     "@photo-sphere-viewer/equirectangular-video-adapter": "^5.14.0",
     "@photo-sphere-viewer/markers-plugin": "^5.14.0",
     "@photo-sphere-viewer/resolution-plugin": "^5.14.0",

web/src/lib/components/AdminCard.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
+  import { Card, CardBody, CardHeader, CardTitle, Icon, type ActionItem, type IconLike } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    icon: IconLike;
+    title: string;
+    headerAction?: ActionItem;
+    children?: Snippet;
+  };
+
+  const { icon, title, headerAction, children }: Props = $props();
+</script>
+
+<Card color="secondary">
+  <CardHeader>
+    <div class="flex w-full justify-between items-center px-4 py-2">
+      <div class="flex gap-2 text-primary">
+        <Icon {icon} size="1.5rem" />
+        <CardTitle>{title}</CardTitle>
+      </div>
+      {#if headerAction}
+        <HeaderActionButton action={headerAction} />
+      {/if}
+    </div>
+  </CardHeader>
+  <CardBody>
+    <div class="px-4 pb-7">
+      {@render children?.()}
+    </div>
+  </CardBody>
+</Card>

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

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { getAssetOriginalUrl, getAssetThumbnailUrl, getAssetTileUrl } from '$lib/utils';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { getAssetOriginalUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
-  import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
+  import { AssetMediaSize, viewAsset, type AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -13,31 +14,19 @@
 
   let { asset, zoomToggle = $bindable() }: Props = $props();
 
-  const tileconfig =
-    asset.id === '6e899018-32fe-4fd5-b6ac-b3a525b8e61f'
-      ? {
-          width: 12_988,
-          // height: 35,
-          cols: 16,
-          rows: 8,
-        }
-      : undefined;
-
-  const baseUrl = getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Preview, cacheKey: asset.thumbhash });
-  // TODO: determine whether to return null based on 1. if asset has tiles, 2. if tile is inside 'cropped' bounds.
-  const tileUrl = (col: number, row: number, level: number) =>
-    tileconfig ? getAssetTileUrl({ id: asset.id, level, col, row, cacheKey: asset.thumbhash }) : null;
+  const loadAssetData = async (id: string) => {
+    const data = await viewAsset({ ...authManager.params, id, size: AssetMediaSize.Preview });
+    return URL.createObjectURL(data);
+  };
 </script>
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
-  {#await import('./photo-sphere-viewer-adapter.svelte')}
+  {#await Promise.all([loadAssetData(asset.id), import('./photo-sphere-viewer-adapter.svelte')])}
     <LoadingSpinner />
-  {:then { default: PhotoSphereViewer }}
+  {:then [data, { default: PhotoSphereViewer }]}
     <PhotoSphereViewer
       bind:zoomToggle
-      {baseUrl}
-      {tileUrl}
-      {tileconfig}
+      panorama={data}
       originalPanorama={isWebCompatibleImage(asset)
         ? getAssetOriginalUrl(asset.id)
         : getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Fullsize, cacheKey: asset.thumbhash })}

web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte

@@ -11,7 +11,6 @@
     type PluginConstructor,
   } from '@photo-sphere-viewer/core';
   import '@photo-sphere-viewer/core/index.css';
-  import { EquirectangularTilesAdapter } from '@photo-sphere-viewer/equirectangular-tiles-adapter';
   import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
   import '@photo-sphere-viewer/markers-plugin/index.css';
   import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
@@ -27,39 +26,21 @@
     strokeLinejoin: 'round',
   };
 
-  const SHARED_VIEWER_CONFIG = {
-    touchmoveTwoFingers: false,
-    mousewheelCtrlKey: false,
-    navbar: false,
-    minFov: 15,
-    maxFov: 90,
-    zoomSpeed: 0.5,
-    fisheye: false,
-  };
-
-  type TileConfig = {
-    width: number;
-    cols: number;
-    rows: number;
-  };
-
   type Props = {
-    baseUrl: string | { source: string };
-    tileUrl?: (col: number, row: number, level: number) => string | null;
-    tileconfig?: TileConfig;
+    panorama: string | { source: string };
     originalPanorama?: string | { source: string };
     adapter?: AdapterConstructor | [AdapterConstructor, unknown];
     plugins?: (PluginConstructor | [PluginConstructor, unknown])[];
+    navbar?: boolean;
     zoomToggle?: (() => void) | null;
   };
 
   let {
-    baseUrl,
-    tileUrl,
-    tileconfig,
+    panorama,
     originalPanorama,
     adapter = EquirectangularAdapter,
     plugins = [],
+    navbar = false,
     zoomToggle = $bindable(),
   }: Props = $props();
 
@@ -135,32 +116,20 @@
       return;
     }
 
-    if (tileconfig) {
-      viewer = new Viewer({
-        adapter: EquirectangularTilesAdapter,
-        panorama: {
-          ...tileconfig,
-          baseUrl,
-          tileUrl,
-        },
-        plugins: [MarkersPlugin, ...plugins],
-        container,
-        ...SHARED_VIEWER_CONFIG,
-      });
-    } else {
-      viewer = new Viewer({
-        adapter,
-        panorama: baseUrl,
-        plugins: [
-          MarkersPlugin,
-          SettingsPlugin,
-          ResolutionPlugin.withConfig({
+    viewer = new Viewer({
+      adapter,
+      plugins: [
+        MarkersPlugin,
+        SettingsPlugin,
+        [
+          ResolutionPlugin,
+          {
             defaultResolution: $alwaysLoadOriginalFile && originalPanorama ? 'original' : 'default',
             resolutions: [
               {
                 id: 'default',
                 label: 'Default',
-                panorama: baseUrl,
+                panorama,
               },
               ...(originalPanorama
                 ? [
@@ -172,34 +141,39 @@
                   ]
                 : []),
             ],
-          }),
-          ...plugins,
+          },
         ],
-        container,
-        ...SHARED_VIEWER_CONFIG,
+        ...plugins,
+      ],
+      container,
+      touchmoveTwoFingers: false,
+      mousewheelCtrlKey: false,
+      navbar,
+      minFov: 15,
+      maxFov: 90,
+      zoomSpeed: 0.5,
+      fisheye: false,
+    });
+    const resolutionPlugin = viewer.getPlugin<ResolutionPlugin>(ResolutionPlugin);
+    const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
+      // zoomLevel range: [0, 100]
+      photoZoomState.set({
+        ...$photoZoomState,
+        currentZoom: zoomLevel / 50,
       });
 
-      const resolutionPlugin = viewer.getPlugin<ResolutionPlugin>(ResolutionPlugin);
-      const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
-        // zoomLevel range: [0, 100]
-        photoZoomState.set({
-          ...$photoZoomState,
-          currentZoom: zoomLevel / 50,
-        });
-
-        if (Math.round(zoomLevel) >= 75 && !hasChangedResolution) {
-          // Replace the preview with the original
-          void resolutionPlugin.setResolution('original');
-          hasChangedResolution = true;
-        }
-      };
-
-      if (originalPanorama && !$alwaysLoadOriginalFile) {
-        viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler, { passive: true });
+      if (Math.round(zoomLevel) >= 75 && !hasChangedResolution) {
+        // Replace the preview with the original
+        void resolutionPlugin.setResolution('original');
+        hasChangedResolution = true;
       }
+    };
 
-      return () => viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
+    if (originalPanorama && !$alwaysLoadOriginalFile) {
+      viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler, { passive: true });
     }
+
+    return () => viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
   });
 
   onDestroy(() => {

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

@@ -23,10 +23,11 @@
     <LoadingSpinner />
   {:then [PhotoSphereViewer, adapter, videoPlugin]}
     <PhotoSphereViewer
-      baseUrl={{ source: getAssetPlaybackUrl(assetId) }}
+      panorama={{ source: getAssetPlaybackUrl(assetId) }}
       originalPanorama={{ source: getAssetOriginalUrl(assetId) }}
       plugins={[videoPlugin]}
       {adapter}
+      navbar
     />
   {:catch}
     {$t('errors.failed_to_load_asset')}

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

@@ -308,18 +308,6 @@
       />
     </div>
 
-    <div class="absolute inset-y-0 {showClearIcon ? 'end-14' : 'end-2'} flex items-center ps-6 transition-all">
-      <IconButton
-        aria-label={$t('show_search_options')}
-        shape="round"
-        icon={mdiTune}
-        onclick={onFilterClick}
-        size="medium"
-        color="secondary"
-        variant="ghost"
-      />
-    </div>
-
     {#if searchStore.isSearchEnabled}
       <div
         id={searchTypeId}
@@ -327,7 +315,7 @@
         class:max-md:hidden={value}
         class:end-28={value.length > 0}
       >
-        <div class="relative">
+        <div class="relative" use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}>
           <Button
             class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs hover:opacity-80 transition-opacity cursor-pointer"
             onclick={toggleSearchTypeDropdown}
@@ -340,11 +328,11 @@
           {#if showSearchTypeDropdown}
             <div
               class="absolute top-full right-0 mt-1 bg-white dark:bg-immich-dark-gray border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-32 z-9999"
-              use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}
             >
               {#each searchTypes as searchType (searchType.value)}
                 <button
                   type="button"
+                  tabindex="0"
                   class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
                          {currentSearchType === searchType.value ? 'bg-gray-100 dark:bg-gray-700' : ''}"
                   onclick={() => selectSearchType(searchType.value)}
@@ -358,6 +346,18 @@
       </div>
     {/if}
 
+    <div class="absolute inset-y-0 {showClearIcon ? 'end-14' : 'end-2'} flex items-center ps-6 transition-all">
+      <IconButton
+        aria-label={$t('show_search_options')}
+        shape="round"
+        icon={mdiTune}
+        onclick={onFilterClick}
+        size="medium"
+        color="secondary"
+        variant="ghost"
+      />
+    </div>
+
     {#if showClearIcon}
       <div class="absolute inset-y-0 end-0 flex items-center pe-2">
         <IconButton

web/src/lib/modals/ApiKeySecretModal.svelte

@@ -15,7 +15,7 @@
 <Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="small">
   <ModalBody>
     <Text size="small" class="mb-4">{$t('api_key_description')}</Text>
-    <Textarea bind:value={secret} readonly />
+    <Textarea bind:value={secret} readonly class="font-mono" />
   </ModalBody>
 
   <ModalFooter>

web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts

@@ -71,6 +71,34 @@ describe('DateSelectionModal component', () => {
     expect(onClose).toHaveBeenCalled();
   });
 
+  test('does not fall back to UTC when datetime-local value has no seconds', async () => {
+    render(AssetSelectionChangeDateModal, {
+      props: { initialDate, initialTimeZone, assets: [], onClose },
+    });
+
+    await fireEvent.input(getDateInput(), { target: { value: '2024-01-01T00:00' } });
+    await fireEvent.blur(getDateInput());
+
+    expect(getTimeZoneInput().value).toBe('Europe/Berlin (+01:00)');
+
+    await fireEvent.focus(getTimeZoneInput());
+    expect(screen.queryByText('no_results')).not.toBeInTheDocument();
+  });
+
+  test('does not fall back to UTC when datetime-local value has no milliseconds', async () => {
+    render(AssetSelectionChangeDateModal, {
+      props: { initialDate, initialTimeZone, assets: [], onClose },
+    });
+
+    await fireEvent.input(getDateInput(), { target: { value: '2024-01-01T00:00:00' } });
+    await fireEvent.blur(getDateInput());
+
+    expect(getTimeZoneInput().value).toBe('Europe/Berlin (+01:00)');
+
+    await fireEvent.focus(getTimeZoneInput());
+    expect(screen.queryByText('no_results')).not.toBeInTheDocument();
+  });
+
   describe('when date is in daylight saving time', () => {
     const dstDate = DateTime.fromISO('2024-07-01');
 

web/src/lib/modals/LibraryCreateModal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { handleCreateLibrary } from '$lib/services/library.service';
+  import { user } from '$lib/stores/user.store';
+  import { searchUsersAdmin } from '@immich/sdk';
+  import { FormModal, Text } from '@immich/ui';
+  import { mdiFolderSync } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    onClose: () => void;
+  };
+
+  let { onClose }: Props = $props();
+
+  let ownerId: string = $state($user.id);
+
+  let userOptions: { value: string; text: string }[] = $state([]);
+
+  onMount(async () => {
+    const users = await searchUsersAdmin({});
+    userOptions = users.map((user) => ({ value: user.id, text: user.name }));
+  });
+
+  const onSubmit = async () => {
+    const success = await handleCreateLibrary({ ownerId });
+    if (success) {
+      onClose();
+    }
+  };
+</script>
+
+<FormModal
+  title={$t('create_library')}
+  icon={mdiFolderSync}
+  {onClose}
+  size="small"
+  {onSubmit}
+  submitText={$t('create')}
+>
+  <SettingSelect label={$t('owner')} bind:value={ownerId} options={userOptions} name="user" />
+  <Text color="warning" size="small">{$t('admin.note_cannot_be_changed_later')}</Text>
+</FormModal>

web/src/lib/modals/LibraryUserPickerModal.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import { user } from '$lib/stores/user.store';
-  import { searchUsersAdmin } from '@immich/sdk';
-  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiFolderSync } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    onClose: (ownerId?: string) => void;
-  }
-
-  let { onClose }: Props = $props();
-
-  let ownerId: string = $state($user.id);
-
-  let userOptions: { value: string; text: string }[] = $state([]);
-
-  onMount(async () => {
-    const users = await searchUsersAdmin({});
-    userOptions = users.map((user) => ({ value: user.id, text: user.name }));
-  });
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    onClose(ownerId);
-  };
-</script>
-
-<Modal title={$t('select_library_owner')} icon={mdiFolderSync} {onClose} size="small">
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="select-library-owner-form">
-      <p class="p-5 text-sm">{$t('admin.note_cannot_be_changed_later')}</p>
-
-      <SettingSelect bind:value={ownerId} options={userOptions} name="user" />
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
-    </HStack>
-  </ModalFooter>
-</Modal>

web/src/lib/modals/timezone-utils.ts

@@ -75,8 +75,15 @@ function zoneOptionForDate(zone: string, date: string) {
   // Ignore milliseconds:
   // - milliseconds are not relevant for TZ calculations
   // - browsers strip insignificant .000 making string comparison with milliseconds more fragile.
+  //
+  // Also, some browsers emit `datetime-local` values without seconds when seconds are 00,
+  // e.g. `2024-01-01T00:00` instead of `2024-01-01T00:00:00.000`.
+  // In that case we must compare with minute precision (otherwise every zone looks "invalid").
   const dateInTimezone = DateTime.fromISO(date, { zone });
-  const exists = date.replace(/\.\d+/, '') === dateInTimezone.toFormat("yyyy-MM-dd'T'HH:mm:ss");
+  const withoutMillis = date.replace(/\.\d+/, '');
+  const hasSeconds = /T\d{2}:\d{2}:\d{2}$/.test(withoutMillis);
+  const compareFormat = hasSeconds ? "yyyy-MM-dd'T'HH:mm:ss" : "yyyy-MM-dd'T'HH:mm";
+  const exists = withoutMillis === dateInTimezone.toFormat(compareFormat);
   const valid = dateInTimezone.isValid && exists;
   return {
     value: zone,

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

@@ -1,12 +1,12 @@
 import { goto } from '$app/navigation';
 import { AppRoute } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import LibraryCreateModal from '$lib/modals/LibraryCreateModal.svelte';
 import LibraryExclusionPatternAddModal from '$lib/modals/LibraryExclusionPatternAddModal.svelte';
 import LibraryExclusionPatternEditModal from '$lib/modals/LibraryExclusionPatternEditModal.svelte';
 import LibraryFolderAddModal from '$lib/modals/LibraryFolderAddModal.svelte';
 import LibraryFolderEditModal from '$lib/modals/LibraryFolderEditModal.svelte';
 import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
-import LibraryUserPickerModal from '$lib/modals/LibraryUserPickerModal.svelte';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -17,6 +17,7 @@ import {
   runQueueCommandLegacy,
   scanLibrary,
   updateLibrary,
+  type CreateLibraryDto,
   type LibraryResponseDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
@@ -37,7 +38,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
     title: $t('create_library'),
     type: $t('command'),
     icon: mdiPlusBoxOutline,
-    onAction: () => handleCreateLibrary(),
+    onAction: () => handleShowLibraryCreateModal(),
     shortcuts: { shift: true, key: 'n' },
   };
 
@@ -152,20 +153,17 @@ export const handleViewLibrary = async (library: LibraryResponseDto) => {
   await goto(`${AppRoute.ADMIN_LIBRARY_MANAGEMENT}/${library.id}`);
 };
 
-export const handleCreateLibrary = async () => {
+export const handleCreateLibrary = async (dto: CreateLibraryDto) => {
   const $t = await getFormatter();
 
-  const ownerId = await modalManager.show(LibraryUserPickerModal, {});
-  if (!ownerId) {
-    return;
-  }
-
   try {
-    const createdLibrary = await createLibrary({ createLibraryDto: { ownerId } });
-    eventManager.emit('LibraryCreate', createdLibrary);
-    toastManager.success($t('admin.library_created', { values: { library: createdLibrary.name } }));
+    const library = await createLibrary({ createLibraryDto: dto });
+    eventManager.emit('LibraryCreate', library);
+    toastManager.success($t('admin.library_created', { values: { library: library.name } }));
+    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_create_library'));
+    return false;
   }
 };
 
@@ -359,3 +357,7 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
     handleError(error, $t('errors.unable_to_update_library'));
   }
 };
+
+export const handleShowLibraryCreateModal = async () => {
+  await modalManager.show(LibraryCreateModal, {});
+};

web/src/lib/utils.ts

@@ -11,7 +11,6 @@ import {
   getAssetOriginalPath,
   getAssetPlaybackPath,
   getAssetThumbnailPath,
-  getAssetTilePath,
   getBaseUrl,
   getPeopleThumbnailPath,
   getUserProfileImagePath,
@@ -216,13 +215,6 @@ export const getAssetPlaybackUrl = (options: string | AssetUrlOptions) => {
   return createUrl(getAssetPlaybackPath(id), { ...authManager.params, c: cacheKey });
 };
 
-type TileUrlOptions = { id: string, level: number, col: number, row: number, cacheKey?: string | null };
-
-export const getAssetTileUrl = (options: TileUrlOptions) => {
-  const { id, level, col, row, cacheKey } = options;
-  return createUrl(getAssetTilePath(id, level, col, row), { ...authManager.params, c: cacheKey });
-}
-
 export const getProfileImageUrl = (user: UserResponseDto) =>
   createUrl(getUserProfileImagePath(user.id), { updatedAt: user.profileChangedAt });
 

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

@@ -4,18 +4,18 @@
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { AppRoute } from '$lib/constants';
-  import { getLibrariesActions, handleCreateLibrary, handleViewLibrary } from '$lib/services/library.service';
+  import { getLibrariesActions, handleShowLibraryCreateModal, handleViewLibrary } from '$lib/services/library.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import { getLibrary, getLibraryStatistics, getUserAdmin, type LibraryResponseDto } from '@immich/sdk';
+  import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
   import { Button, CommandPaletteContext } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import type { PageData } from './$types';
 
-  interface Props {
+  type Props = {
     data: PageData;
-  }
+  };
 
   let { data }: Props = $props();
 
@@ -23,15 +23,11 @@
   let statistics = $state(data.statistics);
   let owners = $state(data.owners);
 
-  const handleLibraryAdd = async (library: LibraryResponseDto) => {
-    statistics[library.id] = await getLibraryStatistics({ id: library.id });
-    owners[library.id] = await getUserAdmin({ id: library.ownerId });
-    libraries.push(library);
-
+  const onLibraryCreate = async (library: LibraryResponseDto) => {
     await goto(`${AppRoute.ADMIN_LIBRARY_MANAGEMENT}/${library.id}`);
   };
 
-  const handleLibraryUpdate = async (library: LibraryResponseDto) => {
+  const onLibraryUpdate = async (library: LibraryResponseDto) => {
     const index = libraries.findIndex(({ id }) => id === library.id);
 
     if (index === -1) {
@@ -42,7 +38,7 @@
     statistics[library.id] = await getLibraryStatistics({ id: library.id });
   };
 
-  const handleDeleteLibrary = ({ id }: { id: string }) => {
+  const onLibraryDelete = ({ id }: { id: string }) => {
     libraries = libraries.filter((library) => library.id !== id);
     delete statistics[id];
     delete owners[id];
@@ -51,11 +47,7 @@
   const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries));
 </script>
 
-<OnEvents
-  onLibraryCreate={handleLibraryAdd}
-  onLibraryUpdate={handleLibraryUpdate}
-  onLibraryDelete={handleDeleteLibrary}
-/>
+<OnEvents {onLibraryCreate} {onLibraryUpdate} {onLibraryDelete} />
 
 <CommandPaletteContext commands={[Create, ScanAll]} />
 
@@ -106,7 +98,11 @@
           </tbody>
         </table>
       {:else}
-        <EmptyPlaceholder text={$t('no_libraries_message')} onClick={handleCreateLibrary} class="mt-10 mx-auto" />
+        <EmptyPlaceholder
+          text={$t('no_libraries_message')}
+          onClick={handleShowLibraryCreateModal}
+          class="mt-10 mx-auto"
+        />
       {/if}
     </div>
   </section>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
-  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
+  import AdminCard from '$lib/components/AdminCard.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -15,18 +15,7 @@
     getLibraryFolderActions,
   } from '$lib/services/library.service';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import {
-    Card,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    Code,
-    CommandPaletteContext,
-    Container,
-    Heading,
-    Icon,
-    modalManager,
-  } from '@immich/ui';
+  import { Code, CommandPaletteContext, Container, Heading, modalManager } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -64,77 +53,53 @@
         <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics.videos} />
         <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
       </div>
-      <Card color="secondary">
-        <CardHeader>
-          <div class="flex w-full justify-between items-center px-4 py-2">
-            <div class="flex gap-2 text-primary">
-              <Icon icon={mdiFolderOutline} size="1.5rem" />
-              <CardTitle>{$t('folders')}</CardTitle>
-            </div>
-            <HeaderActionButton action={AddFolder} />
-          </div>
-        </CardHeader>
-        <CardBody>
-          <div class="px-4 pb-7">
-            {#if library.importPaths.length === 0}
-              <EmptyPlaceholder
-                src={emptyFoldersUrl}
-                text={$t('admin.library_folder_description')}
-                fullWidth
-                onClick={() => modalManager.show(LibraryFolderAddModal, { library })}
-              />
-            {:else}
-              <table class="w-full">
-                <tbody>
-                  {#each library.importPaths as folder (folder)}
-                    {@const { Edit, Delete } = getLibraryFolderActions($t, library, folder)}
-                    <tr class="h-12">
-                      <td>
-                        <Code>{folder}</Code>
-                      </td>
-                      <td class="flex gap-2 justify-end">
-                        <TableButton action={Edit} />
-                        <TableButton action={Delete} />
-                      </td>
-                    </tr>
-                  {/each}
-                </tbody>
-              </table>
-            {/if}
-          </div>
-        </CardBody>
-      </Card>
-      <Card color="secondary">
-        <CardHeader>
-          <div class="flex w-full justify-between items-center px-4 py-2">
-            <div class="flex gap-2 text-primary">
-              <Icon icon={mdiFilterMinusOutline} size="1.5rem" />
-              <CardTitle>{$t('exclusion_pattern')}</CardTitle>
-            </div>
-            <HeaderActionButton action={AddExclusionPattern} />
-          </div>
-        </CardHeader>
-        <CardBody>
-          <div class="px-4 pb-7">
-            <table class="w-full">
-              <tbody>
-                {#each library.exclusionPatterns as exclusionPattern (exclusionPattern)}
-                  {@const { Edit, Delete } = getLibraryExclusionPatternActions($t, library, exclusionPattern)}
-                  <tr class="h-12">
-                    <td>
-                      <Code>{exclusionPattern}</Code>
-                    </td>
-                    <td class="flex gap-2 justify-end">
-                      <TableButton action={Edit} />
-                      <TableButton action={Delete} />
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          </div>
-        </CardBody>
-      </Card>
+
+      <AdminCard icon={mdiFolderOutline} title={$t('folders')} headerAction={AddFolder}>
+        {#if library.importPaths.length === 0}
+          <EmptyPlaceholder
+            src={emptyFoldersUrl}
+            text={$t('admin.library_folder_description')}
+            fullWidth
+            onClick={() => modalManager.show(LibraryFolderAddModal, { library })}
+          />
+        {:else}
+          <table class="w-full">
+            <tbody>
+              {#each library.importPaths as folder (folder)}
+                {@const { Edit, Delete } = getLibraryFolderActions($t, library, folder)}
+                <tr class="h-12">
+                  <td>
+                    <Code>{folder}</Code>
+                  </td>
+                  <td class="flex gap-2 justify-end">
+                    <TableButton action={Edit} />
+                    <TableButton action={Delete} />
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        {/if}
+      </AdminCard>
+
+      <AdminCard icon={mdiFilterMinusOutline} title={$t('exclusion_pattern')} headerAction={AddExclusionPattern}>
+        <table class="w-full">
+          <tbody>
+            {#each library.exclusionPatterns as exclusionPattern (exclusionPattern)}
+              {@const { Edit, Delete } = getLibraryExclusionPatternActions($t, library, exclusionPattern)}
+              <tr class="h-12">
+                <td>
+                  <Code>{exclusionPattern}</Code>
+                </td>
+                <td class="flex gap-2 justify-end">
+                  <TableButton action={Edit} />
+                  <TableButton action={Delete} />
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </AdminCard>
     </div>
   </Container>
 </AdminPageLayout>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import AdminCard from '$lib/components/AdminCard.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -15,10 +16,6 @@
   import {
     Alert,
     Badge,
-    Card,
-    CardBody,
-    CardHeader,
-    CardTitle,
     Code,
     CommandPaletteContext,
     Container,
@@ -131,128 +128,90 @@
             <ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
           </div>
         </div>
-        <div>
-          <Card color="secondary">
-            <CardHeader>
-              <div class="flex items-center gap-2 px-4 py-2 text-primary">
-                <Icon icon={mdiAccountOutline} size="1.5rem" />
-                <CardTitle>{$t('profile')}</CardTitle>
-              </div>
-            </CardHeader>
-            <CardBody>
-              <div class="px-4 pb-7">
-                <Stack gap={2}>
-                  <div>
-                    <Heading tag="h3" size="tiny">{$t('name')}</Heading>
-                    <Text>{user.name}</Text>
-                  </div>
-                  <div>
-                    <Heading tag="h3" size="tiny">{$t('email')}</Heading>
-                    <Text>{user.email}</Text>
-                  </div>
-                  <div>
-                    <Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
-                    <Text>{userCreatedAtDateAndTime}</Text>
-                  </div>
-                  <div>
-                    <Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
-                    <Text>{userUpdatedAtDateAndTime}</Text>
-                  </div>
-                  <div>
-                    <Heading tag="h3" size="tiny">{$t('id')}</Heading>
-                    <Code>{user.id}</Code>
-                  </div>
-                </Stack>
-              </div>
-            </CardBody>
-          </Card>
-        </div>
-        <Card color="secondary">
-          <CardHeader>
-            <div class="flex items-center gap-2 px-4 py-2 text-primary">
-              <Icon icon={mdiFeatureSearchOutline} size="1.5rem" />
-              <CardTitle>{$t('features')}</CardTitle>
-            </div>
-          </CardHeader>
-          <CardBody>
-            <div class="px-4 pb-4">
-              <Stack gap={3}>
-                <FeatureSetting title={$t('email_notifications')} state={userPreferences.emailNotifications.enabled} />
-                <FeatureSetting title={$t('folders')} state={userPreferences.folders.enabled} />
-                <FeatureSetting title={$t('memories')} state={userPreferences.memories.enabled} />
-                <FeatureSetting title={$t('people')} state={userPreferences.people.enabled} />
-                <FeatureSetting title={$t('rating')} state={userPreferences.ratings.enabled} />
-                <FeatureSetting title={$t('shared_links')} state={userPreferences.sharedLinks.enabled} />
-                <FeatureSetting title={$t('show_supporter_badge')} state={userPreferences.purchase.showSupportBadge} />
-                <FeatureSetting title={$t('tags')} state={userPreferences.tags.enabled} />
-                <FeatureSetting title={$t('gcast_enabled')} state={userPreferences.cast.gCastEnabled} />
-              </Stack>
-            </div>
-          </CardBody>
-        </Card>
-        <Card color="secondary">
-          <CardHeader>
-            <div class="flex items-center gap-2 px-4 py-2 text-primary">
-              <Icon icon={mdiChartPieOutline} size="1.5rem" />
-              <CardTitle>{$t('storage_quota')}</CardTitle>
-            </div>
-          </CardHeader>
-          <CardBody>
-            <div class="px-4 pb-4">
-              {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
-                <Text>
-                  {$t('storage_usage', {
-                    values: {
-                      used: getByteUnitString(usedBytes, $locale, 3),
-                      available: getByteUnitString(availableBytes, $locale, 3),
-                    },
-                  })}
-                </Text>
-              {:else}
-                <Text class="flex items-center gap-1">
-                  <Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
-                  {$t('unlimited')}
-                </Text>
-              {/if}
-            </div>
 
-            {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
-              <div
-                class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
-                title={$t('storage_usage', {
-                  values: {
-                    used: getByteUnitString(usedBytes, $locale, 3),
-                    available: getByteUnitString(availableBytes, $locale, 3),
-                  },
-                })}
-              >
-                <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
-                <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-                  <div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
-                </div>
+        <AdminCard icon={mdiAccountOutline} title={$t('profile')}>
+          <Stack gap={2}>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('name')}</Heading>
+              <Text>{user.name}</Text>
+            </div>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('email')}</Heading>
+              <Text>{user.email}</Text>
+            </div>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
+              <Text>{userCreatedAtDateAndTime}</Text>
+            </div>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
+              <Text>{userUpdatedAtDateAndTime}</Text>
+            </div>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('id')}</Heading>
+              <Code>{user.id}</Code>
+            </div>
+          </Stack>
+        </AdminCard>
+
+        <AdminCard icon={mdiFeatureSearchOutline} title={$t('features')}>
+          <Stack gap={3}>
+            <FeatureSetting title={$t('email_notifications')} state={userPreferences.emailNotifications.enabled} />
+            <FeatureSetting title={$t('folders')} state={userPreferences.folders.enabled} />
+            <FeatureSetting title={$t('memories')} state={userPreferences.memories.enabled} />
+            <FeatureSetting title={$t('people')} state={userPreferences.people.enabled} />
+            <FeatureSetting title={$t('rating')} state={userPreferences.ratings.enabled} />
+            <FeatureSetting title={$t('shared_links')} state={userPreferences.sharedLinks.enabled} />
+            <FeatureSetting title={$t('show_supporter_badge')} state={userPreferences.purchase.showSupportBadge} />
+            <FeatureSetting title={$t('tags')} state={userPreferences.tags.enabled} />
+            <FeatureSetting title={$t('gcast_enabled')} state={userPreferences.cast.gCastEnabled} />
+          </Stack>
+        </AdminCard>
+
+        <AdminCard icon={mdiChartPieOutline} title={$t('storage_quota')}>
+          {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+            <Text>
+              {$t('storage_usage', {
+                values: {
+                  used: getByteUnitString(usedBytes, $locale, 3),
+                  available: getByteUnitString(availableBytes, $locale, 3),
+                },
+              })}
+            </Text>
+          {:else}
+            <Text class="flex items-center gap-1">
+              <Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
+              {$t('unlimited')}
+            </Text>
+          {/if}
+
+          {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+            <div
+              class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
+              title={$t('storage_usage', {
+                values: {
+                  used: getByteUnitString(usedBytes, $locale, 3),
+                  available: getByteUnitString(availableBytes, $locale, 3),
+                },
+              })}
+            >
+              <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
+              <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                <div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
               </div>
-            {/if}
-          </CardBody>
-        </Card>
-        <Card color="secondary">
-          <CardHeader>
-            <div class="flex items-center gap-2 px-4 py-2 text-primary">
-              <Icon icon={mdiDevices} size="1.5rem" />
-              <CardTitle>{$t('authorized_devices')}</CardTitle>
             </div>
-          </CardHeader>
-          <CardBody>
-            <div class="px-4 pb-7">
-              <Stack gap={3}>
-                {#each userSessions as session (session.id)}
-                  <DeviceCard {session} />
-                {:else}
-                  <span class="text-dark">{$t('no_devices')}</span>
-                {/each}
-              </Stack>
-            </div>
-          </CardBody>
-        </Card>
+          {/if}
+        </AdminCard>
+
+        <AdminCard icon={mdiDevices} title={$t('authorized_devices')}>
+          <Stack gap={3}>
+            {#each userSessions as session (session.id)}
+              <DeviceCard {session} />
+            {:else}
+              <span class="text-dark">{$t('no_devices')}</span>
+            {/each}
+          </Stack>
+        </AdminCard>
       </div>
     </Container>
   </div>