✨ Create ProjectListBox and ProjectResourcePanel

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import {GroupRouter} from "./components/group/GroupRouter"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
 import {InstanceStepPage} from "./components/instance/InstanceStepPage"
 import {DebugBox} from "./components/placeholder/DebugBox"
+import {ProjectListBox} from "./components/project/ProjectListBox"
 import {ProjectRouter} from "./components/project/ProjectRouter"
 import {ThemedBluelib} from "./components/theme/ThemedBluelib"
 import {ThemedTitle} from "./components/theme/ThemedTitle"
@@ -38,7 +39,7 @@ function App({}: RouteComponentProps) {
                                     selectedRoute={(props) => <>
                                         <ProjectRouter
                                             groupPk={props.selection.value.slug}
-                                            unselectedRoute={DebugBox}
+                                            unselectedRoute={(props) => <ProjectListBox viewSet={props.viewSet}/>}
                                             selectedRoute={DebugBox}
                                         />
                                     </>}

frontend/src/components/project/ProjectListBox.tsx

@@ -0,0 +1,24 @@
+import {Box, Heading} from "@steffo/bluelib-react"
+import * as React from "react"
+import {ManagedViewSet} from "../../hooks/useManagedViewSet"
+import {SophonResearchProject} from "../../types/SophonTypes"
+import {ProjectResourcePanel} from "./ProjectResourcePanel"
+
+
+export interface ProjectListBoxProps {
+    viewSet: ManagedViewSet<SophonResearchProject>
+}
+
+
+export function ProjectListBox({viewSet}: ProjectListBoxProps): JSX.Element {
+    // TODO: Add some flavour text
+
+    return (
+        <Box>
+            <Heading level={3}>
+                Research projects
+            </Heading>
+            {viewSet.resources?.map(res => <ProjectResourcePanel resource={res} key={res.value.slug}/>)}
+        </Box>
+    )
+}

frontend/src/components/project/ProjectResourcePanel.tsx

@@ -0,0 +1,41 @@
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
+import {faGlobe, faLock, faUniversity} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import * as React from "react"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {SophonResearchProject} from "../../types/SophonTypes"
+import {Link} from "../elements/Link"
+import {ResourcePanel} from "../elements/ResourcePanel"
+
+
+export interface ProjectResourcePanelProps {
+    resource: ManagedResource<SophonResearchProject>,
+}
+
+
+export function ProjectResourcePanel({resource}: ProjectResourcePanelProps): JSX.Element {
+    const icon: IconDefinition = {
+        "PUBLIC": faGlobe,
+        "INTERNAL": faUniversity,
+        "PRIVATE": faLock,
+    }[resource.value.visibility]
+
+    return (
+        <ResourcePanel>
+            <ResourcePanel.Icon>
+                <FontAwesomeIcon icon={icon}/>
+            </ResourcePanel.Icon>
+            <ResourcePanel.Name>
+                <Link href={`p/${resource.value.slug}/`}>
+                    {resource.value.name}
+                </Link>
+            </ResourcePanel.Name>
+            <ResourcePanel.Text>
+
+            </ResourcePanel.Text>
+            <ResourcePanel.Buttons>
+
+            </ResourcePanel.Buttons>
+        </ResourcePanel>
+    )
+}

frontend/src/components/project/ProjectRouter.tsx

@@ -17,7 +17,7 @@ export function ProjectRouter({groupPk, ...props}: ProjectRouterProps): JSX.Elem
         <ViewSetRouter
             {...props}
             viewSet={useManagedViewSet<SophonResearchProject>(`/api/projects/by-group/${groupPk}`, "slug")}
-            pathSegment={"researchGroup"}
+            pathSegment={"researchProject"}
             pkKey={"slug"}
         />
     )