From bd2668335c0b38b926446b38507f61ad845fb9ef Mon Sep 17 00:00:00 2001
From: DarkSky <25152247+darkskygit@users.noreply.github.com>
Date: Thu, 8 Sep 2022 20:24:05 +0800
Subject: [PATCH 1/4] fix: ci

---
 .github/workflows/{affine-keck.yml => affine-keck.yml.bak} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .github/workflows/{affine-keck.yml => affine-keck.yml.bak} (100%)

diff --git a/.github/workflows/affine-keck.yml b/.github/workflows/affine-keck.yml.bak
similarity index 100%
rename from .github/workflows/affine-keck.yml
rename to .github/workflows/affine-keck.yml.bak

From b35c9b2c1430f23a33f04fbd39435741ecd3f610 Mon Sep 17 00:00:00 2001
From: zuomeng wang <wxlxinglong@outlook.com>
Date: Fri, 9 Sep 2022 10:56:10 +0800
Subject: [PATCH 2/4] Feat/land page (#391)

* feat: update landing page

* feat: update landing page

* fix: react warning

* feat(route): rename variables

* feat(route): better refresh

* fix: update logo and i18n

* feat(code): remove unused comment

* refactor(workspace): rename workspaceId

* refactor(page): rename pageId

* feat(edit): more robust editing experience

* fix: landing page mobile

* fix: landing page mobile

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
---
 apps/ligo-virgo/src/pages/AppRoutes.tsx       |   2 +-
 .../src/pages/workspace/Edgeless.tsx          |   6 +-
 apps/ligo-virgo/src/pages/workspace/Home.tsx  |  26 ++-
 .../pages/workspace/WorkspaceContainer.tsx    |  17 +-
 .../src/pages/workspace/docs/Page.tsx         |   6 +-
 .../workspace/docs/collapsible-page-tree.tsx  |  10 +-
 .../workspace/docs/components/toc/TOC.tsx     |  10 +-
 apps/venus/src/app/common/Footer.tsx          |  13 +-
 apps/venus/src/app/common/Header.tsx          |  34 ++-
 apps/venus/src/app/common/MobileHeader.tsx    | 208 ++++++++++++++++++
 apps/venus/src/app/i18n/resources/en.json     |   1 +
 apps/venus/src/app/i18n/resources/zh.json     |   1 +
 .../common/src/lib/text/plugins/reflink.tsx   |   6 +-
 .../src/blocks/code/CodeView.tsx              |   3 -
 .../src/blocks/page/PageView.tsx              |   4 +-
 .../src/blocks/ref-link/ref-link-view.tsx     |   8 +-
 .../src/blocks/text/TextView.tsx              |   4 +-
 .../src/comment/use-add-comment.ts            |   6 +-
 .../menu/double-link-menu/DoubleLinkMenu.tsx  |   2 +-
 .../src/menu/link-menu/LinkMenu.tsx           |   2 +-
 .../editor-plugins/src/search/Search.tsx      |   2 +-
 .../header/EditorBoardSwitcher/Switcher.tsx   |   2 +-
 libs/components/layout/src/header/Header.tsx  |   6 +-
 .../layout/src/header/PageSettingPortal.tsx   |  20 +-
 libs/components/layout/src/header/Title.tsx   |  14 +-
 .../settings-sidebar/Comments/use-comments.ts |   4 +-
 .../Settings/util/use-workspace-page.ts       |   2 +-
 .../calendar-heatmap/utils.ts                 |   4 +-
 .../page-tree/tree-item/TreeItem.tsx          |  10 +-
 .../page-tree/use-page-tree.ts                |  32 +--
 .../src/services/editor-block/index.ts        |  37 ++--
 libs/datasource/jwt/src/yjs/index.ts          |   6 +-
 libs/datasource/state/src/page.ts             |   2 +-
 libs/datasource/state/src/user.ts             |   5 -
 libs/utils/src/utils.ts                       |   4 +-
 35 files changed, 374 insertions(+), 145 deletions(-)
 create mode 100644 apps/venus/src/app/common/MobileHeader.tsx

diff --git a/apps/ligo-virgo/src/pages/AppRoutes.tsx b/apps/ligo-virgo/src/pages/AppRoutes.tsx
index 855f717b28..4f1d845324 100644
--- a/apps/ligo-virgo/src/pages/AppRoutes.tsx
+++ b/apps/ligo-virgo/src/pages/AppRoutes.tsx
@@ -21,7 +21,7 @@ export function LigoVirgoRoutes() {
                 />
                 <Route path="/ui" element={<UIPage />} />
                 <Route
-                    path="/:workspace_id/*"
+                    path="/:workspaceId/*"
                     element={
                         <RoutePrivate>
                             <WorkspaceContainer />
diff --git a/apps/ligo-virgo/src/pages/workspace/Edgeless.tsx b/apps/ligo-virgo/src/pages/workspace/Edgeless.tsx
index c84ceda481..9d0b6a3aa1 100644
--- a/apps/ligo-virgo/src/pages/workspace/Edgeless.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/Edgeless.tsx
@@ -14,7 +14,7 @@ type EdgelessProps = {
 };
 
 export const Edgeless = (props: EdgelessProps) => {
-    const { page_id } = useParams();
+    const { pageId } = useParams();
     const { user } = useUserAndSpaces();
 
     useEffect(() => {
@@ -31,7 +31,5 @@ export const Edgeless = (props: EdgelessProps) => {
         update_recent_pages();
     }, [user, props.workspace]);
 
-    return (
-        <MemoAffineBoard workspace={props.workspace} rootBlockId={page_id} />
-    );
+    return <MemoAffineBoard workspace={props.workspace} rootBlockId={pageId} />;
 };
diff --git a/apps/ligo-virgo/src/pages/workspace/Home.tsx b/apps/ligo-virgo/src/pages/workspace/Home.tsx
index 3ae0da1da5..5034787eb1 100644
--- a/apps/ligo-virgo/src/pages/workspace/Home.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/Home.tsx
@@ -5,22 +5,23 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 export function WorkspaceHome() {
     const navigate = useNavigate();
-    const { workspace_id } = useParams();
+    const { workspaceId } = useParams();
     const { user } = useUserAndSpaces();
 
     useEffect(() => {
-        const navigate_to_user_initial_page = async () => {
-            const [recent_pages, user_initial_page_id] = await Promise.all([
-                services.api.userConfig.getRecentPages(workspace_id, user.id),
+        const navigateToUserInitialPage = async () => {
+            const [recentPages, userInitialPageId] = await Promise.all([
+                services.api.userConfig.getRecentPages(workspaceId, user.id),
                 services.api.userConfig.getUserInitialPage(
-                    workspace_id,
+                    workspaceId,
                     user.id
                 ),
             ]);
-            if (recent_pages.length === 0) {
+            // if recent pages if null, run initialize task
+            if (recentPages.length === 0) {
                 await services.api.editorBlock.copyTemplateToPage(
-                    workspace_id,
-                    user_initial_page_id,
+                    workspaceId,
+                    userInitialPageId,
                     TemplateFactory.generatePageTemplateByGroupKeys({
                         name: '👋 Get Started with AFFiNE',
                         groupKeys: [
@@ -31,11 +32,12 @@ export function WorkspaceHome() {
                     })
                 );
             }
-
-            navigate(`/${workspace_id}/${user_initial_page_id}`);
+            if (userInitialPageId) {
+                navigate(`/${workspaceId}/${userInitialPageId}`);
+            }
         };
-        navigate_to_user_initial_page();
-    }, [navigate, user.id, workspace_id]);
+        navigateToUserInitialPage();
+    }, [navigate, user.id, workspaceId]);
 
     return null;
 }
diff --git a/apps/ligo-virgo/src/pages/workspace/WorkspaceContainer.tsx b/apps/ligo-virgo/src/pages/workspace/WorkspaceContainer.tsx
index eb424f88c7..a681e98803 100644
--- a/apps/ligo-virgo/src/pages/workspace/WorkspaceContainer.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/WorkspaceContainer.tsx
@@ -7,27 +7,20 @@ import { WorkspaceHome } from './Home';
 import Pages from './pages';
 
 export function WorkspaceContainer() {
-    const { workspace_id } = useParams();
+    const { workspaceId } = useParams();
     const { user, currentSpaceId } = useUserAndSpaces();
 
-    if (
-        user &&
-        ![currentSpaceId, 'affine2vin277tcmafwq'].includes(workspace_id)
-    ) {
-        // return <Navigate to={`/${currentSpaceId}`} replace={true} />;
-    }
-
     return (
         <Routes>
             <Route path="/" element={<WorkspaceRootContainer />}>
                 <Route path="/pages" element={<Pages />} />
                 <Route
-                    path="/:page_id/edgeless"
-                    element={<Edgeless workspace={workspace_id} />}
+                    path="/:pageId/edgeless"
+                    element={<Edgeless workspace={workspaceId} />}
                 />
                 <Route
-                    path="/:page_id"
-                    element={<Page workspace={workspace_id} />}
+                    path="/:pageId"
+                    element={<Page workspace={workspaceId} />}
                 />
                 <Route path="/" element={<WorkspaceHome />} />
             </Route>
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
index ba1897cc4a..2a4c4f1aa5 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
@@ -34,7 +34,7 @@ export function Page(props: PageProps) {
     const [activeTab, setActiveTab] = useState(
         TabMap.get(TAB_TITLE.PAGES).value
     );
-    const { page_id } = useParams();
+    const { pageId } = useParams();
     const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
         useShowSpaceSidebar();
     const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
@@ -79,7 +79,7 @@ export function Page(props: PageProps) {
                                 </div>
                                 <div>
                                     <CollapsiblePageTree title="PAGES">
-                                        {page_id ? <PageTree /> : null}
+                                        {pageId ? <PageTree /> : null}
                                     </CollapsiblePageTree>
                                 </div>
                             </div>
@@ -91,7 +91,7 @@ export function Page(props: PageProps) {
                     </WorkspaceSidebarContent>
                 </WorkspaceSidebar>
             </LigoLeftContainer>
-            <EditorContainer workspace={props.workspace} pageId={page_id} />
+            <EditorContainer workspace={props.workspace} pageId={pageId} />
         </LigoApp>
     );
 }
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
index 9aef73aa22..13f81c10f5 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
@@ -38,7 +38,7 @@ export type CollapsiblePageTreeProps = {
 export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
     const { className, style, children, title, initialOpen = true } = props;
     const navigate = useNavigate();
-    const { workspace_id, page_id } = useParams();
+    const { workspaceId, pageId } = useParams();
 
     const { handleAddPage } = usePageTree();
     const { addPageToday } = useCalendarHeatmap();
@@ -46,18 +46,18 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
     const [open, setOpen] = useState(initialOpen);
 
     const create_page = useCallback(async () => {
-        if (page_id) {
+        if (pageId) {
             const newPage = await services.api.editorBlock.create({
-                workspace: workspace_id,
+                workspace: workspaceId,
                 type: 'page' as const,
             });
 
             await handleAddPage(newPage.id);
             addPageToday();
 
-            navigate(`/${workspace_id}/${newPage.id}`);
+            navigate(`/${workspaceId}/${newPage.id}`);
         }
-    }, [addPageToday, handleAddPage, navigate, page_id, workspace_id]);
+    }, [addPageToday, handleAddPage, navigate, pageId, workspaceId]);
 
     const [newPageBtnVisible, setNewPageBtnVisible] = useState<boolean>(false);
 
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
index 0a5c442590..f22bf43fea 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
@@ -116,7 +116,7 @@ const renderTOCContent = tocDataSource => {
 };
 
 export const TOC = () => {
-    const { page_id } = useParams();
+    const { pageId } = useParams();
     const [tocDataSource, setTocDataSource] = useState<TOCType[]>([]);
     const [activeBlockId, setActiveBlockId] = useState('');
 
@@ -124,7 +124,7 @@ export const TOC = () => {
     const listenerMapRef = useRef<ListenerMap>(new Map());
 
     const { currentEditors } = useCurrentEditors();
-    const editor = currentEditors[page_id] as Virgo;
+    const editor = currentEditors[pageId] as Virgo;
 
     const updateTocDataSource = useCallback(async () => {
         if (!editor) {
@@ -134,7 +134,7 @@ export const TOC = () => {
         const listenerMap = listenerMapRef.current;
 
         /* page listener: trigger update-notice when add new group */
-        const pageAsyncBlock = (await editor.getBlockByIds([page_id]))?.[0];
+        const pageAsyncBlock = (await editor.getBlockByIds([pageId]))?.[0];
         if (!listenerMap.has(pageAsyncBlock.id)) {
             listenerMap.set(
                 pageAsyncBlock.id,
@@ -144,7 +144,7 @@ export const TOC = () => {
 
         /* block listener: trigger update-notice when change block content */
         const { children = [] } =
-            (await editor.queryByPageId(page_id))?.[0] || {};
+            (await editor.queryByPageId(pageId))?.[0] || {};
         const asyncBlocks = (await editor.getBlockByIds(children)) || [];
         const { tocContents } = await getContentByAsyncBlocks(
             asyncBlocks,
@@ -155,7 +155,7 @@ export const TOC = () => {
         /* toc: flat content */
         const tocDataSource = getPageTOC(asyncBlocks, tocContents);
         setTocDataSource(tocDataSource);
-    }, [editor, page_id]);
+    }, [editor, pageId]);
 
     /* init toc and add page/block update-listener & unmount-listener */
     useEffect(() => {
diff --git a/apps/venus/src/app/common/Footer.tsx b/apps/venus/src/app/common/Footer.tsx
index f51d7f78ed..e1375074a4 100644
--- a/apps/venus/src/app/common/Footer.tsx
+++ b/apps/venus/src/app/common/Footer.tsx
@@ -90,13 +90,14 @@ export const AFFiNEFooter = ({
                 sx={{
                     display: 'flex',
                     justifyContent: 'center',
-                    maxWidth: '400px',
+                    flexWrap: 'wrap',
+                    maxWidth: '420px',
                     margin: 'auto',
                     marginBottom: '2em',
                     '--joy-shadow-sm': 0,
                 }}
             >
-                <Box sx={{ display: 'flex', width: '100%' }}>
+                <Box sx={{ display: 'flex', width: '84px' }}>
                     <Button
                         variant="plain"
                         sx={{
@@ -144,7 +145,7 @@ export const AFFiNEFooter = ({
                         </Grid>
                     </Button>
                 </Box>
-                <Box sx={{ display: 'flex', width: '100%' }}>
+                <Box sx={{ display: 'flex', width: '84px' }}>
                     <Button
                         variant="plain"
                         sx={{
@@ -190,7 +191,7 @@ export const AFFiNEFooter = ({
                         </Grid>
                     </Button>
                 </Box>
-                <Box sx={{ display: 'flex', width: '100%' }}>
+                <Box sx={{ display: 'flex', width: '84px' }}>
                     <Button
                         variant="plain"
                         sx={{
@@ -239,7 +240,7 @@ export const AFFiNEFooter = ({
                 <Box
                     sx={{
                         display: 'flex',
-                        width: '100%',
+                        width: '84px',
                     }}
                 >
                     <Button
@@ -285,7 +286,7 @@ export const AFFiNEFooter = ({
                         </Grid>
                     </Button>
                 </Box>
-                <Box sx={{ display: 'flex', width: '100%' }}>
+                <Box sx={{ display: 'flex', width: '84px' }}>
                     <Button
                         variant="plain"
                         sx={{
diff --git a/apps/venus/src/app/common/Header.tsx b/apps/venus/src/app/common/Header.tsx
index 1c48b71ae8..34d84f81df 100644
--- a/apps/venus/src/app/common/Header.tsx
+++ b/apps/venus/src/app/common/Header.tsx
@@ -11,6 +11,7 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import { styled, useMediaQuery } from '@mui/material';
 import AFFiNETextLogo from './affine-text-logo.png';
 import { HoverMenu } from './HoverMenu';
+import { MobileHeader } from './MobileHeader';
 
 import { options } from '../i18n';
 
@@ -22,7 +23,10 @@ export const AFFiNEHeader = () => {
     const changeLanguage = (event: any) => {
         i18n.changeLanguage(event);
     };
-    const matchesIPAD = useMediaQuery('(max-width: 768px)');
+    const matchesIPAD = useMediaQuery('(max-width: 1080px)');
+    if (matchesIPAD) {
+        return <MobileHeader />;
+    }
     return (
         <Container container spacing={2}>
             <Grid xs={6} sx={{ display: 'flex', alignItems: 'center' }}>
@@ -135,6 +139,34 @@ export const AFFiNEHeader = () => {
                         window.open(href);
                     }}
                 />
+                <HoverMenu
+                    title={t('ContactUs')}
+                    options={[
+                        {
+                            title: 'Discord',
+                            value: 'https://discord.gg/Arn7TqJBvG',
+                        },
+                        {
+                            title: 'Telegram',
+                            value: 'https://t.me/affineworkos',
+                        },
+                        {
+                            title: 'Reddit',
+                            value: 'https://www.reddit.com/r/Affine/',
+                        },
+                        {
+                            title: 'Medium',
+                            value: 'https://medium.com/@affineworkos',
+                        },
+                        {
+                            title: 'Email',
+                            value: 'mailto:contact@toeverything.info',
+                        },
+                    ]}
+                    onSelect={href => {
+                        window.open(href);
+                    }}
+                />
                 <Select
                     defaultValue="en"
                     sx={{ display: matchesIPAD ? 'none' : 'intial' }}
diff --git a/apps/venus/src/app/common/MobileHeader.tsx b/apps/venus/src/app/common/MobileHeader.tsx
new file mode 100644
index 0000000000..f55a793a45
--- /dev/null
+++ b/apps/venus/src/app/common/MobileHeader.tsx
@@ -0,0 +1,208 @@
+import Close from '@mui/icons-material/Close';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import Menu from '@mui/icons-material/Menu';
+import { Button, Grid } from '@mui/joy';
+import { useRef, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {
+    Checkbox,
+    Collapse,
+    Drawer,
+    List,
+    ListItemButton,
+    ListItemText,
+    styled,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import AFFiNETextLogo from './affine-text-logo.png';
+
+export const MobileHeader = () => {
+    const navigate = useNavigate();
+    const { i18n, t } = useTranslation();
+    const anchor = useRef<HTMLDivElement | null>(null);
+    const [openedDrawer, setDrawerState] = useState(false);
+    const handleDrawerOpenState = () => {
+        setDrawerState(!openedDrawer);
+    };
+    const [contactUsCollapse, setContactUsCollapse] = useState(false);
+    const handleContactUsClick = () => {
+        setContactUsCollapse(!contactUsCollapse);
+    };
+
+    const [languageCollapse, setLanguageCollapse] = useState(false);
+    const handleLanguageClick = () => {
+        setLanguageCollapse(!languageCollapse);
+    };
+
+    return (
+        <Container ref={anchor} container spacing={2}>
+            <Grid
+                xs={12}
+                sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }}
+            >
+                <StyledImage
+                    src={AFFiNETextLogo}
+                    alt="affine"
+                    onClick={() => navigate('/')}
+                />
+                <div>
+                    <Button
+                        variant="plain"
+                        onClick={() =>
+                            window.open(
+                                'https://github.com/toeverything/AFFiNE'
+                            )
+                        }
+                    >
+                        <GitHubIcon />
+                    </Button>
+                    <Button onClick={handleDrawerOpenState} variant="plain">
+                        {openedDrawer ? <Close /> : <Menu />}
+                    </Button>
+                </div>
+            </Grid>
+            <Drawer
+                anchor="top"
+                open={openedDrawer}
+                onClose={() => setDrawerState(false)}
+            >
+                <StyledDrawerContainer>
+                    <List>
+                        <ListItemButton onClick={() => navigate('/aboutus')}>
+                            <ListItemText primary={t('AboutUs') as string} />
+                        </ListItemButton>
+                        <ListItemButton
+                            onClick={() =>
+                                window.open('https://blog.affine.pro')
+                            }
+                        >
+                            <ListItemText primary={t('Blog') as string} />
+                        </ListItemButton>
+                        <ListItemButton
+                            onClick={() =>
+                                window.open('https://docs.affine.pro/')
+                            }
+                        >
+                            <ListItemText primary={t('Docs') as string} />
+                        </ListItemButton>
+                        <ListItemButton
+                            onClick={() =>
+                                window.open('https://feedback.affine.pro/')
+                            }
+                        >
+                            <ListItemText primary={t('Feedback') as string} />
+                        </ListItemButton>
+                        <ListItemButton onClick={handleContactUsClick}>
+                            <ListItemText primary={t('ContactUs') as string} />
+                            {contactUsCollapse ? (
+                                <ExpandLess />
+                            ) : (
+                                <ExpandMore />
+                            )}
+                        </ListItemButton>
+                        <Collapse
+                            in={contactUsCollapse}
+                            timeout="auto"
+                            unmountOnExit
+                        >
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open('https://discord.gg/Arn7TqJBvG')
+                                }
+                            >
+                                <ListItemText primary="Discord" />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open('https://t.me/affineworkos')
+                                }
+                            >
+                                <ListItemText primary="Telegram" />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open(
+                                        'https://www.reddit.com/r/Affine/'
+                                    )
+                                }
+                            >
+                                <ListItemText primary="Reddit" />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open(
+                                        'https://medium.com/@affineworkos'
+                                    )
+                                }
+                            >
+                                <ListItemText primary="Medium" />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() =>
+                                    window.open(
+                                        'mailto:contact@toeverything.info'
+                                    )
+                                }
+                            >
+                                <ListItemText primary="Email" />
+                            </ListItemButton>
+                        </Collapse>
+                        <ListItemButton onClick={handleLanguageClick}>
+                            <ListItemText primary={t('language') as string} />
+                            {languageCollapse ? <ExpandLess /> : <ExpandMore />}
+                        </ListItemButton>
+                        <Collapse
+                            in={languageCollapse}
+                            timeout="auto"
+                            unmountOnExit
+                        >
+                            <ListItemButton
+                                onClick={() => i18n.changeLanguage('en')}
+                            >
+                                <ListItemText primary="English" />
+                                <Checkbox checked={i18n.language === 'en'} />
+                            </ListItemButton>
+                            <ListItemButton
+                                onClick={() => i18n.changeLanguage('zh')}
+                            >
+                                <ListItemText primary="简体中文" />
+                                <Checkbox checked={i18n.language === 'zh'} />
+                            </ListItemButton>
+                        </Collapse>
+                    </List>
+                </StyledDrawerContainer>
+            </Drawer>
+        </Container>
+    );
+};
+
+const Container = styled(Grid)({
+    position: 'fixed',
+    top: 0,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: '100%',
+    paddingTop: '1em',
+    backgroundColor: '#fff',
+    zIndex: 1500,
+    maxWidth: '1440px',
+    margin: 'auto',
+    marginTop: '0 !important',
+});
+
+const StyledImage = styled('img')({
+    height: '24px',
+    marginRight: '16px',
+    cursor: 'pointer',
+});
+
+const StyledDrawerContainer = styled('div')({
+    paddingTop: '72px',
+});
diff --git a/apps/venus/src/app/i18n/resources/en.json b/apps/venus/src/app/i18n/resources/en.json
index 789a577584..80381df1d7 100644
--- a/apps/venus/src/app/i18n/resources/en.json
+++ b/apps/venus/src/app/i18n/resources/en.json
@@ -10,6 +10,7 @@
         "Alternative": "Alternative",
         "Check GitHub": "Check GitHub",
         "Try it Online": "Try it Online",
+        "language": "Language",
         "description1": {
             "part1": "Affine is the next-generation collaborative knowledge base for professionals.",
             "part2": "It's not just a collection of Docs, whiteboard, and tables.",
diff --git a/apps/venus/src/app/i18n/resources/zh.json b/apps/venus/src/app/i18n/resources/zh.json
index 9a3e51a2ca..545a644c28 100644
--- a/apps/venus/src/app/i18n/resources/zh.json
+++ b/apps/venus/src/app/i18n/resources/zh.json
@@ -10,6 +10,7 @@
         "Alternative": "的另一种选择",
         "Check GitHub": "GitHub中查看",
         "Try it Online": "在线试用",
+        "language": "语言",
         "description1": {
             "part1": "Affine是面向专业人士的下一代协同知识库",
             "part2": "它不仅仅是一个文档、白板和表格的集合。",
diff --git a/libs/components/common/src/lib/text/plugins/reflink.tsx b/libs/components/common/src/lib/text/plugins/reflink.tsx
index 2b0c42a643..5cbd90478f 100644
--- a/libs/components/common/src/lib/text/plugins/reflink.tsx
+++ b/libs/components/common/src/lib/text/plugins/reflink.tsx
@@ -2,8 +2,8 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Descendant } from 'slate';
 
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
-import { BlockSearchItem } from '@toeverything/datasource/jwt';
 import { styled } from '@toeverything/components/ui';
+import { BlockSearchItem } from '@toeverything/datasource/jwt';
 
 import { BlockPreview } from '../../block-preview';
 
@@ -26,14 +26,14 @@ type InlineRefLinkProps = {
 };
 
 export const InlineRefLink = ({ block, pageId }: InlineRefLinkProps) => {
-    const { workspace_id } = useParams();
+    const { workspaceId } = useParams();
     const navigate = useNavigate();
 
     if (block) {
         return (
             <BlockPreviewContainer
                 block={block}
-                onClick={() => navigate(`/${workspace_id}/${pageId}`)}
+                onClick={() => navigate(`/${workspaceId}/${pageId}`)}
             />
         );
     }
diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx
index bfdabf0199..a6a47e261c 100644
--- a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx
+++ b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx
@@ -164,9 +164,6 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
     };
     useEffect(() => {
         handleLangChange(langType ? langType : DEFAULT_LANG);
-        // setTimeout(() => {
-        //     focusCode();
-        // }, 100);
     }, []);
 
     const copyCode = () => {
diff --git a/libs/components/editor-blocks/src/blocks/page/PageView.tsx b/libs/components/editor-blocks/src/blocks/page/PageView.tsx
index 123021e361..cb932670bd 100644
--- a/libs/components/editor-blocks/src/blocks/page/PageView.tsx
+++ b/libs/components/editor-blocks/src/blocks/page/PageView.tsx
@@ -16,7 +16,7 @@ import {
 } from '../../components/text-manage';
 
 export const PageView = ({ block, editor }: CreateView) => {
-    const { workspace_id } = useParams();
+    const { workspaceId } = useParams();
     const textRef = useRef<ExtendedTextUtils>(null);
     const [backLinks, setBackLinks] =
         useState<Awaited<ReturnType<typeof editor.search>>>();
@@ -100,7 +100,7 @@ export const PageView = ({ block, editor }: CreateView) => {
                 className={style9(styles.content)}
                 suppressContentEditableWarning
             > */}
-            <BackLink blocks={backLinks} workspaceId={workspace_id} />
+            <BackLink blocks={backLinks} workspaceId={workspaceId} />
             {/*{block.childrenIds.map(childId => (*/}
             {/*    <RenderBlock key={childId} blockId={childId} />*/}
             {/*))}*/}
diff --git a/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx b/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx
index e75773b641..ac2b5eb2cb 100644
--- a/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx
+++ b/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx
@@ -6,16 +6,16 @@ import { CreateView } from '@toeverything/framework/virgo';
 type RefLinkView = CreateView;
 
 export const RefLinkView = ({ block, editor }: RefLinkView) => {
-    const page_id = useMemo(() => block.getProperty('reference'), [block]);
+    const pageId = useMemo(() => block.getProperty('reference'), [block]);
 
     const [block_content, set_block] =
         useState<Awaited<ReturnType<typeof editor.search>>[number]>();
 
     useEffect(() => {
         editor
-            .search({ tag: `id:${page_id}` })
+            .search({ tag: `id:${pageId}` })
             .then(block => set_block(block[0]));
-    }, [editor, page_id]);
+    }, [editor, pageId]);
 
-    return <InlineRefLink block={block_content} pageId={page_id} />;
+    return <InlineRefLink block={block_content} pageId={pageId} />;
 };
diff --git a/libs/components/editor-blocks/src/blocks/text/TextView.tsx b/libs/components/editor-blocks/src/blocks/text/TextView.tsx
index baae481c91..094d05f755 100644
--- a/libs/components/editor-blocks/src/blocks/text/TextView.tsx
+++ b/libs/components/editor-blocks/src/blocks/text/TextView.tsx
@@ -90,7 +90,9 @@ export const TextView = ({
         await block.removeChildren();
         await block.after(nextBlock);
 
-        editor.selectionManager.activeNodeByNodeId(nextBlock.id);
+        setTimeout(() => {
+            editor.selectionManager.activeNodeByNodeId(nextBlock.id, 'start');
+        });
         return true;
     };
 
diff --git a/libs/components/editor-plugins/src/comment/use-add-comment.ts b/libs/components/editor-plugins/src/comment/use-add-comment.ts
index d5572801aa..cda2976882 100644
--- a/libs/components/editor-plugins/src/comment/use-add-comment.ts
+++ b/libs/components/editor-plugins/src/comment/use-add-comment.ts
@@ -1,6 +1,6 @@
-import { useState, useCallback } from 'react';
-import { useParams } from 'react-router-dom';
 import { services } from '@toeverything/datasource/db-service';
+import { useCallback, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import { WithEditorSelectionType } from '../menu/inline-menu/types';
 
 export const useAddComment = ({
@@ -8,7 +8,7 @@ export const useAddComment = ({
     selectionInfo,
     setShow,
 }: WithEditorSelectionType) => {
-    const { workspace_id: workspaceId, page_id: pageId } = useParams();
+    const { workspaceId, pageId } = useParams();
     const [currentComment, setCurrentComment] = useState('');
 
     const createComment = useCallback(async (): Promise<{
diff --git a/libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx b/libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx
index 90f5e10c43..d83a09eff6 100644
--- a/libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx
+++ b/libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx
@@ -44,7 +44,7 @@ export const DoubleLinkMenu = ({
     hooks,
     style,
 }: DoubleLinkMenuProps) => {
-    const { page_id: curPageId } = useParams();
+    const { pageId: curPageId } = useParams();
     const [isOpen, setIsOpen] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const dialogRef = useRef<HTMLDivElement>();
diff --git a/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx b/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx
index ddd178e449..81856eba4f 100644
--- a/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx
+++ b/libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx
@@ -42,7 +42,7 @@ const normalizeUrl = (url: string) => {
 };
 
 export const LinkMenu = ({ editor, hooks }: LinkMenuProps) => {
-    const { page_id: curPageId } = useParams();
+    const { pageId: curPageId } = useParams();
     const [isOpen, setIsOpen] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const dialogRef = useRef<HTMLDivElement>();
diff --git a/libs/components/editor-plugins/src/search/Search.tsx b/libs/components/editor-plugins/src/search/Search.tsx
index 6092862416..3511b610c3 100644
--- a/libs/components/editor-plugins/src/search/Search.tsx
+++ b/libs/components/editor-plugins/src/search/Search.tsx
@@ -47,7 +47,7 @@ type SearchProps = {
 };
 
 export const Search = (props: SearchProps) => {
-    const { workspace_id: workspaceId } = useParams();
+    const { workspaceId } = useParams();
     const navigate = useNavigate();
 
     const [open, setOpen] = useState(false);
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx
index 6c8ab70372..918603d5ef 100644
--- a/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx
@@ -16,7 +16,7 @@ export const Switcher = () => {
         if (targetViewMode === pageViewMode) {
             return;
         }
-        const workspaceId = params['workspace_id'];
+        const workspaceId = params['workspaceId'];
         /**
          * There are two possible modes:
          * Page mode: /{workspaceId}/{pageId}
diff --git a/libs/components/layout/src/header/Header.tsx b/libs/components/layout/src/header/Header.tsx
index 0f9028b9ae..b025c81023 100644
--- a/libs/components/layout/src/header/Header.tsx
+++ b/libs/components/layout/src/header/Header.tsx
@@ -46,7 +46,7 @@ export const AffineHeader = () => {
     useUserAndSpaces();
 
     const showCenterTab =
-        (params['workspace_id'] || pathname.includes('/space/')) && params['*'];
+        (params['workspaceId'] || pathname.includes('/space/')) && params['*'];
 
     if (hideAffineHeader(pathname)) {
         return null;
@@ -82,7 +82,7 @@ export const AffineHeader = () => {
                                     isEdgelessView
                                         ? navigate(
                                               `/${
-                                                  params['workspace_id'] ||
+                                                  params['workspaceId'] ||
                                                   'space'
                                               }/${params['*'].slice(0, -11)}`
                                           )
@@ -108,7 +108,7 @@ export const AffineHeader = () => {
                                         ? null
                                         : navigate(
                                               `/${
-                                                  params['workspace_id'] ||
+                                                  params['workspaceId'] ||
                                                   'space'
                                               }/${params['*']}` + '/edgeless'
                                           )
diff --git a/libs/components/layout/src/header/PageSettingPortal.tsx b/libs/components/layout/src/header/PageSettingPortal.tsx
index 115b5c95fd..6dfc07fec8 100644
--- a/libs/components/layout/src/header/PageSettingPortal.tsx
+++ b/libs/components/layout/src/header/PageSettingPortal.tsx
@@ -50,7 +50,7 @@ const MESSAGES = {
 
 function PageSettingPortal() {
     const [alertOpen, setAlertOpen] = useState(false);
-    const { workspace_id } = useParams();
+    const { workspaceId } = useParams();
     const [pageBlock, setPageBlock] = useState<PageBlock>();
 
     const params = useParams();
@@ -64,7 +64,7 @@ function PageSettingPortal() {
 
     const fetchPageBlock = useCallback(async () => {
         const dbPageBlock = await services.api.editorBlock.getBlock(
-            workspace_id,
+            workspaceId,
             pageId
         );
         if (!dbPageBlock) return;
@@ -78,11 +78,11 @@ function PageSettingPortal() {
                 //@ts-ignore
                 text.value[0].text,
         });
-    }, [workspace_id, pageId]);
+    }, [workspaceId, pageId]);
 
     useEffect(() => {
         fetchPageBlock();
-    }, [workspace_id, pageId, fetchPageBlock]);
+    }, [workspaceId, pageId, fetchPageBlock]);
     const redirectToPage = (newWorkspaceId: string, newPageId: string) => {
         navigate('/' + newWorkspaceId + '/' + newPageId);
     };
@@ -90,23 +90,23 @@ function PageSettingPortal() {
     const handleDuplicatePage = async () => {
         //create page
         const newPage = await services.api.editorBlock.create({
-            workspace: workspace_id,
+            workspace: workspaceId,
             type: 'page' as const,
         });
         //add page to tree
         await services.api.pageTree.addNextPageToWorkspace(
-            workspace_id,
+            workspaceId,
             pageId,
             newPage.id
         );
         //copy source page to new page
         await services.api.editorBlock.copyPage(
-            workspace_id,
+            workspaceId,
             pageId,
             newPage.id
         );
 
-        redirectToPage(workspace_id, newPage.id);
+        redirectToPage(workspaceId, newPage.id);
     };
 
     const handleCopy = () => {
@@ -128,7 +128,7 @@ function PageSettingPortal() {
             .inspector()
             .load()
             .then(() => {
-                window.location.href = `/${workspace_id}/`;
+                window.location.href = `/${workspaceId}/`;
             });
     };
 
@@ -145,7 +145,7 @@ function PageSettingPortal() {
                 fullWidthChecked: checked,
             },
             id: pageId,
-            workspace: workspace_id,
+            workspace: workspaceId,
         });
     };
 
diff --git a/libs/components/layout/src/header/Title.tsx b/libs/components/layout/src/header/Title.tsx
index 0447cd52f6..dcd0c9e356 100644
--- a/libs/components/layout/src/header/Title.tsx
+++ b/libs/components/layout/src/header/Title.tsx
@@ -12,7 +12,7 @@ import { useUserAndSpaces } from '@toeverything/datasource/state';
 export const CurrentPageTitle = () => {
     const { user } = useUserAndSpaces();
     const params = useParams();
-    const { workspace_id } = params;
+    const { workspaceId } = params;
     const [pageId, setPageId] = useState<string>('');
     const [pageTitle, setPageTitle] = useState<string | undefined>();
     /* card.7 */
@@ -25,9 +25,9 @@ export const CurrentPageTitle = () => {
     }, [params]);
 
     const fetchPageTitle = useCallback(async () => {
-        if (!workspace_id || !pageId) return;
+        if (!workspaceId || !pageId) return;
         const [pageEditorBlock] = await services.api.editorBlock.get({
-            workspace: workspace_id,
+            workspace: workspaceId,
             ids: [pageId],
         });
         /* card.7 */
@@ -39,21 +39,21 @@ export const CurrentPageTitle = () => {
                 ?.map(v => v.text)
                 .join('') ?? 'Untitled'
         );
-    }, [pageId, workspace_id]);
+    }, [pageId, workspaceId]);
 
     useEffect(() => {
         if (user) fetchPageTitle();
     }, [fetchPageTitle, user]);
 
     useEffect(() => {
-        if (!user || !workspace_id || !pageId || pageTitle === undefined)
+        if (!user || !workspaceId || !pageId || pageTitle === undefined)
             return () => {};
 
         let unobserve: () => void;
         const auto_update_title = async () => {
             // console.log(';; title registration auto update');
             unobserve = await services.api.editorBlock.observe(
-                { workspace: workspace_id, id: pageId },
+                { workspace: workspaceId, id: pageId },
                 businessBlock => {
                     // console.log(';; auto_update_title', businessBlock);
                     fetchPageTitle();
@@ -65,7 +65,7 @@ export const CurrentPageTitle = () => {
         return () => {
             // unobserve?.();
         };
-    }, [fetchPageTitle, pageId, pageTitle, user, workspace_id]);
+    }, [fetchPageTitle, pageId, pageTitle, user, workspaceId]);
 
     useEffect(() => {
         document.title = pageTitle || '';
diff --git a/libs/components/layout/src/settings-sidebar/Comments/use-comments.ts b/libs/components/layout/src/settings-sidebar/Comments/use-comments.ts
index 510b4e1bfb..b3b13069fa 100644
--- a/libs/components/layout/src/settings-sidebar/Comments/use-comments.ts
+++ b/libs/components/layout/src/settings-sidebar/Comments/use-comments.ts
@@ -9,7 +9,7 @@ import { useParams } from 'react-router-dom';
 import type { CommentInfo } from './type';
 
 export const useComments = () => {
-    const { workspace_id: workspaceId, page_id: pageId } = useParams();
+    const { workspaceId, pageId } = useParams();
 
     const [comments, setComments] = useState<CommentInfo[]>([]);
     const [observeIds, setObserveIds] = useState<string[]>([]);
@@ -71,7 +71,7 @@ export const useComments = () => {
 };
 
 export const useActiveComment = () => {
-    const { workspace_id: workspaceId, page_id: pageId } = useParams();
+    const { workspaceId, pageId } = useParams();
     const { currentEditors } = useCurrentEditors();
     const editor = useMemo(() => {
         return currentEditors[pageId] as Virgo;
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/use-workspace-page.ts b/libs/components/layout/src/settings-sidebar/Settings/util/use-workspace-page.ts
index b9048e3ff4..48f07fc2c4 100644
--- a/libs/components/layout/src/settings-sidebar/Settings/util/use-workspace-page.ts
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/use-workspace-page.ts
@@ -7,7 +7,7 @@ interface UseWorkspaceAndPageIdReturn {
 
 export const useWorkspaceAndPageId = (): UseWorkspaceAndPageIdReturn => {
     const params = useParams();
-    const workspaceId = params['workspace_id'];
+    const workspaceId = params['workspaceId'];
     const pageId = params['*'].split('/')[0];
     return {
         workspaceId,
diff --git a/libs/components/layout/src/workspace-sidebar/calendar-heatmap/utils.ts b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/utils.ts
index 6b440103f0..76b1733ee0 100644
--- a/libs/components/layout/src/workspace-sidebar/calendar-heatmap/utils.ts
+++ b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/utils.ts
@@ -47,8 +47,8 @@ export async function fetchActivitiesHeatmap(
     // const pages = await db.getByType('page');
     const pages_with_ids = (await Promise.all(
         flattenedItems.map(async (page_item: any) => {
-            const page_id = page_item.id;
-            return [page_id, await db.get(page_id as 'page')];
+            const pageId = page_item.id;
+            return [pageId, await db.get(pageId as 'page')];
         })
     )) as [string, BlockImplInstance][];
     const pages = new Map(pages_with_ids);
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx
index 8ed5db75e8..ff26cb1caa 100755
--- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx
@@ -57,7 +57,9 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         },
         ref
     ) => {
-        const { workspace_id, page_id } = useParams();
+        const params = useParams();
+        const workspaceId = params['workspaceId'];
+        const curPageId = params['pageId'];
         const BooleanPageTreeItemMoreActions = useFlag(
             'BooleanPageTreeItemMoreActions',
             true
@@ -71,7 +73,7 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                 disableSelection={disableSelection}
                 disableInteraction={disableInteraction}
                 spacing={`${indentationWidth * depth + 12}px`}
-                active={pageId === page_id}
+                active={pageId === curPageId}
                 {...props}
             >
                 {childCount !== 0 ? (
@@ -89,12 +91,12 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                 )}
 
                 <TreeItemContent {...handleProps}>
-                    <TextLink to={`/${workspace_id}/${pageId}`}>
+                    <TextLink to={`/${workspaceId}/${pageId}`}>
                         {value}
                     </TextLink>
                     {BooleanPageTreeItemMoreActions && (
                         <MoreActions
-                            workspaceId={workspace_id}
+                            workspaceId={workspaceId}
                             pageId={pageId}
                             onRemove={onRemove}
                         />
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/use-page-tree.ts b/libs/components/layout/src/workspace-sidebar/page-tree/use-page-tree.ts
index b088242ee2..43f84f527d 100755
--- a/libs/components/layout/src/workspace-sidebar/page-tree/use-page-tree.ts
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/use-page-tree.ts
@@ -19,7 +19,7 @@ import {
 const page_tree_atom = atom<TreeItems | undefined>([]);
 
 export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
-    const { workspace_id, page_id } = useParams();
+    const { workspaceId, pageId } = useParams();
     const navigate = useNavigate();
     const [items] = useAtom(page_tree_atom);
     const [activeId, setActiveId] = useState<string | undefined>(undefined);
@@ -56,11 +56,11 @@ export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
     const savePageTreeData = useCallback(
         async (treeData?: TreeItem[]) => {
             await services.api.pageTree.setPageTree<TreeItem>(
-                workspace_id,
+                workspaceId,
                 treeData || []
             );
         },
-        [workspace_id]
+        [workspaceId]
     );
 
     const resetState = useCallback(() => {
@@ -129,19 +129,19 @@ export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
     const handleRemove = useCallback(
         async (id: string) => {
             await savePageTreeData(removeItem(items, id));
-            await services.api.userConfig.removePage(workspace_id, id);
+            await services.api.userConfig.removePage(workspaceId, id);
             //remove page from jwst
-            await services.api.pageTree.removePage(workspace_id, id);
-            if (id === page_id) {
-                navigate(`/${workspace_id}`);
+            await services.api.pageTree.removePage(workspaceId, id);
+            if (id === pageId) {
+                navigate(`/${workspaceId}`);
             }
         },
-        [items, savePageTreeData, workspace_id]
+        [items, savePageTreeData, workspaceId]
     );
 
     const handleAddPage = useCallback(
-        async (page_id?: string) => {
-            await savePageTreeData([{ id: page_id, children: [] }, ...items]);
+        async (pageId?: string) => {
+            await savePageTreeData([{ id: pageId, children: [] }, ...items]);
         },
         [items, savePageTreeData]
     );
@@ -177,25 +177,25 @@ export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
 
 export const useDndTreeAutoUpdate = () => {
     const [, set_items] = useAtom(page_tree_atom);
-    const { workspace_id, page_id } = useParams();
+    const { workspaceId, pageId } = useParams();
 
     const fetch_page_tree_data = useCallback(async () => {
         const pages = await services.api.pageTree.getPageTree<TreeItem>(
-            workspace_id
+            workspaceId
         );
         set_items(pages);
-    }, [set_items, workspace_id]);
+    }, [set_items, workspaceId]);
 
     useEffect(() => {
         fetch_page_tree_data();
     }, [fetch_page_tree_data]);
 
     useEffect(() => {
-        if (!page_id) return () => {};
+        if (!pageId) return () => {};
         let unobserve: () => void;
         const auto_update_page_tree = async () => {
             unobserve = await services.api.pageTree.observe(
-                { workspace: workspace_id, page: page_id },
+                { workspace: workspaceId, page: pageId },
                 () => {
                     fetch_page_tree_data();
                 }
@@ -206,5 +206,5 @@ export const useDndTreeAutoUpdate = () => {
         return () => {
             unobserve?.();
         };
-    }, [fetch_page_tree_data, page_id, workspace_id]);
+    }, [fetch_page_tree_data, pageId, workspaceId]);
 };
diff --git a/libs/datasource/db-service/src/services/editor-block/index.ts b/libs/datasource/db-service/src/services/editor-block/index.ts
index d24efb9221..30b75a902c 100644
--- a/libs/datasource/db-service/src/services/editor-block/index.ts
+++ b/libs/datasource/db-service/src/services/editor-block/index.ts
@@ -265,37 +265,34 @@ export class EditorBlock extends ServiceBaseClass {
         }
     }
     async copyPage(
-        workspace_id: string,
-        source_page_id: string,
-        new_page_id: string
+        workspaceId: string,
+        sourcePageId: string,
+        newPageId: string
     ): Promise<boolean> {
-        const db = await this.database.getDatabase(workspace_id);
+        const db = await this.database.getDatabase(workspaceId);
 
-        const source_page = await this.getBlock(
-            workspace_id,
-            source_page_id as 'block'
+        const sourcePage = await this.getBlock(
+            workspaceId,
+            sourcePageId as 'block'
         );
-        const new_page = await this.getBlock(
-            workspace_id,
-            new_page_id as 'block'
-        );
-        if (!source_page) {
+        const newPage = await this.getBlock(workspaceId, newPageId as 'block');
+        if (!sourcePage) {
             return false;
         }
-        const source_page_children = source_page.children;
-        const decorations = source_page.getDecorations();
+        const sourcePageChildren = sourcePage.children;
+        const decorations = sourcePage.getDecorations();
         Object.entries(decorations).forEach(([key, value]) => {
-            new_page?.setDecoration(key, source_page.getDecoration(key));
+            newPage?.setDecoration(key, sourcePage.getDecoration(key));
         });
 
         //@ts-ignore
-        this.decorate_page_title(new_page, 'copy from ');
+        this.decorate_page_title(newPage, 'copy from ');
 
-        for (let i = 0; i < source_page_children.length; i++) {
-            const source_page_child = await db.get(
-                source_page_children[i] as 'block'
+        for (let i = 0; i < sourcePageChildren.length; i++) {
+            const sourcePageChild = await db.get(
+                sourcePageChildren[i] as 'block'
             );
-            new_page?.insertChildren(source_page_child);
+            newPage?.insertChildren(sourcePageChild);
         }
         return true;
     }
diff --git a/libs/datasource/jwt/src/yjs/index.ts b/libs/datasource/jwt/src/yjs/index.ts
index 76db288ad3..d430d29083 100644
--- a/libs/datasource/jwt/src/yjs/index.ts
+++ b/libs/datasource/jwt/src/yjs/index.ts
@@ -350,7 +350,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
                     const [file] = (await fromEvent(handles)) as File[];
                     const binary = await file?.arrayBuffer();
                     console.log(this._provider.providers);
-                    let { indexeddb } = (
+                    const { indexeddb } = (
                         this._provider.providers as any[]
                     ).find(p => p.indexeddb);
                     await indexeddb?.idb?.clearData();
@@ -391,9 +391,9 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
             },
             parse: () => this._doc.toJSON(),
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            parse_page: (page_id: string) => {
+            parse_page: (pageId: string) => {
                 const blocks = this._blocks.toJSON();
-                return resolve_block(blocks, page_id);
+                return resolve_block(blocks, pageId);
             },
             // eslint-disable-next-line @typescript-eslint/naming-convention
             parse_pages: (resolve = false) => {
diff --git a/libs/datasource/state/src/page.ts b/libs/datasource/state/src/page.ts
index e1706e508e..273eb33764 100644
--- a/libs/datasource/state/src/page.ts
+++ b/libs/datasource/state/src/page.ts
@@ -9,7 +9,7 @@ const _currentEditors = atom<EditorsMap>({} as EditorsMap);
 
 /** hook for using editors outside page */
 export const useCurrentEditors = () => {
-    const { workspace_id: workspaceId, page_id: pageId } = useParams();
+    const { workspaceId, pageId } = useParams();
     const { pathname } = useLocation();
     const [currentEditors, setCurrentEditors] = useAtom(_currentEditors);
 
diff --git a/libs/datasource/state/src/user.ts b/libs/datasource/state/src/user.ts
index 063f9f7f04..40ffbd80d9 100644
--- a/libs/datasource/state/src/user.ts
+++ b/libs/datasource/state/src/user.ts
@@ -5,7 +5,6 @@ import {
 } from 'firebase/auth';
 import { atom, useAtom } from 'jotai';
 import { useEffect, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router';
 
 import { useIdentifyUser } from '@toeverything/datasource/feature-flags';
 import { UserInfo } from '@toeverything/utils';
@@ -63,15 +62,11 @@ const BRAND_ID = 'AFFiNE';
 
 const _localTrigger = atom<boolean>(false);
 const _useUserAndSpacesForFreeLogin = () => {
-    const location = useLocation();
-    const navigate = useNavigate();
     const [user, setUser] = useAtom(_userAtom);
     const [loading, setLoading] = useAtom(_loadingAtom);
-    const [localTrigger] = useAtom(_localTrigger);
 
     useEffect(() => {
         if (loading) {
-            navigate(`/${BRAND_ID}`);
             setLoading(false);
         }
     }, []);
diff --git a/libs/utils/src/utils.ts b/libs/utils/src/utils.ts
index 28adc6c4d8..1efdef259f 100644
--- a/libs/utils/src/utils.ts
+++ b/libs/utils/src/utils.ts
@@ -6,8 +6,8 @@ export function getUserDisplayName(user?: UserInfo) {
 }
 
 /**
- * Get page_id from URL
- * @returns page_id
+ * Get pageId from URL
+ * @returns pageId
  */
 export function getPageId() {
     const path = window.location.pathname.match(/\/(\w+)\/(\w+)/);

From a26ff35a7b35dfbdaea75f719d17d50bfd7029e5 Mon Sep 17 00:00:00 2001
From: alt0 <wxlxinglong@outlook.com>
Date: Fri, 9 Sep 2022 15:00:24 +0800
Subject: [PATCH 3/4] fix: landing page style & duplicate contact us

---
 apps/venus/src/app/IndexPage/Alternatives.tsx |  8 ++---
 apps/venus/src/app/IndexPage/IndexPage.tsx    |  8 ++---
 apps/venus/src/app/common/Header.tsx          | 29 +------------------
 3 files changed, 9 insertions(+), 36 deletions(-)

diff --git a/apps/venus/src/app/IndexPage/Alternatives.tsx b/apps/venus/src/app/IndexPage/Alternatives.tsx
index 17403e01c9..4c7645a9d8 100644
--- a/apps/venus/src/app/IndexPage/Alternatives.tsx
+++ b/apps/venus/src/app/IndexPage/Alternatives.tsx
@@ -7,7 +7,7 @@ import { useMediaQuery } from '@mui/material';
 
 const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
     position: 'relative',
-    width: '20em',
+    width: '24em',
     height: '128px',
     transform: 'translateY(-8px)',
     overflowY: 'hidden',
@@ -21,7 +21,7 @@ const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
         height: 'inherit',
         position: 'absolute',
         left: '0',
-        top: '0',
+        top: '-23px',
         paddingTop: '22px',
         lineHeight: '96px',
         '@media (max-width: 1024px)': {
@@ -105,7 +105,7 @@ export const AlternativesProduct = () => {
                 )}
             >
                 <Typography
-                    fontSize="64px"
+                    fontSize="96px"
                     fontWeight={900}
                     sx={{
                         color: '#06449d',
@@ -135,7 +135,7 @@ export const AlternativesProduct = () => {
                 }}
             >
                 <Typography
-                    fontSize="64px"
+                    fontSize="96px"
                     fontWeight={900}
                     sx={{
                         color: '#06449d',
diff --git a/apps/venus/src/app/IndexPage/IndexPage.tsx b/apps/venus/src/app/IndexPage/IndexPage.tsx
index 71e26402e8..e664fa834d 100644
--- a/apps/venus/src/app/IndexPage/IndexPage.tsx
+++ b/apps/venus/src/app/IndexPage/IndexPage.tsx
@@ -64,7 +64,7 @@ export function IndexPage() {
     return (
         <>
             <AFFiNEHeader />
-            <Grid xs={12} sx={{ display: 'flex', marginTop: '12vh!important' }}>
+            <Grid xs={12} sx={{ display: 'flex', marginTop: '20vh!important' }}>
                 <Box
                     sx={{
                         display: 'inline-flex',
@@ -76,7 +76,7 @@ export function IndexPage() {
                     }}
                 >
                     <Typography
-                        fontSize="64px"
+                        fontSize="96px"
                         fontWeight={900}
                         sx={{
                             marginRight: '0.25em',
@@ -89,7 +89,7 @@ export function IndexPage() {
                         {t('Open Source')},
                     </Typography>
                     <Typography
-                        fontSize="64px"
+                        fontSize="96px"
                         fontWeight={900}
                         sx={{
                             '@media (max-width: 1024px)': {
@@ -120,7 +120,7 @@ export function IndexPage() {
                 >
                     <AlternativesProduct />
                     <Typography
-                        fontSize="64px"
+                        fontSize="96px"
                         fontWeight={900}
                         sx={{
                             color: '#06449d',
diff --git a/apps/venus/src/app/common/Header.tsx b/apps/venus/src/app/common/Header.tsx
index 34d84f81df..9a2e8d0173 100644
--- a/apps/venus/src/app/common/Header.tsx
+++ b/apps/venus/src/app/common/Header.tsx
@@ -139,34 +139,6 @@ export const AFFiNEHeader = () => {
                         window.open(href);
                     }}
                 />
-                <HoverMenu
-                    title={t('ContactUs')}
-                    options={[
-                        {
-                            title: 'Discord',
-                            value: 'https://discord.gg/Arn7TqJBvG',
-                        },
-                        {
-                            title: 'Telegram',
-                            value: 'https://t.me/affineworkos',
-                        },
-                        {
-                            title: 'Reddit',
-                            value: 'https://www.reddit.com/r/Affine/',
-                        },
-                        {
-                            title: 'Medium',
-                            value: 'https://medium.com/@affineworkos',
-                        },
-                        {
-                            title: 'Email',
-                            value: 'mailto:contact@toeverything.info',
-                        },
-                    ]}
-                    onSelect={href => {
-                        window.open(href);
-                    }}
-                />
                 <Select
                     defaultValue="en"
                     sx={{ display: matchesIPAD ? 'none' : 'intial' }}
@@ -192,6 +164,7 @@ const Container = styled(Grid)({
     transform: 'translateX(-50%)',
     width: '100%',
     paddingTop: '1em',
+    paddingBottom: '1em',
     backgroundColor: '#fff',
     zIndex: 1500,
     maxWidth: '1440px',

From d77052ee1b6a707eb8ad49e487fb4410c6c5cfcb Mon Sep 17 00:00:00 2001
From: alt0 <wxlxinglong@outlook.com>
Date: Fri, 9 Sep 2022 17:06:12 +0800
Subject: [PATCH 4/4] feat: add hubspot embed script

---
 .github/workflows/livedemo.yml    | 87 +++++++++++++++++++++++++++++++
 apps/ligo-virgo/src/template.html |  1 +
 apps/ligo-virgo/webpack.config.js |  8 +++
 3 files changed, 96 insertions(+)
 create mode 100644 .github/workflows/livedemo.yml

diff --git a/.github/workflows/livedemo.yml b/.github/workflows/livedemo.yml
new file mode 100644
index 0000000000..d5ed5b9987
--- /dev/null
+++ b/.github/workflows/livedemo.yml
@@ -0,0 +1,87 @@
+name: Build AFFiNE-Local
+
+on:
+    push:
+        branches: [master]
+    # pull_request:
+    #     branches: [master]
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+# See https://docs.github.com/en/actions/using-jobs/using-concurrency
+concurrency:
+    # The concurrency group contains the workflow name and the branch name for
+    # pull requests or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+env:
+    REGISTRY: ghcr.io
+    NAMESPACE: toeverything
+    AFFINE_IMAGE_NAME: LIVEDEMO
+    IMAGE_TAG_LATEST: nightly-latest
+    LOCAL_CACHE: localhost:5000/toeverything/relocate:latest
+
+jobs:
+    ligo-virgo:
+        runs-on: self-hosted
+        environment: development
+        permissions:
+            contents: read
+            packages: write
+
+        services:
+          registry:
+            image: registry:2
+            ports:
+              - 5000:5000
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+
+            - name: Log in to the Container registry
+              uses: docker/login-action@v2
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v1
+
+            - name: Set up Docker Buildx
+              id: buildx
+              uses: docker/setup-buildx-action@v1
+              with:
+                driver-opts: network=host
+
+            - name: Extract metadata (tags, labels) for Docker (AFFiNE-Local)
+              id: meta_affine
+              uses: docker/metadata-action@v4
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.AFFINE_IMAGE_NAME }}
+                  tags: ${{ env.IMAGE_TAG_LATEST }}
+
+            - name: Build and push Docker image (AFFINE-Local)
+              uses: docker/build-push-action@v3
+              env:
+                HUBSPOT_API_SECRET: ${{ secrets.SuperSecret }}
+              with:
+                  context: .
+                  push: true
+                  file: ./.github/deployment/Dockerfile-affine
+                  tags: ${{ env.LOCAL_CACHE }}
+                  target: AFFiNE
+
+            - name: Build and push Docker image (AFFINE-Local)
+              uses: docker/build-push-action@v3
+              with:
+                  context: .
+                  platforms: linux/amd64,linux/arm64/v8
+                  file: ./.github/deployment/Dockerfile-affine-multiplatform
+                  push: ${{ github.ref == 'refs/heads/master' && true || false }}
+                  tags: ${{ steps.meta_affine.outputs.tags }}
+                  labels: ${{ steps.meta_affine.outputs.labels }}
+                  target: AFFiNE
+                  build-args: |
+                    BASE_IMAGE=${{ env.LOCAL_CACHE }}
diff --git a/apps/ligo-virgo/src/template.html b/apps/ligo-virgo/src/template.html
index d0c4a84e0b..badce60082 100644
--- a/apps/ligo-virgo/src/template.html
+++ b/apps/ligo-virgo/src/template.html
@@ -4,6 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title><%= htmlWebpackPlugin.options.title %></title>
+        <%= htmlWebpackPlugin.options.hubspotScript %>
     </head>
     <body>
         <div id="root"></div>
diff --git a/apps/ligo-virgo/webpack.config.js b/apps/ligo-virgo/webpack.config.js
index 11be2e1c76..377f32551a 100644
--- a/apps/ligo-virgo/webpack.config.js
+++ b/apps/ligo-virgo/webpack.config.js
@@ -12,6 +12,13 @@ const Style9Plugin = require('style9/webpack');
 
 const enableBundleAnalyzer = process.env.BUNDLE_ANALYZER;
 
+function generateHubspotScript() {
+    const hubspotApiSecret = process.env.HUBSPOT_API_SECRET;
+    if (hubspotApiSecret) {
+        return `<script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/${hubspotApiSecret}.js"></script>`;
+    }
+}
+
 module.exports = function (webpackConfig) {
     const config = getNxWebpackConfig(webpackConfig);
 
@@ -175,6 +182,7 @@ module.exports = function (webpackConfig) {
                 ), //favicon path
                 template: path.resolve(__dirname, './src/template.html'),
                 publicPath: '/',
+                hubspotScript: generateHubspotScript(),
             }),
         new Style9Plugin(),
         isProd &&