fix(web): user management responsive design

web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte

@@ -22,6 +22,7 @@
   import SettingAccordion from '../setting-accordion.svelte';
   import { mdiHelpCircleOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
   export let disabled = false;
@@ -63,6 +64,14 @@
     }
   }
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function reset() {
     const { data: resetConfig } = await api.systemConfigApi.getConfig();
 
@@ -354,9 +363,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />

web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte

@@ -9,6 +9,7 @@
   import { handleError } from '../../../../utils/handle-error';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
   export let disabled = false;
@@ -29,6 +30,14 @@
     JobName.Migration,
   ];
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.job),
@@ -101,9 +110,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />

web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte

@@ -11,6 +11,7 @@
   import { fade } from 'svelte/transition';
   import { handleError } from '../../../../utils/handle-error';
   import SettingAccordion from '../setting-accordion.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let libraryConfig: SystemConfigLibraryDto; // this is the config that is being edited
   export let disabled = false;
@@ -25,6 +26,14 @@
   let savedConfig: SystemConfigLibraryDto;
   let defaultConfig: SystemConfigLibraryDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.library),
@@ -131,9 +140,8 @@
 
           <div class="ml-4">
             <SettingButtonsRow
-              on:reset={reset}
+              on:reset={({ detail }) => handleReset(detail)}
               on:save={saveSetting}
-              on:reset-to-default={resetToDefault}
               showResetToDefault={!isEqual(savedConfig, defaultConfig)}
               {disabled}
             />

web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte

@@ -12,6 +12,7 @@
   import SettingSwitch from '../setting-switch.svelte';
   import SettingAccordion from '../setting-accordion.svelte';
   import SettingSelect from '../setting-select.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let machineLearningConfig: SystemConfigMachineLearningDto; // this is the config that is being edited
   export let disabled = false;
@@ -33,6 +34,14 @@
     notificationController.show({ message: 'Reset to the last saved settings', type: NotificationType.Info });
   }
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function saveSetting() {
     try {
       const { data: current } = await api.systemConfigApi.getConfig();
@@ -212,9 +221,8 @@
         </SettingAccordion>
 
         <SettingButtonsRow
-          on:reset={reset}
+          on:reset={({ detail }) => handleReset(detail)}
           on:save={saveSetting}
-          on:reset-to-default={resetToDefault}
           showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -11,13 +11,22 @@
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingSwitch from '../setting-switch.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
 
   let savedConfig: SystemConfigDto;
   let defaultConfig: SystemConfigDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function refreshConfig() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data),
@@ -133,9 +142,8 @@
           >
 
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(
               { ...savedConfig.map, ...savedConfig.reverseGeocoding },
               { ...defaultConfig.map, ...defaultConfig.reverseGeocoding },

web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte

@@ -9,6 +9,7 @@
   import { fade } from 'svelte/transition';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let newVersionCheckConfig: SystemConfigNewVersionCheckDto; // this is the config that is being edited
 
@@ -22,6 +23,14 @@
     ]);
   }
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function saveSetting() {
     try {
       const { data: configs } = await api.systemConfigApi.getConfig();
@@ -79,9 +88,8 @@
               bind:checked={newVersionCheckConfig.enabled}
             />
             <SettingButtonsRow
-              on:reset={reset}
+              on:reset={({ detail }) => handleReset(detail)}
               on:save={saveSetting}
-              on:reset-to-default={resetToDefault}
               showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             />
           </div>

web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte

@@ -11,13 +11,22 @@
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let oauthConfig: SystemConfigOAuthDto;
   export let disabled = false;
 
   let savedConfig: SystemConfigOAuthDto;
   let defaultConfig: SystemConfigOAuthDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   const handleToggleOverride = () => {
     // click runs before bind
     const previouslyEnabled = oauthConfig.mobileOverrideEnabled;
@@ -209,9 +218,8 @@
         {/if}
 
         <SettingButtonsRow
-          on:reset={reset}
+          on:reset={({ detail }) => handleReset(detail)}
           on:save={saveSetting}
-          on:reset-to-default={resetToDefault}
           showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />

web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte

@@ -10,13 +10,22 @@
   import ConfirmDisableLogin from '../confirm-disable-login.svelte';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
   export let disabled = false;
 
   let savedConfig: SystemConfigPasswordLoginDto;
   let defaultConfig: SystemConfigPasswordLoginDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
@@ -107,9 +116,8 @@
             />
 
             <SettingButtonsRow
-              on:reset={reset}
+              on:reset={({ detail }) => handleReset(detail)}
               on:save={saveSetting}
-              on:reset-to-default={resetToDefault}
               showResetToDefault={!isEqual(savedConfig, defaultConfig)}
               {disabled}
             />

web/src/lib/components/admin-page/settings/setting-buttons-row.svelte

@@ -1,8 +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';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    reset: ResetOptions;
+    save: void;
+  }>();
 
   export let showResetToDefault = true;
   export let disabled = false;
@@ -12,7 +16,7 @@
   <div class="left">
     {#if showResetToDefault}
       <button
-        on:click={() => dispatch('reset-to-default')}
+        on:click={() => dispatch('reset', { 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"
       >
         Reset to default
@@ -21,7 +25,7 @@
   </div>
 
   <div class="right">
-    <Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset')}>Reset</Button>
+    <Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset', { default: false })}>Reset</Button>
     <Button {disabled} size="sm" on:click={() => dispatch('save')}>Save</Button>
   </div>
 </div>

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -14,6 +14,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import { user } from '$lib/stores/user.store';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let storageConfig: SystemConfigStorageTemplateDto;
   export let disabled = false;
@@ -23,6 +24,14 @@
   let templateOptions: SystemConfigTemplateStorageOptionDto;
   let selectedPreset = '';
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig, templateOptions] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.storageTemplate),
@@ -232,9 +241,8 @@
           </div>
 
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />

web/src/lib/components/admin-page/settings/theme/theme-settings.svelte

@@ -9,13 +9,22 @@
   import { fade } from 'svelte/transition';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingTextarea from '../setting-textarea.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let themeConfig: SystemConfigThemeDto; // this is the config that is being edited
   export let disabled = false;
 
   let savedConfig: SystemConfigThemeDto;
   let defaultConfig: SystemConfigThemeDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.theme),
@@ -84,9 +93,8 @@
             />
 
             <SettingButtonsRow
-              on:reset={reset}
+              on:reset={({ detail }) => handleReset(detail)}
               on:save={saveSetting}
-              on:reset-to-default={resetToDefault}
               showResetToDefault={!isEqual(savedConfig, defaultConfig)}
               {disabled}
             />