From 71b3a7255ae30bd6444afadf8233bd6ad6033d42 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Mon, 5 Oct 2026 18:19:37 +0330
Subject: [PATCH] Polish activity person picker layout and move add-person
 action beside the label

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/views/ActivityFormView.vue | 146 +++++++++++++++++++++---
 1 file changed, 129 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/views/ActivityFormView.vue b/apps/web/src/views/ActivityFormView.vue
index 8b87513..5334eff 100644
--- a/apps/web/src/views/ActivityFormView.vue
+++ b/apps/web/src/views/ActivityFormView.vue
@@ -643,9 +643,17 @@ watch([id, isNew], () => void load(), { immediate: true });
 
           <div class="card">
             <div class="field">
-              <label>شخص / مشتری مرتبط <i>*</i></label>
+              <div class="label-row">
+                <label>شخص / مشتری مرتبط <i>*</i></label>
+                <button type="button" class="person-add" @click.stop="openNewPerson">
+                  <UiIcon name="user-plus" :size="14" />
+                  افزودن شخص جدید
+                </button>
+              </div>
               <button class="picker person-pick" type="button" @click.stop="togglePersonMenu">
-                <UserAvatar :name="selectedPerson?.fullName || 'مشتری'" src="" :size="32" />
+                <span class="person-ico" :class="{ on: selectedPerson }">
+                  <UiIcon name="user" :size="16" />
+                </span>
                 <span class="who">
                   <b :class="{ ghost: !selectedPerson }">{{ selectedPerson?.fullName || 'انتخاب کنید' }}</b>
                   <small v-if="personSub">{{ personSub }}</small>
@@ -667,25 +675,33 @@ watch([id, isNew], () => void load(), { immediate: true });
                   <li v-for="p in personOptions" :key="p.id">
                     <button
                       type="button"
+                      class="person-row"
                       :class="{ on: p.id === personId }"
                       @click="pickPerson(p)"
                     >
-                      <UserAvatar :name="p.fullName" src="" :size="28" />
-                      <span class="who">
+                      <span class="row-text">
                         <b>{{ p.fullName }}</b>
-                        <small>{{ p.company?.name || p.mobile || '' }}</small>
+                        <small v-if="p.company?.name">{{ p.company.name }}</small>
                       </span>
+                      <span v-if="p.mobile || p.phone" class="row-phone" dir="ltr">
+                        {{ p.mobile || p.phone }}
+                      </span>
+                      <UiIcon v-if="p.id === personId" name="check-plain" :size="14" class="row-check" />
                     </button>
                   </li>
                   <li v-if="personSearching" class="person-empty">در حال جستجو…</li>
                   <li v-else-if="!personOptions.length" class="person-empty">
                     شخصی پیدا نشد.
+                    <button
+                      v-if="personQuery.trim()"
+                      type="button"
+                      class="empty-add"
+                      @click="openNewPerson"
+                    >
+                      افزودن «{{ personQuery.trim() }}» به‌عنوان شخص جدید
+                    </button>
                   </li>
                 </ul>
-                <button type="button" class="person-add" @click="openNewPerson">
-                  <UiIcon name="user-plus" :size="16" />
-                  {{ personQuery.trim() ? `افزودن «${personQuery.trim()}» به‌عنوان شخص جدید` : 'افزودن شخص جدید' }}
-                </button>
               </div>
             </div>
             <div v-if="personDeals.length > 1" class="field deal-field">
@@ -1156,12 +1172,56 @@ watch([id, isNew], () => void load(), { immediate: true });
   background: #f8fafc;
 }
 
+.label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.person-add {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 0;
+  background: none;
+  padding: 0.15rem 0.35rem;
+  border-radius: 6px;
+  font: inherit;
+  font-size: var(--fs-xs);
+  font-weight: 700;
+  color: #0f766e;
+  cursor: pointer;
+}
+
+.person-add:hover {
+  background: #f0fdfa;
+}
+
+.person-ico {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  background: #f1f5f9;
+  color: #94a3b8;
+}
+
+.person-ico.on {
+  background: #ccfbf1;
+  color: #0f766e;
+}
+
 .person-menu {
   max-height: none;
   overflow: visible;
   display: grid;
-  gap: 0.3rem;
+  gap: 0.35rem;
   padding: 0.45rem;
+  z-index: 30;
+  border: 1px solid #e2e8f0;
 }
 
 .person-search {
@@ -1198,26 +1258,78 @@ watch([id, isNew], () => void load(), { immediate: true });
   overflow-y: auto;
 }
 
-.person-list button.on {
+.menu .person-row {
+  gap: 0.6rem;
+  padding: 0.5rem 0.6rem;
+  border-radius: 8px;
+}
+
+.menu .person-row.on {
   background: #f0fdfa;
 }
 
+.row-text {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 0.1rem;
+}
+
+.row-text b {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #0f172a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row-text small {
+  font-size: 0.74rem;
+  color: #94a3b8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row-phone {
+  flex-shrink: 0;
+  font-size: 0.78rem;
+  color: #64748b;
+  font-variant-numeric: tabular-nums;
+}
+
+.row-check {
+  flex-shrink: 0;
+  color: #0d9488;
+}
+
+.person-list li + li {
+  border-top: 1px solid #f8fafc;
+}
+
 .person-empty {
-  padding: 0.7rem;
+  padding: 0.8rem;
+  display: grid;
+  gap: 0.5rem;
+  justify-items: center;
   text-align: center;
   color: #94a3b8;
   font-size: 0.85rem;
 }
 
-.menu .person-add {
-  border-top: 1px solid #f1f5f9;
-  border-radius: 0 0 var(--radius) var(--radius);
+.menu .empty-add {
+  width: auto;
+  justify-content: center;
+  border: 1px dashed #5eead4;
+  border-radius: 999px;
+  padding: 0.4rem 0.9rem;
   color: #0f766e;
   font-weight: 700;
-  font-size: 0.86rem;
+  font-size: 0.8rem;
 }
 
-.menu .person-add:hover {
+.menu .empty-add:hover {
   background: #f0fdfa;
 }