From 1dd1d36120d94c6700ee73f992f78df6e9ddb73f Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Wed, 10 Jul 2024 15:57:18 +0200
Subject: [PATCH] refactor(web): use callbacks for admin setting events
 (#10997)

---
 .../admin-page/settings/admin-settings.svelte | 12 ++--
 .../admin-page/settings/admin-settings.ts     | 14 ++++-
 .../settings/auth/auth-settings.svelte        | 13 ++--
 .../settings/ffmpeg/ffmpeg-settings.svelte    | 11 ++--
 .../settings/image/image-settings.svelte      | 11 ++--
 .../settings/job-settings/job-settings.svelte | 11 ++--
 .../library-settings/library-settings.svelte  | 15 +++--
 .../logging-settings/logging-settings.svelte  | 11 ++--
 .../machine-learning-settings.svelte          | 11 ++--
 .../settings/map-settings/map-settings.svelte | 11 ++--
 .../new-version-check-settings.svelte         | 11 ++--
 .../notification-settings.svelte              | 13 ++--
 .../settings/server/server-settings.svelte    | 11 ++--
 .../storage-template-settings.svelte          | 10 ++--
 .../settings/theme/theme-settings.svelte      | 11 ++--
 .../trash-settings/trash-settings.svelte      | 11 ++--
 .../user-settings/user-settings.svelte        | 11 ++--
 .../onboarding-storage-template.svelte        |  4 +-
 .../settings/setting-buttons-row.svelte       | 16 ++---
 .../routes/admin/system-settings/+page.svelte | 60 +++++++------------
 20 files changed, 125 insertions(+), 153 deletions(-)

diff --git a/web/src/lib/components/admin-page/settings/admin-settings.svelte b/web/src/lib/components/admin-page/settings/admin-settings.svelte
index f5e3370f81..55750a9737 100644
--- a/web/src/lib/components/admin-page/settings/admin-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/admin-settings.svelte
@@ -9,8 +9,8 @@
   import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk';
   import { loadConfig } from '$lib/stores/server-config.store';
   import { cloneDeep } from 'lodash-es';
-  import { createEventDispatcher, onMount } from 'svelte';
-  import type { SettingsEventType } from './admin-settings';
+  import { onMount } from 'svelte';
+  import type { SettingsResetOptions } from './admin-settings';
   import { t } from 'svelte-i18n';
 
   export let config: SystemConfigDto;
@@ -18,10 +18,8 @@
   let savedConfig: SystemConfigDto;
   let defaultConfig: SystemConfigDto;
 
-  const dispatch = createEventDispatcher<{ save: void }>();
-
-  const handleReset = async (detail: SettingsEventType['reset']) => {
-    await (detail.default ? resetToDefault(detail.configKeys) : reset(detail.configKeys));
+  const handleReset = async (options: SettingsResetOptions) => {
+    await (options.default ? resetToDefault(options.configKeys) : reset(options.configKeys));
   };
 
   export const handleSave = async (update: Partial<SystemConfigDto>) => {
@@ -38,8 +36,6 @@
       notificationController.show({ message: $t('settings_saved'), type: NotificationType.Info });
 
       await loadConfig();
-
-      dispatch('save');
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_settings'));
     }
diff --git a/web/src/lib/components/admin-page/settings/admin-settings.ts b/web/src/lib/components/admin-page/settings/admin-settings.ts
index 0b36b940d9..f8796aede9 100644
--- a/web/src/lib/components/admin-page/settings/admin-settings.ts
+++ b/web/src/lib/components/admin-page/settings/admin-settings.ts
@@ -1,7 +1,15 @@
 import type { ResetOptions } from '$lib/utils/dipatch';
 import type { SystemConfigDto } from '@immich/sdk';
 
-export type SettingsEventType = {
-  reset: ResetOptions & { configKeys: Array<keyof SystemConfigDto> };
-  save: Partial<SystemConfigDto>;
+export type SettingsResetOptions = ResetOptions & { configKeys: Array<keyof SystemConfigDto> };
+export type SettingsResetEvent = (options: SettingsResetOptions) => void;
+export type SettingsSaveEvent = (config: Partial<SystemConfigDto>) => void;
+
+export type SettingsComponentProps = {
+  disabled?: boolean;
+  defaultConfig: SystemConfigDto;
+  config: SystemConfigDto;
+  savedConfig: SystemConfigDto;
+  onReset: SettingsResetEvent;
+  onSave: SettingsSaveEvent;
 };
diff --git a/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte b/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
index 59cc5a9f45..cdba844f8d 100644
--- a/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
@@ -8,9 +8,8 @@
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import { t } from 'svelte-i18n';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
 
@@ -18,8 +17,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 
   let isConfirmOpen = false;
 
@@ -39,7 +38,7 @@
     }
 
     isConfirmOpen = false;
-    dispatch('save', { passwordLogin: config.passwordLogin, oauth: config.oauth });
+    onSave({ passwordLogin: config.passwordLogin, oauth: config.oauth });
   };
 </script>
 
@@ -240,8 +239,8 @@
           showResetToDefault={!isEqual(savedConfig.passwordLogin, defaultConfig.passwordLogin) ||
             !isEqual(savedConfig.oauth, defaultConfig.oauth)}
           {disabled}
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['passwordLogin', 'oauth'] })}
-          on:save={() => handleSave(false)}
+          onReset={(options) => onReset({ ...options, configKeys: ['passwordLogin', 'oauth'] })}
+          onSave={() => handleSave(false)}
         />
       </div>
     </form>
diff --git a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
index c39ea75717..3ca5e7d388 100644
--- a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
@@ -11,9 +11,8 @@
   } from '@immich/sdk';
   import { mdiHelpCircleOutline } from '@mdi/js';
   import { isEqual, sortBy } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingInputField, {
     SettingInputFieldType,
@@ -29,8 +28,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -368,8 +367,8 @@
 
       <div class="ml-4">
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['ffmpeg'] })}
-          on:save={() => dispatch('save', { ffmpeg: config.ffmpeg })}
+          onReset={(options) => onReset({ ...options, configKeys: ['ffmpeg'] })}
+          onSave={() => onSave({ ffmpeg: config.ffmpeg })}
           showResetToDefault={!isEqual(savedConfig.ffmpeg, defaultConfig.ffmpeg)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/image/image-settings.svelte b/web/src/lib/components/admin-page/settings/image/image-settings.svelte
index edf0d42896..a7b47920fd 100644
--- a/web/src/lib/components/admin-page/settings/image/image-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/image/image-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { Colorspace, ImageFormat, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
 
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
@@ -17,8 +16,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -114,8 +113,8 @@
 
       <div class="ml-4">
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['image'] })}
-          on:save={() => dispatch('save', { image: config.image })}
+          onReset={(options) => onReset({ ...options, configKeys: ['image'] })}
+          onSave={() => onSave({ image: config.image })}
           showResetToDefault={!isEqual(savedConfig.image, defaultConfig.image)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
index ed464fb26a..e09fde8bae 100644
--- a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
@@ -2,9 +2,8 @@
   import { getJobName } from '$lib/utils';
   import { JobName, type SystemConfigDto, type SystemConfigJobDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField, {
     SettingInputFieldType,
@@ -15,8 +14,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 
   const jobNames = [
     JobName.ThumbnailGeneration,
@@ -67,8 +66,8 @@
 
       <div class="ml-4">
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['job'] })}
-          on:save={() => dispatch('save', { job: config.job })}
+          onReset={(options) => onReset({ ...options, configKeys: ['job'] })}
+          onSave={() => onSave({ job: config.job })}
           showResetToDefault={!isEqual(savedConfig.job, defaultConfig.job)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
index 96beac8bf9..f6ed132c8c 100644
--- a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingInputField, {
     SettingInputFieldType,
@@ -17,6 +16,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 
   $: cronExpressionOptions = [
     { title: $t('interval.night_at_midnight'), expression: '0 0 * * *' },
@@ -24,8 +25,6 @@
     { title: $t('interval.day_at_onepm'), expression: '0 13 * * *' },
     { title: $t('interval.hours', { values: { hours: 6 } }), expression: '0 */6 * * *' },
   ];
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
 </script>
 
 <div>
@@ -47,8 +46,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['library'] })}
-            on:save={() => dispatch('save', { library: config.library })}
+            onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
+            onSave={() => onSave({ library: config.library })}
             showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
             {disabled}
           />
@@ -112,8 +111,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['library'] })}
-            on:save={() => dispatch('save', { library: config.library })}
+            onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
+            onSave={() => onSave({ library: config.library })}
             showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
             {disabled}
           />
diff --git a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
index 8f0de67f8e..6e71ba926c 100644
--- a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { LogLevel, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
@@ -13,8 +12,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -44,8 +43,8 @@
         />
 
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['logging'] })}
-          on:save={() => dispatch('save', { logging: config.logging })}
+          onReset={(options) => onReset({ ...options, configKeys: ['logging'] })}
+          onSave={() => onSave({ logging: config.logging })}
           showResetToDefault={!isEqual(savedConfig.logging, defaultConfig.logging)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
index ed26517fc3..05a5224bd0 100644
--- a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField, {
@@ -19,8 +18,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div class="mt-2">
@@ -181,8 +180,8 @@
       </SettingAccordion>
 
       <SettingButtonsRow
-        on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['machineLearning'] })}
-        on:save={() => dispatch('save', { machineLearning: config.machineLearning })}
+        onReset={(options) => onReset({ ...options, configKeys: ['machineLearning'] })}
+        onSave={() => onSave({ machineLearning: config.machineLearning })}
         showResetToDefault={!isEqual(savedConfig.machineLearning, defaultConfig.machineLearning)}
         {disabled}
       />
diff --git a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
index 3cb46838b0..74cbe2d9a1 100644
--- a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
@@ -17,8 +16,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div class="mt-2">
@@ -75,8 +74,8 @@
         >
 
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['map', 'reverseGeocoding'] })}
-          on:save={() => dispatch('save', { map: config.map, reverseGeocoding: config.reverseGeocoding })}
+          onReset={(options) => onReset({ ...options, configKeys: ['map', 'reverseGeocoding'] })}
+          onSave={() => onSave({ map: config.map, reverseGeocoding: config.reverseGeocoding })}
           showResetToDefault={!isEqual(
             { map: savedConfig.map, reverseGeocoding: savedConfig.reverseGeocoding },
             { map: defaultConfig.map, reverseGeocoding: defaultConfig.reverseGeocoding },
diff --git a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
index 8e25c12142..4ef4804c3f 100644
--- a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { t } from 'svelte-i18n';
@@ -12,8 +11,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -26,8 +25,8 @@
           {disabled}
         />
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['newVersionCheck'] })}
-          on:save={() => dispatch('save', { newVersionCheck: config.newVersionCheck })}
+          onReset={(options) => onReset({ ...options, configKeys: ['newVersionCheck'] })}
+          onSave={() => onSave({ newVersionCheck: config.newVersionCheck })}
           showResetToDefault={!isEqual(savedConfig.newVersionCheck, defaultConfig.newVersionCheck)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte b/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
index 2be9d09860..fcd26c684b 100644
--- a/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { sendTestEmail, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingInputField, {
     SettingInputFieldType,
   } from '$lib/components/shared-components/settings/setting-input-field.svelte';
@@ -24,8 +23,10 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
+
   let isSending = false;
-  const dispatch = createEventDispatcher<SettingsEventType>();
 
   const handleSendTestEmail = async () => {
     if (isSending) {
@@ -56,7 +57,7 @@
       });
 
       if (!disabled) {
-        dispatch('save', { notifications: config.notifications });
+        onSave({ notifications: config.notifications });
       }
     } catch (error) {
       handleError(error, $t('admin.notification_email_test_email_failed'));
@@ -156,8 +157,8 @@
       </div>
 
       <SettingButtonsRow
-        on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['notifications'] })}
-        on:save={() => dispatch('save', { notifications: config.notifications })}
+        onReset={(options) => onReset({ ...options, configKeys: ['notifications'] })}
+        onSave={() => onSave({ notifications: config.notifications })}
         showResetToDefault={!isEqual(savedConfig, defaultConfig)}
         {disabled}
       />
diff --git a/web/src/lib/components/admin-page/settings/server/server-settings.svelte b/web/src/lib/components/admin-page/settings/server/server-settings.svelte
index d80246f964..f021c99f24 100644
--- a/web/src/lib/components/admin-page/settings/server/server-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/server/server-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingInputField, {
     SettingInputFieldType,
   } from '$lib/components/shared-components/settings/setting-input-field.svelte';
@@ -14,8 +13,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -40,8 +39,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['server'] })}
-            on:save={() => dispatch('save', { server: config.server })}
+            onReset={(options) => onReset({ ...options, configKeys: ['server'] })}
+            onSave={() => onSave({ server: config.server })}
             showResetToDefault={!isEqual(savedConfig.server, defaultConfig.server)}
             {disabled}
           />
diff --git a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
index 8aa1c2cb73..1d0cec3296 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
@@ -10,9 +10,8 @@
   import handlebar from 'handlebars';
   import { isEqual } from 'lodash-es';
   import * as luxon from 'luxon';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SupportedDatetimePanel from './supported-datetime-panel.svelte';
   import SupportedVariablesPanel from './supported-variables-panel.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
@@ -28,8 +27,9 @@
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
   export let minified = false;
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 
-  const dispatch = createEventDispatcher<SettingsEventType>();
   let templateOptions: SystemConfigTemplateStorageOptionDto;
   let selectedPreset = '';
 
@@ -249,8 +249,8 @@
         <slot />
       {:else}
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['storageTemplate'] })}
-          on:save={() => dispatch('save', { storageTemplate: config.storageTemplate })}
+          onReset={(options) => onReset({ ...options, configKeys: ['storageTemplate'] })}
+          onSave={() => onSave({ storageTemplate: config.storageTemplate })}
           showResetToDefault={!isEqual(savedConfig.storageTemplate, defaultConfig.storageTemplate) && !minified}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte b/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
index e4ad32dd0a..84a12e05c9 100644
--- a/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import { t } from 'svelte-i18n';
@@ -12,8 +11,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -30,8 +29,8 @@
         />
 
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['theme'] })}
-          on:save={() => dispatch('save', { theme: config.theme })}
+          onReset={(options) => onReset({ ...options, configKeys: ['theme'] })}
+          onSave={() => onSave({ theme: config.theme })}
           showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte b/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
index bf3b71ff26..8f287d48e0 100644
--- a/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import SettingInputField, {
     SettingInputFieldType,
@@ -15,8 +14,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -38,8 +37,8 @@
         />
 
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['trash'] })}
-          on:save={() => dispatch('save', { trash: config.trash })}
+          onReset={(options) => onReset({ ...options, configKeys: ['trash'] })}
+          onSave={() => onSave({ trash: config.trash })}
           showResetToDefault={!isEqual(savedConfig.trash, defaultConfig.trash)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte b/web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte
index 6d9df7a34c..21453cbc70 100644
--- a/web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
 
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField, {
@@ -15,8 +14,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -35,8 +34,8 @@
 
       <div class="ml-4">
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['user'] })}
-          on:save={() => dispatch('save', { user: config.user })}
+          onReset={(options) => onReset({ ...options, configKeys: ['user'] })}
+          onSave={() => onSave({ user: config.user })}
           showResetToDefault={!isEqual(savedConfig.user, defaultConfig.user)}
           {disabled}
         />
diff --git a/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte b/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
index 74ddb6459c..096417d72a 100644
--- a/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
@@ -43,8 +43,8 @@
         {config}
         {defaultConfig}
         {savedConfig}
-        on:save={({ detail }) => handleSave(detail)}
-        on:reset={({ detail }) => handleReset(detail)}
+        onSave={(config) => handleSave(config)}
+        onReset={(options) => handleReset(options)}
       >
         <div class="flex pt-4">
           <div class="w-full flex place-content-start">
diff --git a/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte b/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
index 68c5b2628c..97bcb1d499 100644
--- a/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
   import type { ResetOptions } from '$lib/utils/dipatch';
-  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  const dispatch = createEventDispatcher<{
-    reset: ResetOptions;
-    save: void;
-  }>();
-
   export let showResetToDefault = true;
   export let disabled = false;
+  export let onReset: (options: ResetOptions) => void;
+  export let onSave: () => void;
 </script>
 
 <div class="mt-8 flex justify-between gap-2">
@@ -18,7 +14,7 @@
     {#if showResetToDefault}
       <button
         type="button"
-        on:click={() => dispatch('reset', { default: true })}
+        on:click={() => onReset({ default: true })}
         class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
       >
         {$t('reset_to_default')}
@@ -27,9 +23,7 @@
   </div>
 
   <div class="right">
-    <Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset', { default: false })}
-      >{$t('reset')}</Button
-    >
-    <Button type="submit" {disabled} size="sm" on:click={() => dispatch('save')}>{$t('save')}</Button>
+    <Button {disabled} size="sm" color="gray" on:click={() => onReset({ default: false })}>{$t('reset')}</Button>
+    <Button type="submit" {disabled} size="sm" on:click={() => onSave()}>{$t('save')}</Button>
   </div>
 </div>
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index e1cbdc534c..12bd54cecd 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -29,28 +29,15 @@
   import { mdiAlert, mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
   import type { PageData } from './$types';
   import { t } from 'svelte-i18n';
+  import type { ComponentType, SvelteComponent } from 'svelte';
+  import type { SettingsComponentProps } from '$lib/components/admin-page/settings/admin-settings';
 
   export let data: PageData;
 
   let config = data.configs;
   let handleSave: (update: Partial<SystemConfigDto>) => Promise<void>;
 
-  type Settings =
-    | typeof AuthSettings
-    | typeof JobSettings
-    | typeof LibrarySettings
-    | typeof LoggingSettings
-    | typeof MachineLearningSettings
-    | typeof MapSettings
-    | typeof ServerSettings
-    | typeof StorageTemplateSettings
-    | typeof ThemeSettings
-    | typeof ImageSettings
-    | typeof TrashSettings
-    | typeof NewVersionCheckSettings
-    | typeof NotificationSettings
-    | typeof FFmpegSettings
-    | typeof UserSettings;
+  type SettingsComponent = ComponentType<SvelteComponent<SettingsComponentProps>>;
 
   const downloadConfig = () => {
     const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
@@ -76,97 +63,97 @@
   };
 
   const settings: Array<{
-    item: Settings;
+    component: SettingsComponent;
     title: string;
     subtitle: string;
     key: string;
   }> = [
     {
-      item: AuthSettings,
+      component: AuthSettings,
       title: $t('admin.authentication_settings'),
       subtitle: $t('admin.authentication_settings_description'),
       key: 'image',
     },
     {
-      item: ImageSettings,
+      component: ImageSettings,
       title: $t('admin.image_settings'),
       subtitle: $t('admin.image_settings_description'),
       key: 'image',
     },
     {
-      item: JobSettings,
+      component: JobSettings,
       title: $t('admin.job_settings'),
       subtitle: $t('admin.job_settings_description'),
       key: 'job',
     },
     {
-      item: LibrarySettings,
+      component: LibrarySettings,
       title: $t('admin.library_settings'),
       subtitle: $t('admin.library_settings_description'),
       key: 'external-library',
     },
     {
-      item: LoggingSettings,
+      component: LoggingSettings,
       title: $t('admin.logging_settings'),
       subtitle: $t('admin.manage_log_settings'),
       key: 'logging',
     },
     {
-      item: MachineLearningSettings,
+      component: MachineLearningSettings,
       title: $t('admin.machine_learning_settings'),
       subtitle: $t('admin.machine_learning_settings_description'),
       key: 'machine-learning',
     },
     {
-      item: MapSettings,
+      component: MapSettings,
       title: $t('admin.map_settings'),
       subtitle: $t('admin.map_settings_description'),
       key: 'location',
     },
     {
-      item: NotificationSettings,
+      component: NotificationSettings,
       title: $t('admin.notification_settings'),
       subtitle: $t('admin.notification_settings_description'),
       key: 'notifications',
     },
     {
-      item: ServerSettings,
+      component: ServerSettings,
       title: $t('admin.server_settings'),
       subtitle: $t('admin.server_settings_description'),
       key: 'server',
     },
     {
-      item: StorageTemplateSettings,
+      component: StorageTemplateSettings,
       title: $t('admin.storage_template_settings'),
       subtitle: $t('admin.storage_template_settings_description'),
       key: 'storage-template',
     },
     {
-      item: ThemeSettings,
+      component: ThemeSettings,
       title: $t('admin.theme_settings'),
       subtitle: $t('admin.theme_settings_description'),
       key: 'theme',
     },
     {
-      item: TrashSettings,
+      component: TrashSettings,
       title: $t('admin.trash_settings'),
       subtitle: $t('admin.trash_settings_description'),
       key: 'trash',
     },
     {
-      item: UserSettings,
+      component: UserSettings,
       title: $t('admin.user_settings'),
       subtitle: $t('admin.user_settings_description'),
       key: 'user-settings',
     },
     {
-      item: NewVersionCheckSettings,
+      component: NewVersionCheckSettings,
       title: $t('admin.version_check_settings'),
       subtitle: $t('admin.version_check_settings_description'),
       key: 'version-check',
     },
     {
-      item: FFmpegSettings,
+      component: FFmpegSettings,
       title: $t('admin.transcoding_settings'),
       subtitle: $t('admin.transcoding_settings_description'),
       key: 'video-transcoding',
@@ -212,12 +199,11 @@
       <section id="setting-content" class="flex place-content-center sm:mx-4">
         <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
           <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-            {#each settings as { item, title, subtitle, key }}
+            {#each settings as { component: Component, title, subtitle, key }}
               <SettingAccordion {title} {subtitle} {key}>
-                <svelte:component
-                  this={item}
-                  on:save={({ detail }) => handleSave(detail)}
-                  on:reset={({ detail }) => handleReset(detail)}
+                <Component
+                  onSave={(config) => handleSave(config)}
+                  onReset={(options) => handleReset(options)}
                   disabled={$featureFlags.configFile}
                   {defaultConfig}
                   {config}