refactor: move component into a single package (#898)

packages/app/src/components/404/index.tsx

@@ -1,6 +1,6 @@
 import { NotFoundTitle, PageContainer } from './styles';
 import { useTranslation } from '@affine/i18n';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 import { useRouter } from 'next/router';
 export const NotfoundPage = () => {
   const { t } = useTranslation();

packages/app/src/components/404/styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 export const PageContainer = styled('div')(({ theme }) => {
   return {

packages/app/src/components/contact-modal/index.tsx

@@ -1,4 +1,4 @@
-import { Modal, ModalCloseButton, ModalWrapper } from '@/ui/modal';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import {
   LogoIcon,
   DocIcon,

packages/app/src/components/contact-modal/style.ts

@@ -1,4 +1,4 @@
-import { absoluteCenter, displayFlex, styled } from '@/styles';
+import { absoluteCenter, displayFlex, styled } from '@affine/component';
 
 export const StyledBigLink = styled('a')(({ theme }) => {
   return {

packages/app/src/components/create-workspace/index.tsx

@@ -1,13 +1,13 @@
-import { styled } from '@/styles';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { Button } from '@/ui/button';
+import { styled } from '@affine/component';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Button } from '@affine/component';
 import { useState } from 'react';
-import Input from '@/ui/input';
+import { Input } from '@affine/component';
 import { KeyboardEvent } from 'react';
 import { useTranslation } from '@affine/i18n';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useRouter } from 'next/router';
-import { toast } from '@/ui/toast';
+import { toast } from '@affine/component';
 
 interface ModalProps {
   open: boolean;

packages/app/src/components/delete-workspace/index.tsx

@@ -1,7 +1,7 @@
-import { styled } from '@/styles';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { Button } from '@/ui/button';
-import Input from '@/ui/input';
+import { styled } from '@affine/component';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Button } from '@affine/component';
+import { Input } from '@affine/component';
 import { useState } from 'react';
 
 interface LoginModalProps {

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -14,8 +14,8 @@ import {
   UndoIcon,
   RedoIcon,
 } from './Icons';
-import { MuiSlide } from '@/ui/mui';
-import { Tooltip } from '@/ui/tooltip';
+import { MuiSlide } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { useAppState } from '@/providers/app-state-provider';
 import useHistoryUpdated from '@/hooks/use-history-update';

packages/app/src/components/edgeless-toolbar/style.ts

@@ -1,4 +1,4 @@
-import { styled, displayFlex } from '@/styles';
+import { styled, displayFlex } from '@affine/component';
 
 export const StyledEdgelessToolbar = styled.div(({ theme }) => ({
   height: '320px',

packages/app/src/components/editor-mode-switch/style.ts

@@ -1,4 +1,4 @@
-import { displayFlex, keyframes, styled } from '@/styles';
+import { displayFlex, keyframes, styled } from '@affine/component';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import spring, { toString } from 'css-spring';

packages/app/src/components/editor/index.tsx

@@ -3,7 +3,7 @@ import type { Page, Workspace } from '@blocksuite/store';
 import '@blocksuite/blocks';
 import { EditorContainer } from '@blocksuite/editor';
 import exampleMarkdown from '@/templates/Welcome-to-AFFiNE-Alpha-Downhills.md';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 const StyledEditorContainer = styled('div')(() => {
   return {

packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx

@@ -1,11 +1,11 @@
-import { styled } from '@/styles';
-import { Modal, ModalWrapper } from '@/ui/modal';
-import { Button, IconButton } from '@/ui/button';
+import { styled } from '@affine/component';
+import { Modal, ModalWrapper } from '@affine/component';
+import { Button, IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { useAppState } from '@/providers/app-state-provider';
 import { useState } from 'react';
 import router from 'next/router';
-import { toast } from '@/ui/toast';
+import { toast } from '@affine/component';
 import { CloseIcon } from '@blocksuite/icons';
 interface EnableWorkspaceModalProps {
   open: boolean;

packages/app/src/components/enable-workspace/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { useState } from 'react';
 import { EnableWorkspaceModal } from './EnableWorkspaceModal';

packages/app/src/components/file-upload/index.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 import { FC, useRef, ChangeEvent, ReactElement } from 'react';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 interface Props {
   uploadType?: string;

packages/app/src/components/header/EditorHeader.tsx

@@ -5,7 +5,7 @@ import {
   StyledTitle,
   StyledTitleWrapper,
 } from './styles';
-import { Content } from '@/ui/layout';
+import { Content } from '@affine/component';
 import { useAppState } from '@/providers/app-state-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
 import QuickSearchButton from './QuickSearchButton';

packages/app/src/components/header/QuickSearchButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { IconButton, IconButtonProps } from '@/ui/button';
+import { IconButton, IconButtonProps } from '@affine/component';
 import { ArrowDownIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/GlobalModalProvider';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
   return {

packages/app/src/components/header/header-right-items/EditorOptionMenu.tsx

@@ -1,5 +1,5 @@
-import { Menu, MenuItem } from '@/ui/menu';
-import { IconButton } from '@/ui/button';
+import { Menu, MenuItem } from '@affine/component';
+import { IconButton } from '@affine/component';
 import {
   EdgelessIcon,
   ExportIcon,
@@ -15,7 +15,7 @@ import { useAppState } from '@/providers/app-state-provider';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useConfirm } from '@/providers/ConfirmProvider';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
-import { toast } from '@/ui/toast';
+import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 const PopoverContent = () => {
   const { editor } = useAppState();

packages/app/src/components/header/header-right-items/SyncUser.tsx

@@ -1,7 +1,7 @@
 import { CloudUnsyncedIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useAppState } from '@/providers/app-state-provider';
-import { IconButton } from '@/ui/button';
+import { IconButton } from '@affine/component';
 
 // Temporary solution to use this component, since the @blocksuite/icons has not been published yet
 const DefaultSyncIcon = () => {

packages/app/src/components/header/header-right-items/TrashButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useAppState } from '@/providers/app-state-provider';
 import { useConfirm } from '@/providers/ConfirmProvider';

packages/app/src/components/header/header-right-items/theme-mode-switch/style.ts

@@ -1,4 +1,4 @@
-import { displayFlex, keyframes, styled } from '@/styles';
+import { displayFlex, keyframes, styled } from '@affine/component';
 import { CSSProperties } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

packages/app/src/components/header/styles.ts

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@/styles';
+import { displayFlex, styled } from '@affine/component';
 
 export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
   ({ hasWarning }) => {

packages/app/src/components/help-island/index.tsx

@@ -6,8 +6,8 @@ import {
   StyledTransformIcon,
 } from './style';
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
-import { MuiGrow } from '@/ui/mui';
-import { Tooltip } from '@/ui/tooltip';
+import { MuiGrow } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useTheme } from '@/providers/ThemeProvider';

packages/app/src/components/help-island/style.ts

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@/styles';
+import { displayFlex, styled } from '@affine/component';
 
 export const StyledIsland = styled('div')(({ theme }) => {
   return {

packages/app/src/components/import/index.tsx

@@ -1,13 +1,13 @@
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
 import { StyledButtonWrapper, StyledTitle } from './styles';
-import { Button } from '@/ui/button';
-import { Content, FlexWrapper } from '@/ui/layout';
+import { Button } from '@affine/component';
+import { Content, FlexWrapper } from '@affine/component';
 import Loading from '@/components/loading';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useAppState } from '@/providers/app-state-provider';
 import { useEffect, useState } from 'react';
 import { useTranslation } from '@affine/i18n';
-// import { Tooltip } from '@/ui/tooltip';
+// import { Tooltip } from '@affine/component';
 type ImportModalProps = {
   open: boolean;
   onClose: () => void;

packages/app/src/components/import/styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 export const StyledTitle = styled.div(({ theme }) => {
   return {

packages/app/src/components/loading/PageLoading.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 import Loading from './Loading';
 import { useTranslation } from '@affine/i18n';
 

packages/app/src/components/loading/styled.ts

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 // Inspired by https://codepen.io/graphilla/pen/rNvBMYY
 export const StyledLoadingWrapper = styled('div', {

packages/app/src/components/login-modal/index.tsx

@@ -1,6 +1,6 @@
-import { positionAbsolute, styled } from '@/styles';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { Button } from '@/ui/button';
+import { positionAbsolute, styled } from '@affine/component';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Button } from '@affine/component';
 import { useAppState } from '@/providers/app-state-provider';
 import { useTranslation } from '@affine/i18n';
 import { GoogleIcon } from './GoogleIcon';

packages/app/src/components/logout-modal/index.tsx

@@ -1,6 +1,6 @@
-import { styled } from '@/styles';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { Button } from '@/ui/button';
+import { styled } from '@affine/component';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Button } from '@affine/component';
 import { Check, UnCheck } from './icon';
 import { useState } from 'react';
 import { useTranslation } from '@affine/i18n';

packages/app/src/components/mobile-modal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Modal, { ModalCloseButton, ModalWrapper } from '@/ui/modal';
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import getIsMobile from '@/utils/get-is-mobile';
 import { StyledButton, StyledContent, StyledTitle } from './styles';
 import bg from './bg.png';

packages/app/src/components/mobile-modal/styles.ts

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@/styles';
+import { displayFlex, styled } from '@affine/component';
 
 export const StyledTitle = styled.div(() => {
   return {

packages/app/src/components/page-list/DateCell.tsx

@@ -1,7 +1,7 @@
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import dayjs from 'dayjs';
 import { PageMeta } from '@/providers/app-state-provider';
-import { TableCell } from '@/ui/table';
+import { TableCell } from '@affine/component';
 import React from 'react';
 
 dayjs.extend(localizedFormat);

packages/app/src/components/page-list/Empty.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Empty } from '@/ui/empty';
+import { Empty } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 export const PageListEmpty = (props: { listType?: string }) => {
   const { listType } = props;

packages/app/src/components/page-list/OperationCell.tsx

@@ -1,8 +1,8 @@
 import { useConfirm } from '@/providers/ConfirmProvider';
 import { PageMeta } from '@/providers/app-state-provider';
-import { Menu, MenuItem } from '@/ui/menu';
-import { FlexWrapper } from '@/ui/layout';
-import { IconButton } from '@/ui/button';
+import { Menu, MenuItem } from '@affine/component';
+import { FlexWrapper } from '@affine/component';
+import { IconButton } from '@affine/component';
 import {
   MoreVerticalIcon,
   RestoreIcon,
@@ -12,7 +12,7 @@ import {
   OpenInNewIcon,
   TrashIcon,
 } from '@blocksuite/icons';
-import { toast } from '@/ui/toast';
+import { toast } from '@affine/component';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTranslation } from '@affine/i18n';
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {

packages/app/src/components/page-list/index.tsx

@@ -11,17 +11,23 @@ import {
   StyledTitleLink,
   StyledTitleWrapper,
 } from './styles';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@/ui/table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '@affine/component';
 import { OperationCell, TrashOperationCell } from './OperationCell';
 import Empty from './Empty';
-import { Content } from '@/ui/layout';
+import { Content } from '@affine/component';
 import React from 'react';
 import DateCell from '@/components/page-list/DateCell';
-import { IconButton } from '@/ui/button';
-import { Tooltip } from '@/ui/tooltip';
+import { IconButton } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider';
-import { toast } from '@/ui/toast';
+import { toast } from '@affine/component';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTheme } from '@/providers/ThemeProvider';
 import { useTranslation } from '@affine/i18n';

packages/app/src/components/page-list/styles.ts

@@ -1,5 +1,5 @@
-import { displayFlex, styled } from '@/styles';
-import { TableRow } from '@/ui/table';
+import { displayFlex, styled } from '@affine/component';
+import { TableRow } from '@affine/component';
 
 export const StyledTableContainer = styled.div(() => {
   return {

packages/app/src/components/quick-search/index.tsx

@@ -1,4 +1,4 @@
-import { Modal, ModalWrapper } from '@/ui/modal';
+import { Modal, ModalWrapper } from '@affine/component';
 import {
   StyledContent,
   StyledModalHeader,

packages/app/src/components/quick-search/style.ts

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@/styles';
+import { displayFlex, styled } from '@affine/component';
 
 export const StyledContent = styled('div')(({ theme }) => {
   return {

packages/app/src/components/shortcuts-modal/index.tsx

@@ -13,8 +13,8 @@ import {
   useWindowsKeyboardShortcuts,
   useWinMarkdownShortcuts,
 } from '@/components/shortcuts-modal/config';
-import { MuiSlide } from '@/ui/mui';
-import { ModalCloseButton } from '@/ui/modal';
+import { MuiSlide } from '@affine/component';
+import { ModalCloseButton } from '@affine/component';
 import { getUaHelper } from '@/utils';
 import { useTranslation } from '@affine/i18n';
 type ModalProps = {

packages/app/src/components/shortcuts-modal/style.ts

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@/styles';
+import { displayFlex, styled } from '@affine/component';
 
 export const StyledShortcutsModal = styled.div(({ theme }) => ({
   width: '288px',

packages/app/src/components/workspace-layout/styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 export const StyledPage = styled('div')(({ theme }) => {
   return {

packages/app/src/components/workspace-modal/Footer.tsx

@@ -1,11 +1,11 @@
 import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons';
-import { FlexWrapper } from '@/ui/layout';
+import { FlexWrapper } from '@affine/component';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
-import { IconButton } from '@/ui/button';
+import { IconButton } from '@affine/component';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyledFooter, StyleUserInfo, StyledSignInButton } from './styles';
 import { useTranslation } from '@affine/i18n';
-import { Tooltip } from '@/ui/tooltip';
+import { Tooltip } from '@affine/component';
 export const Footer = ({
   onLogin,
   onLogout,

packages/app/src/components/workspace-modal/SelectLanguageMenu.tsx

@@ -1,9 +1,9 @@
 import { LOCALES } from '@affine/i18n';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { ArrowDownIcon } from '@blocksuite/icons';
-import { Button } from '@/ui/button';
-import { Menu, MenuItem } from '@/ui/menu';
+import { Button } from '@affine/component';
+import { Menu, MenuItem } from '@affine/component';
 
 const LanguageMenuContent = () => {
   const { i18n } = useTranslation();

packages/app/src/components/workspace-modal/WorkspaceCard.tsx

@@ -10,7 +10,7 @@ import { WorkspaceUnit } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
 import { useTranslation } from '@affine/i18n';
-import { FlexWrapper } from '@/ui/layout';
+import { FlexWrapper } from '@affine/component';
 
 const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => {
   const { user } = useAppState();

packages/app/src/components/workspace-modal/index.tsx

@@ -1,9 +1,9 @@
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { FlexWrapper } from '@/ui/layout';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { FlexWrapper } from '@affine/component';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
 
-import { Tooltip } from '@/ui/tooltip';
+import { Tooltip } from '@affine/component';
 
 import { AddIcon, HelpCenterIcon } from '@blocksuite/icons';
 

packages/app/src/components/workspace-modal/styles.ts

@@ -1,5 +1,10 @@
-import { displayFlex, displayInlineFlex, styled, textEllipsis } from '@/styles';
-import { Button } from '@/ui/button';
+import {
+  displayFlex,
+  displayInlineFlex,
+  styled,
+  textEllipsis,
+} from '@affine/component';
+import { Button } from '@affine/component';
 
 export const StyledSplitLine = styled.div(({ theme }) => {
   return {

packages/app/src/components/workspace-setting/ExportPage.tsx

@@ -1,7 +1,7 @@
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
-import { Wrapper } from '@/ui/layout';
-import { Button } from '@/ui/button';
+import { Wrapper } from '@affine/component';
+import { Button } from '@affine/component';
 export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { t } = useTranslation();
   console.log(workspace);

packages/app/src/components/workspace-setting/PublishPage.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
-import { Button } from '@/ui/button';
-import Input from '@/ui/input';
-import { toast } from '@/ui/toast';
+import { Button } from '@affine/component';
+import { Input } from '@affine/component';
+import { toast } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
 import { EnableWorkspaceButton } from '../enable-workspace';
-import { Wrapper, Content, FlexWrapper } from '@/ui/layout';
+import { Wrapper, Content, FlexWrapper } from '@affine/component';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
   const { publishWorkspace } = useWorkspaceHelper();

packages/app/src/components/workspace-setting/SyncPage.tsx

@@ -9,7 +9,7 @@ import { useTranslation, Trans } from '@affine/i18n';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { EnableWorkspaceButton } from '../enable-workspace';
 import { useAppState } from '@/providers/app-state-provider';
-import { FlexWrapper, Content, Wrapper } from '@/ui/layout';
+import { FlexWrapper, Content, Wrapper } from '@affine/component';
 
 // // FIXME: Temporary solution, since the @blocksuite/icons is broken
 // const ActiveIcon = () => {

packages/app/src/components/workspace-setting/general/General.tsx

@@ -1,9 +1,9 @@
 import { StyledInput, StyledProviderInfo, StyledAvatar } from './style';
 import { StyledSettingKey, StyledRow } from '../style';
-import { FlexWrapper, Content } from '@/ui/layout';
+import { FlexWrapper, Content } from '@affine/component';
 
 import { useState } from 'react';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
@@ -42,29 +42,29 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       <StyledRow>
         <StyledSettingKey>{t('Workspace Avatar')}</StyledSettingKey>
         <StyledAvatar disabled={!isOwner}>
-         {isOwner ? (
-              <Upload
-                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
-                fileChange={fileChange}
-              >
-                <>
-                  <div className="camera-icon">
-                    <CameraIcon></CameraIcon>
-                  </div>
-                  <WorkspaceUnitAvatar
-                    size={72}
-                    name={workspace.name}
-                    workspaceUnit={workspace}
-                  />
-                </>
-              </Upload>
-            ) : (
-              <WorkspaceUnitAvatar
-                size={72}
-                name={workspace.name}
-                workspaceUnit={workspace}
-              />
-            )}
+          {isOwner ? (
+            <Upload
+              accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+              fileChange={fileChange}
+            >
+              <>
+                <div className="camera-icon">
+                  <CameraIcon></CameraIcon>
+                </div>
+                <WorkspaceUnitAvatar
+                  size={72}
+                  name={workspace.name}
+                  workspaceUnit={workspace}
+                />
+              </>
+            </Upload>
+          ) : (
+            <WorkspaceUnitAvatar
+              size={72}
+              name={workspace.name}
+              workspaceUnit={workspace}
+            />
+          )}
         </StyledAvatar>
       </StyledRow>
 

packages/app/src/components/workspace-setting/general/delete/Delete.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
-import Modal from '@/ui/modal';
-import Input from '@/ui/input';
+import { Modal } from '@affine/component';
+import { Input } from '@affine/component';
 import {
   StyledModalHeader,
   StyledTextContent,
@@ -10,8 +10,8 @@ import {
   StyledWorkspaceName,
 } from './style';
 import { useState } from 'react';
-import { ModalCloseButton } from '@/ui/modal';
-import { Button } from '@/ui/button';
+import { ModalCloseButton } from '@affine/component';
+import { Button } from '@affine/component';
 
 import { WorkspaceUnit } from '@affine/datacenter';
 import { Trans, useTranslation } from '@affine/i18n';

packages/app/src/components/workspace-setting/general/delete/style.ts

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 export const StyledModalWrapper = styled('div')(({ theme }) => {
   return {

packages/app/src/components/workspace-setting/general/leave/Leave.tsx

@@ -1,12 +1,12 @@
-import Modal from '@/ui/modal';
+import { Modal } from '@affine/component';
 import {
   StyledModalHeader,
   StyledTextContent,
   StyledModalWrapper,
   StyledButtonContent,
 } from './style';
-import { ModalCloseButton } from '@/ui/modal';
-import { Button } from '@/ui/button';
+import { ModalCloseButton } from '@affine/component';
+import { Button } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 // import { getDataCenter } from '@affine/datacenter';

packages/app/src/components/workspace-setting/general/leave/style.ts

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 export const StyledModalWrapper = styled('div')(({ theme }) => {
   return {

packages/app/src/components/workspace-setting/general/style.ts

@@ -1,5 +1,5 @@
-import { styled } from '@/styles';
-import Input from '@/ui/input';
+import { styled } from '@affine/component';
+import { Input } from '@affine/component';
 
 export const StyledInput = styled(Input)(({ theme }) => {
   return {

packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx

@@ -1,10 +1,10 @@
 import { EmailIcon } from '@blocksuite/icons';
-import { styled } from '@/styles';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { Button } from '@/ui/button';
-import Input from '@/ui/input';
+import { styled } from '@affine/component';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
+import { Button } from '@affine/component';
+import { Input } from '@affine/component';
 import { useState } from 'react';
-import { MuiAvatar } from '@/ui/mui';
+import { MuiAvatar } from '@affine/component';
 import useMembers from '@/hooks/use-members';
 import { User } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';

packages/app/src/components/workspace-setting/member/MembersPage.tsx

@@ -12,19 +12,19 @@ import {
   StyledMoreVerticalButton,
   StyledMemberContainer,
 } from './style';
-import { Wrapper } from '@/ui/layout';
+import { Wrapper } from '@affine/component';
 import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
 import { useState } from 'react';
-import { Button, IconButton } from '@/ui/button';
+import { Button, IconButton } from '@affine/component';
 import { InviteMemberModal } from './InviteMemberModal';
-import { Menu, MenuItem } from '@/ui/menu';
-import { Empty } from '@/ui/empty';
+import { Menu, MenuItem } from '@affine/component';
+import { Empty } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useConfirm } from '@/providers/ConfirmProvider';
-import { toast } from '@/ui/toast';
+import { toast } from '@affine/component';
 import useMembers from '@/hooks/use-members';
 import Loading from '@/components/loading';
-import { FlexWrapper } from '@/ui/layout';
+import { FlexWrapper } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { EnableWorkspaceButton } from '@/components/enable-workspace';
 

packages/app/src/components/workspace-setting/member/style.ts

@@ -1,5 +1,5 @@
-import { styled } from '@/styles';
-import { MuiAvatar } from '@/ui/mui';
+import { styled } from '@affine/component';
+import { MuiAvatar } from '@affine/component';
 
 export const StyledMemberTitleContainer = styled('li')(() => {
   return {

packages/app/src/components/workspace-setting/style.ts

@@ -1,5 +1,5 @@
-import { styled } from '@/styles';
-import { FlexWrapper } from '@/ui/layout';
+import { styled } from '@affine/component';
+import { FlexWrapper } from '@affine/component';
 export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 import { WorkspaceItemWrapper, WorkspaceItemContent } from './styles';
 
 interface ListItemProps {

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

@@ -1,5 +1,5 @@
 import { useModal } from '@/providers/GlobalModalProvider';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 import { AffineIcon } from '../../icons/Icons';
 import {
   WorkspaceItemAvatar,

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

@@ -1,5 +1,5 @@
-import { MuiAvatar } from '@/ui/mui';
-import { styled } from '@/styles';
+import { MuiAvatar } from '@affine/component';
+import { styled } from '@affine/component';
 
 export const WorkspaceItemWrapper = styled('div')(({ theme }) => ({
   display: 'flex',

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -1,6 +1,6 @@
-import { MuiAvatar } from '@/ui/mui';
-import { styled } from '@/styles';
-import { StyledPopperContainer } from '@/ui/shared/Container';
+import { MuiAvatar } from '@affine/component';
+import { styled } from '@affine/component';
+import { StyledPopperContainer } from '@affine/component';
 
 export const SelectorWrapper = styled('div')({
   width: '100%',

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

@@ -21,11 +21,11 @@ import {
   SettingsIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
-import { MuiCollapse } from '@/ui/mui';
-import { Tooltip } from '@/ui/tooltip';
+import { MuiCollapse } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useAppState } from '@/providers/app-state-provider';
-import { IconButton } from '@/ui/button';
+import { IconButton } from '@affine/component';
 import useLocalStorage from '@/hooks/use-local-storage';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTranslation } from '@affine/i18n';

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

@@ -1,4 +1,4 @@
-import { displayFlex, styled, textEllipsis } from '@/styles';
+import { displayFlex, styled, textEllipsis } from '@affine/component';
 import Link from 'next/link';
 
 export const StyledSliderBar = styled.div<{ show: boolean }>(