fix: slide bar button position error

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 (
     <>
       <StyledSliderBar show={show}>
-        <StyledListItemForWorkspace>
+        <Tooltip
-          <WorkspaceSelector />
+          content={show ? 'Collapse sidebar' : 'Expand sidebar'}
-        </StyledListItemForWorkspace>
+          placement="right"
-        <StyledListItem
+          visible={showTip}
-          data-testid="sliderBar-quickSearchButton"
-          style={{ cursor: 'pointer' }}
-          onClick={() => {
-            triggerQuickSearchModal();
-          }}
         >
-          <SearchIcon /> Quick search
+          <StyledArrowButton
-        </StyledListItem>
+            data-testid="sliderBar-arrowButton"
-        <Link href={{ pathname: paths.all }}>
+            isShow={show}
-          <StyledListItem active={router.pathname === paths.all}>
-            <AllPagesIcon /> <span>All pages</span>
-          </StyledListItem>
-        </Link>
-        <StyledListItem active={router.pathname === paths.favorite}>
-          <StyledLink href={{ pathname: paths.favorite }}>
-            <FavouritesIcon />
-            Favourites
-          </StyledLink>
-          <IconButton
-            darker={true}
             onClick={() => {
-              setShowSubFavorite(!showSubFavorite);
+              setShow(!show);
+              setShowTip(false);
+            }}
+            onMouseEnter={() => {
+              setShowTip(true);
+            }}
+            onMouseLeave={() => {
+              setShowTip(false);
             }}
           >
-            <ArrowDownIcon
+            <Arrow />
-              style={{
+          </StyledArrowButton>
-                transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
-              }}
-            />
-          </IconButton>
-        </StyledListItem>
-        <FavoriteList showList={showSubFavorite} />
-
-        <Tooltip content="Coming soon" placement="right-start" zIndex={9999}>
-          <StyledListItem
-            disabled={true}
-            onClick={() => {
-              // triggerImportModal();
-            }}
-          >
-            <ImportIcon /> Import
-          </StyledListItem>
         </Tooltip>
 
-        <Link href={{ pathname: paths.trash }}>
+        <StyledSliderBarWrapper>
-          <StyledListItem active={router.pathname === paths.trash}>
+          <StyledListItemForWorkspace>
-            <TrashIcon /> Trash
+            <WorkspaceSelector />
+          </StyledListItemForWorkspace>
+          <StyledListItem
+            data-testid="sliderBar-quickSearchButton"
+            style={{ cursor: 'pointer' }}
+            onClick={() => {
+              triggerQuickSearchModal();
+            }}
+          >
+            <SearchIcon /> Quick search
           </StyledListItem>
-        </Link>
+          <Link href={{ pathname: paths.all }}>
-        <StyledNewPageButton
+            <StyledListItem active={router.pathname === paths.all}>
-          onClick={async () => {
+              <AllPagesIcon /> <span>All pages</span>
-            const pageId = await createPage?.();
+            </StyledListItem>
-            if (pageId) {
+          </Link>
-              openPage(pageId);
+          <StyledListItem active={router.pathname === paths.favorite}>
-            }
+            <StyledLink href={{ pathname: paths.favorite }}>
-          }}
+              <FavouritesIcon />
-        >
+              Favourites
-          <AddIcon /> New Page
+            </StyledLink>
-        </StyledNewPageButton>
+            <IconButton
+              darker={true}
+              onClick={() => {
+                setShowSubFavorite(!showSubFavorite);
+              }}
+            >
+              <ArrowDownIcon
+                style={{
+                  transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
+                }}
+              />
+            </IconButton>
+          </StyledListItem>
+          <FavoriteList showList={showSubFavorite} />
+
+          <Tooltip content="Coming soon" placement="right-start" zIndex={9999}>
+            <StyledListItem
+              disabled={true}
+              onClick={() => {
+                // triggerImportModal();
+              }}
+            >
+              <ImportIcon /> Import
+            </StyledListItem>
+          </Tooltip>
+
+          <Link href={{ pathname: paths.trash }}>
+            <StyledListItem active={router.pathname === paths.trash}>
+              <TrashIcon /> Trash
+            </StyledListItem>
+          </Link>
+          <StyledNewPageButton
+            onClick={async () => {
+              const pageId = await createPage?.();
+              if (pageId) {
+                openPage(pageId);
+              }
+            }}
+          >
+            <AddIcon /> New Page
+          </StyledNewPageButton>
+        </StyledSliderBarWrapper>
       </StyledSliderBar>
-      <Tooltip
-        content={show ? 'Collapse sidebar' : 'Expand sidebar'}
-        placement="right"
-        visible={showTip}
-      >
-        <StyledArrowButton
-          data-testid="sliderBar-arrowButton"
-          isShow={show}
-          onClick={() => {
-            setShow(!show);
-            setShowTip(false);
-          }}
-          onMouseEnter={() => {
-            setShowTip(true);
-          }}
-          onMouseLeave={() => {
-            setShowTip(false);
-          }}
-        >
-          <Arrow />
-        </StyledArrowButton>
-      </Tooltip>
     </>
   );
 };

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',

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<AppStateContext['loadWorkspace']>(() =>
+//     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;
+//   };
+// };

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]);
+};