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

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

apps/web/src/views/DealFormView.vue

@@ -12,6 +12,7 @@ import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import MoneyInput from '@/components/MoneyInput.vue';
 import UiIcon from '@/components/UiIcon.vue';
 import UserAvatar from '@/components/UserAvatar.vue';
+import UserMultiSelect from '@/components/UserMultiSelect.vue';
 import { UiButton, UiField, UiInput, UiPageHeader, UiSelect } from '@/components/ui';
 import type {
   CompanyDto,
@@ -628,18 +629,9 @@ onMounted(load);
               </ul>
             </div>
             <div class="field">
-              <label for="deal-assignees">مسئولان مشترک</label>
-              <select
-                id="deal-assignees"
-                v-model="selectedAssigneeIds"
-                multiple
-                class="multi"
-              >
-                <option v-for="u in users" :key="u.id" :value="u.id">
-                  {{ u.fullName }}
-                </option>
-              </select>
-              <small class="hint">علاوه بر مسئول اصلی؛ با Ctrl چند نفر را انتخاب کنید.</small>
+              <label>مسئولان مشترک</label>
+              <UserMultiSelect v-model="selectedAssigneeIds" :users="users" />
+              <small class="hint">علاوه بر مسئول اصلی.</small>
             </div>
           </div>
         </section>
@@ -1340,15 +1332,6 @@ h1 {
   gap: 0.45rem;
 }
 
-select.multi {
-  min-height: 110px;
-  padding: 0.4rem;
-  width: 100%;
-  border: 1px solid #e2e8f0;
-  border-radius: var(--radius);
-  background: #fff;
-}
-
 .hint {
   color: #64748b;
   font-size: 0.8rem;