refactor: add entities folder, improved api structure

src/app/routes/(auth)/_auth-layout.signin.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-import { SigninForm } from '@/features/auth/signin/components'
+import { SigninForm } from '@/features/auth/signin'
 
 export const Route = createFileRoute('/(auth)/_auth-layout/signin')({
   component: SigninForm

src/app/routes/(auth)/_auth-layout.signup.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-import { SignupForm } from '@/features/auth/signup/components'
+import { SignupForm } from '@/features/auth/signup'
 
 export const Route = createFileRoute('/(auth)/_auth-layout/signup')({
   component: SignupForm

src/app/routes/(auth)/_auth-layout.tsx

@@ -1,9 +1,8 @@
+import { useAuthStore } from '@/entities/auth'
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
 
 import { AuthFormNavigation, AuthLayout } from '@/blocks/auth-layout'
 
-import { useAuthStore } from '@/shared/store'
-
 export const Route = createFileRoute('/(auth)/_auth-layout')({
   beforeLoad: () => {
     if (useAuthStore.getState().signedIn()) throw redirect({ to: '/dashboard' })

src/app/routes/(dashboard)/dashboard.$boardId.tsx

@@ -1,8 +1,7 @@
+import { CardContracts } from '@/entities/card'
 import { createFileRoute } from '@tanstack/react-router'
 
-import { Board } from '@/blocks/board'
-
-import { CardContracts } from '@/shared/api/card'
+import { Board } from '@/blocks/kanban-board'
 
 export const Route = createFileRoute('/(dashboard)/dashboard/$boardId')({
   component: Board,

src/app/routes/(dashboard)/dashboard.index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-import { EmptyBoard } from '@/blocks/board'
+import { EmptyBoard } from '@/blocks/kanban-board'
 
 export const Route = createFileRoute('/(dashboard)/dashboard/')({
   component: EmptyBoard

src/app/routes/(dashboard)/dashboard.tsx

@@ -1,12 +1,13 @@
+import { useAuthStore } from '@/entities/auth'
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
 
-import { useSidebarToggleShortcut } from '@/features/toggle-sidebar/hooks'
+import { useSidebarToggleShortcut } from '@/features/toggle-sidebar'
 
 import { Header } from '@/blocks/header'
 import { Sidebar } from '@/blocks/sidebar'
 
-import { cn } from '@/shared/lib'
-import { useAuthStore, useSidebarStore } from '@/shared/store'
+import { cn } from '@/shared/lib/cn'
+import { useSidebarStore } from '@/shared/store'
 
 const DashboardRoute = () => {
   const isSidebarOpen = useSidebarStore(state => state.isSidebarOpen)

src/app/routes/__root.tsx

@@ -1,22 +1,22 @@
+import { useAuthStore } from '@/entities/auth'
 import { createRootRoute, Outlet } from '@tanstack/react-router'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/react'
 import { ModalRenderer } from 'react-modal-state'
 import { Toaster } from 'sonner'
 
-import { AddBoardModal } from '@/features/board/add-board/components'
-import { EditBoardModal } from '@/features/board/edit-board/components'
-import { AddCardModal } from '@/features/card/add-card/components'
-import { EditCardModal } from '@/features/card/edit-card/components'
-import { AddColumnModal } from '@/features/column/add-column/components'
-import { EditColumnModal } from '@/features/column/edit-column/components'
-import { EditProfileModal } from '@/features/edit-profile/components'
-import { NeedHelpModal } from '@/features/need-help/components'
+import { AddBoardModal } from '@/features/board/add-board'
+import { EditBoardModal } from '@/features/board/edit-board'
+import { AddCardModal } from '@/features/card/add-card'
+import { EditCardModal } from '@/features/card/edit-card'
+import { AddColumnModal } from '@/features/column/add-column'
+import { EditColumnModal } from '@/features/column/edit-column'
+import { EditProfileModal } from '@/features/edit-profile'
+import { NeedHelpModal } from '@/features/need-help'
 
 import { SidebarMobileModal } from '@/blocks/sidebar'
 
 import { useTabletAndBelowMediaQuery } from '@/shared/hooks'
-import { useAuthStore } from '@/shared/store'
 
 const RootRoute = () => {
   const theme = useAuthStore(state => state.user.theme)

src/app/routes/index.tsx

@@ -1,9 +1,9 @@
+import { useAuthStore } from '@/entities/auth'
 import { createFileRoute, Link, redirect } from '@tanstack/react-router'
 
-import { GoogleSignin } from '@/features/auth/google/components'
+import { GoogleSignin } from '@/features/auth/google'
 
 import { Icon } from '@/shared/components/ui'
-import { useAuthStore } from '@/shared/store'
 
 const IndexRoute = () => (
   <div className='flex h-dvh flex-col items-center justify-center bg-welcome-page-gradient'>

src/blocks/header/Header.tsx

@@ -1,5 +1,5 @@
-import { ThemeSelect } from '@/features/change-theme/components'
-import { EditProfileModalTrigger } from '@/features/edit-profile/components'
+import { ThemeSelect } from '@/features/change-theme'
+import { EditProfileModalTrigger } from '@/features/edit-profile'
 
 import { HeaderControls } from './HeaderControls'
 

src/blocks/header/HeaderControls.tsx

@@ -1,6 +1,6 @@
 import { useModal } from 'react-modal-state'
 
-import { ToggleSidebarTrigger } from '@/features/toggle-sidebar/components'
+import { ToggleSidebarTrigger } from '@/features/toggle-sidebar'
 
 import { SidebarMobileModal } from '@/blocks/sidebar'
 

src/blocks/board/Board.tsx → src/blocks/kanban-board/Board.tsx

@@ -1,14 +1,16 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area'
 
-import { useGetBoardById } from '@/features/board/hooks'
-import { Filters } from '@/features/card/filters/components'
-import { ColumnList } from '@/features/column/list/components'
+import { useGetBoardById } from '@/features/board/get-board-by-id'
 
 import { Loader, Scrollbar } from '@/shared/components/ui'
 import { useDocumentTitle } from '@/shared/hooks'
-import { cn } from '@/shared/lib'
+import { cn } from '@/shared/lib/cn'
 import { DragAndDropProvider } from '@/shared/store'
 
+import { ColumnList } from './ColumnList'
+import { Filters } from './Filters'
+import { KanbanDragOverlay } from './KanbanDragOverlay'
+
 export const Board = () => {
   const { data: board, isPending } = useGetBoardById()
 
@@ -36,6 +38,7 @@ export const Board = () => {
         <ScrollArea.Viewport className='w-full flex-1 pb-4'>
           <DragAndDropProvider initialColumns={board?.columns}>
             <ColumnList backgroundIdentifier={board?.background.identifier} />
+            <KanbanDragOverlay />
           </DragAndDropProvider>
         </ScrollArea.Viewport>
       )}

src/features/card/list/components/CardList.tsx → src/blocks/kanban-board/CardList.tsx

@@ -1,9 +1,10 @@
-import type { CardTypes } from '@/shared/api/card'
+import type { CardTypes } from '@/entities/card'
 
+import { useDndMonitor } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
 
-import { useCardFilters } from '@/features/card/filters/hooks'
-import { getFilteredCards } from '@/features/card/filters/utils'
+import { useCardDragHandlers } from '@/features/card'
+import { useFilteredCards } from '@/features/card/filter-cards'
 
 import { useDragAndDrop } from '@/shared/store'
 
@@ -14,14 +15,13 @@ type CardListProps = {
 }
 
 export const CardList = ({ cards }: CardListProps) => {
-  const { cards: allCards } = useDragAndDrop()
+  const { onDragStart, onDragOver, onDragEnd } = useCardDragHandlers()
+
+  useDndMonitor({ onDragStart, onDragOver, onDragEnd })
 
-  const { priorityParam, deadlineParam } = useCardFilters()
+  const { cards: allCards } = useDragAndDrop()
 
-  const filteredCards = getFilteredCards(cards!, {
-    priority: priorityParam,
-    deadline: deadlineParam
-  })
+  const filteredCards = useFilteredCards(cards!)
 
   return (
     <SortableContext

src/features/card/list/components/CardListItem.tsx → src/blocks/kanban-board/CardListItem.tsx

@@ -1,14 +1,14 @@
-import type { CardTypes } from '@/shared/api/card'
+import type { CardTypes } from '@/entities/card'
 
+import { getPriorityColor } from '@/entities/card'
 import { isToday } from 'date-fns'
 
-import { DeleteCardTrigger } from '@/features/card/delete-card/components'
-import { EditCardModalTrigger } from '@/features/card/edit-card/components'
+import { DeleteCardTrigger } from '@/features/card/delete-card'
+import { EditCardModalTrigger } from '@/features/card/edit-card'
 
 import { Icon } from '@/shared/components/ui'
 import { useKanbanSortable } from '@/shared/hooks'
-import { cn } from '@/shared/lib'
-import { getPriorityColor } from '@/shared/utils'
+import { cn } from '@/shared/lib/cn'
 
 import { CardListItemDeadline } from './CardListItemDeadline'
 import { CardListItemPriority } from './CardListItemPriority'

src/features/card/list/components/CardListItemPriority.tsx → src/blocks/kanban-board/CardListItemPriority.tsx

@@ -1,7 +1,6 @@
-import type { CardTypes } from '@/shared/api/card'
+import { CardTypes, getPriorityColor } from '@/entities/card'
 
-import { cn } from '@/shared/lib'
-import { getPriorityColor } from '@/shared/utils'
+import { cn } from '@/shared/lib/cn'
 
 type CardListItemPriorityProps = {
   priority: CardTypes.Priority

src/features/column/list/components/ColumnList.tsx → src/blocks/kanban-board/ColumnList.tsx

@@ -1,9 +1,11 @@
+import { useDndMonitor } from '@dnd-kit/core'
 import {
   horizontalListSortingStrategy,
   SortableContext
 } from '@dnd-kit/sortable'
 
-import { AddColumnTrigger } from '@/features/column/add-column/components'
+import { useColumnDragHandlers } from '@/features/column'
+import { AddColumnTrigger } from '@/features/column/add-column'
 
 import { useDragAndDrop } from '@/shared/store'
 
@@ -16,6 +18,10 @@ type ColumnListProps = {
 export const ColumnList = ({ backgroundIdentifier }: ColumnListProps) => {
   const { columns, cards } = useDragAndDrop()
 
+  const { onDragStart, onDragEnd } = useColumnDragHandlers()
+
+  useDndMonitor({ onDragStart, onDragEnd })
+
   return (
     <div className='flex touch-manipulation gap-[34px]'>
       <SortableContext

src/features/column/list/components/ColumnListItem.tsx → src/blocks/kanban-board/ColumnListItem.tsx

@@ -1,16 +1,17 @@
-import type { CardTypes } from '@/shared/api/card'
-import type { ColumnTypes } from '@/shared/api/column'
+import type { CardTypes } from '@/entities/card'
+import type { ColumnTypes } from '@/entities/column'
 
 import * as ScrollArea from '@radix-ui/react-scroll-area'
 
-import { AddCardModalTrigger } from '@/features/card/add-card/components'
-import { CardList } from '@/features/card/list/components'
-import { DeleteColumnTrigger } from '@/features/column/delete-column/components'
-import { EditColumnTrigger } from '@/features/column/edit-column/components'
+import { AddCardModalTrigger } from '@/features/card/add-card'
+import { DeleteColumnTrigger } from '@/features/column/delete-column'
+import { EditColumnTrigger } from '@/features/column/edit-column'
 
 import { Scrollbar } from '@/shared/components/ui'
 import { useKanbanSortable, useTabletAndBelowMediaQuery } from '@/shared/hooks'
-import { cn } from '@/shared/lib'
+import { cn } from '@/shared/lib/cn'
+
+import { CardList } from './CardList'
 
 type ColumnListItemProps = {
   column: ColumnTypes.Column

src/blocks/board/EmptyBoard.tsx → src/blocks/kanban-board/EmptyBoard.tsx

@@ -1,6 +1,6 @@
 import { useModal } from 'react-modal-state'
 
-import { AddBoardModalTrigger } from '@/features/board/add-board/components'
+import { AddBoardModalTrigger } from '@/features/board/add-board'
 
 export const EmptyBoard = () => {
   const { open: openNewBoardModal } = useModal(AddBoardModalTrigger)

src/features/card/filters/components/Filters.tsx → src/blocks/kanban-board/Filters.tsx

@@ -1,12 +1,11 @@
 import * as Popover from '@radix-ui/react-popover'
 import { Link } from '@tanstack/react-router'
 
+import { DeadlineFilter, PriorityFilter } from '@/features/card/filter-cards'
+
 import { Icon } from '@/shared/components/ui'
 import { useGetParamBoardId } from '@/shared/hooks'
 
-import { DeadlineFilter } from './DeadlineFilter'
-import { PriorityFilter } from './PriorityFilter'
-
 export const Filters = () => {
   const { boardId } = useGetParamBoardId()
 

src/blocks/kanban-board/KanbanDragOverlay.tsx

@@ -0,0 +1,24 @@
+import { DragOverlay } from '@dnd-kit/core'
+import { createPortal } from 'react-dom'
+
+import { useDragAndDrop } from '@/shared/store'
+
+import { CardListItem } from './CardListItem'
+import { ColumnListItem } from './ColumnListItem'
+
+export const KanbanDragOverlay = () => {
+  const { activeCard, activeColumn, cards } = useDragAndDrop()
+
+  return createPortal(
+    <DragOverlay>
+      {activeColumn && (
+        <ColumnListItem
+          column={activeColumn}
+          cards={cards?.filter(c => c.columnId === activeColumn.id)}
+        />
+      )}
+      {activeCard && <CardListItem card={activeCard} />}
+    </DragOverlay>,
+    document.body
+  )
+}

src/blocks/sidebar/Sidebar.tsx

@@ -1,14 +1,14 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area'
 
-import { LogoutBtn } from '@/features/auth/logout/components'
-import { BoardList } from '@/features/board/list/components'
-import { NeedHelpModalTrigger } from '@/features/need-help/components'
+import { LogoutBtn } from '@/features/auth/logout'
+import { NeedHelpModalTrigger } from '@/features/need-help'
 
 import { Scrollbar } from '@/shared/components/ui'
-import { cn } from '@/shared/lib'
+import { cn } from '@/shared/lib/cn'
 import { useSidebarStore } from '@/shared/store'
 
 import { SidebarBoardInfo } from './SidebarBoardInfo'
+import { SidebarBoardList } from './SidebarBoardList'
 import { SidebarLogo } from './SidebarLogo'
 
 export const Sidebar = () => {
@@ -26,7 +26,7 @@ export const Sidebar = () => {
         <aside className='flex h-dvh flex-col'>
           <SidebarLogo />
           <SidebarBoardInfo />
-          <BoardList />
+          <SidebarBoardList />
           <div className='mt-auto px-6 pb-6'>
             <NeedHelpModalTrigger />
             <LogoutBtn />

src/blocks/sidebar/SidebarBoardInfo.tsx

@@ -1,4 +1,4 @@
-import { AddBoardModalTrigger } from '@/features/board/add-board/components'
+import { AddBoardModalTrigger } from '@/features/board/add-board'
 
 export const SidebarBoardInfo = () => (
   <div className='mb-10 px-3.5 tablet:px-6'>

src/features/board/list/components/BoardList.tsx → src/blocks/sidebar/SidebarBoardList.tsx

@@ -2,16 +2,16 @@ import { Root } from '@radix-ui/react-radio-group'
 import { useNavigate } from '@tanstack/react-router'
 import { useModal } from 'react-modal-state'
 
-import { SidebarMobileModal } from '@/blocks/sidebar'
+import { useGetAllBoards } from '@/features/board/get-all-boards'
 
 import { Loader } from '@/shared/components/ui'
 import { useGetParamBoardId } from '@/shared/hooks'
-import { cn } from '@/shared/lib'
+import { cn } from '@/shared/lib/cn'
 
-import { useGetAllBoards } from '../hooks'
-import { BoardListItem } from './BoardListItem'
+import { SidebarBoardListItem } from './SidebarBoardListItem'
+import { SidebarMobileModal } from './SidebarMobileModal'
 
-export const BoardList = () => {
+export const SidebarBoardList = () => {
   const navigate = useNavigate()
 
   const { boardId } = useGetParamBoardId()
@@ -34,7 +34,7 @@ export const BoardList = () => {
       }}
       className={cn('mb-10 text-base', boards?.length === 0 && 'mb-auto')}>
       {boards?.map(board => (
-        <BoardListItem
+        <SidebarBoardListItem
           key={board.id}
           board={board}
         />