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/ProductsSettingsView.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
-import { RouterLink, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatClockFa, formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
 import { formatMoney } from '@/lib/money';
+import UiButton from '@/components/ui/UiButton.vue';
+import UiModal from '@/components/ui/UiModal.vue';
 import UiIcon from '@/components/UiIcon.vue';
+import ProductFormView from '@/views/ProductFormView.vue';
 import type { ProductDto } from '@mento/shared';
 
 type SortKey = 'name' | 'newest' | 'price';
@@ -26,6 +29,7 @@ const selected = ref<Set<string>>(new Set());
 const menuId = ref<string | null>(null);
 const sortOpen = ref(false);
 const moreOpen = ref(false);
+const productModal = ref(false);
 
 const categories = computed(() => {
   const set = new Set<string>();
@@ -204,10 +208,10 @@ onMounted(load);
         </div>
       </div>
       <div class="head-actions" @click.stop>
-        <RouterLink class="btn primary" :to="{ name: 'product-new' }">
-          <UiIcon name="plus" :size="18" />
+        <UiButton type="button" @click="productModal = true">
+          <UiIcon name="plus" :size="16" />
           محصول جدید
-        </RouterLink>
+        </UiButton>
         <div class="more-wrap">
           <button
             type="button"
@@ -432,9 +436,14 @@ onMounted(load);
       </footer>
     </template>
 
-    <RouterLink class="fab" :to="{ name: 'product-new' }" aria-label="محصول جدید">
-      <UiIcon name="plus" :size="24" />
-    </RouterLink>
+    <UiModal :open="productModal" title="محصول جدید" @close="productModal = false">
+      <ProductFormView
+        v-if="productModal"
+        embedded
+        @saved="productModal = false; void load()"
+        @cancel="productModal = false"
+      />
+    </UiModal>
   </section>
 </template>