refactor: admin settings (#23843)

web/src/lib/components/onboarding-page/onboarding-hello.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { OnboardingRole } from '$lib/models/onboarding-role';
-  import { serverConfig } from '$lib/stores/server-config.store';
+  import { serverConfig } from '$lib/stores/system-config-manager.svelte';
   import { user } from '$lib/stores/user.store';
   import { Logo } from '@immich/ui';
   import { t } from 'svelte-i18n';

web/src/lib/components/onboarding-page/onboarding-server-privacy.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { systemConfig } from '$lib/stores/server-config.store';
-  import { updateConfig } from '@immich/sdk';
+  import { handleSystemConfigSave } from '$lib/services/system-config.service';
+  import { systemConfigManager } from '$lib/stores/system-config-manager.svelte';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { get } from 'svelte/store';
+
+  const configToEdit = $state(systemConfigManager.cloneValue());
 
   onDestroy(async () => {
-    const cfg = get(systemConfig);
-
-    await updateConfig({
-      systemConfigDto: cfg,
-    });
+    await handleSystemConfigSave({ map: configToEdit.map, newVersionCheck: configToEdit.newVersionCheck });
   });
 </script>
 
@@ -20,16 +17,14 @@
     {$t('onboarding_privacy_description')}
   </p>
 
-  {#if $systemConfig}
-    <SettingSwitch
-      title={$t('admin.map_settings')}
-      subtitle={$t('admin.map_implications')}
-      bind:checked={$systemConfig.map.enabled}
-    />
-    <SettingSwitch
-      title={$t('admin.version_check_settings')}
-      subtitle={$t('admin.version_check_implications')}
-      bind:checked={$systemConfig.newVersionCheck.enabled}
-    />
-  {/if}
+  <SettingSwitch
+    title={$t('admin.map_settings')}
+    subtitle={$t('admin.map_implications')}
+    bind:checked={configToEdit.map.enabled}
+  />
+  <SettingSwitch
+    title={$t('admin.version_check_settings')}
+    subtitle={$t('admin.version_check_implications')}
+    bind:checked={configToEdit.newVersionCheck.enabled}
+  />
 </div>

web/src/lib/components/onboarding-page/onboarding-storage-template.svelte

@@ -1,20 +1,7 @@
 <script lang="ts">
-  import AdminSettings from '$lib/components/admin-settings/AdminSettings.svelte';
   import StorageTemplateSettings from '$lib/components/admin-settings/StorageTemplateSettings.svelte';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
-  import { getConfig, type SystemConfigDto } from '@immich/sdk';
-  import { onDestroy, onMount } from 'svelte';
-
-  let config: SystemConfigDto | undefined = $state();
-  let adminSettingsComponent = $state<ReturnType<typeof AdminSettings>>();
-
-  onMount(async () => {
-    config = await getConfig();
-  });
-
-  onDestroy(() => adminSettingsComponent?.handleSave({ storageTemplate: config?.storageTemplate }));
 </script>
 
 <div class="flex flex-col">
@@ -26,22 +13,7 @@
     </FormatMessage>
   </p>
 
-  {#if config && $user}
-    <AdminSettings bind:config bind:this={adminSettingsComponent}>
-      {#snippet children({ defaultConfig, savedConfig })}
-        {#if config}
-          <StorageTemplateSettings
-            minified
-            disabled={$featureFlags.configFile}
-            {config}
-            {defaultConfig}
-            {savedConfig}
-            onSave={(config) => adminSettingsComponent?.handleSave(config)}
-            onReset={(options) => adminSettingsComponent?.handleReset(options)}
-            duration={0}
-          />
-        {/if}
-      {/snippet}
-    </AdminSettings>
+  {#if $user}
+    <StorageTemplateSettings minified duration={0} saveOnClose />
   {/if}
 </div>