From 54a0f68c9cdb52a9751ef623d796de66b47db942 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 6 Aug 2025 12:47:03 +0100
Subject: [PATCH] chore: add project-list-view-toggle Plausible event (#10468)

https://linear.app/unleash/issue/2-3754/add-plausible-event-project-list-view-toggle-with-view

Adds a `project-list-view-toggle` Plausible event with a `view` prop so
we can track if and how the new toggle is used.
---
 .../ProjectsListViewToggle.tsx                      | 13 ++++++++++++-
 frontend/src/hooks/usePlausibleTracker.ts           |  3 ++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/project/ProjectList/ProjectsListViewToggle/ProjectsListViewToggle.tsx b/frontend/src/component/project/ProjectList/ProjectsListViewToggle/ProjectsListViewToggle.tsx
index 09ffbeab52..768701f00b 100644
--- a/frontend/src/component/project/ProjectList/ProjectsListViewToggle/ProjectsListViewToggle.tsx
+++ b/frontend/src/component/project/ProjectList/ProjectsListViewToggle/ProjectsListViewToggle.tsx
@@ -2,6 +2,7 @@ import { IconButton, Tooltip } from '@mui/material';
 import type { ProjectsListView } from '../hooks/useProjectsListState.js';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
 import GridViewIcon from '@mui/icons-material/GridView';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker.js';
 
 type ProjectsListViewToggleProps = {
     view: ProjectsListView;
@@ -12,11 +13,21 @@ export const ProjectsListViewToggle = ({
     view,
     setView,
 }: ProjectsListViewToggleProps) => {
+    const { trackEvent } = usePlausibleTracker();
     const nextView = view === 'list' ? 'cards' : 'list';
 
+    const onSetView = (newView: ProjectsListView) => {
+        setView(newView);
+        trackEvent('project-list-view-toggle', {
+            props: {
+                view: newView,
+            },
+        });
+    };
+
     return (
         <Tooltip title={`Switch to ${nextView} view`} arrow>
-            <IconButton size='small' onClick={() => setView(nextView)}>
+            <IconButton size='small' onClick={() => onSetView(nextView)}>
                 {nextView === 'list' ? (
                     <FormatListBulletedIcon />
                 ) : (
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index ba796e3dec..6293ef8220 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -74,7 +74,8 @@ export type CustomEvents =
     | 'project-navigation'
     | 'productivity-report'
     | 'release-management'
-    | 'feature-links';
+    | 'feature-links'
+    | 'project-list-view-toggle';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);