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

fix(core): fix ui flashing (#7056)

Browse Source
This commit is contained in:
EYHN 2024-05-27 08:05:20 +00:00
parent 306cf2ae6f
commit b356ddbe6e
No known key found for this signature in database
GPG Key ID: 46C9E26A75AB276C
33 changed files with 545 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/common/infra/src/modules/workspace/entities/profile.ts
View File

@ -1,4 +1,5 @@
import { DebugLogger } from '@affine/debug';
import { isEqual } from 'lodash-es';
import { catchError, EMPTY, exhaustMap, mergeMap } from 'rxjs';
import { Entity } from '../../../framework';
@ -54,7 +55,10 @@ export class WorkspaceProfile extends Entity<{ metadata: WorkspaceMetadata }> {
providers.find(p => p.flavour === this.props.metadata.flavour) ?? null;
}
private setCache(info: WorkspaceProfileInfo) {
private setProfile(info: WorkspaceProfileInfo) {
if (isEqual(this.profile$.value, info)) {
return;
}
this.cache.setProfileCache(this.props.metadata.id, info);
}
@ -69,7 +73,7 @@ export class WorkspaceProfile extends Entity<{ metadata: WorkspaceMetadata }> {
).pipe(
mergeMap(info => {
if (info) {
this.setCache({ ...this.profile$.value, ...info });
this.setProfile({ ...this.profile$.value, ...info });
}
return EMPTY;
}),
@ -86,11 +90,11 @@ export class WorkspaceProfile extends Entity<{ metadata: WorkspaceMetadata }> {
syncWithWorkspace(workspace: Workspace) {
workspace.name$.subscribe(name => {
const old = this.profile$.value;
this.setCache({ ...old, name: name ?? old?.name });
this.setProfile({ ...old, name: name ?? old?.name });
});
workspace.avatar$.subscribe(avatar => {
const old = this.profile$.value;
this.setCache({ ...old, avatar: avatar ?? old?.avatar });
this.setProfile({ ...old, avatar: avatar ?? old?.avatar });
});
}
}

10
packages/frontend/component/src/components/card/workspace-card/index.tsx
View File

@ -1,3 +1,4 @@
import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
import { WorkspaceFlavour } from '@affine/env/workspace';
import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons';
@ -5,7 +6,7 @@ import type { WorkspaceMetadata } from '@toeverything/infra';
import clsx from 'clsx';
import { type MouseEvent, useCallback } from 'react';
import { Avatar, type AvatarProps } from '../../../ui/avatar';
import { type AvatarProps } from '../../../ui/avatar';
import { Button } from '../../../ui/button';
import { Skeleton } from '../../../ui/skeleton';
import * as styles from './styles.css';
@ -24,7 +25,6 @@ export interface WorkspaceCardProps {
isOwner?: boolean;
openingId?: string | null;
enableCloudText?: string;
avatar?: string;
name?: string;
}
@ -57,7 +57,6 @@ export const WorkspaceCard = ({
isOwner = true,
enableCloudText = 'Enable Cloud',
name,
avatar,
}: WorkspaceCardProps) => {
const isLocal = meta.flavour === WorkspaceFlavour.LOCAL;
const displayName = name ?? UNTITLED_WORKSPACE_NAME;
@ -78,11 +77,12 @@ export const WorkspaceCard = ({
onClick(meta);
}, [onClick, meta])}
>
<Avatar
<WorkspaceAvatar
key={meta.id}
meta={meta}
imageProps={avatarImageProps}
fallbackProps={avatarImageProps}
size={28}
url={avatar}
name={name}
colorfulFallback
/>

3
packages/frontend/component/src/components/resize-panel/resize-panel.css.ts
View File

@ -33,9 +33,6 @@ export const root = style({
'&[data-enable-animation="true"]': {
transition: `margin-left ${animationTimeout} .05s, margin-right ${animationTimeout} .05s, width ${animationTimeout} .05s`,
},
'&[data-is-floating="false"][data-transparent=true]': {
backgroundColor: 'transparent',
},
'&[data-transition-state="exited"]': {
// avoid focus on hidden panel
visibility: 'hidden',

11
packages/frontend/component/src/components/resize-panel/resize-panel.tsx
View File

@ -1,7 +1,14 @@
import { assertExists } from '@blocksuite/global/utils';
import { assignInlineVars } from '@vanilla-extract/dynamic';
import clsx from 'clsx';
import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
import {
forwardRef,
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
} from 'react';
import { useTransition } from 'react-transition-state';
import * as styles from './resize-panel.css';
@ -157,7 +164,7 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
const [{ status }, toggle] = useTransition({
timeout: animationTimeout,
});
useEffect(() => {
useLayoutEffect(() => {
toggle(open);
}, [open]);
return (

80
packages/frontend/component/src/components/workspace-avatar/index.tsx Normal file
View File

@ -0,0 +1,80 @@
import {
useLiveData,
useService,
type WorkspaceMetadata,
WorkspacesService,
} from '@toeverything/infra';
import { useEffect, useLayoutEffect, useState } from 'react';
import { Avatar, type AvatarProps } from '../../ui/avatar';
const cache = new Map<string, { imageBitmap: ImageBitmap; key: string }>();
/**
* workspace avatar component with automatic cache, and avoid flashing
*/
export const WorkspaceAvatar = ({
meta,
...otherProps
}: { meta: WorkspaceMetadata } & AvatarProps) => {
const workspacesService = useService(WorkspacesService);
const profile = workspacesService.getProfile(meta);
useEffect(() => {
profile.revalidate();
}, [meta, profile]);
const avatarKey = useLiveData(profile.profile$.map(v => v?.avatar));
const [downloadedAvatar, setDownloadedAvatar] = useState<
{ imageBitmap: ImageBitmap; key: string } | undefined
>(cache.get(meta.id));
useLayoutEffect(() => {
if (!avatarKey || !meta) {
setDownloadedAvatar(undefined);
return;
}
let canceled = false;
workspacesService
.getWorkspaceBlob(meta, avatarKey)
.then(async blob => {
if (blob && !canceled) {
const image = document.createElement('img');
const objectUrl = URL.createObjectURL(blob);
image.src = objectUrl;
await image.decode();
// limit the size of the image data to reduce memory usage
const hRatio = 128 / image.naturalWidth;
const vRatio = 128 / image.naturalHeight;
const ratio = Math.min(hRatio, vRatio);
const imageBitmap = await createImageBitmap(image, {
resizeWidth: image.naturalWidth * ratio,
resizeHeight: image.naturalHeight * ratio,
});
URL.revokeObjectURL(objectUrl);
setDownloadedAvatar(prev => {
if (prev?.key === avatarKey) {
return prev;
}
return { imageBitmap, key: avatarKey };
});
cache.set(meta.id, {
imageBitmap,
key: avatarKey,
});
}
})
.catch(err => {
console.error('get workspace blob error: ' + err);
});
return () => {
canceled = true;
};
}, [meta, workspacesService, avatarKey]);
return <Avatar image={downloadedAvatar?.imageBitmap} {...otherProps} />;
};

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

@ -18,9 +18,6 @@ export interface WorkspaceListProps {
useIsWorkspaceOwner: (
workspaceMetadata: WorkspaceMetadata
) => boolean | undefined;
useWorkspaceAvatar: (
workspaceMetadata: WorkspaceMetadata
) => string | undefined;
useWorkspaceName: (
workspaceMetadata: WorkspaceMetadata
) => string | undefined;
@ -34,7 +31,6 @@ const SortableWorkspaceItem = ({
item,
openingId,
useIsWorkspaceOwner,
useWorkspaceAvatar,
useWorkspaceName,
currentWorkspaceId,
onClick,
@ -42,7 +38,6 @@ const SortableWorkspaceItem = ({
onEnableCloudClick,
}: SortableWorkspaceItemProps) => {
const isOwner = useIsWorkspaceOwner?.(item);
const avatar = useWorkspaceAvatar?.(item);
const name = useWorkspaceName?.(item);
return (
<div className={workspaceItemStyle} data-testid="draggable-item">
@ -55,7 +50,6 @@ const SortableWorkspaceItem = ({
openingId={openingId}
isOwner={isOwner}
name={name}
avatar={avatar}
/>
</div>
);

118
packages/frontend/component/src/ui/avatar/avatar.tsx
View File

@ -17,7 +17,13 @@ import type {
MouseEvent,
ReactElement,
} from 'react';
import { forwardRef, useMemo, useState } from 'react';
import {
forwardRef,
useCallback,
useLayoutEffect,
useMemo,
useState,
} from 'react';
import { IconButton } from '../button';
import type { TooltipProps } from '../tooltip';
@ -29,6 +35,7 @@ import { blurVar, sizeVar } from './style.css';
export type AvatarProps = {
size?: number;
url?: string | null;
image?: ImageBitmap /* use pre-loaded image data can avoid flashing */;
name?: string;
className?: string;
style?: CSSProperties;
@ -39,18 +46,56 @@ export type AvatarProps = {
removeTooltipOptions?: Omit<TooltipProps, 'children'>;
fallbackProps?: AvatarFallbackProps;
imageProps?: Omit<AvatarImageProps, 'src'>;
imageProps?: Omit<
AvatarImageProps & React.HTMLProps<HTMLCanvasElement>,
'src' | 'ref'
>;
avatarProps?: RadixAvatarProps;
hoverWrapperProps?: HTMLAttributes<HTMLDivElement>;
removeButtonProps?: HTMLAttributes<HTMLButtonElement>;
} & HTMLAttributes<HTMLSpanElement>;
function drawImageFit(
img: ImageBitmap,
ctx: CanvasRenderingContext2D,
size: number
) {
const hRatio = size / img.width;
const vRatio = size / img.height;
const ratio = Math.max(hRatio, vRatio);
const centerShift_x = (size - img.width * ratio) / 2;
const centerShift_y = (size - img.height * ratio) / 2;
console.log(ctx.canvas);
ctx.canvas.dataset['drawed'] = 'true';
console.log(
'drawImageFit',
img.width,
img.height,
size,
ratio,
centerShift_x,
centerShift_y
);
ctx.drawImage(
img,
0,
0,
img.width,
img.height,
centerShift_x,
centerShift_y,
img.width * ratio,
img.height * ratio
);
}
export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
(
{
size = 20,
style: propsStyles = {},
url,
image,
name,
className,
colorfulFallback = false,
@ -76,18 +121,35 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
const firstCharOfName = useMemo(() => {
return name?.slice(0, 1) || 'A';
}, [name]);
const [imageDom, setImageDom] = useState<HTMLDivElement | null>(null);
const [containerDom, setContainerDom] = useState<HTMLDivElement | null>(
null
);
const [removeButtonDom, setRemoveButtonDom] =
useState<HTMLButtonElement | null>(null);
const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
useLayoutEffect(() => {
if (canvas && image) {
const ctx = canvas?.getContext('2d');
if (ctx) {
drawImageFit(image, ctx, size * window.devicePixelRatio);
}
}
return;
}, [canvas, image, size]);
const canvasRef = useCallback((node: HTMLCanvasElement | null) => {
setCanvas(node);
}, []);
return (
<AvatarRoot className={style.avatarRoot} {...avatarProps} ref={ref}>
<Tooltip
portalOptions={{ container: imageDom }}
portalOptions={{ container: containerDom }}
{...avatarTooltipOptions}
>
<div
ref={setImageDom}
ref={setContainerDom}
className={clsx(style.avatarWrapper, className)}
style={{
...assignInlineVars({
@ -98,24 +160,36 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
}}
{...props}
>
<AvatarImage
className={style.avatarImage}
src={url || ''}
alt={name}
{...imageProps}
/>
{image /* canvas mode */ ? (
<canvas
className={style.avatarImage}
ref={canvasRef}
width={size * window.devicePixelRatio}
height={size * window.devicePixelRatio}
{...imageProps}
/>
) : (
<AvatarImage
className={style.avatarImage}
src={url || ''}
alt={name}
{...imageProps}
/>
)}
<AvatarFallback
className={clsx(style.avatarFallback, fallbackClassName)}
delayMs={url ? 600 : undefined}
{...fallbackProps}
>
{colorfulFallback ? (
<ColorfulFallback char={firstCharOfName} />
) : (
firstCharOfName.toUpperCase()
)}
</AvatarFallback>
{!image /* no fallback on canvas mode */ && (
<AvatarFallback
className={clsx(style.avatarFallback, fallbackClassName)}
delayMs={url ? 600 : undefined}
{...fallbackProps}
>
{colorfulFallback ? (
<ColorfulFallback char={firstCharOfName} />
) : (
firstCharOfName.toUpperCase()
)}
</AvatarFallback>
)}
{hoverIcon ? (
<div
className={clsx(style.hoverWrapper, hoverWrapperClassName)}

17
packages/frontend/core/src/components/affine/app-container.tsx
View File

@ -1,6 +1,12 @@
import type { ReactElement } from 'react';
import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
import { AppSidebarFallback } from '../app-sidebar';
import type { WorkspaceRootProps } from '../workspace';
import { AppContainer as AppContainerWithoutSettings } from '../workspace';
import {
AppContainer as AppContainerWithoutSettings,
MainContainer,
} from '../workspace';
export const AppContainer = (props: WorkspaceRootProps) => {
const { appSettings } = useAppSettingHelper();
@ -17,3 +23,12 @@ export const AppContainer = (props: WorkspaceRootProps) => {
/>
);
};
export const AppFallback = (): ReactElement => {
return (
<AppContainer>
<AppSidebarFallback />
<MainContainer />
</AppContainer>
);
};

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

@ -4,7 +4,7 @@ import {
} from '@affine/component/setting-components';
import { Avatar } from '@affine/component/ui/avatar';
import { Tooltip } from '@affine/component/ui/tooltip';
import { useWorkspaceBlobObjectUrl } from '@affine/core/hooks/use-workspace-blob';
import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
import { AuthService } from '@affine/core/modules/cloud';
import { UserFeatureService } from '@affine/core/modules/cloud/services/user-feature';
@ -277,7 +277,6 @@ const WorkspaceListItem = ({
UserFeatureService,
});
const information = useWorkspaceInfo(meta);
const avatarUrl = useWorkspaceBlobObjectUrl(meta, information?.avatar);
const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
const currentWorkspace = workspaceService.workspace;
const isCurrent = currentWorkspace.id === meta.id;
@ -318,9 +317,10 @@ const WorkspaceListItem = ({
onClick={onClickPreference}
data-testid="workspace-list-item"
>
<Avatar
<WorkspaceAvatar
key={meta.id}
meta={meta}
size={16}
url={avatarUrl}
name={name}
colorfulFallback
style={{

15
packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/profile.tsx
View File

@ -1,9 +1,8 @@
import { FlexWrapper, Input, notify, Wrapper } from '@affine/component';
import { Avatar } from '@affine/component/ui/avatar';
import { Button } from '@affine/component/ui/button';
import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
import { Upload } from '@affine/core/components/pure/file-upload';
import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
import { useWorkspaceBlobObjectUrl } from '@affine/core/hooks/use-workspace-blob';
import { WorkspacePermissionService } from '@affine/core/modules/permissions';
import { validateAndReduceImage } from '@affine/core/utils/reduce-image';
import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
@ -28,18 +27,13 @@ export const ProfilePanel = () => {
}, [permissionService]);
const workspaceIsReady = useLiveData(workspace?.engine.rootDocState$)?.ready;
const [avatarBlob, setAvatarBlob] = useState<string | null>(null);
const [name, setName] = useState('');
const avatarUrl = useWorkspaceBlobObjectUrl(workspace?.meta, avatarBlob);
useEffect(() => {
if (workspace?.docCollection) {
setAvatarBlob(workspace.docCollection.meta.avatar ?? null);
setName(workspace.docCollection.meta.name ?? UNTITLED_WORKSPACE_NAME);
const dispose = workspace.docCollection.meta.commonFieldsUpdated.on(
() => {
setAvatarBlob(workspace.docCollection.meta.avatar ?? null);
setName(workspace.docCollection.meta.name ?? UNTITLED_WORKSPACE_NAME);
}
);
@ -47,7 +41,6 @@ export const ProfilePanel = () => {
dispose.dispose();
};
} else {
setAvatarBlob(null);
setName(UNTITLED_WORKSPACE_NAME);
}
return;
@ -139,7 +132,7 @@ export const ProfilePanel = () => {
[setWorkspaceAvatar]
);
const canAdjustAvatar = workspaceIsReady && avatarUrl && isOwner;
const canAdjustAvatar = workspaceIsReady && isOwner;
return (
<div className={style.profileWrapper}>
@ -149,9 +142,9 @@ export const ProfilePanel = () => {
data-testid="upload-avatar"
disabled={!isOwner}
>
<Avatar
<WorkspaceAvatar
meta={workspace.meta}
size={56}
url={avatarUrl}
name={name}
imageProps={avatarImageProps}
fallbackProps={avatarImageProps}

4
packages/frontend/core/src/components/app-sidebar/index.css.ts
View File

@ -4,7 +4,6 @@ export const floatingMaxWidth = 768;
export const navWrapperStyle = style({
zIndex: 3,
paddingBottom: '8px',
backgroundColor: cssVar('backgroundPrimaryColor'),
'@media': {
print: {
display: 'none',
@ -15,6 +14,9 @@ export const navWrapperStyle = style({
'&[data-has-border=true]': {
borderRight: `1px solid ${cssVar('borderColor')}`,
},
'&[data-is-floating="true"]': {
backgroundColor: cssVar('backgroundPrimaryColor'),
},
},
});
export const navHeaderButton = style({

7
packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
View File

@ -10,7 +10,7 @@ import {
WorkspacesService,
} from '@toeverything/infra';
import { useSetAtom } from 'jotai';
import { Suspense, useCallback, useEffect } from 'react';
import { Suspense, useCallback } from 'react';
import {
authAtom,
@ -130,11 +130,6 @@ const UserWithWorkspaceListInner = ({
const workspaceManager = useService(WorkspacesService);
const workspaces = useLiveData(workspaceManager.list.workspaces$);
// revalidate workspace list when mounted
useEffect(() => {
workspaceManager.list.revalidate();
}, [workspaceManager]);
return (
<div className={styles.workspaceListWrapper}>
{isAuthenticated ? (

17
packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx
View File

@ -3,7 +3,6 @@ import { Divider } from '@affine/component/ui/divider';
import { WorkspaceList } from '@affine/component/workspace-list';
import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
import {
useWorkspaceAvatar,
useWorkspaceInfo,
useWorkspaceName,
} from '@affine/core/hooks/use-workspace-info';
@ -76,7 +75,6 @@ const CloudWorkSpaceList = ({
onSettingClick={onClickWorkspaceSetting}
useIsWorkspaceOwner={useIsWorkspaceOwner}
useWorkspaceName={useWorkspaceName}
useWorkspaceAvatar={useWorkspaceAvatar}
/>
</div>
);
@ -115,7 +113,6 @@ const LocalWorkspaces = ({
onEnableCloudClick={onClickEnableCloud}
useIsWorkspaceOwner={useIsWorkspaceOwner}
useWorkspaceName={useWorkspaceName}
useWorkspaceAvatar={useWorkspaceAvatar}
/>
</div>
);
@ -186,8 +183,18 @@ export const AFFiNEWorkspaceList = ({
const onClickWorkspace = useCallback(
(workspaceMetadata: WorkspaceMetadata) => {
jumpToSubPath(workspaceMetadata.id, WorkspaceSubPath.ALL);
onEventEnd?.();
if (document.startViewTransition) {
document.startViewTransition(() => {
jumpToSubPath(workspaceMetadata.id, WorkspaceSubPath.ALL);
onEventEnd?.();
return new Promise(resolve =>
setTimeout(resolve, 150)
); /* start transition after 150ms */
});
} else {
jumpToSubPath(workspaceMetadata.id, WorkspaceSubPath.ALL);
onEventEnd?.();
}
},
[jumpToSubPath, onEventEnd]
);

14
packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
View File

@ -1,9 +1,9 @@
import { notify, Tooltip } from '@affine/component';
import { Avatar, type AvatarProps } from '@affine/component/ui/avatar';
import { type AvatarProps } from '@affine/component/ui/avatar';
import { Loading } from '@affine/component/ui/loading';
import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
import { openSettingModalAtom } from '@affine/core/atoms';
import { useDocEngineStatus } from '@affine/core/hooks/affine/use-doc-engine-status';
import { useWorkspaceBlobObjectUrl } from '@affine/core/hooks/use-workspace-blob';
import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
import { WorkspacePermissionService } from '@affine/core/modules/permissions';
import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
@ -284,11 +284,6 @@ export const WorkspaceCard = forwardRef<
const information = useWorkspaceInfo(currentWorkspace.meta);
const avatarUrl = useWorkspaceBlobObjectUrl(
currentWorkspace.meta,
information?.avatar
);
const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
return (
@ -301,12 +296,13 @@ export const WorkspaceCard = forwardRef<
ref={ref}
{...props}
>
<Avatar
<WorkspaceAvatar
key={currentWorkspace.id}
meta={currentWorkspace.meta}
imageProps={avatarImageProps}
fallbackProps={avatarImageProps}
data-testid="workspace-avatar"
size={32}
url={avatarUrl}
name={name}
colorfulFallback
/>

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

@ -13,7 +13,7 @@ import { useLiveData, useService } from '@toeverything/infra';
import { useAtomValue } from 'jotai';
import { nanoid } from 'nanoid';
import type { HTMLAttributes, ReactElement } from 'react';
import { forwardRef, useCallback, useEffect } from 'react';
import { forwardRef, memo, useCallback, useEffect } from 'react';
import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
@ -89,174 +89,177 @@ RouteMenuLinkItem.displayName = 'RouteMenuLinkItem';
*
* @todo(himself65): rewrite all styled component into @vanilla-extract/css
*/
export const RootAppSidebar = ({
currentWorkspace,
openPage,
createPage,
paths,
onOpenQuickSearchModal,
onOpenSettingModal,
}: RootAppSidebarProps): ReactElement => {
const currentWorkspaceId = currentWorkspace.id;
const { appSettings } = useAppSettingHelper();
const docCollection = currentWorkspace.docCollection;
const t = useAFFiNEI18N();
const currentPath = useLiveData(
useService(WorkbenchService).workbench.location$.map(
location => location.pathname
)
);
export const RootAppSidebar = memo(
({
currentWorkspace,
openPage,
createPage,
paths,
onOpenQuickSearchModal,
onOpenSettingModal,
}: RootAppSidebarProps): ReactElement => {
const currentWorkspaceId = currentWorkspace.id;
const { appSettings } = useAppSettingHelper();
const docCollection = currentWorkspace.docCollection;
const t = useAFFiNEI18N();
const currentPath = useLiveData(
useService(WorkbenchService).workbench.location$.map(
location => location.pathname
)
);
const allPageActive = currentPath === '/all';
const allPageActive = currentPath === '/all';
const trashActive = currentPath === '/trash';
const trashActive = currentPath === '/trash';
const onClickNewPage = useAsyncCallback(async () => {
const page = createPage();
page.load();
openPage(page.id);
mixpanel.track('DocCreated', {
page: allPageActive ? 'all' : trashActive ? 'trash' : 'other',
segment: 'navigation panel',
module: 'bottom button',
control: 'new doc button',
category: 'page',
type: 'doc',
const onClickNewPage = useAsyncCallback(async () => {
const page = createPage();
page.load();
openPage(page.id);
mixpanel.track('DocCreated', {
page: allPageActive ? 'all' : trashActive ? 'trash' : 'other',
segment: 'navigation panel',
module: 'bottom button',
control: 'new doc button',
category: 'page',
type: 'doc',
});
}, [allPageActive, createPage, openPage, trashActive]);
const { trashModal, setTrashModal, handleOnConfirm } =
useTrashModalHelper(docCollection);
const deletePageTitles = trashModal.pageTitles;
const trashConfirmOpen = trashModal.open;
const onTrashConfirmOpenChange = useCallback(
(open: boolean) => {
setTrashModal({
...trashModal,
open,
});
},
[trashModal, setTrashModal]
);
const navigateHelper = useNavigateHelper();
// Listen to the "New Page" action from the menu
useEffect(() => {
if (environment.isDesktop) {
return events?.applicationMenu.onNewPageAction(onClickNewPage);
}
return;
}, [onClickNewPage]);
const sidebarOpen = useAtomValue(appSidebarOpenAtom);
useEffect(() => {
if (environment.isDesktop) {
apis?.ui.handleSidebarVisibilityChange(sidebarOpen).catch(err => {
console.error(err);
});
}
}, [sidebarOpen]);
const dropItemId = getDNDId('sidebar-trash', 'container', 'trash');
const trashDroppable = useDroppable({
id: dropItemId,
});
}, [allPageActive, createPage, openPage, trashActive]);
const { trashModal, setTrashModal, handleOnConfirm } =
useTrashModalHelper(docCollection);
const deletePageTitles = trashModal.pageTitles;
const trashConfirmOpen = trashModal.open;
const onTrashConfirmOpenChange = useCallback(
(open: boolean) => {
setTrashModal({
...trashModal,
open,
});
},
[trashModal, setTrashModal]
);
const collection = useService(CollectionService);
const { node, open } = useEditCollectionName({
title: t['com.affine.editCollection.createCollection'](),
showTips: true,
});
const handleCreateCollection = useCallback(() => {
open('')
.then(name => {
const id = nanoid();
collection.addCollection(createEmptyCollection(id, { name }));
navigateHelper.jumpToCollection(docCollection.id, id);
})
.catch(err => {
console.error(err);
});
}, [docCollection.id, collection, navigateHelper, open]);
const navigateHelper = useNavigateHelper();
// Listen to the "New Page" action from the menu
useEffect(() => {
if (environment.isDesktop) {
return events?.applicationMenu.onNewPageAction(onClickNewPage);
}
return;
}, [onClickNewPage]);
const sidebarOpen = useAtomValue(appSidebarOpenAtom);
useEffect(() => {
if (environment.isDesktop) {
apis?.ui.handleSidebarVisibilityChange(sidebarOpen).catch(err => {
console.error(err);
});
}
}, [sidebarOpen]);
const dropItemId = getDNDId('sidebar-trash', 'container', 'trash');
const trashDroppable = useDroppable({
id: dropItemId,
});
const collection = useService(CollectionService);
const { node, open } = useEditCollectionName({
title: t['com.affine.editCollection.createCollection'](),
showTips: true,
});
const handleCreateCollection = useCallback(() => {
open('')
.then(name => {
const id = nanoid();
collection.addCollection(createEmptyCollection(id, { name }));
navigateHelper.jumpToCollection(docCollection.id, id);
})
.catch(err => {
console.error(err);
});
}, [docCollection.id, collection, navigateHelper, open]);
return (
<AppSidebar
clientBorder={appSettings.clientBorder}
translucentUI={appSettings.enableBlurBackground}
>
<MoveToTrash.ConfirmModal
open={trashConfirmOpen}
onConfirm={handleOnConfirm}
onOpenChange={onTrashConfirmOpenChange}
titles={deletePageTitles}
/>
<SidebarContainer>
<div className={workspaceAndUserWrapper}>
<div className={workspaceWrapper}>
<WorkspaceSelector />
return (
<AppSidebar
clientBorder={appSettings.clientBorder}
translucentUI={appSettings.enableBlurBackground}
>
<MoveToTrash.ConfirmModal
open={trashConfirmOpen}
onConfirm={handleOnConfirm}
onOpenChange={onTrashConfirmOpenChange}
titles={deletePageTitles}
/>
<SidebarContainer>
<div className={workspaceAndUserWrapper}>
<div className={workspaceWrapper}>
<WorkspaceSelector />
</div>
<UserInfo />
</div>
<UserInfo />
</div>
<QuickSearchInput
data-testid="slider-bar-quick-search-button"
onClick={onOpenQuickSearchModal}
/>
<RouteMenuLinkItem
icon={<FolderIcon />}
active={allPageActive}
path={paths.all(currentWorkspaceId)}
>
<span data-testid="all-pages">
{t['com.affine.workspaceSubPath.all']()}
</span>
</RouteMenuLinkItem>
<AppSidebarJournalButton
docCollection={currentWorkspace.docCollection}
/>
{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>
<SidebarScrollableContainer>
<FavoriteList docCollection={docCollection} />
<CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
<AddCollectionButton node={node} onClick={handleCreateCollection} />
</CategoryDivider>
<CollectionsList
docCollection={docCollection}
onCreate={handleCreateCollection}
/>
<CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
{/* fixme: remove the following spacer */}
<div style={{ height: '4px' }} />
<div style={{ padding: '0 8px' }}>
<QuickSearchInput
data-testid="slider-bar-quick-search-button"
onClick={onOpenQuickSearchModal}
/>
<RouteMenuLinkItem
ref={trashDroppable.setNodeRef}
icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
active={trashActive || trashDroppable.isOver}
path={paths.trash(currentWorkspaceId)}
icon={<FolderIcon />}
active={allPageActive}
path={paths.all(currentWorkspaceId)}
>
<span data-testid="trash-page">
{t['com.affine.workspaceSubPath.trash']()}
<span data-testid="all-pages">
{t['com.affine.workspaceSubPath.all']()}
</span>
</RouteMenuLinkItem>
<ImportPage docCollection={docCollection} />
</div>
</SidebarScrollableContainer>
<SidebarContainer>
{environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}
<div style={{ height: '4px' }} />
<AddPageButton onClick={onClickNewPage} />
</SidebarContainer>
</AppSidebar>
);
};
<AppSidebarJournalButton
docCollection={currentWorkspace.docCollection}
/>
{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>
<SidebarScrollableContainer>
<FavoriteList docCollection={docCollection} />
<CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
<AddCollectionButton node={node} onClick={handleCreateCollection} />
</CategoryDivider>
<CollectionsList
docCollection={docCollection}
onCreate={handleCreateCollection}
/>
<CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
{/* fixme: remove the following spacer */}
<div style={{ height: '4px' }} />
<div style={{ padding: '0 8px' }}>
<RouteMenuLinkItem
ref={trashDroppable.setNodeRef}
icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
active={trashActive || trashDroppable.isOver}
path={paths.trash(currentWorkspaceId)}
>
<span data-testid="trash-page">
{t['com.affine.workspaceSubPath.trash']()}
</span>
</RouteMenuLinkItem>
<ImportPage docCollection={docCollection} />
</div>
</SidebarScrollableContainer>
<SidebarContainer>
{environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}
<div style={{ height: '4px' }} />
<AddPageButton onClick={onClickNewPage} />
</SidebarContainer>
</AppSidebar>
);
}
);
RootAppSidebar.displayName = 'memo(RootAppSidebar)';

18
packages/frontend/core/src/components/workspace-selector/index.tsx
View File

@ -1,6 +1,7 @@
import { Menu } from '@affine/component';
import { useService, WorkspacesService } from '@toeverything/infra';
import { useAtom } from 'jotai';
import { Suspense, useCallback } from 'react';
import { useCallback, useEffect } from 'react';
import { openWorkspaceListModalAtom } from '../../atoms';
import { mixpanel } from '../../utils';
@ -21,16 +22,21 @@ export const WorkspaceSelector = () => {
setOpenUserWorkspaceList(true);
}, [setOpenUserWorkspaceList]);
const workspaceManager = useService(WorkspacesService);
// revalidate workspace list when open workspace list
useEffect(() => {
if (isUserWorkspaceListOpened) {
workspaceManager.list.revalidate();
}
}, [workspaceManager, isUserWorkspaceListOpened]);
return (
<Menu
rootOptions={{
open: isUserWorkspaceListOpened,
}}
items={
<Suspense>
<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
</Suspense>
}
items={<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />}
contentOptions={{
// hide trigger
sideOffset: -58,

11
packages/frontend/core/src/components/workspace/index.tsx
View File

@ -9,7 +9,7 @@ import { useAtomValue } from 'jotai';
import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
import { forwardRef } from 'react';
import { AppSidebarFallback, appSidebarOpenAtom } from '../app-sidebar';
import { appSidebarOpenAtom } from '../app-sidebar';
import { appStyle, mainContainerStyle, toolStyle } from './index.css';
export type WorkspaceRootProps = PropsWithChildren<{
@ -87,12 +87,3 @@ export const ToolContainer = (props: PropsWithChildren): ReactElement => {
</div>
);
};
export const WorkspaceFallback = (): ReactElement => {
return (
<AppContainer>
<AppSidebarFallback />
<MainContainer />
</AppContainer>
);
};

39
packages/frontend/core/src/hooks/use-workspace-blob.ts
View File

@ -1,39 +0,0 @@
import type { WorkspaceMetadata } from '@toeverything/infra';
import { useService, WorkspacesService } from '@toeverything/infra';
import { useEffect, useState } from 'react';
export function useWorkspaceBlobObjectUrl(
meta?: WorkspaceMetadata,
blobKey?: string | null
) {
const workspacesService = useService(WorkspacesService);
const [blob, setBlob] = useState<string | undefined>(undefined);
useEffect(() => {
setBlob(undefined);
if (!blobKey || !meta) {
return;
}
let canceled = false;
let objectUrl: string = '';
workspacesService
.getWorkspaceBlob(meta, blobKey)
.then(blob => {
if (blob && !canceled) {
objectUrl = URL.createObjectURL(blob);
setBlob(objectUrl);
}
})
.catch(err => {
console.error('get workspace blob error: ' + err);
});
return () => {
canceled = true;
URL.revokeObjectURL(objectUrl);
};
}, [meta, blobKey, workspacesService]);
return blob;
}

21
packages/frontend/core/src/hooks/use-workspace-info.ts
View File

@ -4,24 +4,16 @@ import {
useService,
WorkspacesService,
} from '@toeverything/infra';
import { useEffect, useState } from 'react';
import { useWorkspaceBlobObjectUrl } from './use-workspace-blob';
import { useEffect } from 'react';
export function useWorkspaceInfo(meta: WorkspaceMetadata) {
const workspacesService = useService(WorkspacesService);
const [profile, setProfile] = useState(() =>
workspacesService.getProfile(meta)
);
const profile = workspacesService.getProfile(meta);
useEffect(() => {
const profile = workspacesService.getProfile(meta);
profile.revalidate();
setProfile(profile);
}, [meta, workspacesService]);
}, [meta, profile]);
return useLiveData(profile.profile$);
}
@ -31,10 +23,3 @@ export function useWorkspaceName(meta: WorkspaceMetadata) {
return information?.name;
}
export function useWorkspaceAvatar(meta: WorkspaceMetadata) {
const information = useWorkspaceInfo(meta);
const avatar = useWorkspaceBlobObjectUrl(meta, information?.avatar);
return avatar;
}

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

@ -16,7 +16,7 @@ import {
} from '@toeverything/infra';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import type { PropsWithChildren, ReactNode } from 'react';
import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
import { lazy, useCallback, useEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import { Map as YMap } from 'yjs';
@ -24,14 +24,11 @@ import { openQuickSearchModalAtom, openSettingModalAtom } from '../atoms';
import { WorkspaceAIOnboarding } from '../components/affine/ai-onboarding';
import { AppContainer } from '../components/affine/app-container';
import { SyncAwareness } from '../components/affine/awareness';
import {
AppSidebarFallback,
appSidebarResizingAtom,
} from '../components/app-sidebar';
import { appSidebarResizingAtom } from '../components/app-sidebar';
import { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
import type { DraggableTitleCellData } from '../components/page-list';
import { RootAppSidebar } from '../components/root-app-sidebar';
import { MainContainer, WorkspaceFallback } from '../components/workspace';
import { MainContainer } from '../components/workspace';
import { WorkspaceUpgrade } from '../components/workspace-upgrade';
import { useAppSettingHelper } from '../hooks/affine/use-app-setting-helper';
import {
@ -93,15 +90,11 @@ export const WorkspaceLayout = function WorkspaceLayout({
return (
<SWRConfigProvider>
{/* load all workspaces is costly, do not block the whole UI */}
<Suspense>
<AllWorkspaceModals />
<CurrentWorkspaceModals />
</Suspense>
<Suspense fallback={<WorkspaceFallback />}>
<WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
{/* should show after workspace loaded */}
<WorkspaceAIOnboarding />
</Suspense>
<AllWorkspaceModals />
<CurrentWorkspaceModals />
<WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
{/* should show after workspace loaded */}
<WorkspaceAIOnboarding />
</SWRConfigProvider>
);
};
@ -177,11 +170,18 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
const resizing = useAtomValue(appSidebarResizingAtom);
const sensors = useSensors(
useSensor(MouseSensor, {
activationConstraint: {
distance: 10,
},
})
useSensor(
MouseSensor,
useMemo(
/* useMemo is necessary to avoid re-render */
() => ({
activationConstraint: {
distance: 10,
},
}),
[]
)
)
);
const { handleDragEnd } = useGlobalDNDHelper();
@ -192,27 +192,23 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
{/* This DndContext is used for drag page from all-pages list into a folder in sidebar */}
<DndContext sensors={sensors} onDragEnd={handleDragEnd}>
<AppContainer data-current-path={currentPath} resizing={resizing}>
<Suspense fallback={<AppSidebarFallback />}>
<RootAppSidebar
isPublicWorkspace={false}
onOpenQuickSearchModal={handleOpenQuickSearchModal}
onOpenSettingModal={handleOpenSettingModal}
currentWorkspace={currentWorkspace}
openPage={useCallback(
(pageId: string) => {
assertExists(currentWorkspace);
return openPage(currentWorkspace.id, pageId);
},
[currentWorkspace, openPage]
)}
createPage={handleCreatePage}
paths={pathGenerator}
/>
</Suspense>
<RootAppSidebar
isPublicWorkspace={false}
onOpenQuickSearchModal={handleOpenQuickSearchModal}
onOpenSettingModal={handleOpenSettingModal}
currentWorkspace={currentWorkspace}
openPage={useCallback(
(pageId: string) => {
assertExists(currentWorkspace);
return openPage(currentWorkspace.id, pageId);
},
[currentWorkspace, openPage]
)}
createPage={handleCreatePage}
paths={pathGenerator}
/>
<MainContainer clientBorder={appSettings.clientBorder}>
<Suspense>
{needUpgrade || upgrading ? <WorkspaceUpgrade /> : children}
</Suspense>
{needUpgrade || upgrading ? <WorkspaceUpgrade /> : children}
</MainContainer>
</AppContainer>
<GlobalDragOverlay />

11
packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx
View File

@ -16,7 +16,14 @@ import type {
PropsWithChildren,
RefObject,
} from 'react';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
memo,
useCallback,
useLayoutEffect,
useMemo,
useRef,
useState,
} from 'react';
import type { View } from '../../entities/view';
import { WorkbenchService } from '../../services/workbench';
@ -57,7 +64,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({
const isDragging = dndIsDragging || indicatorPressed;
const isActive = activeView === view;
useEffect(() => {
useLayoutEffect(() => {
if (ref.current) {
setSlots?.(slots => ({ ...slots, [view.id]: ref }));
}

19
packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx
View File

@ -15,7 +15,7 @@ import {
import { useService } from '@toeverything/infra';
import clsx from 'clsx';
import type { HTMLAttributes, RefObject } from 'react';
import { useCallback, useRef, useState } from 'react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import type { View } from '../../entities/view';
@ -52,11 +52,18 @@ export const SplitView = ({
const workbench = useService(WorkbenchService).workbench;
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
distance: 0,
},
})
useSensor(
PointerSensor,
useMemo(
/* avoid re-rendering */
() => ({
activationConstraint: {
distance: 0,
},
}),
[]
)
)
);
const onResizing = useCallback(

4
packages/frontend/core/src/modules/workbench/view/view-root.tsx
View File

@ -1,5 +1,5 @@
import { FrameworkScope, useLiveData } from '@toeverything/infra';
import { lazy as reactLazy, useEffect, useMemo } from 'react';
import { lazy as reactLazy, useLayoutEffect, useMemo } from 'react';
import {
createMemoryRouter,
RouterProvider,
@ -34,7 +34,7 @@ export const ViewRoot = ({ view }: { view: View }) => {
const location = useLiveData(view.location$);
useEffect(() => {
useLayoutEffect(() => {
viewRouter.navigate(location).catch(err => {
console.error('navigate error', err);
});

8
packages/frontend/core/src/modules/workbench/view/workbench-root.tsx
View File

@ -1,5 +1,5 @@
import { useLiveData, useService } from '@toeverything/infra';
import { useCallback, useEffect, useRef } from 'react';
import { memo, useCallback, useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
import type { View } from '../entities/view';
@ -14,7 +14,7 @@ const useAdapter = environment.isDesktop
? useBindWorkbenchToDesktopRouter
: useBindWorkbenchToBrowserRouter;
export const WorkbenchRoot = () => {
export const WorkbenchRoot = memo(() => {
const workbench = useService(WorkbenchService).workbench;
// for debugging
@ -50,7 +50,9 @@ export const WorkbenchRoot = () => {
onMove={onMove}
/>
);
};
});
WorkbenchRoot.displayName = 'memo(WorkbenchRoot)';
const WorkbenchView = ({ view, index }: { view: View; index: number }) => {
const workbench = useService(WorkbenchService).workbench;

10
packages/frontend/core/src/modules/workspace-engine/impls/cloud.ts
View File

@ -24,6 +24,7 @@ import {
type WorkspaceProfileInfo,
} from '@toeverything/infra';
import { effect, globalBlockSuiteSchema, Service } from '@toeverything/infra';
import { isEqual } from 'lodash-es';
import { nanoid } from 'nanoid';
import { EMPTY, map, mergeMap } from 'rxjs';
import { applyUpdate, encodeStateAsUpdate } from 'yjs';
@ -148,11 +149,16 @@ export class CloudWorkspaceFlavourProviderService
mergeMap(data => {
if (data) {
const { accountId, workspaces } = data;
const sorted = workspaces.sort((a, b) => {
return a.id.localeCompare(b.id);
});
this.globalState.set(
CLOUD_WORKSPACES_CACHE_KEY + accountId,
workspaces
sorted
);
this.workspaces$.next(workspaces);
if (!isEqual(this.workspaces$.value, sorted)) {
this.workspaces$.next(sorted);
}
} else {
this.workspaces$.next([]);
}

14
packages/frontend/core/src/modules/workspace-engine/impls/engine/blob-cloud.ts
View File

@ -22,13 +22,15 @@ export class CloudBlobStorage implements BlobStorage {
? key
: `/api/workspaces/${this.workspaceId}/blobs/${key}`;
return fetch(getBaseUrl() + suffix).then(async res => {
if (!res.ok) {
// status not in the range 200-299
return null;
return fetch(getBaseUrl() + suffix, { cache: 'default' }).then(
async res => {
if (!res.ok) {
// status not in the range 200-299
return null;
}
return bufferToBlob(await res.arrayBuffer());
}
return bufferToBlob(await res.arrayBuffer());
});
);
}
async set(key: string, value: Blob) {

13
packages/frontend/core/src/modules/workspace-engine/impls/local.ts
View File

@ -9,6 +9,7 @@ import type {
WorkspaceProfileInfo,
} from '@toeverything/infra';
import { globalBlockSuiteSchema, LiveData, Service } from '@toeverything/infra';
import { isEqual } from 'lodash-es';
import { nanoid } from 'nanoid';
import { Observable } from 'rxjs';
import { applyUpdate, encodeStateAsUpdate } from 'yjs';
@ -96,12 +97,14 @@ export class LocalWorkspaceFlavourProvider
}
workspaces$ = LiveData.from(
new Observable<WorkspaceMetadata[]>(subscriber => {
let last: WorkspaceMetadata[] | null = null;
const emit = () => {
subscriber.next(
JSON.parse(
localStorage.getItem(LOCAL_WORKSPACE_LOCAL_STORAGE_KEY) ?? '[]'
).map((id: string) => ({ id, flavour: WorkspaceFlavour.LOCAL }))
);
const value = JSON.parse(
localStorage.getItem(LOCAL_WORKSPACE_LOCAL_STORAGE_KEY) ?? '[]'
).map((id: string) => ({ id, flavour: WorkspaceFlavour.LOCAL }));
if (isEqual(last, value)) return;
subscriber.next(value);
last = value;
};
emit();

4
packages/frontend/core/src/pages/index.tsx
View File

@ -19,8 +19,8 @@ import {
buildShowcaseWorkspace,
createFirstAppData,
} from '../bootstrap/first-app-data';
import { AppFallback } from '../components/affine/app-container';
import { UserWithWorkspaceList } from '../components/pure/workspace-slider-bar/user-with-workspace-list';
import { WorkspaceFallback } from '../components/workspace';
import { useNavigateHelper } from '../hooks/use-navigate-helper';
import { AuthService } from '../modules/cloud';
import { WorkspaceSubPath } from '../shared';
@ -141,7 +141,7 @@ export const Component = () => {
}, [jumpToPage, openPage, workspacesService]);
if (navigating || creating) {
return <WorkspaceFallback></WorkspaceFallback>;
return <AppFallback></AppFallback>;
}
// TODO: We need a no workspace page

22
packages/frontend/core/src/pages/workspace/index.tsx
View File

@ -1,3 +1,4 @@
import { AppFallback } from '@affine/core/components/affine/app-container';
import { useWorkspace } from '@affine/core/hooks/use-workspace';
import { ZipTransformer } from '@blocksuite/blocks';
import type { Workspace } from '@toeverything/infra';
@ -9,11 +10,10 @@ import {
WorkspacesService,
} from '@toeverything/infra';
import type { ReactElement } from 'react';
import { Suspense, useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
import { AffineErrorBoundary } from '../../components/affine/affine-error-boundary';
import { WorkspaceFallback } from '../../components/workspace';
import { WorkspaceLayout } from '../../layouts/workspace-layout';
import { RightSidebarContainer } from '../../modules/right-sidebar';
import { WorkbenchRoot } from '../../modules/workbench';
@ -121,13 +121,13 @@ export const Component = (): ReactElement => {
return <PageNotFound noPermission />;
}
if (!workspace) {
return <WorkspaceFallback key="workspaceLoading" />;
return <AppFallback key="workspaceLoading" />;
}
if (!isRootDocReady) {
return (
<FrameworkScope scope={workspace.scope}>
<WorkspaceFallback key="workspaceLoading" />
<AppFallback key="workspaceLoading" />
<AllWorkspaceModals />
</FrameworkScope>
);
@ -135,14 +135,12 @@ export const Component = (): ReactElement => {
return (
<FrameworkScope scope={workspace.scope}>
<Suspense fallback={<WorkspaceFallback key="workspaceFallback" />}>
<AffineErrorBoundary height="100vh">
<WorkspaceLayout>
<WorkbenchRoot />
<RightSidebarContainer />
</WorkspaceLayout>
</AffineErrorBoundary>
</Suspense>
<AffineErrorBoundary height="100vh">
<WorkspaceLayout>
<WorkbenchRoot />
<RightSidebarContainer />
</WorkspaceLayout>
</AffineErrorBoundary>
</FrameworkScope>
);
};

4
packages/frontend/electron/renderer/app.tsx
View File

@ -4,7 +4,7 @@ import '@affine/component/theme/theme.css';
import { NotificationCenter } from '@affine/component';
import { AffineContext } from '@affine/component/context';
import { GlobalLoading } from '@affine/component/global-loading';
import { WorkspaceFallback } from '@affine/core/components/workspace';
import { AppFallback } from '@affine/core/components/affine/app-container';
import { configureCommonModules, configureImpls } from '@affine/core/modules';
import {
configureBrowserWorkspaceFlavours,
@ -108,7 +108,7 @@ export function App() {
<GlobalLoading />
<NotificationCenter />
<RouterProvider
fallbackElement={<WorkspaceFallback key="RouterFallback" />}
fallbackElement={<AppFallback key="RouterFallback" />}
router={router}
future={future}
/>

4
packages/frontend/web/src/app.tsx
View File

@ -4,7 +4,7 @@ import '@affine/component/theme/theme.css';
import { NotificationCenter } from '@affine/component';
import { AffineContext } from '@affine/component/context';
import { GlobalLoading } from '@affine/component/global-loading';
import { WorkspaceFallback } from '@affine/core/components/workspace';
import { AppFallback } from '@affine/core/components/affine/app-container';
import { configureCommonModules, configureImpls } from '@affine/core/modules';
import {
configureBrowserWorkspaceFlavours,
@ -97,7 +97,7 @@ export function App() {
<GlobalLoading />
<NotificationCenter />
<RouterProvider
fallbackElement={<WorkspaceFallback key="RouterFallback" />}
fallbackElement={<AppFallback key="RouterFallback" />}
router={router}
future={future}
/>

24
tests/affine-local/e2e/local-first-avatar.spec.ts
View File

@ -26,19 +26,29 @@ test('should create a page with a local first avatar and remove it', async ({
await page.getByTestId('current-workspace-label').click();
await page
.getByTestId('upload-avatar')
.setInputFiles(resolve(rootDir, 'tests', 'fixtures', 'smile.png'));
.setInputFiles(resolve(rootDir, 'tests', 'fixtures', 'blue.png'));
await page.mouse.click(0, 0);
await page.getByTestId('workspace-name').click();
await page.getByTestId('workspace-card').nth(0).click();
await page.waitForTimeout(1000);
await page.getByTestId('workspace-name').click();
await page.getByTestId('workspace-card').nth(1).click();
const blobUrl = await page
const avatarCanvas = await page
.getByTestId('workspace-avatar')
.locator('img')
.getAttribute('src');
// out user uploaded avatar
expect(blobUrl).toContain('blob:');
.locator('canvas')
.first()
.elementHandle();
const avatarPixelData = await page.evaluate(
({ avatarCanvas }) => {
return Array.from(
(avatarCanvas as HTMLCanvasElement)
.getContext('2d')!
.getImageData(1, 1, 1, 1).data // get pixel data of the avatar
);
},
{ avatarCanvas }
);
expect(avatarPixelData).toEqual([0, 0, 255, 255]); // blue color
// Click remove button to remove workspace avatar
await page.getByTestId('settings-modal-trigger').click();
@ -51,7 +61,7 @@ test('should create a page with a local first avatar and remove it', async ({
await page.getByTestId('workspace-card').nth(1).click();
const removedAvatarImage = await page
.getByTestId('workspace-avatar')
.locator('img')
.locator('canvas')
.count();
expect(removedAvatarImage).toBe(0);

BIN
tests/fixtures/blue.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 B