chore(core): replace with new track impl (#7735)

packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx

@@ -10,7 +10,7 @@ import {
   filterPage,
   useEditCollection,
 } from '@affine/core/components/page-list';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { CollectionService } from '@affine/core/modules/collection';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { ShareDocsService } from '@affine/core/modules/share-doc';
@@ -83,10 +83,9 @@ export const ExplorerCollectionNode = ({
           ...collection,
           name,
         }));
-        mixpanel.track('CollectionRenamed', {
-          page: 'sidebar',
-          module: 'collection',
-          control: 'rename collection',
+
+        track.$.navigationPanel.organize.renameOrganizeItem({
+          type: 'collection',
         });
         toast(t['com.affine.toastMessage.rename']());
       }
@@ -113,10 +112,10 @@ export const ExplorerCollectionNode = ({
       if (collection && data.treeInstruction?.type === 'make-child') {
         if (data.source.data.entity?.type === 'doc') {
           handleAddDocToCollection(data.source.data.entity.id);
-          mixpanel.track('AddDocToCollection', {
-            page: 'sidebar',
-            module: 'collection',
-            control: 'drop doc on collection',
+          track.$.navigationPanel.organize.createOrganizeItem({
+            type: 'link',
+            target: 'doc',
+            control: 'drag',
           });
         }
       } else {
@@ -144,10 +143,9 @@ export const ExplorerCollectionNode = ({
     (data: DropTargetDropEvent<AffineDNDData>) => {
       if (collection && data.source.data.entity?.type === 'doc') {
         handleAddDocToCollection(data.source.data.entity.id);
-        mixpanel.track('AddDocToCollection', {
-          page: 'sidebar',
-          module: 'collection',
-          control: 'drop doc on collection',
+        track.$.navigationPanel.organize.createOrganizeItem({
+          type: 'collection',
+          control: 'drag',
         });
       }
     },

packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx

@@ -7,7 +7,7 @@ import {
 } from '@affine/component';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { CollectionService } from '@affine/core/modules/collection';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
@@ -58,15 +58,9 @@ export const useExplorerCollectionNodeOperations = (
   const createAndAddDocument = useCallback(() => {
     const newDoc = docsService.createDoc();
     collectionService.addPageToCollection(collectionId, newDoc.id);
-    mixpanel.track('DocCreated', {
-      page: 'sidebar',
-      module: 'collection',
-      control: 'add doc button',
-    });
-    mixpanel.track('AddDocToCollection', {
-      page: 'sidebar',
-      module: 'collection',
-      control: 'add doc button',
+    track.$.navigationPanel.collections.createDoc();
+    track.$.navigationPanel.collections.addDocToCollection({
+      control: 'button',
     });
     workbenchService.workbench.openDoc(newDoc.id);
     onOpenCollapsed();
@@ -80,12 +74,8 @@ export const useExplorerCollectionNodeOperations = (
 
   const handleToggleFavoriteCollection = useCallback(() => {
     compatibleFavoriteItemsAdapter.toggle(collectionId, 'collection');
-    mixpanel.track('ToggleFavorite', {
-      page: 'sidebar',
-      module: 'collection',
-      control: 'toggle favorite collection button',
+    track.$.navigationPanel.organize.toggleFavorite({
       type: 'collection',
-      id: collectionId,
     });
   }, [compatibleFavoriteItemsAdapter, collectionId]);
 
@@ -104,28 +94,20 @@ export const useExplorerCollectionNodeOperations = (
 
   const handleOpenInSplitView = useCallback(() => {
     workbenchService.workbench.openCollection(collectionId, { at: 'beside' });
-    mixpanel.track('OpenInSplitView', {
-      page: 'sidebar',
-      module: 'collection',
-      control: 'open in split view button',
+    track.$.navigationPanel.organize.openInSplitView({
+      type: 'collection',
     });
   }, [collectionId, workbenchService.workbench]);
 
   const handleOpenInNewTab = useCallback(() => {
     workbenchService.workbench.openCollection(collectionId, { at: 'new-tab' });
-    mixpanel.track('OpenInNewTab', {
-      page: 'sidebar',
-      module: 'collection',
-      control: 'open in new tab button',
-    });
+    track.$.navigationPanel.organize.openInNewTab({ type: 'collection' });
   }, [collectionId, workbenchService.workbench]);
 
   const handleDeleteCollection = useCallback(() => {
     collectionService.deleteCollection(deleteInfo, collectionId);
-    mixpanel.track('CollectionDeleted', {
-      page: 'sidebar',
-      module: 'collection',
-      control: 'delete collection button',
+    track.$.navigationPanel.organize.deleteOrganizeItem({
+      type: 'collection',
     });
   }, [collectionId, collectionService, deleteInfo]);
 

packages/frontend/core/src/modules/explorer/views/nodes/doc/index.tsx

@@ -7,7 +7,7 @@ import {
 } from '@affine/component';
 import { InfoModal } from '@affine/core/components/affine/page-properties';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
@@ -116,11 +116,7 @@ export const ExplorerDocNode = ({
   const handleRename = useAsyncCallback(
     async (newName: string) => {
       await docsService.changeDocTitle(docId, newName);
-      mixpanel.track('DocRenamed', {
-        page: 'sidebar',
-        module: 'doc',
-        control: 'doc rename',
-      });
+      track.$.navigationPanel.organize.renameOrganizeItem({ type: 'doc' });
     },
     [docId, docsService]
   );
@@ -130,10 +126,8 @@ export const ExplorerDocNode = ({
       if (data.treeInstruction?.type === 'make-child') {
         if (data.source.data.entity?.type === 'doc') {
           await docsService.addLinkedDoc(docId, data.source.data.entity.id);
-          mixpanel.track('LinkedDocCreated', {
-            page: 'sidebar',
-            module: 'doc',
-            control: 'drop doc on doc',
+          track.$.navigationPanel.docs.linkDoc({
+            control: 'drag',
           });
         } else {
           toast(t['com.affine.rootAppSidebar.doc.link-doc-only']());
@@ -164,10 +158,8 @@ export const ExplorerDocNode = ({
       if (data.source.data.entity?.type === 'doc') {
         // TODO(eyhn): timeout&error handling
         await docsService.addLinkedDoc(docId, data.source.data.entity.id);
-        mixpanel.track('LinkedDocCreated', {
-          page: 'sidebar',
-          module: 'doc',
-          control: 'drop doc on doc',
+        track.$.navigationPanel.docs.linkDoc({
+          control: 'drag',
         });
       } else {
         toast(t['com.affine.rootAppSidebar.doc.link-doc-only']());

packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx

@@ -8,7 +8,7 @@ import {
 } from '@affine/component';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
@@ -68,10 +68,8 @@ export const useExplorerDocNodeOperations = (
       },
       onConfirm() {
         docRecord.moveToTrash();
-        mixpanel.track('DocMovedTrash', {
-          page: 'sidebar',
-          module: 'doc',
-          control: 'move to trash button',
+        track.$.navigationPanel.docs.deleteDoc({
+          control: 'button',
         });
         toast(t['com.affine.toastMessage.movedTrash']());
       },
@@ -82,10 +80,8 @@ export const useExplorerDocNodeOperations = (
     workbenchService.workbench.openDoc(docId, {
       at: 'new-tab',
     });
-    mixpanel.track('OpenInNewTab', {
-      page: 'sidebar',
-      module: 'doc',
-      control: 'open in new tab button',
+    track.$.navigationPanel.organize.openInNewTab({
+      type: 'doc',
     });
   }, [docId, workbenchService]);
 
@@ -93,10 +89,8 @@ export const useExplorerDocNodeOperations = (
     workbenchService.workbench.openDoc(docId, {
       at: 'beside',
     });
-    mixpanel.track('OpenInSplitView', {
-      page: 'sidebar',
-      module: 'doc',
-      control: 'open in split view button',
+    track.$.navigationPanel.organize.openInSplitView({
+      type: 'doc',
     });
   }, [docId, workbenchService]);
 
@@ -104,28 +98,16 @@ export const useExplorerDocNodeOperations = (
     const newDoc = docsService.createDoc();
     // TODO: handle timeout & error
     await docsService.addLinkedDoc(docId, newDoc.id);
-    mixpanel.track('DocCreated', {
-      page: 'sidebar',
-      module: 'doc',
-      control: 'add linked doc button',
-    });
-    mixpanel.track('LinkedDocCreated', {
-      page: 'sidebar',
-      module: 'doc',
-      control: 'add linked doc button',
-    });
+    track.$.navigationPanel.docs.createDoc({ control: 'linkDoc' });
+    track.$.navigationPanel.docs.linkDoc({ control: 'createDoc' });
     workbenchService.workbench.openDoc(newDoc.id);
     options.openNodeCollapsed();
   }, [docId, options, docsService, workbenchService.workbench]);
 
   const handleToggleFavoriteDoc = useCallback(() => {
     compatibleFavoriteItemsAdapter.toggle(docId, 'doc');
-    mixpanel.track('ToggleFavorite', {
-      page: 'sidebar',
-      module: 'doc',
-      control: 'toggle favorite button',
+    track.$.navigationPanel.organize.toggleFavorite({
       type: 'doc',
-      id: docId,
     });
   }, [docId, compatibleFavoriteItemsAdapter]);
 

packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx

@@ -15,7 +15,7 @@ import {
   useSelectDoc,
   useSelectTag,
 } from '@affine/core/components/page-list/selector';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import {
   type FolderNode,
   OrganizeService,
@@ -178,10 +178,8 @@ export const ExplorerFolderNodeFolder = ({
 
   const handleDelete = useCallback(() => {
     node.delete();
-    mixpanel.track('FolderDeleted', {
-      page: 'sidebar',
-      module: 'organize',
-      control: `delete folder`,
+    track.$.navigationPanel.organize.deleteOrganizeItem({
+      type: 'folder',
     });
     notify.success({
       title: t['com.affine.rootAppSidebar.organize.delete.notify-title']({
@@ -229,23 +227,14 @@ export const ExplorerFolderNodeFolder = ({
             return;
           }
           node.moveHere(data.source.data.entity.id, node.indexAt('before'));
-          mixpanel.track('FolderMoved', {
-            page: 'sidebar',
-            module: 'organize',
-            control: 'drop folder at folder',
-            type: 'folder',
-            id: data.source.data.entity.id,
-          });
+          track.$.navigationPanel.organize.moveOrganizeItem({ type: 'folder' });
         } else if (
           data.source.data.from?.at === 'explorer:organize:folder-node'
         ) {
           node.moveHere(data.source.data.from.nodeId, node.indexAt('before'));
-          mixpanel.track('FolderLinkMoved', {
-            page: 'sidebar',
-            module: 'organize',
-            control: 'drop folder link at folder',
-            type: data.source.data.entity?.type,
-            id: data.source.data.entity?.id,
+          track.$.navigationPanel.organize.moveOrganizeItem({
+            type: 'link',
+            target: data.source.data.entity?.type,
           });
         } else if (
           data.source.data.entity?.type === 'collection' ||
@@ -257,12 +246,9 @@ export const ExplorerFolderNodeFolder = ({
             data.source.data.entity.id,
             node.indexAt('before')
           );
-          mixpanel.track('FolderLinkCreated', {
-            page: 'sidebar',
-            module: 'organize',
-            control: 'drop entity at folder',
-            type: data.source.data.entity?.type,
-            id: data.source.data.entity?.id,
+          track.$.navigationPanel.organize.createOrganizeItem({
+            type: 'link',
+            target: data.source.data.entity?.type,
           });
         }
       } else {
@@ -312,23 +298,13 @@ export const ExplorerFolderNodeFolder = ({
           return;
         }
         node.moveHere(data.source.data.entity.id, node.indexAt('before'));
-        mixpanel.track('FolderMoved', {
-          page: 'sidebar',
-          module: 'organize',
-          control: 'drop folder at folder',
-          type: 'folder',
-          id: data.source.data.entity.id,
-        });
+        track.$.navigationPanel.organize.moveOrganizeItem({ type: 'folder' });
       } else if (
         data.source.data.from?.at === 'explorer:organize:folder-node'
       ) {
         node.moveHere(data.source.data.from.nodeId, node.indexAt('before'));
-        mixpanel.track('FolderLinkMoved', {
-          page: 'sidebar',
-          module: 'organize',
-          control: 'drop folder link at folder',
+        track.$.navigationPanel.organize.moveOrganizeItem({
           type: data.source.data.entity?.type,
-          id: data.source.data.entity?.id,
         });
       } else if (
         data.source.data.entity?.type === 'collection' ||
@@ -340,12 +316,9 @@ export const ExplorerFolderNodeFolder = ({
           data.source.data.entity.id,
           node.indexAt('before')
         );
-        mixpanel.track('FolderLinkCreated', {
-          page: 'sidebar',
-          module: 'organize',
-          control: 'drop entity at folder',
-          type: data.source.data.entity?.type,
-          id: data.source.data.entity?.id,
+        track.$.navigationPanel.organize.createOrganizeItem({
+          type: 'link',
+          target: data.source.data.entity?.type,
         });
       }
     },
@@ -374,13 +347,7 @@ export const ExplorerFolderNodeFolder = ({
             data.source.data.entity.id,
             node.indexAt(at, dropAtNode.id)
           );
-          mixpanel.track('FolderMoved', {
-            page: 'sidebar',
-            module: 'organize',
-            control: `drop folder ${at === 'before' ? 'above' : 'below'} node`,
-            type: 'folder',
-            id: data.source.data.entity?.id,
-          });
+          track.$.navigationPanel.organize.moveOrganizeItem({ type: 'folder' });
         } else if (
           data.source.data.from?.at === 'explorer:organize:folder-node'
         ) {
@@ -388,12 +355,9 @@ export const ExplorerFolderNodeFolder = ({
             data.source.data.from.nodeId,
             node.indexAt(at, dropAtNode.id)
           );
-          mixpanel.track('FolderLinkMoved', {
-            page: 'sidebar',
-            module: 'organize',
-            control: `drop folder link ${at === 'before' ? 'above' : 'below'} node`,
-            type: data.source.data.entity?.type,
-            id: data.source.data.entity?.id,
+          track.$.navigationPanel.organize.moveOrganizeItem({
+            type: 'link',
+            target: data.source.data.entity?.type,
           });
         } else if (
           data.source.data.entity?.type === 'collection' ||
@@ -405,12 +369,10 @@ export const ExplorerFolderNodeFolder = ({
             data.source.data.entity.id,
             node.indexAt(at, dropAtNode.id)
           );
-          mixpanel.track('FolderLinkCreated', {
-            page: 'sidebar',
-            module: 'organize',
-            control: `drop entity ${at === 'before' ? 'above' : 'below'} node`,
-            type: data.source.data.entity?.type,
-            id: data.source.data.entity?.id,
+
+          track.$.navigationPanel.organize.createOrganizeItem({
+            type: 'link',
+            target: data.source.data.entity?.type,
           });
         }
       } else if (data.treeInstruction?.type === 'reparent') {
@@ -560,17 +522,10 @@ export const ExplorerFolderNodeFolder = ({
     const newDoc = docsService.createDoc();
     node.createLink('doc', newDoc.id, node.indexAt('before'));
     workbenchService.workbench.openDoc(newDoc.id);
-    mixpanel.track('DocCreated', {
-      page: 'sidebar',
-      module: 'organize',
-      control: `folder new doc button`,
-    });
-    mixpanel.track('FolderLinkCreated', {
-      page: 'sidebar',
-      module: 'organize',
-      control: `folder new doc button`,
-      type: 'doc',
-      id: newDoc.id,
+    track.$.navigationPanel.folders.createDoc();
+    track.$.navigationPanel.organize.createOrganizeItem({
+      type: 'link',
+      target: 'doc',
     });
     setCollapsed(false);
   }, [docsService, node, workbenchService.workbench]);
@@ -580,11 +535,7 @@ export const ExplorerFolderNodeFolder = ({
       t['com.affine.rootAppSidebar.organize.new-folders'](),
       node.indexAt('before')
     );
-    mixpanel.track('FolderCreated', {
-      page: 'sidebar',
-      module: 'organize',
-      control: `create sub folder`,
-    });
+    track.$.navigationPanel.organize.createOrganizeItem({ type: 'folder' });
     setCollapsed(false);
     setNewFolderId(newFolderId);
   }, [node, t]);
@@ -612,13 +563,6 @@ export const ExplorerFolderNodeFolder = ({
 
           newItemIds.forEach(id => {
             node.createLink(type, id, node.indexAt('after'));
-            mixpanel.track('FolderLinkCreated', {
-              page: 'sidebar',
-              module: 'organize',
-              control: `add selector`,
-              type,
-              id,
-            });
           });
           removedItems.forEach(node => node.delete());
           const updated = newItemIds.length + removedItems.length;
@@ -627,6 +571,10 @@ export const ExplorerFolderNodeFolder = ({
         .catch(err => {
           console.error(`Unexpected error while selecting ${type}`, err);
         });
+      track.$.navigationPanel.organize.createOrganizeItem({
+        type: 'link',
+        target: type,
+      });
     },
     [
       children,
@@ -763,7 +711,7 @@ export const ExplorerFolderNodeFolder = ({
     handleCreateSubfolder,
     handleDelete,
     handleNewDoc,
-    node.id,
+    node,
     t,
   ]);
 
@@ -774,23 +722,6 @@ export const ExplorerFolderNodeFolder = ({
     return folderOperations;
   }, [additionalOperations, folderOperations]);
 
-  const handleDeleteChildren = useCallback((node: FolderNode) => {
-    node.delete();
-    if (node.type$.value === 'folder') {
-      mixpanel.track('FolderDeleted', {
-        page: 'sidebar',
-        module: 'organize',
-        control: 'remove from folder button',
-      });
-    } else {
-      mixpanel.track('FolderLinkDeleted', {
-        page: 'sidebar',
-        module: 'organize',
-        control: 'remove from folder button',
-      });
-    }
-  }, []);
-
   const childrenOperations = useCallback(
     // eslint-disable-next-line @typescript-eslint/ban-types
     (type: string, node: FolderNode) => {
@@ -806,7 +737,9 @@ export const ExplorerFolderNodeFolder = ({
                     <RemoveFolderIcon />
                   </MenuIcon>
                 }
-                onClick={() => handleDeleteChildren(node)}
+                data-event-props="$.navigationPanel.organize.deleteOrganizeItem"
+                data-event-args-type={node.type$.value}
+                onClick={node.delete}
               >
                 {t['com.affine.rootAppSidebar.organize.delete-from-folder']()}
               </MenuItem>
@@ -816,7 +749,7 @@ export const ExplorerFolderNodeFolder = ({
       }
       return [];
     },
-    [handleDeleteChildren, t]
+    [t]
   );
 
   const handleCollapsedChange = useCallback((collapsed: boolean) => {

packages/frontend/core/src/modules/explorer/views/nodes/tag/index.tsx

@@ -3,7 +3,7 @@ import {
   type DropTargetOptions,
   toast,
 } from '@affine/component';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
 import type { AffineDNDData } from '@affine/core/types/dnd';
@@ -84,10 +84,8 @@ export const ExplorerTagNode = ({
     (newName: string) => {
       if (tagRecord && tagRecord.value$.value !== newName) {
         tagRecord.rename(newName);
-        mixpanel.track('TagRenamed', {
-          page: 'sidebar',
-          module: 'tag',
-          control: 'tag rename',
+        track.$.navigationPanel.organize.renameOrganizeItem({
+          type: 'tag',
         });
       }
     },
@@ -99,10 +97,8 @@ export const ExplorerTagNode = ({
       if (data.treeInstruction?.type === 'make-child' && tagRecord) {
         if (data.source.data.entity?.type === 'doc') {
           tagRecord.tag(data.source.data.entity.id);
-          mixpanel.track('DocTagged', {
-            page: 'sidebar',
-            module: 'tag',
-            control: 'drop doc on tag',
+          track.$.navigationPanel.tags.tagDoc({
+            control: 'drag',
           });
         } else {
           toast(t['com.affine.rootAppSidebar.tag.doc-only']());

packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx

@@ -6,7 +6,7 @@ import {
   toast,
 } from '@affine/component';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { FavoriteService } from '@affine/core/modules/favorite';
 import { TagService } from '@affine/core/modules/tag';
 import { WorkbenchService } from '@affine/core/modules/workbench';
@@ -51,16 +51,7 @@ export const useExplorerTagNodeOperations = (
     if (tagRecord) {
       const newDoc = docsService.createDoc();
       tagRecord?.tag(newDoc.id);
-      mixpanel.track('DocCreated', {
-        page: 'sidebar',
-        module: 'tag',
-        control: 'add doc button',
-      });
-      mixpanel.track('DocTagged', {
-        page: 'sidebar',
-        module: 'tag',
-        control: 'add doc button',
-      });
+      track.$.navigationPanel.tags.createDoc();
       workbenchService.workbench.openDoc(newDoc.id);
       openNodeCollapsed();
     }
@@ -68,11 +59,7 @@ export const useExplorerTagNodeOperations = (
 
   const handleMoveToTrash = useCallback(() => {
     tagService.tagList.deleteTag(tagId);
-    mixpanel.track('TagDeleted', {
-      page: 'sidebar',
-      module: 'tag',
-      control: 'remove tag button',
-    });
+    track.$.navigationPanel.organize.deleteOrganizeItem({ type: 'tag' });
     toast(t['com.affine.tags.delete-tags.toast']());
   }, [t, tagId, tagService.tagList]);
 
@@ -80,21 +67,13 @@ export const useExplorerTagNodeOperations = (
     workbenchService.workbench.openTag(tagId, {
       at: 'beside',
     });
-    mixpanel.track('OpenInSplitView', {
-      page: 'sidebar',
-      module: 'tag',
-      control: 'open in split view button',
-    });
+    track.$.navigationPanel.organize.openInSplitView({ type: 'tag' });
   }, [tagId, workbenchService]);
 
   const handleToggleFavoriteTag = useCallback(() => {
     favoriteService.favoriteList.toggle('tag', tagId);
-    mixpanel.track('ToggleFavorite', {
-      page: 'sidebar',
-      module: 'tag',
-      control: 'toggle favorite tag button',
+    track.$.navigationPanel.organize.toggleFavorite({
       type: 'tag',
-      id: tagId,
     });
   }, [favoriteService, tagId]);
 
@@ -102,11 +81,7 @@ export const useExplorerTagNodeOperations = (
     workbenchService.workbench.openTag(tagId, {
       at: 'new-tab',
     });
-    mixpanel.track('OpenInNewTab', {
-      page: 'sidebar',
-      module: 'tag',
-      control: 'open in new tab button',
-    });
+    track.$.navigationPanel.organize.openInNewTab({ type: 'tag' });
   }, [tagId, workbenchService]);
 
   return useMemo(

packages/frontend/core/src/modules/explorer/views/sections/collections/index.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from '@affine/component';
 import { useEditCollectionName } from '@affine/core/components/page-list';
 import { createEmptyCollection } from '@affine/core/components/page-list/use-collection-manager';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { CollectionService } from '@affine/core/modules/collection';
 import { ExplorerTreeRoot } from '@affine/core/modules/explorer/views/tree';
 import { WorkbenchService } from '@affine/core/modules/workbench';
@@ -35,10 +35,8 @@ export const ExplorerCollections = () => {
       .then(name => {
         const id = nanoid();
         collectionService.addCollection(createEmptyCollection(id, { name }));
-        mixpanel.track('CollectionCreated', {
-          page: 'sidebar',
-          module: 'collections',
-          control: 'new collection button',
+        track.$.navigationPanel.organize.createOrganizeItem({
+          type: 'collection',
         });
         workbenchService.workbench.openCollection(id);
         explorerSection.setCollapsed(false);

packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx

@@ -4,7 +4,7 @@ import {
   IconButton,
   useDropTarget,
 } from '@affine/component';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import {
   DropEffect,
   type ExplorerTreeNodeDropEffect,
@@ -59,12 +59,9 @@ export const ExplorerFavorites = () => {
           data.source.data.entity.id,
           favoriteService.favoriteList.indexAt('before')
         );
-        mixpanel.track('AddFavorite', {
-          page: 'sidebar',
-          module: 'favorite',
-          control: 'drop entity to favorite',
+        track.$.navigationPanel.organize.toggleFavorite({
           type: data.source.data.entity.type,
-          id: data.source.data.entity.id,
+          on: true,
         });
         explorerSection.setCollapsed(false);
       }
@@ -98,18 +95,6 @@ export const ExplorerFavorites = () => {
       newDoc.id,
       favoriteService.favoriteList.indexAt('before')
     );
-    mixpanel.track('DocCreated', {
-      page: 'sidebar',
-      module: 'favorites',
-      control: 'new favorite doc button',
-    });
-    mixpanel.track('AddFavorite', {
-      page: 'sidebar',
-      module: 'favorite',
-      control: 'new favorite doc button',
-      type: 'doc',
-      id: newDoc.id,
-    });
     workbenchService.workbench.openDoc(newDoc.id);
     explorerSection.setCollapsed(false);
   }, [
@@ -144,12 +129,8 @@ export const ExplorerFavorites = () => {
               favorite
             )
           );
-          mixpanel.track('ReorderFavorite', {
-            page: 'sidebar',
-            module: 'favorite',
-            control: 'drop to reorder favorite',
+          track.$.navigationPanel.organize.orderOrganizeItem({
             type: data.source.data.entity.type,
-            id: data.source.data.entity.id,
           });
         } else if (
           data.source.data.entity?.type &&
@@ -165,12 +146,9 @@ export const ExplorerFavorites = () => {
               favorite
             )
           );
-          mixpanel.track('AddFavorite', {
-            page: 'sidebar',
-            module: 'favorite',
-            control: 'drop entity to favorite',
+          track.$.navigationPanel.organize.toggleFavorite({
             type: data.source.data.entity.type,
-            id: data.source.data.entity.id,
+            on: true,
           });
         } else {
           return; // not supported
@@ -238,6 +216,8 @@ export const ExplorerFavorites = () => {
         <>
           <IconButton
             data-testid="explorer-bar-add-favorite-button"
+            data-event-props="$.navigationPanel.favorites.createDoc"
+            data-event-args-control="addFavorite"
             onClick={handleCreateNewFavoriteDoc}
             size="16"
             tooltip={t[

packages/frontend/core/src/modules/explorer/views/sections/migration-favorites/index.tsx

@@ -1,5 +1,5 @@
 import { IconButton, useConfirmModal } from '@affine/component';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { ExplorerTreeRoot } from '@affine/core/modules/explorer/views/tree';
 import { FavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { Trans, useI18n } from '@affine/i18n';
@@ -58,18 +58,8 @@ export const ExplorerMigrationFavorites = () => {
         t['com.affine.rootAppSidebar.migration-data.clean-all.cancel'](),
       onConfirm() {
         favoriteItemsAdapter.clearAll();
-        mixpanel.track('AllMigrationDataCleared', {
-          page: 'sidebar',
-          module: 'migration data',
-          control: 'clear button',
-        });
       },
     });
-    mixpanel.track('ClickClearMigrationDataButton', {
-      page: 'sidebar',
-      module: 'migration data',
-      control: 'clear button',
-    });
   }, [favoriteItemsAdapter, openConfirmModal, t]);
 
   const handleClickHelp = useCallback(() => {
@@ -92,11 +82,7 @@ export const ExplorerMigrationFavorites = () => {
         },
       },
     });
-    mixpanel.track('OpenMigrationDataHelp', {
-      page: 'sidebar',
-      module: 'migration data',
-      control: 'help button',
-    });
+    track.$.navigationPanel.migrationData.openMigrationDataHelp();
   }, [handleClickClear, openConfirmModal, t]);
 
   if (favorites.length === 0) {

packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx

@@ -4,7 +4,7 @@ import {
   IconButton,
   toast,
 } from '@affine/component';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import {
   type ExplorerTreeNodeDropEffect,
   ExplorerTreeRoot,
@@ -46,11 +46,7 @@ export const ExplorerOrganize = () => {
       'New Folder',
       rootFolder.indexAt('before')
     );
-    mixpanel.track('FolderCreated', {
-      page: 'sidebar',
-      module: 'organize',
-      control: 'new folder',
-    });
+    track.$.navigationPanel.organize.createOrganizeItem({ type: 'folder' });
     setNewFolderId(newFolderId);
     explorerSection.setCollapsed(false);
   }, [explorerSection, rootFolder]);
@@ -71,13 +67,7 @@ export const ExplorerOrganize = () => {
             data.source.data.entity.id,
             rootFolder.indexAt(at, node.id)
           );
-          mixpanel.track('FolderMoved', {
-            page: 'sidebar',
-            module: 'organize',
-            control: 'drop at root',
-            type: 'folder',
-            id: node.id,
-          });
+          track.$.navigationPanel.organize.moveOrganizeItem({ type: 'folder' });
         } else {
           toast(t['com.affine.rootAppSidebar.organize.root-folder-only']());
         }

packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx

@@ -1,5 +1,5 @@
 import { IconButton } from '@affine/component';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { ExplorerTreeRoot } from '@affine/core/modules/explorer/views/tree';
 import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
@@ -32,11 +32,7 @@ export const ExplorerTags = () => {
       tagService.randomTagColor()
     );
     setCreatedTag(newTags);
-    mixpanel.track('TagCreated', {
-      page: 'sidebar',
-      module: 'tags',
-      control: 'new tag button',
-    });
+    track.$.navigationPanel.organize.createOrganizeItem({ type: 'tag' });
     explorerSection.setCollapsed(false);
   }, [explorerSection, t, tagService]);