✨ Create NotebookDescriptionBox

frontend/src/App.tsx

@@ -17,6 +17,7 @@ import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionB
 import {InstanceFormBox} from "./components/instance/InstanceFormBox"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
 import {NotebookCreateBox} from "./components/notebook/NotebookCreateBox"
+import {NotebookDescriptionBox} from "./components/notebook/NotebookDescriptionBox"
 import {NotebookListBox} from "./components/notebook/NotebookListBox"
 import {NotebookRouter} from "./components/notebook/NotebookRouter"
 import {DebugBox} from "./components/placeholder/DebugBox"
@@ -81,6 +82,7 @@ function App({..._}: RouteComponentProps) {
                                                                     </>}
                                                                     selectedRoute={({selection}) => <>
                                                                         <NotebookProvider resource={selection}>
+                                                                            <NotebookDescriptionBox/>
                                                                             <NotebookCreateBox resource={selection}/>
                                                                             <DebugBox {...selection}/>
                                                                         </NotebookProvider>

frontend/src/components/notebook/NotebookDescriptionBox.tsx

@@ -0,0 +1,45 @@
+import {faBook} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {Box, BringAttention as B, Code, Heading, Idiomatic as I} from "@steffo/bluelib-react"
+import * as React from "react"
+import {useCacheContext} from "../../contexts/cache"
+import {useNotebookContext} from "../../contexts/notebook"
+
+
+export function NotebookDescriptionBox(): JSX.Element | null {
+    const cache = useCacheContext()
+    const notebook = useNotebookContext()
+
+    if(notebook) {
+        var locked_by = cache?.getUserById(notebook.value.locked_by)?.value.username
+    }
+
+    const locked_text =
+        React.useMemo(
+            () => {
+                if(!locked_by) {
+                    return null
+                }
+
+                return (
+                    <>, currently <B>locked by {locked_by}</B></>
+                )
+            },
+            [locked_by],
+        )
+
+    if(!notebook) {
+        return null
+    }
+
+    return (
+        <Box>
+            <Heading level={3}>
+                <FontAwesomeIcon icon={faBook}/>&nbsp;About <I>{notebook.value.name}</I>
+            </Heading>
+            <p>
+                A <B>{notebook.value.is_running ? "running" : "stopped"}</B> notebook using <B><Code>{notebook.value.container_image}</Code></B>{locked_text}.
+            </p>
+        </Box>
+    )
+}