feat(nc-gui): kanban collapsed stack

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -219,9 +219,12 @@ openNewRecordFormHook?.on(async (stackTitle) => {
         @change="onMoveStack($event)"
       >
         <template #item="{ element: stack, index }">
+          <a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="p-4" />
+          <div v-else class="nc-kanban-stack" :class="{ 'w-[50px]': stack.collapsed }">
             <a-card
+              v-if="!stack.collapsed"
               :key="stack.id"
-            class="nc-kanban-stack mx-4 !bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]"
+              class="mx-4!bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]"
               :class="{ 'not-draggable': stack.id === 'uncategorized' }"
               head-style="padding-bottom: 0px;"
               body-style="padding: 0px; height: 100%;"
@@ -371,6 +374,25 @@ openNewRecordFormHook?.on(async (stackTitle) => {
                 </a-layout-footer>
               </a-layout>
             </a-card>
+            <a-card
+              v-else
+              :key="stack.id"
+              class="nc-kanban-stack nc-kanban-collapsed-stack mx-4 flex !bg-[#f0f2f5] items-center w-[300px] h-[50px] rounded-[12px]"
+              :class="{ 'not-draggable': stack.id === 'uncategorized' }"
+              :body-style="'width: 100%;'"
+            >
+              <div class="items-center justify-between">
+                <div class="nc-kanban-data-count">
+                  <div class="float-right flex gap-2 items-center cursor-pointer">
+                    <GeneralTruncateText>{{ stack.title }}</GeneralTruncateText>
+                    <mdi-menu-down class="text-grey text-lg" />
+                  </div>
+                  {{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
+                  {{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
+                </div>
+              </div>
+            </a-card>
+          </div>
         </template>
       </Draggable>
     </div>
@@ -413,4 +435,10 @@ openNewRecordFormHook?.on(async (stackTitle) => {
 .ant-layout-header {
   @apply !h-[30px] !leading-[30px] !px-[5px] !my-[10px];
 }
+
+.nc-kanban-collapsed-stack {
+  transform: rotate(-90deg) translateX(-100%);
+  transform-origin: left top 0px;
+  transition: left 0.2s ease-in-out 0s;
+}
 </style>