feat(ui): modals close only via Esc/X/cancel; standard 3:1 form cover processing

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

apps/web/src/views/ConversationsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useEscClose } from '@/lib/modal-stack';
 import { matchesSearch } from '@/lib/search';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
@@ -1638,12 +1639,15 @@ function toggleChannelMember(id: string) {
   }
 }
 
-/** در دسکتاپ با کلیک بیرون مودال بسته نشود (انتخاب اعضا قطع نشود) */
-function closeModalOnBackdrop(close: () => void) {
-  if (typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches) {
-    close();
-  }
-}
+useEscClose(() => showNewDm.value, () => { showNewDm.value = false; });
+useEscClose(() => showNewGroup.value, () => { showNewGroup.value = false; });
+useEscClose(() => showNewChannel.value, () => { showNewChannel.value = false; });
+useEscClose(() => activityFromMsg.value, () => closeActivityFromMsg());
+useEscClose(() => showCrmLink.value, () => { showCrmLink.value = false; });
+useEscClose(() => showAiAssist.value, () => { showAiAssist.value = false; });
+useEscClose(() => showMembers.value, () => { showMembers.value = false; });
+useEscClose(() => showForward.value, () => { showForward.value = false; });
+useEscClose(() => lightboxUrl.value, () => { lightboxUrl.value = ''; });
 
 function openNewDm() {
   peerPickerQuery.value = '';
@@ -2507,9 +2511,11 @@ onUnmounted(() => {
       v-if="showNewDm"
       class="modal"
       open
-      @click.self="closeModalOnBackdrop(() => (showNewDm = false))"
     >
       <div class="modal-card wide">
+        <button type="button" class="modal-x" aria-label="???? (Esc)" title="???? (Esc)" @click="(() => (showNewDm = false))()">
+          <UiIcon name="x" :size="18" />
+        </button>
         <h3>گفتگوی جدید</h3>
         <p class="hint">همکار موردنظر را انتخاب کنید</p>
         <label class="peer-search">
@@ -2552,9 +2558,11 @@ onUnmounted(() => {
       v-if="showNewGroup"
       class="modal"
       open
-      @click.self="closeModalOnBackdrop(() => (showNewGroup = false))"
     >
       <div class="modal-card wide member-picker-modal">
+        <button type="button" class="modal-x" aria-label="???? (Esc)" title="???? (Esc)" @click="(() => (showNewGroup = false))()">
+          <UiIcon name="x" :size="18" />
+        </button>
         <h3>گروه جدید</h3>
         <input v-model="groupName" type="text" placeholder="نام گروه" />
         <div class="picker-head">
@@ -2624,9 +2632,11 @@ onUnmounted(() => {
       v-if="showNewChannel"
       class="modal"
       open
-      @click.self="closeModalOnBackdrop(() => (showNewChannel = false))"
     >
       <div class="modal-card wide member-picker-modal">
+        <button type="button" class="modal-x" aria-label="???? (Esc)" title="???? (Esc)" @click="(() => (showNewChannel = false))()">
+          <UiIcon name="x" :size="18" />
+        </button>
         <h3>کانال جدید</h3>
         <p class="hint channel-hint">
           کانال یک‌طرفه است؛ فقط شما و مدیران سازمان می‌توانند پیام بفرستند.
@@ -2699,9 +2709,11 @@ onUnmounted(() => {
       v-if="showActivityFromMsg"
       class="modal"
       open
-      @click.self="closeModalOnBackdrop(closeActivityFromMsg)"
     >
       <div class="modal-card activity-sheet">
+        <button type="button" class="modal-x" aria-label="???? (Esc)" title="???? (Esc)" @click="(closeActivityFromMsg)()">
+          <UiIcon name="x" :size="18" />
+        </button>
         <template v-if="!activityCreatedId">
           <h3>تبدیل به فعالیت</h3>
           <p class="hint">از این پیام یک فعالیت در CRM ساخته می‌شود.</p>
@@ -2750,9 +2762,11 @@ onUnmounted(() => {
       v-if="showCrmLink"
       class="modal"
       open
-      @click.self="closeModalOnBackdrop(() => (showCrmLink = false))"
     >
       <div class="modal-card wide">
+        <button type="button" class="modal-x" aria-label="???? (Esc)" title="???? (Esc)" @click="(() => (showCrmLink = false))()">
+          <UiIcon name="x" :size="18" />
+        </button>
         <h3>لینک CRM</h3>
         <p class="hint">شخص، معامله یا تیکت را انتخاب کنید تا در پیام درج شود.</p>
         <div class="crm-kind-tabs" role="tablist">
@@ -2814,9 +2828,11 @@ onUnmounted(() => {
       v-if="showAiAssist"
       class="modal"
       open
-      @click.self="closeModalOnBackdrop(() => (showAiAssist = false))"
     >
       <div class="modal-card wide ai-assist-sheet">
+        <button type="button" class="modal-x" aria-label="???? (Esc)" title="???? (Esc)" @click="(() => (showAiAssist = false))()">
+          <UiIcon name="x" :size="18" />
+        </button>
         <h3>{{ brand.askLabelFa }}</h3>
         <p class="hint">با توجه به CRM و چند پیام اخیر این گفتگو پاسخ می‌دهد؛ می‌توانید پاسخ را در پیش‌نویس درج کنید.</p>
         <AskMentoPanel
@@ -2835,9 +2851,11 @@ onUnmounted(() => {
       v-if="showMembers"
       class="modal"
       open
-      @click.self="closeModalOnBackdrop(() => (showMembers = false))"
     >
       <div class="modal-card wide members-sheet member-picker-modal">
+        <button type="button" class="modal-x" aria-label="???? (Esc)" title="???? (Esc)" @click="(() => (showMembers = false))()">
+          <UiIcon name="x" :size="18" />
+        </button>
         <h3>اعضای {{ activeRoom ? roomTitle(activeRoom) : 'گفتگو' }}</h3>
         <p v-if="activeRoom?.kind === 'channel'" class="hint channel-hint">
           ادمین‌ها می‌توانند در کانال پیام بفرستند؛ بقیه فقط مشاهده می‌کنند.
@@ -2898,9 +2916,11 @@ onUnmounted(() => {
       v-if="showForward"
       class="modal"
       open
-      @click.self="closeModalOnBackdrop(() => (showForward = false))"
     >
       <div class="modal-card">
+        <button type="button" class="modal-x" aria-label="???? (Esc)" title="???? (Esc)" @click="(() => (showForward = false))()">
+          <UiIcon name="x" :size="18" />
+        </button>
         <h3>ارسال برای دیگری</h3>
         <p class="hint">{{ toFaDigits(selectedCount) }} پیام انتخاب شده</p>
         <div v-if="!forwardTargets.length" class="muted">گفتگوی دیگری برای ارسال نیست.</div>
@@ -2923,7 +2943,7 @@ onUnmounted(() => {
       </div>
     </dialog>
 
-    <dialog v-if="lightboxUrl" class="lightbox" open @click.self="lightboxUrl = ''">
+    <dialog v-if="lightboxUrl" class="lightbox" open>
       <button type="button" class="lightbox-close" aria-label="بستن" @click="lightboxUrl = ''">
         <UiIcon name="x" :size="18" />
       </button>
@@ -4262,7 +4282,25 @@ onUnmounted(() => {
   place-items: center;
   padding: 1rem;
 }
+.modal-x {
+  position: absolute;
+  top: 0.9rem;
+  left: 0.9rem;
+  z-index: 2;
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface);
+  color: var(--muted);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.modal-x:hover { background: var(--surface-subtle); color: var(--ink); }
+.modal-card > h3 { padding-inline-end: 2.6rem; }
 .modal-card {
+  position: relative;
   background: var(--surface);
   border-radius: 18px;
   padding: 1.25rem;