refactor: remove sidebar in public workspace (#1730)

2026-02-14 05:14:54 +00:00 · 2023-03-28 14:30:29 -05:00
parent f9811c85bc
commit 5faa2760cd
5 changed files with 84 additions and 24 deletions
--- a/apps/web/src/layouts/public-workspace-layout.tsx
+++ b/apps/web/src/layouts/public-workspace-layout.tsx
@@ -0,0 +1,75 @@
+import { ListSkeleton } from '@affine/component';
+import { useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import type React from 'react';
+import { Suspense } from 'react';
+
+import { openQuickSearchModalAtom } from '../atoms';
+import {
+  publicBlockSuiteAtom,
+  publicWorkspaceIdAtom,
+} from '../atoms/public-workspace';
+import { StyledTableContainer } from '../components/blocksuite/block-suite-page-list/page-list/styles';
+import { useRouterTitle } from '../hooks/use-router-title';
+import { StyledPage, StyledWrapper } from './styles';
+
+const QuickSearchModal = dynamic(
+  () => import('../components/pure/quick-search-modal')
+);
+
+export const PublicQuickSearch: React.FC = () => {
+  const blockSuiteWorkspace = useAtomValue(publicBlockSuiteAtom);
+  const router = useRouter();
+  const [openQuickSearchModal, setOpenQuickSearchModalAtom] = useAtom(
+    openQuickSearchModalAtom
+  );
+  return (
+    <QuickSearchModal
+      blockSuiteWorkspace={blockSuiteWorkspace}
+      open={openQuickSearchModal}
+      setOpen={setOpenQuickSearchModalAtom}
+      router={router}
+    />
+  );
+};
+
+const PublicWorkspaceLayoutInner: React.FC<React.PropsWithChildren> = props => {
+  const router = useRouter();
+  const title = useRouterTitle(router);
+  const workspaceId = useAtomValue(publicWorkspaceIdAtom);
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+      </Head>
+      <StyledPage>
+        <StyledWrapper className="main-container">
+          {props.children}
+        </StyledWrapper>
+        <Suspense fallback="">
+          {/* `publicBlockSuiteAtom` is available only when `publicWorkspaceIdAtom` loaded */}
+          {workspaceId && <PublicQuickSearch />}
+        </Suspense>
+      </StyledPage>
+    </>
+  );
+};
+
+export const PublicWorkspaceLayout: React.FC<
+  React.PropsWithChildren
+> = props => {
+  return (
+    <Suspense
+      fallback={
+        <StyledTableContainer>
+          <ListSkeleton />
+        </StyledTableContainer>
+      }
+    >
+      <PublicWorkspaceLayoutInner>{props.children}</PublicWorkspaceLayoutInner>
+    </Suspense>
+  );
+};