club home redesign; deal card menu anchored to button + delete

apps/web/src/views/PipelineBoardView.vue

@@ -42,6 +42,7 @@ const dealClientReadOptions = {
 };
 import { useAuthStore } from '@/stores/auth';
 import { canManageSettings } from '@/lib/roles';
+import { bindMenuDismiss, cardMenuStyle } from '@/lib/anchored-menu';
 
 const route = useRoute();
 const router = useRouter();
@@ -507,10 +508,18 @@ function onImportSettled() {
   pageBusy.value = false;
 }
 
+const menuStyle = ref<Record<string, string> | null>(null);
+
 function onMenuDeal(dealId: string) {
   menuOpenId.value = menuOpenId.value === dealId ? null : dealId;
+  menuStyle.value = menuOpenId.value ? cardMenuStyle(dealId) : null;
 }
 
+const unbindMenuDismiss = bindMenuDismiss(
+  () => menuOpenId.value != null,
+  () => (menuOpenId.value = null),
+);
+
 watch(
   () => route.query.pipelineId,
   (id, prev) => {
@@ -526,6 +535,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+  unbindMenuDismiss();
   window.removeEventListener('drag', onPointerMove);
   window.removeEventListener('dragover', onPointerMove);
 });
@@ -619,7 +629,7 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
       />
     </Teleport>
 
-    <div v-if="menuOpenId" class="menu-pop" role="menu">
+    <div v-if="menuOpenId" class="menu-pop" role="menu" :style="menuStyle ?? undefined">
       <button type="button" role="menuitem" @click="onOpenDeal(menuOpenId)">
         مشاهده معامله
       </button>
@@ -792,6 +802,11 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
   text-align: right;
 }
 
+.menu-pop button:hover {
+  background: var(--surface-2, #f1f5f9);
+  border-radius: calc(var(--radius) - 4px);
+}
+
 .menu-pop button.danger {
   color: var(--danger);
 }

apps/web/src/views/ProjectBoardView.vue

@@ -31,6 +31,7 @@ import type {
 import { brand } from '@mento/shared';
 import { useAuthStore } from '@/stores/auth';
 import { canManageSettings } from '@/lib/roles';
+import { bindMenuDismiss, cardMenuStyle } from '@/lib/anchored-menu';
 
 const route = useRoute();
 const router = useRouter();
@@ -440,10 +441,18 @@ function onImportSettled() {
   pageBusy.value = false;
 }
 
+const menuStyle = ref<Record<string, string> | null>(null);
+
 function onMenuCard(cardId: string) {
   menuOpenId.value = menuOpenId.value === cardId ? null : cardId;
+  menuStyle.value = menuOpenId.value ? cardMenuStyle(cardId) : null;
 }
 
+const unbindMenuDismiss = bindMenuDismiss(
+  () => menuOpenId.value != null,
+  () => (menuOpenId.value = null),
+);
+
 watch(
   () => route.query.boardId,
   (id, prev) => {
@@ -459,6 +468,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+  unbindMenuDismiss();
   window.removeEventListener('drag', onPointerMove);
   window.removeEventListener('dragover', onPointerMove);
 });
@@ -548,7 +558,7 @@ onBeforeUnmount(() => {
       />
     </Teleport>
 
-    <div v-if="menuOpenId" class="menu-pop" role="menu">
+    <div v-if="menuOpenId" class="menu-pop" role="menu" :style="menuStyle ?? undefined">
       <button type="button" role="menuitem" @click="onOpenCard(menuOpenId)">
         مشاهده کارت
       </button>