toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 09:22:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix code style issues (#4857)

Browse Source
This commit is contained in:
EYHN 2023-11-08 13:51:08 +08:00 committed by GitHub
parent 83472cc682
commit b7edaab387
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 423 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
packages/common/infra/src/__internal__/react.ts
View File

1
packages/common/infra/vite.config.ts
View File

@ -22,7 +22,6 @@ export default defineConfig({
root,
'src/__internal__/workspace.ts'
),
'__internal__/react': resolve(root, 'src/__internal__/react.ts'),
'__internal__/plugin': resolve(root, 'src/__internal__/plugin.ts'),
},
formats: ['es', 'cjs'],

2
packages/frontend/component/src/components/notification-center/index.jotai.ts
View File

@ -9,7 +9,7 @@ export type Notification = {
theme?: 'light' | 'dark' | 'default';
timeout?: number;
progressingBar?: boolean;
multimedia?: React.ReactNode | JSX.Element | HTMLElement;
multimedia?: React.ReactNode | JSX.Element;
// actions
undo?: () => Promise<void>;
};

10
packages/frontend/component/src/components/notification-center/index.tsx
View File

@ -7,7 +7,7 @@ import * as Toast from '@radix-ui/react-toast';
import { IconButton } from '@toeverything/components/button';
import clsx from 'clsx';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import type { ReactElement } from 'react';
import type { ReactNode } from 'react';
import {
useCallback,
useEffect,
@ -70,7 +70,7 @@ const typeColorMap = {
},
};
function NotificationCard(props: NotificationCardProps): ReactElement {
function NotificationCard(props: NotificationCardProps): ReactNode {
const removeNotification = useSetAtom(removeNotificationAtom);
const { notification, notifications, setHeights, heights, index } = props;
@ -270,7 +270,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
>
{notification.multimedia ? (
<div className={styles.notificationMultimediaStyle}>
<>{notification.multimedia}</>
{notification.multimedia}
<IconButton className={styles.closeButtonWithMediaStyle}>
<CloseIcon onClick={onClickRemove} />
</IconButton>
@ -373,7 +373,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
);
}
export function NotificationCenter(): ReactElement {
export function NotificationCenter(): ReactNode {
const notifications = useAtomValue(notificationsAtom);
const [expand, setExpand] = useAtom(expandNotificationCenterAtom);
@ -390,7 +390,7 @@ export function NotificationCenter(): ReactElement {
}
}, [notifications, setExpand]);
if (!notifications.length) return <></>;
if (!notifications.length) return null;
return (
<Toast.Provider swipeDirection="right">
{notifications.map((notification, index) =>

2
packages/frontend/component/src/components/page-list/operation-menu-items/export.tsx
View File

@ -97,7 +97,7 @@ export const ExportMenuItems = ({
const items = itemMap.map(({ component: Component, props }) => (
<Component key={props.label} {...props} />
));
return <>{items}</>;
return items;
};
export const Export = ({ exportHandler, className }: ExportProps) => {

2
packages/frontend/component/src/components/provider-composer/__tests__/provider-composer.spec.tsx
View File

@ -15,7 +15,7 @@ test('ProviderComposer', async () => {
};
const ConsumerComponent = () => {
const value = useContext(Context);
return <>{value}</>;
return value;
};
const Component = () => {
return (

43
packages/frontend/component/src/components/share-menu/share-page.tsx
View File

@ -38,30 +38,25 @@ export const LocalSharePage = (props: ShareMenuProps) => {
const t = useAFFiNEI18N();
return (
<>
<div className={styles.localSharePage}>
<div className={styles.columnContainerStyle} style={{ gap: '12px' }}>
<div
className={styles.descriptionStyle}
style={{ maxWidth: '230px' }}
>
{t['com.affine.share-menu.EnableCloudDescription']()}
</div>
<div>
<Button
onClick={props.onEnableAffineCloud}
type="primary"
data-testid="share-menu-enable-affine-cloud-button"
>
{t['Enable AFFiNE Cloud']()}
</Button>
</div>
<div className={styles.localSharePage}>
<div className={styles.columnContainerStyle} style={{ gap: '12px' }}>
<div className={styles.descriptionStyle} style={{ maxWidth: '230px' }}>
{t['com.affine.share-menu.EnableCloudDescription']()}
</div>
<div className={styles.cloudSvgContainer}>
<CloudSvg />
<div>
<Button
onClick={props.onEnableAffineCloud}
type="primary"
data-testid="share-menu-enable-affine-cloud-button"
>
{t['Enable AFFiNE Cloud']()}
</Button>
</div>
</div>
</>
<div className={styles.cloudSvgContainer}>
<CloudSvg />
</div>
</div>
);
};
@ -218,11 +213,7 @@ export const SharePage = (props: ShareMenuProps) => {
if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
return <LocalSharePage {...props} />;
} else if (props.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
return (
<>
<AffineSharePage {...props} />
</>
);
return <AffineSharePage {...props} />;
}
throw new Error('Unreachable');
};

2
packages/frontend/component/src/components/workspace-list/index.tsx
View File

@ -121,7 +121,7 @@ export const WorkspaceList = (props: WorkspaceListProps) => {
<SortableContext items={optimisticList}>
{optimisticList.map(item => (
<Suspense fallback={<WorkspaceCardSkeleton />} key={item.id}>
<SortableWorkspaceItem {...props} item={item} key={item.id} />
<SortableWorkspaceItem key={item.id} {...props} item={item} />
</Suspense>
))}
</SortableContext>

196
packages/frontend/component/src/ui/popper/popper.tsx
View File

@ -171,109 +171,107 @@ export const Popper = ({
}}
>
{showArrow ? (
<>
{placement.indexOf('bottom') === 0 ? (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
placement.indexOf('bottom') === 0 ? (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M6.38889 0.45C5.94444 -0.15 5.05555 -0.150001 4.61111 0.449999L0.499999 6L10.5 6L6.38889 0.45Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
{content}
</div>
) : placement.indexOf('top') === 0 ? (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</div>
) : placement.indexOf('left') === 0 ? (
<>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
fill="none"
>
<path
d="M5.55 5.88889C6.15 5.44444 6.15 4.55555 5.55 4.11111L-4.76837e-07 0L-4.76837e-07 10L5.55 5.88889Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</>
) : placement.indexOf('right') === 0 ? (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
<path
d="M6.38889 0.45C5.94444 -0.15 5.05555 -0.150001 4.61111 0.449999L0.499999 6L10.5 6L6.38889 0.45Z"
style={{ fill: 'var(--affine-tooltip)' }}
>
<path
d="M0.45 4.11111C-0.15 4.55556 -0.15 5.44445 0.45 5.88889L6 10V0L0.45 4.11111Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
{content}
</>
) : (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
/>
</svg>
{content}
</div>
) : placement.indexOf('top') === 0 ? (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</div>
)}
</>
<path
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</div>
) : placement.indexOf('left') === 0 ? (
<>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
fill="none"
>
<path
d="M5.55 5.88889C6.15 5.44444 6.15 4.55555 5.55 4.11111L-4.76837e-07 0L-4.76837e-07 10L5.55 5.88889Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</>
) : placement.indexOf('right') === 0 ? (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="6"
height="10"
viewBox="0 0 6 10"
style={{ fill: 'var(--affine-tooltip)' }}
>
<path
d="M0.45 4.11111C-0.15 4.55556 -0.15 5.44445 0.45 5.88889L6 10V0L0.45 4.11111Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
{content}
</>
) : (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
{content}
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="6"
viewBox="0 0 11 6"
fill="none"
>
<path
d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
style={{ fill: 'var(--affine-tooltip)' }}
/>
</svg>
</div>
)
) : (
<>{content}</>
content
)}
</div>
</Grow>

22
packages/frontend/component/src/ui/tree-view/tree-node-inner.tsx
View File

@ -76,17 +76,13 @@ export const TreeNodeItem = <RenderProps,>({
disableCollapse,
allowDrop = true,
}: TreeNodeItemProps<RenderProps>) => {
return (
<>
{node.render?.(node, {
isOver: isOver && allowDrop,
onAdd: () => onAdd?.(node.id),
onDelete: () => onDelete?.(node.id),
collapsed,
setCollapsed,
isSelected: selectedId === node.id,
disableCollapse,
})}
</>
);
return node.render?.(node, {
isOver: isOver && allowDrop,
onAdd: () => onAdd?.(node.id),
onDelete: () => onDelete?.(node.id),
collapsed,
setCollapsed,
isSelected: selectedId === node.id,
disableCollapse,
});
};

14
packages/frontend/core/src/adapters/cloud/ui.tsx
View File

@ -48,14 +48,12 @@ export const UI = {
);
return (
<>
<PageDetailEditor
pageId={currentPageId}
onInit={useCallback(async page => initEmptyPage(page), [])}
onLoad={onLoad}
workspace={workspace.blockSuiteWorkspace}
/>
</>
<PageDetailEditor
pageId={currentPageId}
onInit={useCallback(async page => initEmptyPage(page), [])}
onLoad={onLoad}
workspace={workspace.blockSuiteWorkspace}
/>
);
},
NewSettingsDetail: ({

14
packages/frontend/core/src/adapters/local/index.tsx
View File

@ -92,14 +92,12 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
throw new PageNotFoundError(workspace, currentPageId);
}
return (
<>
<PageDetailEditor
pageId={currentPageId}
onInit={useCallback(async page => initEmptyPage(page), [])}
onLoad={onLoadEditor}
workspace={workspace}
/>
</>
<PageDetailEditor
pageId={currentPageId}
onInit={useCallback(async page => initEmptyPage(page), [])}
onLoad={onLoadEditor}
workspace={workspace}
/>
);
},
NewSettingsDetail: ({

14
packages/frontend/core/src/adapters/public-cloud/ui.tsx
View File

@ -16,14 +16,12 @@ export const UI = {
throw new PageNotFoundError(workspace.blockSuiteWorkspace, currentPageId);
}
return (
<>
<PageDetailEditor
pageId={currentPageId}
onInit={useCallback(async page => initEmptyPage(page), [])}
onLoad={onLoadEditor}
workspace={workspace.blockSuiteWorkspace}
/>
</>
<PageDetailEditor
pageId={currentPageId}
onInit={useCallback(async page => initEmptyPage(page), [])}
onLoad={onLoadEditor}
workspace={workspace.blockSuiteWorkspace}
/>
);
},
NewSettingsDetail: () => {

2
packages/frontend/core/src/components/affine/auth/use-captcha.tsx
View File

@ -43,7 +43,7 @@ export const Captcha = () => {
const [response] = useAtom(responseAtom);
if (!runtimeConfig.enableCaptcha) {
return <></>;
return null;
}
if (environment.isDesktop) {

4
packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
View File

@ -2,7 +2,7 @@ import { SubscriptionPlan } from '@affine/graphql';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import Tooltip from '@toeverything/components/tooltip';
import { useSetAtom } from 'jotai';
import React, { useCallback } from 'react';
import { useCallback } from 'react';
import { withErrorBoundary } from 'react-error-boundary';
import { openSettingModalAtom } from '../../../atoms';
@ -39,5 +39,5 @@ const UserPlanButtonWithData = () => {
// If fetch user data failed, just render empty.
export const UserPlanButton = withErrorBoundary(UserPlanButtonWithData, {
fallbackRender: () => <React.Fragment />,
fallbackRender: () => null,
});

20
packages/frontend/core/src/components/affine/new-workspace-setting-detail/export.tsx
View File

@ -86,16 +86,14 @@ export const ExportPanel = ({ workspace }: ExportPanelProps) => {
}, [pushNotification, syncing, t, workspace, workspaceId]);
return (
<>
<SettingRow name={t['Export']()} desc={t['Export Description']()}>
<Button
data-testid="export-affine-backup"
onClick={onExport}
disabled={syncing}
>
{t['Export']()}
</Button>
</SettingRow>
</>
<SettingRow name={t['Export']()} desc={t['Export Description']()}>
<Button
data-testid="export-affine-backup"
onClick={onExport}
disabled={syncing}
>
{t['Export']()}
</Button>
</SettingRow>
);
};

80
packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx
View File

@ -121,48 +121,46 @@ export const AvatarAndName = () => {
}, [allowUpdate, input, user]);
return (
<>
<SettingRow
name={t['com.affine.settings.profile']()}
desc={t['com.affine.settings.profile.message']()}
spreadCol={false}
>
<FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
<Suspense>
<UserAvatar />
</Suspense>
<SettingRow
name={t['com.affine.settings.profile']()}
desc={t['com.affine.settings.profile.message']()}
spreadCol={false}
>
<FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
<Suspense>
<UserAvatar />
</Suspense>
<div className={style.profileInputWrapper}>
<label>{t['com.affine.settings.profile.name']()}</label>
<FlexWrapper alignItems="center">
<Input
defaultValue={input}
data-testid="user-name-input"
placeholder={t['com.affine.settings.profile.placeholder']()}
maxLength={64}
minLength={0}
width={280}
height={28}
onChange={setInput}
onEnter={handleUpdateUserName}
/>
{allowUpdate ? (
<Button
data-testid="save-user-name"
onClick={handleUpdateUserName}
className={style.button}
style={{
marginLeft: '12px',
}}
>
{t['com.affine.editCollection.save']()}
</Button>
) : null}
</FlexWrapper>
</div>
</FlexWrapper>
</SettingRow>
</>
<div className={style.profileInputWrapper}>
<label>{t['com.affine.settings.profile.name']()}</label>
<FlexWrapper alignItems="center">
<Input
defaultValue={input}
data-testid="user-name-input"
placeholder={t['com.affine.settings.profile.placeholder']()}
maxLength={64}
minLength={0}
width={280}
height={28}
onChange={setInput}
onEnter={handleUpdateUserName}
/>
{allowUpdate ? (
<Button
data-testid="save-user-name"
onClick={handleUpdateUserName}
className={style.button}
style={{
marginLeft: '12px',
}}
>
{t['com.affine.editCollection.save']()}
</Button>
) : null}
</FlexWrapper>
</div>
</FlexWrapper>
</SettingRow>
);
};

8
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx
View File

@ -9,7 +9,7 @@ import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { useQuery } from '@affine/workspace/affine/gql';
import { useSetAtom } from 'jotai';
import React, { Suspense, useEffect, useRef, useState } from 'react';
import { Suspense, useEffect, useRef, useState } from 'react';
import type { FallbackProps } from 'react-error-boundary';
import { SWRErrorBoundary } from '../../../../../components/pure/swr-error-bundary';
@ -205,9 +205,9 @@ const PlansErrorBoundary = ({ resetErrorBoundary }: FallbackProps) => {
const t = useAFFiNEI18N();
const title = t['com.affine.payment.title']();
const subtitle = <React.Fragment />;
const tabs = <React.Fragment />;
const footer = <React.Fragment />;
const subtitle = '';
const tabs = '';
const footer = '';
const scroll = (
<div className={styles.errorTip}>

20
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
View File

@ -406,17 +406,15 @@ const Upgrade = ({
}, [onClose]);
return (
<>
<Button
className={styles.planAction}
type="primary"
onClick={upgrade}
disabled={isMutating}
loading={isMutating}
>
{t['com.affine.payment.upgrade']()}
</Button>
</>
<Button
className={styles.planAction}
type="primary"
onClick={upgrade}
disabled={isMutating}
loading={isMutating}
>
{t['com.affine.payment.upgrade']()}
</Button>
);
};

22
packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
View File

@ -218,17 +218,15 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
return null;
}
return (
<>
<FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
<Menu
items={EditMenu}
contentOptions={{
align: 'center',
}}
>
<HeaderDropDownButton />
</Menu>
</FlexWrapper>
</>
<FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
<Menu
items={EditMenu}
contentOptions={{
align: 'center',
}}
>
<HeaderDropDownButton />
</Menu>
</FlexWrapper>
);
};

6
packages/frontend/core/src/components/cloud/provider.tsx
View File

@ -2,7 +2,7 @@ import { pushNotificationAtom } from '@affine/component/notification-center';
import { assertExists } from '@blocksuite/global/utils';
import { GraphQLError } from 'graphql';
import { useSetAtom } from 'jotai';
import type { PropsWithChildren, ReactElement } from 'react';
import type { PropsWithChildren, ReactNode } from 'react';
import { useCallback } from 'react';
import type { SWRConfiguration } from 'swr';
import { SWRConfig } from 'swr';
@ -49,9 +49,9 @@ const cloudConfig: SWRConfiguration = {
],
};
export const Provider = (props: PropsWithChildren): ReactElement => {
export const Provider = (props: PropsWithChildren): ReactNode => {
if (!runtimeConfig.enableCloud) {
return <>{props.children}</>;
return props.children;
}
return <SWRConfig value={cloudConfig}>{props.children}</SWRConfig>;

8
packages/frontend/core/src/components/page-detail-editor.tsx
View File

@ -328,10 +328,8 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
}
return (
<>
<Suspense>
<LayoutPanel node={layout} editorProps={props} depth={0} />
</Suspense>
</>
<Suspense>
<LayoutPanel node={layout} editorProps={props} depth={0} />
</Suspense>
);
};

90
packages/frontend/core/src/components/pure/footer/index.tsx
View File

@ -49,53 +49,49 @@ export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
const size = props.size || 20;
const sizeStr = size + 'px';
return (
<>
{props.avatar ? (
<div
style={{
...props.style,
width: sizeStr,
height: sizeStr,
color: '#fff',
borderRadius: '50%',
overflow: 'hidden',
display: 'inline-block',
verticalAlign: 'middle',
}}
ref={ref}
>
<picture>
<img
style={{ width: sizeStr, height: sizeStr }}
src={props.avatar}
alt=""
referrerPolicy="no-referrer"
/>
</picture>
</div>
) : (
<div
style={{
...props.style,
width: sizeStr,
height: sizeStr,
border: '1px solid #fff',
color: '#fff',
fontSize: Math.ceil(0.5 * size) + 'px',
background: stringToColour(props.name || 'AFFiNE'),
borderRadius: '50%',
textAlign: 'center',
lineHeight: size + 'px',
display: 'inline-block',
verticalAlign: 'middle',
}}
ref={ref}
>
{(props.name || 'AFFiNE').substring(0, 1)}
</div>
)}
</>
return props.avatar ? (
<div
style={{
...props.style,
width: sizeStr,
height: sizeStr,
color: '#fff',
borderRadius: '50%',
overflow: 'hidden',
display: 'inline-block',
verticalAlign: 'middle',
}}
ref={ref}
>
<picture>
<img
style={{ width: sizeStr, height: sizeStr }}
src={props.avatar}
alt=""
referrerPolicy="no-referrer"
/>
</picture>
</div>
) : (
<div
style={{
...props.style,
width: sizeStr,
height: sizeStr,
border: '1px solid #fff',
color: '#fff',
fontSize: Math.ceil(0.5 * size) + 'px',
background: stringToColour(props.name || 'AFFiNE'),
borderRadius: '50%',
textAlign: 'center',
lineHeight: size + 'px',
display: 'inline-block',
verticalAlign: 'middle',
}}
ref={ref}
>
{(props.name || 'AFFiNE').substring(0, 1)}
</div>
);
}
);

196
packages/frontend/core/src/components/root-app-sidebar/index.tsx
View File

@ -170,109 +170,105 @@ export const RootAppSidebar = ({
useRegisterBlocksuiteEditorCommands(router.back, router.forward);
const userInfo = useDeleteCollectionInfo();
return (
<>
<AppSidebar
router={router}
hasBackground={
!(
appSettings.enableBlurBackground &&
environment.isDesktop &&
environment.isMacOs
)
}
generalShortcutsInfo={generalShortcutsInfo}
>
<MoveToTrash.ConfirmModal
open={trashConfirmOpen}
onConfirm={handleOnConfirm}
onOpenChange={onTrashConfirmOpenChange}
titles={deletePageTitles}
/>
<SidebarContainer>
<Menu
rootOptions={{
open: openUserWorkspaceList,
}}
items={
<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
}
contentOptions={{
// hide trigger
sideOffset: -58,
onInteractOutside: closeUserWorkspaceList,
onEscapeKeyDown: closeUserWorkspaceList,
style: {
width: '300px',
},
}}
>
<WorkspaceCard
currentWorkspace={currentWorkspace}
onClick={useCallback(() => {
setOpenUserWorkspaceList(true);
}, [setOpenUserWorkspaceList])}
/>
</Menu>
<QuickSearchInput
data-testid="slider-bar-quick-search-button"
onClick={onOpenQuickSearchModal}
<AppSidebar
router={router}
hasBackground={
!(
appSettings.enableBlurBackground &&
environment.isDesktop &&
environment.isMacOs
)
}
generalShortcutsInfo={generalShortcutsInfo}
>
<MoveToTrash.ConfirmModal
open={trashConfirmOpen}
onConfirm={handleOnConfirm}
onOpenChange={onTrashConfirmOpenChange}
titles={deletePageTitles}
/>
<SidebarContainer>
<Menu
rootOptions={{
open: openUserWorkspaceList,
}}
items={<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />}
contentOptions={{
// hide trigger
sideOffset: -58,
onInteractOutside: closeUserWorkspaceList,
onEscapeKeyDown: closeUserWorkspaceList,
style: {
width: '300px',
},
}}
>
<WorkspaceCard
currentWorkspace={currentWorkspace}
onClick={useCallback(() => {
setOpenUserWorkspaceList(true);
}, [setOpenUserWorkspaceList])}
/>
<RouteMenuLinkItem
icon={<FolderIcon />}
currentPath={currentPath}
path={paths.all(currentWorkspaceId)}
onClick={backToAll}
</Menu>
<QuickSearchInput
data-testid="slider-bar-quick-search-button"
onClick={onOpenQuickSearchModal}
/>
<RouteMenuLinkItem
icon={<FolderIcon />}
currentPath={currentPath}
path={paths.all(currentWorkspaceId)}
onClick={backToAll}
>
<span data-testid="all-pages">
{t['com.affine.workspaceSubPath.all']()}
</span>
</RouteMenuLinkItem>
{runtimeConfig.enableNewSettingModal ? (
<MenuItem
data-testid="slider-bar-workspace-setting-button"
icon={<SettingsIcon />}
onClick={onOpenSettingModal}
>
<span data-testid="all-pages">
{t['com.affine.workspaceSubPath.all']()}
<span data-testid="settings-modal-trigger">
{t['com.affine.settingSidebar.title']()}
</span>
</RouteMenuLinkItem>
{runtimeConfig.enableNewSettingModal ? (
<MenuItem
data-testid="slider-bar-workspace-setting-button"
icon={<SettingsIcon />}
onClick={onOpenSettingModal}
>
<span data-testid="settings-modal-trigger">
{t['com.affine.settingSidebar.title']()}
</span>
</MenuItem>
) : null}
</SidebarContainer>
</MenuItem>
) : null}
</SidebarContainer>
<SidebarScrollableContainer>
<CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
<AddFavouriteButton workspace={blockSuiteWorkspace} />
</CategoryDivider>
<FavoriteList workspace={blockSuiteWorkspace} />
<CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
<AddCollectionButton />
</CategoryDivider>
<CollectionsList workspace={blockSuiteWorkspace} info={userInfo} />
<CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
{/* fixme: remove the following spacer */}
<div style={{ height: '4px' }} />
<RouteMenuLinkItem
ref={trashDroppable.setNodeRef}
isDraggedOver={trashDroppable.isOver}
icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
currentPath={currentPath}
path={paths.trash(currentWorkspaceId)}
>
<span data-testid="trash-page">
{t['com.affine.workspaceSubPath.trash']()}
</span>
</RouteMenuLinkItem>
{blockSuiteWorkspace && (
<ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
)}
</SidebarScrollableContainer>
<SidebarContainer>
{environment.isDesktop && <AppUpdaterButton />}
<div style={{ height: '4px' }} />
<AddPageButton onClick={onClickNewPage} />
</SidebarContainer>
</AppSidebar>
</>
<SidebarScrollableContainer>
<CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
<AddFavouriteButton workspace={blockSuiteWorkspace} />
</CategoryDivider>
<FavoriteList workspace={blockSuiteWorkspace} />
<CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
<AddCollectionButton />
</CategoryDivider>
<CollectionsList workspace={blockSuiteWorkspace} info={userInfo} />
<CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
{/* fixme: remove the following spacer */}
<div style={{ height: '4px' }} />
<RouteMenuLinkItem
ref={trashDroppable.setNodeRef}
isDraggedOver={trashDroppable.isOver}
icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
currentPath={currentPath}
path={paths.trash(currentWorkspaceId)}
>
<span data-testid="trash-page">
{t['com.affine.workspaceSubPath.trash']()}
</span>
</RouteMenuLinkItem>
{blockSuiteWorkspace && (
<ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
)}
</SidebarScrollableContainer>
<SidebarContainer>
{environment.isDesktop && <AppUpdaterButton />}
<div style={{ height: '4px' }} />
<AddPageButton onClick={onClickNewPage} />
</SidebarContainer>
</AppSidebar>
);
};

6
packages/frontend/core/src/layouts/workspace-layout.tsx
View File

@ -34,7 +34,7 @@ import { loadPage } from '@toeverything/hooks/use-block-suite-workspace-page';
import { currentWorkspaceIdAtom } from '@toeverything/infra/atom';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { nanoid } from 'nanoid';
import type { PropsWithChildren, ReactElement } from 'react';
import type { PropsWithChildren, ReactNode } from 'react';
import { lazy, Suspense, useCallback, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Map as YMap } from 'yjs';
@ -101,7 +101,7 @@ const showList: IslandItemNames[] = environment.isDesktop
export const CurrentWorkspaceContext = ({
children,
}: PropsWithChildren): ReactElement => {
}: PropsWithChildren): ReactNode => {
const workspaceId = useAtomValue(currentWorkspaceIdAtom);
const metadata = useAtomValue(rootWorkspacesMetadataAtom);
const exist = metadata.find(m => m.id === workspaceId);
@ -114,7 +114,7 @@ export const CurrentWorkspaceContext = ({
if (!exist) {
return <WorkspaceFallback key="workspace-not-found" />;
}
return <>{children}</>;
return children;
};
type WorkspaceLayoutProps = {

46
packages/frontend/core/src/pages/workspace/all-page.tsx
View File

@ -108,30 +108,28 @@ const usePageOperationsRenderer = () => {
});
};
return (
<>
<OperationCell
favorite={!!page.favorite}
isPublic={!!page.isPublic}
onDisablePublicSharing={onDisablePublicSharing}
link={`/workspace/${currentWorkspace.id}/${page.id}`}
onRemoveToTrash={() =>
setTrashModal({
open: true,
pageIds: [page.id],
pageTitles: [page.title],
})
}
onToggleFavoritePage={() => {
const status = page.favorite;
toggleFavorite(page.id);
toast(
status
? t['com.affine.toastMessage.removedFavorites']()
: t['com.affine.toastMessage.addedFavorites']()
);
}}
/>
</>
<OperationCell
favorite={!!page.favorite}
isPublic={!!page.isPublic}
onDisablePublicSharing={onDisablePublicSharing}
link={`/workspace/${currentWorkspace.id}/${page.id}`}
onRemoveToTrash={() =>
setTrashModal({
open: true,
pageIds: [page.id],
pageTitles: [page.title],
})
}
onToggleFavoritePage={() => {
const status = page.favorite;
toggleFavorite(page.id);
toast(
status
? t['com.affine.toastMessage.removedFavorites']()
: t['com.affine.toastMessage.addedFavorites']()
);
}}
/>
);
},
[currentWorkspace.id, setTrashModal, t, toggleFavorite]

46
packages/frontend/core/src/pages/workspace/trash-page.tsx
View File

@ -59,31 +59,29 @@ export const TrashPage = () => {
[permanentlyDeletePage, restoreFromTrash, t]
);
return (
<>
<div className={styles.root}>
<WorkspaceHeader
currentWorkspaceId={currentWorkspace.id}
currentEntry={{
subPath: WorkspaceSubPath.TRASH,
}}
<div className={styles.root}>
<WorkspaceHeader
currentWorkspaceId={currentWorkspace.id}
currentEntry={{
subPath: WorkspaceSubPath.TRASH,
}}
/>
{filteredPageMetas.length > 0 ? (
<VirtualizedPageList
pages={filteredPageMetas}
rowAsLink
groupBy={false}
isPreferredEdgeless={isPreferredEdgeless}
blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
pageOperationsRenderer={pageOperationsRenderer}
/>
{filteredPageMetas.length > 0 ? (
<VirtualizedPageList
pages={filteredPageMetas}
rowAsLink
groupBy={false}
isPreferredEdgeless={isPreferredEdgeless}
blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
pageOperationsRenderer={pageOperationsRenderer}
/>
) : (
<EmptyPageList
type="trash"
blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
/>
)}
</div>
</>
) : (
<EmptyPageList
type="trash"
blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
/>
)}
</div>
);
};

0
packages/frontend/workspace/src/affine/worker.ts
View File

10
tests/storybook/src/stories/app-sidebar.stories.tsx
View File

@ -53,12 +53,10 @@ const Main = () => {
export const Default: StoryFn = () => {
return (
<>
<Container>
<AppSidebar />
<Main />
</Container>
</>
<Container>
<AppSidebar />
<Main />
</Container>
);
};

8
tests/storybook/src/stories/quick-search/quick-search-modal.stories.tsx
View File

@ -28,10 +28,8 @@ export const CMDKModalStory: StoryFn = () => {
export const CMDKPanelStory: StoryFn = () => {
const [query, setQuery] = useState('');
return (
<>
<CMDKModal open>
<CMDKContainer open query={query} onQueryChange={setQuery} />
</CMDKModal>
</>
<CMDKModal open>
<CMDKContainer open query={query} onQueryChange={setQuery} />
</CMDKModal>
);
};