feat: initial setup of change request notification indicator (#8606)

This PR adds the initial bit of code required to set up the change
request indicator, but it's not functional yet: I've hardcoded the value
0 for now, which also hides the notifications.

This PR also hides the previous project change request overview.


![image](https://github.com/user-attachments/assets/afbd7f37-d47f-41f2-b653-7584acdc2cde)

![image](https://github.com/user-attachments/assets/a662e359-3052-4031-9d09-5e4bf2566445)

I'll make a follow-up to the API when it's ready to hook it up.

frontend/src/component/project/Project/Project.tsx

@@ -45,6 +45,8 @@ import { ProjectInsights } from './ProjectInsights/ProjectInsights';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { ProjectArchived } from './ArchiveProject/ProjectArchived';
 import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker';
+import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
@@ -64,6 +66,47 @@ interface ITab {
     isEnterprise?: boolean;
 }
 
+const CircleContainer = styled('div')(({ theme }) => ({
+    position: 'absolute',
+    width: theme.spacing(2.5),
+    height: theme.spacing(2.5),
+    display: 'grid',
+    placeItems: 'center',
+    borderRadius: '50%',
+
+    background: theme.palette.background.alternative,
+    color: theme.palette.primary.contrastText,
+    fontSize: theme.typography.body2.fontSize,
+
+    // todo: revisit these values later
+    top: 10,
+    right: 0,
+    [theme.breakpoints.down('md')]: {
+        top: 2,
+    },
+}));
+
+const ActionableChangeRequestsIndicator = () => {
+    // todo: useSWR for this instead (maybe conditional)
+    const count = 0;
+
+    if (count <= 0) {
+        return null;
+    }
+
+    const renderedCount = count > 9 ? '9+' : count;
+
+    return (
+        <CircleContainer>
+            <ScreenReaderOnly>You can move</ScreenReaderOnly>
+            {renderedCount}
+            <ScreenReaderOnly>
+                change requests into their next phase.
+            </ScreenReaderOnly>
+        </CircleContainer>
+    );
+};
+
 export const Project = () => {
     const projectId = useRequiredPathParam('projectId');
     const { trackEvent } = usePlausibleTracker();
@@ -78,6 +121,9 @@ export const Project = () => {
     const basePath = `/projects/${projectId}`;
     const projectName = project?.name || projectId;
     const { favorite, unfavorite } = useFavoriteProjectsApi();
+    const useActionableChangeRequestIndicator = useUiFlag(
+        'simplifyProjectOverview',
+    );
 
     const [showDelDialog, setShowDelDialog] = useState(false);
 
@@ -281,6 +327,11 @@ export const Project = () => {
                                                     </span>
                                                 }
                                             />
+                                            {useActionableChangeRequestIndicator &&
+                                                tab.name ===
+                                                    'change-request' && (
+                                                    <ActionableChangeRequestsIndicator />
+                                                )}
                                             {(tab.isEnterprise &&
                                                 isPro() &&
                                                 enterpriseIcon) ||

frontend/src/component/project/Project/ProjectFlags.tsx

@@ -51,10 +51,14 @@ const ProjectOverview: FC = () => {
         setLastViewed(projectId);
     }, [projectId, setLastViewed]);
 
+    const hideChangeRequestOverview = useUiFlag('simplifyProjectOverview');
+
     return (
         <StyledContainer key={projectId}>
             <StyledContentContainer>
+                {hideChangeRequestOverview ? null : (
                     <ProjectOverviewChangeRequests project={projectId} />
+                )}
                 <ConditionallyRender
                     condition={outdatedSdksBannerEnabled}
                     show={<OutdatedSdksBanner project={projectId} />}