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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import UiButton from '@/components/ui/UiButton.vue';
 import UiIcon from '@/components/UiIcon.vue';
 import type { PipelineAccent } from '@/lib/pipeline-board';
 import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
@@ -13,48 +14,15 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <button
-    type="button"
+  <UiButton
+    variant="dashed"
+    block
     class="add-deal"
-    :style="{
-      '--add-color': PIPELINE_ACCENT[accent].text,
-      '--add-border': PIPELINE_ACCENT[accent].solid,
-      '--add-soft': PIPELINE_ACCENT[accent].soft,
-    }"
+    :style="{ color: PIPELINE_ACCENT[accent].text }"
     aria-label="افزودن معامله"
     @click="emit('add')"
   >
     <UiIcon name="plus" :size="16" />
     افزودن معامله
-  </button>
+  </UiButton>
 </template>
-
-<style scoped>
-.add-deal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
-  width: 100%;
-  margin-top: 0.15rem;
-  padding: 0.9rem 1rem;
-  border: 1.5px dashed var(--add-border);
-  border-radius: 16px;
-  background: #fff;
-  color: var(--add-color);
-  font-weight: 700;
-  font-size: 0.9rem;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
-}
-
-.add-deal:hover {
-  background: var(--add-soft);
-}
-
-.add-deal:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-</style>