init: the first public commit for AFFiNE

libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx

@@ -0,0 +1,35 @@
+import { styled } from '@toeverything/components/ui';
+import { DocViewIcon, BoardViewIcon } from '@toeverything/components/icons';
+import { DocMode } from './type';
+
+interface StatusIconProps {
+    mode: DocMode;
+}
+
+export const StatusIcon = ({ mode }: StatusIconProps) => {
+    return (
+        <IconWrapper mode={mode}>
+            {mode === DocMode.doc ? <DocViewIcon /> : <BoardViewIcon />}
+        </IconWrapper>
+    );
+};
+
+const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
+    ({ theme, mode }) => {
+        return {
+            width: '20px',
+            height: '20px',
+            borderRadius: '5px',
+            boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+            color: theme.affine.palette.primary,
+            cursor: 'pointer',
+            backgroundColor: theme.affine.palette.white,
+            transform: `translateX(${mode === DocMode.doc ? 0 : 33}px)`,
+            transition: 'transform 300ms ease',
+
+            '& > svg': {
+                fontSize: '20px',
+            },
+        };
+    }
+);

libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx

@@ -0,0 +1,27 @@
+import { styled } from '@toeverything/components/ui';
+
+type StatusTextProps = {
+    children: string;
+    active?: boolean;
+    onClick?: () => void;
+};
+
+export const StatusText = ({ children, active, onClick }: StatusTextProps) => {
+    return (
+        <StyledText active={active} onClick={onClick}>
+            {children}
+        </StyledText>
+    );
+};
+
+const StyledText = styled('div')<StatusTextProps>(({ theme, active }) => {
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        color: theme.affine.palette.primary,
+        fontWeight: active ? '500' : '300',
+        fontSize: '15px',
+        cursor: 'pointer',
+        padding: '0 6px',
+    };
+});

libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx

@@ -0,0 +1,28 @@
+import type { FC } from 'react';
+import type { DocMode } from './type';
+import { styled } from '@toeverything/components/ui';
+import { StatusIcon } from './StatusIcon';
+
+interface StatusTrackProps {
+    mode: DocMode;
+    onClick: () => void;
+}
+
+export const StatusTrack: FC<StatusTrackProps> = ({ mode, onClick }) => {
+    return (
+        <Container onClick={onClick}>
+            <StatusIcon mode={mode} />
+        </Container>
+    );
+};
+
+const Container = styled('div')(({ theme }) => {
+    return {
+        backgroundColor: theme.affine.palette.textHover,
+        borderRadius: '5px',
+        height: '30px',
+        width: '63px',
+        cursor: 'pointer',
+        padding: '5px',
+    };
+});

libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx

@@ -0,0 +1,63 @@
+import { useLocation, useParams, useNavigate } from 'react-router-dom';
+import { styled } from '@toeverything/components/ui';
+import { StatusText } from './StatusText';
+import { StatusTrack } from './StatusTrack';
+import { DocMode } from './type';
+
+const isBoard = (pathname: string): boolean => pathname.endsWith('/whiteboard');
+
+export const Switcher = () => {
+    const navigate = useNavigate();
+    const params = useParams();
+    const { pathname } = useLocation();
+    const pageViewMode = isBoard(pathname) ? DocMode.board : DocMode.doc;
+
+    const switchToPageView = (targetViewMode: DocMode) => {
+        if (targetViewMode === pageViewMode) {
+            return;
+        }
+        const workspaceId = params['workspace_id'];
+        /**
+         * There are two possible modes:
+         * Page mode: /{workspaceId}/{pageId}
+         * Board mode: /{workspaceId}/{pageId}/whiteboard
+         */
+        const pageId = params['*'].split('/')[0];
+        const targetUrl = `/${workspaceId}/${pageId}${
+            targetViewMode === DocMode.board ? '/whiteboard' : ''
+        }`;
+        navigate(targetUrl);
+    };
+
+    return (
+        <StyledContainerForSwitcher>
+            <StatusText
+                active={pageViewMode === DocMode.doc}
+                onClick={() => switchToPageView(DocMode.doc)}
+            >
+                Doc
+            </StatusText>
+            <StatusTrack
+                mode={pageViewMode}
+                onClick={() => {
+                    switchToPageView(
+                        pageViewMode === DocMode.board
+                            ? DocMode.doc
+                            : DocMode.board
+                    );
+                }}
+            />
+            <StatusText
+                active={pageViewMode === DocMode.board}
+                onClick={() => switchToPageView(DocMode.board)}
+            >
+                Board
+            </StatusText>
+        </StyledContainerForSwitcher>
+    );
+};
+
+const StyledContainerForSwitcher = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});

libs/components/layout/src/header/EditorBoardSwitcher/index.ts

@@ -0,0 +1 @@
+export { Switcher as EditorBoardSwitcher } from './Switcher';

libs/components/layout/src/header/EditorBoardSwitcher/type.ts

@@ -0,0 +1,6 @@
+export enum DocMode {
+    // Page Mode
+    doc,
+    // Board Mode
+    board,
+}