refactor(core): side bar resizing (#5280)

Rewrite sidebar panel using a customized react-resizable-panels version that supports sidebar pixel sizing (not using flex percentages).

Now the left & right sidebar using the same `ResizePanel` impl.

fix https://github.com/toeverything/AFFiNE/issues/5271
fix TOV-163
fix TOV-146
fix TOV-168
fix TOV-109
fix TOV-165

packages/frontend/component/src/components/workspace/index.css.ts

@@ -60,6 +60,8 @@ export const mainContainerStyle = style({
       margin: '8px',
       borderRadius: '5px',
       overflow: 'hidden',
+      // todo: is this performance intensive?
+      filter: 'drop-shadow(0px 0px 4px rgba(66,65,73,.14))',
       '@media': {
         print: {
           overflow: 'visible',
@@ -86,39 +88,6 @@ export const mainContainerStyle = style({
   },
 } as ComplexStyleRule);
 
-// These styles override the default styles of the react-resizable-panels
-// as the default styles make the overflow part hidden when printing to PDF.
-// See https://github.com/toeverything/AFFiNE/pull/3893
-globalStyle(`${mainContainerStyle} > div[data-panel-group]`, {
-  '@media': {
-    print: {
-      overflow: 'visible !important',
-    },
-  },
-});
-
-// These styles override the default styles of the react-resizable-panels
-// as the default styles make the overflow part hidden when printing to PDF.
-// See https://github.com/toeverything/AFFiNE/pull/3893
-globalStyle(`${mainContainerStyle} > div[data-panel-group] > div[data-panel]`, {
-  '@media': {
-    print: {
-      overflow: 'visible !important',
-    },
-  },
-});
-
-// Hack margin so that it works normally when sidebar is closed
-globalStyle(
-  `[data-testid=app-sidebar-wrapper][data-open=true][data-is-floating=false][data-has-background=false]
- ~ ${mainContainerStyle}[data-show-padding="true"]`,
-  {
-    // transition added here to prevent the transition from being applied on page load
-    transition: 'margin-left .3s ease-in-out',
-    marginLeft: '0',
-  }
-);
-
 export const toolStyle = style({
   position: 'absolute',
   right: '30px',