chore(electron): split view tracking events (#9896)

fix AF-2037

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx

@@ -16,6 +16,7 @@ import { RecentDocsService } from '@affine/core/modules/quicksearch';
 import { ViewService } from '@affine/core/modules/workbench';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import { isNewTabTrigger } from '@affine/core/utils';
+import track from '@affine/track';
 import { RefNodeSlotsProvider } from '@blocksuite/affine/blocks';
 import {
   type Disposable,
@@ -190,6 +191,15 @@ const DetailPageImpl = memo(function DetailPageImpl() {
                   event && isNewTabTrigger(event)
                     ? 'open-in-new-tab'
                     : 'open-in-active-view';
+
+                if (openMode === 'open-in-new-view') {
+                  track.doc.editor.toolbar.openInSplitView();
+                } else if (openMode === 'open-in-center-peek') {
+                  track.doc.editor.toolbar.openInPeekView();
+                } else if (openMode === 'open-in-new-tab') {
+                  track.doc.editor.toolbar.openInNewTab();
+                }
+
                 if (openMode !== 'open-in-center-peek') {
                   const at = (() => {
                     if (openMode === 'open-in-active-view') {

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

@@ -7,6 +7,7 @@ import {
 } from '@affine/component';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
+import track from '@affine/track';
 import {
   CloseIcon,
   ExpandFullIcon,
@@ -183,6 +184,10 @@ export const SplitViewPanel = memo(function SplitViewPanel({
         }
         setDraggingView(null);
         setDraggingOverView(null);
+        track.$.splitViewIndicator.$.splitViewAction({
+          control: 'indicator',
+          action: 'move',
+        });
       },
       onDragStart() {
         setDraggingView({
@@ -292,18 +297,33 @@ const SplitViewMenu = ({
 
   const viewIndex = views.findIndex(v => v === view);
 
-  const handleClose = useCallback(
+  const handleClose = useCallback(() => {
-    () => workbench.close(view),
+    workbench.close(view);
-    [view, workbench]
+    track.$.splitViewIndicator.$.splitViewAction({
-  );
+      control: 'menu',
+      action: 'close',
+    });
+  }, [view, workbench]);
   const handleMoveLeft = useCallback(() => {
     onMove(viewIndex, viewIndex - 1);
+    track.$.splitViewIndicator.$.splitViewAction({
+      control: 'menu',
+      action: 'move',
+    });
   }, [onMove, viewIndex]);
   const handleMoveRight = useCallback(() => {
     onMove(viewIndex, viewIndex + 1);
+    track.$.splitViewIndicator.$.splitViewAction({
+      control: 'menu',
+      action: 'move',
+    });
   }, [onMove, viewIndex]);
   const handleCloseOthers = useCallback(() => {
     workbench.closeOthers(view);
+    track.$.splitViewIndicator.$.splitViewAction({
+      control: 'menu',
+      action: 'closeOthers',
+    });
   }, [view, workbench]);
 
   const CloseItem =

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

@@ -1,6 +1,7 @@
 import { 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 track from '@affine/track';
 import { useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useSetAtom } from 'jotai';
@@ -121,7 +122,10 @@ export const SplitView = ({
         const entity = data.source.data.entity;
         const from = data.source.data.from;
 
-        if (dropTarget?.at === 'workbench:resize-handle') {
+        if (
+          dropTarget?.at === 'workbench:resize-handle' &&
+          entity?.type !== 'custom-property'
+        ) {
           const { edge, viewId } = dropTarget;
           const index = views.findIndex(v => v.id === viewId);
           const at = (() => {
@@ -148,6 +152,10 @@ export const SplitView = ({
 
           if (to) {
             workbench.createView(at, to);
+            track.$.splitViewIndicator.$.openInSplitView({
+              type: entity?.type,
+              route: to,
+            });
           }
         }
       },

packages/frontend/track/src/events.ts

@@ -16,9 +16,11 @@ type AppEvents =
 type NavigationEvents =
   | 'openInNewTab'
   | 'openInSplitView'
+  | 'openInPeekView'
   | 'switchTab'
   | 'switchSplitView'
   | 'tabAction'
+  | 'splitViewAction'
   | 'navigate'
   | 'goBack'
   | 'goForward'
@@ -314,6 +316,9 @@ const PageEvents = {
       newDoc: ['quickStart'],
       template: ['openTemplateListMenu', 'quickStart'],
     },
+    splitViewIndicator: {
+      $: ['splitViewAction', 'openInSplitView', 'openInPeekView'],
+    },
   },
   doc: {
     editor: {
@@ -322,7 +327,12 @@ const PageEvents = {
       quickSearch: ['createDoc'],
       formatToolbar: ['bold'],
       pageRef: ['navigate'],
-      toolbar: ['copyBlockToLink'],
+      toolbar: [
+        'copyBlockToLink',
+        'openInSplitView',
+        'openInNewTab',
+        'openInPeekView',
+      ],
       aiActions: ['requestSignIn'],
       pageBlockHeader: ['openDocInfo'],
       starterBar: ['quickStart', 'openTemplateListMenu'],
@@ -412,6 +422,9 @@ type TabActionType =
   | 'switchTab'
   | 'separateTabs';
 
+type SplitViewActionControlType = 'menu' | 'indicator';
+type SplitViewActionType = 'open' | 'close' | 'move' | 'closeOthers';
+
 type AuthArgs = {
   method: 'password' | 'magic-link' | 'oauth';
   provider?: string;
@@ -452,12 +465,16 @@ export type EventArgs = {
   deleteOrganizeItem: OrganizeItemArgs;
   orderOrganizeItem: OrganizeItemArgs;
   openInNewTab: { type: OrganizeItemType };
-  openInSplitView: { type: OrganizeItemType };
+  openInSplitView: { type: OrganizeItemType; route?: string };
   tabAction: {
     type?: OrganizeItemType;
     control: TabActionControlType;
     action: TabActionType;
   };
+  splitViewAction: {
+    control: SplitViewActionControlType;
+    action: SplitViewActionType;
+  };
   toggleFavorite: OrganizeItemArgs & { on: boolean };
   toggle: { type: 'collapse' | 'expand' };
   createDoc: { mode?: 'edgeless' | 'page' };