merge master

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

@@ -12,7 +12,7 @@ import {
 } from './WorkspaceItem';
 import { WorkspaceSetting } from '@/components/workspace-setting';
 import { useCallback, useEffect, useState } from 'react';
-import { getWorkspaceDetail, WorkspaceType } from '@affine/data-services';
+import { getDataCenter, WorkspaceType } from '@affine/datacenter';
 import { useModal } from '@/providers/global-modal-provider';
 
 export type WorkspaceDetails = Record<
@@ -54,7 +54,8 @@ export const SelectorPopperContent = ({
           if (type === WorkspaceType.Private) {
             return { id, member_count: 1, owner: user };
           } else {
-            const data = await getWorkspaceDetail({ id });
+            const dc = await getDataCenter();
+            const data = await dc.apis.getWorkspaceDetail({ id });
             return { id, ...data } || { id, member_count: 0, owner: user };
           }
         }

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

@@ -1,4 +1,4 @@
-import { createWorkspace, uploadBlob } from '@affine/data-services';
+import { getDataCenter } from '@affine/datacenter';
 import Modal from '@/ui/modal';
 import Input from '@/ui/input';
 import {
@@ -52,7 +52,9 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
         ctx.fillText(workspaceName[0], 50, 50);
         canvas.toBlob(blob => {
           if (blob) {
-            const blobId = uploadBlob({ blob });
+            const blobId = getDataCenter().then(dc =>
+              dc.apis.uploadBlob({ blob })
+            );
             resolve(blobId);
           } else {
             reject();
@@ -69,7 +71,10 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
       setCreating(false);
     });
     if (blobId) {
-      createWorkspace({ name: workspaceName, avatar: blobId })
+      getDataCenter()
+        .then(dc =>
+          dc.apis.createWorkspace({ name: workspaceName, avatar: blobId })
+        )
         .then(async data => {
           await refreshWorkspacesMeta();
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment

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

@@ -7,7 +7,7 @@ import {
 } from '../styles';
 import { FooterSetting } from './FooterSetting';
 import { FooterUsers } from './FooterUsers';
-import { WorkspaceType } from '@affine/data-services';
+import { WorkspaceType } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceItemProps {

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

@@ -3,7 +3,7 @@ import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { SelectorPopperContent } from './SelectorPopperContent';
 import { useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
-import { WorkspaceType } from '@affine/data-services';
+import { WorkspaceType } from '@affine/datacenter';
 import { AffineIcon } from '../icons/icons';
 
 export const WorkspaceSelector = () => {

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

@@ -17,8 +17,8 @@ export const AffineIcon = () => {
         fill="#FFF"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M18.6303 8.79688L11.2559 29.8393H15.5752L20.2661 15.2858L24.959 29.8393H29.2637L21.8881 8.79688H18.6303Z"
         fill="#6880FF"
       />

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

@@ -6,7 +6,6 @@ import {
   StyledListItem,
   StyledListItemForWorkspace,
   StyledNewPageButton,
-  StyledQuickSearch,
   StyledSliderBar,
   StyledSliderBarWrapper,
   StyledSubListItem,
@@ -32,11 +31,7 @@ import { IconButton } from '@/ui/button';
 import useLocalStorage from '@/hooks/use-local-storage';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { getUaHelper } from '@/utils';
 
-const isMac = () => {
-  return getUaHelper().isMacOs;
-};
 const FavoriteList = ({ showList }: { showList: boolean }) => {
   const { openPage } = usePageHelper();
   const pageList = usePageMetaList();
@@ -117,7 +112,7 @@ export const WorkSpaceSliderBar = () => {
           <StyledListItemForWorkspace>
             <WorkspaceSelector />
           </StyledListItemForWorkspace>
-          <StyledQuickSearch
+          <StyledListItem
             data-testid="sliderBar-quickSearchButton"
             style={{ cursor: 'pointer' }}
             onClick={() => {
@@ -126,8 +121,7 @@ export const WorkSpaceSliderBar = () => {
           >
             <SearchIcon />
             Quick search
-            <span>{isMac() ? '⌘ + K' : 'Ctrl + K'}</span>
-          </StyledQuickSearch>
+          </StyledListItem>
           <Link href={{ pathname: paths.all }}>
             <StyledListItem active={router.asPath === paths.all}>
               <AllPagesIcon /> <span>All pages</span>

packages/app/src/components/workspace-slider-bar/style.ts

@@ -21,6 +21,7 @@ export const StyledSliderBarWrapper = styled.div(() => {
     height: '100%',
     overflowX: 'hidden',
     overflowY: 'auto',
+    position: 'relative',
   };
 });
 
@@ -141,34 +142,3 @@ export const StyledSubListItem = styled.button<{
         },
   };
 });
-
-export const StyledQuickSearch = styled.div(({ theme }) => {
-  return {
-    width: '296px',
-    height: '32px',
-    marginTop: '12px',
-    fontSize: theme.font.sm,
-    backgroundColor: theme.colors.hoverBackground,
-    color: theme.colors.popoverColor,
-    paddingLeft: '12px',
-    borderRadius: '5px',
-    ...displayFlex('flex-start', 'center'),
-    '>svg': {
-      fontSize: '20px',
-      marginRight: '12px',
-    },
-    '>span': {
-      fontSize: theme.font.xs,
-      margin: 'auto',
-      marginRight: '12px',
-      color: theme.colors.hoverBackground,
-      transition: 'all .15s',
-    },
-    ':hover': {
-      color: theme.colors.popoverColor,
-      '>span': {
-        color: theme.colors.popoverColor,
-      },
-    },
-  };
-});