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'
         );