refactor(infra): directory structure (#4615)

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

@@ -0,0 +1,176 @@
+import { lightCssVariables } from '@toeverything/theme';
+import type { ComplexStyleRule } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+import { breakpoints } from '../../styles/mui-theme';
+export const appStyle = style({
+  width: '100%',
+  position: 'relative',
+  height: '100vh',
+  display: 'flex',
+  flexGrow: '1',
+  flexDirection: 'row',
+  backgroundColor: 'var(--affine-background-primary-color)',
+  selectors: {
+    '&[data-is-resizing="true"]': {
+      cursor: 'col-resize',
+    },
+    '&.blur-background': {
+      backgroundColor: 'transparent',
+    },
+    '&.noisy-background::before': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      opacity: 'var(--affine-noise-opacity)',
+      backgroundSize: '25%',
+      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+    },
+  },
+  vars: {
+    '--affine-editor-width': '800px',
+  },
+  '@media': {
+    [breakpoints.down('sm', true)]: {
+      vars: {
+        '--affine-editor-width': '550px',
+      },
+    },
+    print: {
+      vars: {
+        '--affine-editor-width': '800px',
+      },
+    },
+  },
+});
+
+globalStyle(`html[data-theme="light"] ${appStyle}`, {
+  vars: {
+    '--affine-noise-opacity': '0.25',
+  },
+});
+
+globalStyle(`html[data-theme="dark"] ${appStyle}`, {
+  vars: {
+    '--affine-noise-opacity': '0.1',
+  },
+
+  '@media': {
+    print: {
+      vars: lightCssVariables,
+    },
+  },
+});
+
+export const mainContainerStyle = style({
+  position: 'relative',
+  zIndex: 0, // it will create stacking context to limit layer of child elements and be lower than after auto zIndex
+  width: 0,
+  flex: 1,
+  maxWidth: '100%',
+  backgroundColor: 'var(--affine-background-primary-color)',
+  selectors: {
+    '&[data-show-padding="true"]': {
+      margin: '8px',
+      borderRadius: '5px',
+      overflow: 'hidden',
+      boxShadow: 'var(--affine-shadow-1)',
+      '@media': {
+        print: {
+          overflow: 'visible',
+          margin: '0px',
+          borderRadius: '0px',
+        },
+      },
+    },
+    '&[data-show-padding="true"][data-is-macos="true"]': {
+      borderRadius: '6px',
+    },
+    '&[data-in-trash-page="true"]': {
+      marginBottom: '66px',
+    },
+    '&[data-in-trash-page="true"][data-show-padding="true"]': {
+      marginBottom: '66px',
+    },
+    '&[data-show-padding="true"]:before': {
+      content: '""',
+      position: 'absolute',
+      height: '8px',
+      width: '100%',
+      top: '-8px',
+      left: 0,
+      WebkitAppRegion: 'drag',
+    },
+  },
+} 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: 'fixed',
+  right: '30px',
+  bottom: '30px',
+  zIndex: 'var(--affine-z-index-popover)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+  '@media': {
+    [breakpoints.down('md', true)]: {
+      right: 'calc((100vw - 640px) * 3 / 19 + 14px)',
+    },
+    [breakpoints.down('sm', true)]: {
+      right: '5px',
+      bottom: '5px',
+    },
+    print: {
+      display: 'none',
+    },
+  },
+  selectors: {
+    '&[data-in-trash-page="true"]': {
+      bottom: '70px',
+      '@media': {
+        [breakpoints.down('md', true)]: {
+          bottom: '80px',
+        },
+        [breakpoints.down('sm', true)]: {
+          bottom: '85px',
+        },
+        print: {
+          display: 'none',
+        },
+      },
+    },
+  },
+});

packages/frontend/component/src/components/workspace/index.tsx

@@ -0,0 +1,81 @@
+import { clsx } from 'clsx';
+import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
+import { forwardRef } from 'react';
+
+import { AppSidebarFallback } from '../app-sidebar';
+import { appStyle, mainContainerStyle, toolStyle } from './index.css';
+
+export type WorkspaceRootProps = PropsWithChildren<{
+  resizing?: boolean;
+  useNoisyBackground?: boolean;
+  useBlurBackground?: boolean;
+}>;
+
+export const AppContainer = ({
+  resizing,
+  useNoisyBackground,
+  useBlurBackground,
+  children,
+}: WorkspaceRootProps) => {
+  const noisyBackground = useNoisyBackground && environment.isDesktop;
+  return (
+    <div
+      className={clsx(appStyle, {
+        'noisy-background': noisyBackground,
+        'blur-background': environment.isDesktop && useBlurBackground,
+      })}
+      data-noise-background={noisyBackground}
+      data-is-resizing={resizing}
+    >
+      {children}
+    </div>
+  );
+};
+
+export interface MainContainerProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  padding?: boolean;
+  inTrashPage?: boolean;
+}
+
+export const MainContainer = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<MainContainerProps>
+>(function MainContainer(
+  { className, padding, inTrashPage, children, ...props },
+  ref
+): ReactElement {
+  return (
+    <div
+      {...props}
+      className={clsx(mainContainerStyle, className)}
+      data-is-macos={environment.isDesktop && environment.isMacOs}
+      data-show-padding={!!padding}
+      data-in-trash-page={!!inTrashPage}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+});
+
+MainContainer.displayName = 'MainContainer';
+
+export const ToolContainer = (
+  props: PropsWithChildren & { inTrashPage: boolean }
+): ReactElement => {
+  return (
+    <div className={toolStyle} data-in-trash-page={!!props.inTrashPage}>
+      {props.children}
+    </div>
+  );
+};
+
+export const WorkspaceFallback = (): ReactElement => {
+  return (
+    <AppContainer>
+      <AppSidebarFallback />
+      <MainContainer />
+    </AppContainer>
+  );
+};