feat: edit profile on drawer

src/components/home/PersonCard.vue

@@ -21,9 +21,11 @@ defineProps<{
   noDetail?: boolean;
   noBg?: boolean;
   detailColumnCount?: number;
+  canEditProfile?: boolean;
 }>();
 
 defineEmits<{
+  (e: 'editProfile'): void;
   (e: 'deleteCard', id: string): void;
   (
     e: 'updateCard',
@@ -160,6 +162,12 @@ defineEmits<{
             bordered
             class="avatar"
             style="border: 2px solid var(--border-color)"
+            :class="{ 'edit-profile': canEditProfile }"
+            @click="
+              () => {
+                if (canEditProfile) $emit('editProfile');
+              }
+            "
           >
             <q-img
               :src="v.img"
@@ -360,4 +368,13 @@ defineEmits<{
   background-color: var(--surface-2);
   text-wrap: nowrap;
 }
+
+.edit-profile {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 80%;
+  }
+}
 </style>