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/views/ContactsView.vue

@@ -5,7 +5,11 @@ import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
 import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
+import UiButton from '@/components/ui/UiButton.vue';
+import UiModal from '@/components/ui/UiModal.vue';
 import UiIcon from '@/components/UiIcon.vue';
+import PersonFormView from '@/views/PersonFormView.vue';
+import CompanyFormView from '@/views/CompanyFormView.vue';
 import type {
   CompanyDto,
   ImportContactsResult,
@@ -47,6 +51,7 @@ const fileInput = ref<HTMLInputElement | null>(null);
 const menuId = ref<string | null>(null);
 const sortOpen = ref(false);
 const filterOpen = ref(false);
+const contactModal = ref<'person' | 'company' | null>(null);
 
 const total = computed(() =>
   tab.value === 'people' ? people.value?.total ?? 0 : companies.value?.total ?? 0,
@@ -265,13 +270,13 @@ onMounted(load);
           hidden
           @change="onImportFile"
         />
-        <RouterLink
-          class="add-btn"
-          :to="tab === 'companies' ? { name: 'company-new' } : { name: 'person-new' }"
-          :title="tab === 'companies' ? 'شرکت جدید' : 'شخص جدید'"
+        <UiButton
+          type="button"
+          @click="contactModal = tab === 'companies' ? 'company' : 'person'"
         >
-          <UiIcon name="plus" :size="22" />
-        </RouterLink>
+          <UiIcon name="plus" :size="16" />
+          {{ tab === 'companies' ? 'شرکت جدید' : 'شخص جدید' }}
+        </UiButton>
       </div>
     </header>
 
@@ -504,6 +509,25 @@ onMounted(load);
         <button type="button" :disabled="page >= pageCount" @click="setPage(page + 1)">›</button>
       </div>
     </footer>
+
+    <UiModal
+      :open="Boolean(contactModal)"
+      :title="contactModal === 'company' ? 'شرکت جدید' : 'شخص جدید'"
+      @close="contactModal = null"
+    >
+      <PersonFormView
+        v-if="contactModal === 'person'"
+        embedded
+        @saved="contactModal = null; void load()"
+        @cancel="contactModal = null"
+      />
+      <CompanyFormView
+        v-else-if="contactModal === 'company'"
+        embedded
+        @saved="contactModal = null; void load()"
+        @cancel="contactModal = null"
+      />
+    </UiModal>
   </section>
 </template>