feat(server,web): system config for admin (#959)

* feat: add admin config module for user configured config, uses it for ffmpeg

* feat: add api endpoint to retrieve admin config settings and values

* feat: add settings panel to admin page on web (wip)

* feat: add api endpoint to update the admin config

* chore: re-generate openapi spec after rebase

* refactor: move from admin config to system config naming

* chore: move away from UseGuards to new @Authenticated decorator

* style: dark mode styling for lists and fix conflicting colors

* wip: 2 column design, no edit button

* refactor: system config

* chore: generate open api

* chore: rm broken test

* chore: cleanup types

* refactor: config module names

Co-authored-by: Zack Pollard <zackpollard@ymail.com>
Co-authored-by: Zack Pollard <zack.pollard@moonpig.com>

mobile/openapi/.openapi-generator/FILES

@@ -59,6 +59,10 @@ doc/ServerStatsResponseDto.md
 doc/ServerVersionReponseDto.md
 doc/SignUpDto.md
 doc/SmartInfoResponseDto.md
+doc/SystemConfigApi.md
+doc/SystemConfigKey.md
+doc/SystemConfigResponseDto.md
+doc/SystemConfigResponseItem.md
 doc/ThumbnailFormat.md
 doc/TimeGroupEnum.md
 doc/UpdateAlbumDto.md
@@ -79,6 +83,7 @@ lib/api/device_info_api.dart
 lib/api/job_api.dart
 lib/api/o_auth_api.dart
 lib/api/server_info_api.dart
+lib/api/system_config_api.dart
 lib/api/user_api.dart
 lib/api_client.dart
 lib/api_exception.dart
@@ -138,6 +143,9 @@ lib/model/server_stats_response_dto.dart
 lib/model/server_version_reponse_dto.dart
 lib/model/sign_up_dto.dart
 lib/model/smart_info_response_dto.dart
+lib/model/system_config_key.dart
+lib/model/system_config_response_dto.dart
+lib/model/system_config_response_item.dart
 lib/model/thumbnail_format.dart
 lib/model/time_group_enum.dart
 lib/model/update_album_dto.dart

server/README.md

@@ -1 +1,6 @@
-# Immich Server- NestJs
+## How to run migration
+
+1. Attached to the container shell
+2. Run `npm run typeorm -- migration:generate ./libs/database/src/<migration-name> -d libs/database/src/config/database.config.ts`
+3. Check if the migration file makes sense
+4. Move the migration file to folder `server/libs/database/src/migrations` in your code editor.

server/apps/immich/src/api-v1/system-config/dto/update-system-config.ts

@@ -0,0 +1,20 @@
+import { SystemConfigKey, SystemConfigValue } from '@app/database/entities/system-config.entity';
+import { ApiProperty } from '@nestjs/swagger';
+import { IsEnum, IsNotEmpty, ValidateNested } from 'class-validator';
+
+export class UpdateSystemConfigDto {
+  @IsNotEmpty()
+  @ValidateNested({ each: true })
+  config!: SystemConfigItem[];
+}
+
+export class SystemConfigItem {
+  @IsNotEmpty()
+  @IsEnum(SystemConfigKey)
+  @ApiProperty({
+    enum: SystemConfigKey,
+    enumName: 'SystemConfigKey',
+  })
+  key!: SystemConfigKey;
+  value!: SystemConfigValue;
+}

server/apps/immich/src/api-v1/system-config/response-dto/system-config-response.dto.ts

@@ -0,0 +1,20 @@
+import { SystemConfigKey, SystemConfigValue } from '@app/database/entities/system-config.entity';
+import { ApiProperty } from '@nestjs/swagger';
+
+export class SystemConfigResponseDto {
+  config!: SystemConfigResponseItem[];
+}
+
+export class SystemConfigResponseItem {
+  @ApiProperty({ type: 'string' })
+  name!: string;
+
+  @ApiProperty({ enumName: 'SystemConfigKey', enum: SystemConfigKey })
+  key!: SystemConfigKey;
+
+  @ApiProperty({ type: 'string' })
+  value!: SystemConfigValue;
+
+  @ApiProperty({ type: 'string' })
+  defaultValue!: SystemConfigValue;
+}

server/apps/immich/src/api-v1/system-config/system-config.controller.ts

@@ -0,0 +1,24 @@
+import { Body, Controller, Get, Put, ValidationPipe } from '@nestjs/common';
+import { ApiBearerAuth, ApiTags } from '@nestjs/swagger';
+import { Authenticated } from '../../decorators/authenticated.decorator';
+import { UpdateSystemConfigDto } from './dto/update-system-config';
+import { SystemConfigResponseDto } from './response-dto/system-config-response.dto';
+import { SystemConfigService } from './system-config.service';
+
+@ApiTags('System Config')
+@ApiBearerAuth()
+@Authenticated({ admin: true })
+@Controller('system-config')
+export class SystemConfigController {
+  constructor(private readonly systemConfigService: SystemConfigService) {}
+
+  @Get()
+  getConfig(): Promise<SystemConfigResponseDto> {
+    return this.systemConfigService.getConfig();
+  }
+
+  @Put()
+  async updateConfig(@Body(ValidationPipe) dto: UpdateSystemConfigDto): Promise<SystemConfigResponseDto> {
+    return this.systemConfigService.updateConfig(dto);
+  }
+}

server/apps/immich/src/api-v1/system-config/system-config.module.ts

@@ -0,0 +1,14 @@
+import { SystemConfigEntity } from '@app/database/entities/system-config.entity';
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { ImmichConfigModule } from 'libs/immich-config/src';
+import { ImmichJwtModule } from '../../modules/immich-jwt/immich-jwt.module';
+import { SystemConfigController } from './system-config.controller';
+import { SystemConfigService } from './system-config.service';
+
+@Module({
+  imports: [ImmichJwtModule, ImmichConfigModule, TypeOrmModule.forFeature([SystemConfigEntity])],
+  controllers: [SystemConfigController],
+  providers: [SystemConfigService],
+})
+export class SystemConfigModule {}

server/apps/immich/src/api-v1/system-config/system-config.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@nestjs/common';
+import { ImmichConfigService } from 'libs/immich-config/src';
+import { UpdateSystemConfigDto } from './dto/update-system-config';
+import { SystemConfigResponseDto } from './response-dto/system-config-response.dto';
+
+@Injectable()
+export class SystemConfigService {
+  constructor(private immichConfigService: ImmichConfigService) {}
+
+  async getConfig(): Promise<SystemConfigResponseDto> {
+    const config = await this.immichConfigService.getSystemConfig();
+    return { config };
+  }
+
+  async updateConfig(dto: UpdateSystemConfigDto): Promise<SystemConfigResponseDto> {
+    await this.immichConfigService.updateSystemConfig(dto.config);
+    const config = await this.immichConfigService.getSystemConfig();
+    return { config };
+  }
+}

server/apps/immich/src/app.module.ts

@@ -16,6 +16,7 @@ import { ScheduleModule } from '@nestjs/schedule';
 import { ScheduleTasksModule } from './modules/schedule-tasks/schedule-tasks.module';
 import { DatabaseModule } from '@app/database';
 import { JobModule } from './api-v1/job/job.module';
+import { SystemConfigModule } from './api-v1/system-config/system-config.module';
 import { OAuthModule } from './api-v1/oauth/oauth.module';
 
 @Module({
@@ -60,6 +61,8 @@ import { OAuthModule } from './api-v1/oauth/oauth.module';
     ScheduleTasksModule,
 
     JobModule,
+
+    SystemConfigModule,
   ],
   controllers: [AppController],
   providers: [],

server/apps/microservices/src/microservices.module.ts

@@ -7,8 +7,9 @@ import { UserEntity } from '@app/database/entities/user.entity';
 import { QueueNameEnum } from '@app/job/constants/queue-name.constant';
 import { BullModule } from '@nestjs/bull';
 import { Module } from '@nestjs/common';
-import { ConfigModule, ConfigService } from '@nestjs/config';
+import { ConfigModule } from '@nestjs/config';
 import { TypeOrmModule } from '@nestjs/typeorm';
+import { ImmichConfigModule } from 'libs/immich-config/src';
 import { CommunicationModule } from '../../immich/src/api-v1/communication/communication.module';
 import { MicroservicesService } from './microservices.service';
 import { AssetUploadedProcessor } from './processors/asset-uploaded.processor';
@@ -22,6 +23,7 @@ import { VideoTranscodeProcessor } from './processors/video-transcode.processor'
   imports: [
     ConfigModule.forRoot(immichAppConfig),
     DatabaseModule,
+    ImmichConfigModule,
     TypeOrmModule.forFeature([UserEntity, ExifEntity, AssetEntity, SmartInfoEntity]),
     BullModule.forRootAsync({
       useFactory: async () => ({
@@ -96,7 +98,6 @@ import { VideoTranscodeProcessor } from './processors/video-transcode.processor'
     VideoTranscodeProcessor,
     GenerateChecksumProcessor,
     MachineLearningProcessor,
-    ConfigService,
   ],
   exports: [],
 })

server/apps/microservices/src/processors/video-transcode.processor.ts

@@ -9,6 +9,7 @@ import { InjectRepository } from '@nestjs/typeorm';
 import { Job } from 'bull';
 import ffmpeg from 'fluent-ffmpeg';
 import { existsSync, mkdirSync } from 'fs';
+import { ImmichConfigService } from 'libs/immich-config/src';
 import { Repository } from 'typeorm';
 
 @Processor(QueueNameEnum.VIDEO_CONVERSION)
@@ -16,6 +17,7 @@ export class VideoTranscodeProcessor {
   constructor(
     @InjectRepository(AssetEntity)
     private assetRepository: Repository<AssetEntity>,
+    private immichConfigService: ImmichConfigService,
   ) {}
 
   @Process({ name: mp4ConversionProcessorName, concurrency: 1 })
@@ -40,9 +42,17 @@ export class VideoTranscodeProcessor {
   }
 
   async runFFMPEGPipeLine(asset: AssetEntity, savedEncodedPath: string): Promise<void> {
+    const config = await this.immichConfigService.getSystemConfigMap();
+
     return new Promise((resolve, reject) => {
       ffmpeg(asset.originalPath)
-        .outputOptions(['-crf 23', '-preset ultrafast', '-vcodec libx264', '-acodec mp3', '-vf scale=1280:-2'])
+        .outputOptions([
+          `-crf ${config.ffmpeg_crf}`,
+          `-preset ${config.ffmpeg_preset}`,
+          `-vcodec ${config.ffmpeg_target_video_codec}`,
+          `-acodec ${config.ffmpeg_target_audio_codec}`,
+          `-vf scale=${config.ffmpeg_target_scaling}`,
+        ])
         .output(savedEncodedPath)
         .on('start', () => {
           Logger.log('Start Converting Video', 'mp4Conversion');

server/libs/database/src/entities/system-config.entity.ts

@@ -0,0 +1,27 @@
+import { Column, Entity, PrimaryColumn } from 'typeorm';
+
+@Entity('system_config')
+export class SystemConfigEntity {
+  @PrimaryColumn()
+  key!: SystemConfigKey;
+
+  @Column({ type: 'varchar', nullable: true })
+  value!: SystemConfigValue;
+}
+
+export type SystemConfig = SystemConfigEntity[];
+
+export enum SystemConfigKey {
+  FFMPEG_CRF = 'ffmpeg_crf',
+  FFMPEG_PRESET = 'ffmpeg_preset',
+  FFMPEG_TARGET_VIDEO_CODEC = 'ffmpeg_target_video_codec',
+  FFMPEG_TARGET_AUDIO_CODEC = 'ffmpeg_target_audio_codec',
+  FFMPEG_TARGET_SCALING = 'ffmpeg_target_scaling',
+}
+
+export type SystemConfigValue = string | null;
+
+export interface SystemConfigItem {
+  key: SystemConfigKey;
+  value: SystemConfigValue;
+}

server/libs/database/src/migrations/1665540663419-CreateSystemConfigTable.ts

@@ -0,0 +1,15 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class CreateSystemConfigTable1665540663419 implements MigrationInterface {
+  name = 'CreateSystemConfigTable1665540663419';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "system_config" ("key" character varying NOT NULL, "value" character varying, CONSTRAINT "PK_aab69295b445016f56731f4d535" PRIMARY KEY ("key"))`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE "system_config"`);
+  }
+}

server/libs/immich-config/src/immich-config.module.ts

@@ -0,0 +1,11 @@
+import { SystemConfigEntity } from '@app/database/entities/system-config.entity';
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { ImmichConfigService } from './immich-config.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([SystemConfigEntity])],
+  providers: [ImmichConfigService],
+  exports: [ImmichConfigService],
+})
+export class ImmichConfigModule {}

server/libs/immich-config/src/immich-config.service.ts

@@ -0,0 +1,97 @@
+import { SystemConfigEntity, SystemConfigKey, SystemConfigValue } from '@app/database/entities/system-config.entity';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { In, Repository } from 'typeorm';
+
+type SystemConfigMap = Record<SystemConfigKey, SystemConfigValue>;
+
+const configDefaults: Record<SystemConfigKey, { name: string; value: SystemConfigValue }> = {
+  [SystemConfigKey.FFMPEG_CRF]: {
+    name: 'FFmpeg Constant Rate Factor (-crf)',
+    value: '23',
+  },
+  [SystemConfigKey.FFMPEG_PRESET]: {
+    name: 'FFmpeg preset (-preset)',
+    value: 'ultrafast',
+  },
+  [SystemConfigKey.FFMPEG_TARGET_VIDEO_CODEC]: {
+    name: 'FFmpeg target video codec (-vcodec)',
+    value: 'libx264',
+  },
+  [SystemConfigKey.FFMPEG_TARGET_AUDIO_CODEC]: {
+    name: 'FFmpeg target audio codec (-acodec)',
+    value: 'mp3',
+  },
+  [SystemConfigKey.FFMPEG_TARGET_SCALING]: {
+    name: 'FFmpeg target scaling (-vf scale=)',
+    value: '1280:-2',
+  },
+};
+
+@Injectable()
+export class ImmichConfigService {
+  constructor(
+    @InjectRepository(SystemConfigEntity)
+    private systemConfigRepository: Repository<SystemConfigEntity>,
+  ) {}
+
+  public async getSystemConfig() {
+    const items = this._getDefaults();
+
+    // override default values
+    const overrides = await this.systemConfigRepository.find();
+    for (const override of overrides) {
+      const item = items.find((_item) => _item.key === override.key);
+      if (item) {
+        item.value = override.value;
+      }
+    }
+
+    return items;
+  }
+
+  public async getSystemConfigMap(): Promise<SystemConfigMap> {
+    const items = await this.getSystemConfig();
+    const map: Partial<SystemConfigMap> = {};
+
+    for (const { key, value } of items) {
+      map[key] = value;
+    }
+
+    return map as SystemConfigMap;
+  }
+
+  public async updateSystemConfig(items: SystemConfigEntity[]): Promise<void> {
+    const deletes: SystemConfigEntity[] = [];
+    const updates: SystemConfigEntity[] = [];
+
+    for (const item of items) {
+      if (item.value === null || item.value === this._getDefaultValue(item.key)) {
+        deletes.push(item);
+        continue;
+      }
+
+      updates.push(item);
+    }
+
+    if (updates.length > 0) {
+      await this.systemConfigRepository.save(updates);
+    }
+
+    if (deletes.length > 0) {
+      await this.systemConfigRepository.delete({ key: In(deletes.map((item) => item.key)) });
+    }
+  }
+
+  private _getDefaults() {
+    return Object.values(SystemConfigKey).map((key) => ({
+      key,
+      defaultValue: configDefaults[key].value,
+      ...configDefaults[key],
+    }));
+  }
+
+  private _getDefaultValue(key: SystemConfigKey) {
+    return this._getDefaults().find((item) => item.key === key)?.value || null;
+  }
+}

server/libs/immich-config/src/index.ts

@@ -0,0 +1,2 @@
+export * from './immich-config.module';
+export * from './immich-config.service';

server/libs/immich-config/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "../../dist/libs/immich-config"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "test", "**/*spec.ts"]
+}

server/nest-cli.json

@@ -70,6 +70,15 @@
       "compilerOptions": {
         "tsConfigPath": "libs/job/tsconfig.lib.json"
       }
+    },
+    "system-config": {
+      "type": "library",
+      "root": "libs/system-config",
+      "entryFile": "index",
+      "sourceRoot": "libs/system-config/src",
+      "compilerOptions": {
+        "tsConfigPath": "libs/system-config/tsconfig.lib.json"
+      }
     }
   }
-}
+}

server/package.json

@@ -13,6 +13,7 @@
     "build": "nest build immich && nest build microservices && nest build cli",
     "format": "prettier --write \"apps/**/*.ts\" \"libs/**/*.ts\"",
     "start": "nest start",
+    "nest": "nest",
     "start:dev": "nest start --watch",
     "start:debug": "nest start --debug 0.0.0.0:9230 --watch",
     "start:prod": "node dist/main",
@@ -139,7 +140,8 @@
       "@app/database/config/(.*)": "<rootDir>/libs/database/src/config/$1",
       "@app/database/config": "<rootDir>/libs/database/src/config",
       "@app/common": "<rootDir>/libs/common/src",
-      "^@app/job(|/.*)$": "<rootDir>/libs/job/src/$1"
+      "^@app/job(|/.*)$": "<rootDir>/libs/job/src/$1",
+      "^@app/system-config(|/.*)$": "<rootDir>/libs/system-config/src/$1"
     }
   }
-}
+}

server/tsconfig.json

@@ -16,29 +16,15 @@
     "esModuleInterop": true,
     "baseUrl": "./",
     "paths": {
-      "@app/common": [
-        "libs/common/src"
-      ],
-      "@app/common/*": [
-        "libs/common/src/*"
-      ],
-      "@app/database": [
-        "libs/database/src"
-      ],
-      "@app/database/*": [
-        "libs/database/src/*"
-      ],
-      "@app/job": [
-        "libs/job/src"
-      ],
-      "@app/job/*": [
-        "libs/job/src/*"
-      ]
+      "@app/common": ["libs/common/src"],
+      "@app/common/*": ["libs/common/src/*"],
+      "@app/database": ["libs/database/src"],
+      "@app/database/*": ["libs/database/src/*"],
+      "@app/job": ["libs/job/src"],
+      "@app/job/*": ["libs/job/src/*"],
+      "@app/system-config": ["libs/immich-config/src"],
+      "@app/system-config/*": ["libs/immich-config/src/*"]
     }
   },
-  "exclude": [
-    "dist",
-    "node_modules",
-    "upload"
-  ]
-}
+  "exclude": ["dist", "node_modules", "upload"]
+}

web/src/api/api.ts

@@ -8,6 +8,7 @@ import {
 	JobApi,
 	OAuthApi,
 	ServerInfoApi,
+	SystemConfigApi,
 	UserApi
 } from './open-api';
 
@@ -20,6 +21,7 @@ class ImmichApi {
 	public deviceInfoApi: DeviceInfoApi;
 	public serverInfoApi: ServerInfoApi;
 	public jobApi: JobApi;
+	public systemConfigApi: SystemConfigApi;
 
 	private config = new Configuration({ basePath: '/api' });
 
@@ -32,6 +34,7 @@ class ImmichApi {
 		this.deviceInfoApi = new DeviceInfoApi(this.config);
 		this.serverInfoApi = new ServerInfoApi(this.config);
 		this.jobApi = new JobApi(this.config);
+		this.systemConfigApi = new SystemConfigApi(this.config);
 	}
 
 	public setAccessToken(accessToken: string) {

web/src/api/open-api/api.ts

@@ -1407,6 +1407,67 @@ export interface SmartInfoResponseDto {
  * @enum {string}
  */
 
+export const SystemConfigKey = {
+    Crf: 'ffmpeg_crf',
+    Preset: 'ffmpeg_preset',
+    TargetVideoCodec: 'ffmpeg_target_video_codec',
+    TargetAudioCodec: 'ffmpeg_target_audio_codec',
+    TargetScaling: 'ffmpeg_target_scaling'
+} as const;
+
+export type SystemConfigKey = typeof SystemConfigKey[keyof typeof SystemConfigKey];
+
+
+/**
+ * 
+ * @export
+ * @interface SystemConfigResponseDto
+ */
+export interface SystemConfigResponseDto {
+    /**
+     * 
+     * @type {Array<SystemConfigResponseItem>}
+     * @memberof SystemConfigResponseDto
+     */
+    'config': Array<SystemConfigResponseItem>;
+}
+/**
+ * 
+ * @export
+ * @interface SystemConfigResponseItem
+ */
+export interface SystemConfigResponseItem {
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigResponseItem
+     */
+    'name': string;
+    /**
+     * 
+     * @type {SystemConfigKey}
+     * @memberof SystemConfigResponseItem
+     */
+    'key': SystemConfigKey;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigResponseItem
+     */
+    'value': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigResponseItem
+     */
+    'defaultValue': string;
+}
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+
 export const ThumbnailFormat = {
     Jpeg: 'JPEG',
     Webp: 'WEBP'
@@ -4946,6 +5007,173 @@ export class ServerInfoApi extends BaseAPI {
 }
 
 
+/**
+ * SystemConfigApi - axios parameter creator
+ * @export
+ */
+export const SystemConfigApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getConfig: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/system-config`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {object} body 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateConfig: async (body: object, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'body' is not null or undefined
+            assertParamExists('updateConfig', 'body', body)
+            const localVarPath = `/system-config`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(body, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * SystemConfigApi - functional programming interface
+ * @export
+ */
+export const SystemConfigApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = SystemConfigApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getConfig(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SystemConfigResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getConfig(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {object} body 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateConfig(body: object, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SystemConfigResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateConfig(body, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * SystemConfigApi - factory interface
+ * @export
+ */
+export const SystemConfigApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = SystemConfigApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getConfig(options?: any): AxiosPromise<SystemConfigResponseDto> {
+            return localVarFp.getConfig(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {object} body 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateConfig(body: object, options?: any): AxiosPromise<SystemConfigResponseDto> {
+            return localVarFp.updateConfig(body, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * SystemConfigApi - object-oriented interface
+ * @export
+ * @class SystemConfigApi
+ * @extends {BaseAPI}
+ */
+export class SystemConfigApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SystemConfigApi
+     */
+    public getConfig(options?: AxiosRequestConfig) {
+        return SystemConfigApiFp(this.configuration).getConfig(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {object} body 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SystemConfigApi
+     */
+    public updateConfig(body: object, options?: AxiosRequestConfig) {
+        return SystemConfigApiFp(this.configuration).updateConfig(body, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
 /**
  * UserApi - axios parameter creator
  * @export

web/src/app.css

@@ -59,7 +59,7 @@ input:focus-visible {
 
 @layer utilities {
 	.immich-form-input {
-		@apply bg-slate-100 p-2 rounded-md dark:text-immich-dark-bg focus:border-immich-primary text-sm;
+		@apply bg-slate-100 p-2 rounded-md dark:text-immich-dark-bg focus:border-immich-primary text-sm dark:bg-gray-600 dark:text-immich-dark-fg;
 	}
 
 	.immich-form-label {

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { api, SystemConfigResponseItem } from '@api';
+	import { onMount } from 'svelte';
+
+	let isSaving = false;
+	let items: Array<SystemConfigResponseItem & { originalValue: string }> = [];
+
+	const refreshConfig = async () => {
+		const { data: systemConfig } = await api.systemConfigApi.getConfig();
+		items = systemConfig.config.map((item) => ({ ...item, originalValue: item.value }));
+	};
+
+	onMount(() => refreshConfig());
+
+	const handleSave = async () => {
+		try {
+			isSaving = true;
+			const updates = items
+				.filter((item) => item.value !== item.originalValue)
+				.map(({ key, value }) => ({ key, value: value || null }));
+			if (updates.length > 0) {
+				await api.systemConfigApi.updateConfig({ config: updates });
+				refreshConfig();
+			}
+
+			notificationController.show({
+				message: `Saved settings`,
+				type: NotificationType.Info
+			});
+		} catch (e) {
+			console.error('Error [updateSystemConfig]', e);
+			notificationController.show({
+				message: `Unable to save changes.`,
+				type: NotificationType.Error
+			});
+		} finally {
+			isSaving = false;
+		}
+	};
+</script>
+
+<section>
+	<table class="text-left my-4 w-full">
+		<thead
+			class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
+		>
+			<tr class="flex w-full place-items-center">
+				<th class="text-center w-1/2 font-medium text-sm">Setting</th>
+				<th class="text-center w-1/2 font-medium text-sm">Value</th>
+			</tr>
+		</thead>
+		<tbody class="rounded-md block border dark:border-immich-dark-gray">
+			{#each items as item, i}
+				<tr
+					class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
+						i % 2 == 0 ? 'bg-slate-50 dark:bg-[#181818]' : 'bg-immich-bg dark:bg-immich-dark-bg'
+					}`}
+				>
+					<td class="text-sm px-4 w-1/2 text-ellipsis">
+						{item.name}
+					</td>
+					<td class="text-sm px-4 w-1/2 text-ellipsis">
+						<input
+							style="text-align: center"
+							class="immich-form-input"
+							id={item.key}
+							disabled={isSaving}
+							name={item.key}
+							type="text"
+							bind:value={item.value}
+							placeholder={item.defaultValue + ''}
+						/>
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+
+	<div class="flex justify-end">
+		<button
+			on:click={handleSave}
+			class="px-6 py-3 text-sm bg-immich-primary dark:bg-immich-dark-primary font-medium rounded-2xl hover:bg-immich-primary/50 transition-all hover:cursor-pointer disabled:cursor-not-allowed shadow-sm text-immich-bg dark:text-immich-dark-gray"
+			disabled={isSaving}
+		>
+			{#if isSaving}
+				<LoadingSpinner />
+			{:else}
+				Save
+			{/if}
+		</button>
+	</div>
+</section>

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

@@ -12,8 +12,6 @@ export const load: PageServerLoad = async ({ parent }) => {
 	}
 
 	const { data: allUsers } = await serverApi.userApi.getAllUsers(false);
-	return {
-		user: user,
-		allUsers: allUsers
-	};
+
+	return { user, allUsers };
 };

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

@@ -4,6 +4,7 @@
 	import { AdminSideBarSelection } from '$lib/models/admin-sidebar-selection';
 	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
+	import Sync from 'svelte-material-icons/Sync.svelte';
 	import Cog from 'svelte-material-icons/Cog.svelte';
 	import Server from 'svelte-material-icons/Server.svelte';
 	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
@@ -16,6 +17,7 @@
 	import type { PageData } from './$types';
 	import { api, ServerStatsResponseDto, UserResponseDto } from '@api';
 	import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
+	import SettingsPanel from '$lib/components/admin-page/settings/settings-panel.svelte';
 	import ServerStatsPanel from '$lib/components/admin-page/server-stats/server-stats-panel.svelte';
 	import RestoreDialoge from '$lib/components/admin-page/restore-dialoge.svelte';
 
@@ -190,11 +192,18 @@
 		/>
 		<SideBarButton
 			title="Jobs"
-			logo={Cog}
+			logo={Sync}
 			actionType={AdminSideBarSelection.JOBS}
 			isSelected={selectedAction === AdminSideBarSelection.JOBS}
 			on:selected={onButtonClicked}
 		/>
+		<SideBarButton
+			title="Settings"
+			logo={Cog}
+			actionType={AdminSideBarSelection.SETTINGS}
+			isSelected={selectedAction === AdminSideBarSelection.SETTINGS}
+			on:selected={onButtonClicked}
+		/>
 		<SideBarButton
 			title="Server Stats"
 			logo={Server}
@@ -228,6 +237,9 @@
 				{#if selectedAction === AdminSideBarSelection.JOBS}
 					<JobsPanel />
 				{/if}
+				{#if selectedAction === AdminSideBarSelection.SETTINGS}
+					<SettingsPanel />
+				{/if}
 				{#if selectedAction === AdminSideBarSelection.STATS && serverStat}
 					<ServerStatsPanel stats={serverStat} allUsers={data.allUsers} />
 				{/if}