feat(activities): edit detail in place and tighten the board peek

Let people change activity fields and their own notes with photos from the detail page, open full detail from the card title, and toggle the side peek with a chevron.

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

apps/web/src/components/pipeline/DealCard.vue

@@ -4,7 +4,6 @@ import {
   CalendarOutlined,
   CheckOutlined,
   DeleteOutlined,
-  EyeOutlined,
   FlagFilled,
   MoreOutlined,
 } from '@ant-design/icons-vue';
@@ -33,6 +32,8 @@ const props = withDefaults(
     selectMode?: boolean;
     selected?: boolean;
     peeking?: boolean;
+    /** پنل کناری همین کارت باز است؛ فلش را برمی‌گرداند. جدا از هایلایتِ بعد از بستن. */
+    previewing?: boolean;
   }>(),
   { copy: () => DEAL_BOARD_COPY },
 );
@@ -41,6 +42,7 @@ const emit = defineEmits<{
   dragStart: [deal: PipelineDeal, event: DragEvent];
   dragEnd: [];
   open: [dealId: string];
+  detail: [dealId: string];
   menu: [dealId: string];
   toggleSelect: [dealId: string];
   bulkDelete: [];
@@ -76,6 +78,25 @@ const priorityFlag = computed(() =>
   props.deal.priority ? PRIORITY_FLAG[props.deal.priority] : null,
 );
 
+function onTitleClick() {
+  if (props.selectMode) {
+    emit('toggleSelect', props.deal.id);
+    return;
+  }
+  if (props.copy.quickView) emit('detail', props.deal.id);
+  else emit('open', props.deal.id);
+}
+
+const chevronStyle = computed(() => ({
+  display: 'inline-block',
+  width: '0.42rem',
+  height: '0.42rem',
+  borderRight: '1.6px solid currentColor',
+  borderBottom: '1.6px solid currentColor',
+  transform: props.previewing ? 'rotate(-45deg)' : 'rotate(135deg)',
+  transition: 'transform 0.15s ease',
+}));
+
 const cardStyle = computed(() => ({
   cursor: props.selectMode ? 'pointer' : 'grab',
   opacity: props.dragging ? 0.4 : 1,
@@ -149,7 +170,8 @@ const cardStyle = computed(() => ({
                 fontWeight: 600,
               }"
               :title="deal.title"
-              @click.stop="selectMode ? emit('toggleSelect', deal.id) : emit('open', deal.id)"
+              @click.stop="onTitleClick"
+              @dblclick.stop
             >
               {{ deal.title }}
             </a-typography-text>
@@ -227,10 +249,12 @@ const cardStyle = computed(() => ({
         <a-button
           v-if="copy.quickView && !selectMode"
           type="text"
-          aria-label="جزئیات فعالیت"
+          :aria-label="previewing ? 'بستن پیش‌نمایش' : 'پیش‌نمایش فعالیت'"
+          :aria-expanded="previewing"
+          :style="{ color: token.colorTextSecondary }"
           @click.stop="emit('open', deal.id)"
         >
-          <template #icon><EyeOutlined /></template>
+          <template #icon><i class="chev" aria-hidden="true" :style="chevronStyle" /></template>
         </a-button>
         <a-tooltip v-else-if="priorityFlag" :title="`اولویت: ${priorityFlag.label}`">
           <span :style="{ display: 'inline-flex', flexShrink: 0, lineHeight: 1 }">