refactor(web): use callbacks for admin setting events (#10997)

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'));
     }

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;
 };

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>

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}
         />

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}
         />

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}
         />

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}
           />

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}
         />

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}
       />

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 },

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}
         />

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}
       />

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}
           />

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}
         />

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}
         />

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}
         />

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}
         />