Merge pull request #680 from toeverything/feat/cloud-sync

feat: auth & sync

packages/app/src/components/header/header.tsx

@@ -11,7 +11,7 @@ import { getWarningMessage, shouldShowWarning } from './utils';
 import EditorOptionMenu from './header-right-items/editor-option-menu';
 import TrashButtonGroup from './header-right-items/trash-button-group';
 import ThemeModeSwitch from './header-right-items/theme-mode-switch';
-// import SyncUser from './header-right-items/sync-user';
+import SyncUser from './header-right-items/sync-user';
 
 const BrowserWarning = ({
   show,
@@ -40,7 +40,7 @@ const HeaderRightItems: Record<HeaderRightItemNames, ReactNode> = {
   editorOptionMenu: <EditorOptionMenu key="editorOptionMenu" />,
   trashButtonGroup: <TrashButtonGroup key="trashButtonGroup" />,
   themeModeSwitch: <ThemeModeSwitch key="themeModeSwitch" />,
-  syncUser: null,
+  syncUser: <SyncUser key="syncUser" />,
 };
 
 export const Header = ({

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

@@ -4,13 +4,14 @@ import {
   StyledArrowButton,
   StyledLink,
   StyledListItem,
-  // StyledListItemForWorkspace,
+  StyledListItemForWorkspace,
   StyledNewPageButton,
   StyledSliderBar,
   StyledSliderBarWrapper,
   StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
+import { WorkspaceSelector } from './WorkspaceSelector';
 import Collapse from '@mui/material/Collapse';
 import {
   ArrowDownIcon,
@@ -26,7 +27,6 @@ import { Tooltip } from '@/ui/tooltip';
 import { useModal } from '@/providers/global-modal-provider';
 import { useAppState } from '@/providers/app-state-provider/context';
 import { IconButton } from '@/ui/button';
-// import { WorkspaceSelector } from './WorkspaceSelector';
 import useLocalStorage from '@/hooks/use-local-storage';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { usePageHelper } from '@/hooks/use-page-helper';
@@ -109,9 +109,9 @@ export const WorkSpaceSliderBar = () => {
         </Tooltip>
 
         <StyledSliderBarWrapper data-testid="sliderBar">
-          {/* <StyledListItemForWorkspace>
+          <StyledListItemForWorkspace>
             <WorkspaceSelector />
-          </StyledListItemForWorkspace> */}
+          </StyledListItemForWorkspace>
           <StyledListItem
             data-testid="sliderBar-quickSearchButton"
             style={{ cursor: 'pointer' }}

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

@@ -0,0 +1,90 @@
+import { styled } from '@/styles';
+
+import { ReactElement, ReactNode } from 'react';
+import WorkspaceLayout from '@/components/workspace-layout';
+import { Button } from '@/ui/button';
+
+export const FeatureCardDiv = styled('section')({
+  width: '800px',
+  border: '1px #eee solid',
+  margin: '20px auto',
+  minHeight: '100px',
+  padding: '15px',
+});
+const FeatureCard = (props: {
+  name: string;
+  children: ReactNode | ReactNode[];
+}) => {
+  return (
+    <FeatureCardDiv>
+      <h1>Feature - {props.name}</h1>
+      {props.children}
+    </FeatureCardDiv>
+  );
+};
+
+export const Playground = () => {
+  return (
+    <>
+      <FeatureCard name="Account">
+        <Button>Sign In</Button>
+        <Button>Sign Out</Button>
+      </FeatureCard>
+
+      <FeatureCard name="Workspace List">
+        <ul>
+          <li>AFFiNE Demo</li>
+          <li>AFFiNE XXX</li>
+        </ul>
+        <Button>New Workspace</Button>
+      </FeatureCard>
+
+      <FeatureCard name="Active Workspace">
+        <div>Workspace Name /[Workspace Members Count]/[Workspace Avatar]</div>
+        <div>Cloud Sync [Yes/No]</div>
+        <div>Auth [Public/Private]</div>
+        <div>
+          <Button>Update Workspace Name</Button>
+          <Button>Upload Workspace Avatar</Button>
+          <Button>Update Workspace Avatar</Button>
+        </div>
+
+        <div>
+          <Button>Leave Workspace</Button>
+          <Button>Delete Workspace </Button>
+        </div>
+        <div>
+          Cloud Sync <Button>Enalbe</Button>
+          <Button>Disable</Button>
+        </div>
+      </FeatureCard>
+
+      <FeatureCard name="Workspace Members">
+        <Button>Add Member</Button>
+        <ul>
+          <li>
+            terrychinaz@gmail <button>Delete Members</button>
+          </li>
+        </ul>
+      </FeatureCard>
+
+      <FeatureCard name="Cloud Search">
+        <input type="text" value="AFFiNE Keywords" />
+        <Button>Search</Button>
+        <ul></ul>
+      </FeatureCard>
+
+      <FeatureCard name="Import/Exeport Worpsace">
+        <div>Workspace Name</div>
+        <Button> Export Workspace</Button>
+        <Button> Import Workspace</Button>
+      </FeatureCard>
+    </>
+  );
+};
+
+Playground.getLayout = function getLayout(page: ReactElement) {
+  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+};
+
+export default Playground;