Room list: add analytic events (#33625)

* chore: update analytics

* feat: add new analytics

apps/web/package.json

@@ -43,7 +43,7 @@
         "@fontsource/fira-code": "^5",
         "@fontsource/inter": "catalog:",
         "@formatjs/intl-segmenter": "^12.0.0",
-        "@matrix-org/analytics-events": "^0.33.0",
+        "@matrix-org/analytics-events": "^0.36.0",
         "@matrix-org/emojibase-bindings": "^1.5.0",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@sentry/browser": "^10.0.0",

apps/web/project.json

@@ -26,7 +26,7 @@
         },
         "start": {
             "command": "webpack-dev-server --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
-            "dependsOn": ["prebuild:module_system", "prebuild:rethemendex", "^start"],
+            "dependsOn": ["prebuild:module_system", "prebuild:rethemendex"],
             "continuous": true,
             "options": { "cwd": "apps/web" }
         },

apps/web/src/PosthogTrackers.ts

@@ -13,6 +13,8 @@ import { type Interaction as InteractionEvent } from "@matrix-org/analytics-even
 import { type PinUnpinAction } from "@matrix-org/analytics-events/types/typescript/PinUnpinAction";
 import { type RoomListSortingAlgorithmChanged } from "@matrix-org/analytics-events/types/typescript/RoomListSortingAlgorithmChanged";
 import { type UrlPreviewRendered } from "@matrix-org/analytics-events/types/typescript/UrlPreviewRendered";
+import { type SectionCreation } from "@matrix-org/analytics-events/types/typescript/SectionCreation";
+import { type ExpandCollapseSection } from "@matrix-org/analytics-events/types/typescript/ExpandCollapseSection";
 
 import PageType from "./PageTypes";
 import Views from "./Views";
@@ -164,6 +166,33 @@ export default class PosthogTrackers {
         });
         this.previewedEventIds.set(eventId, true);
     }
+
+    /**
+     * Track when the user creates a section in the room list.
+     * @param from The source from which the section creation was triggered.
+     */
+    public static trackSectionCreation(from: SectionCreation["from"]): void {
+        PosthogAnalytics.instance.trackEvent<SectionCreation>({
+            eventName: "SectionCreation",
+            from,
+        });
+    }
+
+    /**
+     * Track when the user collapses or expands a section in the room list.
+     * @param kind Is expand or collapse.
+     * @param from From where the action is triggered.
+     */
+    public static trackCollapseOrExpandSection(
+        kind: ExpandCollapseSection["kind"],
+        from: ExpandCollapseSection["from"],
+    ): void {
+        PosthogAnalytics.instance.trackEvent<ExpandCollapseSection>({
+            eventName: "ExpandCollapseSection",
+            kind,
+            from,
+        });
+    }
 }
 
 export class PosthogScreenTracker extends PureComponent<{ screenName: ScreenName }> {

apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts

@@ -207,6 +207,7 @@ export class RoomListHeaderViewModel
 
     public createSection = (): void => {
         RoomListStoreV3.instance.createSection();
+        PosthogTrackers.trackSectionCreation("RoomListHeader");
     };
 
     public collapseOrExpandSections = (): void => {
@@ -215,6 +216,9 @@ export class RoomListHeaderViewModel
                 ? Action.RoomListExpandAllSections
                 : Action.RoomListCollapseAllSections;
         defaultDispatcher.fire(action);
+
+        const kind = action === Action.RoomListExpandAllSections ? "Expand" : "Collapse";
+        PosthogTrackers.trackCollapseOrExpandSection(kind, "RoomListHeader");
     };
 
     private readonly onDispatch = (payload: { action: string }): void => {

apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts

@@ -403,6 +403,8 @@ export class RoomListItemViewModel
 
     public onCreateSection = async (): Promise<void> => {
         const newTag = await RoomListStoreV3.instance.createSection();
+        PosthogTrackers.trackSectionCreation("RoomListItemOverflowMenu");
+
         // Add the room to the section
         if (newTag) {
             tagRoom(this.props.room, newTag);

apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts

@@ -18,6 +18,7 @@ import { type RoomNotificationState } from "../../stores/notifications/RoomNotif
 import SettingsStore from "../../settings/SettingsStore";
 import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
 import { getCustomSectionData, isCustomSectionTag, isDefaultSectionTag } from "../../stores/room-list-v3/section";
+import PosthogTrackers from "../../PosthogTrackers";
 
 interface RoomListSectionHeaderViewModelProps {
     tag: string;
@@ -80,6 +81,9 @@ export class RoomListSectionHeaderViewModel
     public set isExpanded(value: boolean) {
         this.expandedBySpace.set(this.props.spaceId, value);
         this.snapshot.merge({ isExpanded: value });
+
+        const kind = value ? "Expand" : "Collapse";
+        PosthogTrackers.trackCollapseOrExpandSection(kind, "SectionHeader");
     }
 
     /**
@@ -153,5 +157,7 @@ export class RoomListSectionHeaderViewModel
         // There is one notification state per room in the section
         const isEmpty = this.roomNotificationStates.size === 0;
         await RoomListStoreV3.instance.removeSection(this.props.tag, isEmpty);
+
+        PosthogTrackers.trackInteraction("WebDeleteSection");
     };
 }

apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts

@@ -29,6 +29,8 @@ import PosthogTrackers from "../../../src/PosthogTrackers";
 
 jest.mock("../../../src/PosthogTrackers", () => ({
     trackInteraction: jest.fn(),
+    trackSectionCreation: jest.fn(),
+    trackCollapseOrExpandSection: jest.fn(),
 }));
 
 jest.mock("../../../src/utils/space", () => ({

pnpm-lock.yaml

@@ -353,8 +353,8 @@ importers:
         specifier: ^12.0.0
         version: 12.2.8
       '@matrix-org/analytics-events':
-        specifier: ^0.33.0
+        specifier: ^0.36.0
-        version: 0.33.2
+        version: 0.36.0
       '@matrix-org/emojibase-bindings':
         specifier: ^1.5.0
         version: 1.5.0
@@ -3209,8 +3209,8 @@ packages:
   '@maplibre/vt-pbf@4.3.0':
     resolution: {integrity: sha512-jIvp8F5hQCcreqOOpEt42TJMUlsrEcpf/kI1T2v85YrQRV6PPXUcEXUg5karKtH6oh47XJZ4kHu56pUkOuqA7w==}
 
-  '@matrix-org/analytics-events@0.33.2':
+  '@matrix-org/analytics-events@0.36.0':
-    resolution: {integrity: sha512-tkEpKa6m5FicrP2ftuVX+Ln/CQfQASFJ0HUoJE9ZbqJhtcmLADd9tn9UhWUP3dzZgafkTZnFIg5FUshLvuj8vQ==}
+    resolution: {integrity: sha512-eJKdDdBnL/FJuH8j/PswjiTv3AHVipzBjEE3K53JR9NUAoPWb+ckInKL7xP+J11KrOskoVFgONWzYa4QKoYHdQ==}
 
   '@matrix-org/emojibase-bindings@1.5.0':
     resolution: {integrity: sha512-+W9/ow2Z3iQa7ZOF698PBhwNcgGkn36B5Sr8VDPx8N8CH7+Uw+7TrtbtKPZVdgf4m/THmgmfX40jS5YDBsLaYg==}
@@ -16012,7 +16012,7 @@ snapshots:
       pbf: 4.0.1
       supercluster: 8.0.1
 
-  '@matrix-org/analytics-events@0.33.2': {}
+  '@matrix-org/analytics-events@0.36.0': {}
 
   '@matrix-org/emojibase-bindings@1.5.0':
     dependencies: