diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index 56a0f8f07e..840a6a6148 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -7,6 +7,7 @@ import {
StyledListItemForWorkspace,
StyledNewPageButton,
StyledSliderBar,
+ StyledSliderBarWrapper,
StyledSubListItem,
} from './style';
import { Arrow } from './icons';
@@ -84,92 +85,95 @@ export const WorkSpaceSliderBar = () => {
return (
<>
-
-
-
- {
- triggerQuickSearchModal();
- }}
+
- Quick search
-
-
-
- All pages
-
-
-
-
-
- Favourites
-
- {
- setShowSubFavorite(!showSubFavorite);
+ setShow(!show);
+ setShowTip(false);
+ }}
+ onMouseEnter={() => {
+ setShowTip(true);
+ }}
+ onMouseLeave={() => {
+ setShowTip(false);
}}
>
-
-
-
-
-
-
- {
- // triggerImportModal();
- }}
- >
- Import
-
+
+
-
-
- Trash
+
+
+
+
+ {
+ triggerQuickSearchModal();
+ }}
+ >
+ Quick search
-
- {
- const pageId = await createPage?.();
- if (pageId) {
- openPage(pageId);
- }
- }}
- >
- New Page
-
+
+
+ All pages
+
+
+
+
+
+ Favourites
+
+ {
+ setShowSubFavorite(!showSubFavorite);
+ }}
+ >
+
+
+
+
+
+
+ {
+ // triggerImportModal();
+ }}
+ >
+ Import
+
+
+
+
+
+ Trash
+
+
+ {
+ const pageId = await createPage?.();
+ if (pageId) {
+ openPage(pageId);
+ }
+ }}
+ >
+ New Page
+
+
-
- {
- setShow(!show);
- setShowTip(false);
- }}
- onMouseEnter={() => {
- setShowTip(true);
- }}
- onMouseLeave={() => {
- setShowTip(false);
- }}
- >
-
-
-
);
};
diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts
index cf344b60fe..0d14e6aedf 100644
--- a/packages/app/src/components/workspace-slider-bar/style.ts
+++ b/packages/app/src/components/workspace-slider-bar/style.ts
@@ -8,15 +8,21 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
height: '100vh',
background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
boxShadow: theme.shadow.modal,
- transition: 'width .15s',
+ transition: 'width .15s, padding .15s',
position: 'relative',
zIndex: theme.zIndex.modal,
padding: show ? '24px 12px' : '24px 0',
- overflowX: 'hidden',
flexShrink: 0,
};
}
);
+export const StyledSliderBarWrapper = styled.div(() => {
+ return {
+ height: '100%',
+ overflowX: 'hidden',
+ overflowY: 'auto',
+ };
+});
export const StyledArrowButton = styled.button<{ isShow: boolean }>(
({ theme, isShow }) => {
@@ -28,9 +34,9 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
backgroundColor: theme.colors.hoverBackground,
borderRadius: '50%',
transition: 'all .15s',
- position: 'relative',
+ position: 'absolute',
top: '34px',
- left: isShow ? '-16px' : '-8px',
+ right: '-20px',
zIndex: theme.zIndex.modal,
svg: {
transform: isShow ? 'rotate(180deg)' : 'unset',
diff --git a/packages/app/src/providers/app-state-provider/hooks/use-load-workspace.ts b/packages/app/src/providers/app-state-provider/hooks/use-load-workspace.ts
new file mode 100644
index 0000000000..9770991ea2
--- /dev/null
+++ b/packages/app/src/providers/app-state-provider/hooks/use-load-workspace.ts
@@ -0,0 +1,35 @@
+// import { useRef } from 'react';
+// import { AppStateContext } from '@/providers/app-state-provider';
+//
+// export const useLoadWorkspace = ({}:{
+// state,
+// loadWorkspaceHandler
+// }) => {
+// const loadWorkspace = useRef(() =>
+// Promise.resolve(null)
+// );
+// loadWorkspace.current = async (workspaceId: string) => {
+// if (state.currentWorkspaceId === workspaceId) {
+// return state.currentWorkspace;
+// }
+//
+// const workspace =
+// (await loadWorkspaceHandler?.(workspaceId, true, state.user)) || null;
+//
+// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// // @ts-expect-error
+// window.workspace = workspace;
+// // FIXME: there needs some method to destroy websocket.
+// // Or we need a manager to manage websocket.
+// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// // @ts-expect-error
+// state.currentWorkspace?.__ws__?.destroy();
+//
+// setState(state => ({
+// ...state,
+// currentWorkspace: workspace,
+// currentWorkspaceId: workspaceId,
+// }));
+// return workspace;
+// };
+// };
diff --git a/packages/app/src/providers/app-state-provider/hooks/use-sync-data.ts b/packages/app/src/providers/app-state-provider/hooks/use-sync-data.ts
new file mode 100644
index 0000000000..f49b24992b
--- /dev/null
+++ b/packages/app/src/providers/app-state-provider/hooks/use-sync-data.ts
@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import {
+ AccessTokenMessage,
+ getWorkspaces,
+ token,
+} from '@pathfinder/data-services';
+import { LoadWorkspaceHandler } from '../context';
+
+export const useSyncData = ({
+ loadWorkspaceHandler,
+}: {
+ loadWorkspaceHandler: LoadWorkspaceHandler;
+}) => {
+ useEffect(() => {
+ if (!loadWorkspaceHandler) {
+ return;
+ }
+ const start = async () => {
+ const isLogin = await token.refreshToken().catch(() => false);
+ };
+ start();
+
+ const callback = async (user: AccessTokenMessage | null) => {
+ const workspacesMeta = user
+ ? await getWorkspaces().catch(() => {
+ return [];
+ })
+ : [];
+ // setState(state => ({
+ // ...state,
+ // user: user,
+ // workspacesMeta,
+ // synced: true,
+ // }));
+ };
+
+ token.onChange(callback);
+ token.refreshToken().catch(err => {
+ // FIXME: should resolve invalid refresh token
+ console.log(err);
+ });
+ return () => {
+ token.offChange(callback);
+ };
+ }, [loadWorkspaceHandler]);
+};