feat(core): adjust split view ui (#6076)

packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx

@@ -2,6 +2,7 @@ import { toast } from '@affine/component';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
+import { Workbench } from '@affine/core/modules/workbench';
 import type { Collection, Filter } from '@affine/env/filter';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -33,6 +34,7 @@ const usePageOperationsRenderer = () => {
     currentWorkspace.docCollection
   );
   const t = useAFFiNEI18N();
+  const workbench = useService(Workbench);
 
   const pageOperationsRenderer = useCallback(
     (page: DocMeta) => {
@@ -48,6 +50,7 @@ const usePageOperationsRenderer = () => {
           isPublic={!!page.isPublic}
           onDisablePublicSharing={onDisablePublicSharing}
           link={`/workspace/${currentWorkspace.id}/${page.id}`}
+          onOpenInSplitView={() => workbench.openPage(page.id, { at: 'tail' })}
           onDuplicate={() => {
             duplicate(page.id, false);
           }}
@@ -70,7 +73,14 @@ const usePageOperationsRenderer = () => {
         />
       );
     },
-    [currentWorkspace.id, setTrashModal, t, toggleFavorite, duplicate]
+    [
+      currentWorkspace.id,
+      workbench,
+      duplicate,
+      setTrashModal,
+      toggleFavorite,
+      t,
+    ]
   );
 
   return pageOperationsRenderer;

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -7,6 +7,7 @@ import {
   toast,
   Tooltip,
 } from '@affine/component';
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
@@ -20,6 +21,7 @@ import {
   MoreVerticalIcon,
   OpenInNewIcon,
   ResetIcon,
+  SplitViewIcon,
 } from '@blocksuite/icons';
 import { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -45,6 +47,7 @@ export interface PageOperationCellProps {
   onRemoveToTrash: () => void;
   onDuplicate: () => void;
   onDisablePublicSharing: () => void;
+  onOpenInSplitView: () => void;
 }
 
 export const PageOperationCell = ({
@@ -55,8 +58,10 @@ export const PageOperationCell = ({
   onRemoveToTrash,
   onDuplicate,
   onDisablePublicSharing,
+  onOpenInSplitView,
 }: PageOperationCellProps) => {
   const t = useAFFiNEI18N();
+  const { appSettings } = useAppSettingHelper();
   const [openDisableShared, setOpenDisableShared] = useState(false);
   const OperationMenu = (
     <>
@@ -84,6 +89,20 @@ export const PageOperationCell = ({
           ? t['com.affine.favoritePageOperation.remove']()
           : t['com.affine.favoritePageOperation.add']()}
       </MenuItem>
+
+      {environment.isDesktop && appSettings.enableMultiView ? (
+        <MenuItem
+          onClick={onOpenInSplitView}
+          preFix={
+            <MenuIcon>
+              <SplitViewIcon />
+            </MenuIcon>
+          }
+        >
+          {t['com.affine.workbench.split-view.page-menu-open']()}
+        </MenuItem>
+      ) : null}
+
       {!environment.isDesktop && (
         <Link
           className={styles.clearLinkStyle}

packages/frontend/core/src/components/page-list/view/collection-operations.tsx

@@ -4,9 +4,16 @@ import {
   MenuItem,
   type MenuItemProps,
 } from '@affine/component';
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
+import { Workbench } from '@affine/core/modules/workbench';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { DeleteIcon, EditIcon, FilterIcon } from '@blocksuite/icons';
+import {
+  DeleteIcon,
+  EditIcon,
+  FilterIcon,
+  SplitViewIcon,
+} from '@blocksuite/icons';
 import { useService } from '@toeverything/infra/di';
 import {
   type PropsWithChildren,
@@ -35,7 +42,9 @@ export const CollectionOperations = ({
   config: AllPageListConfig;
   openRenameModal?: () => void;
 }>) => {
+  const { appSettings } = useAppSettingHelper();
   const service = useService(CollectionService);
+  const workbench = useService(Workbench);
   const { open: openEditCollectionModal, node: editModal } =
     useEditCollection(config);
   const t = useAFFiNEI18N();
@@ -71,6 +80,10 @@ export const CollectionOperations = ({
       });
   }, [openEditCollectionModal, collection, service]);
 
+  const openCollectionSplitView = useCallback(() => {
+    workbench.openCollection(collection.id, { at: 'tail' });
+  }, [collection.id, workbench]);
+
   const actions = useMemo<
     Array<
       | {
@@ -104,6 +117,19 @@ export const CollectionOperations = ({
         name: t['com.affine.collection.menu.edit'](),
         click: showEdit,
       },
+      ...(appSettings.enableMultiView
+        ? [
+            {
+              icon: (
+                <MenuIcon>
+                  <SplitViewIcon />
+                </MenuIcon>
+              ),
+              name: t['com.affine.workbench.split-view.page-menu-open'](),
+              click: openCollectionSplitView,
+            },
+          ]
+        : []),
       {
         element: <div key="divider" className={styles.divider}></div>,
       },
@@ -120,7 +146,16 @@ export const CollectionOperations = ({
         type: 'danger',
       },
     ],
-    [t, showEditName, showEdit, service, info, collection.id]
+    [
+      t,
+      showEditName,
+      showEdit,
+      appSettings.enableMultiView,
+      openCollectionSplitView,
+      service,
+      info,
+      collection.id,
+    ]
   );
   return (
     <>

packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-item.tsx

@@ -4,6 +4,7 @@ import {
   type MenuItemProps,
   MenuSeparator,
 } from '@affine/component';
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   DeleteIcon,
@@ -11,6 +12,7 @@ import {
   FavoriteIcon,
   FilterMinusIcon,
   LinkedPageIcon,
+  SplitViewIcon,
 } from '@blocksuite/icons';
 import { type ReactElement, useMemo } from 'react';
 
@@ -24,6 +26,7 @@ type OperationItemsProps = {
   onAddLinkedPage: () => void;
   onRemoveFromFavourites?: () => void;
   onDelete: () => void;
+  onOpenInSplitView: () => void;
 };
 
 export const OperationItems = ({
@@ -35,7 +38,9 @@ export const OperationItems = ({
   onAddLinkedPage,
   onRemoveFromFavourites,
   onDelete,
+  onOpenInSplitView,
 }: OperationItemsProps) => {
+  const { appSettings } = useAppSettingHelper();
   const t = useAFFiNEI18N();
   const actions = useMemo<
     Array<
@@ -81,9 +86,6 @@ export const OperationItems = ({
               name: t['Remove from favorites'](),
               click: onRemoveFromFavourites,
             },
-            {
-              element: <MenuSeparator />,
-            },
           ]
         : []),
       ...(inAllowList && onRemoveFromAllowList
@@ -97,18 +99,27 @@ export const OperationItems = ({
               name: t['Remove special filter'](),
               click: onRemoveFromAllowList,
             },
-            {
-              element: <MenuSeparator />,
-            },
           ]
         : []),
-      ...(isReferencePage
+
+      ...(appSettings.enableMultiView
         ? [
+            // open split view
             {
-              element: <MenuSeparator />,
+              icon: (
+                <MenuIcon>
+                  <SplitViewIcon />
+                </MenuIcon>
+              ),
+              name: t['com.affine.workbench.split-view.page-menu-open'](),
+              click: onOpenInSplitView,
             },
           ]
         : []),
+
+      {
+        element: <MenuSeparator />,
+      },
       {
         icon: (
           <MenuIcon>
@@ -121,14 +132,16 @@ export const OperationItems = ({
       },
     ],
     [
+      t,
       onRename,
       onAddLinkedPage,
       inFavorites,
       onRemoveFromFavourites,
       isReferencePage,
-      t,
       inAllowList,
       onRemoveFromAllowList,
+      appSettings.enableMultiView,
+      onOpenInSplitView,
       onDelete,
     ]
   );

packages/frontend/core/src/components/pure/workspace-slider-bar/components/operation-menu-button.tsx

@@ -1,9 +1,11 @@
 import { toast } from '@affine/component';
 import { IconButton } from '@affine/component/ui/button';
 import { Menu } from '@affine/component/ui/menu';
+import { Workbench } from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { MoreHorizontalIcon } from '@blocksuite/icons';
 import type { DocCollection } from '@blocksuite/store';
+import { useService } from '@toeverything/infra/di';
 import { useCallback } from 'react';
 
 import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
@@ -37,6 +39,7 @@ export const OperationMenuButton = ({ ...props }: OperationMenuButtonProps) => {
   const { createLinkedPage } = usePageHelper(docCollection);
   const { setTrashModal } = useTrashModalHelper(docCollection);
   const { removeFromFavorite } = useBlockSuiteMetaHelper(docCollection);
+  const workbench = useService(Workbench);
 
   const handleRename = useCallback(() => {
     setRenameModalOpen?.();
@@ -64,6 +67,10 @@ export const OperationMenuButton = ({ ...props }: OperationMenuButtonProps) => {
     removeFromAllowList?.(pageId);
   }, [pageId, removeFromAllowList]);
 
+  const handleOpenInSplitView = useCallback(() => {
+    workbench.openPage(pageId, { at: 'tail' });
+  }, [pageId, workbench]);
+
   return (
     <Menu
       items={
@@ -73,6 +80,7 @@ export const OperationMenuButton = ({ ...props }: OperationMenuButtonProps) => {
           onRemoveFromAllowList={handleRemoveFromAllowList}
           onRemoveFromFavourites={handleRemoveFromFavourites}
           onRename={handleRename}
+          onOpenInSplitView={handleOpenInSplitView}
           inAllowList={inAllowList}
           inFavorites={inFavorites}
           isReferencePage={isReferencePage}

packages/frontend/core/src/modules/right-sidebar/view/container.css.ts

@@ -8,15 +8,24 @@ export const sidebarContainerInner = style({
   overflow: 'hidden',
   height: '100%',
   width: '100%',
+  borderRadius: 'inherit',
+  selectors: {
+    ['[data-client-border=true][data-is-floating="true"] &']: {
+      boxShadow: cssVar('shadow3'),
+      border: `1px solid ${cssVar('borderColor')}`,
+    },
+  },
 });
 
 export const sidebarContainer = style({
   display: 'flex',
   flexShrink: 0,
   height: '100%',
+  right: 0,
   selectors: {
     [`&[data-client-border=true]`]: {
-      paddingLeft: 9,
+      paddingLeft: 8,
+      borderRadius: 6,
     },
     [`&[data-client-border=false]`]: {
       borderLeft: `1px solid ${cssVar('borderColor')}`,

packages/frontend/core/src/modules/right-sidebar/view/container.tsx

@@ -1,9 +1,10 @@
 import { ResizePanel } from '@affine/component/resize-panel';
+import { appSidebarOpenAtom } from '@affine/core/components/app-sidebar';
 import { appSettingAtom } from '@toeverything/infra/atom';
 import { useService } from '@toeverything/infra/di';
 import { useLiveData } from '@toeverything/infra/livedata';
 import { useAtomValue } from 'jotai';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { RightSidebar } from '../entities/right-sidebar';
 import * as styles from './container.css';
@@ -20,6 +21,18 @@ export const RightSidebarContainer = () => {
 
   const frontView = useLiveData(rightSidebar.front);
   const open = useLiveData(rightSidebar.isOpen) && frontView !== undefined;
+  const [floating, setFloating] = useState(false);
+  const appSidebarOpened = useAtomValue(appSidebarOpenAtom);
+
+  useEffect(() => {
+    const onResize = () =>
+      setFloating(!!(window.innerWidth < 1200 && appSidebarOpened));
+    onResize();
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [appSidebarOpened]);
 
   const handleOpenChange = useCallback(
     (open: boolean) => {
@@ -38,8 +51,9 @@ export const RightSidebarContainer = () => {
 
   return (
     <ResizePanel
+      floating={floating}
       resizeHandlePos="left"
-      resizeHandleOffset={clientBorder ? 4 : 0}
+      resizeHandleOffset={clientBorder ? 3.5 : 0}
       width={width}
       resizing={resizing}
       onResizing={setResizing}

packages/frontend/core/src/modules/workbench/entities/workbench.ts

@@ -5,7 +5,12 @@ import { combineLatest, map, switchMap } from 'rxjs';
 
 import { View } from './view';
 
-export type WorkbenchPosition = 'beside' | 'active' | number;
+export type WorkbenchPosition = 'beside' | 'active' | 'head' | 'tail' | number;
+
+interface WorkbenchOpenOptions {
+  at?: WorkbenchPosition;
+  replaceHistory?: boolean;
+}
 
 export class Workbench {
   readonly views = new LiveData([new View()]);
@@ -37,10 +42,7 @@ export class Workbench {
 
   open(
     to: To,
-    {
+    { at = 'active', replaceHistory = false }: WorkbenchOpenOptions = {}
-      at = 'active',
-      replaceHistory = false,
-    }: { at?: WorkbenchPosition; replaceHistory?: boolean } = {}
   ) {
     let view = this.viewAt(at);
     if (!view) {
@@ -58,32 +60,32 @@ export class Workbench {
     }
   }
 
-  openPage(pageId: string) {
+  openPage(pageId: string, options?: WorkbenchOpenOptions) {
-    this.open(`/${pageId}`);
+    this.open(`/${pageId}`, options);
   }
 
-  openCollections() {
+  openCollections(options?: WorkbenchOpenOptions) {
-    this.open('/collection');
+    this.open('/collection', options);
   }
 
-  openCollection(collectionId: string) {
+  openCollection(collectionId: string, options?: WorkbenchOpenOptions) {
-    this.open(`/collection/${collectionId}`);
+    this.open(`/collection/${collectionId}`, options);
   }
 
-  openAll() {
+  openAll(options?: WorkbenchOpenOptions) {
-    this.open('/all');
+    this.open('/all', options);
   }
 
-  openTrash() {
+  openTrash(options?: WorkbenchOpenOptions) {
-    this.open('/trash');
+    this.open('/trash', options);
   }
 
-  openTags() {
+  openTags(options?: WorkbenchOpenOptions) {
-    this.open('/tag');
+    this.open('/tag', options);
   }
 
-  openTag(tagId: string) {
+  openTag(tagId: string, options?: WorkbenchOpenOptions) {
-    this.open(`/tag/${tagId}`);
+    this.open(`/tag/${tagId}`, options);
   }
 
   viewAt(positionIndex: WorkbenchPosition): View | undefined {
@@ -96,12 +98,16 @@ export class Workbench {
     if (index === -1) return;
     const newViews = [...this.views.value];
     newViews.splice(index, 1);
+    if (index !== 0) {
+      this.active(index - 1);
+    }
     this.views.next(newViews);
   }
 
   closeOthers(view: View) {
     view.size.next(100);
     this.views.next([view]);
+    this.active(0);
   }
 
   moveView(from: number, to: number) {
@@ -128,8 +134,15 @@ export class Workbench {
       0
     );
     const percentOfTotal = totalViewSize * percent;
-    view.setSize(Number((view.size.value + percentOfTotal).toFixed(4)));
+    const newSize = Number((view.size.value + percentOfTotal).toFixed(4));
-    nextView.setSize(Number((nextView.size.value - percentOfTotal).toFixed(4)));
+    const newNextSize = Number(
+      (nextView.size.value - percentOfTotal).toFixed(4)
+    );
+    // TODO: better strategy to limit size
+    if (newSize / totalViewSize < 0.2 || newNextSize / totalViewSize < 0.2)
+      return;
+    view.setSize(newSize);
+    nextView.setSize(newNextSize);
   }
 
   private indexAt(positionIndex: WorkbenchPosition): number {
@@ -139,6 +152,12 @@ export class Workbench {
     if (positionIndex === 'beside') {
       return this.activeViewIndex.value + 1;
     }
+    if (positionIndex === 'head') {
+      return 0;
+    }
+    if (positionIndex === 'tail') {
+      return this.views.value.length;
+    }
     return positionIndex;
   }
 }

packages/frontend/core/src/modules/workbench/view/split-view/indicator.css.ts

@@ -1,13 +1,35 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
+export const indicatorWrapper = style({
+  position: 'absolute',
+  zIndex: 4,
+  top: 0,
+  left: '50%',
+  transform: 'translateX(-50%)',
+  width: '50%',
+  maxWidth: 300,
+  minWidth: 120,
+  height: 15,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ['WebkitAppRegion' as string]: 'no-drag',
+});
+
+export const menuTrigger = style({
+  position: 'absolute',
+  width: 0,
+  height: 0,
+  pointerEvents: 'none',
+});
 export const indicator = style({
   width: 29,
-  height: 14,
+  height: 15,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  cursor: 'pointer',
+  cursor: 'grab',
   ['WebkitAppRegion' as string]: 'no-drag',
   color: cssVar('placeholderColor'),
 
@@ -19,8 +41,16 @@ export const indicator = style({
 });
 
 export const indicatorInner = style({
-  width: 15,
+  width: 16,
   height: 3,
   borderRadius: 10,
   backgroundColor: 'currentColor',
+  transition: 'all 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
+
+  selectors: {
+    '[data-is-dragging="true"] &': {
+      width: 24,
+      height: 2,
+    },
+  },
 });

packages/frontend/core/src/modules/workbench/view/split-view/indicator.tsx

@@ -1,23 +1,61 @@
+import { Menu, type MenuProps } from '@affine/component';
 import clsx from 'clsx';
-import { forwardRef, type HTMLAttributes, memo } from 'react';
+import {
+  forwardRef,
+  type HTMLAttributes,
+  memo,
+  type MouseEventHandler,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 
 import * as styles from './indicator.css';
 
 export interface SplitViewMenuProps extends HTMLAttributes<HTMLDivElement> {
   active?: boolean;
+  open?: boolean;
+  onOpenMenu?: () => void;
+  setPressed: (v: boolean) => void;
 }
 
 export const SplitViewMenuIndicator = memo(
   forwardRef<HTMLDivElement, SplitViewMenuProps>(
     function SplitViewMenuIndicator(
-      { className, active, ...attrs }: SplitViewMenuProps,
+      {
+        className,
+        active,
+        open,
+        setPressed,
+        onOpenMenu,
+        ...attrs
+      }: SplitViewMenuProps,
       ref
     ) {
+      // dnd's `isDragging` changes after mouseDown and mouseMoved
+      const onMouseDown = useCallback(() => {
+        const t = setTimeout(() => setPressed(true), 100);
+        window.addEventListener(
+          'mouseup',
+          () => {
+            clearTimeout(t);
+            setPressed(false);
+          },
+          { once: true }
+        );
+      }, [setPressed]);
+
+      const onClick: MouseEventHandler = useCallback(() => {
+        !open && onOpenMenu?.();
+      }, [onOpenMenu, open]);
+
       return (
         <div
           ref={ref}
           data-active={active}
           className={clsx(className, styles.indicator)}
+          onClick={onClick}
+          onMouseDown={onMouseDown}
           {...attrs}
         >
           <div className={styles.indicatorInner} />
@@ -26,3 +64,66 @@ export const SplitViewMenuIndicator = memo(
     }
   )
 );
+
+interface SplitViewIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  isDragging?: boolean;
+  isActive?: boolean;
+  menuItems?: React.ReactNode;
+  // import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities' is not allowed
+  listeners?: any;
+  setPressed?: (pressed: boolean) => void;
+}
+export const SplitViewIndicator = ({
+  isDragging,
+  isActive,
+  menuItems,
+  listeners,
+  setPressed,
+}: SplitViewIndicatorProps) => {
+  const active = isActive || isDragging;
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // prevent menu from opening when dragging
+  const setOpenMenuManually = useCallback((open: boolean) => {
+    if (open) return;
+    setMenuOpen(open);
+  }, []);
+  const openMenu = useCallback(() => {
+    setMenuOpen(true);
+  }, []);
+
+  const menuRootOptions = useMemo(
+    () =>
+      ({
+        open: menuOpen,
+        onOpenChange: setOpenMenuManually,
+      }) satisfies MenuProps['rootOptions'],
+    [menuOpen, setOpenMenuManually]
+  );
+  const menuContentOptions = useMemo(
+    () =>
+      ({
+        align: 'center',
+      }) satisfies MenuProps['contentOptions'],
+    []
+  );
+
+  return (
+    <div data-is-dragging={isDragging} className={styles.indicatorWrapper}>
+      <Menu
+        contentOptions={menuContentOptions}
+        items={menuItems}
+        rootOptions={menuRootOptions}
+      >
+        <div className={styles.menuTrigger} />
+      </Menu>
+      <SplitViewMenuIndicator
+        open={menuOpen}
+        onOpenMenu={openMenu}
+        active={active}
+        setPressed={setPressed}
+        {...listeners}
+      />
+    </div>
+  );
+};

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

@@ -1,10 +1,10 @@
-import { Menu, MenuIcon, MenuItem, type MenuProps } from '@affine/component';
+import { MenuIcon, MenuItem } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
-  CloseIcon,
+  ExpandCloseIcon,
-  ExpandFullIcon,
+  KeepThisOneIcon,
-  InsertLeftIcon,
+  MoveToLeftIcon,
-  InsertRightIcon,
+  MoveToRightIcon,
 } from '@blocksuite/icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { useService } from '@toeverything/infra/di';
@@ -26,7 +26,7 @@ import {
 
 import type { View } from '../../entities/view';
 import { Workbench } from '../../entities/workbench';
-import { SplitViewMenuIndicator } from './indicator';
+import { SplitViewIndicator } from './indicator';
 import * as styles from './split-view.css';
 
 export interface SplitViewPanelProps
@@ -43,22 +43,24 @@ export const SplitViewPanel = memo(function SplitViewPanel({
   view,
   setSlots,
 }: SplitViewPanelProps) {
+  const [indicatorPressed, setIndicatorPressed] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
   const size = useLiveData(view.size);
-  const [menuOpen, setMenuOpen] = useState(false);
   const workbench = useService(Workbench);
   const activeView = useLiveData(workbench.activeView);
   const views = useLiveData(workbench.views);
+  const isLast = views[views.length - 1] === view;
+
   const {
     attributes,
     listeners,
     transform,
     transition,
-    isDragging,
+    isDragging: dndIsDragging,
     setNodeRef,
-    setActivatorNodeRef,
   } = useSortable({ id: view.id, attributes: { role: 'group' } });
 
+  const isDragging = dndIsDragging || indicatorPressed;
   const isActive = activeView === view;
 
   useEffect(() => {
@@ -67,12 +69,6 @@ export const SplitViewPanel = memo(function SplitViewPanel({
     }
   }, [setSlots, view.id]);
 
-  useEffect(() => {
-    if (isDragging) {
-      setMenuOpen(false);
-    }
-  }, [isDragging]);
-
   const style = useMemo(
     () => ({
       ...assignInlineVars({ '--size': size.toString() }),
@@ -86,27 +82,14 @@ export const SplitViewPanel = memo(function SplitViewPanel({
     }),
     [transform, transition]
   );
-  const menuRootOptions = useMemo(
-    () =>
-      ({
-        open: menuOpen,
-        onOpenChange: setMenuOpen,
-      }) satisfies MenuProps['rootOptions'],
-    [menuOpen]
-  );
-  const menuContentOptions = useMemo(
-    () =>
-      ({
-        align: 'center',
-      }) satisfies MenuProps['contentOptions'],
-    []
-  );
 
   return (
     <div
       style={style}
       className={styles.splitViewPanel}
       data-is-dragging={isDragging}
+      data-is-active={isActive && views.length > 1}
+      data-is-last={isLast}
     >
       <div
         ref={setNodeRef}
@@ -116,18 +99,13 @@ export const SplitViewPanel = memo(function SplitViewPanel({
       >
         <div className={styles.splitViewPanelContent} ref={ref} />
         {views.length > 1 ? (
-          <Menu
+          <SplitViewIndicator
-            contentOptions={menuContentOptions}
+            listeners={listeners}
-            items={<SplitViewMenu view={view} />}
+            isDragging={isDragging}
-            rootOptions={menuRootOptions}
+            isActive={isActive}
-          >
+            menuItems={<SplitViewMenu view={view} />}
-            <SplitViewMenuIndicator
+            setPressed={setIndicatorPressed}
-              ref={setActivatorNodeRef}
+          />
-              active={isDragging || isActive}
-              className={styles.menuTrigger}
-              {...listeners}
-            />
-          </Menu>
         ) : null}
       </div>
       {children}
@@ -135,10 +113,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({
   );
 });
 
-interface SplitViewMenuProps {
+const SplitViewMenu = ({ view }: { view: View }) => {
-  view: View;
-}
-const SplitViewMenu = ({ view }: SplitViewMenuProps) => {
   const t = useAFFiNEI18N();
   const workbench = useService(Workbench);
   const views = useLiveData(workbench.views);
@@ -155,14 +130,14 @@ const SplitViewMenu = ({ view }: SplitViewMenuProps) => {
   const handleMoveRight = useCallback(() => {
     workbench.moveView(viewIndex, viewIndex + 1);
   }, [viewIndex, workbench]);
-  const handleFullScreen = useCallback(() => {
+  const handleCloseOthers = useCallback(() => {
     workbench.closeOthers(view);
   }, [view, workbench]);
 
   const CloseItem =
     views.length > 1 ? (
       <MenuItem
-        preFix={<MenuIcon icon={<CloseIcon />} />}
+        preFix={<MenuIcon icon={<ExpandCloseIcon />} />}
         onClick={handleClose}
       >
         {t['com.affine.workbench.split-view-menu.close']()}
@@ -173,7 +148,7 @@ const SplitViewMenu = ({ view }: SplitViewMenuProps) => {
     viewIndex > 0 && views.length > 1 ? (
       <MenuItem
         onClick={handleMoveLeft}
-        preFix={<MenuIcon icon={<InsertLeftIcon />} />}
+        preFix={<MenuIcon icon={<MoveToLeftIcon />} />}
       >
         {t['com.affine.workbench.split-view-menu.move-left']()}
       </MenuItem>
@@ -182,10 +157,10 @@ const SplitViewMenu = ({ view }: SplitViewMenuProps) => {
   const FullScreenItem =
     views.length > 1 ? (
       <MenuItem
-        onClick={handleFullScreen}
+        onClick={handleCloseOthers}
-        preFix={<MenuIcon icon={<ExpandFullIcon />} />}
+        preFix={<MenuIcon icon={<KeepThisOneIcon />} />}
       >
-        {t['com.affine.workbench.split-view-menu.full-screen']()}
+        {t['com.affine.workbench.split-view-menu.keep-this-one']()}
       </MenuItem>
     ) : null;
 
@@ -193,7 +168,7 @@ const SplitViewMenu = ({ view }: SplitViewMenuProps) => {
     viewIndex < views.length - 1 ? (
       <MenuItem
         onClick={handleMoveRight}
-        preFix={<MenuIcon icon={<InsertRightIcon />} />}
+        preFix={<MenuIcon icon={<MoveToRightIcon />} />}
       >
         {t['com.affine.workbench.split-view-menu.move-right']()}
       </MenuItem>

packages/frontend/core/src/modules/workbench/view/split-view/split-view.css.ts

@@ -17,7 +17,7 @@ export const splitViewRoot = style({
   selectors: {
     '&[data-client-border="true"]': {
       vars: {
-        [gap]: '6px',
+        [gap]: '8px',
         [borderRadius]: '6px',
       },
     },
@@ -40,7 +40,7 @@ export const splitViewPanel = style({
     '[data-orientation="horizontal"] &': {
       width: 0,
     },
-    '[data-client-border="false"] &:not(:last-child):not([data-is-dragging="true"])':
+    '[data-client-border="false"] &:not([data-is-last="true"]):not([data-is-dragging="true"])':
       {
         borderRight: `1px solid ${cssVar('borderColor')}`,
       },
@@ -63,6 +63,10 @@ export const splitViewPanelDrag = style({
       borderRadius: 'inherit',
       pointerEvents: 'none',
       zIndex: 10,
+
+      // animate border in/out
+      boxShadow: `inset 0 0 0 0 transparent`,
+      transition: 'box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
     },
 
     '[data-is-dragging="true"] &::after': {
@@ -125,11 +129,3 @@ export const resizeHandle = style({
     // TODO
   },
 });
-
-export const menuTrigger = style({
-  position: 'absolute',
-  left: '50%',
-  top: 3,
-  transform: 'translateX(-50%)',
-  zIndex: 10,
-});

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

@@ -58,7 +58,7 @@ export const SplitView = ({
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        distance: 2,
+        distance: 0,
       },
     })
   );

packages/frontend/i18n/src/resources/en.json

@@ -1163,5 +1163,7 @@
   "com.affine.delete-tags.count": "{{count}} tag deleted",
   "com.affine.delete-tags.count_one": "{{count}} tag deleted",
   "com.affine.delete-tags.count_other": "{{count}} tags deleted",
+  "com.affine.workbench.split-view-menu.keep-this-one": "Keep this one",
+  "com.affine.workbench.split-view.page-menu-open": "Split View",
   "com.affine.search-tags.placeholder": "Type here ..."
 }