feat: replace react-dnd to dnd-kit (#2028)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/__tests__/PinBoard.spec.tsx

@@ -4,7 +4,6 @@
 import 'fake-indexeddb/auto';
 
 import { rootCurrentWorkspaceIdAtom } from '@affine/workspace/atom';
-import type { PageMeta } from '@blocksuite/store';
 import matchers from '@testing-library/jest-dom/matchers';
 import type { RenderResult } from '@testing-library/react';
 import { render, renderHook } from '@testing-library/react';
@@ -95,7 +94,6 @@ const initPinBoard = async () => {
   const app = render(
     <App
       blockSuiteWorkspace={blockSuiteWorkspace as BlockSuiteWorkspace}
-      allMetas={blockSuiteWorkspace.meta.pageMetas as PageMeta[]}
       openPage={() => {}}
     />
   );

apps/web/src/components/affine/pinboard/styles.ts

@@ -8,7 +8,7 @@ import {
 export const StyledCollapsedButton = styled('button')<{
   collapse: boolean;
   show?: boolean;
-}>(({ collapse, show = true, theme }) => {
+}>(({ collapse, show = true }) => {
   return {
     width: '16px',
     height: '100%',
@@ -43,7 +43,6 @@ export const StyledPinboard = styled('div')<{
     disableCollapse,
     disable = false,
     active = false,
-    theme,
     isOver,
     textWrap = false,
   }) => {
@@ -66,7 +65,7 @@ export const StyledPinboard = styled('div')<{
       userSelect: 'none',
       ...(textWrap
         ? {
-            wordBreak: 'break-all',
+            wordBreak: 'break-word',
             whiteSpace: 'pre-wrap',
           }
         : {}),
@@ -106,7 +105,7 @@ export const StyledOperationButton = styled(IconButton, {
   };
 });
 
-export const StyledSearchContainer = styled('div')(({ theme }) => {
+export const StyledSearchContainer = styled('div')(() => {
   return {
     width: 'calc(100% - 24px)',
     margin: '0 auto',
@@ -125,7 +124,7 @@ export const StyledMenuContent = styled('div')(() => {
     overflow: 'auto',
   };
 });
-export const StyledMenuSubTitle = styled('div')(({ theme }) => {
+export const StyledMenuSubTitle = styled('div')(() => {
   return {
     color: 'var(--affine-text-secondary-color)',
     lineHeight: '36px',
@@ -133,7 +132,7 @@ export const StyledMenuSubTitle = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledMenuFooter = styled('div')(({ theme }) => {
+export const StyledMenuFooter = styled('div')(() => {
   return {
     width: 'calc(100% - 24px)',
     margin: '0 auto',

apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts

@@ -9,7 +9,7 @@ import {
 export const StyledListItem = styled('div')<{
   active?: boolean;
   disabled?: boolean;
-}>(({ theme, active, disabled }) => {
+}>(({ active, disabled }) => {
   return {
     height: '32px',
     color: active
@@ -46,7 +46,7 @@ export const StyledListItem = styled('div')<{
 export const StyledCollapseButton = styled('button')<{
   collapse: boolean;
   show?: boolean;
-}>(({ collapse, show = true, theme }) => {
+}>(({ collapse, show = true }) => {
   return {
     width: '16px',
     height: '100%',
@@ -75,7 +75,7 @@ export const StyledCollapseItem = styled('div')<{
   active?: boolean;
   isOver?: boolean;
   textWrap?: boolean;
-}>(({ disable = false, active = false, theme, isOver, textWrap = false }) => {
+}>(({ disable = false, active = false, isOver, textWrap = false }) => {
   return {
     width: '100%',
     lineHeight: '1.5',
@@ -94,7 +94,7 @@ export const StyledCollapseItem = styled('div')<{
     userSelect: 'none',
     ...(textWrap
       ? {
-          wordBreak: 'break-all',
+          wordBreak: 'break-word',
           whiteSpace: 'pre-wrap',
         }
       : {}),
@@ -174,7 +174,7 @@ const slideOut2 = keyframes({
 
 export const StyledChangeLog = styled('div')<{
   isClose?: boolean;
-}>(({ theme, isClose }) => {
+}>(({ isClose }) => {
   return {
     width: '110%',
     height: '32px',