Unify the web UI on shared controls and let pipeline columns be managed on the board.

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

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

@@ -1,14 +1,18 @@
 <script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
 import AddDealButton from './AddDealButton.vue';
 import DealCard from './DealCard.vue';
 import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
 import { PIPELINE_ACCENT, toFaDealCount } from '@/lib/pipeline-board';
 
-defineProps<{
+const props = defineProps<{
   stage: PipelineStage;
   draggingId: string | null;
   dropActive: boolean;
+  canManage?: boolean;
+  isFirst?: boolean;
+  isLast?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -19,8 +23,19 @@ const emit = defineEmits<{
   addDeal: [stageId: string];
   openDeal: [dealId: string];
   menuDeal: [dealId: string];
+  rename: [stageId: string, title: string];
+  delete: [stageId: string];
+  move: [stageId: string, dir: -1 | 1];
+  columnDragStart: [stageId: string, event: DragEvent];
+  columnDragEnd: [];
 }>();
 
+const renaming = ref(false);
+const draft = ref('');
+const titleInput = ref<HTMLInputElement | null>(null);
+const menuOpen = ref(false);
+const menuRoot = ref<HTMLElement | null>(null);
+
 function onCardDragOver(stageId: string, event: DragEvent) {
   event.preventDefault();
   event.stopPropagation();
@@ -32,6 +47,60 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
   event.stopPropagation();
   emit('drop', stageId, event, index);
 }
+
+function startRename() {
+  if (!props.canManage) return;
+  draft.value = props.stage.title;
+  renaming.value = true;
+  menuOpen.value = false;
+  void nextTick(() => titleInput.value?.select());
+}
+
+function commitRename() {
+  if (!renaming.value) return;
+  const title = draft.value.trim();
+  renaming.value = false;
+  if (!title || title === props.stage.title) return;
+  emit('rename', props.stage.id, title);
+}
+
+function cancelRename() {
+  renaming.value = false;
+  draft.value = props.stage.title;
+}
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value;
+}
+
+function onColumnDragStart(event: DragEvent) {
+  event.dataTransfer?.setData('text/plain', `stage:${props.stage.id}`);
+  event.dataTransfer!.effectAllowed = 'move';
+  emit('columnDragStart', props.stage.id, event);
+}
+
+function onDocPointerDown(event: PointerEvent) {
+  const target = event.target as Node | null;
+  const root = menuRoot.value;
+  if (root && target && !root.contains(target)) menuOpen.value = false;
+}
+
+function onMenuOpened() {
+  document.addEventListener('pointerdown', onDocPointerDown);
+}
+
+function onMenuClosed() {
+  document.removeEventListener('pointerdown', onDocPointerDown);
+}
+
+watch(menuOpen, (open) => {
+  if (open) onMenuOpened();
+  else onMenuClosed();
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocPointerDown);
+});
 </script>
 
 <template>
@@ -48,21 +117,88 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
     @drop.prevent="emit('drop', stage.id, $event)"
   >
     <header class="column-head">
+      <span
+        v-if="canManage"
+        class="grip"
+        draggable="true"
+        title="کشیدن برای جابه‌جایی"
+        aria-label="جابه‌جایی ستون"
+        @dragstart="onColumnDragStart"
+        @dragend="emit('columnDragEnd')"
+      >
+        <UiIcon name="grip" :size="14" />
+      </span>
       <div class="title-wrap">
         <span class="dot" aria-hidden="true" />
-        <h2>{{ stage.title }}</h2>
+        <input
+          v-if="renaming"
+          ref="titleInput"
+          v-model="draft"
+          class="title-input"
+          maxlength="80"
+          aria-label="نام ستون"
+          @keydown.enter.prevent="commitRename"
+          @keydown.esc.prevent="cancelRename"
+          @blur="commitRename"
+        />
+        <h2
+          v-else
+          :class="{ editable: canManage }"
+          :title="canManage ? 'برای تغییر نام کلیک کنید' : undefined"
+          @click="startRename"
+        >
+          {{ stage.title }}
+        </h2>
       </div>
-      <div class="head-actions">
-        <span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
+      <span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
+      <div v-if="canManage" ref="menuRoot" class="more-wrap">
         <button
           type="button"
-          class="plus"
-          aria-label="افزودن معامله به این مرحله"
-          @click="emit('addDeal', stage.id)"
+          class="icon-btn"
+          aria-label="گزینه‌های ستون"
+          :aria-expanded="menuOpen"
+          @click.stop="toggleMenu"
         >
-          <UiIcon name="plus" :size="16" />
+          <UiIcon name="dots-v" :size="16" />
         </button>
+        <div v-if="menuOpen" class="col-menu" role="menu">
+          <button type="button" role="menuitem" @click="startRename">
+            تغییر نام
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            :disabled="isFirst"
+            @click="emit('move', stage.id, -1); menuOpen = false"
+          >
+            انتقال به راست
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            :disabled="isLast"
+            @click="emit('move', stage.id, 1); menuOpen = false"
+          >
+            انتقال به چپ
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            class="danger"
+            @click="emit('delete', stage.id); menuOpen = false"
+          >
+            حذف ستون
+          </button>
+        </div>
       </div>
+      <button
+        type="button"
+        class="plus"
+        aria-label="افزودن معامله به این مرحله"
+        @click="emit('addDeal', stage.id)"
+      >
+        <UiIcon name="plus" :size="16" />
+      </button>
     </header>
 
     <div class="cards" role="list" :aria-label="stage.title">
@@ -98,10 +234,10 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
   flex: 1 1 17.5rem;
   min-width: 17.5rem;
   min-height: 420px;
-  padding: 0.15rem 0.1rem 0.35rem;
-  border-radius: 18px;
-  border: 1px solid transparent;
-  background: transparent;
+  padding: 0.75rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--line);
+  background: #fff;
   transition: background 0.15s ease, border-color 0.15s ease;
 }
 
@@ -113,16 +249,31 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
 .column-head {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.15rem 0.25rem;
+  gap: 0.4rem;
+  padding: 0.1rem 0.1rem 0.15rem;
+}
+
+.grip {
+  display: grid;
+  place-items: center;
+  width: 1.25rem;
+  color: var(--muted);
+  cursor: grab;
+  flex: 0 0 auto;
+  touch-action: none;
+}
+
+.grip:active {
+  cursor: grabbing;
 }
 
 .title-wrap {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 0.45rem;
   min-width: 0;
+  flex: 1;
 }
 
 .dot {
@@ -133,21 +284,34 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
   flex: 0 0 auto;
 }
 
-.column-head h2 {
+.column-head h2,
+.title-input {
   margin: 0;
+  min-width: 0;
+  width: 100%;
   font-size: 0.98rem;
   font-weight: 800;
   color: var(--ink);
+  font: inherit;
+  font-weight: 800;
+}
+
+.column-head h2 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.head-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  flex: 0 0 auto;
+.column-head h2.editable {
+  cursor: text;
+}
+
+.title-input {
+  height: 1.7rem;
+  padding: 0 0.4rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
 }
 
 .count {
@@ -157,24 +321,85 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
   white-space: nowrap;
 }
 
+.more-wrap {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.icon-btn,
 .plus {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 8px;
-  border: 1.5px solid var(--accent);
+  width: var(--control-h);
+  height: var(--control-h);
+  border-radius: var(--radius);
   display: grid;
   place-items: center;
   background: #fff;
-  color: var(--accent);
   cursor: pointer;
 }
 
+.icon-btn {
+  border: 1px solid transparent;
+  color: var(--muted);
+}
+
+.icon-btn:hover,
+.icon-btn:focus-visible {
+  background: var(--stage-soft);
+  color: var(--stage-solid);
+  outline: none;
+}
+
+.plus {
+  border: 1.5px solid var(--stage-solid);
+  color: var(--stage-solid);
+}
+
 .plus:hover,
 .plus:focus-visible {
-  background: var(--accent-soft);
+  background: var(--stage-soft);
   outline: none;
 }
 
+.col-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  inset-inline-end: 0;
+  z-index: 8;
+  min-width: 10.5rem;
+  padding: 0.3rem;
+  display: grid;
+  gap: 0.1rem;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+.col-menu button {
+  border: 0;
+  background: transparent;
+  padding: 0.45rem 0.7rem;
+  font: inherit;
+  font-size: 0.86rem;
+  color: var(--ink);
+  text-align: right;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.col-menu button:hover:not(:disabled) {
+  background: #f8fafc;
+}
+
+.col-menu button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.col-menu .danger {
+  color: var(--danger, #dc2626);
+}
+
 .cards {
   display: flex;
   flex-direction: column;