✨ Add BreadcrumbsBox for navigation (closes #70)

frontend/src/App.tsx

@@ -23,6 +23,7 @@ import {NotebookRouter} from "./components/notebook/NotebookRouter"
 import {ProjectCreateBox} from "./components/project/ProjectCreateBox"
 import {ProjectListBox} from "./components/project/ProjectListBox"
 import {ProjectRouter} from "./components/project/ProjectRouter"
+import {BreadcrumbsBox} from "./components/routing/BreadcrumbsBox"
 import {ThemedBluelib} from "./components/theme/ThemedBluelib"
 import {ThemedTitle} from "./components/theme/ThemedTitle"
 import {AuthorizationProvider} from "./contexts/authorization"
@@ -41,6 +42,7 @@ function App({..._}: RouteComponentProps) {
                 <LayoutThreeCol.Center>
                     <ThemedTitle level={1}/>
                     <ErrorCatcherBox>
+                        <BreadcrumbsBox/>
                         <Chapter>
                             <SophonDescriptionBox/>
                         </Chapter>

frontend/src/components/elements/Link.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
 import * as Reach from "@reach/router"
-import {Anchor, BringAttention as B} from "@steffo/bluelib-react";
+import {Anchor, BringAttention as B} from "@steffo/bluelib-react"
-import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor";
+import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor"
+import * as React from "react"
 
 
 /**
@@ -18,19 +18,21 @@ export function Link({href, children, onClick, ...props}: AnchorProps): JSX.Elem
             if (onClick) {
                 onClick(event)
             }
-            if (href) {
+            if(href) {
                 // noinspection JSIgnoredPromiseFromCall
                 Reach.navigate(href)
             }
         },
-        [href, onClick]
+        [href, onClick],
     )
 
-    if (location.pathname === href) {
+    // FIXME: Shenanigans?
+    if(location.pathname.replace("%25", "%") === href) {
         return (
             <B children={children} {...props}/>
         )
-    } else {
+    }
+    else {
         return (
             <Anchor href={href} children={children} onClick={onClickWrapped} {...props}/>
         )

frontend/src/components/routing/BreadcrumbLink.tsx

@@ -0,0 +1,22 @@
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
+import * as React from "react"
+import {IconText} from "../elements/IconText"
+import {Link} from "../elements/Link"
+
+
+export interface BreadcrumbLinkProps {
+    href: string,
+    icon: IconDefinition,
+    text: string,
+}
+
+
+export function BreadcrumbLink({href, icon, text}: BreadcrumbLinkProps): JSX.Element {
+    return (
+        <Link href={href}>
+            <IconText icon={icon}>
+                {text}
+            </IconText>
+        </Link>
+    )
+}

frontend/src/components/routing/BreadcrumbSeparator.tsx

@@ -0,0 +1,12 @@
+import {faChevronRight} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import * as React from "react"
+
+
+export function BreadcrumbSeparator(): JSX.Element {
+    return <>
+        &nbsp;
+        <FontAwesomeIcon icon={faChevronRight}/>
+        &nbsp;
+    </>
+}

frontend/src/components/routing/BreadcrumbsBox.tsx

@@ -0,0 +1,72 @@
+import {faBook, faProjectDiagram, faServer, faUniversity, faUser, faUsers} from "@fortawesome/free-solid-svg-icons"
+import {Box} from "@steffo/bluelib-react"
+import * as React from "react"
+import {useSophonPath} from "../../hooks/useSophonPath"
+import {InstanceEncoder} from "../../utils/InstanceEncoder"
+import {BreadcrumbLink} from "./BreadcrumbLink"
+import {BreadcrumbSeparator} from "./BreadcrumbSeparator"
+
+
+export function BreadcrumbsBox(): JSX.Element {
+    const location = useSophonPath()
+
+    return (
+        <Box>
+            <BreadcrumbLink
+                href={"/"}
+                icon={faServer}
+                text={"Sophon"}
+            />
+            {location.instance ? (
+                <>
+                    <BreadcrumbSeparator/>
+                    <BreadcrumbLink
+                        href={`/i/${location.instance}/`}
+                        icon={faUniversity}
+                        text={InstanceEncoder.decode(location.instance).toString()}
+                    />
+                    {location.loggedIn ? (
+                        <>
+                            <BreadcrumbSeparator/>
+                            <BreadcrumbLink
+                                href={`/i/${location.instance}/l/logged-in/`}
+                                icon={faUser}
+                                text={"Logged in"}
+                            />
+                            {location.researchGroup ? (
+                                <>
+                                    <BreadcrumbSeparator/>
+                                    <BreadcrumbLink
+                                        href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/`}
+                                        icon={faUsers}
+                                        text={location.researchGroup}
+                                    />
+                                    {location.researchProject ? (
+                                        <>
+                                            <BreadcrumbSeparator/>
+                                            <BreadcrumbLink
+                                                href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/p/${location.researchProject}/`}
+                                                icon={faProjectDiagram}
+                                                text={location.researchProject}
+                                            />
+                                            {location.notebook ? (
+                                                <>
+                                                    <BreadcrumbSeparator/>
+                                                    <BreadcrumbLink
+                                                        href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/p/${location.researchProject}/n/${location.notebook}/`}
+                                                        icon={faBook}
+                                                        text={location.notebook}
+                                                    />
+                                                </>
+                                            ) : null}
+                                        </>
+                                    ) : null}
+                                </>
+                            ) : null}
+                        </>
+                    ) : null}
+                </>
+            ) : null}
+        </Box>
+    )
+}