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

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
 import UiIcon from '@/components/UiIcon.vue';
 
-const FAB_SIZE = 56;
+const FAB_SIZE = 36;
 const FAB_MARGIN = 20;
 const POS_KEY = 'mento.quickCreateFab';
 
@@ -164,13 +164,18 @@ const fabStyle = computed(() => ({
 }));
 
 const panelStyle = computed(() => {
-  const gap = 18;
+  const gap = 12;
+  const edge = 16;
   const width = Math.min(390, viewport.value.w - 32);
   let left = fabPos.value.left;
-  left = Math.min(left, viewport.value.w - width - 16);
-  left = Math.max(16, left);
-  const spaceAbove = fabPos.value.top;
-  const placeAbove = spaceAbove > 360;
+  left = Math.min(left, viewport.value.w - width - edge);
+  left = Math.max(edge, left);
+
+  const spaceAbove = fabPos.value.top - edge;
+  const spaceBelow = viewport.value.h - (fabPos.value.top + FAB_SIZE) - edge;
+  const placeAbove = spaceAbove >= spaceBelow;
+  const maxHeight = Math.max(0, (placeAbove ? spaceAbove : spaceBelow) - gap);
+
   if (placeAbove) {
     return {
       left: `${left}px`,
@@ -178,6 +183,7 @@ const panelStyle = computed(() => {
       bottom: `${viewport.value.h - fabPos.value.top + gap}px`,
       top: 'auto',
       width: `${width}px`,
+      maxHeight: `${maxHeight}px`,
     };
   }
   return {
@@ -186,6 +192,7 @@ const panelStyle = computed(() => {
     top: `${fabPos.value.top + FAB_SIZE + gap}px`,
     bottom: 'auto',
     width: `${width}px`,
+    maxHeight: `${maxHeight}px`,
   };
 });
 
@@ -257,21 +264,23 @@ onBeforeUnmount(() => {
         :style="panelStyle"
       >
         <h2 id="qc-title">ایجاد سریع</h2>
-        <button
-          v-for="item in items"
-          :key="item.key"
-          class="item"
-          type="button"
-          @click="go(item.to)"
-        >
-          <span class="ico" :class="item.tone">
-            <UiIcon :name="item.icon" :size="26" />
-          </span>
-          <span class="copy">
-            <strong>{{ item.title }}</strong>
-            <small>{{ item.desc }}</small>
-          </span>
-        </button>
+        <div class="items">
+          <button
+            v-for="item in items"
+            :key="item.key"
+            class="item"
+            type="button"
+            @click="go(item.to)"
+          >
+            <span class="item-ico" :class="item.tone">
+              <UiIcon :name="item.icon" :size="26" />
+            </span>
+            <span class="copy">
+              <strong>{{ item.title }}</strong>
+              <small>{{ item.desc }}</small>
+            </span>
+          </button>
+        </div>
       </section>
 
       <button
@@ -289,7 +298,7 @@ onBeforeUnmount(() => {
         @pointercancel="onFabPointerUp"
       >
         <span class="fab-face" aria-hidden="true">
-          <UiIcon :name="isQuickCreateOpen ? 'x' : 'apps-plus'" :size="22" />
+          <UiIcon :name="isQuickCreateOpen ? 'x' : 'apps-plus'" :size="28" />
         </span>
       </button>
     </div>
@@ -315,29 +324,43 @@ onBeforeUnmount(() => {
   position: fixed;
   z-index: 92;
   width: 390px;
+  max-height: min(540px, calc(100dvh - 80px));
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   background: #fff;
   border-radius: 28px;
-  padding: 20px;
+  padding: 16px 16px 12px;
   box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
+  overflow: hidden;
 }
 
 .panel h2 {
-  margin: 0 0 16px;
+  flex-shrink: 0;
+  margin: 0 0 12px;
   text-align: right;
-  font-size: 22px;
+  font-size: 20px;
   font-weight: 800;
   color: #111827;
 }
 
+.items {
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-left: 2px;
+  overscroll-behavior: contain;
+}
+
 .item {
   width: 100%;
-  height: 82px;
-  margin-bottom: 10px;
+  min-height: 68px;
   display: flex;
   align-items: center;
   gap: 14px;
-  padding: 0 14px;
+  padding: 10px 14px;
   border: 1px solid #eef1f2;
   border-radius: 16px;
   background: #fff;
@@ -347,11 +370,7 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 
-.item:last-child {
-  margin-bottom: 0;
-}
-
-.ico {
+.item-ico {
   width: 52px;
   height: 52px;
   border-radius: 14px;
@@ -361,23 +380,23 @@ onBeforeUnmount(() => {
   flex-shrink: 0;
 }
 
-.ico.person {
+.item-ico.person {
   background: #0d9488;
 }
 
-.ico.company {
+.item-ico.company {
   background: #22d3ee;
 }
 
-.ico.deal {
+.item-ico.deal {
   background: #7c3aed;
 }
 
-.ico.activity {
+.item-ico.activity {
   background: #f97316;
 }
 
-.ico.note {
+.item-ico.note {
   background: #2563eb;
 }
 
@@ -403,12 +422,14 @@ onBeforeUnmount(() => {
 .fab {
   position: fixed;
   z-index: 93;
-  width: 54px;
-  height: 54px;
+  box-sizing: border-box;
+  width: 36px;
+  height: 36px;
   padding: 0;
   margin: 0;
   border: 0;
-  border-radius: 16px;
+  border-radius: 10px;
+  overflow: hidden;
   background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
   color: #fff;
   display: grid;
@@ -437,7 +458,11 @@ onBeforeUnmount(() => {
 
 .fab :deep(.ico) {
   display: block;
-  stroke-width: 1.55;
+  width: 28px;
+  height: 28px;
+  max-width: 28px;
+  max-height: 28px;
+  stroke-width: 1.7;
   filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
 }