tags now render in devices list

src/pages/Devices.tsx

@@ -12,15 +12,15 @@ import { useMobile } from "hooks";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { getDeviceStateHelper } from "pbHelpers/DeviceState";
-import { Device, Group } from "models";
+import { Device, Group, Tag } from "models";
 import GroupSettings from "group/GroupSettings";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
 import GroupActions from "group/GroupActions";
 // import CircleGraphIcon from "common/CircleGraphIcon";
 import DevicesSummary from "device/DevicesSummary";
-import { GetDeviceProductIcon } from "products/DeviceProduct";
 import BindaptIcon from "products/Bindapt/BindaptIcon";
 import { describePower } from "pbHelpers/Power";
+import { Tag as TagUI } from "common/Tag";
 import moment from "moment";
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme: Theme) => {
       margin: theme.spacing(1),
       marginLeft: theme.spacing(2),
       display: "flex",
-      width: theme.spacing(32)
+      width: theme.spacing(26)
       // justifyContent: "center",
     },
     green: {
@@ -296,6 +296,20 @@ export default function Devices() {
           )
         }
       },
+      {
+        title: "Tags",
+        render: (device: Device) => {
+          return (
+            <Grid2 container spacing={1} className={classes.descriptionCellContainer}>
+              {device.status.tags.map((tag: pond.TagSettings) => (
+                <Grid2 key={"device-"+device.id()+"-tag-"+tag.key}>
+                  <TagUI tag={Tag.any({ settings: tag })} />
+                </Grid2>
+              ))}
+            </Grid2>
+          )
+        }
+      },
     ]
     if (hasPlenums) {
       columns.push({