fix: a series of bugs

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

@@ -19,6 +19,7 @@ import {
   ImportIcon,
   TrashIcon,
   AddIcon,
+  FavouritedIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
 import { Tooltip } from '@/ui/tooltip';
@@ -93,7 +94,7 @@ export const WorkSpaceSliderBar = () => {
             Favourites
           </StyledLink>
           <IconButton
-            hoverBackground="#E0E6FF"
+            darker={true}
             onClick={() => {
               setShowSubFavorite(!showSubFavorite);
             }}
@@ -107,13 +108,16 @@ export const WorkSpaceSliderBar = () => {
         </StyledListItem>
         <FavoriteList showList={showSubFavorite} />
 
-        <StyledListItem
-          onClick={() => {
-            triggerImportModal();
-          }}
-        >
-          <ImportIcon /> Import
-        </StyledListItem>
+        <Tooltip content="Coming soon" placement="right-start" zIndex={9999}>
+          <StyledListItem
+            disabled={true}
+            onClick={() => {
+              // triggerImportModal();
+            }}
+          >
+            <ImportIcon /> Import
+          </StyledListItem>
+        </Tooltip>
 
         <Link href={{ pathname: '/page-list/trash' }}>
           <StyledListItem active={router.pathname === '/page-list/trash'}>

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

@@ -43,29 +43,33 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
   }
 );
 
-export const StyledListItem = styled.button<{ active?: boolean }>(
-  ({ theme, active }) => {
-    return {
-      width: '296px',
-      height: '32px',
-      marginTop: '12px',
-      fontSize: theme.font.sm,
-      color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
-      backgroundColor: active ? theme.colors.hoverBackground : 'unset',
-      paddingLeft: '12px',
-      borderRadius: '5px',
-      ...displayFlex('flex-start', 'center'),
-      '>svg': {
-        fontSize: '20px',
-        marginRight: '12px',
-      },
-      ':hover': {
-        color: theme.colors.primaryColor,
-        backgroundColor: theme.colors.hoverBackground,
-      },
-    };
-  }
-);
+export const StyledListItem = styled.button<{
+  active?: boolean;
+  disabled?: boolean;
+}>(({ theme, active, disabled }) => {
+  return {
+    width: '296px',
+    height: '32px',
+    marginTop: '12px',
+    fontSize: theme.font.sm,
+    color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
+    paddingLeft: '12px',
+    borderRadius: '5px',
+    ...displayFlex('flex-start', 'center'),
+    ...(disabled
+      ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+      : {}),
+
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+    ':hover:not([disabled])': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});
 
 export const StyledListItemForWorkspace = styled(StyledListItem)({
   height: '52px',