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}