diff --git a/packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts b/packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts index 19ce05aa1b..7d7f3c7136 100644 --- a/packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts +++ b/packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts @@ -221,3 +221,9 @@ export const splitViewRoot = style({ }, }, }); + +export const folderWarningMessage = style({ + display: 'flex', + flexDirection: 'column', + gap: '8px', +}); diff --git a/packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx b/packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx index 677e1e0d9d..60311a5257 100644 --- a/packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx +++ b/packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx @@ -1,10 +1,12 @@ -import { useDndMonitor } from '@affine/component'; +import { Checkbox, notify, useDndMonitor } from '@affine/component'; import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper'; import type { AffineDNDData } from '@affine/core/types/dnd'; +import { useI18n } from '@affine/i18n'; import track from '@affine/track'; import { useService } from '@toeverything/infra'; import clsx from 'clsx'; import { useSetAtom } from 'jotai'; +import { nanoid } from 'nanoid'; import type { HTMLAttributes } from 'react'; import { useCallback, useLayoutEffect, useRef, useState } from 'react'; @@ -84,6 +86,9 @@ export const SplitView = ({ const setDraggingOverResizeHandle = useSetAtom(draggingOverResizeHandleAtom); + const t = useI18n(); + const hideFolderWarningRef = useRef(false); + useDndMonitor(() => { return { canMonitor(data) { @@ -97,7 +102,9 @@ export const SplitView = ({ return false; } else if ( entity?.type && - allowedSplitViewEntityTypes.has(entity?.type) + (allowedSplitViewEntityTypes.has(entity?.type) || + // will show a toast warning for folder for now + entity?.type === 'folder') ) { return true; } else if (from?.at === 'workbench:link') { @@ -110,6 +117,46 @@ export const SplitView = ({ }, onDrop(data) { setDraggingEntity(false); + + if (data.source.data.entity?.type === 'folder') { + if (hideFolderWarningRef.current) { + return; + } + const toastid = nanoid(); + const showOrUpdateWarning = () => { + notify.warning( + { + title: t['tips'](), + message: ( +
+

+ {t['com.affine.split-view-folder-warning.description']()} +

+

+ { + hideFolderWarningRef.current = + !hideFolderWarningRef.current; + showOrUpdateWarning(); + }} + label={t['do-not-show-this-again']()} + /> +

+
+ ), + theme: 'info', + }, + { + id: toastid, + } + ); + }; + + showOrUpdateWarning(); + return; + } + const candidate = data.location.current.dropTargets.find( target => target.data.at === 'workbench:resize-handle' ); diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 51948aea4f..3b8a361fdc 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1067,6 +1067,8 @@ "com.affine.peek-view-controls.open-attachment-in-split-view": "Open in split view", "com.affine.peek-view-controls.open-doc-in-center-peek": "Open in center peek", "com.affine.split-view-drag-handle.tooltip": "Click or drag", + "com.affine.split-view-folder-warning.description": "Split view does not support folders.", + "do-not-show-this-again": "Do not show this again", "com.affine.quicksearch.group.creation": "New", "com.affine.quicksearch.group.searchfor": "Search for \"{{query}}\"", "com.affine.resetSyncStatus.button": "Reset sync", @@ -1329,8 +1331,6 @@ "com.affine.settings.workspace.experimental-features.enable-ai-onboarding.description": "Enables AI onboarding.", "com.affine.settings.workspace.experimental-features.enable-mind-map-import.name": "Mind Map Import", "com.affine.settings.workspace.experimental-features.enable-mind-map-import.description": "Enables mind map import.", - "com.affine.settings.workspace.experimental-features.enable-multi-view.name": "Split View", - "com.affine.settings.workspace.experimental-features.enable-multi-view.description": "The Split View feature enables you to divide your tab into multiple sections for simultaneous viewing and editing of different documents.", "com.affine.settings.workspace.experimental-features.enable-emoji-folder-icon.name": "Emoji Folder Icon", "com.affine.settings.workspace.experimental-features.enable-emoji-folder-icon.description": "Once enabled, you can use an emoji as the folder icon. When the first character of the folder name is an emoji, it will be extracted and used as its icon.", "com.affine.settings.workspace.experimental-features.enable-emoji-doc-icon.name": "Emoji Doc Icon", @@ -1719,6 +1719,7 @@ "com.affine.page-starter-bar.template": "Template", "com.affine.page-starter-bar.ai": "With AI", "com.affine.page-starter-bar.edgeless": "Edgeless", + "tips": "Tips", "Template": "Template", "com.affine.template-list.empty": "No template", "com.affine.template-list.create-new": "Create new template",