smart bread crumbs can be given a navigation state

src/common/SmartBreadcrumb.tsx

@@ -12,7 +12,7 @@ import {
 } from "@mui/material";
 import { Replay } from "@mui/icons-material";
 import { useMobile } from "hooks";
-import { ReactNode, useEffect, useRef } from "react";
+import { ReactNode } from "react";
 import { useLocation } from "react-router";
 import { Link as RouterLink } from "react-router-dom";
 import { or } from "utils/types";
@@ -58,12 +58,13 @@ interface Props {
   paddingTop?: number;
   paddingBottom?: number;
   prependPaths?: string[];
-
+  state?: any;
 }
 
 interface LinkRouterProps extends LinkProps {
   to: string;
   replace?: boolean;
+  state?: any;
 }
 
 const LinkRouter = (props: LinkRouterProps) => <Link {...props} component={RouterLink as any} />;
@@ -74,7 +75,7 @@ export default function SmartBreadcrumb(props: Props) {
   const location = useLocation();
   const isMobile = useMobile();
   const classes = useStyles();
-  const { loading, reload } = props;
+  const { loading, reload, state } = props;
 
   const groupID = (): string => {
     let index = prependPaths?.indexOf("groups")
@@ -316,7 +317,7 @@ export default function SmartBreadcrumb(props: Props) {
         links.push(
           <Chip
             key={"support-chip"}
-            variant={"outlined"}
+            variant={"filled"}
             label={
               <Typography variant="subtitle1" color="textPrimary">
                 Support
@@ -341,6 +342,7 @@ export default function SmartBreadcrumb(props: Props) {
             color={lastPath ? "textPrimary" : "textSecondary"}
             variant="subtitle1"
             to={to}
+            state={state}
             sx={{ '&:hover': { color: getThemeType() === "dark" ? 'white' : "black" }}}
             className={classes.textOverflow}>
             {label}

src/common/StatusSen5x.tsx

@@ -176,12 +176,12 @@ export default function StatusPlenum(props: Props) {
           >
             <Grid2>
               <Typography variant="body2" style={{ color: blue[300]}}>
-                {device.status.sen5x?.voc.toFixed(1)}%
+                V: {device.status.sen5x?.voc.toFixed(1)}%
               </Typography>
             </Grid2>
             <Grid2>
               <Typography variant="body2" style={{ color: blue[400]}}>
-                {device.status.sen5x?.nox.toFixed(1)}%
+                N: {device.status.sen5x?.nox.toFixed(1)}%
               </Typography>
             </Grid2>
           </Grid2>

src/pages/Device.tsx

@@ -30,6 +30,7 @@ export default function DevicePage() {
   const groupID = useParams<{ groupID: string }>()?.groupID ?? "";
   const { state } = useLocation();
   const [{ as, team, user }] = useGlobalState()
+  // console.log(state)
   const [device, setDevice] = useState<Device>(state?.device ? Device.create(state.device) : Device.create())
   const [loading, setLoading] = useState(false)
   const [permissions, setPermissions] = useState<pond.Permission[]>([])
@@ -54,6 +55,11 @@ export default function DevicePage() {
   const loadDevice = () => {
     // console.log("load device page data")
     if (loading) return
+    console.log(state)
+    if (state?.device) {
+      console.log(Device.create(state.device))
+      return
+    }
     setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes(), as).then(resp => {
       let device = Device.any(resp.data.device)
@@ -418,7 +424,7 @@ export default function DevicePage() {
     <PageContainer padding={isMobile ? 0 : 2}>
       <Grid container justifyContent={"space-between"}>
         <Grid>
-          <SmartBreadcrumb />
+          <SmartBreadcrumb deviceName={device.name()} />
         </Grid>
         <Grid>
           <AddComponentManualDialog 

src/pages/DeviceSupport.tsx

@@ -134,7 +134,7 @@ export default function DeviceSupport() {
 
 	return (
 		<PageContainer>
-      <SmartBreadcrumb deviceName={device.name()} />
+      <SmartBreadcrumb deviceName={device.name()} state={{device: device}} />
 			<Tabs
 				style={{ position: "sticky" }}
 				value={tabNumber}