fix: detail reduction of UI (#1131)

2024-12-23 11:41:51 +03:00 · 2023-02-22 11:12:34 +08:00 · 2023-02-22 11:12:34 +08:00 · 7163ea6c4b
commit 7163ea6c4b
parent 0b072da346
30 changed files with 122 additions and 104 deletions
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@ -16,7 +16,7 @@
  "dependencies": {
    "@blocksuite/blocks": "0.4.1",
    "@blocksuite/editor": "0.4.1",
-    "@blocksuite/icons": "2.0.12",
+    "@blocksuite/icons": "2.0.17",
    "@blocksuite/store": "0.4.1",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -16,7 +16,7 @@
    "@blocksuite/blocks": "0.4.1",
    "@blocksuite/editor": "0.4.1",
    "@blocksuite/global": "0.4.1",
-    "@blocksuite/icons": "2.0.12",
+    "@blocksuite/icons": "2.0.17",
    "@blocksuite/store": "0.4.1",
    "@emotion/css": "^11.10.6",
    "@emotion/react": "^11.10.6",
--- a/apps/web/src/components/header/QuickSearchButton.tsx
+++ b/apps/web/src/components/header/QuickSearchButton.tsx
@ -1,6 +1,6 @@
 import { IconButton, IconButtonProps } from '@affine/component';
 import { styled } from '@affine/component';
-import { ArrowDownIcon } from '@blocksuite/icons';
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import React from 'react';

 import { useModal } from '@/store/globalModal';
@ -34,7 +34,7 @@ export const QuickSearchButton = ({
        triggerQuickSearchModal();
      }}
    >
-      <ArrowDownIcon />
+      <ArrowDownSmallIcon />
    </StyledIconButtonWithAnimate>
  );
 };
--- a/apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx
+++ b/apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx
@ -3,15 +3,15 @@ import { IconButton } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
+  DeleteTemporarilyIcon,
  EdgelessIcon,
  ExportIcon,
  ExportToHtmlIcon,
  ExportToMarkdownIcon,
-  FavouritedIcon,
-  FavouritesIcon,
+  FavoritedIcon,
+  FavoriteIcon,
  MoreVerticalIcon,
  PaperIcon,
-  TrashIcon,
 } from '@blocksuite/icons';

 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
@ -41,9 +41,9 @@ const PopoverContent = () => {
            favorite ? t('Removed from Favorites') : t('Added to Favorites')
          );
        }}
-        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+        icon={favorite ? <FavoritedIcon /> : <FavoriteIcon />}
      >
-        {favorite ? t('Remove from favorites') : t('Add to favorites')}
+        {favorite ? t('Remove from favorites') : t('Add to Favorites')}
      </MenuItem>
      <MenuItem
        icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
@ -97,7 +97,7 @@ const PopoverContent = () => {
            confirm && toast(t('Moved to Trash'));
          });
        }}
-        icon={<TrashIcon />}
+        icon={<DeleteTemporarilyIcon />}
      >
        {t('Delete')}
      </MenuItem>
@ -107,7 +107,7 @@ const PopoverContent = () => {

 export const EditorOptionMenu = () => {
  return (
-    <Menu content={<PopoverContent />} placement="bottom-end">
+    <Menu content={<PopoverContent />} placement="bottom-end" trigger="click">
      <IconButton>
        <MoreVerticalIcon />
      </IconButton>
--- a/apps/web/src/components/page-list/DateCell.tsx
+++ b/apps/web/src/components/page-list/DateCell.tsx
@ -1,4 +1,4 @@
-import { TableCell } from '@affine/component';
+import { TableCell, TableCellProps } from '@affine/component';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';
@ -11,15 +11,15 @@ export const DateCell = ({
  pageMeta,
  dateKey,
  backupKey = '',
+  ...props
 }: {
  pageMeta: PageMeta;
  dateKey: keyof PageMeta;
  backupKey?: keyof PageMeta;
-}) => {
-  // dayjs().format('L LT');
+} & Omit<TableCellProps, 'children'>) => {
  const value = pageMeta[dateKey] ?? pageMeta[backupKey];
  return (
-    <TableCell ellipsis={true}>
+    <TableCell ellipsis={true} {...props}>
      {value ? dayjs(value as string).format('YYYY-MM-DD HH:mm') : '--'}
    </TableCell>
  );
--- a/apps/web/src/components/page-list/OperationCell.tsx
+++ b/apps/web/src/components/page-list/OperationCell.tsx
@ -8,13 +8,13 @@ import {
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
-  DeleteForeverIcon,
-  FavouritedIcon,
-  FavouritesIcon,
+  DeletePermanentlyIcon,
+  DeleteTemporarilyIcon,
+  FavoritedIcon,
+  FavoriteIcon,
  MoreVerticalIcon,
  OpenInNewIcon,
-  RestoreIcon,
-  TrashIcon,
+  ResetIcon,
 } from '@blocksuite/icons';

 import { usePageHelper } from '@/hooks/use-page-helper';
@ -36,9 +36,9 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
            favorite ? t('Removed from Favorites') : t('Added to Favorites')
          );
        }}
-        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+        icon={favorite ? <FavoritedIcon /> : <FavoriteIcon />}
      >
-        {favorite ? t('Remove from favorites') : t('Add to favorites')}
+        {favorite ? t('Remove from favorites') : t('Add to Favorites')}
      </MenuItem>
      <MenuItem
        onClick={() => {
@ -62,7 +62,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
            confirm && toast(t('Moved to Trash'));
          });
        }}
-        icon={<TrashIcon />}
+        icon={<DeleteTemporarilyIcon />}
      >
        {t('Delete')}
      </MenuItem>
@ -70,7 +70,12 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
  );
  return (
    <FlexWrapper alignItems="center" justifyContent="center">
-      <Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
+      <Menu
+        content={OperationMenu}
+        placement="bottom-end"
+        disablePortal={true}
+        trigger="click"
+      >
        <IconButton darker={true}>
          <MoreVerticalIcon />
        </IconButton>
@ -99,7 +104,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
            openPage(id);
          }}
        >
-          <RestoreIcon />
+          <ResetIcon />
        </IconButton>
      </Tooltip>
      <Tooltip content={t('Delete permanently')} placement="top-start">
@ -117,7 +122,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
            });
          }}
        >
-          <DeleteForeverIcon />
+          <DeletePermanentlyIcon />
        </IconButton>
      </Tooltip>
    </FlexWrapper>
--- a/apps/web/src/components/page-list/index.tsx
+++ b/apps/web/src/components/page-list/index.tsx
@ -5,15 +5,12 @@ import {
  TableHead,
  TableRow,
 } from '@affine/component';
-import { Content } from '@affine/component';
-import { IconButton } from '@affine/component';
-import { Tooltip } from '@affine/component';
-import { toast } from '@affine/component';
+import { Content, IconButton, toast, Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
  EdgelessIcon,
-  FavouritedIcon,
-  FavouritesIcon,
+  FavoritedIcon,
+  FavoriteIcon,
  PaperIcon,
 } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
@ -62,9 +59,9 @@ const FavoriteTag = ({
        className={favorite ? '' : 'favorite-button'}
      >
        {favorite ? (
-          <FavouritedIcon data-testid="favorited-icon" />
+          <FavoritedIcon data-testid="favorited-icon" />
        ) : (
-          <FavouritesIcon />
+          <FavoriteIcon />
        )}
      </IconButton>
    </Tooltip>
@ -108,23 +105,24 @@ export const PageList = ({
        </TableHead>
        <TableBody>
          {pageList.map((pageMeta, index) => {
+            // On click event must be set on the table cell, since the last operation cell is not clickable, and if set on the row, the menu will have bug on close.
+            const onClick = () => {
+              if (isPublic) {
+                router.push(
+                  `/public-workspace/${router.query.workspaceId}/${pageMeta.id}`
+                );
+              } else {
+                router.push(
+                  `/workspace/${currentWorkspace?.id}/${pageMeta.id}`
+                );
+              }
+            };
            return (
              <StyledTableRow
                data-testid="page-list-item"
                key={`${pageMeta.id}-${index}`}
-                onClick={() => {
-                  if (isPublic) {
-                    router.push(
-                      `/public-workspace/${router.query.workspaceId}/${pageMeta.id}`
-                    );
-                  } else {
-                    router.push(
-                      `/workspace/${currentWorkspace?.id}/${pageMeta.id}`
-                    );
-                  }
-                }}
              >
-                <TableCell>
+                <TableCell onClick={onClick}>
                  <StyledTitleWrapper>
                    <StyledTitleLink>
                      {pageMeta.mode === 'edgeless' ? (
@ -139,19 +137,21 @@ export const PageList = ({
                    {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
                  </StyledTitleWrapper>
                </TableCell>
-                <DateCell pageMeta={pageMeta} dateKey="createDate" />
+                <DateCell
+                  pageMeta={pageMeta}
+                  dateKey="createDate"
+                  onClick={onClick}
+                />
                <DateCell
                  pageMeta={pageMeta}
                  dateKey={isTrash ? 'trashDate' : 'updatedDate'}
                  backupKey={isTrash ? 'trashDate' : 'createDate'}
+                  onClick={onClick}
                />
-                {!isPublic ? (
+                {!isPublic && (
                  <TableCell
                    style={{ padding: 0 }}
                    data-testid={`more-actions-${pageMeta.id}`}
-                    onClick={e => {
-                      e.stopPropagation();
-                    }}
                  >
                    {isTrash ? (
                      <TrashOperationCell pageMeta={pageMeta} />
@ -159,7 +159,7 @@ export const PageList = ({
                      <OperationCell pageMeta={pageMeta} />
                    )}
                  </TableCell>
-                ) : null}
+                )}
              </StyledTableRow>
            );
          })}
--- a/apps/web/src/components/quick-search/config.ts
+++ b/apps/web/src/components/quick-search/config.ts
@ -1,9 +1,9 @@
 import { useTranslation } from '@affine/i18n';
 import {
-  AllPagesIcon,
-  FavouritesIcon,
+  DeleteTemporarilyIcon,
+  FavoriteIcon,
+  FolderIcon,
  SettingsIcon,
-  TrashIcon,
 } from '@blocksuite/icons';
 import { FC, SVGProps } from 'react';

@ -19,14 +19,14 @@ export const useSwitchToConfig = (
    {
      title: t('All pages'),
      href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
-      icon: AllPagesIcon,
+      icon: FolderIcon,
    },
    {
      title: t('Favorites'),
      href: currentWorkspaceId
        ? `/workspace/${currentWorkspaceId}/favorite`
        : '',
-      icon: FavouritesIcon,
+      icon: FavoriteIcon,
    },
    {
      title: t('Workspace Settings'),
@ -38,7 +38,7 @@ export const useSwitchToConfig = (
    {
      title: t('Trash'),
      href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
-      icon: TrashIcon,
+      icon: DeleteTemporarilyIcon,
    },
  ];
 };
--- a/apps/web/src/components/quick-search/style.ts
+++ b/apps/web/src/components/quick-search/style.ts
@ -102,7 +102,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
    height: '0',
    margin: '6px 16px 6.5px 16px',
    position: 'relative',
-    borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
+    borderTop: `0.5px solid ${theme.colors.borderColor}`,
    transition: 'all 0.15s',
  };
 });
--- a/apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx
+++ b/apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx
@ -3,7 +3,7 @@ import { Button } from '@affine/component';
 import { Menu, MenuItem } from '@affine/component';
 import { LOCALES } from '@affine/i18n';
 import { useTranslation } from '@affine/i18n';
-import { ArrowDownIcon } from '@blocksuite/icons';
+import { ArrowDownSmallIcon } from '@blocksuite/icons';

 const LanguageMenuContent = () => {
  const { i18n } = useTranslation();
@ -41,7 +41,7 @@ export const LanguageMenu = () => {
      disablePortal={true}
    >
      <Button
-        icon={<ArrowDownIcon />}
+        icon={<ArrowDownSmallIcon />}
        iconPosition="end"
        noBorder={true}
        style={{ textTransform: 'capitalize' }}
--- a/apps/web/src/components/workspace-modal/styles.ts
+++ b/apps/web/src/components/workspace-modal/styles.ts
@ -10,7 +10,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
-    background: theme.colors.iconColor,
+    background: theme.colors.borderColor,
    marginRight: '24px',
  };
 });
--- a/apps/web/src/components/workspace-setting/ExportPage.tsx
+++ b/apps/web/src/components/workspace-setting/ExportPage.tsx
@ -3,6 +3,8 @@ import { Button } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
 export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
+  console.log('workspace', workspace);
+
  const { t } = useTranslation();
  return (
    <>
--- a/apps/web/src/components/workspace-setting/general/delete/Delete.tsx
+++ b/apps/web/src/components/workspace-setting/general/delete/Delete.tsx
@ -42,6 +42,7 @@ export const WorkspaceDelete = ({
    onClose();
    router.push(`/workspace`);
  };
+  console.log('workspace', workspace);

  return (
    <Modal open={open} onClose={onClose}>
--- a/apps/web/src/components/workspace-setting/member/InviteMemberModal.tsx
+++ b/apps/web/src/components/workspace-setting/member/InviteMemberModal.tsx
@ -50,7 +50,7 @@ export const InviteMemberModal = ({
  onInviteSuccess,
 }: LoginModalProps) => {
  const [email, setEmail] = useState<string>('');
-  const [showMember, setShowMember] = useState<boolean>(false);
+  const [showMember, setShowMember] = useState<boolean>(true);
  const [showTip, setShowTip] = useState<boolean>(false);
  const [userData, setUserData] = useState<User | null>(null);
  const { inviteMember, getUserByEmail } = useMembers();
@ -90,7 +90,7 @@ export const InviteMemberModal = ({
                value={email}
                onChange={inputChange}
                onBlur={() => {
-                  setShowMember(false);
+                  // setShowMember(false);
                }}
                placeholder={t('Invite placeholder')}
              ></Input>
@ -211,7 +211,6 @@ const MemberIcon = styled('div')(({ theme }) => {
    borderRadius: '50%',
    color: theme.colors.primaryColor,
    background: '#F5F5F5',
-    marginRight: '8px',
    textAlign: 'center',
    lineHeight: '45px',
    // icon size
@ -231,5 +230,6 @@ const Email = styled('div')(({ theme }) => {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
+    marginLeft: '8px',
  };
 });
--- a/apps/web/src/components/workspace-setting/member/MembersPage.tsx
+++ b/apps/web/src/components/workspace-setting/member/MembersPage.tsx
@ -5,7 +5,11 @@ import { toast } from '@affine/component';
 import { FlexWrapper } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
-import { EmailIcon, MoreVerticalIcon, TrashIcon } from '@blocksuite/icons';
+import {
+  DeleteTemporarilyIcon,
+  EmailIcon,
+  MoreVerticalIcon,
+} from '@blocksuite/icons';
 import { useState } from 'react';

 import Loading from '@/components/loading';
@ -111,7 +115,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                                      })
                                    );
                                  }}
-                                  icon={<TrashIcon />}
+                                  icon={<DeleteTemporarilyIcon />}
                                >
                                  {t('Remove from workspace')}
                                </MenuItem>
@ -119,6 +123,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                            }
                            placement="bottom-end"
                            disablePortal={true}
+                            trigger="click"
                          >
                            <IconButton>
                              <MoreVerticalIcon />
--- a/apps/web/src/components/workspace-slider-bar/index.tsx
+++ b/apps/web/src/components/workspace-slider-bar/index.tsx
@ -3,13 +3,13 @@ import { Tooltip } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
-  AllPagesIcon,
-  ArrowDownIcon,
-  FavouritesIcon,
+  ArrowDownSmallIcon,
+  DeleteTemporarilyIcon,
+  FavoriteIcon,
+  FolderIcon,
  PlusIcon,
  SearchIcon,
  SettingsIcon,
-  TrashIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@ -127,13 +127,13 @@ export const WorkSpaceSliderBar = () => {
          </StyledListItem>
          <Link href={{ pathname: paths.all }}>
            <StyledListItem active={router.asPath === paths.all}>
-              <AllPagesIcon />
+              <FolderIcon />
              <span data-testid="all-pages">{t('All pages')}</span>
            </StyledListItem>
          </Link>
          <StyledListItem active={router.asPath === paths.favorite}>
            <StyledLink href={{ pathname: paths.favorite }}>
-              <FavouritesIcon />
+              <FavoriteIcon />
              {t('Favorites')}
            </StyledLink>
            <IconButton
@ -142,7 +142,7 @@ export const WorkSpaceSliderBar = () => {
                setShowSubFavorite(!showSubFavorite);
              }}
            >
-              <ArrowDownIcon
+              <ArrowDownSmallIcon
                style={{
                  transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
                }}
@ -174,7 +174,7 @@ export const WorkSpaceSliderBar = () => {

          <Link href={{ pathname: paths.trash }}>
            <StyledListItem active={router.asPath === paths.trash}>
-              <TrashIcon /> {t('Trash')}
+              <DeleteTemporarilyIcon /> {t('Trash')}
            </StyledListItem>
          </Link>
          <StyledNewPageButton
--- a/apps/web/src/pages/workspace/[workspaceId]/all.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/all.tsx
@ -1,5 +1,5 @@
 import { useTranslation } from '@affine/i18n';
-import { AllPagesIcon } from '@blocksuite/icons';
+import { FolderIcon } from '@blocksuite/icons';
 import Head from 'next/head';
 import { ReactElement, useCallback } from 'react';

@ -18,7 +18,7 @@ const All = () => {
      <Head>
        <title>{t('All pages')} - AFFiNE</title>
      </Head>
-      <PageListHeader icon={<AllPagesIcon />}>{t('All pages')}</PageListHeader>
+      <PageListHeader icon={<FolderIcon />}>{t('All pages')}</PageListHeader>
      <PageList
        pageList={pageList.filter(p => !p.trash)}
        showFavoriteTag={true}
--- a/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx
@ -1,5 +1,5 @@
 import { useTranslation } from '@affine/i18n';
-import { FavouritesIcon } from '@blocksuite/icons';
+import { FavoriteIcon } from '@blocksuite/icons';
 import Head from 'next/head';
 import { ReactElement } from 'react';

@ -16,9 +16,7 @@ export const Favorite = () => {
      <Head>
        <title>{t('Favorites')} - AFFiNE</title>
      </Head>
-      <PageListHeader icon={<FavouritesIcon />}>
-        {t('Favorites')}
-      </PageListHeader>
+      <PageListHeader icon={<FavoriteIcon />}>{t('Favorites')}</PageListHeader>
      <PageList
        pageList={pageList.filter(p => p.favorite && !p.trash)}
        showFavoriteTag={true}
--- a/apps/web/src/pages/workspace/[workspaceId]/trash.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/trash.tsx
@ -1,5 +1,5 @@
 import { useTranslation } from '@affine/i18n';
-import { TrashIcon } from '@blocksuite/icons';
+import { DeleteTemporarilyIcon } from '@blocksuite/icons';
 import Head from 'next/head';
 import { ReactElement, useCallback } from 'react';

@ -18,7 +18,9 @@ export const Trash = () => {
      <Head>
        <title>{t('Trash')} - AFFiNE</title>
      </Head>
-      <PageListHeader icon={<TrashIcon />}>{t('Trash')}</PageListHeader>
+      <PageListHeader icon={<DeleteTemporarilyIcon />}>
+        {t('Trash')}
+      </PageListHeader>
      <PageList
        pageList={pageList.filter(p => p.trash)}
        isTrash={true}
--- a/packages/component/src/styles/theme.ts
+++ b/packages/component/src/styles/theme.ts
@ -17,7 +17,7 @@ export const getLightTheme = (
      primaryColor: '#6880FF',
      pageBackground: '#fff',
      hoverBackground: '#F1F3FF',
-      innerHoverBackground: '#E9E9EC',
+      innerHoverBackground: '#E0E6FF',
      popoverBackground: '#fff',
      tooltipBackground: '#6880FF',
      codeBackground: '#f2f5f9',
--- a/packages/component/src/ui/popper/Popper.tsx
+++ b/packages/component/src/ui/popper/Popper.tsx
@ -151,7 +151,7 @@ export const Popper = ({
                  onPointerLeave={onPointerLeaveHandler}
                  style={popoverStyle}
                  className={popoverClassName}
-                  onClick={() => {
+                  onClick={e => {
                    if (hasClickTrigger && !visibleControlledByParent) {
                      setVisible(false);
                    }
--- a/packages/component/src/ui/table/TableCell.tsx
+++ b/packages/component/src/ui/table/TableCell.tsx
@ -1,13 +1,6 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-
 import { TableCellProps } from './interface';
 import { StyledTableCell } from './styles';
-export const TableCell = ({
-  children,
-  ...props
-}: PropsWithChildren<
-  TableCellProps & HTMLAttributes<HTMLTableCellElement>
->) => {
+export const TableCell = ({ children, ...props }: TableCellProps) => {
  return <StyledTableCell {...props}>{children}</StyledTableCell>;
 };

--- a/packages/component/src/ui/table/index.ts
+++ b/packages/component/src/ui/table/index.ts
@ -5,6 +5,7 @@
 // import TableRow from '@mui/material/TableRow';
 //

+export * from './interface';
 export * from './Table';
 export * from './TableBody';
 export * from './TableCell';
--- a/packages/component/src/ui/table/interface.ts
+++ b/packages/component/src/ui/table/interface.ts
@ -1,8 +1,9 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';

 export type TableCellProps = {
  align?: 'left' | 'right' | 'center';
  ellipsis?: boolean;
  proportion?: number;
  style?: CSSProperties;
-};
+} & PropsWithChildren &
+  HTMLAttributes<HTMLTableCellElement>;
--- a/packages/i18n/src/resources/de.json
+++ b/packages/i18n/src/resources/de.json
@ -29,7 +29,7 @@
  "Sign out description": "Nach dem Abmelden gehen alle nicht synchronisierten Inhalte verloren.",
  "Joined Workspace": "Workspace beigetreten",
  "404 - Page Not Found": "404 - Seite nicht gefunden",
-  "Add to favorites": "Zu Favoriten hinzufügen",
+  "Add to Favorites": "Zu Favoriten hinzufügen",
  "Added to Favorites": "Zu Favoriten hinzugefügt",
  "All pages": "Alle Seiten",
  "Bold": "Fett",
--- a/packages/i18n/src/resources/en.json
+++ b/packages/i18n/src/resources/en.json
@ -23,7 +23,7 @@
  "Find results": "Find {{number}} results",
  "Collapse sidebar": "Collapse sidebar",
  "Expand sidebar": "Expand sidebar",
-  "Add to favorites": "Add to favorites",
+  "Add to Favorites": "Add to Favorites",
  "Paper": "Paper",
  "Edgeless": "Edgeless",
  "Added to Favorites": "Added to Favorites",
--- a/packages/i18n/src/resources/fr.json
+++ b/packages/i18n/src/resources/fr.json
@ -22,7 +22,7 @@
  "Sign out description": "Se déconnecter provoquera la perte du contenu non synchronisé.",
  "404 - Page Not Found": "Erreur 404 - Page non trouvée",
  "AFFiNE Community": "Communauté AFFiNE",
-  "Add to favorites": "Ajouter aux favoris",
+  "Add to Favorites": "Ajouter aux favoris",
  "Added to Favorites": "Ajouté aux favoris ",
  "All pages": "Toutes les pages",
  "Bold": "Gras",
--- a/packages/i18n/src/resources/ru.json
+++ b/packages/i18n/src/resources/ru.json
@ -39,7 +39,7 @@
  "Copied link to clipboard": "Ссылка скопирована в буфер обмена",
  "Delete Member?": "Удалить участника?",
  "404 - Page Not Found": "404 - Страница не найдена",
-  "Add to favorites": "Добавить в избранное",
+  "Add to Favorites": "Добавить в избранное",
  "Added to Favorites": "Добавлено в Избранное",
  "All changes are saved locally": "Все изменения сохраняются локально",
  "All pages": "Все страницы",
--- a/packages/i18n/src/resources/zh-Hans.json
+++ b/packages/i18n/src/resources/zh-Hans.json
@ -25,7 +25,7 @@
  "Download all data": "下载所有数据",
  "Download core data": "下载核心数据",
  "Edit": "编辑",
-  "Add to favorites": "加入收藏",
+  "Add to Favorites": "加入收藏",
  "All pages": "全部页面",
  "Cancel": "取消",
  "Code block": "代码块",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -78,7 +78,7 @@ importers:
    specifiers:
      '@blocksuite/blocks': 0.4.1
      '@blocksuite/editor': 0.4.1
-      '@blocksuite/icons': 2.0.12
+      '@blocksuite/icons': 2.0.17
      '@blocksuite/store': 0.4.1
      '@emotion/react': ^11.10.6
      '@emotion/styled': ^11.10.6
@ -110,7 +110,7 @@ importers:
    dependencies:
      '@blocksuite/blocks': 0.4.1_atn5tmcwtxn4phcfq72w467xbe
      '@blocksuite/editor': 0.4.1_e5cdg6aldwc4hxgrfphufwkeea
-      '@blocksuite/icons': 2.0.12_pmekkgnqduwlme35zpnqhenc34
+      '@blocksuite/icons': 2.0.17_pmekkgnqduwlme35zpnqhenc34
      '@blocksuite/store': 0.4.1_lit@2.6.1+yjs@13.5.47
      '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
      '@emotion/styled': 11.10.6_oouaibmszuch5k64ms7uxp2aia
@ -150,7 +150,7 @@ importers:
      '@blocksuite/blocks': 0.4.1
      '@blocksuite/editor': 0.4.1
      '@blocksuite/global': 0.4.1
-      '@blocksuite/icons': 2.0.12
+      '@blocksuite/icons': 2.0.17
      '@blocksuite/store': 0.4.1
      '@emotion/css': ^11.10.6
      '@emotion/react': ^11.10.6
@ -193,7 +193,7 @@ importers:
      '@blocksuite/blocks': 0.4.1_atn5tmcwtxn4phcfq72w467xbe
      '@blocksuite/editor': 0.4.1_e5cdg6aldwc4hxgrfphufwkeea
      '@blocksuite/global': 0.4.1_lit@2.6.1
-      '@blocksuite/icons': 2.0.12_pmekkgnqduwlme35zpnqhenc34
+      '@blocksuite/icons': 2.0.17_pmekkgnqduwlme35zpnqhenc34
      '@blocksuite/store': 0.4.1_lit@2.6.1+yjs@13.5.47
      '@emotion/css': 11.10.6
      '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34
@ -1753,6 +1753,16 @@ packages:
      react: 18.2.0
    dev: false

+  /@blocksuite/icons/2.0.17_pmekkgnqduwlme35zpnqhenc34:
+    resolution: {integrity: sha512-nFhgnmfYvy/Pk+KBON5M+veZaz/IoQ+rAugzx2nPy+YPkgXvOxa5ml4rhzZYE2qgx7/FdsKQ5qkBWPjJoYRlbw==}
+    peerDependencies:
+      '@types/react': ^18.0.25
+      react: ^18.2.0
+    dependencies:
+      '@types/react': 18.0.28
+      react: 18.2.0
+    dev: false
+
  /@blocksuite/phasor/0.4.1_lit@2.6.1+yjs@13.5.47:
    resolution: {integrity: sha512-RzAmB9wbsVo8K4sUjjhatM/D/mbe2crHyJ5LE/HkUTIxp7D4DQapRP7RREJojzw2KhcRvapEVRRwlLV2f5wGUQ==}
    peerDependencies: