feat: active workspace when created workspace

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

@@ -7,6 +7,7 @@ import { KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppState } from '@/providers/app-state-provider';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { useRouter } from 'next/router';
 
 interface ModalProps {
   open: boolean;
@@ -16,11 +17,11 @@ interface ModalProps {
 export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
   const [workspaceName, setWorkspaceName] = useState('');
   const { createWorkspace } = useWorkspaceHelper();
-  const { loadWorkspace } = useAppState();
+  const router = useRouter();
   const handleCreateWorkspace = async () => {
     const workspace = await createWorkspace(workspaceName);
     if (workspace && workspace.room) {
-      await loadWorkspace(workspace.room);
+      router.replace(`/workspace/${workspace.room}`);
       onClose();
     } else {
       console.log('create error');

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

@@ -24,7 +24,7 @@ interface WorkspaceModalProps {
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
   const { confirm } = useConfirm();
-  const { user, workspaceList } = useAppState();
+  const { user, workspaceList, currentWorkspace } = useAppState();
   const router = useRouter();
   return (
     <div>
@@ -53,6 +53,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                       router.replace(`/workspace/${item.id}`);
                       onClose();
                     }}
+                    active={item.id === currentWorkspace.room}
                     key={index}
                   >
                     <span style={{ width: '100px' }}>
@@ -152,23 +153,23 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
             onClose={() => {
               setCreateWorkspaceOpen(false);
               onClose();
-              confirm({
-                title: 'Enable AFFiNE Cloud?',
-                content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
-                confirmText: user ? 'Enable' : 'Sign in and Enable',
-                cancelText: 'Skip',
-              }).then(confirm => {
-                if (confirm) {
-                  if (user) {
-                    // workspaceId &&
-                    //   updateWorkspaceMeta(workspaceId, { isPublish: true });
-                  } else {
-                    // login();
-                    // workspaceId &&
-                    //   updateWorkspaceMeta(workspaceId, { isPublish: true });
-                  }
-                }
-              });
+              // confirm({
+              //   title: 'Enable AFFiNE Cloud?',
+              //   content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
+              //   confirmText: user ? 'Enable' : 'Sign in and Enable',
+              //   cancelText: 'Skip',
+              // }).then(confirm => {
+              //   if (confirm) {
+              //     if (user) {
+              //       // workspaceId &&
+              //       //   updateWorkspaceMeta(workspaceId, { isPublish: true });
+              //     } else {
+              //       // login();
+              //       // workspaceId &&
+              //       //   updateWorkspaceMeta(workspaceId, { isPublish: true });
+              //     }
+              //   }
+              // });
             }}
           ></CreateWorkspaceModal>
         </ModalWrapper>
@@ -213,11 +214,17 @@ const WorkspaceList = styled('div')({
   gridTemplateColumns: 'repeat(2, 1fr)',
 });
 
-const WorkspaceItem = styled('div')({
-  cursor: 'pointer',
-  padding: '8px',
-  border: '1px solid #eee',
-  ':hover': {
-    background: '#eee',
-  },
+export const WorkspaceItem = styled.div<{
+  active: boolean;
+}>(({ theme, active }) => {
+  const backgroundColor = active ? theme.colors.hoverBackground : 'transparent';
+  return {
+    cursor: 'pointer',
+    padding: '8px',
+    border: '1px solid #eee',
+    backgroundColor: backgroundColor,
+    ':hover': {
+      background: theme.colors.hoverBackground,
+    },
+  };
 });

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

@@ -15,7 +15,6 @@ export const WorkspaceSelector = () => {
 
   return (
     <>
-      <div>{currentWorkspace.meta.name}</div>
       <SelectorWrapper
         onClick={() => {
           setWorkspaceListShow(true);