feat(electron): show a warning for drop folder to split view (#10178)

fix PD-2310

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/811df8d5-f424-4135-ad90-30135b299f12.png)

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',
+});

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<AffineDNDData>(() => {
     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: (
+                  <div className={styles.folderWarningMessage}>
+                    <p>
+                      {t['com.affine.split-view-folder-warning.description']()}
+                    </p>
+                    <p>
+                      <Checkbox
+                        checked={hideFolderWarningRef.current}
+                        onClick={() => {
+                          hideFolderWarningRef.current =
+                            !hideFolderWarningRef.current;
+                          showOrUpdateWarning();
+                        }}
+                        label={t['do-not-show-this-again']()}
+                      />
+                    </p>
+                  </div>
+                ),
+                theme: 'info',
+              },
+              {
+                id: toastid,
+              }
+            );
+          };
+
+          showOrUpdateWarning();
+          return;
+        }
+
         const candidate = data.location.current.dropTargets.find(
           target => target.data.at === 'workbench:resize-handle'
         );

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",