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.

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 />
                 ) : (

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