feat: user preferences for archive download size (#10296)

* feat: user preferences for archive download size

* chore: open api

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/user-settings-page/download-settings.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { updateMyPreferences } from '@immich/sdk';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../utils/handle-error';
+
+  import { preferences } from '$lib/stores/user.store';
+  import Button from '../elements/buttons/button.svelte';
+  import { t } from 'svelte-i18n';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
+
+  let archiveSize = convertFromBytes($preferences?.download?.archiveSize || 4, 'GiB');
+
+  const handleSave = async () => {
+    try {
+      const dto = { download: { archiveSize: Math.floor(convertToBytes(archiveSize, 'GiB')) } };
+      const newPreferences = await updateMyPreferences({ userPreferencesUpdateDto: dto });
+      $preferences = newPreferences;
+
+      notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_update_settings'));
+    }
+  };
+</script>
+
+<section class="my-4">
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault>
+      <div class="ml-4 mt-4 flex flex-col gap-4">
+        <div class="ml-4">
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            label={$t('archive_size')}
+            desc={$t('archive_size_description')}
+            bind:value={archiveSize}
+          />
+        </div>
+        <div class="flex justify-end">
+          <Button type="submit" size="sm" on:click={() => handleSave()}>{$t('save')}</Button>
+        </div>
+      </div>
+    </form>
+  </div>
+</section>

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -17,6 +17,7 @@
   import UserProfileSettings from './user-profile-settings.svelte';
   import NotificationsSettings from '$lib/components/user-settings-page/notifications-settings.svelte';
   import { t } from 'svelte-i18n';
+  import DownloadSettings from '$lib/components/user-settings-page/download-settings.svelte';
 
   export let keys: ApiKeyResponseDto[] = [];
   export let sessions: SessionResponseDto[] = [];
@@ -43,6 +44,14 @@
     <DeviceList bind:devices={sessions} />
   </SettingAccordion>
 
+  <SettingAccordion
+    key="download-settings"
+    title={$t('download_settings')}
+    subtitle={$t('download_settings_description')}
+  >
+    <DownloadSettings />
+  </SettingAccordion>
+
   <SettingAccordion key="memories" title={$t('memories')} subtitle={$t('memories_setting_description')}>
     <MemoriesSettings />
   </SettingAccordion>