UI: Improved table for mobile

pkgs/ui/src/components/table/nodeRow.tsx

@@ -12,54 +12,56 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 
 import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2
-import { Collapse } from "@mui/material";
+import { Collapse, useMediaQuery, useTheme } from "@mui/material";
 
 import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData";
 
+function renderStatus(status: NodeStatusKeys) {
+  switch (status) {
+    case NodeStatus.Online:
+      return (
+        <Stack direction="row" alignItems="center" gap={1}>
+          <CircleIcon color="success" style={{ fontSize: 15 }} />
+          <Typography component="div" align="left" variant="body1">
+            Online
+          </Typography>
+        </Stack>
+      );
+
+    case NodeStatus.Offline:
+      return (
+        <Stack direction="row" alignItems="center" gap={1}>
+          <CircleIcon color="error" style={{ fontSize: 15 }} />
+          <Typography component="div" align="left" variant="body1">
+            Offline
+          </Typography>
+        </Stack>
+      );
+    case NodeStatus.Pending:
+      return (
+        <Stack direction="row" alignItems="center" gap={1}>
+          <CircleIcon color="warning" style={{ fontSize: 15 }} />
+          <Typography component="div" align="left" variant="body1">
+            Pending
+          </Typography>
+        </Stack>
+      );
+  }
+}
 export function NodeRow(props: {
   row: TableData;
   selected: string | undefined;
   setSelected: (a: string | undefined) => void;
 }) {
-  function renderStatus(status: NodeStatusKeys) {
-    switch (status) {
-      case NodeStatus.Online:
-        return (
-          <Stack direction="row" alignItems="center" gap={1}>
-            <CircleIcon color="success" style={{ fontSize: 15 }} />
-            <Typography component="div" align="left" variant="body1">
-              Online
-            </Typography>
-          </Stack>
-        );
-
-      case NodeStatus.Offline:
-        return (
-          <Stack direction="row" alignItems="center" gap={1}>
-            <CircleIcon color="error" style={{ fontSize: 15 }} />
-            <Typography component="div" align="left" variant="body1">
-              Offline
-            </Typography>
-          </Stack>
-        );
-      case NodeStatus.Pending:
-        return (
-          <Stack direction="row" alignItems="center" gap={1}>
-            <CircleIcon color="warning" style={{ fontSize: 15 }} />
-            <Typography component="div" align="left" variant="body1">
-              Pending
-            </Typography>
-          </Stack>
-        );
-    }
-  }
+  const theme = useTheme();
+  const is_phone = useMediaQuery(theme.breakpoints.down("md"));
 
   const { row, selected, setSelected } = props;
   const [open, setOpen] = React.useState(false);
   //const labelId = `enhanced-table-checkbox-${index}`;
 
   // Speed optimization. We compare string pointers here instead of the string content.
-  const isSelected = selected == row.id;
+  const isSelected = selected == row.name;
 
   const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
     if (isSelected) {
@@ -93,20 +95,12 @@ export function NodeRow(props: {
         <TableCell
           component="th"
           scope="row"
-          onClick={(event) => handleClick(event, row.id)}
+          onClick={(event) => handleClick(event, row.name)}
         >
           <Stack>
             <Typography component="div" align="left" variant="body1">
               {row.name}
             </Typography>
-            <Typography
-              color="grey"
-              component="div"
-              align="left"
-              variant="body2"
-            >
-              {row.id}
-            </Typography>
           </Stack>
         </TableCell>
         <TableCell
@@ -120,7 +114,8 @@ export function NodeRow(props: {
           onClick={(event) => handleClick(event, row.name)}
         >
           <Typography component="div" align="left" variant="body1">
-            {row.last_seen} days ago
+            {String(row.last_seen).padStart(3, "0")}{" "}
+            {is_phone ? "days" : "days ago"}
           </Typography>
         </TableCell>
       </TableRow>

pkgs/ui/src/components/table/nodeTableContainer.tsx

@@ -14,6 +14,8 @@ import { NodeRow } from "./nodeRow";
 
 import { TableData } from "@/data/nodeData";
 
+import { useMediaQuery, useTheme } from "@mui/material";
+
 interface HeadCell {
   disablePadding: boolean;
   id: keyof TableData;
@@ -146,6 +148,9 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
   const [order, setOrder] = React.useState<NodeOrder>("asc");
   const [orderBy, setOrderBy] = React.useState<keyof TableData>("status");
 
+  const theme = useTheme();
+  const is_phone = useMediaQuery(theme.breakpoints.down("sm"));
+
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - tableData.length) : 0;
@@ -169,11 +174,7 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
   );
   return (
     <TableContainer>
-      <Table
-        sx={{ minWidth: 750 }}
-        aria-labelledby="tableTitle"
-        size={dense ? "small" : "medium"}
-      >
+      <Table aria-labelledby="tableTitle" size={dense ? "small" : "medium"}>
         <EnhancedTableHead
           order={order}
           orderBy={orderBy}
@@ -184,7 +185,7 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
           {visibleRows.map((row, index) => {
             return (
               <NodeRow
-                key={row.id}
+                key={row.name}
                 row={row}
                 selected={selected}
                 setSelected={setSelected}

pkgs/ui/src/components/table/searchBar.tsx

@@ -35,7 +35,7 @@ export function SearchBar(props: SearchBarProps) {
   let { tableData, setFilteredList } = props;
   const [search, setSearch] = useState<string>("");
   const debouncedSearch = useDebounce(search, 250);
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
 
   // Define a function to handle the Esc key press
   function handleEsc(event: React.KeyboardEvent<HTMLDivElement>) {