feat(web,server): user avatar color (#4779)

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

@@ -1,16 +1,48 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
   import { AppRoute } from '$lib/constants';
-  import type { UserResponseDto } from '@api';
+  import { api, UserAvatarColor, type UserResponseDto } from '@api';
   import { createEventDispatcher } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { fade } from 'svelte/transition';
   import UserAvatar from '../user-avatar.svelte';
-  import { mdiCog, mdiLogout } from '@mdi/js';
+  import { mdiCog, mdiLogout, mdiPencil } from '@mdi/js';
+  import { notificationController, NotificationType } from '../notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import AvatarSelector from './avatar-selector.svelte';
 
   export let user: UserResponseDto;
 
+  let isShowSelectAvatar = false;
+
   const dispatch = createEventDispatcher();
+
+  const handleSaveProfile = async (color: UserAvatarColor) => {
+    try {
+      if (user.profileImagePath !== '') {
+        await api.userApi.deleteProfileImage();
+      }
+
+      const { data } = await api.userApi.updateUser({
+        updateUserDto: {
+          id: user.id,
+          email: user.email,
+          name: user.name,
+          avatarColor: color,
+        },
+      });
+
+      user = data;
+      isShowSelectAvatar = false;
+
+      notificationController.show({
+        message: 'Saved profile',
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to save profile');
+    }
+  };
 </script>
 
 <div
@@ -22,8 +54,22 @@
   <div
     class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
   >
-    <UserAvatar size="xl" {user} />
+    <div class="relative">
+      {#key user}
+        <UserAvatar {user} size="xl" />
 
+        <div
+          class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6 border dark:border-immich-dark-primary bg-immich-primary"
+        >
+          <button
+            class="flex items-center justify-center w-full h-full text-white"
+            on:click={() => (isShowSelectAvatar = true)}
+          >
+            <Icon path={mdiPencil} />
+          </button>
+        </div>
+      {/key}
+    </div>
     <div>
       <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
         {user.name}
@@ -51,3 +97,10 @@
     >
   </div>
 </div>
+{#if isShowSelectAvatar}
+  <AvatarSelector
+    {user}
+    on:close={() => (isShowSelectAvatar = false)}
+    on:choose={({ detail: color }) => handleSaveProfile(color)}
+  />
+{/if}

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { mdiClose } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+  import { UserAvatarColor, UserResponseDto } from '@api';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import FullScreenModal from '../full-screen-modal.svelte';
+  import UserAvatar from '../user-avatar.svelte';
+
+  export let user: UserResponseDto;
+
+  const dispatch = createEventDispatcher();
+  const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
+</script>
+
+<FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => dispatch('close')}>
+  <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
+    <div
+      class=" rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg p-4"
+    >
+      <div class="flex items-center">
+        <h1 class="px-4 w-full self-center font-medium text-immich-primary dark:text-immich-dark-primary text-sm">
+          SELECT AVATAR COLOR
+        </h1>
+        <div>
+          <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
+        </div>
+      </div>
+      <div class="flex items-center justify-center p-4 mt-4">
+        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+          {#each colors as color}
+            <button on:click={() => dispatch('choose', color)}>
+              <UserAvatar {user} {color} size="xl" showProfileImage={false} />
+            </button>
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+</FullScreenModal>

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

@@ -124,7 +124,9 @@
             on:mouseleave={() => (shouldShowAccountInfo = false)}
             on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
           >
-            <UserAvatar {user} size="lg" showTitle={false} interactive />
+            {#key user}
+              <UserAvatar {user} size="lg" showTitle={false} interactive />
+            {/key}
           </button>
 
           {#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
@@ -139,7 +141,7 @@
           {/if}
 
           {#if shouldShowAccountInfoPanel}
-            <AccountInfoPanel {user} on:logout={logOut} />
+            <AccountInfoPanel bind:user on:logout={logOut} />
           {/if}
         </div>
       </section>