feat: workspace router

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import { styled } from '@/styles';
 import {
   WorkspaceItemAvatar,
@@ -13,9 +14,15 @@ interface WorkspaceItemProps {
   icon: string;
 }
 
-export const WorkspaceItem = ({ name, icon }: WorkspaceItemProps) => {
+export const WorkspaceItem = ({ id, name, icon }: WorkspaceItemProps) => {
+  const router = useRouter();
+
   return (
-    <StyledWrapper>
+    <StyledWrapper
+      onClick={() => {
+        router.push(`/workspace/${id}`);
+      }}
+    >
       <WorkspaceItemAvatar alt={name} src={icon}>
         {name.charAt(0)}
       </WorkspaceItemAvatar>

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -8,6 +8,7 @@ export const WorkspaceSelector = () => {
       content={<SelectorPopperContent />}
       zIndex={1000}
       placement="bottom-start"
+      trigger="hover"
     >
       <SelectorWrapper>
         <Avatar alt="Affine" />

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

@@ -0,0 +1,27 @@
+import type { NextPage } from 'next';
+import { styled } from '@/styles';
+import { EditorHeader } from '@/components/header';
+import EdgelessToolbar from '@/components/edgeless-toolbar';
+import MobileModal from '@/components/mobile-modal';
+import Editor from '@/components/editor';
+
+const StyledEditorContainer = styled('div')(({ theme }) => {
+  return {
+    height: 'calc(100vh - 60px)',
+  };
+});
+
+const Home: NextPage = () => {
+  return (
+    <>
+      <EditorHeader />
+      <MobileModal />
+      <StyledEditorContainer>
+        <Editor />
+      </StyledEditorContainer>
+      <EdgelessToolbar />
+    </>
+  );
+};
+
+export default Home;

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

@@ -0,0 +1,5 @@
+const Page = () => {
+  return <div>Hello, there is [pageId]/index</div>;
+};
+
+export default Page;

packages/app/src/providers/editor-provider/editor-provider.tsx

@@ -1,6 +1,13 @@
 import type { EditorContainer } from '@blocksuite/editor';
-import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+} from 'react';
 import type { PropsWithChildren } from 'react';
+import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import Loading from './loading';
 import { Page, Workspace } from '@blocksuite/store';
@@ -35,8 +42,17 @@ export const useEditor = () => useContext(EditorContext);
 export const EditorProvider = ({
   children,
 }: PropsWithChildren<EditorContextProps>) => {
+  const router = useRouter();
   const [workspace, setWorkspace] = useState<Workspace>();
-  const [page, setPage] = useState<Page>();
+  const [page, _setPage] = useState<Page>();
+  const workspaceId = router.query.workspaceId as string;
+  const setPage = useCallback(
+    (page: Page) => {
+      _setPage(page);
+      router.push(`/workspace/${workspaceId}/${page.id.replace('space:', '')}`);
+    },
+    [_setPage, workspaceId]
+  );
   const [pageList, setPageList] = useState<PageMeta[]>([]);
   const [editor, setEditor] = useState<EditorContainer>();
 

packages/app/src/providers/editor-provider/editor-reactor.tsx

@@ -19,13 +19,13 @@ import {
 import { useRouter } from 'next/router';
 import { createPage } from '@/providers/editor-provider/utils';
 
-const getEditorParams = () => {
+const getEditorParams = (workspaceId: string) => {
   const providers = [];
   const params = new URLSearchParams(location.search);
-  const room = params.get('room') ?? 'AFFINE-pathfinder';
+  // const room = params.get('room') ?? 'AFFINE-pathfinder';
   if (params.get('syncMode') === 'websocket') {
     const WebsocketDocProvider = createWebsocketDocProvider(
-      'ws://127.0.0.1:3000/collaboration/AFFiNE'
+      `ws://${window.location.host}/collaboration/`
     );
     providers.push(WebsocketDocProvider);
   }
@@ -33,7 +33,7 @@ const getEditorParams = () => {
   providers.push(IndexedDBDocProvider);
 
   return {
-    room,
+    room: workspaceId,
     providers,
   };
 };
@@ -53,12 +53,12 @@ const EditorReactor = ({
 }) => {
   const shouldInitIntroduction = useRef(false);
   const {
-    query: { pageId: routerPageId },
+    query: { pageId: routerPageId, workspaceId },
   } = useRouter();
 
   useEffect(() => {
     const workspace = new Workspace({
-      ...getEditorParams(),
+      ...getEditorParams(workspaceId as string),
     }).register(BlockSchema);
     //@ts-ignore
     window.workspace = workspace;
@@ -72,7 +72,7 @@ const EditorReactor = ({
     } else {
       setWorkspace(workspace);
     }
-  }, [setWorkspace]);
+  }, [setWorkspace, workspaceId]);
 
   useEffect(() => {
     if (!workspace) {