feat(web): custom stylesheets (#4602)

* add initial ui and api definitions for stylesheets

* proper saving

* make custom css work

* add textarea

* rebuild api

* run prettier

* add typecast

* update typings

* move css accordion to be sorted alphabetically

* set content-type properly

* rename stylesheets to theme

* fix server test

server/immich-openapi-specs.json

@@ -8060,6 +8060,9 @@
           "storageTemplate": {
             "$ref": "#/components/schemas/SystemConfigStorageTemplateDto"
           },
+          "theme": {
+            "$ref": "#/components/schemas/SystemConfigThemeDto"
+          },
           "thumbnail": {
             "$ref": "#/components/schemas/SystemConfigThumbnailDto"
           },
@@ -8077,7 +8080,8 @@
           "storageTemplate",
           "job",
           "thumbnail",
-          "trash"
+          "trash",
+          "theme"
         ],
         "type": "object"
       },
@@ -8404,6 +8408,17 @@
         ],
         "type": "object"
       },
+      "SystemConfigThemeDto": {
+        "properties": {
+          "customCss": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "customCss"
+        ],
+        "type": "object"
+      },
       "SystemConfigThumbnailDto": {
         "properties": {
           "colorspace": {

server/src/domain/system-config/dto/system-config-theme.dto.ts

@@ -0,0 +1,6 @@
+import { IsString } from 'class-validator';
+
+export class SystemConfigThemeDto {
+  @IsString()
+  customCss!: string;
+}

server/src/domain/system-config/dto/system-config.dto.ts

@@ -9,6 +9,7 @@ import { SystemConfigOAuthDto } from './system-config-oauth.dto';
 import { SystemConfigPasswordLoginDto } from './system-config-password-login.dto';
 import { SystemConfigReverseGeocodingDto } from './system-config-reverse-geocoding.dto';
 import { SystemConfigStorageTemplateDto } from './system-config-storage-template.dto';
+import { SystemConfigThemeDto } from './system-config-theme.dto';
 import { SystemConfigThumbnailDto } from './system-config-thumbnail.dto';
 import { SystemConfigTrashDto } from './system-config-trash.dto';
 
@@ -62,6 +63,11 @@ export class SystemConfigDto implements SystemConfig {
   @ValidateNested()
   @IsObject()
   trash!: SystemConfigTrashDto;
+
+  @Type(() => SystemConfigThemeDto)
+  @ValidateNested()
+  @IsObject()
+  theme!: SystemConfigThemeDto;
 }
 
 export function mapConfig(config: SystemConfig): SystemConfigDto {

server/src/domain/system-config/system-config.core.ts

@@ -114,6 +114,9 @@ export const defaults = Object.freeze<SystemConfig>({
     enabled: true,
     days: 30,
   },
+  theme: {
+    customCss: '',
+  },
 });
 
 export enum FeatureFlag {

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

@@ -115,6 +115,9 @@ const updatedConfig = Object.freeze<SystemConfig>({
     enabled: true,
     days: 10,
   },
+  theme: {
+    customCss: '',
+  },
 });
 
 describe(SystemConfigService.name, () => {

server/src/infra/entities/system-config.entity.ts

@@ -90,6 +90,8 @@ export enum SystemConfigKey {
 
   TRASH_ENABLED = 'trash.enabled',
   TRASH_DAYS = 'trash.days',
+
+  THEME_CUSTOM_CSS = 'theme.customCss',
 }
 
 export enum TranscodePolicy {
@@ -221,4 +223,7 @@ export interface SystemConfig {
     enabled: boolean;
     days: number;
   };
+  theme: {
+    customCss: string;
+  };
 }