chore(editor): add telemetry track to display mode of note (#10192)

Close [BS-2468](https://linear.app/affine-design/issue/BS-2468/analytics-for-page-block-polish)

blocksuite/affine/shared/src/services/telemetry-service/note.ts

@@ -0,0 +1,10 @@
+import type { TelemetryEvent } from './types.js';
+
+export type NoteEventType = 'NoteDisplayModeChanged';
+
+export type NoteEvents = {
+  NoteDisplayModeChanged: TelemetryEvent & {
+    control: 'display mode';
+    type: 'note';
+  };
+};

blocksuite/affine/shared/src/services/telemetry-service/telemetry-service.ts

@@ -2,6 +2,7 @@ import { createIdentifier } from '@blocksuite/global/di';
 
 import type { OutDatabaseAllEvents } from './database.js';
 import type { LinkToolbarEvents } from './link.js';
+import type { NoteEvents } from './note.js';
 import type {
   AttachmentUploadedEvent,
   DocCreatedEvent,
@@ -13,7 +14,8 @@ import type {
 } from './types.js';
 
 export type TelemetryEventMap = OutDatabaseAllEvents &
-  LinkToolbarEvents & {
+  LinkToolbarEvents &
+  NoteEvents & {
     DocCreated: DocCreatedEvent;
     Link: TelemetryEvent;
     LinkedDocCreated: LinkedDocCreatedEvent;

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts

@@ -27,6 +27,7 @@ import {
   FeatureFlagService,
   NotificationProvider,
   SidebarExtensionIdentifier,
+  TelemetryProvider,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import {
@@ -190,6 +191,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
   }
 
   private _setDisplayMode(note: NoteBlockModel, newMode: NoteDisplayMode) {
+    const oldMode = note.displayMode;
     this.edgeless.std.command.exec(changeNoteDisplayMode, {
       noteId: note.id,
       mode: newMode,
@@ -263,6 +265,17 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
         clear();
       },
     });
+
+    this.edgeless.std
+      .getOptional(TelemetryProvider)
+      ?.track('NoteDisplayModeChanged', {
+        page: 'whiteboard editor',
+        segment: 'element toolbar',
+        module: 'element toolbar',
+        control: 'display mode',
+        type: 'note',
+        other: `from ${oldMode} to ${newMode}`,
+      });
   }
 
   private _setShadowType(shadowType: string) {