feat(activities): peek at a card from the board

Let people read notes, postpone, and mark an activity done beside the card instead of opening the full page.

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

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

@@ -4,6 +4,7 @@ import {
   CalendarOutlined,
   CheckOutlined,
   DeleteOutlined,
+  EyeOutlined,
   FlagFilled,
   MoreOutlined,
 } from '@ant-design/icons-vue';
@@ -31,6 +32,7 @@ const props = withDefaults(
     copy?: PipelineUiCopy;
     selectMode?: boolean;
     selected?: boolean;
+    peeking?: boolean;
   }>(),
   { copy: () => DEAL_BOARD_COPY },
 );
@@ -80,9 +82,15 @@ const cardStyle = computed(() => ({
   transform: props.dragging ? 'scale(0.98)' : 'none',
   transition: 'opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease',
   margin: 0,
-  background: props.selected ? token.value.colorPrimaryBg : token.value.colorBgContainer,
-  borderColor: props.selected ? token.value.colorPrimary : token.value.colorBorderSecondary,
-  boxShadow: props.dragging ? token.value.boxShadow : token.value.boxShadowTertiary,
+  position: props.peeking ? 'relative' : undefined,
+  zIndex: props.peeking ? 2 : undefined,
+  background: props.selected || props.peeking ? token.value.colorPrimaryBg : token.value.colorBgContainer,
+  borderColor: props.selected || props.peeking ? token.value.colorPrimary : token.value.colorBorderSecondary,
+  boxShadow: props.peeking
+    ? `0 0 0 2px ${token.value.colorPrimary}`
+    : props.dragging
+      ? token.value.boxShadow
+      : token.value.boxShadowTertiary,
 }));
 </script>
 
@@ -124,21 +132,28 @@ const cardStyle = computed(() => ({
           </template>
         </a-button>
         <div :style="{ flex: 1, minWidth: 0 }">
-          <a-typography-text
-            ellipsis
-            :style="{
-              display: 'block',
-              margin: 0,
-              lineHeight: 1.35,
-              cursor: 'pointer',
-              fontSize: `${token.fontSizeSM}px`,
-              fontWeight: 600,
-            }"
-            :title="deal.title"
-            @click.stop="selectMode ? emit('toggleSelect', deal.id) : emit('open', deal.id)"
-          >
-            {{ deal.title }}
-          </a-typography-text>
+          <a-flex align="center" :gap="6" :style="{ minWidth: 0 }">
+            <a-tooltip v-if="copy.quickView && priorityFlag" :title="`اولویت: ${priorityFlag.label}`">
+              <FlagFilled :style="{ color: priorityFlag.color, fontSize: '14px', flexShrink: 0 }" />
+            </a-tooltip>
+            <a-typography-text
+              ellipsis
+              :style="{
+                flex: 1,
+                minWidth: 0,
+                display: 'block',
+                margin: 0,
+                lineHeight: 1.35,
+                cursor: 'pointer',
+                fontSize: `${token.fontSizeSM}px`,
+                fontWeight: 600,
+              }"
+              :title="deal.title"
+              @click.stop="selectMode ? emit('toggleSelect', deal.id) : emit('open', deal.id)"
+            >
+              {{ deal.title }}
+            </a-typography-text>
+          </a-flex>
           <a-typography-text
             v-if="deal.description"
             type="secondary"
@@ -209,7 +224,15 @@ const cardStyle = computed(() => ({
             {{ money.unit }}
           </a-typography-text>
         </a-typography-text>
-        <a-tooltip v-if="priorityFlag" :title="`اولویت: ${priorityFlag.label}`">
+        <a-button
+          v-if="copy.quickView && !selectMode"
+          type="text"
+          aria-label="جزئیات فعالیت"
+          @click.stop="emit('open', deal.id)"
+        >
+          <template #icon><EyeOutlined /></template>
+        </a-button>
+        <a-tooltip v-else-if="priorityFlag" :title="`اولویت: ${priorityFlag.label}`">
           <span :style="{ display: 'inline-flex', flexShrink: 0, lineHeight: 1 }">
             <FlagFilled :style="{ color: priorityFlag.color, fontSize: '16px' }" />
           </span>