refactor: avatar selector modal (#18228)

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -5,15 +5,13 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
   import { user } from '$lib/stores/user.store';
-  import { handleError } from '$lib/utils/handle-error';
-  import { deleteProfileImage, updateMyUser, type UserAvatarColor } from '@immich/sdk';
   import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import { NotificationType, notificationController } from '../notification/notification';
   import UserAvatar from '../user-avatar.svelte';
-  import AvatarSelector from './avatar-selector.svelte';
 
   interface Props {
     onLogout: () => void;
@@ -21,26 +19,6 @@
   }
 
   let { onLogout, onClose = () => {} }: Props = $props();
-
-  let isShowSelectAvatar = $state(false);
-
-  const handleSaveProfile = async (color: UserAvatarColor) => {
-    try {
-      if ($user.profileImagePath !== '') {
-        await deleteProfileImage();
-      }
-
-      $user = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
-      isShowSelectAvatar = false;
-
-      notificationController.show({
-        message: $t('saved_profile'),
-        type: NotificationType.Info,
-      });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_save_profile'));
-    }
-  };
 </script>
 
 <div
@@ -63,7 +41,7 @@
           class="border"
           size="12"
           padding="2"
-          onclick={() => (isShowSelectAvatar = true)}
+          onclick={() => modalManager.show(AvatarEditModal, {})}
         />
       </div>
     </div>
@@ -111,7 +89,3 @@
     >
   </div>
 </div>
-
-{#if isShowSelectAvatar}
-  <AvatarSelector user={$user} onClose={() => (isShowSelectAvatar = false)} onChoose={handleSaveProfile} />
-{/if}

web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import { UserAvatarColor, type UserResponseDto } from '@immich/sdk';
-  import { t } from 'svelte-i18n';
-  import FullScreenModal from '../full-screen-modal.svelte';
-  import UserAvatar from '../user-avatar.svelte';
-
-  interface Props {
-    user: UserResponseDto;
-    onClose: () => void;
-    onChoose: (color: UserAvatarColor) => void;
-  }
-
-  let { user, onClose, onChoose }: Props = $props();
-
-  const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
-</script>
-
-<FullScreenModal title={$t('select_avatar_color')} width="auto" {onClose}>
-  <div class="flex items-center justify-center mt-4">
-    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-      {#each colors as color (color)}
-        <button type="button" onclick={() => onChoose(color)}>
-          <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
-        </button>
-      {/each}
-    </div>
-  </div>
-</FullScreenModal>

web/src/lib/modals/AvatarEditModal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { user } from '$lib/stores/user.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { deleteProfileImage, updateMyUser, UserAvatarColor } from '@immich/sdk';
+  import { Modal, ModalBody } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    onClose: () => void;
+  }
+
+  let { onClose }: Props = $props();
+
+  const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
+
+  const onSave = async (color: UserAvatarColor) => {
+    try {
+      if ($user.profileImagePath !== '') {
+        await deleteProfileImage();
+      }
+
+      notificationController.show({ message: $t('saved_profile'), type: NotificationType.Info });
+
+      $user = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
+      onClose();
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_save_profile'));
+    }
+  };
+</script>
+
+<Modal title={$t('select_avatar_color')} size="medium" {onClose}>
+  <ModalBody>
+    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+      {#each colors as color (color)}
+        <button type="button" onclick={() => onSave(color)}>
+          <UserAvatar label={color} user={$user} {color} size="xl" showProfileImage={false} />
+        </button>
+      {/each}
+    </div>
+  </ModalBody>
+</Modal>