Improve assignee and person pickers with search, chips and inline person creation

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/ActivityDetailView.vue

@@ -9,6 +9,7 @@ import {
 } from '@/lib/jalali';
 import UiIcon from '@/components/UiIcon.vue';
 import UserAvatar from '@/components/UserAvatar.vue';
+import UserMultiSelect from '@/components/UserMultiSelect.vue';
 import ActivityCommentSheet from '@/components/activities/ActivityCommentSheet.vue';
 import ActivityPostponeSheet from '@/components/activities/ActivityPostponeSheet.vue';
 import type { ActivityDto, ActivityPriority, ActivityType, OrgUserDto } from '@mento/shared';
@@ -288,26 +289,20 @@ onMounted(() => {
             </dt>
             <dd>{{ dueLabel }}</dd>
           </div>
-          <div>
+          <div class="assignees-row">
             <dt>
               <UiIcon name="user" :size="15" />
               مسئولان
             </dt>
             <dd class="person">
-              <template v-if="canReassign">
-                <select
-                  v-model="assignUserIds"
-                  class="assign-select multi"
-                  multiple
-                  :disabled="saving"
-                  @change="reassign"
-                >
-                  <option v-for="u in users" :key="u.id" :value="u.id">
-                    {{ u.fullName }}
-                  </option>
-                </select>
-                <small class="assign-hint">با Ctrl چند نفر را انتخاب کنید</small>
-              </template>
+              <UserMultiSelect
+                v-if="canReassign"
+                v-model="assignUserIds"
+                :users="users"
+                :disabled="saving"
+                :min="1"
+                @change="reassign"
+              />
               <template v-else>
                 {{ assigneeNames }}
               </template>
@@ -610,27 +605,20 @@ dd {
   gap: 0.45rem;
 }
 
-.assign-select {
-  min-height: 2.2rem;
-  min-width: 10rem;
-  max-width: 100%;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  padding: 0 0.55rem;
-  font: inherit;
-  background: #fff;
+.assignees-row {
+  align-items: flex-start;
+  flex-wrap: wrap;
 }
 
-.assign-select.multi {
-  min-height: 5.5rem;
-  padding: 0.35rem;
+.assignees-row dt {
+  padding-top: 0.3rem;
+  flex-shrink: 0;
 }
 
-.assign-hint {
-  display: block;
-  margin-top: 0.3rem;
-  color: #94a3b8;
-  font-size: 0.75rem;
+.assignees-row dd {
+  flex: 1 1 16rem;
+  min-width: 0;
+  font-weight: 500;
 }
 
 .flag.low,