feat(activities): editable stages with tab and kanban views

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

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

@@ -32,6 +32,7 @@ const emit = defineEmits<{
   move: [stageId: string, dir: -1 | 1];
   columnDragStart: [stageId: string, event: DragEvent];
   columnDragEnd: [];
+  loadMore: [stageId: string];
 }>();
 
 const renaming = ref(false);
@@ -153,8 +154,9 @@ onBeforeUnmount(() => {
         >
           {{ stage.title }}
         </h2>
+        <small v-if="stage.badge && !renaming" class="stage-badge">{{ stage.badge }}</small>
       </div>
-      <span class="count">{{ toFaItemCount(stage.deals.length, copy.itemNoun) }}</span>
+      <span class="count">{{ toFaItemCount(stage.total ?? stage.deals.length, copy.itemNoun) }}</span>
       <div v-if="canManage" ref="menuRoot" class="more-wrap">
         <button
           type="button"
@@ -225,6 +227,15 @@ onBeforeUnmount(() => {
         />
       </div>
       <p v-if="!stage.deals.length" class="empty">{{ copy.empty }}</p>
+      <button
+        v-if="stage.hasMore"
+        type="button"
+        class="load-more"
+        :disabled="stage.loadingMore"
+        @click="emit('loadMore', stage.id)"
+      >
+        {{ stage.loadingMore ? 'در حال بارگذاری…' : 'نمایش بیشتر' }}
+      </button>
     </div>
 
     <AddDealButton :accent="stage.color" :label="copy.addItem" @add="emit('addDeal', stage.id)" />
@@ -425,6 +436,38 @@ onBeforeUnmount(() => {
   font-size: 0.85rem;
 }
 
+.stage-badge {
+  flex: 0 0 auto;
+  padding: 0.05rem 0.4rem;
+  border-radius: 999px;
+  background: var(--stage-soft);
+  color: var(--stage-text);
+  font-size: 0.66rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.load-more {
+  min-height: var(--control-h);
+  border: 1px dashed var(--stage-border);
+  border-radius: var(--radius);
+  background: #fff;
+  color: var(--stage-text);
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.load-more:hover:not(:disabled) {
+  background: var(--stage-soft);
+}
+
+.load-more:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
 @container pipeline (max-width: 720px) {
   .column {
     flex: 0 0 min(20rem, 86cqi);