refactor: user edit modal (#23169)

pnpm-lock.yaml

@@ -681,8 +681,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.36.0
-        version: 0.36.4(@internationalized/date@3.8.2)(svelte@5.40.1)
+        specifier: ^0.37.1
+        version: 0.37.1(@internationalized/date@3.8.2)(svelte@5.40.1)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -2726,8 +2726,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@immich/ui@0.36.4':
-    resolution: {integrity: sha512-urA7yD3ylKPqh6BhctvnpwZ1BZke75qaArRvnmUhjy5mV9Bud4D/yqbX5BlYq+Z3TvNP365BPLJDj7euG91gZw==}
+  '@immich/ui@0.37.1':
+    resolution: {integrity: sha512-8S9KsyqyRcNgRHeBU8G3qMQ7D7fN4u9I31jjRc9c3s2tkiYucASofPJdcFdmGZnKLX5fIj+yofxiNZV9tVitOg==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -14182,7 +14182,7 @@ snapshots:
   '@img/sharp-win32-x64@0.34.4':
     optional: true
 
-  '@immich/ui@0.36.4(@internationalized/date@3.8.2)(svelte@5.40.1)':
+  '@immich/ui@0.37.1(@internationalized/date@3.8.2)(svelte@5.40.1)':
     dependencies:
       '@mdi/js': 7.4.47
       bits-ui: 2.9.8(@internationalized/date@3.8.2)(svelte@5.40.1)

web/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.36.0",
+    "@immich/ui": "^0.37.1",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/lib/modals/UserEditModal.svelte

@@ -5,7 +5,19 @@
   import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, Field, HStack, Input, Label, Link, Modal, ModalBody, ModalFooter, Switch, Text } from '@immich/ui';
+  import {
+    Button,
+    Field,
+    HStack,
+    Input,
+    Link,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    NumberInput,
+    Switch,
+    Text,
+  } from '@immich/ui';
   import { mdiAccountEditOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -21,15 +33,19 @@
   let email = $derived(user.email);
   let storageLabel = $derived(user.storageLabel || '');
 
-  let quotaSize = $state(user.quotaSizeInBytes === null ? null : convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB));
-
   const previousQuota = user.quotaSizeInBytes;
 
+  let quotaSize = $state(
+    typeof user.quotaSizeInBytes === 'number' ? convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB) : undefined,
+  );
+
+  const quotaSizeBytes = $derived(typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null);
+
   let quotaSizeWarning = $derived(
-    previousQuota !== convertToBytes(Number(quotaSize), ByteUnit.GiB) &&
-      !!quotaSize &&
+    previousQuota !== quotaSizeBytes &&
+      !!quotaSizeBytes &&
       userInteraction.serverInfo &&
-      convertToBytes(Number(quotaSize), ByteUnit.GiB) > userInteraction.serverInfo.diskSizeRaw,
+      quotaSizeBytes > userInteraction.serverInfo.diskSizeRaw,
   );
 
   const handleEditUser = async () => {
@@ -40,7 +56,7 @@
           email,
           name,
           storageLabel,
-          quotaSizeInBytes: quotaSize === null ? null : convertToBytes(Number(quotaSize), ByteUnit.GiB),
+          quotaSizeInBytes: typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null,
           isAdmin,
         },
       });
@@ -68,22 +84,12 @@
         <Input bind:value={name} />
       </Field>
 
-      <div class="flex flex-col gap-1 mt-4">
-        <Label class="flex items-center gap-2" for="quotaSize">{$t('admin.quota_size_gib')}</Label>
-        <input
-          class="immich-form-input"
-          id="quotaSize"
-          name="quotaSize"
-          placeholder={$t('unlimited')}
-          type="number"
-          step="1"
-          min="0"
-          bind:value={quotaSize}
-        />
+      <Field label={$t('admin.quota_size_gib')} class="mt-4">
+        <NumberInput bind:value={quotaSize} min="0" step="1" placeholder={$t('unlimited')} />
         {#if quotaSizeWarning}
           <Text size="small" color="danger">{$t('errors.quota_higher_than_disk_size')}</Text>
         {/if}
-      </div>
+      </Field>
 
       <Field label={$t('storage_label')} class="mt-4">
         <Input bind:value={storageLabel} />