hunk.code_window: });
   export const switchStyle = style({
     fontSize: 'var(--affine-font-xs)',
     color: 'var(--affine-text-secondary-color)',
     margin: '0 10px',
   });
   export const filterTypeStyle = style({
     fontSize: 'var(--affine-font-sm)',
     display: 'flex',
  
hunk.labels: keep keep keep keep replace keep keep keep keep
hunk.after_edit:   padding: '2px 4px',
     transition: 'all 0.15s ease-in-out',
     ':hover': {
       cursor: 'pointer',
       background: 'var(--affine-hover-color)',
       borderRadius: '4px',
     },
  
hunk.file_path: packages/component/src/components/page-list/filter/index.css.ts
hunk.type: replace
file: import { MainContainer } from '@affine/component/workspace';
  import { config } from '@affine/env';
  import { NoSsr } from '@mui/material';
  import { affinePluginsAtom } from '@toeverything/plugin-infra/manager';
  import { useAtomValue } from 'jotai';
  import type { ReactElement } from 'react';
  import { Suspense } from 'react';
  
  import { AppContainer } from '../components/affine/app-container';
  
  const Plugins = () => {
    const plugins = useAtomValue(affinePluginsAtom);
    return (
      <NoSsr>
        <div>
          {Object.values(plugins).map(({ definition, uiAdapter }) => {
            const Content = uiAdapter.debugContent;
            return (
              <div key={definition.id}>
                {/* todo: support i18n */}
                {definition.name.fallback}
                {Content && <Content />}
              </div>
            );
          })}
        </div>
      </NoSsr>
    );
  };
  
  export default function PluginPage(): ReactElement {
    if (!config.enablePlugin) {
      return <></>;
    }
    return (
      <AppContainer>
        <MainContainer>
          <Suspense>
            <Plugins />
          </Suspense>
        </MainContainer>
      </AppContainer>
    );
  }
  