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

web/src/lib/components/admin-page/settings/setting-textarea.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+
+  export let value: string;
+  export let label = '';
+  export let desc = '';
+  export let required = false;
+  export let disabled = false;
+  export let isEdited = false;
+
+  const handleInput = (e: Event) => {
+    value = (e.target as HTMLInputElement).value;
+  };
+</script>
+
+<div class="mb-4 w-full">
+  <div class={`flex h-[26px] place-items-center gap-1`}>
+    <label class={`immich-form-label text-sm`} for={label}>{label}</label>
+    {#if required}
+      <div class="text-red-400">*</div>
+    {/if}
+
+    {#if isEdited}
+      <div
+        transition:fly={{ x: 10, duration: 200, easing: quintOut }}
+        class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
+      >
+        Unsaved change
+      </div>
+    {/if}
+  </div>
+
+  {#if desc}
+    <p class="immich-form-label pb-2 text-sm" id="{label}-desc">
+      {desc}
+    </p>
+  {:else}
+    <slot name="desc" />
+  {/if}
+
+  <textarea
+    class="immich-form-input w-full pb-2"
+    aria-describedby={desc ? `${label}-desc` : undefined}
+    aria-labelledby="{label}-label"
+    id={label}
+    name={label}
+    {required}
+    {value}
+    on:input={handleInput}
+    {disabled}
+  />
+</div>

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, SystemConfigThemeDto } from '@api';
+  import { isEqual } from 'lodash-es';
+  import { fade } from 'svelte/transition';
+  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import SettingTextarea from '../setting-textarea.svelte';
+
+  export let themeConfig: SystemConfigThemeDto; // this is the config that is being edited
+  export let disabled = false;
+
+  let savedConfig: SystemConfigThemeDto;
+  let defaultConfig: SystemConfigThemeDto;
+
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.theme),
+      api.systemConfigApi.getDefaults().then((res) => res.data.theme),
+    ]);
+  }
+
+  async function saveSetting() {
+    try {
+      const { data: current } = await api.systemConfigApi.getConfig();
+
+      const { data: updated } = await api.systemConfigApi.updateConfig({
+        systemConfigDto: {
+          ...current,
+          theme: themeConfig,
+        },
+      });
+
+      themeConfig = { ...updated.theme };
+      savedConfig = { ...updated.theme };
+
+      notificationController.show({ message: 'Theme saved', type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, 'Unable to save settings');
+    }
+  }
+
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
+
+    themeConfig = { ...resetConfig.theme };
+    savedConfig = { ...resetConfig.theme };
+
+    notificationController.show({
+      message: 'Reset theme to the recent saved theme',
+      type: NotificationType.Info,
+    });
+  }
+
+  async function resetToDefault() {
+    const { data: configs } = await api.systemConfigApi.getDefaults();
+
+    themeConfig = { ...configs.theme };
+    defaultConfig = { ...configs.theme };
+
+    notificationController.show({
+      message: 'Reset theme to default',
+      type: NotificationType.Info,
+    });
+  }
+</script>
+
+<div>
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault>
+        <div class="ml-4 mt-4 flex flex-col gap-4">
+          <div class="ml-4">
+            <SettingTextarea
+              {disabled}
+              label="Custom CSS"
+              desc="Cascading Style Sheets allow the design of Immich to be customized."
+              bind:value={themeConfig.customCss}
+              required={true}
+              isEdited={themeConfig.customCss !== savedConfig.customCss}
+            />
+
+            <SettingButtonsRow
+              on:reset={reset}
+              on:save={saveSetting}
+              on:reset-to-default={resetToDefault}
+              showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+              {disabled}
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  {/await}
+</div>