✨ Create NotebookListBox and NotebookResourcePanel and NotebookRouter

frontend/src/App.tsx

@@ -10,6 +10,8 @@ import {GroupListBox} from "./components/group/GroupListBox"
 import {GroupRouter} from "./components/group/GroupRouter"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
 import {InstanceStepPage} from "./components/instance/InstanceStepPage"
+import {NotebookListBox} from "./components/notebook/NotebookListBox"
+import {NotebookRouter} from "./components/notebook/NotebookRouter"
 import {DebugBox} from "./components/placeholder/DebugBox"
 import {ProjectListBox} from "./components/project/ProjectListBox"
 import {ProjectRouter} from "./components/project/ProjectRouter"
@@ -40,12 +42,18 @@ function App({}: RouteComponentProps) {
                                         <ProjectRouter
                                             groupPk={props.selection.value.slug}
                                             unselectedRoute={(props) => <ProjectListBox viewSet={props.viewSet}/>}
+                                            selectedRoute={(props) => <>
+                                                <NotebookRouter
+                                                    projectPk={props.selection.value.slug}
+                                                    unselectedRoute={(props) => <NotebookListBox viewSet={props.viewSet}/>}
                                                     selectedRoute={DebugBox}
                                                 />
                                             </>}
                                         />
                                     </>}
                                 />
+                            </>}
+                        />
                     </AuthorizationProvider>
                 </>}
             />

frontend/src/components/notebook/NotebookListBox.tsx

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

frontend/src/components/notebook/NotebookResourcePanel.tsx

@@ -0,0 +1,35 @@
+import {faBook} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import * as React from "react"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {SophonNotebook} from "../../types/SophonTypes"
+import {Link} from "../elements/Link"
+import {ResourcePanel} from "../elements/ResourcePanel"
+
+
+export interface NotebookResourcePanelProps {
+    resource: ManagedResource<SophonNotebook>,
+}
+
+
+export function NotebookResourcePanel({resource}: NotebookResourcePanelProps): JSX.Element {
+
+    return (
+        <ResourcePanel>
+            <ResourcePanel.Icon>
+                <FontAwesomeIcon icon={faBook}/>
+            </ResourcePanel.Icon>
+            <ResourcePanel.Name>
+                <Link href={`n/${resource.value.slug}/`}>
+                    {resource.value.name}
+                </Link>
+            </ResourcePanel.Name>
+            <ResourcePanel.Text>
+
+            </ResourcePanel.Text>
+            <ResourcePanel.Buttons>
+
+            </ResourcePanel.Buttons>
+        </ResourcePanel>
+    )
+}

frontend/src/components/notebook/NotebookRouter.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import {useManagedViewSet} from "../../hooks/useManagedViewSet"
+import {Dict} from "../../types/ExtraTypes"
+import {SophonResearchProject} from "../../types/SophonTypes"
+import {ViewSetRouter} from "../routing/ViewSetRouter"
+
+
+export interface ProjectRouterProps {
+    projectPk: string,
+    unselectedRoute: (props: Dict<any>) => JSX.Element | null,
+    selectedRoute: (props: Dict<any>) => JSX.Element | null,
+}
+
+
+export function NotebookRouter({projectPk, ...props}: ProjectRouterProps): JSX.Element {
+    return (
+        <ViewSetRouter
+            {...props}
+            viewSet={useManagedViewSet<SophonResearchProject>(`/api/notebooks/by-project/${projectPk}`, "slug")}
+            pathSegment={"notebook"}
+            pkKey={"slug"}
+        />
+    )
+}