chore: isolate workspace layout from _app

packages/app/src/components/workspace-layout/index.tsx

@@ -0,0 +1,34 @@
+import HelpIsland from '@/components/help-island';
+import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
+import { useRouter } from 'next/router';
+import { StyledPage, StyledWrapper } from './styles';
+import { AppStateProvider } from '@/providers/app-state-provider/provider';
+import ConfirmProvider from '@/providers/confirm-provider';
+import { ModalProvider } from '@/providers/global-modal-provider';
+import ProviderComposer from '@/components/provider-composer';
+import { PropsWithChildren } from 'react';
+
+export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+  return (
+    <ProviderComposer
+      contexts={[
+        <AppStateProvider key="appStateProvider" />,
+        <ModalProvider key="ModalProvider" />,
+        <ConfirmProvider key="ConfirmProvider" />,
+      ]}
+    >
+      <StyledPage>
+        <WorkSpaceSliderBar />
+        <StyledWrapper>
+          {children}
+          <HelpIsland
+            showList={router.query.pageId ? undefined : ['contact']}
+          />
+        </StyledWrapper>
+      </StyledPage>
+    </ProviderComposer>
+  );
+};
+
+export default WorkspaceLayout;

packages/app/src/components/workspace-layout/styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@/styles';
+
+export const StyledPage = styled('div')(({ theme }) => {
+  return {
+    height: '100vh',
+    backgroundColor: theme.colors.pageBackground,
+    transition: 'background-color .5s',
+    display: 'flex',
+    flexGrow: '1',
+  };
+});
+
+export const StyledWrapper = styled('div')(({ theme }) => {
+  return {
+    flexGrow: 1,
+    position: 'relative',
+  };
+});

packages/app/src/pages/_app.tsx

@@ -3,63 +3,34 @@ import dynamic from 'next/dynamic';
 import '../../public/globals.css';
 import '../../public/variable.css';
 import './temporary.css';
-import { ModalProvider } from '@/providers/global-modal-provider';
-import { AppStateProvider } from '@/providers/app-state-provider/provider';
 import { Logger } from '@toeverything/pathfinder-logger';
-import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
 import '@fontsource/space-mono';
 import '@fontsource/poppins';
 import '../utils/print-build-info';
-import { styled } from '@/styles';
 import ProviderComposer from '@/components/provider-composer';
-import ConfirmProvider from '@/providers/confirm-provider';
-import HelpIsland from '@/components/help-island';
-import { useRouter } from 'next/router';
+import type { ReactElement, ReactNode } from 'react';
+import type { NextPage } from 'next';
 
 const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
   ssr: false,
 });
 
-const StyledPage = styled('div')(({ theme }) => {
-  return {
-    height: '100vh',
-    backgroundColor: theme.colors.pageBackground,
-    transition: 'background-color .5s',
-    display: 'flex',
-    flexGrow: '1',
-  };
-});
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
 
-const StyledWrapper = styled('div')(({ theme }) => {
-  return {
-    flexGrow: 1,
-    position: 'relative',
-  };
-});
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
 
-function MyApp({ Component, pageProps }: AppProps) {
-  const router = useRouter();
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  const getLayout = Component.getLayout || (page => page);
 
   return (
     <>
       <Logger />
-      <ProviderComposer
-        contexts={[
-          <AppStateProvider key="appStateProvider" />,
-          <ThemeProvider key="ThemeProvider" />,
-          <ModalProvider key="ModalProvider" />,
-          <ConfirmProvider key="ConfirmProvider" />,
-        ]}
-      >
-        <StyledPage>
-          <WorkSpaceSliderBar />
-          <StyledWrapper>
-            <Component {...pageProps} />
-            <HelpIsland
-              showList={router.pathname !== '/' ? ['contact'] : undefined}
-            />
-          </StyledWrapper>
-        </StyledPage>
+      <ProviderComposer contexts={[<ThemeProvider key="ThemeProvider" />]}>
+        {getLayout(<Component {...pageProps} />)}
       </ProviderComposer>
     </>
   );

packages/app/src/pages/affine.tsx

@@ -1,5 +1,4 @@
 import { displayFlex, styled } from '@/styles';
-import { ThemeModeSwitch } from '@/components/theme-mode-switch';
 import { Loading } from '@/components/loading';
 import Modal from '@/ui/modal';
 import { useState } from 'react';
@@ -20,7 +19,6 @@ const Affine = () => {
   return (
     <>
       <StyledHeader>
-        <ThemeModeSwitch></ThemeModeSwitch>
         <button
           onClick={() => {
             setShow(true);

packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -1,5 +1,4 @@
-import { useRef, useEffect } from 'react';
-import type { NextPage } from 'next';
+import { useRef, useEffect, ReactElement } from 'react';
 import { styled } from '@/styles';
 import { EditorHeader } from '@/components/header';
 import EdgelessToolbar from '@/components/edgeless-toolbar';
@@ -10,6 +9,8 @@ import {
 } from '@/providers/app-state-provider/hooks';
 import { useAppState } from '@/providers/app-state-provider/context';
 import exampleMarkdown from '@/static/example-markdown';
+import type { NextPageWithLayout } from '../..//_app';
+import WorkspaceLayout from '@/components/workspace-layout';
 
 const StyledEditorContainer = styled('div')(({ theme }) => {
   return {
@@ -17,7 +18,7 @@ const StyledEditorContainer = styled('div')(({ theme }) => {
   };
 });
 
-const Home: NextPage = () => {
+const Page: NextPageWithLayout = () => {
   const editorContainer = useRef<HTMLDivElement>(null);
   const workspace = useLoadWorkspace();
   const page = useLoadPage();
@@ -65,4 +66,8 @@ const Home: NextPage = () => {
   );
 };
 
-export default Home;
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+};
+
+export default Page;

packages/app/src/pages/workspace/[workspaceId]/all.tsx

@@ -3,8 +3,11 @@ import { PageList } from '@/components/page-list';
 import { AllPagesIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { PageListHeader } from '@/components/header';
+import { NextPageWithLayout } from '@/pages/_app';
+import { ReactElement } from 'react';
+import WorkspaceLayout from '@/components/workspace-layout';
 
-const All = () => {
+const All: NextPageWithLayout = () => {
   const workspace = useLoadWorkspace();
   const pageMetaList = usePageMetaList();
 
@@ -19,4 +22,8 @@ const All = () => {
   ) : null;
 };
 
+All.getLayout = function getLayout(page: ReactElement) {
+  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+};
+
 export default All;

packages/app/src/pages/workspace/[workspaceId]/favorite.tsx

@@ -3,8 +3,11 @@ import { PageListHeader } from '@/components/header';
 import { PageList } from '@/components/page-list';
 import { FavouritesIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
+import { NextPageWithLayout } from '@/pages/_app';
+import { ReactElement } from 'react';
+import WorkspaceLayout from '@/components/workspace-layout';
 
-export const Favorite = () => {
+export const Favorite: NextPageWithLayout = () => {
   const workspace = useLoadWorkspace();
   const pageMetaList = usePageMetaList();
   return workspace ? (
@@ -14,5 +17,7 @@ export const Favorite = () => {
     </>
   ) : null;
 };
-
+Favorite.getLayout = function getLayout(page: ReactElement) {
+  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+};
 export default Favorite;

packages/app/src/pages/workspace/[workspaceId]/trash.tsx

@@ -3,8 +3,11 @@ import { PageListHeader } from '@/components/header';
 import { PageList } from '@/components/page-list';
 import { TrashIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
+import { NextPageWithLayout } from '@/pages/_app';
+import { ReactElement } from 'react';
+import WorkspaceLayout from '@/components/workspace-layout';
 
-export const Trash = () => {
+export const Trash: NextPageWithLayout = () => {
   const workspace = useLoadWorkspace();
   const pageMetaList = usePageMetaList();
   return workspace ? (
@@ -15,4 +18,8 @@ export const Trash = () => {
   ) : null;
 };
 
+Trash.getLayout = function getLayout(page: ReactElement) {
+  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+};
+
 export default Trash;