feat(core): add track events for cmdk (#7668)

packages/frontend/core/src/commands/affine-creation.tsx

@@ -4,6 +4,7 @@ import type { createStore } from 'jotai';
 
 import { openCreateWorkspaceModalAtom } from '../atoms';
 import type { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
+import { track } from '../mixpanel';
 import { registerAffineCommand } from './registry';
 
 export function registerAffineCreationCommands({
@@ -29,6 +30,8 @@ export function registerAffineCreationCommands({
           }
         : undefined,
       run() {
+        track.$.cmdk.creation.createDoc({ mode: 'page' });
+
         pageHelper.createPage();
       },
     })
@@ -41,6 +44,10 @@ export function registerAffineCreationCommands({
       icon: <PlusIcon />,
       label: t['com.affine.cmdk.affine.new-edgeless-page'](),
       run() {
+        track.$.cmdk.creation.createDoc({
+          mode: 'edgeless',
+        });
+
         pageHelper.createEdgeless();
       },
     })
@@ -53,6 +60,8 @@ export function registerAffineCreationCommands({
       icon: <PlusIcon />,
       label: t['com.affine.cmdk.affine.new-workspace'](),
       run() {
+        track.$.cmdk.workspace.createWorkspace();
+
         store.set(openCreateWorkspaceModalAtom, 'new');
       },
     })
@@ -67,6 +76,10 @@ export function registerAffineCreationCommands({
         return environment.isDesktop;
       },
       run() {
+        track.$.cmdk.workspace.createWorkspace({
+          control: 'import',
+        });
+
         store.set(openCreateWorkspaceModalAtom, 'add');
       },
     })

packages/frontend/core/src/commands/affine-help.tsx

@@ -3,6 +3,7 @@ import { ContactWithUsIcon, NewIcon } from '@blocksuite/icons/rc';
 import type { createStore } from 'jotai';
 
 import { openSettingModalAtom } from '../atoms';
+import { track } from '../mixpanel';
 import { popupWindow } from '../utils';
 import { registerAffineCommand } from './registry';
 
@@ -21,6 +22,7 @@ export function registerAffineHelpCommands({
       icon: <NewIcon />,
       label: t['com.affine.cmdk.affine.whats-new'](),
       run() {
+        track.$.cmdk.help.openChangelog();
         popupWindow(runtimeConfig.changelogUrl);
       },
     })
@@ -32,6 +34,7 @@ export function registerAffineHelpCommands({
       icon: <ContactWithUsIcon />,
       label: t['com.affine.cmdk.affine.contact-us'](),
       run() {
+        track.$.cmdk.help.contactUs();
         store.set(openSettingModalAtom, {
           open: true,
           activeTab: 'about',

packages/frontend/core/src/commands/affine-layout.tsx

@@ -3,6 +3,7 @@ import { SidebarIcon } from '@blocksuite/icons/rc';
 import type { createStore } from 'jotai';
 
 import { appSidebarOpenAtom } from '../components/app-sidebar';
+import { track } from '../mixpanel';
 import { registerAffineCommand } from './registry';
 
 export function registerAffineLayoutCommands({
@@ -27,6 +28,8 @@ export function registerAffineLayoutCommands({
         binding: '$mod+/',
       },
       run() {
+        track.$.navigationPanel.$.toggle();
+
         store.set(appSidebarOpenAtom, v => !v);
       },
     })

packages/frontend/core/src/commands/affine-navigation.tsx

@@ -28,6 +28,10 @@ export function registerAffineNavigationCommands({
       icon: <ArrowRightBigIcon />,
       label: t['com.affine.cmdk.affine.navigation.goto-all-pages'](),
       run() {
+        track.$.cmdk.navigation.navigate({
+          to: 'allDocs',
+        });
+
         navigationHelper.jumpToSubPath(docCollection.id, WorkspaceSubPath.ALL);
       },
     })
@@ -40,6 +44,10 @@ export function registerAffineNavigationCommands({
       icon: <ArrowRightBigIcon />,
       label: 'Go to Collection List',
       run() {
+        track.$.cmdk.navigation.navigate({
+          to: 'collectionList',
+        });
+
         navigationHelper.jumpToCollections(docCollection.id);
       },
     })
@@ -52,6 +60,10 @@ export function registerAffineNavigationCommands({
       icon: <ArrowRightBigIcon />,
       label: 'Go to Tag List',
       run() {
+        track.$.cmdk.navigation.navigate({
+          to: 'tagList',
+        });
+
         navigationHelper.jumpToTags(docCollection.id);
       },
     })
@@ -64,6 +76,10 @@ export function registerAffineNavigationCommands({
       icon: <ArrowRightBigIcon />,
       label: t['com.affine.cmdk.affine.navigation.goto-workspace'](),
       run() {
+        track.$.cmdk.navigation.navigate({
+          to: 'workspace',
+        });
+
         store.set(openWorkspaceListModalAtom, true);
       },
     })
@@ -109,6 +125,10 @@ export function registerAffineNavigationCommands({
       icon: <ArrowRightBigIcon />,
       label: t['com.affine.cmdk.affine.navigation.goto-trash'](),
       run() {
+        track.$.cmdk.navigation.navigate({
+          to: 'trash',
+        });
+
         navigationHelper.jumpToSubPath(
           docCollection.id,
           WorkspaceSubPath.TRASH

packages/frontend/core/src/commands/affine-settings.tsx

@@ -6,6 +6,7 @@ import type { createStore } from 'jotai';
 import type { useTheme } from 'next-themes';
 
 import type { useLanguageHelper } from '../hooks/affine/use-language-helper';
+import { track } from '../mixpanel';
 import { registerAffineCommand } from './registry';
 
 export function registerAffineSettingsCommands({
@@ -34,6 +35,10 @@ export function registerAffineSettingsCommands({
       icon: <SettingsIcon />,
       preconditionStrategy: () => theme.theme !== 'system',
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'theme',
+          value: 'system',
+        });
         theme.setTheme('system');
       },
     })
@@ -48,6 +53,10 @@ export function registerAffineSettingsCommands({
       icon: <SettingsIcon />,
       preconditionStrategy: () => theme.theme !== 'dark',
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'theme',
+          value: 'dark',
+        });
         theme.setTheme('dark');
       },
     })
@@ -63,6 +72,11 @@ export function registerAffineSettingsCommands({
       icon: <SettingsIcon />,
       preconditionStrategy: () => theme.theme !== 'light',
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'theme',
+          value: 'light',
+        });
+
         theme.setTheme('light');
       },
     })
@@ -80,6 +94,11 @@ export function registerAffineSettingsCommands({
       preconditionStrategy: () =>
         store.get(appSettingAtom).fontStyle !== 'Sans',
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'fontStyle',
+          value: 'Sans',
+        });
+
         store.set(appSettingAtom, prev => ({
           ...prev,
           fontStyle: 'Sans',
@@ -99,6 +118,11 @@ export function registerAffineSettingsCommands({
       preconditionStrategy: () =>
         store.get(appSettingAtom).fontStyle !== 'Serif',
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'fontStyle',
+          value: 'Serif',
+        });
+
         store.set(appSettingAtom, prev => ({
           ...prev,
           fontStyle: 'Serif',
@@ -118,6 +142,11 @@ export function registerAffineSettingsCommands({
       preconditionStrategy: () =>
         store.get(appSettingAtom).fontStyle !== 'Mono',
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'fontStyle',
+          value: 'Mono',
+        });
+
         store.set(appSettingAtom, prev => ({
           ...prev,
           fontStyle: 'Mono',
@@ -138,6 +167,11 @@ export function registerAffineSettingsCommands({
         icon: <SettingsIcon />,
         preconditionStrategy: () => currentLanguage?.tag !== language.tag,
         run() {
+          track.$.cmdk.settings.changeAppSetting({
+            key: 'language',
+            value: language.name,
+          });
+
           onLanguageChange(language.tag);
         },
       })
@@ -158,6 +192,10 @@ export function registerAffineSettingsCommands({
       icon: <SettingsIcon />,
       preconditionStrategy: () => environment.isDesktop,
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'clientBorder',
+          value: store.get(appSettingAtom).clientBorder ? 'off' : 'on',
+        });
         store.set(appSettingAtom, prev => ({
           ...prev,
           clientBorder: !prev.clientBorder,
@@ -178,6 +216,11 @@ export function registerAffineSettingsCommands({
       category: 'affine:settings',
       icon: <SettingsIcon />,
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'fullWidthLayout',
+          value: store.get(appSettingAtom).fullWidthLayout ? 'off' : 'on',
+        });
+
         store.set(appSettingAtom, prev => ({
           ...prev,
           fullWidthLayout: !prev.fullWidthLayout,
@@ -201,6 +244,11 @@ export function registerAffineSettingsCommands({
       icon: <SettingsIcon />,
       preconditionStrategy: () => environment.isDesktop,
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'enableNoisyBackground',
+          value: store.get(appSettingAtom).enableNoisyBackground ? 'off' : 'on',
+        });
+
         store.set(appSettingAtom, prev => ({
           ...prev,
           enableNoisyBackground: !prev.enableNoisyBackground,
@@ -222,6 +270,10 @@ export function registerAffineSettingsCommands({
       icon: <SettingsIcon />,
       preconditionStrategy: () => environment.isDesktop && environment.isMacOs,
       run() {
+        track.$.cmdk.settings.changeAppSetting({
+          key: 'enableBlurBackground',
+          value: store.get(appSettingAtom).enableBlurBackground ? 'off' : 'on',
+        });
         store.set(appSettingAtom, prev => ({
           ...prev,
           enableBlurBackground: !prev.enableBlurBackground,

packages/frontend/core/src/commands/affine-updates.tsx

@@ -5,6 +5,7 @@ import type { useI18n } from '@affine/i18n';
 import { ResetIcon } from '@blocksuite/icons/rc';
 import type { createStore } from 'jotai';
 
+import { track } from '../mixpanel';
 import { registerAffineCommand } from './registry';
 
 export function registerAffineUpdatesCommands({
@@ -24,6 +25,8 @@ export function registerAffineUpdatesCommands({
       label: t['com.affine.cmdk.affine.restart-to-upgrade'](),
       preconditionStrategy: () => !!store.get(updateReadyAtom),
       run() {
+        track.$.cmdk.updates.quitAndInstall();
+
         apis?.updater.quitAndInstall().catch(err => {
           notify.error({
             title: 'Failed to restart to upgrade',