Room list: add analytic events (#33625)

* chore: update analytics

* feat: add new analytics

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");
     };
 }