refactor: admin settings (#23843)

web/src/routes/admin/+layout.ts

@@ -0,0 +1,6 @@
+import { systemConfigManager } from '$lib/stores/system-config-manager.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load = (async () => {
+  await systemConfigManager.init();
+}) satisfies LayoutLoad;

web/src/routes/admin/system-settings/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import type { SettingsComponentProps } from '$lib/components/admin-settings/admin-settings';
-  import AdminSettings from '$lib/components/admin-settings/AdminSettings.svelte';
   import AuthSettings from '$lib/components/admin-settings/AuthSettings.svelte';
   import BackupSettings from '$lib/components/admin-settings/BackupSettings.svelte';
   import FFmpegSettings from '$lib/components/admin-settings/FFmpegSettings.svelte';
@@ -19,25 +17,22 @@
   import ThemeSettings from '$lib/components/admin-settings/ThemeSettings.svelte';
   import TrashSettings from '$lib/components/admin-settings/TrashSettings.svelte';
   import UserSettings from '$lib/components/admin-settings/UserSettings.svelte';
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import { QueryParameter } from '$lib/constants';
   import SearchBar from '$lib/elements/SearchBar.svelte';
-  import { downloadManager } from '$lib/managers/download-manager.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { copyToClipboard } from '$lib/utils';
-  import { downloadBlob } from '$lib/utils/asset-utils';
-  import { Alert, Button, HStack, Text } from '@immich/ui';
+  import { getSystemConfigActions } from '$lib/services/system-config.service';
+  import { featureFlags, systemConfigManager } from '$lib/stores/system-config-manager.svelte';
+  import { Alert, HStack } from '@immich/ui';
   import {
     mdiAccountOutline,
     mdiBackupRestore,
     mdiBellOutline,
     mdiBookshelf,
     mdiClockOutline,
-    mdiContentCopy,
     mdiDatabaseOutline,
-    mdiDownload,
     mdiFileDocumentOutline,
     mdiFolderOutline,
     mdiImageOutline,
@@ -49,62 +44,20 @@
     mdiSync,
     mdiTrashCanOutline,
     mdiUpdate,
-    mdiUpload,
     mdiVideoOutline,
   } from '@mdi/js';
   import type { Component } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  interface Props {
+  type Props = {
     data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  let config = $state(data.configs);
-  let adminSettingElement = $state<ReturnType<typeof AdminSettings>>();
-
-  type SettingsComponent = Component<SettingsComponentProps>;
-
-  // https://stackoverflow.com/questions/16167581/sort-object-properties-and-json-stringify/43636793#43636793
-  const jsonReplacer = (key: string, value: unknown) =>
-    value instanceof Object && !Array.isArray(value)
-      ? Object.keys(value)
-          .sort()
-          // eslint-disable-next-line unicorn/no-array-reduce
-          .reduce((sorted: { [key: string]: unknown }, key) => {
-            sorted[key] = (value as { [key: string]: unknown })[key];
-            return sorted;
-          }, {})
-      : value;
-
-  const downloadConfig = () => {
-    const blob = new Blob([JSON.stringify(config, jsonReplacer, 2)], { type: 'application/json' });
-    const downloadKey = 'immich-config.json';
-    downloadManager.add(downloadKey, blob.size);
-    downloadManager.update(downloadKey, blob.size);
-    downloadBlob(blob, downloadKey);
-    setTimeout(() => downloadManager.clear(downloadKey), 5000);
   };
 
-  let inputElement: HTMLInputElement | undefined = $state();
-
-  const uploadConfig = (e: Event) => {
-    const file = (e.target as HTMLInputElement).files?.[0];
-    if (!file) {
-      return;
-    }
-    const reader = async () => {
-      const text = await file.text();
-      const newConfig = JSON.parse(text);
-      await adminSettingElement?.handleSave(newConfig);
-    };
-    reader().catch((error) => console.error('Error handling JSON config upload', error));
-  };
+  const { data }: Props = $props();
 
   const settings: Array<{
-    component: SettingsComponent;
+    component: Component;
     title: string;
     subtitle: string;
     key: string;
@@ -246,9 +199,11 @@
       return title.toLowerCase().includes(query) || subtitle.toLowerCase().includes(query);
     }),
   );
-</script>
 
-<input bind:this={inputElement} type="file" accept=".json" style="display: none" onchange={uploadConfig} />
+  const { CopyToClipboard, Upload, Download } = $derived(
+    getSystemConfigActions($t, $featureFlags, systemConfigManager.value),
+  );
+</script>
 
 <AdminPageLayout title={data.meta.title}>
   {#snippet buttons()}
@@ -256,58 +211,27 @@
       <div class="hidden lg:block">
         <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
       </div>
-      <Button
-        leadingIcon={mdiContentCopy}
-        onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
-        size="small"
-        variant="ghost"
-        color="secondary"
-      >
-        <Text class="hidden md:block">{$t('copy_to_clipboard')}</Text>
-      </Button>
-      <Button leadingIcon={mdiDownload} onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
-        <Text class="hidden md:block">{$t('export_as_json')}</Text>
-      </Button>
-      {#if !$featureFlags.configFile}
-        <Button
-          leadingIcon={mdiUpload}
-          onclick={() => inputElement?.click()}
-          size="small"
-          variant="ghost"
-          color="secondary"
-        >
-          <Text class="hidden md:block">{$t('import_from_json')}</Text>
-        </Button>
-      {/if}
+      <HeaderButton action={CopyToClipboard} />
+      <HeaderButton action={Download} />
+      <HeaderButton action={Upload} />
     </HStack>
   {/snippet}
 
-  <AdminSettings bind:config bind:this={adminSettingElement}>
-    {#snippet children({ savedConfig, defaultConfig })}
-      <section id="setting-content" class="flex place-content-center sm:mx-4">
-        <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
-          {#if $featureFlags.configFile}
-            <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
-          {/if}
-          <div class="block lg:hidden">
-            <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-          </div>
-          <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-            {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
-              <SettingAccordion {title} {subtitle} {key} {icon}>
-                <Component
-                  onSave={(config) => adminSettingElement?.handleSave(config)}
-                  onReset={(options) => adminSettingElement?.handleReset(options)}
-                  disabled={$featureFlags.configFile}
-                  bind:config
-                  {defaultConfig}
-                  {savedConfig}
-                />
-              </SettingAccordion>
-            {/each}
-          </SettingAccordionState>
-        </section>
-      </section>
-    {/snippet}
-  </AdminSettings>
+  <section id="setting-content" class="flex place-content-center sm:mx-4">
+    <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
+      {#if $featureFlags.configFile}
+        <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
+      {/if}
+      <div class="block lg:hidden">
+        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
+      </div>
+      <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
+        {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
+          <SettingAccordion {title} {subtitle} {key} {icon}>
+            <Component />
+          </SettingAccordion>
+        {/each}
+      </SettingAccordionState>
+    </section>
+  </section>
 </AdminPageLayout>

web/src/routes/admin/system-settings/+page.ts

@@ -1,15 +1,17 @@
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getConfig } from '@immich/sdk';
+import { getConfig, getConfigDefaults } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
-  const configs = await getConfig();
+  const config = await getConfig();
+  const defaultConfig = await getConfigDefaults();
   const $t = await getFormatter();
 
   return {
-    configs,
+    config,
+    defaultConfig,
     meta: {
       title: $t('admin.system_settings'),
     },