refactor: admin settings (#23843)

web/src/lib/components/shared-components/settings/SystemConfigButtonRow.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { handleSystemConfigSave } from '$lib/services/system-config.service';
+  import { systemConfigManager } from '$lib/stores/system-config-manager.svelte';
+  import type { SystemConfigDto } from '@immich/sdk';
+  import { Button, toastManager } from '@immich/ui';
+  import { isEqual, pick } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    disabled?: boolean;
+    keys: Array<keyof SystemConfigDto>;
+    configToEdit: SystemConfigDto;
+    onBeforeSave?: () => Promise<boolean>;
+  };
+
+  let { disabled, keys, configToEdit = $bindable(), onBeforeSave }: Props = $props();
+
+  const showResetToDefault = $derived(
+    !isEqual(pick(systemConfigManager.value, keys), pick(systemConfigManager.defaultValue, keys)),
+  );
+
+  const handleReset = () => {
+    configToEdit = systemConfigManager.cloneValue();
+    toastManager.info($t('admin.reset_settings_to_recent_saved'));
+  };
+
+  const handleResetToDefault = () => {
+    const defaultConfig = systemConfigManager.cloneDefaultValue();
+
+    configToEdit = { ...configToEdit, ...pick(defaultConfig, keys) };
+
+    toastManager.info($t('admin.reset_settings_to_default'));
+  };
+
+  const handleSave = async () => {
+    const shouldSave = await onBeforeSave?.();
+
+    if (shouldSave ?? true) {
+      await handleSystemConfigSave(pick(configToEdit, keys));
+    }
+  };
+</script>
+
+<div class="mt-8 flex justify-between gap-2">
+  <div class="left">
+    {#if showResetToDefault}
+      <Button variant="ghost" shape="round" size="small" onclick={handleResetToDefault}>
+        {$t('reset_to_default')}
+      </Button>
+    {/if}
+  </div>
+
+  <div class="flex gap-1">
+    <Button shape="round" {disabled} size="small" color="secondary" onclick={handleReset}>{$t('reset')}</Button>
+    <Button shape="round" type="submit" {disabled} size="small" onclick={handleSave}>{$t('save')}</Button>
+  </div>
+</div>