chore: stub out project resources for status model (#8631)

This PR begins to stub out the project resources widget. I still need
one more piece of data and then to work on the styling, but it's a
placeholder for now. I've also moved the project status modal to its own
folder so we can group the widgets etc. I'd like to get that merged
quickly to avoid any future conflicts, which is why I'm making the PR
ready now.

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

@@ -56,7 +56,7 @@ import { ProjectArchived } from './ArchiveProject/ProjectArchived';
 import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { useActionableChangeRequests } from 'hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests';
-import { ProjectStatusModal } from './ProjectStatusModal';
+import { ProjectStatusModal } from './ProjectStatus/ProjectStatusModal';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',

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

@@ -0,0 +1,45 @@
+import { styled } from '@mui/material';
+import { useProjectApiTokens } from 'hooks/api/getters/useProjectApiTokens/useProjectApiTokens';
+import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { useMemo } from 'react';
+
+const Wrapper = styled('article')(({ theme }) => ({
+    backgroundColor: theme.palette.envAccordion.expanded,
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadiusExtraLarge,
+}));
+
+const ProjectResourcesInner = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+}));
+
+export const ProjectResources = () => {
+    const projectId = useRequiredPathParam('projectId');
+    const { project, loading: loadingProject } = useProjectOverview(projectId);
+    const { tokens, loading: loadingTokens } = useProjectApiTokens(projectId);
+    const { segments, loading: loadingSegments } = useSegments();
+    // todo: add sdk connections
+
+    const segmentCount = useMemo(
+        () =>
+            segments?.filter((segment) => segment.project === projectId)
+                .length ?? 0,
+        [segments, projectId],
+    );
+
+    return (
+        <Wrapper>
+            <ProjectResourcesInner>
+                <h3>Project Resources</h3>
+                <span>{project.members} project member(s)</span>
+                <span>{tokens.length} API key(s)</span>
+                <span>1 SDK connection(s)</span>
+                <span>{segmentCount} project segment(s)</span>
+            </ProjectResourcesInner>
+        </Wrapper>
+    );
+};

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

@@ -1,9 +1,9 @@
 import { styled } from '@mui/material';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+import { ProjectResources } from './ProjectResources';
 
 const ModalContentContainer = styled('div')(({ theme }) => ({
     minHeight: '100vh',
-    display: 'flex',
     backgroundColor: theme.palette.background.default,
 }));
 
@@ -15,7 +15,9 @@ type Props = {
 export const ProjectStatusModal = ({ open, close }: Props) => {
     return (
         <SidebarModal open={open} onClose={close} label='Project status'>
-            <ModalContentContainer />
+            <ModalContentContainer>
+                <ProjectResources />
+            </ModalContentContainer>
         </SidebarModal>
     );
 };