feat: Add user profile container

app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue

@@ -6,12 +6,7 @@
       <h2 class="font-medium text-slate-900 dark:text-white text-2xl">
         Profile Settings
       </h2>
-      <div>
-        <span class="text-slate-900 dark:text-slate-25 text-normal font-medium">
-          Profile picture
-        </span>
-        <thumbnail src="" username="John Doe" size="72px" />
-      </div>
+      <user-profile-picture username="John Doe" size="72px" />
       <personal-wrapper
         header="Personal message signature"
         description="Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes."
@@ -103,7 +98,7 @@
 </template>
 <script setup>
 import MessageSignature from '../profile/MessageSignature.vue';
-import Thumbnail from './Thumbnail.vue';
+import UserProfilePicture from './UserProfilePicture.vue';
 import PersonalWrapper from './PersonalWrapper.vue';
 import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
 import FormInput from 'v3/components/Form/Input.vue';

app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="flex flex-col gap-2 mt-2">
+    <span class="font-medium text-slate-900 dark:text-slate-25 text-normal">
+      Profile picture
+    </span>
+    <div
+      class="relative rounded-xl h-[72px] w-[72px]"
+      :title="title"
+      @mouse-over="showUpload"
+    >
+      <img
+        class="rounded-xl h-[72px] w-[72px]"
+        src="https://i.pravatar.cc/300"
+        draggable="false"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <div
+        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
+      >
+        <fluent-icon
+          icon="dismiss"
+          size="16"
+          class="text-slate-800 dark:text-slate-200"
+        />
+      </div>
+      <div
+        class="absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+      >
+        <fluent-icon
+          icon="avatar-upload"
+          size="32"
+          class="text-white dark:text-white"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      hasImageLoaded: false,
+      imgError: false,
+      showUploadIcon: false,
+    };
+  },
+  computed: {
+    shouldShowImage() {
+      if (!this.src) {
+        return false;
+      }
+      if (this.hasImageLoaded) {
+        return !this.imgError;
+      }
+      return false;
+    },
+  },
+  watch: {
+    src(value, oldValue) {
+      if (value !== oldValue && this.imgError) {
+        this.imgError = false;
+      }
+    },
+  },
+  methods: {
+    onImgError() {
+      this.imgError = true;
+    },
+    onImgLoad() {
+      this.hasImageLoaded = true;
+    },
+    showUpload() {
+      this.showUploadIcon = true;
+    },
+  },
+};
+</script>