Creating & Edit profile

apps/web/src/components/UiIcon.vue

@@ -39,6 +39,7 @@ defineProps<{
     | 'flag'
     | 'refresh'
     | 'x'
+    | 'x-circle'
     | 'mic'
     | 'trash'
     | 'stop'
@@ -50,6 +51,7 @@ defineProps<{
     | 'layers'
     | 'target'
     | 'pencil'
+    | 'edit'
     | 'grid'
     | 'list'
     | 'eye'
@@ -61,7 +63,8 @@ defineProps<{
     | 'medal'
     | 'logout'
     | 'pulse'
-    | 'sliders';
+    | 'sliders'
+    | 'camera';
   size?: number;
 }>();
 </script>
@@ -253,6 +256,10 @@ defineProps<{
     <template v-else-if="name === 'x'">
       <path d="M6 6 18 18M18 6 6 18" />
     </template>
+    <template v-else-if="name === 'x-circle'">
+      <circle cx="12" cy="12" r="9" />
+      <path d="m9 9 6 6M15 9l-6 6" />
+    </template>
     <template v-else-if="name === 'mic'">
       <rect x="9" y="3.5" width="6" height="10" rx="3" />
       <path d="M7 11.5a5 5 0 0 0 10 0" />
@@ -291,6 +298,10 @@ defineProps<{
       <path d="M12 20h9" />
       <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
     </template>
+    <template v-else-if="name === 'edit'">
+      <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
+    </template>
     <template v-else-if="name === 'grid'">
       <rect x="3.5" y="3.5" width="7" height="7" rx="1.2" />
       <rect x="13.5" y="3.5" width="7" height="7" rx="1.2" />
@@ -359,6 +370,10 @@ defineProps<{
       <path d="M4 7h16M4 17h16" />
       <path d="M8 4.5v5M16 14.5v5" />
     </template>
+    <template v-else-if="name === 'camera'">
+      <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z" />
+      <circle cx="12" cy="13" r="3" />
+    </template>
   </svg>
 </template>
 

apps/web/src/components/dashboard/HomeHero.vue

@@ -4,6 +4,7 @@ import { RouterLink } from 'vue-router';
 import UiIcon from '@/components/UiIcon.vue';
 import MentoAiAvatar from '@/components/brand/MentoAiAvatar.vue';
 import { brand, type HomeDashboardAlertDto } from '@mento/shared';
+import { useAuthStore } from '@/stores/auth';
 
 const props = defineProps<{
   greeting: string;
@@ -18,6 +19,8 @@ const emit = defineEmits<{
   ask: [];
 }>();
 
+const auth = useAuthStore();
+
 type HeroChip = {
   key: string;
   tone: HomeDashboardAlertDto['tone'];
@@ -86,7 +89,7 @@ function alertIcon(tone: string) {
     <div class="hero-body">
       <div class="hero-greet">
         <span class="hero-avatar">
-          <img src="/brand/user-avatar.png" :alt="firstName" width="72" height="72" />
+          <img :src="auth.avatarSrc" :alt="firstName" width="72" height="72" />
           <i class="online" />
         </span>
         <div class="greet-text">

apps/web/src/components/person-profile/ProfileMoreMenu.vue

@@ -69,6 +69,12 @@ function close() {
   open.value = false;
 }
 
+function scheduleClose() {
+  window.setTimeout(() => {
+    close();
+  }, 0);
+}
+
 function onSelect(key: string) {
   emit('select', key);
   nextTick(() => {
@@ -85,7 +91,7 @@ function onSelect(key: string) {
       type="button"
       aria-label="منوی بیشتر"
       :aria-expanded="open"
-      @click="toggle"
+      @click.stop="toggle"
     >
       <UiIcon name="dots-v" :size="18" />
     </button>
@@ -107,7 +113,7 @@ function onSelect(key: string) {
               :class="{ danger: item.danger }"
               role="menuitem"
               :to="item.to"
-              @click.stop="close"
+              @click.stop="scheduleClose"
             >
               {{ item.label }}
             </RouterLink>