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

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

apps/web/src/components/UserMultiSelect.vue

@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import UiIcon from '@/components/UiIcon.vue';
+import UserAvatar from '@/components/UserAvatar.vue';
+
+type PickUser = { id: string; fullName: string };
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[];
+    users: PickUser[];
+    disabled?: boolean;
+    /** حداقل تعداد انتخاب (حذف آخرین نفر غیرفعال می‌شود) */
+    min?: number;
+    addLabel?: string;
+    emptyLabel?: string;
+  }>(),
+  { disabled: false, min: 0, addLabel: 'افزودن', emptyLabel: 'کسی انتخاب نشده' },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [ids: string[]];
+  /** پس از بستن لیست یا حذف یک نفر، اگر انتخاب تغییر کرده باشد */
+  change: [ids: string[]];
+}>();
+
+const open = ref(false);
+const query = ref('');
+const root = ref<HTMLElement | null>(null);
+const searchInput = ref<HTMLInputElement | null>(null);
+let snapshot: string[] = [];
+
+const byId = computed(() => new Map(props.users.map((u) => [u.id, u])));
+const selected = computed(() =>
+  props.modelValue.map((id) => byId.value.get(id) ?? { id, fullName: '—' }),
+);
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  if (!q) return props.users;
+  return props.users.filter((u) => u.fullName.toLowerCase().includes(q));
+});
+const canRemove = computed(() => props.modelValue.length > props.min);
+
+function sameSet(a: string[], b: string[]) {
+  return a.length === b.length && a.every((id) => b.includes(id));
+}
+
+function openList() {
+  if (props.disabled) return;
+  snapshot = [...props.modelValue];
+  query.value = '';
+  open.value = true;
+  void nextTick(() => searchInput.value?.focus());
+}
+
+function closeList() {
+  if (!open.value) return;
+  open.value = false;
+  if (!sameSet(snapshot, props.modelValue)) emit('change', [...props.modelValue]);
+}
+
+function toggle(id: string) {
+  const has = props.modelValue.includes(id);
+  if (has && !canRemove.value) return;
+  const next = has ? props.modelValue.filter((x) => x !== id) : [...props.modelValue, id];
+  emit('update:modelValue', next);
+}
+
+function remove(id: string) {
+  if (props.disabled || !canRemove.value) return;
+  const next = props.modelValue.filter((x) => x !== id);
+  emit('update:modelValue', next);
+  if (!open.value) emit('change', next);
+}
+
+function onDocClick(e: MouseEvent) {
+  if (open.value && root.value && !root.value.contains(e.target as Node)) closeList();
+}
+
+function onKey(e: KeyboardEvent) {
+  if (e.key === 'Escape') closeList();
+}
+
+onMounted(() => document.addEventListener('mousedown', onDocClick));
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick));
+</script>
+
+<template>
+  <div ref="root" class="ums" :class="{ disabled }" @keydown="onKey">
+    <div class="chips">
+      <span v-for="u in selected" :key="u.id" class="chip">
+        <UserAvatar :name="u.fullName" :size="22" />
+        <span class="chip-name">{{ u.fullName }}</span>
+        <button
+          v-if="canRemove && !disabled"
+          type="button"
+          class="chip-x"
+          :aria-label="`حذف ${u.fullName}`"
+          @click.stop="remove(u.id)"
+        >
+          <UiIcon name="x" :size="12" />
+        </button>
+      </span>
+      <span v-if="!selected.length" class="empty">{{ emptyLabel }}</span>
+      <button
+        type="button"
+        class="add"
+        :disabled="disabled"
+        :aria-expanded="open"
+        @click.stop="open ? closeList() : openList()"
+      >
+        <UiIcon name="user-plus" :size="14" />
+        {{ addLabel }}
+      </button>
+    </div>
+
+    <div v-if="open" class="pop" @click.stop>
+      <label class="search">
+        <UiIcon name="search" :size="14" />
+        <input ref="searchInput" v-model="query" type="search" placeholder="جستجوی نام…" />
+      </label>
+      <ul class="list">
+        <li v-for="u in filtered" :key="u.id">
+          <button
+            type="button"
+            class="row"
+            :class="{ on: modelValue.includes(u.id) }"
+            @click="toggle(u.id)"
+          >
+            <span class="check" aria-hidden="true">
+              <UiIcon v-if="modelValue.includes(u.id)" name="check-plain" :size="12" />
+            </span>
+            <UserAvatar :name="u.fullName" :size="26" />
+            <span class="row-name">{{ u.fullName }}</span>
+          </button>
+        </li>
+        <li v-if="!filtered.length" class="none">کاربری پیدا نشد.</li>
+      </ul>
+      <div class="foot">
+        <span>{{ modelValue.length.toLocaleString('fa-IR') }} نفر انتخاب شده</span>
+        <button type="button" class="done" @click="closeList">تأیید</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ums {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.18rem 0.25rem;
+  padding-inline-end: 0.5rem;
+  border-radius: 999px;
+  background: #f0fdfa;
+  border: 1px solid #ccfbf1;
+  color: #0f172a;
+  font-size: 0.82rem;
+  font-weight: 600;
+  max-width: 100%;
+}
+
+.chip-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chip-x {
+  width: 20px;
+  height: 20px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #64748b;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  padding: 0;
+}
+
+.chip-x:hover {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.empty {
+  color: #94a3b8;
+  font-size: 0.82rem;
+  font-weight: 500;
+}
+
+.add {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  height: 30px;
+  padding: 0 0.7rem;
+  border: 1px dashed #5eead4;
+  border-radius: 999px;
+  background: #fff;
+  color: #0f766e;
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.add:hover:not(:disabled) {
+  background: #f0fdfa;
+}
+
+.add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pop {
+  position: absolute;
+  top: calc(100% + 6px);
+  inset-inline-start: 0;
+  z-index: 30;
+  width: min(18rem, calc(100vw - 2rem));
+  background: #fff;
+  border-radius: var(--radius);
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
+  border: 1px solid #f1f5f9;
+  display: grid;
+  overflow: hidden;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0.5rem;
+  padding: 0 0.6rem;
+  height: 2.2rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  color: #94a3b8;
+}
+
+.search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  font: inherit;
+  font-size: 0.85rem;
+  background: transparent;
+  color: #0f172a;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0.35rem 0.35rem;
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.42rem 0.5rem;
+  border: 0;
+  border-radius: 10px;
+  background: none;
+  font: inherit;
+  font-size: 0.86rem;
+  font-weight: 500;
+  color: #0f172a;
+  text-align: start;
+  cursor: pointer;
+}
+
+.row:hover {
+  background: #f8fafc;
+}
+
+.row.on {
+  background: #f0fdfa;
+  font-weight: 700;
+}
+
+.check {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: 5px;
+  border: 1.5px solid #cbd5e1;
+  display: grid;
+  place-items: center;
+  color: #fff;
+}
+
+.row.on .check {
+  background: #14b8a6;
+  border-color: #14b8a6;
+}
+
+.row-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.none {
+  padding: 0.75rem;
+  color: #94a3b8;
+  font-size: 0.84rem;
+  text-align: center;
+}
+
+.foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.65rem;
+  border-top: 1px solid #f1f5f9;
+  font-size: 0.78rem;
+  color: #64748b;
+}
+
+.done {
+  border: 0;
+  border-radius: 8px;
+  background: #14b8a6;
+  color: #fff;
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 700;
+  padding: 0.35rem 0.9rem;
+  cursor: pointer;
+}
+</style>

apps/web/src/components/ui/UiModal.vue

@@ -1,3 +1,7 @@
+<script lang="ts">
+let openModalCount = 0;
+</script>
+
 <script setup lang="ts">
 import { onUnmounted, watch } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
@@ -24,16 +28,22 @@ const emit = defineEmits<{
   close: [];
 }>();
 
+let locked = false;
+
+function setLock(next: boolean) {
+  if (next === locked) return;
+  locked = next;
+  openModalCount = Math.max(0, openModalCount + (next ? 1 : -1));
+  document.body.style.overflow = openModalCount > 0 ? 'hidden' : '';
+}
+
 watch(
   () => props.open,
-  (open) => {
-    document.body.style.overflow = open ? 'hidden' : '';
-  },
+  (open) => setLock(open),
+  { immediate: true },
 );
 
-onUnmounted(() => {
-  document.body.style.overflow = '';
-});
+onUnmounted(() => setLock(false));
 
 function isMobileViewport() {
   return typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches;