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

feat: new collections (#4530)

Browse Source 
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
This commit is contained in:
3720 2023-10-27 17:06:59 +08:00 committed by GitHub
parent 9fc0152cb1
commit ef8024c657
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
133 changed files with 8382 additions and 3743 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/common/env/src/filter.ts vendored
View File

@ -14,7 +14,9 @@ export type LiteralValue =
| number
| string
| boolean
| { [K: string]: LiteralValue }
| {
[K: string]: LiteralValue;
}
| Array<LiteralValue>;
export const refSchema: z.ZodType<Ref, z.ZodTypeDef> = z.object({
@ -48,15 +50,31 @@ export type Filter = z.input<typeof filterSchema>;
export const collectionSchema = z.object({
id: z.string(),
workspaceId: z.string(),
name: z.string(),
pinned: z.boolean().optional(),
mode: z.union([z.literal('page'), z.literal('rule')]),
filterList: z.array(filterSchema),
allowList: z.array(z.string()).optional(),
excludeList: z.array(z.string()).optional(),
allowList: z.array(z.string()),
// page id list
pages: z.array(z.string()),
});
export const deletedCollectionSchema = z.object({
userId: z.string().optional(),
userName: z.string(),
collection: collectionSchema,
});
export type DeprecatedCollection = {
id: string;
name: string;
workspaceId: string;
filterList: z.infer<typeof filterSchema>[];
allowList?: string[];
};
export type Collection = z.input<typeof collectionSchema>;
export type DeleteCollectionInfo = {
userId: string;
userName: string;
} | null;
export type DeletedCollection = z.input<typeof deletedCollectionSchema>;
export const tagSchema = z.object({
id: z.string(),

12
packages/common/env/src/workspace.ts vendored
View File

@ -8,10 +8,9 @@ import type {
import type { PropsWithChildren, ReactNode } from 'react';
import type { DataSourceAdapter } from 'y-provider';
import type { Collection } from './filter.js';
export enum WorkspaceSubPath {
ALL = 'all',
Collection = 'collection',
SETTING = 'setting',
TRASH = 'trash',
SHARED = 'shared',
@ -137,6 +136,7 @@ type UIBaseProps<_Flavour extends keyof WorkspaceRegistry> = {
export type WorkspaceHeaderProps<Flavour extends keyof WorkspaceRegistry> =
UIBaseProps<Flavour> & {
rightSlot?: ReactNode;
currentEntry:
| {
subPath: WorkspaceSubPath;
@ -167,20 +167,12 @@ type PageDetailProps<Flavour extends keyof WorkspaceRegistry> =
onLoadEditor: (page: Page, editor: EditorContainer) => () => void;
};
type PageListProps<_Flavour extends keyof WorkspaceRegistry> = {
blockSuiteWorkspace: BlockSuiteWorkspace;
onOpenPage: (pageId: string, newTab?: boolean) => void;
collection: Collection;
};
interface FC<P> {
(props: P): ReactNode;
}
export interface WorkspaceUISchema<Flavour extends keyof WorkspaceRegistry> {
Header: FC<WorkspaceHeaderProps<Flavour>>;
PageDetail: FC<PageDetailProps<Flavour>>;
PageList: FC<PageListProps<Flavour>>;
NewSettingsDetail: FC<NewSettingProps<Flavour>>;
Provider: FC<PropsWithChildren>;
LoginCard?: FC<object>;

3
packages/frontend/component/package.json
View File

@ -33,9 +33,11 @@
"@popperjs/core": "^2.11.8",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-toolbar": "^1.0.4",
"@toeverything/hooks": "workspace:*",
"@toeverything/infra": "workspace:*",
"@toeverything/theme": "^0.7.20",
@ -47,6 +49,7 @@
"jotai": "^2.4.3",
"lit": "^2.8.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lottie-react": "^2.4.0",
"lottie-web": "^5.12.2",
"nanoid": "^5.0.1",

5
packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.tsx
View File

@ -1,6 +1,6 @@
import * as ScrollArea from '@radix-ui/react-scroll-area';
import clsx from 'clsx';
import { type PropsWithChildren } from 'react';
import { type PropsWithChildren, useRef } from 'react';
import * as styles from './index.css';
import { useHasScrollTop } from './use-has-scroll-top';
@ -10,7 +10,8 @@ export function SidebarContainer({ children }: PropsWithChildren) {
}
export function SidebarScrollableContainer({ children }: PropsWithChildren) {
const [hasScrollTop, ref] = useHasScrollTop();
const ref = useRef<HTMLDivElement>(null);
const hasScrollTop = useHasScrollTop(ref);
return (
<ScrollArea.Root className={styles.scrollableContainerRoot}>
<div

17
packages/frontend/component/src/components/app-sidebar/sidebar-containers/use-has-scroll-top.tsx
View File

@ -1,11 +1,10 @@
import { useEffect, useRef, useState } from 'react';
import { type RefObject, useEffect, useState } from 'react';
export function useHasScrollTop() {
const ref = useRef<HTMLDivElement>(null);
export function useHasScrollTop(ref: RefObject<HTMLElement> | null) {
const [hasScrollTop, setHasScrollTop] = useState(false);
useEffect(() => {
if (!ref.current) {
if (!ref?.current) {
return;
}
@ -13,8 +12,10 @@ export function useHasScrollTop() {
function updateScrollTop() {
if (container) {
const hasScrollTop = container.scrollTop > 0;
setHasScrollTop(hasScrollTop);
setTimeout(() => {
const hasScrollTop = container.scrollTop > 0;
setHasScrollTop(hasScrollTop);
});
}
}
@ -23,7 +24,7 @@ export function useHasScrollTop() {
return () => {
container.removeEventListener('scroll', updateScrollTop);
};
}, []);
}, [ref]);
return [hasScrollTop, ref] as const;
return hasScrollTop;
}

3
packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts
View File

@ -2,13 +2,14 @@ import { style } from '@vanilla-extract/css';
export const sidebarSwitch = style({
opacity: 0,
width: 0,
display: 'none !important',
overflow: 'hidden',
pointerEvents: 'none',
transition: 'all .3s ease-in-out',
selectors: {
'&[data-show=true]': {
opacity: 1,
display: 'inline-flex !important',
width: '32px',
flexShrink: 0,
fontSize: '24px',

47
packages/frontend/component/src/components/page-list/__tests__/use-all-page-setting.spec.ts
View File

@ -6,25 +6,52 @@ import 'fake-indexeddb/auto';
import type { Collection } from '@affine/env/filter';
import { renderHook } from '@testing-library/react';
import { atom } from 'jotai';
import { atomWithObservable } from 'jotai/utils';
import { BehaviorSubject } from 'rxjs';
import { expect, test } from 'vitest';
import { createDefaultFilter, vars } from '../filter/vars';
import {
type CollectionsAtom,
type CollectionsCRUDAtom,
useCollectionManager,
} from '../use-collection-manager';
const defaultMeta = { tags: { options: [] } };
const baseAtom = atom<Collection[]>([]);
const mockAtom: CollectionsAtom = atom(
get => get(baseAtom),
async (_, set, update) => {
set(baseAtom, update);
const collectionsSubject = new BehaviorSubject<Collection[]>([]);
const baseAtom = atomWithObservable<Collection[]>(
() => {
return collectionsSubject;
},
{
initialValue: [],
}
);
const mockAtom: CollectionsCRUDAtom = atom(get => {
return {
collections: get(baseAtom),
addCollection: async (...collections) => {
const prev = collectionsSubject.value;
collectionsSubject.next([...collections, ...prev]);
},
deleteCollection: async (...ids) => {
const prev = collectionsSubject.value;
collectionsSubject.next(prev.filter(v => !ids.includes(v.id)));
},
updateCollection: async (id, updater) => {
const prev = collectionsSubject.value;
collectionsSubject.next(
prev.map(v => {
if (v.id === id) {
return updater(v);
}
return v;
})
);
},
};
});
test('useAllPageSetting', async () => {
const settingHook = renderHook(() => useCollectionManager(mockAtom));
const prevCollection = settingHook.result.current.currentCollection;
@ -32,7 +59,6 @@ test('useAllPageSetting', async () => {
await settingHook.result.current.updateCollection({
...settingHook.result.current.currentCollection,
filterList: [createDefaultFilter(vars[0], defaultMeta)],
workspaceId: 'test',
});
settingHook.rerender();
const nextCollection = settingHook.result.current.currentCollection;
@ -40,8 +66,7 @@ test('useAllPageSetting', async () => {
expect(nextCollection.filterList).toEqual([
createDefaultFilter(vars[0], defaultMeta),
]);
settingHook.result.current.backToAll();
await settingHook.result.current.saveCollection({
await settingHook.result.current.createCollection({
...settingHook.result.current.currentCollection,
id: '1',
});

321
packages/frontend/component/src/components/page-list/all-page.tsx
View File

@ -1,321 +0,0 @@
import { DEFAULT_SORT_KEY } from '@affine/env/constant';
import type { PropertiesMeta } from '@affine/env/filter';
import type { GetPageInfoById } from '@affine/env/page-info';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { ArrowDownBigIcon, ArrowUpBigIcon } from '@blocksuite/icons';
import { useMediaQuery, useTheme } from '@mui/material';
import type React from 'react';
import { type CSSProperties, useMemo } from 'react';
import {
ScrollableContainer,
Table,
TableBody,
TableCell,
TableHead,
TableHeadRow,
} from '../..';
import { TableBodyRow } from '../../ui/table';
import { useHasScrollTop } from '../app-sidebar/sidebar-containers/use-has-scroll-top';
import { AllPagesBody } from './all-pages-body';
import { NewPageButton } from './components/new-page-buttton';
import { TitleCell } from './components/title-cell';
import { AllPageListMobileView, TrashListMobileView } from './mobile';
import { TrashOperationCell } from './operation-cell';
import { StyledTableContainer } from './styles';
import type { ListData, PageListProps, TrashListData } from './type';
import type { CollectionsAtom } from './use-collection-manager';
import { useSorter } from './use-sorter';
import { formatDate, useIsSmallDevices } from './utils';
import { CollectionBar } from './view/collection-bar';
interface AllPagesHeadProps {
isPublicWorkspace: boolean;
sorter: ReturnType<typeof useSorter<ListData>>;
createNewPage: () => void;
createNewEdgeless: () => void;
importFile: () => void;
getPageInfo: GetPageInfoById;
propertiesMeta: PropertiesMeta;
collectionsAtom: CollectionsAtom;
}
const AllPagesHead = ({
isPublicWorkspace,
sorter,
createNewPage,
createNewEdgeless,
importFile,
getPageInfo,
propertiesMeta,
collectionsAtom,
}: AllPagesHeadProps) => {
const t = useAFFiNEI18N();
const titleList = useMemo(
() => [
{
key: 'title',
content: t['Title'](),
proportion: 0.5,
},
{
key: 'tags',
content: t['Tags'](),
proportion: 0.2,
},
{
key: 'createDate',
content: t['Created'](),
proportion: 0.1,
tableCellStyle: {
width: '110px',
} satisfies CSSProperties,
},
{
key: 'updatedDate',
content: t['Updated'](),
proportion: 0.1,
tableCellStyle: {
width: '110px',
} satisfies CSSProperties,
},
{
key: 'unsortable_action',
content: (
<NewPageButton
createNewPage={createNewPage}
createNewEdgeless={createNewEdgeless}
importFile={importFile}
/>
),
showWhen: () => !isPublicWorkspace,
sortable: false,
tableCellStyle: {
width: '140px',
} satisfies CSSProperties,
styles: {
justifyContent: 'flex-end',
} satisfies CSSProperties,
},
],
[createNewEdgeless, createNewPage, importFile, isPublicWorkspace, t]
);
const tableItem = useMemo(
() =>
titleList
.filter(({ showWhen = () => true }) => showWhen())
.map(
({
key,
content,
proportion,
sortable = true,
styles,
tableCellStyle,
}) => (
<TableCell
key={key}
proportion={proportion}
active={sorter.key === key}
style={tableCellStyle}
onClick={
sortable
? () => sorter.shiftOrder(key as keyof ListData)
: undefined
}
>
<div
style={{
display: 'flex',
alignItems: 'center',
...styles,
}}
>
{content}
{sorter.key === key &&
(sorter.order === 'asc' ? (
<ArrowUpBigIcon width={24} height={24} />
) : (
<ArrowDownBigIcon width={24} height={24} />
))}
</div>
</TableCell>
)
),
[sorter, titleList]
);
return (
<TableHead>
<TableHeadRow>{tableItem}</TableHeadRow>
<CollectionBar
columnsCount={titleList.length}
getPageInfo={getPageInfo}
propertiesMeta={propertiesMeta}
collectionsAtom={collectionsAtom}
/>
</TableHead>
);
};
export const PageList = ({
isPublicWorkspace = false,
collectionsAtom,
list,
onCreateNewPage,
onCreateNewEdgeless,
onImportFile,
fallback,
getPageInfo,
propertiesMeta,
}: PageListProps) => {
const sorter = useSorter<ListData>({
data: list,
key: DEFAULT_SORT_KEY,
order: 'desc',
});
const [hasScrollTop, ref] = useHasScrollTop();
const isSmallDevices = useIsSmallDevices();
if (isSmallDevices) {
return (
<ScrollableContainer inTableView>
<AllPageListMobileView
isPublicWorkspace={isPublicWorkspace}
createNewPage={onCreateNewPage}
createNewEdgeless={onCreateNewEdgeless}
importFile={onImportFile}
list={sorter.data}
/>
</ScrollableContainer>
);
}
const groupKey =
sorter.key === 'createDate' || sorter.key === 'updatedDate'
? sorter.key
: // default sort
!sorter.key
? DEFAULT_SORT_KEY
: undefined;
return sorter.data.length === 0 && fallback ? (
<StyledTableContainer>{fallback}</StyledTableContainer>
) : (
<ScrollableContainer inTableView>
<StyledTableContainer ref={ref}>
<Table showBorder={hasScrollTop} style={{ maxHeight: '100%' }}>
<AllPagesHead
collectionsAtom={collectionsAtom}
propertiesMeta={propertiesMeta}
isPublicWorkspace={isPublicWorkspace}
sorter={sorter}
createNewPage={onCreateNewPage}
createNewEdgeless={onCreateNewEdgeless}
importFile={onImportFile}
getPageInfo={getPageInfo}
/>
<AllPagesBody
isPublicWorkspace={isPublicWorkspace}
groupKey={groupKey}
data={sorter.data}
/>
</Table>
</StyledTableContainer>
</ScrollableContainer>
);
};
const TrashListHead = () => {
const t = useAFFiNEI18N();
return (
<TableHead>
<TableHeadRow>
<TableCell proportion={0.5}>{t['Title']()}</TableCell>
<TableCell proportion={0.2}>{t['Created']()}</TableCell>
<TableCell proportion={0.2}>{t['Moved to Trash']()}</TableCell>
<TableCell proportion={0.1}></TableCell>
</TableHeadRow>
</TableHead>
);
};
interface PageListTrashViewProps {
list: TrashListData[];
fallback?: React.ReactNode;
}
export const PageListTrashView = ({
list,
fallback,
}: PageListTrashViewProps) => {
const t = useAFFiNEI18N();
const theme = useTheme();
const [hasScrollTop, ref] = useHasScrollTop();
const isSmallDevices = useMediaQuery(theme.breakpoints.down('sm'));
if (isSmallDevices) {
const mobileList = list.map(({ pageId, icon, title, onClickPage }) => ({
title,
icon,
pageId,
onClickPage,
}));
return <TrashListMobileView list={mobileList} />;
}
const ListItems = list.map(
(
{
pageId,
title,
preview,
icon,
createDate,
trashDate,
onClickPage,
onPermanentlyDeletePage,
onRestorePage,
},
index
) => {
return (
<TableBodyRow
data-testid={`page-list-item-${pageId}`}
key={`${pageId}-${index}`}
>
<TitleCell
icon={icon}
text={title || t['Untitled']()}
desc={preview}
onClick={onClickPage}
/>
<TableCell onClick={onClickPage}>{formatDate(createDate)}</TableCell>
<TableCell onClick={onClickPage}>
{trashDate ? formatDate(trashDate) : '--'}
</TableCell>
<TableCell
style={{ padding: 0 }}
data-testid={`more-actions-${pageId}`}
>
<TrashOperationCell
onPermanentlyDeletePage={onPermanentlyDeletePage}
onRestorePage={onRestorePage}
onOpenPage={onClickPage}
/>
</TableCell>
</TableBodyRow>
);
}
);
return list.length === 0 && fallback ? (
<StyledTableContainer>{fallback}</StyledTableContainer>
) : (
<ScrollableContainer inTableView>
<StyledTableContainer ref={ref}>
<Table showBorder={hasScrollTop}>
<TrashListHead />
<TableBody>{ListItems}</TableBody>
</Table>
</StyledTableContainer>
</ScrollableContainer>
);
};

188
packages/frontend/component/src/components/page-list/all-pages-body.tsx
View File

@ -1,188 +0,0 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { useDraggable } from '@dnd-kit/core';
import type { ReactNode } from 'react';
import { Fragment } from 'react';
import { styled } from '../../styles';
import { TableBody, TableCell } from '../../ui/table';
import { FavoriteTag } from './components/favorite-tag';
import { Tags } from './components/tags';
import { TitleCell } from './components/title-cell';
import { OperationCell } from './operation-cell';
import { StyledTableBodyRow } from './styles';
import type { DateKey, DraggableTitleCellData, ListData } from './type';
import { useDateGroup } from './use-date-group';
import { formatDate, useIsSmallDevices } from './utils';
export const GroupRow = ({ children }: { children: ReactNode }) => {
return (
<StyledTableBodyRow>
<TableCell
style={{
color: 'var(--affine-text-secondary-color)',
fontSize: 'var(--affine-font-sm)',
background: 'initial',
cursor: 'default',
}}
>
{children}
</TableCell>
</StyledTableBodyRow>
);
};
export const AllPagesBody = ({
isPublicWorkspace,
data,
groupKey,
}: {
isPublicWorkspace: boolean;
data: ListData[];
groupKey?: DateKey;
}) => {
const t = useAFFiNEI18N();
const isSmallDevices = useIsSmallDevices();
const dataWithGroup = useDateGroup({ data, key: groupKey });
return (
<TableBody style={{ overflowY: 'auto', height: '100%' }}>
{dataWithGroup.map(
(
{
groupName,
pageId,
title,
preview,
tags,
icon,
isPublicPage,
favorite,
createDate,
updatedDate,
onClickPage,
bookmarkPage,
onOpenPageInNewTab,
removeToTrash,
onDisablePublicSharing,
},
index
) => {
const displayTitle = title || t['Untitled']();
return (
<Fragment key={pageId}>
{groupName &&
(index === 0 ||
dataWithGroup[index - 1].groupName !== groupName) && (
<GroupRow>{groupName}</GroupRow>
)}
<StyledTableBodyRow data-testid={`page-list-item-${pageId}`}>
<DraggableTitleCell
pageId={pageId}
draggableData={{
pageId,
pageTitle: displayTitle,
icon,
}}
icon={icon}
text={displayTitle}
desc={preview}
data-testid="title"
onClick={onClickPage}
/>
<TableCell
data-testid="tags"
hidden={isSmallDevices}
onClick={onClickPage}
style={{ fontSize: 'var(--affine-font-xs)' }}
>
<Tags value={tags}></Tags>
</TableCell>
<TableCell
data-testid="created-date"
ellipsis={true}
hidden={isSmallDevices}
onClick={onClickPage}
style={{ fontSize: 'var(--affine-font-xs)' }}
>
{formatDate(createDate)}
</TableCell>
<TableCell
data-testid="updated-date"
ellipsis={true}
hidden={isSmallDevices}
onClick={onClickPage}
style={{ fontSize: 'var(--affine-font-xs)' }}
>
{formatDate(updatedDate ?? createDate)}
</TableCell>
{!isPublicWorkspace && (
<TableCell
style={{
padding: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '10px',
}}
data-testid={`more-actions-${pageId}`}
>
<FavoriteTag
className={favorite ? '' : 'favorite-button'}
onClick={bookmarkPage}
active={!!favorite}
/>
<OperationCell
favorite={favorite}
isPublic={isPublicPage}
onOpenPageInNewTab={onOpenPageInNewTab}
onToggleFavoritePage={bookmarkPage}
onRemoveToTrash={removeToTrash}
onDisablePublicSharing={onDisablePublicSharing}
/>
</TableCell>
)}
</StyledTableBodyRow>
</Fragment>
);
}
)}
</TableBody>
);
};
const FullSizeButton = styled('button')(() => ({
width: '100%',
height: '100%',
display: 'block',
}));
type DraggableTitleCellProps = {
pageId: string;
draggableData?: DraggableTitleCellData;
} & React.ComponentProps<typeof TitleCell>;
function DraggableTitleCell({
pageId,
draggableData,
...props
}: DraggableTitleCellProps) {
const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
id: 'page-list-item-title-' + pageId,
data: draggableData,
});
return (
<TitleCell
ref={setNodeRef}
style={{ opacity: isDragging ? 0.5 : 1 }}
{...props}
>
{/* Use `button` for draggable element */}
{/* See https://docs.dndkit.com/api-documentation/draggable/usedraggable#role */}
{element => (
<FullSizeButton {...listeners} {...attributes}>
{element}
</FullSizeButton>
)}
</TitleCell>
);
}

58
packages/frontend/component/src/components/page-list/components/dropdown.css.ts
View File

@ -1,58 +0,0 @@
import { style } from '@vanilla-extract/css';
export const divider = style({
width: '0.5px',
height: '16px',
background: 'var(--affine-divider-color)',
// fix dropdown button click area
margin: '0 4px',
marginRight: 0,
});
export const dropdownWrapper = style({
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
paddingLeft: '4px',
paddingRight: '10px',
});
export const dropdownIcon = style({
borderRadius: '4px',
selectors: {
[`${dropdownWrapper}:hover &`]: {
background: 'var(--affine-hover-color)',
},
},
});
export const dropdownBtn = style({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: '0 10px',
// fix dropdown button click area
paddingRight: 0,
color: 'var(--affine-text-primary-color)',
fontWeight: 600,
background: 'var(--affine-button-gray-color)',
boxShadow: 'var(--affine-float-button-shadow)',
borderRadius: '8px',
fontSize: 'var(--affine-font-sm)',
// width: '100%',
height: '32px',
userSelect: 'none',
whiteSpace: 'nowrap',
cursor: 'pointer',
selectors: {
'&:hover': {
background: 'var(--affine-hover-color-filled)',
},
},
});
export const menuContent = style({
backgroundColor: 'var(--affine-background-overlay-panel-color)',
});

36
packages/frontend/component/src/components/page-list/components/dropdown.tsx
View File

@ -1,36 +0,0 @@
import { ArrowDownSmallIcon } from '@blocksuite/icons';
import {
type ButtonHTMLAttributes,
forwardRef,
type MouseEventHandler,
} from 'react';
import * as styles from './dropdown.css';
type DropdownButtonProps = {
onClickDropDown?: MouseEventHandler<HTMLElement>;
} & ButtonHTMLAttributes<HTMLButtonElement>;
export const DropdownButton = forwardRef<
HTMLButtonElement,
DropdownButtonProps
>(({ onClickDropDown, children, ...props }, ref) => {
const handleClickDropDown: MouseEventHandler<HTMLElement> = e => {
e.stopPropagation();
onClickDropDown?.(e);
};
return (
<button ref={ref} className={styles.dropdownBtn} {...props}>
<span>{children}</span>
<span className={styles.divider} />
<span className={styles.dropdownWrapper} onClick={handleClickDropDown}>
<ArrowDownSmallIcon
className={styles.dropdownIcon}
width={16}
height={16}
/>
</span>
</button>
);
});
DropdownButton.displayName = 'DropdownButton';

1
packages/frontend/component/src/components/page-list/components/favorite-tag.tsx
View File

@ -21,6 +21,7 @@ export const FavoriteTag = forwardRef<
const handleClick = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
e.preventDefault();
onClick?.(e);
setPlayAnimation(!active);
},

136
packages/frontend/component/src/components/page-list/components/floating-toobar.tsx Normal file
View File

@ -0,0 +1,136 @@
import * as Popover from '@radix-ui/react-popover';
import * as Toolbar from '@radix-ui/react-toolbar';
import clsx from 'clsx';
import {
type CSSProperties,
type MouseEventHandler,
type PropsWithChildren,
type ReactNode,
useEffect,
useRef,
} from 'react';
import * as styles from './floating-toolbar.css';
interface FloatingToolbarProps {
className?: string;
style?: CSSProperties;
open?: boolean;
// if dbclick outside of the panel, close the toolbar
onOpenChange?: (open: boolean) => void;
}
interface FloatingToolbarButtonProps {
icon: ReactNode;
onClick: MouseEventHandler;
type?: 'danger' | 'default';
label?: ReactNode;
className?: string;
style?: CSSProperties;
}
interface FloatingToolbarItemProps {}
export function FloatingToolbar({
children,
style,
className,
open,
onOpenChange,
}: PropsWithChildren<FloatingToolbarProps>) {
const contentRef = useRef<HTMLDivElement>(null);
const animatingRef = useRef(false);
// todo: move dbclick / esc to close to page list instead
useEffect(() => {
animatingRef.current = true;
const timer = setTimeout(() => {
animatingRef.current = false;
}, 200);
if (open) {
// when dbclick outside of the panel or typing ESC, close the toolbar
const dbcHandler = (e: MouseEvent) => {
if (
!contentRef.current?.contains(e.target as Node) &&
!animatingRef.current
) {
// close the toolbar
onOpenChange?.(false);
}
};
const escHandler = (e: KeyboardEvent) => {
if (e.key === 'Escape' && !animatingRef.current) {
onOpenChange?.(false);
}
};
document.addEventListener('dblclick', dbcHandler);
document.addEventListener('keydown', escHandler);
return () => {
clearTimeout(timer);
document.removeEventListener('dblclick', dbcHandler);
document.removeEventListener('keydown', escHandler);
};
}
return () => {
clearTimeout(timer);
};
}, [onOpenChange, open]);
return (
<Popover.Root open={open}>
{/* Having Anchor here to let Popover to calculate the position of the place it is being used */}
<Popover.Anchor className={className} style={style} />
<Popover.Portal>
{/* always pop up on top for now */}
<Popover.Content side="top" className={styles.popoverContent}>
<Toolbar.Root ref={contentRef} className={clsx(styles.root)}>
{children}
</Toolbar.Root>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
}
// freestyle item that allows user to do anything
export function FloatingToolbarItem({
children,
}: PropsWithChildren<FloatingToolbarItemProps>) {
return <div className={styles.item}>{children}</div>;
}
// a typical button that has icon and label
export function FloatingToolbarButton({
icon,
type,
onClick,
className,
style,
label,
}: FloatingToolbarButtonProps) {
return (
<Toolbar.Button
onClick={onClick}
className={clsx(
styles.button,
type === 'danger' && styles.danger,
className
)}
style={style}
>
<div className={styles.buttonIcon}>{icon}</div>
{label}
</Toolbar.Button>
);
}
export function FloatingToolbarSeparator() {
return <Toolbar.Separator className={styles.separator} />;
}
FloatingToolbar.Item = FloatingToolbarItem;
FloatingToolbar.Separator = FloatingToolbarSeparator;
FloatingToolbar.Button = FloatingToolbarButton;

93
packages/frontend/component/src/components/page-list/components/floating-toolbar.css.ts Normal file
View File

@ -0,0 +1,93 @@
import { keyframes, style } from '@vanilla-extract/css';
const slideDownAndFade = keyframes({
'0%': {
opacity: 0,
transform: 'scale(0.95) translateY(20px)',
},
'100%': {
opacity: 1,
transform: 'scale(1) translateY(0)',
},
});
const slideUpAndFade = keyframes({
'0%': {
opacity: 1,
transform: 'scale(1) translateY(0)',
},
'100%': {
opacity: 0,
transform: 'scale(0.95) translateY(20px)',
},
});
export const root = style({
display: 'flex',
alignItems: 'center',
borderRadius: '10px',
padding: '4px',
border: '1px solid var(--affine-border-color)',
boxShadow: 'var(--affine-menu-shadow)',
gap: 4,
minWidth: 'max-content',
width: 'fit-content',
background: 'var(--affine-background-primary-color)',
});
export const popoverContent = style({
willChange: 'transform opacity',
selectors: {
'&[data-state="open"]': {
animation: `${slideDownAndFade} 0.2s ease-in-out`,
},
'&[data-state="closed"]': {
animation: `${slideUpAndFade} 0.2s ease-in-out`,
},
},
});
export const separator = style({
width: '1px',
height: '24px',
background: 'var(--affine-divider-color)',
});
export const item = style({
display: 'flex',
alignItems: 'center',
color: 'inherit',
gap: 4,
height: '32px',
padding: '0 6px',
});
export const button = style([
item,
{
borderRadius: '8px',
':hover': {
background: 'var(--affine-hover-color)',
},
},
]);
export const danger = style({
color: 'inherit',
':hover': {
background: 'var(--affine-background-error-color)',
color: 'var(--affine-error-color)',
},
});
export const buttonIcon = style({
display: 'flex',
alignItems: 'center',
fontSize: 20,
color: 'var(--affine-icon-color)',
selectors: {
[`${danger}:hover &`]: {
color: 'var(--affine-error-color)',
},
},
});

5
packages/frontend/component/src/components/page-list/components/new-page-button.css.ts Normal file
View File

@ -0,0 +1,5 @@
import { style } from '@vanilla-extract/css';
export const menuContent = style({
backgroundColor: 'var(--affine-background-overlay-panel-color)',
});

16
packages/frontend/component/src/components/page-list/components/new-page-buttton.tsx
View File

@ -1,16 +1,17 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { EdgelessIcon, ImportIcon, PageIcon } from '@blocksuite/icons';
import { Menu } from '@toeverything/components/menu';
import { useCallback, useState } from 'react';
import { type PropsWithChildren, useCallback, useState } from 'react';
import { DropdownButton } from '../../../ui/button';
import { BlockCard } from '../../card/block-card';
import { DropdownButton } from './dropdown';
import { menuContent } from './dropdown.css';
import { menuContent } from './new-page-button.css';
type NewPageButtonProps = {
createNewPage: () => void;
createNewEdgeless: () => void;
importFile: () => void;
size?: 'small' | 'default';
};
export const CreateNewPagePopup = ({
@ -58,8 +59,9 @@ export const NewPageButton = ({
createNewPage,
createNewEdgeless,
importFile,
}: NewPageButtonProps) => {
const t = useAFFiNEI18N();
size,
children,
}: PropsWithChildren<NewPageButtonProps>) => {
const [open, setOpen] = useState(false);
return (
<Menu
@ -92,13 +94,15 @@ export const NewPageButton = ({
}}
>
<DropdownButton
size={size}
data-testid="new-page-button"
onClick={useCallback(() => {
createNewPage();
setOpen(false);
}, [createNewPage])}
onClickDropDown={useCallback(() => setOpen(open => !open), [])}
>
{t['New Page']()}
{children}
</DropdownButton>
</Menu>
);

30
packages/frontend/component/src/components/page-list/components/tags.css.ts
View File

@ -1,30 +0,0 @@
import { style } from '@vanilla-extract/css';
export const tagList = style({
display: 'flex',
flexWrap: 'nowrap',
gap: 10,
overflow: 'hidden',
});
export const tagListFull = style({
display: 'flex',
flexWrap: 'wrap',
gap: 10,
maxWidth: 300,
padding: 10,
overflow: 'hidden',
});
export const tag = style({
flexShrink: 0,
padding: '2px 10px',
borderRadius: 6,
fontSize: 12,
lineHeight: '16px',
fontWeight: 400,
maxWidth: '100%',
color: 'var(--affine-text-primary-color)',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
});

24
packages/frontend/component/src/components/page-list/components/tags.tsx
View File

@ -1,24 +0,0 @@
import type { Tag } from '@affine/env/filter';
import { Menu } from '@toeverything/components/menu';
import * as styles from './tags.css';
// fixme: This component should use popover instead of menu
export const Tags = ({ value }: { value: Tag[] }) => {
const list = value.map(tag => {
return (
<div
key={tag.id}
className={styles.tag}
style={{ backgroundColor: tag.color }}
>
{tag.value}
</div>
);
});
return (
<Menu items={<div className={styles.tagListFull}>{list}</div>}>
<div className={styles.tagList}>{list}</div>
</Menu>
);
};

66
packages/frontend/component/src/components/page-list/components/title-cell.tsx
View File

@ -1,66 +0,0 @@
import React, { useCallback } from 'react';
import type { TableCellProps } from '../../..';
import { Content, TableCell } from '../../..';
import {
StyledTitleContentWrapper,
StyledTitleLink,
StyledTitlePreview,
} from '../styles';
type TitleCellProps = {
icon: JSX.Element;
text: string;
desc?: React.ReactNode;
suffix?: JSX.Element;
/**
* Customize the children of the cell
* @param element
* @returns
*/
children?: (element: React.ReactElement) => React.ReactNode;
} & Omit<TableCellProps, 'children'>;
export const TitleCell = React.forwardRef<HTMLTableCellElement, TitleCellProps>(
({ icon, text, desc, suffix, children: render, ...props }, ref) => {
const renderChildren = useCallback(() => {
const childElement = (
<>
<StyledTitleLink>
{icon}
<StyledTitleContentWrapper>
<Content
ellipsis={true}
maxWidth="100%"
color="inherit"
fontSize="var(--affine-font-sm)"
weight="600"
lineHeight="18px"
>
{text}
</Content>
{desc && (
<StyledTitlePreview
ellipsis={true}
color="var(--affine-text-secondary-color)"
>
{desc}
</StyledTitlePreview>
)}
</StyledTitleContentWrapper>
</StyledTitleLink>
{suffix}
</>
);
return render ? render(childElement) : childElement;
}, [desc, icon, render, suffix, text]);
return (
<TableCell ref={ref} {...props}>
{renderChildren()}
</TableCell>
);
}
);
TitleCell.displayName = 'TitleCell';

2
packages/frontend/component/src/components/page-list/filter/filter-list.tsx
View File

@ -63,7 +63,7 @@ export const FilterList = ({
>
{value.length === 0 ? (
<Button
icon={<PlusIcon />}
icon={<PlusIcon style={{ color: 'var(--affine-icon-color)' }} />}
iconPosition="end"
style={{ fontSize: 'var(--affine-font-xs)', padding: '0 8px' }}
>

9
packages/frontend/component/src/components/page-list/index.tsx
View File

@ -1,12 +1,13 @@
export * from './all-page';
export * from './components/favorite-tag';
export * from './components/floating-toobar';
export * from './components/new-page-buttton';
export * from './components/title-cell';
export * from './filter';
export * from './operation-cell';
export * from './operation-menu-items';
export * from './styles';
export * from './type';
export * from './page-list';
export * from './page-list-item';
export * from './page-tags';
export * from './types';
export * from './use-collection-manager';
export * from './utils';
export * from './view';

129
packages/frontend/component/src/components/page-list/mobile.tsx
View File

@ -1,129 +0,0 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
Content,
Table,
TableBody,
TableCell,
TableHead,
TableHeadRow,
} from '../../..';
import { AllPagesBody } from './all-pages-body';
import { NewPageButton } from './components/new-page-buttton';
import {
StyledTableBodyRow,
StyledTableContainer,
StyledTitleLink,
} from './styles';
import type { ListData } from './type';
const MobileHead = ({
isPublicWorkspace,
createNewPage,
createNewEdgeless,
importFile,
}: {
isPublicWorkspace: boolean;
createNewPage: () => void;
createNewEdgeless: () => void;
importFile: () => void;
}) => {
const t = useAFFiNEI18N();
return (
<TableHead>
<TableHeadRow>
<TableCell proportion={0.8}>{t['Title']()}</TableCell>
{!isPublicWorkspace && (
<TableCell>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
}}
>
<NewPageButton
createNewPage={createNewPage}
createNewEdgeless={createNewEdgeless}
importFile={importFile}
/>
</div>
</TableCell>
)}
</TableHeadRow>
</TableHead>
);
};
export const AllPageListMobileView = ({
list,
isPublicWorkspace,
createNewPage,
createNewEdgeless,
importFile,
}: {
isPublicWorkspace: boolean;
list: ListData[];
createNewPage: () => void;
createNewEdgeless: () => void;
importFile: () => void;
}) => {
return (
<StyledTableContainer>
<Table>
<MobileHead
isPublicWorkspace={isPublicWorkspace}
createNewPage={createNewPage}
createNewEdgeless={createNewEdgeless}
importFile={importFile}
/>
<AllPagesBody
isPublicWorkspace={isPublicWorkspace}
data={list}
// update groupKey after support sort by create date
groupKey="updatedDate"
/>
</Table>
</StyledTableContainer>
);
};
// TODO align to {@link AllPageListMobileView}
export const TrashListMobileView = ({
list,
}: {
list: {
pageId: string;
title: string;
icon: JSX.Element;
onClickPage: () => void;
}[];
}) => {
const t = useAFFiNEI18N();
const ListItems = list.map(({ pageId, title, icon, onClickPage }, index) => {
return (
<StyledTableBodyRow
data-testid={`page-list-item-${pageId}`}
key={`${pageId}-${index}`}
>
<TableCell onClick={onClickPage}>
<StyledTitleLink>
{icon}
<Content ellipsis={true} color="inherit">
{title || t['Untitled']()}
</Content>
</StyledTitleLink>
</TableCell>
</StyledTableBodyRow>
);
});
return (
<StyledTableContainer>
<Table>
<TableBody>{ListItems}</TableBody>
</Table>
</StyledTableContainer>
);
};

54
packages/frontend/component/src/components/page-list/operation-cell.tsx
View File

@ -12,14 +12,17 @@ import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
import { ConfirmModal } from '@toeverything/components/modal';
import { Tooltip } from '@toeverything/components/tooltip';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { FlexWrapper } from '../../..';
import { FavoriteTag } from './components/favorite-tag';
import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
import * as styles from './page-list.css';
import { ColWrapper, stopPropagationWithoutPrevent } from './utils';
export interface OperationCellProps {
favorite: boolean;
isPublic: boolean;
onOpenPageInNewTab: () => void;
link: string;
onToggleFavoritePage: () => void;
onRemoveToTrash: () => void;
onDisablePublicSharing: () => void;
@ -28,14 +31,13 @@ export interface OperationCellProps {
export const OperationCell = ({
favorite,
isPublic,
onOpenPageInNewTab,
link,
onToggleFavoritePage,
onRemoveToTrash,
onDisablePublicSharing,
}: OperationCellProps) => {
const t = useAFFiNEI18N();
const [openDisableShared, setOpenDisableShared] = useState(false);
const OperationMenu = (
<>
{isPublic && (
@ -63,23 +65,38 @@ export const OperationCell = ({
: t['com.affine.favoritePageOperation.add']()}
</MenuItem>
{!environment.isDesktop && (
<MenuItem
onClick={onOpenPageInNewTab}
preFix={
<MenuIcon>
<OpenInNewIcon />
</MenuIcon>
}
<Link
onClick={stopPropagationWithoutPrevent}
to={link}
target={'_blank'}
rel="noopener noreferrer"
>
{t['com.affine.openPageOperation.newTab']()}
</MenuItem>
<MenuItem
style={{ marginBottom: 4 }}
preFix={
<MenuIcon>
<OpenInNewIcon />
</MenuIcon>
}
>
{t['com.affine.openPageOperation.newTab']()}
</MenuItem>
</Link>
)}
<MoveToTrash data-testid="move-to-trash" onSelect={onRemoveToTrash} />
</>
);
return (
<>
<FlexWrapper alignItems="center" justifyContent="center">
<ColWrapper
hideInSmallContainer
data-testid="page-list-item-favorite"
data-favorite={favorite ? true : undefined}
className={styles.favoriteCell}
>
<FavoriteTag onClick={onToggleFavoritePage} active={favorite} />
</ColWrapper>
<ColWrapper alignment="start">
<Menu
items={OperationMenu}
contentOptions={{
@ -90,7 +107,7 @@ export const OperationCell = ({
<MoreVerticalIcon />
</IconButton>
</Menu>
</FlexWrapper>
</ColWrapper>
<DisablePublicSharing.DisablePublicSharingModal
onConfirm={onDisablePublicSharing}
open={openDisableShared}
@ -103,7 +120,6 @@ export const OperationCell = ({
export interface TrashOperationCellProps {
onPermanentlyDeletePage: () => void;
onRestorePage: () => void;
onOpenPage: () => void;
}
export const TrashOperationCell = ({
@ -113,9 +129,10 @@ export const TrashOperationCell = ({
const t = useAFFiNEI18N();
const [open, setOpen] = useState(false);
return (
<FlexWrapper>
<ColWrapper flex={1}>
<Tooltip content={t['com.affine.trashOperation.restoreIt']()} side="top">
<IconButton
data-testid="restore-page-button"
style={{ marginRight: '12px' }}
onClick={() => {
onRestorePage();
@ -130,6 +147,7 @@ export const TrashOperationCell = ({
align="end"
>
<IconButton
data-testid="delete-page-button"
onClick={() => {
setOpen(true);
}}
@ -152,6 +170,6 @@ export const TrashOperationCell = ({
setOpen(false);
}}
/>
</FlexWrapper>
</ColWrapper>
);
};

28
packages/frontend/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
View File

@ -1,5 +1,5 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { DeleteTemporarilyIcon } from '@blocksuite/icons';
import { DeleteIcon } from '@blocksuite/icons';
import {
MenuIcon,
MenuItem,
@ -17,7 +17,7 @@ export const MoveToTrash = (props: MenuItemProps) => {
<MenuItem
preFix={
<MenuIcon>
<DeleteTemporarilyIcon />
<DeleteIcon />
</MenuIcon>
}
type="danger"
@ -29,19 +29,29 @@ export const MoveToTrash = (props: MenuItemProps) => {
};
const MoveToTrashConfirm = ({
title,
titles,
...confirmModalProps
}: {
title: string;
titles: string[];
} & ConfirmModalProps) => {
const t = useAFFiNEI18N();
const multiple = titles.length > 1;
const title = multiple
? t['com.affine.moveToTrash.confirmModal.title.multiple']({
number: titles.length.toString(),
})
: t['com.affine.moveToTrash.confirmModal.title']();
const description = multiple
? t['com.affine.moveToTrash.confirmModal.description.multiple']({
number: titles.length.toString(),
})
: t['com.affine.moveToTrash.confirmModal.description']({
title: titles[0] || t['Untitled'](),
});
return (
<ConfirmModal
title={t['com.affine.moveToTrash.confirmModal.title']()}
description={t['com.affine.moveToTrash.confirmModal.description']({
title: title || 'Untitled',
})}
title={title}
description={description}
cancelText={t['com.affine.confirmModal.button.cancel']()}
confirmButtonOptions={{
['data-testid' as string]: 'confirm-delete-page',

32
packages/frontend/component/src/components/page-list/page-content-preview.tsx Normal file
View File

@ -0,0 +1,32 @@
import { assertExists } from '@blocksuite/global/utils';
import type { Workspace } from '@blocksuite/store';
import { useBlockSuitePagePreview } from '@toeverything/hooks/use-block-suite-page-preview';
import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
import { useAtomValue } from 'jotai';
import { Suspense } from 'react';
interface PagePreviewInnerProps {
workspace: Workspace;
pageId: string;
}
const PagePreviewInner = ({ workspace, pageId }: PagePreviewInnerProps) => {
const page = useBlockSuiteWorkspacePage(workspace, pageId);
assertExists(page);
const previewAtom = useBlockSuitePagePreview(page);
const preview = useAtomValue(previewAtom);
return preview ? preview : null;
};
interface PagePreviewProps {
workspace: Workspace;
pageId: string;
}
export const PagePreview = ({ workspace, pageId }: PagePreviewProps) => {
return (
<Suspense>
<PagePreviewInner workspace={workspace} pageId={pageId} />
</Suspense>
);
};

133
packages/frontend/component/src/components/page-list/page-group.css.ts Normal file
View File

@ -0,0 +1,133 @@
import { keyframes, style } from '@vanilla-extract/css';
export const root = style({
display: 'flex',
flexDirection: 'column',
gap: 6,
});
const slideDown = keyframes({
'0%': {
opacity: 0,
height: '0px',
},
'100%': {
opacity: 1,
height: 'var(--radix-collapsible-content-height)',
},
});
const slideUp = keyframes({
'0%': {
opacity: 1,
height: 'var(--radix-collapsible-content-height)',
},
'100%': {
opacity: 0,
height: '0px',
},
});
export const collapsibleContent = style({
overflow: 'hidden',
selectors: {
'&[data-state="open"]': {
animation: `${slideDown} 0.3s ease-in-out`,
},
'&[data-state="closed"]': {
animation: `${slideUp} 0.3s ease-in-out`,
},
},
});
export const collapsibleContentInner = style({
display: 'flex',
flexDirection: 'column',
gap: 4,
});
export const header = style({
display: 'flex',
alignItems: 'center',
padding: '0px 16px 0px 6px',
gap: 4,
height: '28px',
':hover': {
background: 'var(--affine-hover-color)',
},
userSelect: 'none',
});
export const spacer = style({
flex: 1,
});
export const headerCollapseIcon = style({
cursor: 'pointer',
});
export const headerLabel = style({
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-secondary-color)',
});
export const headerCount = style({
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-disable-color)',
});
export const selectAllButton = style({
display: 'flex',
opacity: 0,
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
fontSize: 'var(--affine-font-xs)',
height: '20px',
borderRadius: 4,
padding: '0 8px',
selectors: {
'&:hover': {
background: 'var(--affine-hover-color)',
},
[`${header}:hover &`]: {
opacity: 1,
},
},
});
export const collapsedIcon = style({
opacity: 0,
transition: 'transform 0.2s ease-in-out',
selectors: {
'&[data-collapsed="false"]': {
transform: 'rotate(90deg)',
},
[`${header}:hover &, &[data-collapsed="true"]`]: {
opacity: 1,
},
},
});
export const collapsedIconContainer = style({
width: '16px',
height: '16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '2px',
transition: 'transform 0.2s',
color: 'inherit',
selectors: {
'&[data-collapsed="true"]': {
transform: 'rotate(-90deg)',
},
'&[data-disabled="true"]': {
opacity: 0.3,
pointerEvents: 'none',
},
'&:hover': {
background: 'var(--affine-hover-color)',
},
},
});

276
packages/frontend/component/src/components/page-list/page-group.tsx Normal file
View File

@ -0,0 +1,276 @@
import type { Tag } from '@affine/env/filter';
import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { assertExists } from '@blocksuite/global/utils';
import { EdgelessIcon, PageIcon, ToggleCollapseIcon } from '@blocksuite/icons';
import type { PageMeta, Workspace } from '@blocksuite/store';
import * as Collapsible from '@radix-ui/react-collapsible';
import clsx from 'clsx';
import { useAtomValue } from 'jotai';
import { selectAtom } from 'jotai/utils';
import { isEqual } from 'lodash-es';
import { type MouseEventHandler, useCallback, useMemo, useState } from 'react';
import { PagePreview } from './page-content-preview';
import * as styles from './page-group.css';
import { PageListItem } from './page-list-item';
import { pageListPropsAtom, selectionStateAtom } from './scoped-atoms';
import type {
PageGroupDefinition,
PageGroupProps,
PageListItemProps,
PageListProps,
} from './types';
import { type DateKey } from './types';
import { betweenDaysAgo, withinDaysAgo } from './utils';
// todo: optimize date matchers
const getDateGroupDefinitions = (key: DateKey): PageGroupDefinition[] => [
{
id: 'today',
label: <Trans i18nKey="com.affine.today" />,
match: item => withinDaysAgo(new Date(item[key] ?? item.createDate), 1),
},
{
id: 'yesterday',
label: <Trans i18nKey="com.affine.yesterday" />,
match: item => betweenDaysAgo(new Date(item[key] ?? item.createDate), 1, 2),
},
{
id: 'last7Days',
label: <Trans i18nKey="com.affine.last7Days" />,
match: item => betweenDaysAgo(new Date(item[key] ?? item.createDate), 2, 7),
},
{
id: 'last30Days',
label: <Trans i18nKey="com.affine.last30Days" />,
match: item =>
betweenDaysAgo(new Date(item[key] ?? item.createDate), 7, 30),
},
{
id: 'moreThan30Days',
label: <Trans i18nKey="com.affine.moreThan30Days" />,
match: item => !withinDaysAgo(new Date(item[key] ?? item.createDate), 30),
},
];
const pageGroupDefinitions = {
createDate: getDateGroupDefinitions('createDate'),
updatedDate: getDateGroupDefinitions('updatedDate'),
// add more here later
};
export function pagesToPageGroups(
pages: PageMeta[],
key?: DateKey
): PageGroupProps[] {
if (!key) {
return [
{
id: 'all',
items: pages,
allItems: pages,
},
];
}
// assume pages are already sorted, we will use the page order to determine the group order
const groupDefs = pageGroupDefinitions[key];
const groups: PageGroupProps[] = [];
for (const page of pages) {
// for a single page, there could be multiple groups that it belongs to
const matchedGroups = groupDefs.filter(def => def.match(page));
for (const groupDef of matchedGroups) {
const group = groups.find(g => g.id === groupDef.id);
if (group) {
group.items.push(page);
} else {
const label =
typeof groupDef.label === 'function'
? groupDef.label()
: groupDef.label;
groups.push({
id: groupDef.id,
label: label,
items: [page],
allItems: pages,
});
}
}
}
return groups;
}
export const PageGroup = ({ id, items, label }: PageGroupProps) => {
const [collapsed, setCollapsed] = useState(false);
const onExpandedClicked: MouseEventHandler = useCallback(e => {
e.stopPropagation();
e.preventDefault();
setCollapsed(v => !v);
}, []);
const selectionState = useAtomValue(selectionStateAtom);
const selectedItems = useMemo(() => {
const selectedPageIds = selectionState.selectedPageIds ?? [];
return items.filter(item => selectedPageIds.includes(item.id));
}, [items, selectionState.selectedPageIds]);
const onSelectAll = useCallback(() => {
const nonCurrentGroupIds =
selectionState.selectedPageIds?.filter(
id => !items.map(item => item.id).includes(id)
) ?? [];
selectionState.onSelectedPageIdsChange?.([
...nonCurrentGroupIds,
...items.map(item => item.id),
]);
}, [items, selectionState]);
const t = useAFFiNEI18N();
return (
<Collapsible.Root
data-testid="page-list-group"
data-group-id={id}
open={!collapsed}
className={clsx(styles.root)}
>
{label ? (
<div data-testid="page-list-group-header" className={styles.header}>
<Collapsible.Trigger
role="button"
onClick={onExpandedClicked}
data-testid="page-list-group-header-collapsed-button"
className={styles.collapsedIconContainer}
>
<ToggleCollapseIcon
className={styles.collapsedIcon}
data-collapsed={collapsed !== false}
/>
</Collapsible.Trigger>
<div className={styles.headerLabel}>{label}</div>
{selectionState.selectionActive ? (
<div className={styles.headerCount}>
{selectedItems.length}/{items.length}
</div>
) : null}
<div className={styles.spacer} />
{selectionState.selectionActive ? (
<button className={styles.selectAllButton} onClick={onSelectAll}>
{t['com.affine.page.group-header.select-all']()}
</button>
) : null}
</div>
) : null}
<Collapsible.Content className={styles.collapsibleContent}>
<div className={styles.collapsibleContentInner}>
{items.map(item => (
<PageMetaListItemRenderer key={item.id} {...item} />
))}
</div>
</Collapsible.Content>
</Collapsible.Root>
);
};
// todo: optimize how to render page meta list item
const requiredPropNames = [
'blockSuiteWorkspace',
'clickMode',
'isPreferredEdgeless',
'pageOperationsRenderer',
'selectedPageIds',
'onSelectedPageIdsChange',
'draggable',
] as const;
type RequiredProps = Pick<PageListProps, (typeof requiredPropNames)[number]> & {
selectable: boolean;
};
const listPropsAtom = selectAtom(
pageListPropsAtom,
props => {
return Object.fromEntries(
requiredPropNames.map(name => [name, props[name]])
) as RequiredProps;
},
isEqual
);
const PageMetaListItemRenderer = (pageMeta: PageMeta) => {
const props = useAtomValue(listPropsAtom);
const { selectionActive } = useAtomValue(selectionStateAtom);
return (
<PageListItem
{...pageMetaToPageItemProp(pageMeta, {
...props,
selectable: !!selectionActive,
})}
/>
);
};
function tagIdToTagOption(
tagId: string,
blockSuiteWorkspace: Workspace
): Tag | undefined {
return blockSuiteWorkspace.meta.properties.tags?.options.find(
opt => opt.id === tagId
);
}
function pageMetaToPageItemProp(
pageMeta: PageMeta,
props: RequiredProps
): PageListItemProps {
const toggleSelection = props.onSelectedPageIdsChange
? () => {
assertExists(props.selectedPageIds);
const prevSelected = props.selectedPageIds.includes(pageMeta.id);
const shouldAdd = !prevSelected;
const shouldRemove = prevSelected;
if (shouldAdd) {
props.onSelectedPageIdsChange?.([
...props.selectedPageIds,
pageMeta.id,
]);
} else if (shouldRemove) {
props.onSelectedPageIdsChange?.(
props.selectedPageIds.filter(id => id !== pageMeta.id)
);
}
}
: undefined;
const itemProps: PageListItemProps = {
pageId: pageMeta.id,
title: pageMeta.title,
preview: (
<PagePreview workspace={props.blockSuiteWorkspace} pageId={pageMeta.id} />
),
createDate: new Date(pageMeta.createDate),
updatedDate: pageMeta.updatedDate
? new Date(pageMeta.updatedDate)
: undefined,
to:
props.clickMode === 'link'
? `/workspace/${props.blockSuiteWorkspace.id}/${pageMeta.id}`
: undefined,
onClick: props.clickMode === 'select' ? toggleSelection : undefined,
icon: props.isPreferredEdgeless?.(pageMeta.id) ? (
<EdgelessIcon />
) : (
<PageIcon />
),
tags:
pageMeta.tags
?.map(id => tagIdToTagOption(id, props.blockSuiteWorkspace))
.filter((v): v is Tag => v != null) ?? [],
operations: props.pageOperationsRenderer?.(pageMeta),
selectable: props.selectable,
selected: props.selectedPageIds?.includes(pageMeta.id),
onSelectedChange: toggleSelection,
draggable: props.draggable,
isPublicPage: !!pageMeta.isPublic,
};
return itemProps;
}

175
packages/frontend/component/src/components/page-list/page-list-item.css.ts Normal file
View File

@ -0,0 +1,175 @@
import { globalStyle, style } from '@vanilla-extract/css';
export const root = style({
display: 'flex',
color: 'var(--affine-text-primary-color)',
height: '54px', // 42 + 12
flexShrink: 0,
width: '100%',
alignItems: 'stretch',
transition: 'background-color 0.2s, opacity 0.2s',
':hover': {
backgroundColor: 'var(--affine-hover-color)',
},
overflow: 'hidden',
cursor: 'default',
willChange: 'opacity',
selectors: {
'&[data-clickable=true]': {
cursor: 'pointer',
},
},
});
export const dragOverlay = style({
display: 'flex',
height: '54px', // 42 + 12
alignItems: 'center',
background: 'var(--affine-hover-color-filled)',
boxShadow: 'var(--affine-menu-shadow)',
borderRadius: 10,
zIndex: 1001,
cursor: 'pointer',
maxWidth: '360px',
transition: 'transform 0.2s',
willChange: 'transform',
selectors: {
'&[data-over=true]': {
transform: 'scale(0.8)',
},
},
});
export const dndCell = style({
position: 'relative',
marginLeft: -8,
height: '100%',
outline: 'none',
paddingLeft: 8,
});
globalStyle(`[data-draggable=true] ${dndCell}:before`, {
content: '""',
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
left: 0,
width: 4,
height: 4,
transition: 'height 0.2s, opacity 0.2s',
backgroundColor: 'var(--affine-placeholder-color)',
borderRadius: '2px',
opacity: 0,
willChange: 'height, opacity',
});
globalStyle(`[data-draggable=true] ${dndCell}:hover:before`, {
height: 12,
opacity: 1,
});
globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}`, {
opacity: 0.5,
});
globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, {
height: 32,
width: 2,
opacity: 1,
});
// todo: remove global style
globalStyle(`${root} > :first-child`, {
paddingLeft: '16px',
});
globalStyle(`${root} > :last-child`, {
paddingRight: '8px',
});
export const titleIconsWrapper = style({
padding: '0 5px',
display: 'flex',
alignItems: 'center',
gap: '10px',
});
export const selectionCell = style({
display: 'flex',
alignItems: 'center',
flexShrink: 0,
fontSize: 'var(--affine-font-h-3)',
});
export const titleCell = style({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
padding: '0 16px',
maxWidth: 'calc(100% - 64px)',
flex: 1,
whiteSpace: 'nowrap',
});
export const titleCellMain = style({
overflow: 'hidden',
fontSize: 'var(--affine-font-sm)',
fontWeight: 600,
whiteSpace: 'nowrap',
flex: 1,
textOverflow: 'ellipsis',
alignSelf: 'stretch',
});
export const titleCellPreview = style({
overflow: 'hidden',
color: 'var(--affine-text-secondary-color)',
fontSize: 'var(--affine-font-xs)',
flex: 1,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
alignSelf: 'stretch',
});
export const iconCell = style({
display: 'flex',
alignItems: 'center',
fontSize: 'var(--affine-font-h-3)',
color: 'var(--affine-icon-color)',
flexShrink: 0,
});
export const tagsCell = style({
display: 'flex',
alignItems: 'center',
fontSize: 'var(--affine-font-xs)',
color: 'var(--affine-text-secondary-color)',
padding: '0 8px',
height: '60px',
width: '100%',
});
export const dateCell = style({
display: 'flex',
alignItems: 'center',
fontSize: 'var(--affine-font-xs)',
color: 'var(--affine-text-secondary-color)',
flexShrink: 0,
flexWrap: 'nowrap',
padding: '0 8px',
});
export const actionsCellWrapper = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
flexShrink: 0,
});
export const operationsCell = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
columnGap: '6px',
flexShrink: 0,
});

254
packages/frontend/component/src/components/page-list/page-list-item.tsx Normal file
View File

@ -0,0 +1,254 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { useDraggable } from '@dnd-kit/core';
import { type PropsWithChildren, useCallback, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { Checkbox } from '../../ui/checkbox';
import * as styles from './page-list-item.css';
import { PageTags } from './page-tags';
import type { DraggableTitleCellData, PageListItemProps } from './types';
import { ColWrapper, formatDate, stopPropagation } from './utils';
const PageListTitleCell = ({
title,
preview,
}: Pick<PageListItemProps, 'title' | 'preview'>) => {
const t = useAFFiNEI18N();
return (
<div data-testid="page-list-item-title" className={styles.titleCell}>
<div
data-testid="page-list-item-title-text"
className={styles.titleCellMain}
>
{title || t['Untitled']()}
</div>
{preview ? (
<div
data-testid="page-list-item-preview-text"
className={styles.titleCellPreview}
>
{preview}
</div>
) : null}
</div>
);
};
const PageListIconCell = ({ icon }: Pick<PageListItemProps, 'icon'>) => {
return (
<div data-testid="page-list-item-icon" className={styles.iconCell}>
{icon}
</div>
);
};
const PageSelectionCell = ({
selectable,
onSelectedChange,
selected,
}: Pick<PageListItemProps, 'selectable' | 'onSelectedChange' | 'selected'>) => {
const onSelectionChange = useCallback(
(_event: React.ChangeEvent<HTMLInputElement>) => {
return onSelectedChange?.();
},
[onSelectedChange]
);
if (!selectable) {
return null;
}
return (
<div className={styles.selectionCell}>
<Checkbox
onClick={stopPropagation}
checked={!!selected}
onChange={onSelectionChange}
/>
</div>
);
};
export const PageTagsCell = ({ tags }: Pick<PageListItemProps, 'tags'>) => {
return (
<div data-testid="page-list-item-tags" className={styles.tagsCell}>
<PageTags
tags={tags}
hoverExpandDirection="left"
widthOnHover="300%"
maxItems={5}
/>
</div>
);
};
const PageCreateDateCell = ({
createDate,
}: Pick<PageListItemProps, 'createDate'>) => {
return (
<div data-testid="page-list-item-date" className={styles.dateCell}>
{formatDate(createDate)}
</div>
);
};
const PageUpdatedDateCell = ({
updatedDate,
}: Pick<PageListItemProps, 'updatedDate'>) => {
return (
<div data-testid="page-list-item-date" className={styles.dateCell}>
{updatedDate ? formatDate(updatedDate) : '-'}
</div>
);
};
const PageListOperationsCell = ({
operations,
}: Pick<PageListItemProps, 'operations'>) => {
return operations ? (
<div onClick={stopPropagation} className={styles.operationsCell}>
{operations}
</div>
) : null;
};
export const PageListItem = (props: PageListItemProps) => {
const pageTitleElement = useMemo(() => {
return (
<>
<div className={styles.titleIconsWrapper}>
<PageSelectionCell
onSelectedChange={props.onSelectedChange}
selectable={props.selectable}
selected={props.selected}
/>
<PageListIconCell icon={props.icon} />
</div>
<PageListTitleCell title={props.title} preview={props.preview} />
</>
);
}, [
props.icon,
props.onSelectedChange,
props.preview,
props.selectable,
props.selected,
props.title,
]);
const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
id: 'page-list-item-title-' + props.pageId,
data: {
pageId: props.pageId,
pageTitle: pageTitleElement,
} satisfies DraggableTitleCellData,
disabled: !props.draggable,
});
return (
<PageListItemWrapper
onClick={props.onClick}
to={props.to}
pageId={props.pageId}
draggable={props.draggable}
isDragging={isDragging}
>
<ColWrapper flex={9}>
<ColWrapper
className={styles.dndCell}
flex={8}
ref={setNodeRef}
{...attributes}
{...listeners}
>
<div className={styles.titleIconsWrapper}>
<PageSelectionCell
onSelectedChange={props.onSelectedChange}
selectable={props.selectable}
selected={props.selected}
/>
<PageListIconCell icon={props.icon} />
</div>
<PageListTitleCell title={props.title} preview={props.preview} />
</ColWrapper>
<ColWrapper flex={4} alignment="end" style={{ overflow: 'visible' }}>
<PageTagsCell tags={props.tags} />
</ColWrapper>
</ColWrapper>
<ColWrapper flex={1} alignment="end" hideInSmallContainer>
<PageCreateDateCell createDate={props.createDate} />
</ColWrapper>
<ColWrapper flex={1} alignment="end" hideInSmallContainer>
<PageUpdatedDateCell updatedDate={props.updatedDate} />
</ColWrapper>
{props.operations ? (
<ColWrapper
className={styles.actionsCellWrapper}
flex={1}
alignment="end"
>
<PageListOperationsCell operations={props.operations} />
</ColWrapper>
) : null}
</PageListItemWrapper>
);
};
type PageListWrapperProps = PropsWithChildren<
Pick<PageListItemProps, 'to' | 'pageId' | 'onClick' | 'draggable'> & {
isDragging: boolean;
}
>;
function PageListItemWrapper({
to,
isDragging,
pageId,
onClick,
children,
draggable,
}: PageListWrapperProps) {
const handleClick = useCallback(
(e: React.MouseEvent) => {
if (onClick) {
stopPropagation(e);
onClick();
}
},
[onClick]
);
const commonProps = useMemo(
() => ({
'data-testid': 'page-list-item',
'data-page-id': pageId,
'data-draggable': draggable,
className: styles.root,
'data-clickable': !!onClick || !!to,
'data-dragging': isDragging,
onClick: handleClick,
}),
[pageId, draggable, isDragging, onClick, to, handleClick]
);
if (to) {
return (
<Link {...commonProps} to={to}>
{children}
</Link>
);
} else {
return <div {...commonProps}>{children}</div>;
}
}
export const PageListDragOverlay = ({
children,
over,
}: PropsWithChildren<{
over?: boolean;
}>) => {
return (
<div data-over={over} className={styles.dragOverlay}>
{children}
</div>
);
};

111
packages/frontend/component/src/components/page-list/page-list.css.ts Normal file
View File

@ -0,0 +1,111 @@
import { createContainer, globalStyle, style } from '@vanilla-extract/css';
import * as itemStyles from './page-list-item.css';
export const listRootContainer = createContainer('list-root-container');
export const pageListScrollContainer = style({
overflowY: 'auto',
width: '100%',
});
export const root = style({
width: '100%',
maxWidth: '100%',
containerName: listRootContainer,
containerType: 'inline-size',
background: 'var(--affine-background-primary-color)',
});
export const groupsContainer = style({
display: 'flex',
flexDirection: 'column',
rowGap: '16px',
});
export const header = style({
display: 'flex',
alignItems: 'center',
padding: '10px 6px 10px 16px',
position: 'sticky',
overflow: 'hidden',
zIndex: 1,
top: 0,
left: 0,
background: 'var(--affine-background-primary-color)',
transition: 'box-shadow 0.2s ease-in-out',
transform: 'translateY(-0.5px)', // fix sticky look through issue
});
globalStyle(`[data-has-scroll-top=true] ${header}`, {
boxShadow: '0 1px var(--affine-border-color)',
});
export const headerCell = style({
padding: '0 8px',
userSelect: 'none',
fontSize: 'var(--affine-font-xs)',
color: 'var(--affine-text-secondary-color)',
selectors: {
'&[data-sorting], &:hover': {
color: 'var(--affine-text-primary-color)',
},
'&[data-sortable]': {
cursor: 'pointer',
},
'&:not(:last-child)': {
borderRight: '1px solid var(--affine-hover-color-filled)',
},
},
display: 'flex',
alignItems: 'center',
columnGap: '4px',
position: 'relative',
whiteSpace: 'nowrap',
});
export const headerTitleCell = style({
display: 'flex',
alignItems: 'center',
gap: '8px',
});
export const headerTitleSelectionIconWrapper = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '16px',
});
export const headerCellSortIcon = style({
width: '14px',
height: '14px',
});
export const colWrapper = style({
display: 'flex',
alignItems: 'center',
flexShrink: 0,
overflow: 'hidden',
});
export const hideInSmallContainer = style({
'@container': {
[`${listRootContainer} (max-width: 800px)`]: {
display: 'none',
},
},
});
export const favoriteCell = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
flexShrink: 0,
opacity: 0,
selectors: {
[`&[data-favorite], &${itemStyles.root}:hover &`]: {
opacity: 1,
},
},
});

301
packages/frontend/component/src/components/page-list/page-list.tsx Normal file
View File

@ -0,0 +1,301 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { MultiSelectIcon, SortDownIcon, SortUpIcon } from '@blocksuite/icons';
import type { PageMeta } from '@blocksuite/store';
import clsx from 'clsx';
import { Provider, useAtom, useAtomValue, useSetAtom } from 'jotai';
import { useHydrateAtoms } from 'jotai/utils';
import {
type ForwardedRef,
forwardRef,
type MouseEventHandler,
type PropsWithChildren,
type ReactNode,
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useRef,
} from 'react';
import { Checkbox, type CheckboxProps } from '../../ui/checkbox';
import { useHasScrollTop } from '../app-sidebar/sidebar-containers/use-has-scroll-top';
import { PageGroup } from './page-group';
import * as styles from './page-list.css';
import {
pageGroupsAtom,
pageListHandlersAtom,
pageListPropsAtom,
pagesAtom,
selectionStateAtom,
showOperationsAtom,
sorterAtom,
} from './scoped-atoms';
import type { PageListHandle, PageListProps } from './types';
import { ColWrapper, type ColWrapperProps, stopPropagation } from './utils';
/**
* Given a list of pages, render a list of pages
*/
export const PageList = forwardRef<PageListHandle, PageListProps>(
function PageListHandle(props, ref) {
return (
<Provider>
<PageListInner {...props} handleRef={ref} />
</Provider>
);
}
);
const PageListInner = ({
handleRef,
...props
}: PageListProps & { handleRef: ForwardedRef<PageListHandle> }) => {
// push pageListProps to the atom so that downstream components can consume it
useHydrateAtoms([[pageListPropsAtom, props]], {
// note: by turning on dangerouslyForceHydrate, downstream component need to use selectAtom to consume the atom
// note2: not using it for now because it will cause some other issues
// dangerouslyForceHydrate: true,
});
const setPageListPropsAtom = useSetAtom(pageListPropsAtom);
const setPageListSelectionState = useSetAtom(selectionStateAtom);
useEffect(() => {
setPageListPropsAtom(props);
}, [props, setPageListPropsAtom]);
useImperativeHandle(
handleRef,
() => {
return {
toggleSelectable: () => {
setPageListSelectionState(false);
},
};
},
[setPageListSelectionState]
);
const groups = useAtomValue(pageGroupsAtom);
const hideHeader = props.hideHeader;
return (
<div className={clsx(props.className, styles.root)}>
{!hideHeader ? <PageListHeader /> : null}
<div className={styles.groupsContainer}>
{groups.map(group => (
<PageGroup key={group.id} {...group} />
))}
</div>
</div>
);
};
type HeaderCellProps = ColWrapperProps & {
sortKey: keyof PageMeta;
sortable?: boolean;
};
export const PageListHeaderCell = (props: HeaderCellProps) => {
const [sorter, setSorter] = useAtom(sorterAtom);
const onClick: MouseEventHandler = useCallback(() => {
if (props.sortable && props.sortKey) {
setSorter({
newSortKey: props.sortKey,
});
}
}, [props.sortKey, props.sortable, setSorter]);
const sorting = sorter.key === props.sortKey;
return (
<ColWrapper
flex={props.flex}
alignment={props.alignment}
onClick={onClick}
className={styles.headerCell}
data-sortable={props.sortable ? true : undefined}
data-sorting={sorting ? true : undefined}
style={props.style}
hideInSmallContainer={props.hideInSmallContainer}
>
{props.children}
{sorting ? (
<div className={styles.headerCellSortIcon}>
{sorter.order === 'asc' ? <SortUpIcon /> : <SortDownIcon />}
</div>
) : null}
</ColWrapper>
);
};
type HeaderColDef = {
key: string;
content: ReactNode;
flex: ColWrapperProps['flex'];
alignment?: ColWrapperProps['alignment'];
sortable?: boolean;
hideInSmallContainer?: boolean;
};
// the checkbox on the header has three states:
// when list selectable = true, the checkbox will be presented
// when internal selection state is not enabled, it is a clickable <ListIcon /> that enables the selection state
// when internal selection state is enabled, it is a checkbox that reflects the selection state
const PageListHeaderCheckbox = () => {
const [selectionState, setSelectionState] = useAtom(selectionStateAtom);
const pages = useAtomValue(pagesAtom);
const onActivateSelection: MouseEventHandler = useCallback(
e => {
stopPropagation(e);
setSelectionState(true);
},
[setSelectionState]
);
const handlers = useAtomValue(pageListHandlersAtom);
const onChange: NonNullable<CheckboxProps['onChange']> = useCallback(
(e, checked) => {
stopPropagation(e);
handlers.onSelectedPageIdsChange?.(checked ? pages.map(p => p.id) : []);
},
[handlers, pages]
);
if (!selectionState.selectable) {
return null;
}
return (
<div
className={styles.headerTitleSelectionIconWrapper}
onClick={onActivateSelection}
>
{!selectionState.selectionActive ? (
<MultiSelectIcon />
) : (
<Checkbox
checked={selectionState.selectedPageIds?.length === pages.length}
indeterminate={
selectionState.selectedPageIds &&
selectionState.selectedPageIds.length > 0 &&
selectionState.selectedPageIds.length < pages.length
}
onChange={onChange}
/>
)}
</div>
);
};
const PageListHeaderTitleCell = () => {
const t = useAFFiNEI18N();
return (
<div className={styles.headerTitleCell}>
<PageListHeaderCheckbox />
{t['Title']()}
</div>
);
};
export const PageListHeader = () => {
const t = useAFFiNEI18N();
const showOperations = useAtomValue(showOperationsAtom);
const headerCols = useMemo(() => {
const cols: (HeaderColDef | boolean)[] = [
{
key: 'title',
content: <PageListHeaderTitleCell />,
flex: 6,
alignment: 'start',
sortable: true,
},
{
key: 'tags',
content: t['Tags'](),
flex: 3,
alignment: 'end',
},
{
key: 'createDate',
content: t['Created'](),
flex: 1,
sortable: true,
alignment: 'end',
hideInSmallContainer: true,
},
{
key: 'updatedDate',
content: t['Updated'](),
flex: 1,
sortable: true,
alignment: 'end',
hideInSmallContainer: true,
},
showOperations && {
key: 'actions',
content: '',
flex: 1,
alignment: 'end',
},
];
return cols.filter((def): def is HeaderColDef => !!def);
}, [t, showOperations]);
return (
<div className={clsx(styles.header)}>
{headerCols.map(col => {
return (
<PageListHeaderCell
flex={col.flex}
alignment={col.alignment}
key={col.key}
sortKey={col.key as keyof PageMeta}
sortable={col.sortable}
style={{ overflow: 'visible' }}
hideInSmallContainer={col.hideInSmallContainer}
>
{col.content}
</PageListHeaderCell>
);
})}
</div>
);
};
interface PageListScrollContainerProps {
className?: string;
style?: React.CSSProperties;
}
export const PageListScrollContainer = forwardRef<
HTMLDivElement,
PropsWithChildren<PageListScrollContainerProps>
>(({ className, children, style }, ref) => {
const containerRef = useRef<HTMLDivElement | null>(null);
const hasScrollTop = useHasScrollTop(containerRef);
const setNodeRef = useCallback(
(r: HTMLDivElement) => {
if (ref) {
if (typeof ref === 'function') {
ref(r);
} else {
ref.current = r;
}
}
containerRef.current = r;
},
[ref]
);
return (
<div
style={style}
ref={setNodeRef}
data-has-scroll-top={hasScrollTop}
className={clsx(styles.pageListScrollContainer, className)}
>
{children}
</div>
);
});
PageListScrollContainer.displayName = 'PageListScrollContainer';

138
packages/frontend/component/src/components/page-list/page-tags.css.ts Normal file
View File

@ -0,0 +1,138 @@
import { style } from '@vanilla-extract/css';
export const root = style({
position: 'relative',
width: '100%',
height: '100%',
minHeight: '32px',
});
export const tagsContainer = style({
display: 'flex',
alignItems: 'center',
});
export const tagsScrollContainer = style([
tagsContainer,
{
overflow: 'auto',
height: '100%',
gap: '8px',
},
]);
export const tagsListContainer = style([
tagsContainer,
{
flexWrap: 'wrap',
flexDirection: 'column',
alignItems: 'flex-start',
gap: '4px',
},
]);
export const innerContainer = style({
display: 'flex',
columnGap: '8px',
alignItems: 'center',
position: 'absolute',
height: '100%',
maxWidth: '100%',
transition: 'all 0.2s 0.3s ease-in-out',
selectors: {
[`${root}:hover &`]: {
maxWidth: 'var(--hover-max-width)',
},
},
});
// background with linear gradient hack
export const innerBackdrop = style({
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: '100%',
opacity: 0,
transition: 'all 0.2s',
background:
'linear-gradient(90deg, transparent 0%, var(--affine-hover-color-filled) 40%)',
selectors: {
[`${root}:hover &`]: {
opacity: 1,
},
},
});
const range = (start: number, end: number) => {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
};
export const tag = style({
height: '20px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 8px',
color: 'var(--affine-text-primary-color)',
});
export const tagSticky = style([
tag,
{
fontSize: 'var(--affine-font-xs)',
borderRadius: '10px',
columnGap: '4px',
border: '1px solid var(--affine-border-color)',
background: 'var(--affine-background-primary-color)',
maxWidth: '128px',
position: 'sticky',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
left: 0,
selectors: range(0, 20).reduce((selectors, i) => {
return {
...selectors,
[`&:nth-last-child(${i + 1})`]: {
right: `${i * 48}px`,
},
};
}, {}),
},
]);
export const tagListItem = style([
tag,
{
fontSize: 'var(--affine-font-sm)',
padding: '4px 12px',
columnGap: '8px',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
height: '30px',
},
]);
export const showMoreTag = style({
fontSize: 'var(--affine-font-h-5)',
right: 0,
position: 'sticky',
display: 'inline-flex',
});
export const tagIndicator = style({
width: '8px',
height: '8px',
borderRadius: '50%',
flexShrink: 0,
});
export const tagLabel = style({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
});

135
packages/frontend/component/src/components/page-list/page-tags.tsx Normal file
View File

@ -0,0 +1,135 @@
import type { Tag } from '@affine/env/filter';
import { MoreHorizontalIcon } from '@blocksuite/icons';
import { Menu } from '@toeverything/components/menu';
import clsx from 'clsx';
import { useEffect, useMemo, useRef } from 'react';
import * as styles from './page-tags.css';
import { stopPropagation } from './utils';
export interface PageTagsProps {
tags: Tag[];
maxItems?: number; // max number to show. if not specified, show all. if specified, show the first n items and add a "..." tag
widthOnHover?: number | string; // max width on hover
hoverExpandDirection?: 'left' | 'right'; // expansion direction on hover
}
interface TagItemProps {
tag: Tag;
idx: number;
mode: 'sticky' | 'list-item';
}
// hack: map var(--affine-tag-xxx) colors to var(--affine-palette-line-xxx)
const tagColorMap = (color: string) => {
const mapping: Record<string, string> = {
'var(--affine-tag-red)': 'var(--affine-palette-line-red)',
'var(--affine-tag-teal)': 'var(--affine-palette-line-green)',
'var(--affine-tag-blue)': 'var(--affine-palette-line-blue)',
'var(--affine-tag-yellow)': 'var(--affine-palette-line-yellow)',
'var(--affine-tag-pink)': 'var(--affine-palette-line-magenta)',
'var(--affine-tag-white)': 'var(--affine-palette-line-grey)',
};
return mapping[color] || color;
};
const TagItem = ({ tag, idx, mode }: TagItemProps) => {
return (
<div
data-testid="page-tag"
className={mode === 'sticky' ? styles.tagSticky : styles.tagListItem}
data-idx={idx}
title={tag.value}
>
<div
className={styles.tagIndicator}
style={{
backgroundColor: tagColorMap(tag.color),
}}
/>
<div className={styles.tagLabel}>{tag.value}</div>
</div>
);
};
export const PageTags = ({
tags,
widthOnHover,
maxItems,
hoverExpandDirection,
}: PageTagsProps) => {
const sanitizedWidthOnHover = widthOnHover
? typeof widthOnHover === 'string'
? widthOnHover
: `${widthOnHover}px`
: 'auto';
const tagsContainerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (tagsContainerRef.current) {
const tagsContainer = tagsContainerRef.current;
const listener = () => {
// on mouseleave, reset scroll position to the hoverExpandDirection
tagsContainer.scrollTo({
left: hoverExpandDirection === 'left' ? Number.MAX_SAFE_INTEGER : 0,
behavior: 'smooth',
});
};
listener();
tagsContainerRef.current.addEventListener('mouseleave', listener);
return () => {
tagsContainer.removeEventListener('mouseleave', listener);
};
}
return;
}, [hoverExpandDirection]);
const tagsInPopover = useMemo(() => {
const lastTags = tags.slice(maxItems);
return (
<div className={styles.tagsListContainer}>
{lastTags.map((tag, idx) => (
<TagItem key={tag.id} tag={tag} idx={idx} mode="list-item" />
))}
</div>
);
}, [maxItems, tags]);
const tagsNormal = useMemo(() => {
const nTags = maxItems ? tags.slice(0, maxItems) : tags;
return nTags.map((tag, idx) => (
<TagItem key={tag.id} tag={tag} idx={idx} mode="sticky" />
));
}, [maxItems, tags]);
return (
<div
data-testid="page-tags"
className={styles.root}
style={{
// @ts-expect-error it's fine
'--hover-max-width': sanitizedWidthOnHover,
}}
onClick={stopPropagation}
>
<div
style={{
right: hoverExpandDirection === 'left' ? 0 : 'auto',
left: hoverExpandDirection === 'right' ? 0 : 'auto',
}}
className={clsx(styles.innerContainer)}
>
<div className={styles.innerBackdrop} />
<div className={styles.tagsScrollContainer} ref={tagsContainerRef}>
{tagsNormal}
</div>
{maxItems && tags.length > maxItems ? (
<Menu items={tagsInPopover}>
<div className={styles.showMoreTag}>
<MoreHorizontalIcon />
</div>
</Menu>
) : null}
</div>
</div>
);
};

4
packages/frontend/component/src/components/page-list/readme.md Normal file
View File

@ -0,0 +1,4 @@
# <PageListTable />
A new implementation of the list table component for Page. Replace existing `PageList` component.
May rename to `PageList` later.

188
packages/frontend/component/src/components/page-list/scoped-atoms.ts Normal file
View File

@ -0,0 +1,188 @@
import { DEFAULT_SORT_KEY } from '@affine/env/constant';
import type { PageMeta } from '@blocksuite/store';
import { atom } from 'jotai';
import { selectAtom } from 'jotai/utils';
import { isEqual } from 'lodash-es';
import { pagesToPageGroups } from './page-group';
import type { PageListProps, PageMetaRecord } from './types';
// for ease of use in the component tree
// note: must use selectAtom to access this atom for efficiency
// @ts-expect-error the error is expected but we will assume the default value is always there by using useHydrateAtoms
export const pageListPropsAtom = atom<PageListProps>();
// whether or not the table is in selection mode (showing selection checkbox & selection floating bar)
const selectionActiveAtom = atom(false);
export const selectionStateAtom = atom(
get => {
const baseAtom = selectAtom(
pageListPropsAtom,
props => {
const { selectable, selectedPageIds, onSelectedPageIdsChange } = props;
return {
selectable,
selectedPageIds,
onSelectedPageIdsChange,
};
},
isEqual
);
const baseState = get(baseAtom);
const selectionActive =
baseState.selectable === 'toggle'
? get(selectionActiveAtom)
: baseState.selectable;
return {
...baseState,
selectionActive,
};
},
(_get, set, active: boolean) => {
set(selectionActiveAtom, active);
}
);
// get handlers from pageListPropsAtom
export const pageListHandlersAtom = selectAtom(
pageListPropsAtom,
props => {
const { onSelectedPageIdsChange, onDragStart, onDragEnd } = props;
return {
onSelectedPageIdsChange,
onDragStart,
onDragEnd,
};
},
isEqual
);
export const pagesAtom = selectAtom(pageListPropsAtom, props => props.pages);
export const showOperationsAtom = selectAtom(
pageListPropsAtom,
props => !!props.pageOperationsRenderer
);
type SortingContext<T extends string | number | symbol> = {
key: T;
order: 'asc' | 'desc';
fallbackKey?: T;
};
type SorterConfig<T extends Record<string, unknown> = Record<string, unknown>> =
{
key?: keyof T;
order: 'asc' | 'desc';
sortingFn: (ctx: SortingContext<keyof T>, a: T, b: T) => number;
};
const defaultSortingFn: SorterConfig<PageMetaRecord>['sortingFn'] = (
ctx,
a,
b
) => {
const val = (obj: PageMetaRecord) => {
let v = obj[ctx.key];
if (v === undefined && ctx.fallbackKey) {
v = obj[ctx.fallbackKey];
}
return v;
};
const valA = val(a);
const valB = val(b);
const revert = ctx.order === 'desc';
const revertSymbol = revert ? -1 : 1;
if (typeof valA === 'string' && typeof valB === 'string') {
return valA.localeCompare(valB) * revertSymbol;
}
if (typeof valA === 'number' && typeof valB === 'number') {
return (valA - valB) * revertSymbol;
}
if (valA instanceof Date && valB instanceof Date) {
return (valA.getTime() - valB.getTime()) * revertSymbol;
}
if (!valA) {
return -1 * revertSymbol;
}
if (!valB) {
return 1 * revertSymbol;
}
if (Array.isArray(valA) && Array.isArray(valB)) {
return (valA.length - valB.length) * revertSymbol;
}
console.warn(
'Unsupported sorting type! Please use custom sorting function.',
valA,
valB
);
return 0;
};
const sorterStateAtom = atom<SorterConfig<PageMetaRecord>>({
key: DEFAULT_SORT_KEY,
order: 'desc',
sortingFn: defaultSortingFn,
});
export const sorterAtom = atom(
get => {
let pages = get(pagesAtom);
const sorterState = get(sorterStateAtom);
const sortCtx: SortingContext<keyof PageMetaRecord> | null = sorterState.key
? {
key: sorterState.key,
order: sorterState.order,
}
: null;
if (sortCtx) {
if (sorterState.key === 'updatedDate') {
sortCtx.fallbackKey = 'createDate';
}
const compareFn = (a: PageMetaRecord, b: PageMetaRecord) =>
sorterState.sortingFn(sortCtx, a, b);
pages = [...pages].sort(compareFn);
}
return {
pages,
...sortCtx,
};
},
(_get, set, { newSortKey }: { newSortKey: keyof PageMeta }) => {
set(sorterStateAtom, sorterState => {
if (sorterState.key === newSortKey) {
return {
...sorterState,
order: sorterState.order === 'asc' ? 'desc' : 'asc',
};
} else {
return {
key: newSortKey,
order: 'desc',
sortingFn: sorterState.sortingFn,
};
}
});
}
);
export const pageGroupsAtom = atom(get => {
let groupBy = get(selectAtom(pageListPropsAtom, props => props.groupBy));
const sorter = get(sorterAtom);
if (groupBy === false) {
groupBy = undefined;
} else if (groupBy === undefined) {
groupBy =
sorter.key === 'createDate' || sorter.key === 'updatedDate'
? sorter.key
: // default sort
!sorter.key
? DEFAULT_SORT_KEY
: undefined;
}
return pagesToPageGroups(sorter.pages, groupBy);
});

84
packages/frontend/component/src/components/page-list/styles.ts
View File

@ -1,84 +0,0 @@
import { displayFlex, styled } from '../../styles';
import { Content } from '../../ui/layout/content';
import { TableBodyRow } from '../../ui/table/table-row';
export const StyledTableContainer = styled('div')(({ theme }) => {
return {
height: '100%',
minHeight: '600px',
padding: '0 32px 180px 32px',
maxWidth: '100%',
[theme.breakpoints.down('sm')]: {
padding: '52px 0px',
'tr > td:first-of-type': {
borderTopLeftRadius: '0px',
borderBottomLeftRadius: '0px',
},
'tr > td:last-of-type': {
borderTopRightRadius: '0px',
borderBottomRightRadius: '0px',
},
},
};
});
/**
* @deprecated
*/
export const StyledTitleWrapper = styled('div')(() => {
return {
...displayFlex('flex-start', 'center'),
a: {
color: 'inherit',
},
'a:visited': {
color: 'unset',
},
'a:hover': {
color: 'var(--affine-primary-color)',
},
};
});
export const StyledTitleLink = styled('div')(() => {
return {
...displayFlex('flex-start', 'center'),
color: 'var(--affine-text-primary-color)',
'>svg': {
fontSize: '24px',
marginRight: '12px',
color: 'var(--affine-icon-color)',
},
};
});
export const StyledTitleContentWrapper = styled('div')(() => {
return {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
width: '100%',
overflow: 'hidden',
};
});
export const StyledTitlePreview = styled(Content)(() => {
return {
fontWeight: 400,
fontSize: 'var(--affine-font-xs)',
maxWidth: '100%',
};
});
export const StyledTableBodyRow = styled(TableBodyRow)(() => {
return {
cursor: 'pointer',
'.favorite-button': {
visibility: 'hidden',
},
'&:hover': {
'.favorite-button': {
visibility: 'visible',
},
},
};
});

65
packages/frontend/component/src/components/page-list/type.ts
View File

@ -1,65 +0,0 @@
import type { CollectionsAtom } from '@affine/component/page-list/use-collection-manager';
import type { Tag } from '@affine/env/filter';
import type { PropertiesMeta } from '@affine/env/filter';
import type { GetPageInfoById } from '@affine/env/page-info';
import type { ReactElement, ReactNode } from 'react';
/**
* Get the keys of an object type whose values are of a given type
*
* See https://stackoverflow.com/questions/54520676/in-typescript-how-to-get-the-keys-of-an-object-type-whose-values-are-of-a-given
*/
export type KeysMatching<T, V> = {
[K in keyof T]-?: T[K] extends V ? K : never;
}[keyof T];
export type ListData = {
pageId: string;
icon: JSX.Element;
title: string;
preview?: ReactNode;
tags: Tag[];
favorite: boolean;
createDate: Date;
updatedDate: Date;
isPublicPage: boolean;
onClickPage: () => void;
onOpenPageInNewTab: () => void;
bookmarkPage: () => void;
removeToTrash: () => void;
onDisablePublicSharing: () => void;
};
export type DateKey = KeysMatching<ListData, Date>;
export type TrashListData = {
pageId: string;
icon: JSX.Element;
title: string;
preview?: ReactNode;
createDate: Date;
// TODO remove optional after assert that trashDate is always set
trashDate?: Date;
onClickPage: () => void;
onRestorePage: () => void;
onPermanentlyDeletePage: () => void;
};
export type PageListProps = {
isPublicWorkspace?: boolean;
collectionsAtom: CollectionsAtom;
list: ListData[];
fallback?: ReactNode;
onCreateNewPage: () => void;
onCreateNewEdgeless: () => void;
onImportFile: () => void;
getPageInfo: GetPageInfoById;
propertiesMeta: PropertiesMeta;
};
export type DraggableTitleCellData = {
pageId: string;
pageTitle: string;
pagePreview?: string;
icon: ReactElement;
};

87
packages/frontend/component/src/components/page-list/types.ts Normal file
View File

@ -0,0 +1,87 @@
import type { Tag } from '@affine/env/filter';
import type { PageMeta, Workspace } from '@blocksuite/store';
import type { ReactNode } from 'react';
import type { To } from 'react-router-dom';
// TODO: consider reducing the number of props here
// using type instead of interface to make it Record compatible
export type PageListItemProps = {
pageId: string;
icon: JSX.Element;
title: ReactNode; // using ReactNode to allow for rich content rendering
preview?: ReactNode; // using ReactNode to allow for rich content rendering
tags: Tag[];
createDate: Date;
updatedDate?: Date;
isPublicPage?: boolean;
to?: To; // whether or not to render this item as a Link
draggable?: boolean; // whether or not to allow dragging this item
selectable?: boolean; // show selection checkbox
selected?: boolean;
operations?: ReactNode; // operations to show on the right side of the item
onClick?: () => void;
onSelectedChange?: () => void;
};
export interface PageListHeaderProps {}
// todo: a temporary solution. may need to be refactored later
export type PagesGroupByType = 'createDate' | 'updatedDate'; // todo: can add more later
// todo: a temporary solution. may need to be refactored later
export interface SortBy {
key: 'createDate' | 'updatedDate';
order: 'asc' | 'desc';
}
export type DateKey = 'createDate' | 'updatedDate';
export interface PageListProps {
// required data:
pages: PageMeta[];
blockSuiteWorkspace: Workspace;
className?: string;
hideHeader?: boolean; // whether or not to hide the header. default is false (showing header)
groupBy?: PagesGroupByType | false;
isPreferredEdgeless: (pageId: string) => boolean;
clickMode?: 'select' | 'link'; // select => click to select; link => click to navigate
selectable?: 'toggle' | boolean; // show selection checkbox. toggle means showing a toggle selection in header on click; boolean == true means showing a selection checkbox for each item
selectedPageIds?: string[]; // selected page ids
onSelectedPageIdsChange?: (selected: string[]) => void;
draggable?: boolean; // whether or not to allow dragging this page item
onDragStart?: (pageId: string) => void;
onDragEnd?: (pageId: string) => void;
// we also need the following to make sure the page list functions properly
// maybe we could also give a function to render PageListItem?
pageOperationsRenderer?: (page: PageMeta) => ReactNode;
}
export interface PageListHandle {
toggleSelectable: () => void;
}
export interface PageGroupDefinition {
id: string;
// using a function to render custom group header
label: (() => ReactNode) | ReactNode;
match: (item: PageMeta) => boolean;
}
export interface PageGroupProps {
id: string;
label?: ReactNode; // if there is no label, it is a default group (without header)
items: PageMeta[];
allItems: PageMeta[];
}
type MakeRecord<T> = {
[P in keyof T]: T[P];
};
export type PageMetaRecord = MakeRecord<PageMeta>;
export type DraggableTitleCellData = {
pageId: string;
pageTitle: ReactNode;
};

203
packages/frontend/component/src/components/page-list/use-collection-manager.ts
View File

@ -1,137 +1,124 @@
import type { Collection, Filter, VariableMap } from '@affine/env/filter';
import { useAtom } from 'jotai';
import { atomWithReset, RESET } from 'jotai/utils';
import type { WritableAtom } from 'jotai/vanilla';
import type {
Collection,
DeleteCollectionInfo,
Filter,
VariableMap,
} from '@affine/env/filter';
import type { PageMeta } from '@blocksuite/store';
import { type Atom, useAtom, useAtomValue } from 'jotai';
import { atomWithReset } from 'jotai/utils';
import { useCallback } from 'react';
import { NIL } from 'uuid';
import { evalFilterList } from './filter';
const defaultCollection = {
id: NIL,
name: 'All',
filterList: [],
workspaceId: 'temporary',
export const createEmptyCollection = (
id: string,
data?: Partial<Omit<Collection, 'id'>>
): Collection => {
return {
id,
name: '',
mode: 'page',
filterList: [],
pages: [],
allowList: [],
...data,
};
};
const collectionAtom = atomWithReset<{
currentId: string;
defaultCollection: Collection;
}>({
currentId: NIL,
defaultCollection: defaultCollection,
const defaultCollection: Collection = createEmptyCollection(NIL, {
name: 'All',
mode: 'rule',
});
const defaultCollectionAtom = atomWithReset<Collection>(defaultCollection);
export const currentCollectionAtom = atomWithReset<string>(NIL);
export type CollectionsAtom = WritableAtom<
Collection[] | Promise<Collection[]>,
[Collection[] | ((collection: Collection[]) => Collection[])],
Promise<void>
>;
export type Updater<T> = (value: T) => T;
export type CollectionUpdater = Updater<Collection>;
export type CollectionsCRUD = {
addCollection: (...collections: Collection[]) => Promise<void>;
collections: Collection[];
updateCollection: (id: string, updater: CollectionUpdater) => Promise<void>;
deleteCollection: (
info: DeleteCollectionInfo,
...ids: string[]
) => Promise<void>;
};
export type CollectionsCRUDAtom = Atom<CollectionsCRUD>;
export const useSavedCollections = (collectionAtom: CollectionsAtom) => {
const [savedCollections, setCollections] = useAtom(collectionAtom);
const saveCollection = useCallback(
async (collection: Collection) => {
if (collection.id === NIL) {
return;
}
await setCollections(old => [...old, collection]);
},
[setCollections]
);
const deleteCollection = useCallback(
async (id: string) => {
if (id === NIL) {
return;
}
await setCollections(old => old.filter(v => v.id !== id));
},
[setCollections]
);
export const useSavedCollections = (collectionAtom: CollectionsCRUDAtom) => {
const [{ collections, addCollection, deleteCollection, updateCollection }] =
useAtom(collectionAtom);
const addPage = useCallback(
async (collectionId: string, pageId: string) => {
await setCollections(old => {
const collection = old.find(v => v.id === collectionId);
if (!collection) {
return old;
await updateCollection(collectionId, old => {
if (old.mode === 'page') {
return {
...old,
pages: [pageId, ...(old.pages ?? [])],
};
}
return [
...old.filter(v => v.id !== collectionId),
{
...collection,
allowList: [pageId, ...(collection.allowList ?? [])],
},
];
return {
...old,
allowList: [pageId, ...(old.allowList ?? [])],
};
});
},
[setCollections]
[updateCollection]
);
return {
savedCollections,
saveCollection,
collections,
addCollection,
updateCollection,
deleteCollection,
addPage,
};
};
export const useCollectionManager = (collectionsAtom: CollectionsAtom) => {
const { savedCollections, saveCollection, deleteCollection, addPage } =
useSavedCollections(collectionsAtom);
const [collectionData, setCollectionData] = useAtom(collectionAtom);
const updateCollection = useCallback(
export const useCollectionManager = (collectionsAtom: CollectionsCRUDAtom) => {
const {
collections,
updateCollection,
addCollection,
deleteCollection,
addPage,
} = useSavedCollections(collectionsAtom);
const currentCollectionId = useAtomValue(currentCollectionAtom);
const [defaultCollection, updateDefaultCollection] = useAtom(
defaultCollectionAtom
);
const update = useCallback(
async (collection: Collection) => {
if (collection.id === NIL) {
setCollectionData({
...collectionData,
defaultCollection: collection,
});
updateDefaultCollection(collection);
} else {
await saveCollection(collection);
await updateCollection(collection.id, () => collection);
}
},
[collectionData, saveCollection, setCollectionData]
[updateDefaultCollection, updateCollection]
);
const selectCollection = useCallback(
(id: string) => {
setCollectionData({
...collectionData,
currentId: id,
});
},
[collectionData, setCollectionData]
);
const backToAll = useCallback(() => {
setCollectionData(RESET);
}, [setCollectionData]);
const setTemporaryFilter = useCallback(
(filterList: Filter[]) => {
setCollectionData({
currentId: NIL,
defaultCollection: {
...defaultCollection,
filterList: filterList,
},
updateDefaultCollection({
...defaultCollection,
filterList: filterList,
});
},
[setCollectionData]
[updateDefaultCollection, defaultCollection]
);
const currentCollection =
collectionData.currentId === NIL
? collectionData.defaultCollection
: savedCollections.find(v => v.id === collectionData.currentId) ??
collectionData.defaultCollection;
currentCollectionId === NIL
? defaultCollection
: collections.find(v => v.id === currentCollectionId) ??
defaultCollection;
return {
currentCollection: currentCollection,
savedCollections,
isDefault: currentCollection.id === NIL,
savedCollections: collections,
isDefault: currentCollectionId === NIL,
// actions
saveCollection,
updateCollection,
selectCollection,
backToAll,
createCollection: addCollection,
updateCollection: update,
deleteCollection,
addPage,
setTemporaryFilter,
@ -139,3 +126,25 @@ export const useCollectionManager = (collectionsAtom: CollectionsAtom) => {
};
export const filterByFilterList = (filterList: Filter[], varMap: VariableMap) =>
evalFilterList(filterList, varMap);
export const filterPage = (collection: Collection, page: PageMeta) => {
if (collection.mode === 'page') {
return collection.pages.includes(page.id);
}
return filterPageByRules(collection.filterList, collection.allowList, page);
};
export const filterPageByRules = (
rules: Filter[],
allowList: string[],
page: PageMeta
) => {
if (allowList?.includes(page.id)) {
return true;
}
return filterByFilterList(rules, {
'Is Favourited': !!page.favorite,
Created: page.createDate,
Updated: page.updatedDate ?? page.createDate,
Tags: page.tags,
});
};

65
packages/frontend/component/src/components/page-list/use-date-group.tsx
View File

@ -1,65 +0,0 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import type { DateKey, ListData } from './type';
import {
isLastMonth,
isLastWeek,
isLastYear,
isToday,
isYesterday,
} from './utils';
export const useDateGroup = ({
data,
key,
}: {
data: ListData[];
key?: DateKey;
}) => {
const t = useAFFiNEI18N();
if (!key) {
return data.map(item => ({ ...item, groupName: '' }));
}
const fallbackGroup = {
id: 'earlier',
label: t['com.affine.earlier'](),
match: (_date: Date) => true,
};
const groups = [
{
id: 'today',
label: t['com.affine.today'](),
match: (date: Date) => isToday(date),
},
{
id: 'yesterday',
label: t['com.affine.yesterday'](),
match: (date: Date) => isYesterday(date) && !isToday(date),
},
{
id: 'last7Days',
label: t['com.affine.last7Days'](),
match: (date: Date) => isLastWeek(date) && !isYesterday(date),
},
{
id: 'last30Days',
label: t['com.affine.last30Days'](),
match: (date: Date) => isLastMonth(date) && !isLastWeek(date),
},
{
id: 'currentYear',
label: t['com.affine.currentYear'](),
match: (date: Date) => isLastYear(date) && !isLastMonth(date),
},
] as const;
return data.map(item => {
const group = groups.find(group => group.match(item[key])) ?? fallbackGroup;
return {
...item,
groupName: group.label,
};
});
};

76
packages/frontend/component/src/components/page-list/utils.tsx
View File

@ -1,4 +1,12 @@
import { useMediaQuery, useTheme } from '@mui/material';
import clsx from 'clsx';
import {
type BaseSyntheticEvent,
forwardRef,
type PropsWithChildren,
} from 'react';
import * as styles from './page-list.css';
export const useIsSmallDevices = () => {
const theme = useTheme();
@ -69,3 +77,71 @@ export const formatDate = (date: Date): string => {
// MM-DD HH:mm
return `${month}-${day} ${hours}:${minutes}`;
};
export type ColWrapperProps = PropsWithChildren<{
flex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
alignment?: 'start' | 'center' | 'end';
styles?: React.CSSProperties;
hideInSmallContainer?: boolean;
}> &
React.HTMLAttributes<Element>;
export const ColWrapper = forwardRef<HTMLDivElement, ColWrapperProps>(
function ColWrapper(
{
flex,
alignment,
hideInSmallContainer,
className,
style,
children,
...rest
}: ColWrapperProps,
ref
) {
return (
<div
{...rest}
ref={ref}
data-testid="page-list-flex-wrapper"
style={{
...style,
flexGrow: flex,
flexBasis: flex ? `${(flex / 12) * 100}%` : 'auto',
justifyContent: alignment,
}}
className={clsx(
className,
styles.colWrapper,
hideInSmallContainer ? styles.hideInSmallContainer : null
)}
>
{children}
</div>
);
}
);
export const withinDaysAgo = (date: Date, days: number): boolean => {
const startDate = new Date();
const day = startDate.getDay();
const month = startDate.getMonth();
const year = startDate.getFullYear();
return new Date(year, month, day - days) <= date;
};
export const betweenDaysAgo = (
date: Date,
days0: number,
days1: number
): boolean => {
return !withinDaysAgo(date, days0) && withinDaysAgo(date, days1);
};
export function stopPropagation(event: BaseSyntheticEvent) {
event.stopPropagation();
event.preventDefault();
}
export function stopPropagationWithoutPrevent(event: BaseSyntheticEvent) {
event.stopPropagation();
}

133
packages/frontend/component/src/components/page-list/view/affine-shape.tsx Normal file
View File

@ -0,0 +1,133 @@
import type React from 'react';
export const AffineShapeIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg
width="200"
height="174"
viewBox="0 0 200 174"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect width="200" height="173.475" fill="white" />
<rect
x="51.7242"
y="38.4618"
width="96.5517"
height="96.5517"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M51.8341 86.7377L100 38.5717L148.166 86.7377L100 134.904L51.8341 86.7377Z"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M99.6055 38.1965C107.662 33.4757 117.043 30.7695 127.056 30.7695C157.087 30.7695 181.432 55.1147 181.432 85.1461C181.432 107.547 167.887 126.783 148.541 135.113"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M148.375 86.4724C153.096 94.5294 155.802 103.91 155.802 113.923C155.802 143.954 131.457 168.299 101.426 168.299C79.0252 168.299 59.7883 154.754 51.4585 135.408"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M100.395 135.113C92.3376 139.834 82.957 142.54 72.9444 142.54C42.913 142.54 18.5677 118.195 18.5677 88.1636C18.5677 65.7632 32.1126 46.5264 51.459 38.1965"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M51.4588 87.1319C46.7379 79.0749 44.0317 69.6944 44.0317 59.6818C44.0317 29.6504 68.377 5.3051 98.4084 5.30509C120.809 5.30509 140.046 18.85 148.375 38.1963"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M51.459 38.1965L148.541 135.279"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M148.541 38.1965L51.459 135.279"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M99.9995 38.1965V135.279"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M148.541 86.7376L51.4588 86.7376"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<ellipse
cx="148.276"
cy="38.4618"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
/>
<ellipse
cx="148.276"
cy="135.014"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
/>
<ellipse
cx="148.276"
cy="86.7377"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
/>
<ellipse
cx="51.7239"
cy="38.4618"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
/>
<ellipse
cx="51.7239"
cy="135.014"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
/>
<ellipse
cx="51.7239"
cy="86.7377"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
/>
<ellipse
cx="99.9998"
cy="38.4618"
rx="3.97878"
ry="3.97878"
transform="rotate(-90 99.9998 38.4618)"
fill="#5B5B5B"
/>
<ellipse
cx="99.9998"
cy="86.2071"
rx="3.97878"
ry="3.97878"
transform="rotate(-90 99.9998 86.2071)"
fill="#5B5B5B"
/>
<ellipse
cx="99.9998"
cy="135.014"
rx="3.97878"
ry="3.97878"
transform="rotate(-90 99.9998 135.014)"
fill="#5B5B5B"
/>
</svg>
);

28
packages/frontend/component/src/components/page-list/view/collection-bar.css.ts
View File

@ -1,7 +1,5 @@
import { style } from '@vanilla-extract/css';
import { viewMenu } from './collection-list.css';
export const view = style({
display: 'flex',
alignItems: 'center',
@ -9,7 +7,6 @@ export const view = style({
fontSize: 14,
fontWeight: 600,
height: '100%',
paddingLeft: 16,
});
export const option = style({
@ -29,28 +26,3 @@ export const option = style({
},
},
});
export const pin = style({
opacity: 1,
});
export const pinedIcon = style({
display: 'block',
selectors: {
[`${option}:hover &`]: {
display: 'none',
},
[`${viewMenu}:hover &`]: {
display: 'none',
},
},
});
export const pinIcon = style({
display: 'none',
selectors: {
[`${option}:hover &`]: {
display: 'block',
},
[`${viewMenu}:hover &`]: {
display: 'block',
},
},
});

44
packages/frontend/component/src/components/page-list/view/collection-bar.tsx
View File

@ -1,4 +1,4 @@
import type { PropertiesMeta } from '@affine/env/filter';
import type { DeleteCollectionInfo, PropertiesMeta } from '@affine/env/filter';
import type { GetPageInfoById } from '@affine/env/page-info';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { ViewLayersIcon } from '@blocksuite/icons';
@ -8,22 +8,24 @@ import clsx from 'clsx';
import { useState } from 'react';
import {
type CollectionsAtom,
type CollectionsCRUDAtom,
useCollectionManager,
} from '../use-collection-manager';
import * as styles from './collection-bar.css';
import { EditCollectionModal } from './create-collection';
import { type AllPageListConfig, EditCollectionModal } from './edit-collection';
import { useActions } from './use-action';
interface CollectionBarProps {
getPageInfo: GetPageInfoById;
propertiesMeta: PropertiesMeta;
collectionsAtom: CollectionsAtom;
columnsCount: number;
collectionsAtom: CollectionsCRUDAtom;
backToAll: () => void;
allPageListConfig: AllPageListConfig;
info: DeleteCollectionInfo;
}
export const CollectionBar = (props: CollectionBarProps) => {
const { getPageInfo, propertiesMeta, columnsCount, collectionsAtom } = props;
const { collectionsAtom } = props;
const t = useAFFiNEI18N();
const setting = useCollectionManager(collectionsAtom);
const collection = setting.currentCollection;
@ -31,16 +33,23 @@ export const CollectionBar = (props: CollectionBarProps) => {
const actions = useActions({
collection,
setting,
info: props.info,
openEdit: () => setOpen(true),
});
return !setting.isDefault ? (
<tr style={{ userSelect: 'none' }}>
<td>
<div
style={{
userSelect: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '12px 20px',
}}
>
<div>
<div className={styles.view}>
<EditCollectionModal
propertiesMeta={propertiesMeta}
getPageInfo={getPageInfo}
allPageListConfig={props.allPageListConfig}
init={collection}
open={open}
onOpenChange={setOpen}
@ -84,11 +93,8 @@ export const CollectionBar = (props: CollectionBarProps) => {
);
})}
</div>
</td>
{Array.from({ length: columnsCount - 2 }).map((_, i) => (
<td key={i}></td>
))}
<td
</div>
<div
style={{
display: 'flex',
justifyContent: 'end',
@ -96,11 +102,11 @@ export const CollectionBar = (props: CollectionBarProps) => {
>
<Button
style={{ border: 'none', position: 'static' }}
onClick={() => setting.backToAll()}
onClick={props.backToAll}
>
{t['com.affine.collectionBar.backToAll']()}
</Button>
</td>
</tr>
</div>
</div>
) : null;
};

194
packages/frontend/component/src/components/page-list/view/collection-list.css.ts
View File

@ -1,4 +1,4 @@
import { globalStyle, style } from '@vanilla-extract/css';
import { style } from '@vanilla-extract/css';
export const menuTitleStyle = style({
marginLeft: '12px',
@ -14,30 +14,6 @@ export const menuDividerStyle = style({
height: '1px',
background: 'var(--affine-border-color)',
});
export const viewButton = style({
borderRadius: '8px',
height: '100%',
padding: '4px 8px',
fontSize: 'var(--affine-font-xs)',
background: 'var(--affine-white)',
['WebkitAppRegion' as string]: 'no-drag',
maxWidth: '150px',
color: 'var(--affine-text-secondary-color)',
border: '1px solid var(--affine-border-color)',
transition: 'margin-left 0.2s ease-in-out',
':hover': {
borderColor: 'var(--affine-border-color)',
background: 'var(--affine-hover-color)',
},
marginRight: '20px',
});
globalStyle(`${viewButton} > span`, {
display: 'block',
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
});
export const viewMenu = style({});
export const viewOption = style({
borderRadius: 8,
@ -57,171 +33,9 @@ export const viewOption = style({
},
},
});
export const deleteOption = style({
':hover': {
backgroundColor: '#FFEFE9',
},
});
export const filterButton = style({
borderRadius: '8px',
height: '100%',
width: '100%',
marginRight: '20px',
padding: '4px 8px',
fontSize: 'var(--affine-font-xs)',
background: 'var(--affine-white)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'var(--affine-text-secondary-color)',
border: '1px solid var(--affine-border-color)',
['WebkitAppRegion' as string]: 'no-drag',
transition: 'margin-left 0.2s ease-in-out',
':hover': {
borderColor: 'var(--affine-border-color)',
background: 'var(--affine-hover-color)',
},
});
export const filterButtonCollapse = style({
marginLeft: '20px',
});
export const viewDivider = style({
'::after': {
content: '""',
display: 'block',
width: '100%',
height: '1px',
background: 'var(--affine-border-color)',
position: 'absolute',
bottom: 0,
left: 0,
margin: '0 1px',
},
});
export const saveButton = style({
marginTop: '4px',
borderRadius: '8px',
padding: '8px 0',
':hover': {
background: 'var(--affine-hover-color)',
color: 'var(--affine-text-primary-color)',
border: '1px solid var(--affine-border-color)',
},
});
export const saveButtonContainer = style({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
width: '100%',
height: '100%',
padding: '8px',
});
export const saveIcon = style({
display: 'flex',
alignItems: 'center',
fontSize: 'var(--affine-font-sm)',
marginRight: '8px',
});
export const saveText = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 'var(--affine-font-sm)',
});
export const cancelButton = style({
background: 'var(--affine-hover-color)',
borderRadius: '8px',
':hover': {
background: 'var(--affine-hover-color)',
color: 'var(--affine-text-primary-color)',
border: '1px solid var(--affine-border-color)',
},
});
export const saveTitle = style({
fontSize: 'var(--affine-font-h-6)',
fontWeight: '600',
lineHeight: '24px',
paddingBottom: 20,
});
export const allowList = style({});
export const allowTitle = style({
fontSize: 12,
margin: '20px 0',
});
export const allowListContent = style({
margin: '8px 0',
});
export const excludeList = style({
backgroundColor: 'var(--affine-background-warning-color)',
padding: 18,
borderRadius: 8,
});
export const excludeListContent = style({
margin: '8px 0',
});
export const filterTitle = style({
fontSize: 12,
fontWeight: 600,
marginBottom: 10,
});
export const excludeTitle = style({
fontSize: 12,
fontWeight: 600,
});
export const excludeTip = style({
color: 'var(--affine-text-secondary-color)',
fontSize: 12,
});
export const scrollContainer = style({
maxHeight: '70vh',
flex: 1,
display: 'flex',
flexDirection: 'column',
});
export const container = style({
display: 'flex',
flexDirection: 'column',
});
export const pageContainer = style({
fontSize: 14,
fontWeight: 600,
height: 32,
display: 'flex',
alignItems: 'center',
paddingLeft: 8,
paddingRight: 5,
});
export const pageIcon = style({
marginRight: 20,
display: 'flex',
alignItems: 'center',
});
export const pageTitle = style({
flex: 1,
});
export const deleteIcon = style({
marginLeft: 20,
display: 'flex',
alignItems: 'center',
borderRadius: 4,
padding: 4,
cursor: 'pointer',
':hover': {
color: 'var(--affine-error-color)',
backgroundColor: 'var(--affine-background-error-color)',
},
});
export const filterMenuTrigger = style({
padding: '6px 8px',
background: 'var(--affine-hover-color)',
':hover': {
backgroundColor: 'var(--affine-hover-color)',
},
});

220
packages/frontend/component/src/components/page-list/view/collection-list.tsx
View File

@ -1,114 +1,32 @@
import type { Collection, Filter } from '@affine/env/filter';
import type {
Collection,
DeleteCollectionInfo,
Filter,
} from '@affine/env/filter';
import type { PropertiesMeta } from '@affine/env/filter';
import type { GetPageInfoById } from '@affine/env/page-info';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { FilteredIcon, FolderIcon, ViewLayersIcon } from '@blocksuite/icons';
import { FilteredIcon } from '@blocksuite/icons';
import { Button } from '@toeverything/components/button';
import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
import { Tooltip } from '@toeverything/components/tooltip';
import clsx from 'clsx';
import type { MouseEvent } from 'react';
import { Menu } from '@toeverything/components/menu';
import { useCallback, useState } from 'react';
import { FlexWrapper } from '../../../ui/layout';
import { CreateFilterMenu } from '../filter/vars';
import type { useCollectionManager } from '../use-collection-manager';
import * as styles from './collection-list.css';
import { EditCollectionModal } from './create-collection';
import { useActions } from './use-action';
import { CollectionOperations } from './collection-operations';
import { type AllPageListConfig, EditCollectionModal } from './edit-collection';
const CollectionOption = ({
collection,
setting,
updateCollection,
}: {
collection: Collection;
setting: ReturnType<typeof useCollectionManager>;
updateCollection: (view: Collection) => void;
}) => {
const actions = useActions({
collection,
setting,
openEdit: updateCollection,
});
const selectCollection = useCallback(
() => setting.selectCollection(collection.id),
[setting, collection.id]
);
return (
<MenuItem
data-testid="collection-select-option"
preFix={
<MenuIcon>
<ViewLayersIcon />
</MenuIcon>
}
onClick={selectCollection}
key={collection.id}
className={styles.viewMenu}
>
<Tooltip
content={collection.name}
side="right"
rootOptions={{
delayDuration: 1500,
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<div
style={{
maxWidth: '150px',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{collection.name}
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
{actions.map((action, i) => {
const onClick = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
action.click();
};
return (
<div
data-testid={`collection-select-option-${action.name}`}
key={i}
onClick={onClick}
style={{ marginLeft: i === 0 ? 28 : undefined }}
className={clsx(styles.viewOption, action.className)}
>
{action.icon}
</div>
);
})}
</div>
</div>
</Tooltip>
</MenuItem>
);
};
export const CollectionList = ({
setting,
getPageInfo,
propertiesMeta,
allPageListConfig,
userInfo,
}: {
setting: ReturnType<typeof useCollectionManager>;
getPageInfo: GetPageInfoById;
propertiesMeta: PropertiesMeta;
allPageListConfig: AllPageListConfig;
userInfo: DeleteCollectionInfo;
}) => {
const t = useAFFiNEI18N();
const [collection, setCollection] = useState<Collection>();
@ -140,83 +58,51 @@ export const CollectionList = ({
);
return (
<FlexWrapper alignItems="center">
{setting.savedCollections.length > 0 && (
<Menu
items={
<div style={{ minWidth: 150 }}>
<MenuItem
preFix={
<MenuIcon>
<FolderIcon />
</MenuIcon>
}
onClick={setting.backToAll}
className={styles.viewMenu}
>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<div>All</div>
</div>
</MenuItem>
<div className={styles.menuTitleStyle}>Saved Collection</div>
<div className={styles.menuDividerStyle}></div>
{setting.savedCollections.map(view => (
<CollectionOption
key={view.id}
collection={view}
setting={setting}
updateCollection={setCollection}
/>
))}
</div>
}
{setting.isDefault ? (
<>
<Menu
items={
<CreateFilterMenu
propertiesMeta={propertiesMeta}
value={setting.currentCollection.filterList}
onChange={onChange}
/>
}
>
<Button
className={styles.filterMenuTrigger}
type="default"
icon={<FilteredIcon />}
data-testid="create-first-filter"
>
{t['com.affine.filter']()}
</Button>
</Menu>
<EditCollectionModal
allPageListConfig={allPageListConfig}
init={collection}
open={!!collection}
onOpenChange={closeUpdateCollectionModal}
onConfirm={onConfirm}
/>
</>
) : (
<CollectionOperations
info={userInfo}
collection={setting.currentCollection}
config={allPageListConfig}
setting={setting}
>
<Button
data-testid="collection-select"
style={{ marginRight: '20px' }}
className={styles.filterMenuTrigger}
type="default"
icon={<FilteredIcon />}
data-testid="create-first-filter"
>
<Tooltip
content={setting.currentCollection.name}
rootOptions={{
delayDuration: 1500,
}}
>
<>{setting.currentCollection.name}</>
</Tooltip>
{t['com.affine.filter']()}
</Button>
</Menu>
</CollectionOperations>
)}
<Menu
items={
<CreateFilterMenu
propertiesMeta={propertiesMeta}
value={setting.currentCollection.filterList}
onChange={onChange}
/>
}
>
<Button
className={styles.filterMenuTrigger}
type="default"
icon={<FilteredIcon />}
data-testid="create-first-filter"
>
{t['com.affine.filter']()}
</Button>
</Menu>
<EditCollectionModal
propertiesMeta={propertiesMeta}
getPageInfo={getPageInfo}
init={collection}
open={!!collection}
onOpenChange={closeUpdateCollectionModal}
onConfirm={onConfirm}
/>
</FlexWrapper>
);
};

10
packages/frontend/component/src/components/page-list/view/collection-operations.css.ts Normal file
View File

@ -0,0 +1,10 @@
import { style } from '@vanilla-extract/css';
export const divider = style({
marginTop: '2px',
marginBottom: '2px',
marginLeft: '12px',
marginRight: '8px',
height: '1px',
background: 'var(--affine-border-color)',
});

145
packages/frontend/component/src/components/page-list/view/collection-operations.tsx Normal file
View File

@ -0,0 +1,145 @@
import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { DeleteIcon, EditIcon, FilterIcon } from '@blocksuite/icons';
import {
Menu,
MenuIcon,
MenuItem,
type MenuItemProps,
} from '@toeverything/components/menu';
import {
type PropsWithChildren,
type ReactElement,
useCallback,
useMemo,
} from 'react';
import type { useCollectionManager } from '../use-collection-manager';
import type { AllPageListConfig } from '.';
import * as styles from './collection-operations.css';
import {
useEditCollection,
useEditCollectionName,
} from './use-edit-collection';
export const CollectionOperations = ({
collection,
config,
setting,
info,
children,
}: PropsWithChildren<{
info: DeleteCollectionInfo;
collection: Collection;
config: AllPageListConfig;
setting: ReturnType<typeof useCollectionManager>;
}>) => {
const { open: openEditCollectionModal, node: editModal } =
useEditCollection(config);
const t = useAFFiNEI18N();
const { open: openEditCollectionNameModal, node: editNameModal } =
useEditCollectionName({
title: t['com.affine.editCollection.renameCollection'](),
});
const showEditName = useCallback(() => {
openEditCollectionNameModal(collection.name)
.then(name => {
return setting.updateCollection({ ...collection, name });
})
.catch(err => {
console.error(err);
});
}, [openEditCollectionNameModal, collection, setting]);
const showEdit = useCallback(() => {
openEditCollectionModal(collection)
.then(collection => {
return setting.updateCollection(collection);
})
.catch(err => {
console.error(err);
});
}, [setting, collection, openEditCollectionModal]);
const actions = useMemo<
Array<
| {
icon: ReactElement;
name: string;
click: () => void;
type?: MenuItemProps['type'];
element?: undefined;
}
| {
element: ReactElement;
}
>
>(
() => [
{
icon: (
<MenuIcon>
<EditIcon />
</MenuIcon>
),
name: t['com.affine.collection.menu.rename'](),
click: showEditName,
},
{
icon: (
<MenuIcon>
<FilterIcon />
</MenuIcon>
),
name: t['com.affine.collection.menu.edit'](),
click: showEdit,
},
{
element: <div key="divider" className={styles.divider}></div>,
},
{
icon: (
<MenuIcon>
<DeleteIcon />
</MenuIcon>
),
name: t['Delete'](),
click: () => {
setting.deleteCollection(info, collection.id).catch(err => {
console.error(err);
});
},
type: 'danger',
},
],
[t, showEditName, showEdit, setting, info, collection.id]
);
return (
<>
{editModal}
{editNameModal}
<Menu
items={
<div style={{ minWidth: 150 }}>
{actions.map(action => {
if (action.element) {
return action.element;
}
return (
<MenuItem
data-testid="collection-option"
key={action.name}
type={action.type}
preFix={action.icon}
onClick={action.click}
>
{action.name}
</MenuItem>
);
})}
</div>
}
>
{children}
</Menu>
</>
);
};

28
packages/frontend/component/src/components/page-list/view/create-collection.css.ts Normal file
View File

@ -0,0 +1,28 @@
import { style } from '@vanilla-extract/css';
export const footer = style({
display: 'flex',
justifyContent: 'flex-end',
paddingTop: 20,
gap: 20,
});
export const createTips = style({
color: 'var(--affine-text-secondary-color)',
fontSize: 12,
lineHeight: '20px',
});
export const label = style({
color: 'var(--affine-text-secondary-color)',
fontSize: 14,
lineHeight: '22px',
});
export const content = style({
display: 'flex',
flexDirection: 'column',
gap: 8,
padding: '12px 0px 20px',
marginBottom: 8,
});

304
packages/frontend/component/src/components/page-list/view/create-collection.tsx
View File

@ -1,45 +1,40 @@
import type { Collection, Filter } from '@affine/env/filter';
import type { PropertiesMeta } from '@affine/env/filter';
import type { GetPageInfoById } from '@affine/env/page-info';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
EdgelessIcon,
PageIcon,
RemoveIcon,
SaveIcon,
} from '@blocksuite/icons';
createEmptyCollection,
useEditCollectionName,
} from '@affine/component/page-list';
import type { Collection } from '@affine/env/filter';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { SaveIcon } from '@blocksuite/icons';
import { Button } from '@toeverything/components/button';
import { Modal } from '@toeverything/components/modal';
import { nanoid } from 'nanoid';
import { useCallback, useMemo, useState } from 'react';
import { Input, ScrollableContainer } from '../../..';
import { FilterList } from '../filter';
import * as styles from './collection-list.css';
import Input from '../../../ui/input';
import * as styles from './create-collection.css';
interface EditCollectionModalProps {
init?: Collection;
export interface CreateCollectionModalProps {
title?: string;
onConfirmText?: string;
init: string;
onConfirm: (title: string) => Promise<void>;
open: boolean;
getPageInfo: GetPageInfoById;
propertiesMeta: PropertiesMeta;
showTips?: boolean;
onOpenChange: (open: boolean) => void;
onConfirm: (view: Collection) => Promise<void>;
}
export const EditCollectionModal = ({
export const CreateCollectionModal = ({
init,
onConfirm,
open,
showTips,
onOpenChange,
getPageInfo,
propertiesMeta,
title,
}: EditCollectionModalProps) => {
}: CreateCollectionModalProps) => {
const t = useAFFiNEI18N();
const onConfirmOnCollection = useCallback(
(view: Collection) => {
onConfirm(view)
const onConfirmTitle = useCallback(
(title: string) => {
onConfirm(title)
.then(() => {
onOpenChange(false);
})
@ -54,206 +49,73 @@ export const EditCollectionModal = ({
}, [onOpenChange]);
return (
<Modal
open={open}
onOpenChange={onOpenChange}
width={600}
contentOptions={{
style: { padding: '40px' },
}}
>
{init ? (
<EditCollection
propertiesMeta={propertiesMeta}
title={title}
<Modal open={open} title={title} onOpenChange={onOpenChange} width={480}>
{init != null ? (
<CreateCollection
showTips={showTips}
onConfirmText={t['com.affine.editCollection.save']()}
init={init}
getPageInfo={getPageInfo}
onConfirm={onConfirmTitle}
onCancel={onCancel}
onConfirm={onConfirmOnCollection}
/>
) : null}
</Modal>
);
};
interface PageProps {
id: string;
getPageInfo: GetPageInfoById;
onClick: (id: string) => void;
}
const Page = ({ id, onClick, getPageInfo }: PageProps) => {
const page = getPageInfo(id);
const handleClick = useCallback(() => onClick(id), [id, onClick]);
return (
<>
{page ? (
<div className={styles.pageContainer}>
<div className={styles.pageIcon}>
{page.isEdgeless ? (
<EdgelessIcon style={{ width: 17.5, height: 17.5 }} />
) : (
<PageIcon style={{ width: 17.5, height: 17.5 }} />
)}
</div>
<div className={styles.pageTitle}>{page.title}</div>
<div onClick={handleClick} className={styles.deleteIcon}>
<RemoveIcon />
</div>
</div>
) : null}
</>
);
};
interface EditCollectionProps {
title?: string;
export interface CreateCollectionProps {
onConfirmText?: string;
init: Collection;
getPageInfo: GetPageInfoById;
propertiesMeta: PropertiesMeta;
init: string;
showTips?: boolean;
onCancel: () => void;
onConfirm: (collection: Collection) => void;
onConfirm: (title: string) => void;
}
export const EditCollection = ({
title,
init,
onConfirm,
onCancel,
export const CreateCollection = ({
onConfirmText,
getPageInfo,
propertiesMeta,
}: EditCollectionProps) => {
init,
showTips,
onCancel,
onConfirm,
}: CreateCollectionProps) => {
const t = useAFFiNEI18N();
const [value, onChange] = useState<Collection>(init);
const removeFromExcludeList = useCallback(
(id: string) => {
onChange({
...value,
excludeList: value.excludeList?.filter(v => v !== id),
});
},
[value]
);
const removeFromAllowList = useCallback(
(id: string) => {
onChange({
...value,
allowList: value.allowList?.filter(v => v !== id),
});
},
[value]
);
const isNameEmpty = useMemo(() => value.name.trim().length === 0, [value]);
const onSaveCollection = useCallback(() => {
if (!isNameEmpty) {
onConfirm(value);
const [value, onChange] = useState(init);
const isNameEmpty = useMemo(() => value.trim().length === 0, [value]);
const save = useCallback(() => {
if (isNameEmpty) {
return;
}
}, [value, isNameEmpty, onConfirm]);
onConfirm(value);
}, [onConfirm, value, isNameEmpty]);
return (
<div
style={{
maxHeight: '90vh',
display: 'flex',
flexDirection: 'column',
}}
>
<div className={styles.saveTitle}>
{title ?? t['com.affine.editCollection.updateCollection']()}
</div>
<ScrollableContainer
className={styles.scrollContainer}
viewPortClassName={styles.container}
>
{value.excludeList?.length ? (
<div className={styles.excludeList}>
<div className={styles.excludeTitle}>
Exclude from this collection
</div>
<div className={styles.excludeListContent}>
{value.excludeList.map(id => {
return (
<Page
id={id}
getPageInfo={getPageInfo}
key={id}
onClick={removeFromExcludeList}
/>
);
})}
</div>
<div className={styles.excludeTip}>
These pages will never appear in the current collection
</div>
<div>
<div className={styles.content}>
<div className={styles.label}>Name</div>
<Input
autoFocus
value={value}
data-testid="input-collection-title"
placeholder="Collection Name"
onChange={useCallback((value: string) => onChange(value), [onChange])}
onEnter={save}
></Input>
{showTips ? (
<div className={styles.createTips}>
Collection is a smart folder where you can manually add pages or
automatically add pages through rules.
</div>
) : null}
<div
style={{
backgroundColor: 'var(--affine-hover-color)',
borderRadius: 8,
padding: 18,
marginTop: 20,
minHeight: '200px',
}}
>
<div className={styles.filterTitle}>
{t['com.affine.editCollection.filters']()}
</div>
<FilterList
propertiesMeta={propertiesMeta}
value={value.filterList}
onChange={filterList => onChange({ ...value, filterList })}
/>
{value.allowList ? (
<div className={styles.allowList}>
<div className={styles.allowTitle}>With follow pages:</div>
<div className={styles.allowListContent}>
{value.allowList.map(id => {
return (
<Page
key={id}
id={id}
getPageInfo={getPageInfo}
onClick={removeFromAllowList}
/>
);
})}
</div>
</div>
) : null}
</div>
<div style={{ marginTop: 20 }}>
<Input
size="large"
data-testid="input-collection-title"
placeholder={t['com.affine.editCollection.untitledCollection']()}
defaultValue={value.name}
onChange={name => onChange({ ...value, name })}
onEnter={onSaveCollection}
/>
</div>
</ScrollableContainer>
<div
style={{
display: 'flex',
justifyContent: 'flex-end',
marginTop: 40,
}}
>
</div>
<div className={styles.footer}>
<Button size="large" onClick={onCancel}>
{t['com.affine.editCollection.button.cancel']()}
</Button>
<Button
style={{
marginLeft: 20,
}}
size="large"
data-testid="save-collection"
type="primary"
disabled={isNameEmpty}
onClick={onSaveCollection}
onClick={save}
>
{onConfirmText ?? t['com.affine.editCollection.button.create']()}
</Button>
@ -262,33 +124,27 @@ export const EditCollection = ({
);
};
interface SaveCollectionButtonProps {
getPageInfo: GetPageInfoById;
propertiesMeta: PropertiesMeta;
filterList: Filter[];
workspaceId: string;
interface SaveAsCollectionButtonProps {
onConfirm: (collection: Collection) => Promise<void>;
}
export const SaveCollectionButton = ({
export const SaveAsCollectionButton = ({
onConfirm,
getPageInfo,
propertiesMeta,
filterList,
workspaceId,
}: SaveCollectionButtonProps) => {
const [show, changeShow] = useState(false);
const [init, setInit] = useState<Collection>();
const handleClick = useCallback(() => {
changeShow(true);
setInit({
id: nanoid(),
name: '',
filterList,
workspaceId,
});
}, [changeShow, workspaceId, filterList]);
}: SaveAsCollectionButtonProps) => {
const t = useAFFiNEI18N();
const { open, node } = useEditCollectionName({
title: t['com.affine.editCollection.saveCollection'](),
showTips: true,
});
const handleClick = useCallback(() => {
open('')
.then(name => {
return onConfirm(createEmptyCollection(nanoid(), { name }));
})
.catch(err => {
console.error(err);
});
}, [open, onConfirm]);
return (
<>
<Button
@ -300,15 +156,7 @@ export const SaveCollectionButton = ({
>
{t['com.affine.editCollection.saveCollection']()}
</Button>
<EditCollectionModal
title={t['com.affine.editCollection.saveCollection']()}
propertiesMeta={propertiesMeta}
init={init}
onConfirm={onConfirm}
open={show}
getPageInfo={getPageInfo}
onOpenChange={changeShow}
/>
{node}
</>
);
};

228
packages/frontend/component/src/components/page-list/view/edit-collection.css.ts Normal file
View File

@ -0,0 +1,228 @@
import { style } from '@vanilla-extract/css';
export const ellipsis = style({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
});
export const pagesBottomLeft = style({
display: 'flex',
gap: 8,
alignItems: 'center',
});
export const pagesBottom = style({
display: 'flex',
justifyContent: 'space-between',
padding: '20px 24px',
borderTop: '1px solid var(--affine-border-color)',
flexWrap: 'wrap',
gap: '12px',
});
export const pagesTabContent = style({
display: 'flex',
justifyContent: 'space-between',
gap: 8,
alignItems: 'center',
padding: '16px 16px 8px 16px',
});
export const pagesTab = style({
flex: 1,
display: 'flex',
flexDirection: 'column',
width: '100%',
overflow: 'hidden',
});
export const pagesList = style({
display: 'flex',
flex: 1,
overflow: 'hidden',
});
export const bottomLeft = style({
display: 'flex',
gap: 8,
alignItems: 'center',
});
export const rulesBottom = style({
display: 'flex',
justifyContent: 'space-between',
padding: '20px 24px',
borderTop: '1px solid var(--affine-border-color)',
flexWrap: 'wrap',
gap: '12px',
});
export const includeListTitle = style({
marginTop: 8,
fontSize: 14,
fontWeight: 400,
lineHeight: '22px',
color: 'var(--affine-text-secondary-color)',
paddingLeft: 18,
});
export const rulesContainerRight = style({
flex: 2,
flexDirection: 'column',
borderLeft: '1px solid var(--affine-border-color)',
overflowX: 'hidden',
overflowY: 'auto',
});
export const includeAddButton = style({
display: 'flex',
alignItems: 'center',
gap: 6,
padding: '4px 8px',
fontSize: 14,
lineHeight: '22px',
width: 'max-content',
});
export const includeItemTitle = style({ overflow: 'hidden', fontWeight: 600 });
export const includeItemContentIs = style({
padding: '0 8px',
color: 'var(--affine-text-secondary-color)',
});
export const includeItemContent = style({
display: 'flex',
alignItems: 'center',
gap: 4,
fontSize: 12,
lineHeight: '20px',
overflow: 'hidden',
});
export const includeItem = style({
display: 'flex',
alignItems: 'center',
width: 'max-content',
backgroundColor: 'var(--affine-background-primary-color)',
overflow: 'hidden',
gap: 16,
whiteSpace: 'nowrap',
border: '1px solid var(--affine-border-color)',
borderRadius: 8,
padding: '4px 8px 4px',
});
export const includeTitle = style({
display: 'flex',
alignItems: 'center',
gap: 10,
fontSize: 14,
lineHeight: '22px',
});
export const rulesContainerLeftContentInclude = style({
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
gap: 8,
flexShrink: 0,
});
export const rulesContainerLeftContent = style({
padding: '12px 16px 16px',
display: 'flex',
flexDirection: 'column',
flex: 1,
overflow: 'hidden',
});
export const rulesContainerLeftTab = style({
display: 'flex',
justifyContent: 'space-between',
gap: 8,
alignItems: 'center',
padding: '16px 16px 8px 16px',
});
export const rulesContainerLeft = style({
flex: 1,
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
});
export const rulesContainer = style({
display: 'flex',
overflow: 'hidden',
flex: 1,
});
export const collectionEditContainer = style({
display: 'flex',
flexDirection: 'column',
height: '100%',
});
export const confirmButton = style({
marginLeft: 20,
});
export const resultPages = style({
width: '100%',
});
export const pageList = style({
width: '100%',
});
export const previewCountTipsHighlight = style({
color: 'var(--affine-primary-color)',
});
export const previewCountTips = style({
fontSize: 12,
lineHeight: '20px',
color: 'var(--affine-text-secondary-color)',
});
export const selectedCountTips = style({
fontSize: 12,
lineHeight: '20px',
color: 'var(--affine-text-primary-color)',
});
export const rulesTitleHighlight = style({
color: 'var(--affine-primary-color)',
fontStyle: 'italic',
fontWeight: 800,
});
export const tabButton = style({ height: 28 });
export const icon = style({
color: 'var(--affine-icon-color)',
});
export const button = style({
userSelect: 'none',
borderRadius: 4,
cursor: 'pointer',
':hover': {
backgroundColor: 'var(--affine-hover-color)',
},
});
export const bottomButton = style({
padding: '4px 12px',
borderRadius: 8,
});
export const previewActive = style({
backgroundColor: 'var(--affine-hover-color-filled)',
});
export const rulesTitle = style({
padding: '20px 24px',
userSelect: 'none',
fontSize: 20,
lineHeight: '24px',
color: 'var(--affine-text-secondary-color)',
borderBottom: '1px solid var(--affine-border-color)',
});

913
packages/frontend/component/src/components/page-list/view/edit-collection.tsx Normal file
View File

@ -0,0 +1,913 @@
import {
AffineShapeIcon,
PageList,
PageListScrollContainer,
} from '@affine/component/page-list';
import type { Collection, Filter } from '@affine/env/filter';
import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
CloseIcon,
EdgelessIcon,
FilterIcon,
PageIcon,
PlusIcon,
ToggleCollapseIcon,
} from '@blocksuite/icons';
import type { PageMeta, Workspace } from '@blocksuite/store';
import { Button } from '@toeverything/components/button';
import { Menu } from '@toeverything/components/menu';
import { Modal } from '@toeverything/components/modal';
import clsx from 'clsx';
import { type MouseEvent, useEffect } from 'react';
import { type ReactNode, useCallback, useMemo, useState } from 'react';
import { RadioButton, RadioButtonGroup } from '../../..';
import { FilterList } from '../filter';
import { VariableSelect } from '../filter/vars';
import { filterPageByRules } from '../use-collection-manager';
import * as styles from './edit-collection.css';
export interface EditCollectionModalProps {
init?: Collection;
title?: string;
open: boolean;
onOpenChange: (open: boolean) => void;
onConfirm: (view: Collection) => Promise<void>;
allPageListConfig: AllPageListConfig;
}
export const EditCollectionModal = ({
init,
onConfirm,
open,
onOpenChange,
title,
allPageListConfig,
}: EditCollectionModalProps) => {
const t = useAFFiNEI18N();
const onConfirmOnCollection = useCallback(
(view: Collection) => {
onConfirm(view)
.then(() => {
onOpenChange(false);
})
.catch(err => {
console.error(err);
});
},
[onConfirm, onOpenChange]
);
const onCancel = useCallback(() => {
onOpenChange(false);
}, [onOpenChange]);
return (
<Modal
open={open}
onOpenChange={onOpenChange}
withoutCloseButton
width="calc(100% - 64px)"
height="80%"
contentOptions={{
style: {
padding: 0,
maxWidth: 944,
backgroundColor: 'var(--affine-white)',
},
}}
>
{init ? (
<EditCollection
title={title}
onConfirmText={t['com.affine.editCollection.save']()}
init={init}
onCancel={onCancel}
onConfirm={onConfirmOnCollection}
allPageListConfig={allPageListConfig}
/>
) : null}
</Modal>
);
};
export interface EditCollectionProps {
title?: string;
onConfirmText?: string;
init: Collection;
onCancel: () => void;
onConfirm: (collection: Collection) => void;
allPageListConfig: AllPageListConfig;
}
export const EditCollection = ({
init,
onConfirm,
onCancel,
onConfirmText,
allPageListConfig,
}: EditCollectionProps) => {
const t = useAFFiNEI18N();
const [value, onChange] = useState<Collection>(init);
const isNameEmpty = useMemo(() => value.name.trim().length === 0, [value]);
const onSaveCollection = useCallback(() => {
if (!isNameEmpty) {
onConfirm(value);
}
}, [value, isNameEmpty, onConfirm]);
const reset = useCallback(() => {
onChange({
...value,
filterList: init.filterList,
allowList: init.allowList,
});
}, [init.allowList, init.filterList, value]);
const buttons = useMemo(
() => (
<>
<Button size="large" onClick={onCancel}>
{t['com.affine.editCollection.button.cancel']()}
</Button>
<Button
className={styles.confirmButton}
size="large"
data-testid="save-collection"
type="primary"
disabled={isNameEmpty}
onClick={onSaveCollection}
>
{onConfirmText ?? t['com.affine.editCollection.button.create']()}
</Button>
</>
),
[onCancel, t, isNameEmpty, onSaveCollection, onConfirmText]
);
return (
<div className={styles.collectionEditContainer}>
{value.mode === 'page' ? (
<PagesMode
collection={value}
updateCollection={onChange}
buttons={buttons}
allPageListConfig={allPageListConfig}
></PagesMode>
) : (
<RulesMode
allPageListConfig={allPageListConfig}
collection={value}
reset={reset}
updateCollection={onChange}
buttons={buttons}
></RulesMode>
)}
</div>
);
};
export type AllPageListConfig = {
allPages: PageMeta[];
workspace: Workspace;
isEdgeless: (id: string) => boolean;
getPage: (id: string) => PageMeta | undefined;
favoriteRender: (page: PageMeta) => ReactNode;
};
const RulesMode = ({
collection,
updateCollection,
reset,
buttons,
allPageListConfig,
}: {
collection: Collection;
updateCollection: (collection: Collection) => void;
reset: () => void;
buttons: ReactNode;
allPageListConfig: AllPageListConfig;
}) => {
const t = useAFFiNEI18N();
const [showPreview, setShowPreview] = useState(true);
const allowListPages: PageMeta[] = [];
const rulesPages: PageMeta[] = [];
const [showTips, setShowTips] = useState(false);
useEffect(() => {
setShowTips(!localStorage.getItem('hide-rules-mode-include-page-tips'));
}, []);
const hideTips = useCallback(() => {
setShowTips(false);
localStorage.setItem('hide-rules-mode-include-page-tips', 'true');
}, []);
allPageListConfig.allPages.forEach(v => {
if (v.trash) {
return;
}
const result = filterPageByRules(
collection.filterList,
collection.allowList,
v
);
if (result) {
if (collection.allowList.includes(v.id)) {
allowListPages.push(v);
} else {
rulesPages.push(v);
}
}
});
const { node: selectPageNode, open } = useSelectPage({ allPageListConfig });
const openSelectPage = useCallback(() => {
open(collection.allowList).then(
ids => {
updateCollection({
...collection,
allowList: ids,
});
},
() => {
//do nothing
}
);
}, [open, updateCollection, collection]);
const [expandInclude, setExpandInclude] = useState(false);
return (
<>
<div className={clsx(styles.rulesTitle, styles.ellipsis)}>
<Trans
i18nKey="com.affine.editCollection.rules.tips"
values={{
highlight: t['com.affine.editCollection.rules.tips.highlight'](),
}}
>
Pages that meet the rules will be added to the current collection{' '}
<span className={styles.rulesTitleHighlight}>highlight</span>.
</Trans>
</div>
<div className={styles.rulesContainer}>
<div className={styles.rulesContainerLeft}>
<div className={styles.rulesContainerLeftTab}>
<RadioButtonGroup
width={158}
style={{ height: 32 }}
value={collection.mode}
onValueChange={useCallback(
(mode: 'page' | 'rule') => {
updateCollection({
...collection,
mode,
});
},
[collection, updateCollection]
)}
>
<RadioButton
spanStyle={styles.tabButton}
value="page"
data-testid="edit-collection-pages-button"
>
{t['com.affine.editCollection.pages']()}
</RadioButton>
<RadioButton
spanStyle={styles.tabButton}
value="rule"
data-testid="edit-collection-rules-button"
>
{t['com.affine.editCollection.rules']()}
</RadioButton>
</RadioButtonGroup>
</div>
<div className={styles.rulesContainerLeftContent}>
<div
style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
gap: 8,
overflowY: 'auto',
}}
>
<FilterList
propertiesMeta={allPageListConfig.workspace.meta.properties}
value={collection.filterList}
onChange={useCallback(
filterList => updateCollection({ ...collection, filterList }),
[collection, updateCollection]
)}
/>
<div className={styles.rulesContainerLeftContentInclude}>
<div className={styles.includeTitle}>
<ToggleCollapseIcon
onClick={() => setExpandInclude(!expandInclude)}
className={styles.button}
width={24}
height={24}
style={{
transform: expandInclude ? 'rotate(90deg)' : undefined,
}}
></ToggleCollapseIcon>
<div style={{ color: 'var(--affine-text-secondary-color)' }}>
include
</div>
</div>
<div
style={{
display: expandInclude ? 'flex' : 'none',
flexWrap: 'wrap',
gap: '8px 16px',
}}
>
{collection.allowList.map(id => {
const page = allPageListConfig.allPages.find(
v => v.id === id
);
return (
<div className={styles.includeItem} key={id}>
<div className={styles.includeItemContent}>
<div
style={{
display: 'flex',
gap: 6,
alignItems: 'center',
}}
>
{allPageListConfig.isEdgeless(id) ? (
<EdgelessIcon style={{ width: 16, height: 16 }} />
) : (
<PageIcon style={{ width: 16, height: 16 }} />
)}
Page
</div>
<div className={styles.includeItemContentIs}>is</div>
<div
className={clsx(
styles.includeItemTitle,
styles.ellipsis
)}
>
{page?.title || 'Untitled'}
</div>
</div>
<CloseIcon
className={styles.button}
onClick={() => {
updateCollection({
...collection,
allowList: collection.allowList.filter(
v => v !== id
),
});
}}
></CloseIcon>
</div>
);
})}
<div
onClick={openSelectPage}
className={clsx(styles.button, styles.includeAddButton)}
>
<PlusIcon></PlusIcon>
<div
style={{ color: 'var(--affine-text-secondary-color)' }}
>
Add include page
</div>
</div>
</div>
</div>
</div>
{showTips ? (
<div
style={{
marginTop: 16,
borderRadius: 8,
backgroundColor:
'var(--affine-background-overlay-panel-color)',
padding: 10,
fontSize: 12,
lineHeight: '20px',
}}
>
<div
style={{
marginBottom: 14,
fontWeight: 600,
color: 'var(--affine-text-secondary-color)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<div>HELP INFO</div>
<CloseIcon
color="var(--affine-icon-color)"
onClick={hideTips}
className={styles.button}
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ marginBottom: 10, fontWeight: 600 }}>
What is &quot;Include&quot;？
</div>
<div>
&quot;Include&quot; refers to manually adding pages rather
than automatically adding them through rule matching. You can
manually add pages through the &quot;Add pages&quot; option or
by dragging and dropping (coming soon).
</div>
</div>
) : null}
</div>
</div>
<PageListScrollContainer
className={styles.rulesContainerRight}
style={{
display: showPreview ? 'flex' : 'none',
}}
>
{rulesPages.length > 0 ? (
<PageList
hideHeader
clickMode="select"
className={styles.resultPages}
pages={rulesPages}
groupBy={false}
blockSuiteWorkspace={allPageListConfig.workspace}
isPreferredEdgeless={allPageListConfig.isEdgeless}
pageOperationsRenderer={allPageListConfig.favoriteRender}
></PageList>
) : null}
{allowListPages.length > 0 ? (
<div>
<div className={styles.includeListTitle}>include</div>
<PageList
hideHeader
clickMode="select"
className={styles.resultPages}
pages={allowListPages}
groupBy={false}
blockSuiteWorkspace={allPageListConfig.workspace}
isPreferredEdgeless={allPageListConfig.isEdgeless}
></PageList>
</div>
) : null}
</PageListScrollContainer>
</div>
<div className={styles.rulesBottom}>
<div className={styles.bottomLeft}>
<div
className={clsx(
styles.button,
styles.bottomButton,
showPreview && styles.previewActive
)}
onClick={() => {
setShowPreview(!showPreview);
}}
>
Preview
</div>
<div
className={clsx(styles.button, styles.bottomButton)}
onClick={reset}
>
Reset
</div>
<div className={styles.previewCountTips}>
After searching, there are currently{' '}
<span className={styles.previewCountTipsHighlight}>
{allowListPages.length + rulesPages.length}
</span>{' '}
pages.
</div>
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>{buttons}</div>
</div>
{selectPageNode}
</>
);
};
const PagesMode = ({
collection,
updateCollection,
buttons,
allPageListConfig,
}: {
collection: Collection;
updateCollection: (collection: Collection) => void;
buttons: ReactNode;
allPageListConfig: AllPageListConfig;
}) => {
const t = useAFFiNEI18N();
const {
showFilter,
filters,
updateFilters,
clickFilter,
createFilter,
filteredList,
} = useFilter(allPageListConfig.allPages);
const { searchText, updateSearchText, searchedList } =
useSearch(filteredList);
const clearSelected = useCallback(() => {
updateCollection({
...collection,
pages: [],
});
}, [collection, updateCollection]);
const pageOperationsRenderer = useCallback(
(page: PageMeta) => allPageListConfig.favoriteRender(page),
[allPageListConfig]
);
return (
<>
<input
value={searchText}
onChange={e => updateSearchText(e.target.value)}
className={styles.rulesTitle}
placeholder={t['com.affine.editCollection.search.placeholder']()}
></input>
<div className={styles.pagesList}>
<div className={styles.pagesTab}>
<div className={styles.pagesTabContent}>
<RadioButtonGroup
width={158}
style={{ height: 32 }}
value={collection.mode}
onValueChange={useCallback(
(mode: 'page' | 'rule') => {
updateCollection({
...collection,
mode,
});
},
[collection, updateCollection]
)}
>
<RadioButton
spanStyle={styles.tabButton}
value="page"
data-testid="edit-collection-pages-button"
>
{t['com.affine.editCollection.pages']()}
</RadioButton>
<RadioButton
spanStyle={styles.tabButton}
value="rule"
data-testid="edit-collection-rules-button"
>
{t['com.affine.editCollection.rules']()}
</RadioButton>
</RadioButtonGroup>
{!showFilter && filters.length === 0 ? (
<Menu
items={
<VariableSelect
propertiesMeta={allPageListConfig.workspace.meta.properties}
selected={filters}
onSelect={createFilter}
/>
}
>
<div>
<FilterIcon
className={clsx(styles.icon, styles.button)}
onClick={clickFilter}
width={24}
height={24}
></FilterIcon>
</div>
</Menu>
) : (
<FilterIcon
className={clsx(styles.icon, styles.button)}
onClick={clickFilter}
width={24}
height={24}
></FilterIcon>
)}
</div>
{showFilter ? (
<div style={{ padding: '12px 16px 16px' }}>
<FilterList
propertiesMeta={allPageListConfig.workspace.meta.properties}
value={filters}
onChange={updateFilters}
/>
</div>
) : null}
{searchedList.length ? (
<PageListScrollContainer>
<PageList
clickMode="select"
className={styles.pageList}
pages={searchedList}
groupBy={false}
blockSuiteWorkspace={allPageListConfig.workspace}
selectable
onSelectedPageIdsChange={ids => {
updateCollection({
...collection,
pages: ids,
});
}}
pageOperationsRenderer={pageOperationsRenderer}
selectedPageIds={collection.pages}
isPreferredEdgeless={allPageListConfig.isEdgeless}
></PageList>
</PageListScrollContainer>
) : (
<EmptyList search={searchText} />
)}
</div>
</div>
<div className={styles.pagesBottom}>
<div className={styles.pagesBottomLeft}>
<div className={styles.selectedCountTips}>
Selected
<span
style={{ marginLeft: 7 }}
className={styles.previewCountTipsHighlight}
>
{collection.pages.length}
</span>
</div>
<div
className={clsx(styles.button, styles.bottomButton)}
style={{ fontSize: 12, lineHeight: '20px' }}
onClick={clearSelected}
>
{t['com.affine.editCollection.pages.clear']()}
</div>
</div>
<div>{buttons}</div>
</div>
</>
);
};
const SelectPage = ({
allPageListConfig,
init,
onConfirm,
onCancel,
}: {
allPageListConfig: AllPageListConfig;
init: string[];
onConfirm: (pageIds: string[]) => void;
onCancel: () => void;
}) => {
const t = useAFFiNEI18N();
const [value, onChange] = useState(init);
const confirm = useCallback(() => {
onConfirm(value);
}, [value, onConfirm]);
const clearSelected = useCallback(() => {
onChange([]);
}, []);
const {
clickFilter,
createFilter,
filters,
showFilter,
updateFilters,
filteredList,
} = useFilter(allPageListConfig.allPages);
const { searchText, updateSearchText, searchedList } =
useSearch(filteredList);
return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<input
className={styles.rulesTitle}
value={searchText}
onChange={e => updateSearchText(e.target.value)}
placeholder={t['com.affine.editCollection.search.placeholder']()}
></input>
<div className={styles.pagesTab}>
<div className={styles.pagesTabContent}>
<div style={{ fontSize: 12, lineHeight: '20px', fontWeight: 600 }}>
Add include page
</div>
{!showFilter && filters.length === 0 ? (
<Menu
items={
<VariableSelect
propertiesMeta={allPageListConfig.workspace.meta.properties}
selected={filters}
onSelect={createFilter}
/>
}
>
<div>
<FilterIcon
className={clsx(styles.icon, styles.button)}
onClick={clickFilter}
width={24}
height={24}
></FilterIcon>
</div>
</Menu>
) : (
<FilterIcon
className={clsx(styles.icon, styles.button)}
onClick={clickFilter}
width={24}
height={24}
></FilterIcon>
)}
</div>
{showFilter ? (
<div style={{ padding: '12px 16px 16px' }}>
<FilterList
propertiesMeta={allPageListConfig.workspace.meta.properties}
value={filters}
onChange={updateFilters}
/>
</div>
) : null}
{searchedList.length ? (
<PageListScrollContainer>
<PageList
clickMode="select"
className={styles.pageList}
pages={searchedList}
blockSuiteWorkspace={allPageListConfig.workspace}
selectable
onSelectedPageIdsChange={onChange}
selectedPageIds={value}
isPreferredEdgeless={allPageListConfig.isEdgeless}
pageOperationsRenderer={allPageListConfig.favoriteRender}
></PageList>
</PageListScrollContainer>
) : (
<EmptyList search={searchText} />
)}
</div>
<div className={styles.pagesBottom}>
<div className={styles.pagesBottomLeft}>
<div className={styles.selectedCountTips}>
Selected
<span
style={{ marginLeft: 7 }}
className={styles.previewCountTipsHighlight}
>
{value.length}
</span>
</div>
<div
className={clsx(styles.button, styles.bottomButton)}
style={{ fontSize: 12, lineHeight: '20px' }}
onClick={clearSelected}
>
{t['com.affine.editCollection.pages.clear']()}
</div>
</div>
<div>
<Button size="large" onClick={onCancel}>
{t['com.affine.editCollection.button.cancel']()}
</Button>
<Button
className={styles.confirmButton}
size="large"
data-testid="save-collection"
type="primary"
onClick={confirm}
>
Confirm
</Button>
</div>
</div>
</div>
);
};
const useSelectPage = ({
allPageListConfig,
}: {
allPageListConfig: AllPageListConfig;
}) => {
const [value, onChange] = useState<{
init: string[];
onConfirm: (ids: string[]) => void;
}>();
const close = useCallback(() => {
onChange(undefined);
}, []);
return {
node: (
<Modal
open={!!value}
onOpenChange={close}
withoutCloseButton
width="calc(100% - 32px)"
height="80%"
overlayOptions={{ style: { backgroundColor: 'transparent' } }}
contentOptions={{
style: {
padding: 0,
transform: 'translate(-50%,calc(-50% + 16px))',
maxWidth: 976,
backgroundColor: 'var(--affine-white)',
},
}}
>
{value ? (
<SelectPage
allPageListConfig={allPageListConfig}
init={value.init}
onConfirm={value.onConfirm}
onCancel={close}
/>
) : null}
</Modal>
),
open: (init: string[]): Promise<string[]> =>
new Promise<string[]>(res => {
onChange({
init,
onConfirm: list => {
close();
res(list);
},
});
}),
};
};
const useFilter = (list: PageMeta[]) => {
const [filters, changeFilters] = useState<Filter[]>([]);
const [showFilter, setShowFilter] = useState(false);
const clickFilter = useCallback(
(e: MouseEvent) => {
if (showFilter || filters.length !== 0) {
e.stopPropagation();
e.preventDefault();
setShowFilter(!showFilter);
}
},
[filters.length, showFilter]
);
const onCreateFilter = useCallback(
(filter: Filter) => {
changeFilters([...filters, filter]);
setShowFilter(true);
},
[filters]
);
return {
showFilter,
filters,
updateFilters: changeFilters,
clickFilter,
createFilter: onCreateFilter,
filteredList: list.filter(v => {
if (v.trash) {
return false;
}
return filterPageByRules(filters, [], v);
}),
};
};
const useSearch = (list: PageMeta[]) => {
const [value, onChange] = useState('');
return {
searchText: value,
updateSearchText: onChange,
searchedList: value
? list.filter(v => v.title.toLowerCase().includes(value.toLowerCase()))
: list,
};
};
const EmptyList = ({ search }: { search?: string }) => {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
flex: 1,
}}
>
<AffineShapeIcon />
<div
style={{
margin: '18px 0',
fontSize: 20,
lineHeight: '28px',
fontWeight: 600,
}}
>
Empty
</div>
{search ? (
<div
className={styles.ellipsis}
style={{ maxWidth: 300, fontSize: 15, lineHeight: '24px' }}
>
No page titles contain{' '}
<span
style={{ fontWeight: 600, color: 'var(--affine-primary-color)' }}
>
{search}
</span>
</div>
) : null}
</div>
);
};

4
packages/frontend/component/src/components/page-list/view/index.ts
View File

@ -1,3 +1,7 @@
export * from './affine-shape';
export * from './collection-bar';
export * from './collection-list';
export * from './collection-operations';
export * from './create-collection';
export * from './edit-collection';
export * from './use-edit-collection';

48
packages/frontend/component/src/components/page-list/view/use-action.tsx
View File

@ -1,16 +1,9 @@
import type { Collection } from '@affine/env/filter';
import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
DeleteIcon,
FilterIcon,
PinedIcon,
PinIcon,
UnpinIcon,
} from '@blocksuite/icons';
import { DeleteIcon, FilterIcon } from '@blocksuite/icons';
import { type ReactNode, useMemo } from 'react';
import type { useCollectionManager } from '../use-collection-manager';
import * as styles from './collection-bar.css';
interface CollectionBarAction {
icon: ReactNode;
@ -24,7 +17,9 @@ export const useActions = ({
collection,
setting,
openEdit,
info,
}: {
info: DeleteCollectionInfo;
collection: Collection;
setting: ReturnType<typeof useCollectionManager>;
openEdit: (open: Collection) => void;
@ -32,37 +27,6 @@ export const useActions = ({
const t = useAFFiNEI18N();
return useMemo<CollectionBarAction[]>(() => {
return [
{
icon: (
<>
{collection.pinned ? (
<PinedIcon className={styles.pinedIcon}></PinedIcon>
) : (
<PinIcon className={styles.pinedIcon}></PinIcon>
)}
{collection.pinned ? (
<UnpinIcon className={styles.pinIcon}></UnpinIcon>
) : (
<PinIcon className={styles.pinIcon}></PinIcon>
)}
</>
),
name: 'pin',
tooltip: collection.pinned
? t['com.affine.collection-bar.action.tooltip.unpin']()
: t['com.affine.collection-bar.action.tooltip.pin'](),
className: styles.pin,
click: () => {
setting
.updateCollection({
...collection,
pinned: !collection.pinned,
})
.catch(err => {
console.error(err);
});
},
},
{
icon: <FilterIcon />,
name: 'edit',
@ -76,11 +40,11 @@ export const useActions = ({
name: 'delete',
tooltip: t['com.affine.collection-bar.action.tooltip.delete'](),
click: () => {
setting.deleteCollection(collection.id).catch(err => {
setting.deleteCollection(info, collection.id).catch(err => {
console.error(err);
});
},
},
];
}, [collection, t, setting, openEdit]);
}, [info, collection, t, setting, openEdit]);
};

72
packages/frontend/component/src/components/page-list/view/use-edit-collection.tsx Normal file
View File

@ -0,0 +1,72 @@
import {
type AllPageListConfig,
CreateCollectionModal,
EditCollectionModal,
} from '@affine/component/page-list';
import type { Collection } from '@affine/env/filter';
import { useCallback, useState } from 'react';
export const useEditCollection = (config: AllPageListConfig) => {
const [data, setData] = useState<{
collection: Collection;
onConfirm: (collection: Collection) => Promise<void>;
}>();
const close = useCallback(() => setData(undefined), []);
return {
node: data ? (
<EditCollectionModal
allPageListConfig={config}
init={data.collection}
open={!!data}
onOpenChange={close}
onConfirm={data.onConfirm}
/>
) : null,
open: (collection: Collection): Promise<Collection> =>
new Promise<Collection>(res => {
setData({
collection,
onConfirm: async collection => {
res(collection);
},
});
}),
};
};
export const useEditCollectionName = ({
title,
showTips,
}: {
title: string;
showTips?: boolean;
}) => {
const [data, setData] = useState<{
name: string;
onConfirm: (name: string) => Promise<void>;
}>();
const close = useCallback(() => setData(undefined), []);
return {
node: data ? (
<CreateCollectionModal
showTips={showTips}
title={title}
init={data.name}
open={!!data}
onOpenChange={close}
onConfirm={data.onConfirm}
/>
) : null,
open: (name: string): Promise<string> =>
new Promise<string>(res => {
setData({
name,
onConfirm: async collection => {
res(collection);
},
});
}),
};
};

2
packages/frontend/component/src/index.ts
View File

@ -6,6 +6,8 @@ export * from './ui/checkbox';
export * from './ui/empty';
export * from './ui/input';
export * from './ui/layout';
export * from './ui/lottie/collections-icon';
export * from './ui/lottie/delete-icon';
export * from './ui/menu';
export * from './ui/mui';
export * from './ui/popper';

4
packages/frontend/component/src/theme/global.css
View File

@ -289,8 +289,8 @@ affine-block-hub {
button,
input,
select,
textarea,
[role='button'] {
textarea
/* [role='button'] */ {
-webkit-app-region: no-drag;
}

10
packages/frontend/component/src/ui/button/dropdown.tsx → packages/frontend/component/src/ui/button/dropdown-button.tsx
View File

@ -8,19 +8,25 @@ import {
import * as styles from './styles.css';
type DropdownButtonProps = {
size?: 'small' | 'default';
onClickDropDown?: MouseEventHandler<HTMLElement>;
} & ButtonHTMLAttributes<HTMLButtonElement>;
export const DropdownButton = forwardRef<
HTMLButtonElement,
DropdownButtonProps
>(({ onClickDropDown, children, ...props }, ref) => {
>(({ onClickDropDown, children, size = 'default', ...props }, ref) => {
const handleClickDropDown: MouseEventHandler<HTMLElement> = e => {
e.stopPropagation();
onClickDropDown?.(e);
};
return (
<button ref={ref} className={styles.dropdownBtn} {...props}>
<button
ref={ref}
data-size={size}
className={styles.dropdownBtn}
{...props}
>
<span>{children}</span>
<span className={styles.divider} />
<span className={styles.dropdownWrapper} onClick={handleClickDropDown}>

2
packages/frontend/component/src/ui/button/index.ts
View File

@ -1,2 +1,2 @@
export * from './dropdown';
export * from './dropdown-button';
export * from './radio';

363
packages/frontend/component/src/ui/button/style.css.ts
View File

@ -1,363 +0,0 @@
import { globalStyle, style } from '@vanilla-extract/css';
export const button = style({
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
userSelect: 'none',
touchAction: 'manipulation',
outline: '0',
border: '1px solid',
padding: '0 18px',
borderRadius: '8px',
fontSize: 'var(--affine-font-base)',
transition: 'all .3s',
['WebkitAppRegion' as string]: 'no-drag',
fontWeight: 600,
// changeable
height: '28px',
background: 'var(--affine-white)',
borderColor: 'var(--affine-border-color)',
color: 'var(--affine-text-primary-color)',
selectors: {
'&.text-bold': {
fontWeight: 600,
},
'&:not(.without-hover):hover': {
background: 'var(--affine-hover-color)',
},
'&.disabled': {
opacity: '.4',
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.loading': {
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
{
background: 'inherit',
},
'&.block': { display: 'flex', width: '100%' },
'&.circle': {
borderRadius: '50%',
},
'&.round': {
borderRadius: '14px',
},
// size
'&.large': {
height: '32px',
},
'&.round.large': {
borderRadius: '16px',
},
'&.extraLarge': {
height: '40px',
},
'&.round.extraLarge': {
borderRadius: '20px',
},
// type
'&.plain': {
color: 'var(--affine-text-primary-color)',
borderColor: 'transparent',
background: 'transparent',
},
'&.primary': {
color: 'var(--affine-pure-white)',
background: 'var(--affine-primary-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.primary:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
},
'&.primary.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.primary.disabled:not(.without-hover):hover': {
background: 'var(--affine-primary-color)',
},
'&.error': {
color: 'var(--affine-pure-white)',
background: 'var(--affine-error-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.error:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
},
'&.error.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.error.disabled:not(.without-hover):hover': {
background: 'var(--affine-error-color)',
},
'&.warning': {
color: 'var(--affine-white)',
background: 'var(--affine-warning-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.warning:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
},
'&.warning.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.warning.disabled:not(.without-hover):hover': {
background: 'var(--affine-warning-color)',
},
'&.success': {
color: 'var(--affine-pure-white)',
background: 'var(--affine-success-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.success:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
},
'&.success.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.success.disabled:not(.without-hover):hover': {
background: 'var(--affine-success-color)',
},
'&.processing': {
color: 'var(--affine-pure-white)',
background: 'var(--affine-processing-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.processing:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
},
'&.processing.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.processing.disabled:not(.without-hover):hover': {
background: 'var(--affine-processing-color)',
},
},
});
globalStyle(`${button} > span`, {
// flex: 1,
lineHeight: 1,
padding: '0 4px',
});
export const buttonIcon = style({
flexShrink: 0,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
color: 'var(--affine-icon-color)',
fontSize: '16px',
width: '16px',
height: '16px',
selectors: {
'&.start': {
marginRight: '4px',
},
'&.end': {
marginLeft: '4px',
},
'&.large': {
fontSize: '20px',
width: '20px',
height: '20px',
},
'&.extraLarge': {
fontSize: '20px',
width: '20px',
height: '20px',
},
'&.color-white': {
color: 'var(--affine-white)',
},
},
});
export const iconButton = style({
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
userSelect: 'none',
touchAction: 'manipulation',
outline: '0',
border: '1px solid',
borderRadius: '4px',
transition: 'all .3s',
['WebkitAppRegion' as string]: 'no-drag',
// changeable
width: '24px',
height: '24px',
fontSize: '20px',
color: 'var(--affine-text-primary-color)',
borderColor: 'var(--affine-border-color)',
selectors: {
'&.without-padding': {
margin: '-2px',
},
'&.active': {
color: 'var(--affine-primary-color)',
},
'&:not(.without-hover):hover': {
background: 'var(--affine-hover-color)',
},
'&.disabled': {
opacity: '.4',
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.loading': {
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
{
background: 'inherit',
},
// size
'&.large': {
width: '32px',
height: '32px',
fontSize: '24px',
},
'&.large.without-padding': {
margin: '-4px',
},
'&.small': { width: '20px', height: '20px', fontSize: '16px' },
'&.extra-small': { width: '16px', height: '16px', fontSize: '12px' },
// type
'&.plain': {
color: 'var(--affine-icon-color)',
borderColor: 'transparent',
background: 'transparent',
},
'&.plain.active': {
color: 'var(--affine-primary-color)',
},
'&.primary': {
color: 'var(--affine-white)',
background: 'var(--affine-primary-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.primary:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
},
'&.primary.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.primary.disabled:not(.without-hover):hover': {
background: 'var(--affine-primary-color)',
},
'&.error': {
color: 'var(--affine-white)',
background: 'var(--affine-error-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.error:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
},
'&.error.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.error.disabled:not(.without-hover):hover': {
background: 'var(--affine-error-color)',
},
'&.warning': {
color: 'var(--affine-white)',
background: 'var(--affine-warning-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.warning:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
},
'&.warning.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.warning.disabled:not(.without-hover):hover': {
background: 'var(--affine-warning-color)',
},
'&.success': {
color: 'var(--affine-white)',
background: 'var(--affine-success-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.success:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
},
'&.success.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.success.disabled:not(.without-hover):hover': {
background: 'var(--affine-success-color)',
},
'&.processing': {
color: 'var(--affine-white)',
background: 'var(--affine-processing-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.processing:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
},
'&.processing.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.processing.disabled:not(.without-hover):hover': {
background: 'var(--affine-processing-color)',
},
},
});

374
packages/frontend/component/src/ui/button/styles.css.ts
View File

@ -1,4 +1,4 @@
import { style } from '@vanilla-extract/css';
import { globalStyle, style } from '@vanilla-extract/css';
export const dropdownBtn = style({
display: 'inline-flex',
@ -9,8 +9,8 @@ export const dropdownBtn = style({
paddingRight: 0,
color: 'var(--affine-text-primary-color)',
fontWeight: 600,
background: 'var(--affine-button-gray-color)',
boxShadow: 'var(--affine-float-button-shadow)',
background: 'var(--affine-background-primary-color)',
border: '1px solid var(--affine-border-color)',
borderRadius: '8px',
fontSize: 'var(--affine-font-sm)',
// width: '100%',
@ -22,6 +22,12 @@ export const dropdownBtn = style({
'&:hover': {
background: 'var(--affine-hover-color-filled)',
},
'&[data-size=default]': {
height: 32,
},
'&[data-size=small]': {
height: 28,
},
},
});
@ -106,3 +112,365 @@ export const radioButtonGroup = style({
// @ts-expect-error - fix electron drag
WebkitAppRegion: 'no-drag',
});
export const button = style({
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
userSelect: 'none',
touchAction: 'manipulation',
outline: '0',
border: '1px solid',
padding: '0 18px',
borderRadius: '8px',
fontSize: 'var(--affine-font-base)',
transition: 'all .3s',
['WebkitAppRegion' as string]: 'no-drag',
fontWeight: 600,
// changeable
height: '28px',
background: 'var(--affine-white)',
borderColor: 'var(--affine-border-color)',
color: 'var(--affine-text-primary-color)',
selectors: {
'&.text-bold': {
fontWeight: 600,
},
'&:not(.without-hover):hover': {
background: 'var(--affine-hover-color)',
},
'&.disabled': {
opacity: '.4',
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.loading': {
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
{
background: 'inherit',
},
'&.block': { display: 'flex', width: '100%' },
'&.circle': {
borderRadius: '50%',
},
'&.round': {
borderRadius: '14px',
},
// size
'&.large': {
height: '32px',
},
'&.round.large': {
borderRadius: '16px',
},
'&.extraLarge': {
height: '40px',
},
'&.round.extraLarge': {
borderRadius: '20px',
},
// type
'&.plain': {
color: 'var(--affine-text-primary-color)',
borderColor: 'transparent',
background: 'transparent',
},
'&.primary': {
color: 'var(--affine-pure-white)',
background: 'var(--affine-primary-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.primary:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
},
'&.primary.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.primary.disabled:not(.without-hover):hover': {
background: 'var(--affine-primary-color)',
},
'&.error': {
color: 'var(--affine-pure-white)',
background: 'var(--affine-error-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.error:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
},
'&.error.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.error.disabled:not(.without-hover):hover': {
background: 'var(--affine-error-color)',
},
'&.warning': {
color: 'var(--affine-white)',
background: 'var(--affine-warning-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.warning:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
},
'&.warning.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.warning.disabled:not(.without-hover):hover': {
background: 'var(--affine-warning-color)',
},
'&.success': {
color: 'var(--affine-pure-white)',
background: 'var(--affine-success-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.success:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
},
'&.success.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.success.disabled:not(.without-hover):hover': {
background: 'var(--affine-success-color)',
},
'&.processing': {
color: 'var(--affine-pure-white)',
background: 'var(--affine-processing-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.processing:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
},
'&.processing.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.processing.disabled:not(.without-hover):hover': {
background: 'var(--affine-processing-color)',
},
},
});
globalStyle(`${button} > span`, {
// flex: 1,
lineHeight: 1,
padding: '0 4px',
});
export const buttonIcon = style({
flexShrink: 0,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
color: 'var(--affine-icon-color)',
fontSize: '16px',
width: '16px',
height: '16px',
selectors: {
'&.start': {
marginRight: '4px',
},
'&.end': {
marginLeft: '4px',
},
'&.large': {
fontSize: '20px',
width: '20px',
height: '20px',
},
'&.extraLarge': {
fontSize: '20px',
width: '20px',
height: '20px',
},
'&.color-white': {
color: 'var(--affine-white)',
},
},
});
export const iconButton = style({
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
userSelect: 'none',
touchAction: 'manipulation',
outline: '0',
border: '1px solid',
borderRadius: '4px',
transition: 'all .3s',
['WebkitAppRegion' as string]: 'no-drag',
// changeable
width: '24px',
height: '24px',
fontSize: '20px',
color: 'var(--affine-text-primary-color)',
borderColor: 'var(--affine-border-color)',
selectors: {
'&.without-padding': {
margin: '-2px',
},
'&.active': {
color: 'var(--affine-primary-color)',
},
'&:not(.without-hover):hover': {
background: 'var(--affine-hover-color)',
},
'&.disabled': {
opacity: '.4',
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.loading': {
cursor: 'default',
color: 'var(--affine-disable-color)',
pointerEvents: 'none',
},
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
{
background: 'inherit',
},
// size
'&.large': {
width: '32px',
height: '32px',
fontSize: '24px',
},
'&.large.without-padding': {
margin: '-4px',
},
'&.small': { width: '20px', height: '20px', fontSize: '16px' },
'&.extra-small': { width: '16px', height: '16px', fontSize: '12px' },
// type
'&.plain': {
color: 'var(--affine-icon-color)',
borderColor: 'transparent',
background: 'transparent',
},
'&.plain.active': {
color: 'var(--affine-primary-color)',
},
'&.primary': {
color: 'var(--affine-white)',
background: 'var(--affine-primary-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.primary:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
},
'&.primary.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.primary.disabled:not(.without-hover):hover': {
background: 'var(--affine-primary-color)',
},
'&.error': {
color: 'var(--affine-white)',
background: 'var(--affine-error-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.error:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
},
'&.error.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.error.disabled:not(.without-hover):hover': {
background: 'var(--affine-error-color)',
},
'&.warning': {
color: 'var(--affine-white)',
background: 'var(--affine-warning-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.warning:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
},
'&.warning.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.warning.disabled:not(.without-hover):hover': {
background: 'var(--affine-warning-color)',
},
'&.success': {
color: 'var(--affine-white)',
background: 'var(--affine-success-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.success:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
},
'&.success.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.success.disabled:not(.without-hover):hover': {
background: 'var(--affine-success-color)',
},
'&.processing': {
color: 'var(--affine-white)',
background: 'var(--affine-processing-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
},
'&.processing:not(.without-hover):hover': {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
},
'&.processing.disabled': {
opacity: '.4',
cursor: 'default',
},
'&.processing.disabled:not(.without-hover):hover': {
background: 'var(--affine-processing-color)',
},
},
});

93
packages/frontend/component/src/ui/button/styles.ts
View File

@ -1,93 +0,0 @@
import { displayInlineFlex, styled } from '../../styles';
import type { ButtonProps } from './interface';
import { getButtonColors, getSize } from './utils';
export const StyledButton = styled('button', {
shouldForwardProp: prop => {
return ![
'hoverBackground',
'shape',
'hoverColor',
'hoverStyle',
'type',
'bold',
'noBorder',
].includes(prop as string);
},
})<
Pick<
ButtonProps,
| 'size'
| 'disabled'
| 'hoverBackground'
| 'hoverColor'
| 'hoverStyle'
| 'shape'
| 'type'
| 'bold'
| 'noBorder'
>
>(({
theme,
size = 'default',
disabled,
hoverBackground,
hoverColor,
hoverStyle,
bold = false,
shape = 'default',
type = 'default',
noBorder = false,
}) => {
const { fontSize, borderRadius, padding, height } = getSize(size);
return {
height,
paddingLeft: padding,
paddingRight: padding,
border: noBorder ? 'none' : '1px solid',
WebkitAppRegion: 'no-drag',
...displayInlineFlex('center', 'center'),
gap: '8px',
position: 'relative',
// TODO: disabled color is not decided
...(disabled
? {
cursor: 'not-allowed',
pointerEvents: 'none',
color: 'var(--affine-text-disable-color)',
}
: {}),
// TODO: Implement circle shape
borderRadius: shape === 'default' ? borderRadius : height / 2,
fontSize,
fontWeight: bold ? '500' : '400',
'.affine-button-icon': {
color: 'var(--affine-icon-color)',
},
'.affine-button-icon__fixed': {
color: 'var(--affine-icon-color)',
},
'>span': {
width: 'max-content',
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
...getButtonColors(theme, type, disabled, {
hoverBackground,
hoverColor,
hoverStyle,
}),
// TODO: disabled hover should be implemented
//
// ':hover': {
// color: hoverColor ?? 'var(--affine-primary-color)',
// background: hoverBackground ?? 'var(--affine-hover-color)',
// '.affine-button-icon':{
//
// }
// ...(hoverStyle ?? {}),
// },
};
});

32
packages/frontend/component/src/ui/button/utils.ts
View File

@ -1,38 +1,6 @@
import type { Theme } from '@mui/material';
import type { ButtonProps } from './interface';
import { SIZE_DEFAULT, SIZE_MIDDLE, SIZE_SMALL } from './interface';
// TODO: Designer is not sure about the size, Now, is just use default size
export const SIZE_CONFIG = {
[SIZE_SMALL]: {
iconSize: 16,
fontSize: 'var(--affine-font-xs)',
borderRadius: 8,
height: 28,
padding: 12,
},
[SIZE_MIDDLE]: {
iconSize: 20,
fontSize: 'var(--affine-font-sm)',
borderRadius: 8,
height: 32,
padding: 12,
},
[SIZE_DEFAULT]: {
iconSize: 24,
fontSize: 'var(--affine-font-base)',
height: 38,
padding: 24,
borderRadius: 8,
},
} as const;
export const getSize = (
size: typeof SIZE_SMALL | typeof SIZE_MIDDLE | typeof SIZE_DEFAULT
) => {
return SIZE_CONFIG[size];
};
export const getButtonColors = (
_theme: Theme,

40
packages/frontend/component/src/ui/checkbox/checkbox.tsx
View File

@ -5,21 +5,26 @@ import { type HTMLAttributes, useCallback, useEffect, useRef } from 'react';
import * as icons from './icons';
import * as styles from './index.css';
type CheckboxProps = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> & {
export type CheckboxProps = Omit<
HTMLAttributes<HTMLInputElement>,
'onChange'
> & {
checked: boolean;
onChange: (
event: React.ChangeEvent<HTMLInputElement>,
checked: boolean
) => void;
disabled?: boolean;
intermediate?: boolean;
indeterminate?: boolean;
animation?: boolean;
};
export const Checkbox = ({
checked,
onChange,
intermediate,
indeterminate: indeterminate,
disabled,
animation,
...otherProps
}: CheckboxProps) => {
const inputRef = useRef<HTMLInputElement>(null);
@ -28,23 +33,23 @@ export const Checkbox = ({
const newChecked = event.target.checked;
onChange(event, newChecked);
const inputElement = inputRef.current;
if (newChecked && inputElement) {
if (newChecked && inputElement && animation) {
playCheckAnimation(inputElement.parentElement as Element).catch(
console.error
);
}
},
[onChange]
[onChange, animation]
);
useEffect(() => {
if (inputRef.current) {
inputRef.current.indeterminate = !!intermediate;
inputRef.current.indeterminate = !!indeterminate;
}
}, [intermediate]);
}, [indeterminate]);
const icon = intermediate
? icons.intermediate
const icon = indeterminate
? icons.indeterminate
: checked
? icons.checked
: icons.unchecked;
@ -83,18 +88,21 @@ export const playCheckAnimation = async (refElement: Element) => {
await sparkingEl.animate(
[
{
offset: 0.5,
boxShadow:
'0 -18px 0 -8px #1e96eb, 16px -8px 0 -8px #1e96eb, 16px 8px 0 -8px #1e96eb, 0 18px 0 -8px #1e96eb, -16px 8px 0 -8px #1e96eb, -16px -8px 0 -8px #1e96eb',
},
{
offset: 1,
boxShadow:
'0 -32px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent',
},
],
{ duration: 500, easing: 'ease', fill: 'forwards' }
{ duration: 240, easing: 'ease', fill: 'forwards' }
).finished;
await sparkingEl.animate(
[
{
boxShadow:
'0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent',
},
],
{ duration: 360, easing: 'ease', fill: 'forwards' }
).finished;
sparkingEl.remove();
};

4
packages/frontend/component/src/ui/checkbox/icons.tsx
View File

@ -32,7 +32,7 @@ const checked = (
</svg>
);
const intermediate = (
const indeterminate = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
@ -49,4 +49,4 @@ const intermediate = (
</svg>
);
export { checked, intermediate, unchecked };
export { checked, indeterminate, unchecked };

9
packages/frontend/component/src/ui/lottie/collections-icon.css.ts Normal file
View File

@ -0,0 +1,9 @@
import { style } from '@vanilla-extract/css';
export const root = style({
width: '1em',
height: '1em',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
});

840
packages/frontend/component/src/ui/lottie/collections-icon.json Normal file
View File

@ -0,0 +1,840 @@
{
"v": "5.12.1",
"fr": 120,
"ip": 0,
"op": 76,
"w": 300,
"h": 300,
"nm": "合成 1",
"ddd": 0,
"assets": [
{
"id": "comp_0",
"nm": "预合成 1",
"fr": 120,
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "1",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 1,
"k": [
{
"i": {
"x": 0.7,
"y": 1
},
"o": {
"x": 0.3,
"y": 0
},
"t": 0,
"s": [154, 140, 0],
"to": [0, -1.667, 0],
"ti": [0, -15.5, 0]
},
{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.3,
"y": 0
},
"t": 14.57,
"s": [154, 130, 0],
"to": [0, 15.5, 0],
"ti": [0, -17.167, 0]
},
{
"i": {
"x": 0.5,
"y": 0.5
},
"o": {
"x": 0.167,
"y": 0.167
},
"t": 30,
"s": [154, 233, 0],
"to": [0, 0, 0],
"ti": [0, 0, 0]
},
{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.5,
"y": 0
},
"t": 171,
"s": [154, 233, 0],
"to": [0, -15.5, 0],
"ti": [0, 15.5, 0]
},
{
"t": 193,
"s": [154, 140, 0]
}
],
"ix": 2,
"l": 2,
"x": "var $bm_rt;\nvar enable, amp, freq, decay, n, t, v;\ntry {\n $bm_rt = enable = effect('Excite - 位置')('Pseudo/BNCA2506f0b33-0001');\n if (enable == 0) {\n $bm_rt = value;\n } else {\n amp = $bm_div(effect('Excite - 位置')('Pseudo/BNCA2506f0b33-0003'), 5);\n freq = $bm_div(effect('Excite - 位置')('Pseudo/BNCA2506f0b33-0004'), 10);\n decay = $bm_div(effect('Excite - 位置')('Pseudo/BNCA2506f0b33-0005'), 3);\n n = 0, 0 < numKeys && (n = nearestKey(time).index, key(n).time > time && n--), t = 0 === n ? 0 : $bm_sub(time, key(n).time), $bm_rt = 0 < n ? (v = velocityAtTime($bm_sub(key(n).time, $bm_div(thisComp.frameDuration, 10))), $bm_sum(value, $bm_div($bm_mul($bm_mul($bm_div(v, 100), amp), Math.sin($bm_mul($bm_mul($bm_mul(freq, t), 2), Math.PI))), Math.exp($bm_mul(decay, t))))) : value;\n }\n} catch (err) {\n $bm_rt = value = value;\n}"
},
"a": {
"a": 0,
"k": [12, 12, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [1246, 1246, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"ef": [
{
"ty": 5,
"nm": "Excite - 位置",
"np": 8,
"mn": "Pseudo/BNCA2506f0b33",
"ix": 1,
"en": 1,
"ef": [
{
"ty": 7,
"nm": "Enable",
"mn": "Pseudo/BNCA2506f0b33-0001",
"ix": 1,
"v": {
"a": 0,
"k": 1,
"ix": 1
}
},
{
"ty": 6,
"nm": "Properties",
"mn": "Pseudo/BNCA2506f0b33-0002",
"ix": 2,
"v": 0
},
{
"ty": 0,
"nm": "Overshoot",
"mn": "Pseudo/BNCA2506f0b33-0003",
"ix": 3,
"v": {
"a": 0,
"k": 20,
"ix": 3,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 0,
"nm": "Bounce",
"mn": "Pseudo/BNCA2506f0b33-0004",
"ix": 4,
"v": {
"a": 0,
"k": 40,
"ix": 4,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 0,
"nm": "Friction",
"mn": "Pseudo/BNCA2506f0b33-0005",
"ix": 5,
"v": {
"a": 0,
"k": 40,
"ix": 5,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 6,
"nm": "",
"mn": "Pseudo/BNCA2506f0b33-0006",
"ix": 6,
"v": 0
}
]
}
],
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0]
],
"v": [
[7, 8],
[17, 8]
],
"c": false
},
"ix": 2
},
"nm": "路径 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.5,
"ix": 5
},
"lc": 2,
"lj": 2,
"bm": 0,
"nm": "描边 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [0, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "变换"
}
],
"nm": "组 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1200,
"st": 0,
"ct": 1,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "2",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 1,
"k": [
{
"i": {
"x": 0.7,
"y": 1
},
"o": {
"x": 0.3,
"y": 0
},
"t": 4,
"s": [154, 140, 0],
"to": [0, -1.667, 0],
"ti": [0, -15.5, 0]
},
{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.3,
"y": 0
},
"t": 18.57,
"s": [154, 130, 0],
"to": [0, 15.5, 0],
"ti": [0, -17.167, 0]
},
{
"i": {
"x": 0.5,
"y": 0.5
},
"o": {
"x": 0.167,
"y": 0.167
},
"t": 34,
"s": [154, 233, 0],
"to": [0, 0, 0],
"ti": [0, 0, 0]
},
{
"i": {
"x": 0.833,
"y": 0.833
},
"o": {
"x": 0.5,
"y": 0
},
"t": 168,
"s": [154, 233, 0],
"to": [0, -15.5, 0],
"ti": [0, 15.5, 0]
},
{
"t": 190,
"s": [154, 140, 0]
}
],
"ix": 2,
"l": 2,
"x": "var $bm_rt;\nvar enable, amp, freq, decay, n, t, v;\ntry {\n $bm_rt = enable = effect('Excite - 位置')('Pseudo/BNCA2506f0b33-0001');\n if (enable == 0) {\n $bm_rt = value;\n } else {\n amp = $bm_div(effect('Excite - 位置')('Pseudo/BNCA2506f0b33-0003'), 5);\n freq = $bm_div(effect('Excite - 位置')('Pseudo/BNCA2506f0b33-0004'), 10);\n decay = $bm_div(effect('Excite - 位置')('Pseudo/BNCA2506f0b33-0005'), 3);\n n = 0, 0 < numKeys && (n = nearestKey(time).index, key(n).time > time && n--), t = 0 === n ? 0 : $bm_sub(time, key(n).time), $bm_rt = 0 < n ? (v = velocityAtTime($bm_sub(key(n).time, $bm_div(thisComp.frameDuration, 10))), $bm_sum(value, $bm_div($bm_mul($bm_mul($bm_div(v, 100), amp), Math.sin($bm_mul($bm_mul($bm_mul(freq, t), 2), Math.PI))), Math.exp($bm_mul(decay, t))))) : value;\n }\n} catch (err) {\n $bm_rt = value = value;\n}"
},
"a": {
"a": 0,
"k": [12, 12, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [1246, 1246, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"ef": [
{
"ty": 5,
"nm": "Excite - 位置",
"np": 8,
"mn": "Pseudo/BNCA2506f0b33",
"ix": 1,
"en": 1,
"ef": [
{
"ty": 7,
"nm": "Enable",
"mn": "Pseudo/BNCA2506f0b33-0001",
"ix": 1,
"v": {
"a": 0,
"k": 1,
"ix": 1
}
},
{
"ty": 6,
"nm": "Properties",
"mn": "Pseudo/BNCA2506f0b33-0002",
"ix": 2,
"v": 0
},
{
"ty": 0,
"nm": "Overshoot",
"mn": "Pseudo/BNCA2506f0b33-0003",
"ix": 3,
"v": {
"a": 0,
"k": 20,
"ix": 3,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 0,
"nm": "Bounce",
"mn": "Pseudo/BNCA2506f0b33-0004",
"ix": 4,
"v": {
"a": 0,
"k": 40,
"ix": 4,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 0,
"nm": "Friction",
"mn": "Pseudo/BNCA2506f0b33-0005",
"ix": 5,
"v": {
"a": 0,
"k": 40,
"ix": 5,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 6,
"nm": "",
"mn": "Pseudo/BNCA2506f0b33-0006",
"ix": 6,
"v": 0
}
]
}
],
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0]
],
"v": [
[9, 5],
[15, 5]
],
"c": false
},
"ix": 2
},
"nm": "路径 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.5,
"ix": 5
},
"lc": 2,
"lj": 2,
"bm": 0,
"nm": "描边 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [0, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "变换"
}
],
"nm": "组 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1200,
"st": 0,
"ct": 1,
"bm": 0
}
]
}
],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "“图层 4”轮廓",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [154, 140, 0],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [12, 12, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [1246, 1246, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[-1.105, 0],
[0, 0],
[0, -1.105],
[0, 0],
[1.105, 0],
[0, 0],
[0, 1.105],
[0, 0]
],
"o": [
[0, 0],
[1.105, 0],
[0, 0],
[0, 1.105],
[0, 0],
[-1.105, 0],
[0, 0],
[0, -1.105]
],
"v": [
[-5, -4.5],
[5, -4.5],
[7, -2.5],
[7, 2.5],
[5, 4.5],
[-5, 4.5],
[-7, 2.5],
[-7, -2.5]
],
"c": true
},
"ix": 2
},
"nm": "路径 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.5,
"ix": 5
},
"lc": 1,
"lj": 2,
"bm": 0,
"nm": "描边 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [12, 15.5],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "变换"
}
],
"nm": "组 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1200,
"st": 0,
"ct": 1,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 0,
"nm": "预合成 1",
"refId": "comp_0",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [150, 150, 0],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [150, 150, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"hasMask": true,
"masksProperties": [
{
"inv": false,
"mode": "a",
"pt": {
"a": 0,
"k": {
"i": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[291.703, 10],
[14, 10],
[14, 128.273],
[291.703, 128.273]
],
"c": true
},
"ix": 1
},
"o": {
"a": 0,
"k": 100,
"ix": 3
},
"x": {
"a": 0,
"k": 0,
"ix": 4
},
"nm": "蒙版 1"
}
],
"w": 300,
"h": 300,
"ip": 0,
"op": 1200,
"st": 0,
"bm": 0
}
],
"markers": [],
"props": {}
}

41
packages/frontend/component/src/ui/lottie/collections-icon.tsx Normal file
View File

@ -0,0 +1,41 @@
import clsx from 'clsx';
import Lottie, { type LottieRef } from 'lottie-react';
import { useEffect, useRef } from 'react';
import * as styles from './collections-icon.css';
import animationData from './collections-icon.json';
export interface CollectionsIconProps {
closed: boolean; // eg, when collections icon is a "dragged over" state
className?: string;
}
// animated collections icon that has two states: closed and opened
export const AnimatedCollectionsIcon = ({
closed,
className,
}: CollectionsIconProps) => {
const lottieRef: LottieRef = useRef(null);
useEffect(() => {
if (lottieRef.current) {
const lottie = lottieRef.current;
if (closed) {
lottie.setDirection(1);
} else {
lottie.setDirection(-1);
}
lottie.play();
}
}, [closed]);
return (
<Lottie
className={clsx(styles.root, className)}
autoPlay={false}
loop={false}
lottieRef={lottieRef}
animationData={animationData}
/>
);
};

9
packages/frontend/component/src/ui/lottie/delete-icon.css.tsx Normal file
View File

@ -0,0 +1,9 @@
import { style } from '@vanilla-extract/css';
export const root = style({
width: '1em',
height: '1em',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
});

989
packages/frontend/component/src/ui/lottie/delete-icon.json Normal file
View File

@ -0,0 +1,989 @@
{
"v": "5.12.1",
"fr": 120,
"ip": 0,
"op": 41,
"w": 240,
"h": 240,
"nm": "Delete",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "head",
"parent": 2,
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [12, 5, 0],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [12, 5, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[0, 0],
[-1.105, 0],
[0, 0],
[0, -1.105],
[0, 0],
[0, 0]
],
"o": [
[0, -1.105],
[0, 0],
[1.105, 0],
[0, 0],
[0, 0],
[0, 0]
],
"v": [
[-3, 0],
[-1, -2],
[1, -2],
[3, 0],
[3, 2],
[-3, 2]
],
"c": true
},
"ix": 2
},
"nm": "路径 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.5,
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 4,
"bm": 0,
"nm": "描边 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [12, 5],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "变换"
}
],
"nm": "组 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1200,
"st": 0,
"ct": 1,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "headline",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 1,
"k": [
{
"i": {
"x": [0.62],
"y": [1]
},
"o": {
"x": [0.001],
"y": [0]
},
"t": 17.891,
"s": [0]
},
{
"t": 26,
"s": [-23]
}
],
"ix": 10
},
"p": {
"a": 1,
"k": [
{
"i": {
"x": 0.62,
"y": 1
},
"o": {
"x": 0.001,
"y": 0
},
"t": 10,
"s": [119, 67, 0],
"to": [-2.167, -0.583, 0],
"ti": [5.25, 2.583, 0]
},
{
"i": {
"x": 0.62,
"y": 1
},
"o": {
"x": 0.001,
"y": 0
},
"t": 17.891,
"s": [106, 63.5, 0],
"to": [-5.25, -2.583, 0],
"ti": [3.083, 2, 0]
},
{
"t": 25.78125,
"s": [87.5, 51.5, 0]
}
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [12, 7, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [1000, 1000, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0]
],
"v": [
[4, 7],
[20, 7]
],
"c": false
},
"ix": 2
},
"nm": "路径 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.7,
"ix": 5
},
"lc": 2,
"lj": 2,
"bm": 0,
"nm": "描边 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [0, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "变换"
}
],
"nm": "组 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1200,
"st": 0,
"ct": 1,
"bm": 0
},
{
"ddd": 0,
"ind": 3,
"ty": 4,
"nm": "line2",
"parent": 5,
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [14, 14, 0],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [14, 14, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0]
],
"v": [
[14, 11],
[14, 17]
],
"c": false
},
"ix": 2
},
"nm": "路径 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.5,
"ix": 5
},
"lc": 2,
"lj": 2,
"bm": 0,
"nm": "描边 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [0, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "变换"
}
],
"nm": "组 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1200,
"st": 0,
"ct": 1,
"bm": 0
},
{
"ddd": 0,
"ind": 4,
"ty": 4,
"nm": "line1",
"parent": 5,
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [10, 14, 0],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [10, 14, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[0, 0],
[0, 0]
],
"o": [
[0, 0],
[0, 0]
],
"v": [
[10, 11],
[10, 17]
],
"c": false
},
"ix": 2
},
"nm": "路径 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.5,
"ix": 5
},
"lc": 2,
"lj": 2,
"bm": 0,
"nm": "描边 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [0, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "变换"
}
],
"nm": "组 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1200,
"st": 0,
"ct": 1,
"bm": 0
},
{
"ddd": 0,
"ind": 5,
"ty": 4,
"nm": "body",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 1,
"k": [
{
"i": {
"x": [0.62],
"y": [1]
},
"o": {
"x": [0.001],
"y": [0]
},
"t": 10,
"s": [0]
},
{
"t": 23.80859375,
"s": [-9]
}
],
"ix": 10
},
"p": {
"a": 0,
"k": [49, 207, 0],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [5, 21, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [1000, 1000, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"ef": [
{
"ty": 5,
"nm": "Excite - 位置",
"np": 8,
"mn": "Pseudo/BNCA2506f0b33",
"ix": 1,
"en": 1,
"ef": [
{
"ty": 7,
"nm": "Enable",
"mn": "Pseudo/BNCA2506f0b33-0001",
"ix": 1,
"v": {
"a": 0,
"k": 1,
"ix": 1
}
},
{
"ty": 6,
"nm": "Properties",
"mn": "Pseudo/BNCA2506f0b33-0002",
"ix": 2,
"v": 0
},
{
"ty": 0,
"nm": "Overshoot",
"mn": "Pseudo/BNCA2506f0b33-0003",
"ix": 3,
"v": {
"a": 0,
"k": 20,
"ix": 3,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 0,
"nm": "Bounce",
"mn": "Pseudo/BNCA2506f0b33-0004",
"ix": 4,
"v": {
"a": 0,
"k": 40,
"ix": 4,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 0,
"nm": "Friction",
"mn": "Pseudo/BNCA2506f0b33-0005",
"ix": 5,
"v": {
"a": 0,
"k": 40,
"ix": 5,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 6,
"nm": "",
"mn": "Pseudo/BNCA2506f0b33-0006",
"ix": 6,
"v": 0
}
]
},
{
"ty": 5,
"nm": "Excite - 旋转",
"np": 8,
"mn": "Pseudo/BNCA2506f0b33",
"ix": 2,
"en": 1,
"ef": [
{
"ty": 7,
"nm": "Enable",
"mn": "Pseudo/BNCA2506f0b33-0001",
"ix": 1,
"v": {
"a": 0,
"k": 1,
"ix": 1
}
},
{
"ty": 6,
"nm": "Properties",
"mn": "Pseudo/BNCA2506f0b33-0002",
"ix": 2,
"v": 0
},
{
"ty": 0,
"nm": "Overshoot",
"mn": "Pseudo/BNCA2506f0b33-0003",
"ix": 3,
"v": {
"a": 0,
"k": 20,
"ix": 3,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 0,
"nm": "Bounce",
"mn": "Pseudo/BNCA2506f0b33-0004",
"ix": 4,
"v": {
"a": 0,
"k": 40,
"ix": 4,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 0,
"nm": "Friction",
"mn": "Pseudo/BNCA2506f0b33-0005",
"ix": 5,
"v": {
"a": 0,
"k": 40,
"ix": 5,
"x": "var $bm_rt;\n$bm_rt = clamp(value, 0, 100);"
}
},
{
"ty": 6,
"nm": "",
"mn": "Pseudo/BNCA2506f0b33-0006",
"ix": 6,
"v": 0
}
]
}
],
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[0, 0],
[0, 0],
[-1.049, 0],
[0, 0],
[-0.075, 1.046],
[0, 0]
],
"o": [
[0, 0],
[0.075, 1.046],
[0, 0],
[1.049, 0],
[0, 0],
[0, 0]
],
"v": [
[-7, -7],
[-6.133, 5.143],
[-4.138, 7],
[4.138, 7],
[6.133, 5.143],
[7, -7]
],
"c": false
},
"ix": 2
},
"nm": "路径 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 1.5,
"ix": 5
},
"lc": 1,
"lj": 2,
"bm": 0,
"nm": "描边 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [12, 14],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "变换"
}
],
"nm": "组 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1200,
"st": 0,
"ct": 1,
"bm": 0
}
],
"markers": [],
"props": {}
}

38
packages/frontend/component/src/ui/lottie/delete-icon.tsx Normal file
View File

@ -0,0 +1,38 @@
import clsx from 'clsx';
import Lottie, { type LottieRef } from 'lottie-react';
import { useEffect, useRef } from 'react';
import * as styles from './delete-icon.css';
import animationData from './delete-icon.json';
export interface DeleteIconProps {
closed: boolean; // eg, when delete icon is a "dragged over" state
className?: string;
}
// animated delete icon that has two animation states
export const AnimatedDeleteIcon = ({ closed, className }: DeleteIconProps) => {
const lottieRef: LottieRef = useRef(null);
useEffect(() => {
if (lottieRef.current) {
const lottie = lottieRef.current;
if (closed) {
lottie.setDirection(1);
} else {
lottie.setDirection(-1);
}
lottie.play();
}
}, [closed]);
return (
<Lottie
className={clsx(styles.root, className)}
autoPlay={false}
loop={false}
lottieRef={lottieRef}
animationData={animationData}
/>
);
};

5
packages/frontend/component/src/ui/scrollbar/scrollbar.tsx
View File

@ -1,6 +1,6 @@
import * as ScrollArea from '@radix-ui/react-scroll-area';
import clsx from 'clsx';
import { type PropsWithChildren } from 'react';
import { type PropsWithChildren, useRef } from 'react';
import { useHasScrollTop } from '../../components/app-sidebar/sidebar-containers/use-has-scroll-top';
import * as styles from './index.css';
@ -23,7 +23,8 @@ export const ScrollableContainer = ({
viewPortClassName,
scrollBarClassName,
}: PropsWithChildren<ScrollableContainerProps>) => {
const [hasScrollTop, ref] = useHasScrollTop();
const ref = useRef<HTMLDivElement>(null);
const hasScrollTop = useHasScrollTop(ref);
return (
<ScrollArea.Root
style={_styles}

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

@ -11,11 +11,9 @@ import { useCurrentUser } from '../../hooks/affine/use-current-user';
import { useIsWorkspaceOwner } from '../../hooks/affine/use-is-workspace-owner';
import { useWorkspace } from '../../hooks/use-workspace';
import {
BlockSuitePageList,
NewWorkspaceSettingDetail,
PageDetailEditor,
Provider,
WorkspaceHeader,
} from '../shared';
const LoginCard = lazy(() =>
@ -27,7 +25,6 @@ const LoginCard = lazy(() =>
export const UI = {
Provider,
LoginCard,
Header: WorkspaceHeader,
PageDetail: ({ currentWorkspaceId, currentPageId, onLoadEditor }) => {
const workspace = useWorkspace(currentWorkspaceId);
const page = workspace.blockSuiteWorkspace.getPage(currentPageId);
@ -61,16 +58,6 @@ export const UI = {
</>
);
},
PageList: ({ blockSuiteWorkspace, onOpenPage, collection }) => {
return (
<BlockSuitePageList
listType="all"
collection={collection}
onOpenPage={onOpenPage}
blockSuiteWorkspace={blockSuiteWorkspace}
/>
);
},
NewSettingsDetail: ({
currentWorkspaceId,
onTransformWorkspace,

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

@ -29,11 +29,9 @@ import { useCallback } from 'react';
import { setPageModeAtom } from '../../atoms';
import {
BlockSuitePageList,
NewWorkspaceSettingDetail,
PageDetailEditor,
Provider,
WorkspaceHeader,
} from '../shared';
const logger = new DebugLogger('use-create-first-workspace');
@ -85,7 +83,6 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
},
CRUD,
UI: {
Header: WorkspaceHeader,
Provider,
PageDetail: ({ currentWorkspaceId, currentPageId, onLoadEditor }) => {
const [workspaceAtom] = getBlockSuiteWorkspaceAtom(currentWorkspaceId);
@ -105,16 +102,6 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
</>
);
},
PageList: ({ blockSuiteWorkspace, onOpenPage, collection }) => {
return (
<BlockSuitePageList
listType="all"
collection={collection}
onOpenPage={onOpenPage}
blockSuiteWorkspace={blockSuiteWorkspace}
/>
);
},
NewSettingsDetail: ({
currentWorkspaceId,
onTransformWorkspace,

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

@ -5,13 +5,10 @@ import { initEmptyPage } from '@toeverything/infra/blocksuite';
import { useCallback } from 'react';
import { useWorkspace } from '../../hooks/use-workspace';
import { BlockSuitePageList, PageDetailEditor, Provider } from '../shared';
import { PageDetailEditor, Provider } from '../shared';
export const UI = {
Provider,
Header: () => {
return null;
},
PageDetail: ({ currentWorkspaceId, currentPageId, onLoadEditor }) => {
const workspace = useWorkspace(currentWorkspaceId);
const page = workspace.blockSuiteWorkspace.getPage(currentPageId);
@ -29,16 +26,6 @@ export const UI = {
</>
);
},
PageList: ({ blockSuiteWorkspace, onOpenPage, collection }) => {
return (
<BlockSuitePageList
listType="all"
collection={collection}
onOpenPage={onOpenPage}
blockSuiteWorkspace={blockSuiteWorkspace}
/>
);
},
NewSettingsDetail: () => {
throw new Error('Not implemented');
},

14
packages/frontend/core/src/adapters/shared.ts
View File

@ -14,22 +14,8 @@ export const NewWorkspaceSettingDetail = lazy(() =>
)
);
export const BlockSuitePageList = lazy(() =>
import('../components/blocksuite/block-suite-page-list').then(
({ BlockSuitePageList }) => ({
default: BlockSuitePageList,
})
)
);
export const PageDetailEditor = lazy(() =>
import('../components/page-detail-editor').then(({ PageDetailEditor }) => ({
default: PageDetailEditor,
}))
);
export const WorkspaceHeader = lazy(() =>
import('../components/workspace-header').then(({ WorkspaceHeader }) => ({
default: WorkspaceHeader,
}))
);

210
packages/frontend/core/src/atoms/collections.ts Normal file
View File

@ -0,0 +1,210 @@
import type { CollectionsCRUDAtom } from '@affine/component/page-list';
import type { Collection, DeprecatedCollection } from '@affine/env/filter';
import { DisposableGroup } from '@blocksuite/global/utils';
import type { Workspace } from '@blocksuite/store';
import { currentWorkspaceAtom } from '@toeverything/infra/atom';
import { type DBSchema, openDB } from 'idb';
import { atom } from 'jotai';
import { atomWithObservable } from 'jotai/utils';
import { Observable } from 'rxjs';
import { getUserSetting } from '../utils/user-setting';
import { getWorkspaceSetting } from '../utils/workspace-setting';
import { sessionAtom } from './cloud-user';
/**
* @deprecated
*/
export interface PageCollectionDBV1 extends DBSchema {
view: {
key: DeprecatedCollection['id'];
value: DeprecatedCollection;
};
}
/**
* @deprecated
*/
export interface StorageCRUD<Value> {
get: (key: string) => Promise<Value | null>;
set: (key: string, value: Value) => Promise<string>;
delete: (key: string) => Promise<void>;
list: () => Promise<string[]>;
}
/**
* @deprecated
*/
const collectionDBAtom = atom(
openDB<PageCollectionDBV1>('page-view', 1, {
upgrade(database) {
database.createObjectStore('view', {
keyPath: 'id',
});
},
})
);
/**
* @deprecated
*/
const localCollectionCRUDAtom = atom(get => ({
get: async (key: string) => {
const db = await get(collectionDBAtom);
const t = db.transaction('view').objectStore('view');
return (await t.get(key)) ?? null;
},
set: async (key: string, value: DeprecatedCollection) => {
const db = await get(collectionDBAtom);
const t = db.transaction('view', 'readwrite').objectStore('view');
await t.put(value);
return key;
},
delete: async (key: string) => {
const db = await get(collectionDBAtom);
const t = db.transaction('view', 'readwrite').objectStore('view');
await t.delete(key);
},
list: async () => {
const db = await get(collectionDBAtom);
const t = db.transaction('view').objectStore('view');
return t.getAllKeys();
},
}));
/**
* @deprecated
*/
const getCollections = async (
storage: StorageCRUD<DeprecatedCollection>
): Promise<DeprecatedCollection[]> => {
return storage
.list()
.then(async keys => {
return await Promise.all(keys.map(key => storage.get(key))).then(v =>
v.filter((v): v is DeprecatedCollection => v !== null)
);
})
.catch(error => {
console.error('Failed to load collections', error);
return [];
});
};
type BaseCollectionsDataType = {
loading: boolean;
collections: Collection[];
};
export const pageCollectionBaseAtom =
atomWithObservable<BaseCollectionsDataType>(
get => {
const currentWorkspacePromise = get(currentWorkspaceAtom);
const session = get(sessionAtom);
const userId = session?.data?.user.id ?? null;
const migrateCollectionsFromIdbData = async (
workspace: Workspace
): Promise<Collection[]> => {
workspace.awarenessStore.awareness.emit('change log');
const localCRUD = get(localCollectionCRUDAtom);
const collections = await getCollections(localCRUD);
const result = collections.filter(v => v.workspaceId === workspace.id);
Promise.all(
result.map(collection => {
return localCRUD.delete(collection.id);
})
).catch(error => {
console.error('Failed to delete collections from indexeddb', error);
});
return result.map(v => {
return {
id: v.id,
name: v.name,
mode: 'rule',
filterList: v.filterList,
allowList: v.allowList ?? [],
pages: [],
};
});
};
const migrateCollectionsFromUserData = async (
workspace: Workspace
): Promise<Collection[]> => {
if (userId == null) {
return [];
}
const userSetting = getUserSetting(workspace, userId);
await userSetting.loaded;
const view = userSetting.view;
if (view) {
const collections: DeprecatedCollection[] = [...view.values()];
//delete collections
view.clear();
return collections.map(v => {
return {
id: v.id,
name: v.name,
mode: 'rule',
filterList: v.filterList,
allowList: v.allowList ?? [],
pages: [],
};
});
}
return [];
};
return new Observable<BaseCollectionsDataType>(subscriber => {
const group = new DisposableGroup();
currentWorkspacePromise.then(async currentWorkspace => {
const collectionsFromLocal =
await migrateCollectionsFromIdbData(currentWorkspace);
const collectionFromUserSetting =
await migrateCollectionsFromUserData(currentWorkspace);
const workspaceSetting = getWorkspaceSetting(currentWorkspace);
if (collectionsFromLocal.length || collectionFromUserSetting.length) {
// migrate collections
workspaceSetting.addCollection(
...collectionFromUserSetting,
...collectionsFromLocal
);
}
subscriber.next({
loading: false,
collections: workspaceSetting.collections,
});
if (group.disposed) {
return;
}
const fn = () => {
subscriber.next({
loading: false,
collections: workspaceSetting.collections,
});
};
workspaceSetting.collectionsYArray.observe(fn);
group.add(() => {
workspaceSetting.collectionsYArray.unobserve(fn);
});
});
return () => {
group.dispose();
};
});
},
{ initialValue: { loading: true, collections: [] } }
);
export const collectionsCRUDAtom: CollectionsCRUDAtom = atom(get => {
const workspacePromise = get(currentWorkspaceAtom);
return {
addCollection: async (...collections) => {
const workspace = await workspacePromise;
getWorkspaceSetting(workspace).addCollection(...collections);
},
collections: get(pageCollectionBaseAtom).collections,
updateCollection: async (id, updater) => {
const workspace = await workspacePromise;
getWorkspaceSetting(workspace).updateCollection(id, updater);
},
deleteCollection: async (info, ...ids) => {
const workspace = await workspacePromise;
getWorkspaceSetting(workspace).deleteCollection(info, ...ids);
},
};
});

8
packages/frontend/core/src/atoms/trash-modal.ts
View File

@ -2,12 +2,12 @@ import { atom } from 'jotai';
export type TrashModal = {
open: boolean;
pageId: string;
pageTitle: string;
pageIds: string[];
pageTitles: string[];
};
export const trashModalAtom = atom<TrashModal>({
open: false,
pageId: '',
pageTitle: '',
pageIds: [],
pageTitles: [],
});

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

@ -70,8 +70,8 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
const handleOpenTrashModal = useCallback(() => {
setTrashModal({
open: true,
pageId,
pageTitle: pageMeta.title,
pageIds: [pageId],
pageTitles: [pageMeta.title],
});
}, [pageId, pageMeta.title, setTrashModal]);

297
packages/frontend/core/src/components/blocksuite/block-suite-page-list/index.tsx
View File

@ -1,297 +0,0 @@
import { Empty } from '@affine/component';
import type { ListData, TrashListData } from '@affine/component/page-list';
import { PageList, PageListTrashView } from '@affine/component/page-list';
import type { Collection } from '@affine/env/filter';
import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { assertExists } from '@blocksuite/global/utils';
import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
import { type PageMeta, type Workspace } from '@blocksuite/store';
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
import { useBlockSuitePagePreview } from '@toeverything/hooks/use-block-suite-page-preview';
import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
import { useAtom, useAtomValue } from 'jotai';
import { Suspense, useCallback, useMemo } from 'react';
import { allPageModeSelectAtom } from '../../../atoms';
import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
import { useTrashModalHelper } from '../../../hooks/affine/use-trash-modal-helper';
import { useGetPageInfoById } from '../../../hooks/use-get-page-info';
import type { BlockSuiteWorkspace } from '../../../shared';
import { toast } from '../../../utils';
import { filterPage } from '../../../utils/filter';
import { currentCollectionsAtom } from '../../../utils/user-setting';
import { emptyDescButton, emptyDescKbd, pageListEmptyStyle } from './index.css';
import { usePageHelper } from './utils';
export interface BlockSuitePageListProps {
blockSuiteWorkspace: BlockSuiteWorkspace;
listType: 'all' | 'trash' | 'shared' | 'public';
isPublic?: boolean;
onOpenPage: (pageId: string, newTab?: boolean) => void;
collection?: Collection;
}
const filter = {
all: (pageMeta: PageMeta) => !pageMeta.trash,
public: (pageMeta: PageMeta) => !pageMeta.trash,
trash: (pageMeta: PageMeta, allMetas: PageMeta[]) => {
const parentMeta = allMetas.find(m => m.subpageIds?.includes(pageMeta.id));
return !parentMeta?.trash && pageMeta.trash;
},
shared: (pageMeta: PageMeta) => pageMeta.isPublic && !pageMeta.trash,
};
interface PagePreviewInnerProps {
workspace: Workspace;
pageId: string;
}
const PagePreviewInner = ({ workspace, pageId }: PagePreviewInnerProps) => {
const page = useBlockSuiteWorkspacePage(workspace, pageId);
assertExists(page);
const previewAtom = useBlockSuitePagePreview(page);
const preview = useAtomValue(previewAtom);
return preview;
};
interface PagePreviewProps {
workspace: Workspace;
pageId: string;
}
const PagePreview = ({ workspace, pageId }: PagePreviewProps) => {
return (
<Suspense>
<PagePreviewInner workspace={workspace} pageId={pageId} />
</Suspense>
);
};
interface PageListEmptyProps {
createPage?: ReturnType<typeof usePageHelper>['createPage'];
listType: BlockSuitePageListProps['listType'];
}
const PageListEmpty = (props: PageListEmptyProps) => {
const { listType, createPage } = props;
const t = useAFFiNEI18N();
const onCreatePage = useCallback(() => {
createPage?.();
}, [createPage]);
const getEmptyDescription = () => {
if (listType === 'all') {
const createNewPageButton = (
<button className={emptyDescButton} onClick={onCreatePage}>
New Page
</button>
);
if (environment.isDesktop) {
const shortcut = environment.isMacOs ? '⌘ + N' : 'Ctrl + N';
return (
<Trans i18nKey="emptyAllPagesClient">
Click on the {createNewPageButton} button Or press
<kbd className={emptyDescKbd}>{{ shortcut } as any}</kbd> to create
your first page.
</Trans>
);
}
return (
<Trans i18nKey="emptyAllPages">
Click on the
{createNewPageButton}
button to create your first page.
</Trans>
);
}
if (listType === 'trash') {
return t['emptyTrash']();
}
if (listType === 'shared') {
return t['emptySharedPages']();
}
return;
};
return (
<div className={pageListEmptyStyle}>
<Empty
title={t['com.affine.emptyDesc']()}
description={getEmptyDescription()}
/>
</div>
);
};
export const BlockSuitePageList = ({
blockSuiteWorkspace,
onOpenPage,
listType,
isPublic = false,
collection,
}: BlockSuitePageListProps) => {
const pageMetas = useBlockSuitePageMeta(blockSuiteWorkspace);
const {
toggleFavorite,
restoreFromTrash,
permanentlyDeletePage,
cancelPublicPage,
} = useBlockSuiteMetaHelper(blockSuiteWorkspace);
const [filterMode] = useAtom(allPageModeSelectAtom);
const { createPage, createEdgeless, importFile, isPreferredEdgeless } =
usePageHelper(blockSuiteWorkspace);
const t = useAFFiNEI18N();
const getPageInfo = useGetPageInfoById(blockSuiteWorkspace);
const { setTrashModal } = useTrashModalHelper(blockSuiteWorkspace);
const tagOptionMap = useMemo(
() =>
Object.fromEntries(
(blockSuiteWorkspace.meta.properties.tags?.options ?? []).map(v => [
v.id,
v,
])
),
[blockSuiteWorkspace.meta.properties.tags?.options]
);
const list = useMemo(
() =>
pageMetas
.filter(pageMeta => {
if (filterMode === 'all') {
return true;
}
if (filterMode === 'edgeless') {
return isPreferredEdgeless(pageMeta.id);
}
if (filterMode === 'page') {
return !isPreferredEdgeless(pageMeta.id);
}
console.error('unknown filter mode', pageMeta, filterMode);
return true;
})
.filter(pageMeta => {
if (!filter[listType](pageMeta, pageMetas)) {
return false;
}
if (!collection) {
return true;
}
return filterPage(collection, pageMeta);
}),
[pageMetas, filterMode, isPreferredEdgeless, listType, collection]
);
if (listType === 'trash') {
const pageList: TrashListData[] = list.map(pageMeta => {
return {
icon: isPreferredEdgeless(pageMeta.id) ? (
<EdgelessIcon />
) : (
<PageIcon />
),
pageId: pageMeta.id,
title: pageMeta.title,
preview: (
<PagePreview workspace={blockSuiteWorkspace} pageId={pageMeta.id} />
),
createDate: new Date(pageMeta.createDate),
trashDate: pageMeta.trashDate
? new Date(pageMeta.trashDate)
: undefined,
onClickPage: () => onOpenPage(pageMeta.id),
onClickRestore: () => {
restoreFromTrash(pageMeta.id);
},
onRestorePage: () => {
restoreFromTrash(pageMeta.id);
toast(
t['com.affine.toastMessage.restored']({
title: pageMeta.title || 'Untitled',
})
);
},
onPermanentlyDeletePage: () => {
permanentlyDeletePage(pageMeta.id);
toast(t['com.affine.toastMessage.permanentlyDeleted']());
},
};
});
return (
<PageListTrashView
list={pageList}
fallback={<PageListEmpty listType={listType} />}
/>
);
}
const pageList: ListData[] = list.map(pageMeta => {
const page = blockSuiteWorkspace.getPage(pageMeta.id);
return {
icon: isPreferredEdgeless(pageMeta.id) ? <EdgelessIcon /> : <PageIcon />,
pageId: pageMeta.id,
title: pageMeta.title,
preview: (
<PagePreview workspace={blockSuiteWorkspace} pageId={pageMeta.id} />
),
tags:
page?.meta.tags?.map(id => tagOptionMap[id]).filter(v => v != null) ??
[],
favorite: !!pageMeta.favorite,
isPublicPage: !!pageMeta.isPublic,
createDate: new Date(pageMeta.createDate),
updatedDate: new Date(pageMeta.updatedDate ?? pageMeta.createDate),
onClickPage: () => onOpenPage(pageMeta.id),
onOpenPageInNewTab: () => onOpenPage(pageMeta.id, true),
onClickRestore: () => {
restoreFromTrash(pageMeta.id);
},
removeToTrash: () =>
setTrashModal({
open: true,
pageId: pageMeta.id,
pageTitle: pageMeta.title,
}),
onRestorePage: () => {
restoreFromTrash(pageMeta.id);
toast(
t['com.affine.toastMessage.restored']({
title: pageMeta.title || 'Untitled',
})
);
},
bookmarkPage: () => {
const status = pageMeta.favorite;
toggleFavorite(pageMeta.id);
toast(
status
? t['com.affine.toastMessage.removedFavorites']()
: t['com.affine.toastMessage.addedFavorites']()
);
},
onDisablePublicSharing: () => {
cancelPublicPage(pageMeta.id);
toast('Successfully disabled', {
portal: document.body,
});
},
};
});
return (
<PageList
collectionsAtom={currentCollectionsAtom}
propertiesMeta={blockSuiteWorkspace.meta.properties}
getPageInfo={getPageInfo}
onCreateNewPage={createPage}
onCreateNewEdgeless={createEdgeless}
onImportFile={importFile}
isPublicWorkspace={isPublic}
list={pageList}
fallback={<PageListEmpty createPage={createPage} listType={listType} />}
/>
);
};

13
packages/frontend/core/src/components/filter-container.css.ts
View File

@ -1,18 +1,7 @@
import { style } from '@vanilla-extract/css';
export const filterContainerStyle = style({
padding: '12px',
padding: '0 16px',
display: 'flex',
position: 'relative',
'::after': {
content: '""',
display: 'block',
width: '100%',
height: '1px',
background: 'var(--affine-border-color)',
position: 'absolute',
bottom: 0,
left: 0,
margin: '0 1px',
},
});

18
packages/frontend/core/src/components/pure/cmdk/data.tsx
View File

@ -25,17 +25,17 @@ import {
} from '@toeverything/infra/command';
import { atom, useAtomValue } from 'jotai';
import groupBy from 'lodash/groupBy';
import { useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import {
openQuickSearchModalAtom,
pageSettingsAtom,
recentPageIdsBaseAtom,
} from '../../../atoms';
import { collectionsCRUDAtom } from '../../../atoms/collections';
import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
import { WorkspaceSubPath } from '../../../shared';
import { currentCollectionsAtom } from '../../../utils/user-setting';
import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils';
import type { CMDKCommand, CommandContext } from './types';
@ -295,7 +295,7 @@ export const collectionToCommand = (
collection: Collection,
store: ReturnType<typeof getCurrentStore>,
navigationHelper: ReturnType<typeof useNavigateHelper>,
selectCollection: ReturnType<typeof useCollectionManager>['selectCollection'],
selectCollection: (id: string) => void,
t: ReturnType<typeof useAFFiNEI18N>
): CMDKCommand => {
const currentWorkspaceId = store.get(currentWorkspaceIdAtom);
@ -329,14 +329,18 @@ export const collectionToCommand = (
export const useCollectionsCommands = () => {
// todo: considering collections for searching pages
const { savedCollections, selectCollection } = useCollectionManager(
currentCollectionsAtom
);
const { savedCollections } = useCollectionManager(collectionsCRUDAtom);
const store = getCurrentStore();
const query = useAtomValue(cmdkQueryAtom);
const navigationHelper = useNavigateHelper();
const t = useAFFiNEI18N();
const [workspace] = useCurrentWorkspace();
const selectCollection = useCallback(
(id: string) => {
navigationHelper.jumpToCollection(workspace.id, id);
},
[navigationHelper, workspace.id]
);
return useMemo(() => {
let results: CMDKCommand[] = [];
if (query.trim() === '') {

13
packages/frontend/core/src/components/pure/header/index.tsx
View File

@ -6,7 +6,7 @@ import {
import { useIsTinyScreen } from '@toeverything/hooks/use-is-tiny-screen';
import clsx from 'clsx';
import { type Atom, useAtomValue } from 'jotai';
import type { ReactElement } from 'react';
import type { ReactNode } from 'react';
import { forwardRef, useRef } from 'react';
import * as style from './style.css';
@ -14,17 +14,18 @@ import { TopTip } from './top-tip';
import { WindowsAppControls } from './windows-app-controls';
interface HeaderPros {
left?: ReactElement;
right?: ReactElement;
center?: ReactElement;
left?: ReactNode;
right?: ReactNode;
center?: ReactNode;
mainContainerAtom: Atom<HTMLDivElement | null>;
bottomBorder?: boolean;
}
// The Header component is used to solve the following problems
// 1. Manage layout issues independently of page or business logic
// 2. Dynamic centered middle element (relative to the main-container), when the middle element is detected to collide with the two elements, the line wrapping process is performed
export const Header = forwardRef<HTMLDivElement, HeaderPros>(function Header(
{ left, center, right, mainContainerAtom },
{ left, center, right, mainContainerAtom, bottomBorder },
ref
) {
const sidebarSwitchRef = useRef<HTMLDivElement | null>(null);
@ -51,7 +52,7 @@ export const Header = forwardRef<HTMLDivElement, HeaderPros>(function Header(
<>
<TopTip />
<div
className={style.header}
className={clsx(style.header, bottomBorder && style.bottomBorder)}
// data-has-warning={showWarning}
data-open={open}
data-sidebar-floating={appSidebarFloating}

5
packages/frontend/core/src/components/pure/header/style.css.tsx
View File

@ -8,7 +8,6 @@ export const header = style({
padding: '0 16px',
minHeight: '52px',
background: 'var(--affine-background-primary-color)',
borderBottom: '1px solid var(--affine-border-color)',
zIndex: 2,
selectors: {
'&[data-sidebar-floating="false"]': {
@ -25,6 +24,10 @@ export const header = style({
},
} as ComplexStyleRule);
export const bottomBorder = style({
borderBottom: '1px solid var(--affine-border-color)',
});
export const headerItem = style({
minHeight: '32px',
display: 'flex',

65
packages/frontend/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx
View File

@ -1,41 +1,41 @@
import {
EditCollectionModal,
createEmptyCollection,
useCollectionManager,
useEditCollectionName,
} from '@affine/component/page-list';
import type { Collection } from '@affine/env/filter';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { PlusIcon } from '@blocksuite/icons';
import type { Workspace } from '@blocksuite/store';
import { IconButton } from '@toeverything/components/button';
import { nanoid } from 'nanoid';
import { useCallback, useState } from 'react';
import { useCallback } from 'react';
import { useGetPageInfoById } from '../../../../hooks/use-get-page-info';
import { currentCollectionsAtom } from '../../../../utils/user-setting';
import { collectionsCRUDAtom } from '../../../../atoms/collections';
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
type AddCollectionButtonProps = {
workspace: Workspace;
};
export const AddCollectionButton = ({
workspace,
}: AddCollectionButtonProps) => {
const getPageInfo = useGetPageInfoById(workspace);
const setting = useCollectionManager(currentCollectionsAtom);
export const AddCollectionButton = () => {
const setting = useCollectionManager(collectionsCRUDAtom);
const t = useAFFiNEI18N();
const [show, showUpdateCollection] = useState(false);
const [defaultCollection, setDefaultCollection] = useState<Collection>();
const { node, open } = useEditCollectionName({
title: t['com.affine.editCollection.createCollection'](),
showTips: true,
});
const navigateHelper = useNavigateHelper();
const [workspace] = useCurrentWorkspace();
const handleClick = useCallback(() => {
showUpdateCollection(true);
setDefaultCollection({
id: nanoid(),
name: '',
pinned: true,
filterList: [],
workspaceId: workspace.id,
});
}, [showUpdateCollection, workspace.id]);
open('')
.then(name => {
const id = nanoid();
return setting
.createCollection(createEmptyCollection(id, { name }))
.then(() => {
navigateHelper.jumpToCollection(workspace.id, id);
});
})
.catch(err => {
console.error(err);
});
}, [navigateHelper, open, setting, workspace.id]);
return (
<>
<IconButton
@ -45,16 +45,7 @@ export const AddCollectionButton = ({
>
<PlusIcon />
</IconButton>
<EditCollectionModal
propertiesMeta={workspace.meta.properties}
getPageInfo={getPageInfo}
onConfirm={setting.saveCollection}
open={show}
onOpenChange={showUpdateCollection}
title={t['com.affine.editCollection.saveCollection']()}
init={defaultCollection}
/>
{node}
</>
);
};

225
packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
View File

@ -1,40 +1,29 @@
import { MenuItem as CollectionItem } from '@affine/component/app-sidebar';
import { AnimatedCollectionsIcon } from '@affine/component';
import {
EditCollectionModal,
MenuItem as SidebarMenuItem,
MenuLinkItem as SidebarMenuLinkItem,
} from '@affine/component/app-sidebar';
import {
CollectionOperations,
filterPage,
stopPropagation,
useCollectionManager,
useSavedCollections,
} from '@affine/component/page-list';
import type { Collection } from '@affine/env/filter';
import type { GetPageInfoById } from '@affine/env/page-info';
import { WorkspaceSubPath } from '@affine/env/workspace';
import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
DeleteIcon,
FilterIcon,
InformationIcon,
MoreHorizontalIcon,
UnpinIcon,
ViewLayersIcon,
} from '@blocksuite/icons';
import { InformationIcon, MoreHorizontalIcon } from '@blocksuite/icons';
import type { PageMeta, Workspace } from '@blocksuite/store';
import type { DragEndEvent } from '@dnd-kit/core';
import { useDroppable } from '@dnd-kit/core';
import * as Collapsible from '@radix-ui/react-collapsible';
import { IconButton } from '@toeverything/components/button';
import {
Menu,
MenuIcon,
MenuItem,
type MenuItemProps,
} from '@toeverything/components/menu';
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
import type { ReactElement } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useGetPageInfoById } from '../../../../hooks/use-get-page-info';
import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
import { filterPage } from '../../../../utils/filter';
import { currentCollectionsAtom } from '../../../../utils/user-setting';
import { collectionsCRUDAtom } from '../../../../atoms/collections';
import { useAllPageListConfig } from '../../../../hooks/affine/use-all-page-list-config';
import type { CollectionsListProps } from '../index';
import { Page } from './page';
import * as styles from './styles.css';
@ -51,111 +40,20 @@ export const processCollectionsDrag = (e: DragEndEvent) => {
e.over?.data.current?.addToCollection?.(e.active.data.current?.pageId);
}
};
const CollectionOperations = ({
view,
showUpdateCollection,
setting,
}: {
view: Collection;
showUpdateCollection: () => void;
setting: ReturnType<typeof useCollectionManager>;
}) => {
const t = useAFFiNEI18N();
const actions = useMemo<
Array<
| {
icon: ReactElement;
name: string;
click: () => void;
type?: MenuItemProps['type'];
element?: undefined;
}
| {
element: ReactElement;
}
>
>(
() => [
{
icon: (
<MenuIcon>
<FilterIcon />
</MenuIcon>
),
name: t['Edit Filter'](),
click: showUpdateCollection,
},
{
icon: (
<MenuIcon>
<UnpinIcon />
</MenuIcon>
),
name: t['Unpin'](),
click: () => {
return setting.updateCollection({
...view,
pinned: false,
});
},
},
{
element: <div key="divider" className={styles.menuDividerStyle}></div>,
},
{
icon: (
<MenuIcon>
<DeleteIcon />
</MenuIcon>
),
name: t['Delete'](),
click: () => {
return setting.deleteCollection(view.id);
},
type: 'danger',
},
],
[setting, showUpdateCollection, t, view]
);
return (
<div style={{ minWidth: 150 }}>
{actions.map(action => {
if (action.element) {
return action.element;
}
return (
<MenuItem
data-testid="collection-option"
key={action.name}
type={action.type}
preFix={action.icon}
onClick={action.click}
>
{action.name}
</MenuItem>
);
})}
</div>
);
};
const CollectionRenderer = ({
collection,
pages,
workspace,
getPageInfo,
info,
}: {
collection: Collection;
pages: PageMeta[];
workspace: Workspace;
getPageInfo: GetPageInfoById;
info: DeleteCollectionInfo;
}) => {
const [collapsed, setCollapsed] = useState(true);
const setting = useCollectionManager(currentCollectionsAtom);
const { jumpToSubPath } = useNavigateHelper();
const clickCollection = useCallback(() => {
jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
setting.selectCollection(collection.id);
}, [jumpToSubPath, workspace.id, setting, collection.id]);
const setting = useCollectionManager(collectionsCRUDAtom);
const { setNodeRef, isOver } = useDroppable({
id: `${Collections_DROP_AREA_PREFIX}${collection.id}`,
data: {
@ -166,19 +64,15 @@ const CollectionRenderer = ({
},
},
});
const config = useAllPageListConfig();
const allPagesMeta = useMemo(
() => Object.fromEntries(pages.map(v => [v.id, v])),
[pages]
);
const [show, showUpdateCollection] = useState(false);
const allowList = useMemo(
() => new Set(collection.allowList),
[collection.allowList]
);
const excludeList = useMemo(
() => new Set(collection.excludeList),
[collection.excludeList]
);
const removeFromAllowList = useCallback(
(id: string) => {
return setting.updateCollection({
@ -188,57 +82,41 @@ const CollectionRenderer = ({
},
[collection, setting]
);
const addToExcludeList = useCallback(
(id: string) => {
return setting.updateCollection({
...collection,
excludeList: [id, ...(collection.excludeList ?? [])],
});
},
[collection, setting]
);
const pagesToRender = pages.filter(
page => filterPage(collection, page) && !page.trash
);
const location = useLocation();
const currentPath = location.pathname.split('?')[0];
const path = `/workspace/${workspace.id}/collection/${collection.id}`;
return (
<Collapsible.Root open={!collapsed}>
<EditCollectionModal
propertiesMeta={workspace.meta.properties}
getPageInfo={getPageInfo}
init={collection}
onConfirm={setting.saveCollection}
open={show}
onOpenChange={showUpdateCollection}
/>
<CollectionItem
<SidebarMenuLinkItem
data-testid="collection-item"
data-type="collection-list-item"
ref={setNodeRef}
onCollapsedChange={setCollapsed}
active={isOver}
icon={<ViewLayersIcon />}
active={isOver || currentPath === path}
icon={<AnimatedCollectionsIcon closed={isOver} />}
to={path}
postfix={
<Menu
items={
<CollectionOperations
view={collection}
showUpdateCollection={() => showUpdateCollection(true)}
setting={setting}
/>
}
>
<IconButton
data-testid="collection-options"
type="plain"
withoutHoverStyle
<div onClick={stopPropagation}>
<CollectionOperations
info={info}
collection={collection}
setting={setting}
config={config}
>
<MoreHorizontalIcon />
</IconButton>
</Menu>
<IconButton
data-testid="collection-options"
type="plain"
withoutHoverStyle
>
<MoreHorizontalIcon />
</IconButton>
</CollectionOperations>
</div>
}
collapsed={pagesToRender.length > 0 ? collapsed : undefined}
onClick={clickCollection}
>
<div
style={{
@ -249,7 +127,7 @@ const CollectionRenderer = ({
>
<div>{collection.name}</div>
</div>
</CollectionItem>
</SidebarMenuLinkItem>
<Collapsible.Content className={styles.collapsibleContent}>
<div style={{ marginLeft: 20, marginTop: -4 }}>
{pagesToRender.map(page => {
@ -257,8 +135,6 @@ const CollectionRenderer = ({
<Page
inAllowList={allowList.has(page.id)}
removeFromAllowList={removeFromAllowList}
inExcludeList={excludeList.has(page.id)}
addToExcludeList={addToExcludeList}
allPageMeta={allPagesMeta}
page={page}
key={page.id}
@ -271,32 +147,27 @@ const CollectionRenderer = ({
</Collapsible.Root>
);
};
export const CollectionsList = ({ workspace }: CollectionsListProps) => {
export const CollectionsList = ({ workspace, info }: CollectionsListProps) => {
const metas = useBlockSuitePageMeta(workspace);
const { savedCollections } = useSavedCollections(currentCollectionsAtom);
const getPageInfo = useGetPageInfoById(workspace);
const pinedCollections = useMemo(
() => savedCollections.filter(v => v.pinned),
[savedCollections]
);
const { collections } = useSavedCollections(collectionsCRUDAtom);
const t = useAFFiNEI18N();
if (pinedCollections.length === 0) {
if (collections.length === 0) {
return (
<CollectionItem
<SidebarMenuItem
data-testid="slider-bar-collection-null-description"
icon={<InformationIcon />}
disabled
>
<span>{t['Create a collection']()}</span>
</CollectionItem>
</SidebarMenuItem>
);
}
return (
<div data-testid="collections" className={styles.wrapper}>
{pinedCollections.map(view => {
{collections.map(view => {
return (
<CollectionRenderer
getPageInfo={getPageInfo}
info={info}
key={view.id}
collection={view}
pages={metas}

40
packages/frontend/core/src/components/pure/workspace-slider-bar/collections/page.tsx
View File

@ -4,7 +4,6 @@ import {
DeleteIcon,
EdgelessIcon,
FilterMinusIcon,
FilterUndoIcon,
MoreHorizontalIcon,
PageIcon,
} from '@blocksuite/icons';
@ -32,25 +31,21 @@ import * as styles from './styles.css';
export const PageOperations = ({
page,
inAllowList,
addToExcludeList,
removeFromAllowList,
inExcludeList,
workspace,
}: {
workspace: Workspace;
page: PageMeta;
inAllowList: boolean;
removeFromAllowList: (id: string) => void;
inExcludeList: boolean;
addToExcludeList: (id: string) => void;
}) => {
const t = useAFFiNEI18N();
const { setTrashModal } = useTrashModalHelper(workspace);
const onClickDelete = useCallback(() => {
setTrashModal({
open: true,
pageId: page.id,
pageTitle: page.title,
pageIds: [page.id],
pageTitles: [page.title],
});
}, [page.id, page.title, setTrashModal]);
const actions = useMemo<
@ -79,24 +74,13 @@ export const PageOperations = ({
name: t['Remove special filter'](),
click: () => removeFromAllowList(page.id),
},
]
: []),
...(!inExcludeList
? [
{
icon: (
<MenuIcon>
<FilterUndoIcon />
</MenuIcon>
element: (
<div key="divider" className={styles.menuDividerStyle}></div>
),
name: t['Exclude from filter'](),
click: () => addToExcludeList(page.id),
},
]
: []),
{
element: <div key="divider" className={styles.menuDividerStyle}></div>,
},
{
icon: (
<MenuIcon>
@ -108,15 +92,7 @@ export const PageOperations = ({
type: 'danger',
},
],
[
inAllowList,
t,
inExcludeList,
onClickDelete,
removeFromAllowList,
page.id,
addToExcludeList,
]
[inAllowList, t, onClickDelete, removeFromAllowList, page.id]
);
return (
<>
@ -144,15 +120,11 @@ export const Page = ({
workspace,
allPageMeta,
inAllowList,
inExcludeList,
removeFromAllowList,
addToExcludeList,
}: {
page: PageMeta;
inAllowList: boolean;
removeFromAllowList: (id: string) => void;
inExcludeList: boolean;
addToExcludeList: (id: string) => void;
workspace: Workspace;
allPageMeta: Record<string, PageMeta>;
}) => {
@ -186,8 +158,6 @@ export const Page = ({
<PageOperations
inAllowList={inAllowList}
removeFromAllowList={removeFromAllowList}
inExcludeList={inExcludeList}
addToExcludeList={addToExcludeList}
page={page}
workspace={workspace}
/>

3
packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts
View File

@ -1,6 +1,9 @@
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
export const wrapper = style({
display: 'flex',
flexDirection: 'column',
gap: '4px',
userSelect: 'none',
// marginLeft:8,
});

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

@ -1,3 +1,4 @@
import type { DeleteCollectionInfo } from '@affine/env/filter';
import type { Workspace } from '@blocksuite/store';
export type FavoriteListProps = {
@ -6,4 +7,5 @@ export type FavoriteListProps = {
export type CollectionsListProps = {
workspace: Workspace;
info: DeleteCollectionInfo;
};

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

@ -1,3 +1,4 @@
import { AnimatedDeleteIcon } from '@affine/component';
import {
AddPageButton,
AppSidebar,
@ -10,13 +11,10 @@ import {
SidebarContainer,
SidebarScrollableContainer,
} from '@affine/component/app-sidebar';
import { MoveToTrash, useCollectionManager } from '@affine/component/page-list';
import { MoveToTrash } from '@affine/component/page-list';
import { WorkspaceSubPath } from '@affine/env/workspace';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
DeleteTemporarilyIcon,
FolderIcon,
SettingsIcon,
} from '@blocksuite/icons';
import { FolderIcon, SettingsIcon } from '@blocksuite/icons';
import type { Page } from '@blocksuite/store';
import { useDroppable } from '@dnd-kit/core';
import { Menu } from '@toeverything/components/menu';
@ -27,11 +25,12 @@ import { forwardRef, useCallback, useEffect, useMemo } from 'react';
import { openWorkspaceListModalAtom } from '../../atoms';
import { useHistoryAtom } from '../../atoms/history';
import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
import { useDeleteCollectionInfo } from '../../hooks/affine/use-delete-collection-info';
import { useGeneralShortcuts } from '../../hooks/affine/use-shortcuts';
import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
import { useNavigateHelper } from '../../hooks/use-navigate-helper';
import { useRegisterBlocksuiteEditorCommands } from '../../hooks/use-shortcut-commands';
import type { AllWorkspace } from '../../shared';
import { currentCollectionsAtom } from '../../utils/user-setting';
import { CollectionsList } from '../pure/workspace-slider-bar/collections';
import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/add-collection-button';
import { AddFavouriteButton } from '../pure/workspace-slider-bar/favorite/add-favourite-button';
@ -101,7 +100,6 @@ export const RootAppSidebar = ({
}: RootAppSidebarProps): ReactElement => {
const currentWorkspaceId = currentWorkspace.id;
const { appSettings } = useAppSettingHelper();
const { backToAll } = useCollectionManager(currentCollectionsAtom);
const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
const t = useAFFiNEI18N();
const [openUserWorkspaceList, setOpenUserWorkspaceList] = useAtom(
@ -117,7 +115,7 @@ export const RootAppSidebar = ({
const { trashModal, setTrashModal, handleOnConfirm } =
useTrashModalHelper(blockSuiteWorkspace);
const deletePageTitle = trashModal.pageTitle;
const deletePageTitles = trashModal.pageTitles;
const trashConfirmOpen = trashModal.open;
const onTrashConfirmOpenChange = useCallback(
(open: boolean) => {
@ -129,6 +127,10 @@ export const RootAppSidebar = ({
[trashModal, setTrashModal]
);
const navigateHelper = useNavigateHelper();
const backToAll = useCallback(() => {
navigateHelper.jumpToSubPath(currentWorkspace.id, WorkspaceSubPath.ALL);
}, [currentWorkspace.id, navigateHelper]);
// Listen to the "New Page" action from the menu
useEffect(() => {
if (environment.isDesktop) {
@ -166,6 +168,7 @@ export const RootAppSidebar = ({
setOpenUserWorkspaceList(false);
}, [setOpenUserWorkspaceList]);
useRegisterBlocksuiteEditorCommands(router.back, router.forward);
const userInfo = useDeleteCollectionInfo();
return (
<>
<AppSidebar
@ -183,7 +186,7 @@ export const RootAppSidebar = ({
open={trashConfirmOpen}
onConfirm={handleOnConfirm}
onOpenChange={onTrashConfirmOpenChange}
title={deletePageTitle}
titles={deletePageTitles}
/>
<SidebarContainer>
<Menu
@ -243,16 +246,16 @@ export const RootAppSidebar = ({
</CategoryDivider>
<FavoriteList workspace={blockSuiteWorkspace} />
<CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
<AddCollectionButton workspace={blockSuiteWorkspace} />
<AddCollectionButton />
</CategoryDivider>
<CollectionsList workspace={blockSuiteWorkspace} />
<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={<DeleteTemporarilyIcon />}
icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
currentPath={currentPath}
path={paths.trash(currentWorkspaceId)}
>

14
packages/frontend/core/src/components/workspace-header.css.ts Normal file
View File

@ -0,0 +1,14 @@
import { style } from '@vanilla-extract/css';
export const trashTitle = style({
display: 'flex',
alignItems: 'center',
gap: 8,
padding: '0 8px',
fontWeight: 600,
});
export const trashIcon = style({
color: 'var(--affine-icon-color)',
fontSize: 'var(--affine-font-h-5)',
});

90
packages/frontend/core/src/components/workspace-header.tsx
View File

@ -1,43 +1,50 @@
import {
CollectionList,
FilterList,
SaveCollectionButton,
SaveAsCollectionButton,
useCollectionManager,
} from '@affine/component/page-list';
import { Unreachable } from '@affine/env/constant';
import type { Collection } from '@affine/env/filter';
import type { PropertiesMeta } from '@affine/env/filter';
import type {
WorkspaceFlavour,
WorkspaceHeaderProps,
} from '@affine/env/workspace';
import { WorkspaceSubPath } from '@affine/env/workspace';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { DeleteIcon } from '@blocksuite/icons';
import { useSetAtom } from 'jotai/react';
import { useCallback } from 'react';
import { collectionsCRUDAtom } from '../atoms/collections';
import { appHeaderAtom, mainContainerAtom } from '../atoms/element';
import { useGetPageInfoById } from '../hooks/use-get-page-info';
import { useAllPageListConfig } from '../hooks/affine/use-all-page-list-config';
import { useDeleteCollectionInfo } from '../hooks/affine/use-delete-collection-info';
import { useNavigateHelper } from '../hooks/use-navigate-helper';
import { useWorkspace } from '../hooks/use-workspace';
import { currentCollectionsAtom } from '../utils/user-setting';
import { SharePageModal } from './affine/share-page-modal';
import { BlockSuiteHeaderTitle } from './blocksuite/block-suite-header-title';
import { filterContainerStyle } from './filter-container.css';
import { Header } from './pure/header';
import { PluginHeader } from './pure/plugin-header';
import { WorkspaceModeFilterTab } from './pure/workspace-mode-filter-tab';
import * as styles from './workspace-header.css';
const FilterContainer = ({ workspaceId }: { workspaceId: string }) => {
const currentWorkspace = useWorkspace(workspaceId);
const setting = useCollectionManager(currentCollectionsAtom);
const navigateHelper = useNavigateHelper();
const setting = useCollectionManager(collectionsCRUDAtom);
const saveToCollection = useCallback(
async (collection: Collection) => {
await setting.saveCollection(collection);
setting.selectCollection(collection.id);
console.log(setting.currentCollection.filterList);
await setting.createCollection({
...collection,
mode: 'rule',
filterList: setting.currentCollection.filterList,
});
navigateHelper.jumpToCollection(workspaceId, collection.id);
},
[setting]
);
const getPageInfoById = useGetPageInfoById(
currentWorkspace.blockSuiteWorkspace
[setting, navigateHelper, workspaceId]
);
if (!setting.isDefault || !setting.currentCollection.filterList.length) {
return null;
@ -59,16 +66,9 @@ const FilterContainer = ({ workspaceId }: { workspaceId: string }) => {
</div>
<div>
{setting.currentCollection.filterList.length > 0 ? (
<SaveCollectionButton
propertiesMeta={
currentWorkspace.blockSuiteWorkspace.meta
.properties as PropertiesMeta
}
getPageInfo={getPageInfoById}
<SaveAsCollectionButton
onConfirm={saveToCollection}
filterList={setting.currentCollection.filterList}
workspaceId={workspaceId}
></SaveCollectionButton>
></SaveAsCollectionButton>
) : null}
</div>
</div>
@ -78,14 +78,17 @@ const FilterContainer = ({ workspaceId }: { workspaceId: string }) => {
export function WorkspaceHeader({
currentWorkspaceId,
currentEntry,
rightSlot,
}: WorkspaceHeaderProps<WorkspaceFlavour>) {
const setAppHeader = useSetAtom(appHeaderAtom);
const currentWorkspace = useWorkspace(currentWorkspaceId);
const setting = useCollectionManager(currentCollectionsAtom);
const getPageInfoById = useGetPageInfoById(
currentWorkspace.blockSuiteWorkspace
);
const workspace = currentWorkspace.blockSuiteWorkspace;
const setting = useCollectionManager(collectionsCRUDAtom);
const config = useAllPageListConfig();
const userInfo = useDeleteCollectionInfo();
const t = useAFFiNEI18N();
// route in all page
if (
@ -99,25 +102,24 @@ export function WorkspaceHeader({
ref={setAppHeader}
left={
<CollectionList
userInfo={userInfo}
allPageListConfig={config}
setting={setting}
getPageInfo={getPageInfoById}
propertiesMeta={
currentWorkspace.blockSuiteWorkspace.meta.properties
}
propertiesMeta={workspace.meta.properties}
/>
}
right={rightSlot}
center={<WorkspaceModeFilterTab />}
/>
{<FilterContainer workspaceId={currentWorkspaceId} />}
<FilterContainer workspaceId={currentWorkspaceId} />
</>
);
}
// route in shared or trash
// route in shared
if (
'subPath' in currentEntry &&
(currentEntry.subPath === WorkspaceSubPath.SHARED ||
currentEntry.subPath === WorkspaceSubPath.TRASH)
currentEntry.subPath === WorkspaceSubPath.SHARED
) {
return (
<Header
@ -128,11 +130,28 @@ export function WorkspaceHeader({
);
}
// route in trash
if (
'subPath' in currentEntry &&
currentEntry.subPath === WorkspaceSubPath.TRASH
) {
return (
<Header
mainContainerAtom={mainContainerAtom}
ref={setAppHeader}
left={
<div className={styles.trashTitle}>
<DeleteIcon className={styles.trashIcon} />
{t['com.affine.workspaceSubPath.trash']()}
</div>
}
/>
);
}
// route in edit page
if ('pageId' in currentEntry) {
const currentPage = currentWorkspace.blockSuiteWorkspace.getPage(
currentEntry.pageId
);
const currentPage = workspace.getPage(currentEntry.pageId);
const sharePageModal = currentPage ? (
<SharePageModal workspace={currentWorkspace} page={currentPage} />
) : null;
@ -152,6 +171,7 @@ export function WorkspaceHeader({
<PluginHeader />
</div>
}
bottomBorder
/>
);
}

63
packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx Normal file
View File

@ -0,0 +1,63 @@
import { toast } from '@affine/component';
import {
type AllPageListConfig,
FavoriteTag,
} from '@affine/component/page-list';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import type { PageMeta } from '@blocksuite/store';
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
import { useCallback, useMemo } from 'react';
import { usePageHelper } from '../../components/blocksuite/block-suite-page-list/utils';
import { useCurrentWorkspace } from '../current/use-current-workspace';
import { useBlockSuiteMetaHelper } from './use-block-suite-meta-helper';
export const useAllPageListConfig = () => {
const [currentWorkspace] = useCurrentWorkspace();
const workspace = currentWorkspace.blockSuiteWorkspace;
const pageMetas = useBlockSuitePageMeta(workspace);
const { isPreferredEdgeless } = usePageHelper(workspace);
const pageMap = useMemo(
() => Object.fromEntries(pageMetas.map(page => [page.id, page])),
[pageMetas]
);
const { toggleFavorite } = useBlockSuiteMetaHelper(
currentWorkspace.blockSuiteWorkspace
);
const t = useAFFiNEI18N();
const onToggleFavoritePage = useCallback(
(page: PageMeta) => {
const status = page.favorite;
toggleFavorite(page.id);
toast(
status
? t['com.affine.toastMessage.removedFavorites']()
: t['com.affine.toastMessage.addedFavorites']()
);
},
[t, toggleFavorite]
);
return useMemo<AllPageListConfig>(() => {
return {
allPages: pageMetas,
isEdgeless: isPreferredEdgeless,
workspace: currentWorkspace.blockSuiteWorkspace,
getPage: id => pageMap[id],
favoriteRender: page => {
return (
<FavoriteTag
style={{ marginRight: 8 }}
onClick={() => onToggleFavoritePage(page)}
active={!!page.favorite}
/>
);
},
};
}, [
currentWorkspace.blockSuiteWorkspace,
isPreferredEdgeless,
pageMetas,
pageMap,
onToggleFavoritePage,
]);
};

4
packages/frontend/core/src/hooks/affine/use-block-suite-meta-helper.ts
View File

@ -8,6 +8,7 @@ import { useCallback } from 'react';
import { setPageModeAtom } from '../../atoms';
import { currentModeAtom } from '../../atoms/mode';
import type { BlockSuiteWorkspace } from '../../shared';
import { getWorkspaceSetting } from '../../utils/workspace-setting';
import { useReferenceLinkHelper } from './use-reference-link-helper';
export function useBlockSuiteMetaHelper(
@ -82,8 +83,9 @@ export function useBlockSuiteMetaHelper(
trashRelate: isRoot ? parentMeta?.id : undefined,
});
setPageReadonly(pageId, true);
getWorkspaceSetting(blockSuiteWorkspace).deletePages([pageId]);
},
[getPageMeta, metas, setPageMeta, setPageReadonly]
[blockSuiteWorkspace, getPageMeta, metas, setPageMeta, setPageReadonly]
);
const restoreFromTrash = useCallback(

11
packages/frontend/core/src/hooks/affine/use-delete-collection-info.ts Normal file
View File

@ -0,0 +1,11 @@
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
import { useSession } from 'next-auth/react';
import { useMemo } from 'react';
export const useDeleteCollectionInfo = () => {
const user = useSession().data?.user;
return useMemo(
() => (user ? { userName: user.name ?? '', userId: user.id } : null),
[user]
);
};

4
packages/frontend/core/src/hooks/affine/use-register-blocksuite-editor-commands.tsx
View File

@ -35,8 +35,8 @@ export function useRegisterBlocksuiteEditorCommands(
const onClickDelete = useCallback(() => {
setTrashModal({
open: true,
pageId: pageId,
pageTitle: pageMeta.title,
pageIds: [pageId],
pageTitles: [pageMeta.title],
});
}, [pageId, pageMeta.title, setTrashModal]);

8
packages/frontend/core/src/hooks/affine/use-trash-modal-helper.ts
View File

@ -10,14 +10,16 @@ import { useBlockSuiteMetaHelper } from './use-block-suite-meta-helper';
export function useTrashModalHelper(blocksuiteWorkspace: Workspace) {
const t = useAFFiNEI18N();
const [trashModal, setTrashModal] = useAtom(trashModalAtom);
const { pageId } = trashModal;
const { pageIds } = trashModal;
const { removeToTrash } = useBlockSuiteMetaHelper(blocksuiteWorkspace);
const handleOnConfirm = useCallback(() => {
removeToTrash(pageId);
pageIds.forEach(pageId => {
removeToTrash(pageId);
});
toast(t['com.affine.toastMessage.movedTrash']());
setTrashModal({ ...trashModal, open: false });
}, [pageId, removeToTrash, setTrashModal, t, trashModal]);
}, [pageIds, removeToTrash, setTrashModal, t, trashModal]);
return {
trashModal,

15
packages/frontend/core/src/hooks/use-navigate-helper.ts
View File

@ -12,6 +12,7 @@ export enum RouteLogic {
PUSH = 'push',
}
// todo: add a name -> path helper in the results
export function useNavigateHelper() {
const location = useLocation();
const navigate = useNavigate();
@ -28,6 +29,18 @@ export function useNavigateHelper() {
},
[navigate]
);
const jumpToCollection = useCallback(
(
workspaceId: string,
collectionId: string,
logic: RouteLogic = RouteLogic.PUSH
) => {
return navigate(`/workspace/${workspaceId}/collection/${collectionId}`, {
replace: logic === RouteLogic.REPLACE,
});
},
[navigate]
);
const jumpToPublicWorkspacePage = useCallback(
(
workspaceId: string,
@ -116,6 +129,7 @@ export function useNavigateHelper() {
openPage,
jumpToExpired,
jumpToSignIn,
jumpToCollection,
}),
[
jumpTo404,
@ -126,6 +140,7 @@ export function useNavigateHelper() {
jumpToSignIn,
jumpToSubPath,
openPage,
jumpToCollection,
]
);
}

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

@ -1,11 +1,12 @@
import { Content, displayFlex } from '@affine/component';
import {
AppSidebarFallback,
appSidebarResizingAtom,
} from '@affine/component/app-sidebar';
import { BlockHubWrapper } from '@affine/component/block-hub';
import type { DraggableTitleCellData } from '@affine/component/page-list';
import { StyledTitleLink } from '@affine/component/page-list';
import {
type DraggableTitleCellData,
PageListDragOverlay,
} from '@affine/component/page-list';
import {
MainContainer,
ToolContainer,
@ -197,12 +198,9 @@ export const WorkspaceLayoutInner = ({
const resizing = useAtomValue(appSidebarResizingAtom);
const sensors = useSensors(
// Delay 10ms after mousedown
// Otherwise clicks would be intercepted
useSensor(MouseSensor, {
activationConstraint: {
delay: 500,
tolerance: 10,
distance: 10,
},
})
);
@ -288,34 +286,18 @@ export const WorkspaceLayoutInner = ({
};
function PageListTitleCellDragOverlay() {
const { active } = useDndContext();
const { active, over } = useDndContext();
const renderChildren = useCallback(
({ icon, pageTitle }: DraggableTitleCellData) => {
({ pageTitle }: DraggableTitleCellData) => {
return (
<StyledTitleLink>
{icon}
<Content ellipsis={true} color="inherit">
{pageTitle}
</Content>
</StyledTitleLink>
<PageListDragOverlay over={!!over}>{pageTitle}</PageListDragOverlay>
);
},
[]
[over]
);
return (
<DragOverlay
style={{
zIndex: 1001,
backgroundColor: 'var(--affine-black-10)',
padding: '0 30px',
cursor: 'default',
borderRadius: 10,
...displayFlex('flex-start', 'center'),
}}
dropAnimation={null}
>
<DragOverlay dropAnimation={null}>
{active
? renderChildren(active.data.current as DraggableTitleCellData)
: null}

66
packages/frontend/core/src/pages/workspace/all-page.css.ts Normal file
View File

@ -0,0 +1,66 @@
import { style } from '@vanilla-extract/css';
export const root = style({
height: '100%',
width: '100%',
display: 'flex',
flexFlow: 'column',
background: 'var(--affine-background-primary-color)',
});
export const scrollContainer = style({
flex: 1,
width: '100%',
paddingBottom: '32px',
});
export const allPagesHeader = style({
padding: '48px 16px 20px 24px',
overflow: 'hidden',
display: 'flex',
justifyContent: 'space-between',
background: 'var(--affine-background-primary-color)',
});
export const allPagesHeaderTitle = style({
fontSize: 'var(--affine-font-h-3)',
fontWeight: 500,
color: 'var(--affine-text-secondary-color)',
display: 'flex',
alignItems: 'center',
gap: 8,
});
export const titleIcon = style({
color: 'var(--affine-icon-color)',
display: 'inline-flex',
alignItems: 'center',
});
export const titleCollectionName = style({
color: 'var(--affine-text-primary-color)',
});
export const floatingToolbar = style({
position: 'absolute',
bottom: 26,
width: '100%',
zIndex: 1,
});
export const toolbarSelectedNumber = style({
color: 'var(--affine-text-secondary-color)',
});
export const headerCreateNewButton = style({
transition: 'opacity 0.1s ease-in-out',
});
export const newPageButtonLabel = style({
display: 'flex',
alignItems: 'center',
});
export const headerCreateNewButtonHidden = style({
opacity: 0,
});

Some files were not shown because too many files have changed in this diff Show More