feat: swiper

src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css

@@ -1,11 +1,11 @@
 
 .create-button {
-    padding: 10px 10px 11px 10px;
+    padding: 8px 10px 9px;
     border-bottom: 2px solid gray;
 }
 
 .spacer {
-    height: 46px;
+    height: 43px;
     border-bottom: 2px solid gray;
     width: 100%;
 }

src/app/deals/components/shared/Funnel/Funnel.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import React, { FC, ReactNode } from "react";
-import { Group, ScrollArea } from "@mantine/core";
-import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
 import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
 import DealContainer from "@/app/deals/components/shared/DealContainer/DealContainer";
 import StatusColumnWrapper from "@/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper";
@@ -26,15 +24,17 @@ const Funnel: FC = () => {
         handleDragEnd,
         activeStatus,
         activeDeal,
+        swiperRef,
     } = useDealsAndStatusesDnd();
 
-    const renderFunnelDnd = () => (
+    return (
         <FunnelDnd
             containers={sortedStatuses}
             items={deals}
             onDragStart={handleDragStart}
             onDragOver={handleDragOver}
             onDragEnd={handleDragEnd}
+            swiperRef={swiperRef}
             getContainerId={(status: StatusSchema) => `${status.id}-status`}
             getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
                 sortByLexorank(
@@ -71,22 +71,6 @@ const Funnel: FC = () => {
             isCreatingContainerEnabled={!!selectedBoard}
         />
     );
-
-    if (isMobile) return renderFunnelDnd();
-
-    return (
-        <ScrollArea
-            offsetScrollbars={"x"}
-            scrollbarSize={"0.5rem"}>
-            <Group
-                align={"start"}
-                wrap={"nowrap"}
-                gap={"xs"}>
-                {renderFunnelDnd()}
-                {selectedBoard && <CreateStatusButton />}
-            </Group>
-        </ScrollArea>
-    );
 };
 
 export default Funnel;

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -1,8 +1,5 @@
 
 .container {
-    min-width: 150px;
-    width: 15vw;
-
     @media (max-width: 48em) {
         width: 80vw;
     }

src/app/deals/hooks/useDealsAndStatusesDnd.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { RefObject, useMemo, useRef, useState } from "react";
 import { DragOverEvent, DragStartEvent, Over } from "@dnd-kit/core";
 import { useDebouncedCallback } from "@mantine/hooks";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
@@ -7,6 +7,7 @@ import useGetNewRank from "@/app/deals/hooks/useGetNewRank";
 import { getStatusId, isStatusId } from "@/app/deals/utils/statusId";
 import { DealSchema, StatusSchema } from "@/lib/client";
 import { sortByLexorank } from "@/utils/lexorank";
+import { SwiperRef } from "swiper/swiper-react";
 
 type ReturnType = {
     sortedStatuses: StatusSchema[];
@@ -15,9 +16,11 @@ type ReturnType = {
     handleDragEnd: ({ active, over }: DragOverEvent) => void;
     activeStatus: StatusSchema | null;
     activeDeal: DealSchema | null;
+    swiperRef: RefObject<SwiperRef | null>;
 };
 
 const useDealsAndStatusesDnd = (): ReturnType => {
+    const swiperRef = useRef<SwiperRef>(null);
     const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
     const [activeStatus, setActiveStatus] = useState<StatusSchema | null>(null);
     const { statuses, setStatuses, updateStatus } = useStatusesContext();
@@ -43,6 +46,30 @@ const useDealsAndStatusesDnd = (): ReturnType => {
         if (!over) return;
         const activeId = active.id as string | number;
 
+        // Only perform swiper navigation for deal drag (not status column drag)
+        if (typeof activeId !== "string") {
+            const activeStatusLexorank = getStatusByDealId(Number(activeId))?.lexorank;
+            let overStatusLexorank: string | undefined;
+
+            if (typeof over.id === "string" && isStatusId(over.id)) {
+                const overStatusId = getStatusId(over.id);
+                overStatusLexorank = statuses.find(s => s.id === overStatusId)?.lexorank;
+            } else {
+                overStatusLexorank = getStatusByDealId(Number(over.id))?.lexorank;
+            }
+
+            if (activeStatusLexorank && overStatusLexorank && swiperRef.current?.swiper) {
+                const activeIndex = sortedStatuses.findIndex(s => s.lexorank === activeStatusLexorank);
+                const overIndex = sortedStatuses.findIndex(s => s.lexorank === overStatusLexorank);
+                
+                if (activeIndex > overIndex) {
+                    swiperRef.current.swiper.slidePrev();
+                } else if (activeIndex < overIndex) {
+                    swiperRef.current.swiper.slideNext();
+                }
+            }
+        }
+
         if (typeof activeId === "string" && isStatusId(activeId)) {
             handleColumnDragOver(activeId, over);
             return;
@@ -242,6 +269,7 @@ const useDealsAndStatusesDnd = (): ReturnType => {
     };
 
     return {
+        swiperRef,
         sortedStatuses,
         handleDragStart,
         handleDragOver,

src/app/layout.tsx

@@ -1,6 +1,9 @@
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
 import "@mantine/carousel/styles.css";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/scrollbar";
 import { ReactNode } from "react";
 import {
     ColorSchemeScript,