Befor fixing linting problem

pkgs/ui/src/app/join/page.tsx

@@ -1,5 +0,0 @@
-import JoinPrequel from "@/views/joinPrequel";
-
-export default function Page() {
-  return <JoinPrequel />;
-}

pkgs/ui/src/app/layout.tsx

@@ -3,11 +3,10 @@ import { Sidebar } from "@/components/sidebar";
 import { tw } from "@/utils/tailwind";
 import MenuIcon from "@mui/icons-material/Menu";
 import {
-  Button,
   CssBaseline,
   IconButton,
   ThemeProvider,
-  useMediaQuery,
+  useMediaQuery
 } from "@mui/material";
 import { StyledEngineProvider } from "@mui/material/styles";
 import axios from "axios";
@@ -62,9 +61,7 @@ export default function RootLayout({
               <AppContext.Consumer>
                 {(appState) => {
                   const showSidebarDerived = Boolean(
-                    showSidebar &&
-                      !appState.isLoading &&
-                      appState.data.isJoined,
+                    showSidebar && !appState.isLoading,
                   );
                   return (
                     <>
@@ -86,9 +83,7 @@ export default function RootLayout({
                                   hidden={true}
                                   onClick={() => setShowSidebar((c) => !c)}
                                 >
-                                  {!showSidebar && appState.data.isJoined && (
-                                    <MenuIcon />
-                                  )}
+                                  {!showSidebar && <MenuIcon />}
                                 </IconButton>
                               </div>
                               <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
@@ -105,21 +100,7 @@ export default function RootLayout({
 
                           <div className="px-1">
                             <div className="relative flex h-full flex-1 flex-col">
-                              <main>
-                                <Button
-                                  fullWidth
-                                  onClick={() => {
-                                    appState.setAppState((s) => ({
-                                      ...s,
-                                      isJoined: !s.isJoined,
-                                    }));
-                                  }}
-                                >
-                                  Toggle Joined
-                                </Button>
-
-                                {children}
-                              </main>
+                              <main>{children}</main>
                             </div>
                           </div>
                         </div>

pkgs/ui/src/app/machines/add/page.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import { CreateMachineForm } from "@/components/createMachineForm";
-
-export default function CreateMachine() {
-  return <CreateMachineForm />;
-}

pkgs/ui/src/app/machines/edit/[name]/page.tsx

@@ -1,10 +0,0 @@
-interface DeviceEditProps {
-  params: { name: string };
-}
-
-export default function EditDevice(props: DeviceEditProps) {
-  const {
-    params: { name },
-  } = props;
-  return <div>{name}</div>;
-}

pkgs/ui/src/app/machines/layout.tsx

@@ -1,5 +0,0 @@
-import { MachineContextProvider } from "@/components/hooks/useMachines";
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <MachineContextProvider>{children}</MachineContextProvider>;
-}

pkgs/ui/src/app/machines/page.tsx

@@ -1,12 +0,0 @@
-"use client";
-
-import { NodeTable } from "@/components/table";
-import { StrictMode } from "react";
-
-export default function Page() {
-  return (
-    <StrictMode>
-      <NodeTable />
-    </StrictMode>
-  );
-}

pkgs/ui/src/app/page.tsx

@@ -1,41 +1,10 @@
 "use client";
-import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
 import { RecentActivity } from "@/components/dashboard/activity";
-import { AppOverview } from "@/components/dashboard/appOverview";
-import { Notifications } from "@/components/dashboard/notifications";
-import { QuickActions } from "@/components/dashboard/quickActions";
-import { TaskQueue } from "@/components/dashboard/taskQueue";
 import { useAppState } from "@/components/hooks/useAppContext";
 import { LoadingOverlay } from "@/components/join/loadingOverlay";
-import JoinPrequel from "@/views/joinPrequel";
-
-// interface DashboardCardProps {
-//   children?: React.ReactNode;
-//   rowSpan?: number;
-//   sx?: string;
-// }
-// const DashboardCard = (props: DashboardCardProps) => {
-//   const { children, rowSpan, sx = "" } = props;
-//   return (
-//     // <div className={tw`col-span-full row-span-${rowSpan} 2xl:col-span-1 ${sx}`}>
-//     <div className={tw`row-span-2`}>
-//       {children}
-//     </div>
-//   );
-// };
-
-// interface DashboardPanelProps {
-//   children?: React.ReactNode;
-// }
-// const DashboardPanel = (props: DashboardPanelProps) => {
-//   const { children } = props;
-//   return (
-//     <div className="col-span-full row-span-1 2xl:col-span-2">{children}</div>
-//   );
-// };
 
 export default function Dashboard() {
-  const { data, isLoading } = useAppState();
+  const { isLoading } = useAppState();
   if (isLoading) {
     return (
       <div className="grid h-full place-items-center">
@@ -48,26 +17,13 @@ export default function Dashboard() {
         </div>
       </div>
     );
-  }
-  if (!data.isJoined) {
-    return <JoinPrequel />;
-  }
-  if (data.isJoined) {
+  } else {
     return (
       <div className="flex w-full">
         <div className="grid w-full grid-flow-row grid-cols-3 gap-4">
-          <div className="row-span-2">
-            <NetworkOverview />
-          </div>
-          <div className="col-span-2">
-            <AppOverview />
-          </div>
           <div className="row-span-2">
             <RecentActivity />
           </div>
-          <QuickActions />
-          <Notifications />
-          <TaskQueue />
         </div>
       </div>
     );

pkgs/ui/src/app/templates/[id]/page.tsx

@@ -1,174 +0,0 @@
-"use client";
-
-import {
-  Attachment,
-  ChevronLeft,
-  Delete,
-  Edit,
-  Group,
-  Key,
-  Settings,
-  SettingsEthernet,
-} from "@mui/icons-material";
-import {
-  Avatar,
-  Button,
-  IconButton,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemSecondaryAction,
-  ListItemText,
-  ListSubheader,
-  Menu,
-  MenuItem,
-  Typography,
-} from "@mui/material";
-import { useState } from "react";
-// import { useListMachines } from "@/api/default/default";
-
-export async function generateStaticParams() {
-  return [{ id: "1" }, { id: "2" }];
-}
-
-function getTemplate(params: { id: string }) {
-  // const res = await fetch(`https://.../posts/${params.id}`);
-  return {
-    short: `My Template ${params.id}`,
-  };
-}
-
-interface TemplateDetailProps {
-  params: { id: string };
-}
-export default function TemplateDetail({ params }: TemplateDetailProps) {
-  // const { data, isLoading } = useListMachines();
-  const details = getTemplate(params);
-
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <div className="flex w-full flex-col items-center justify-center">
-      <div className="w-full">
-        <Button
-          color="secondary"
-          LinkComponent={"a"}
-          href="/templates"
-          startIcon={<ChevronLeft />}
-        >
-          Back
-        </Button>
-      </div>
-      <div className="h-full w-full border border-solid border-neutral-90 bg-neutral-98 shadow-sm shadow-neutral-60 dark:bg-paper-dark">
-        <div className="flex w-full flex-col items-center justify-center xl:p-2">
-          <Avatar className="m-1 h-20 w-20 bg-purple-40">
-            <Typography variant="h5">N</Typography>
-          </Avatar>
-          <Typography variant="h6" className="text-purple-40">
-            {details.short}
-          </Typography>
-          <div className="w-full">
-            <List
-              className="xl:px-4"
-              sx={{
-                ".MuiListSubheader-root": {
-                  px: 0,
-                },
-                ".MuiListItem-root": {
-                  px: 0,
-                },
-              }}
-            >
-              <ListSubheader>
-                <Typography variant="caption">Details</Typography>
-              </ListSubheader>
-              <ListItem>
-                <ListItemAvatar>
-                  <SettingsEthernet />
-                </ListItemAvatar>
-                <ListItemText primary="network" secondary="10.9.20.2" />
-              </ListItem>
-              <ListItem>
-                <ListItemAvatar>
-                  <Key />
-                </ListItemAvatar>
-                <ListItemText primary="secrets" secondary={"< ...hidden >"} />
-              </ListItem>
-              <ListItem>
-                <ListItemAvatar>
-                  <Group />
-                </ListItemAvatar>
-                <ListItemText primary="clans" secondary={"Boss clan.lol"} />
-              </ListItem>
-              <ListItem>
-                <ListItemAvatar>
-                  <Attachment />
-                </ListItemAvatar>
-                <ListItemText
-                  primary="Image"
-                  secondary={"/nix/store/12789-image-clan-lol"}
-                />
-                <ListItemSecondaryAction>
-                  <IconButton onClick={handleClick}>
-                    <Settings />
-                  </IconButton>
-                  <Menu
-                    MenuListProps={{
-                      className: "m-2",
-                    }}
-                    id="image-menu"
-                    aria-labelledby="image-menu"
-                    anchorEl={anchorEl}
-                    open={open}
-                    onClose={handleClose}
-                    anchorOrigin={{
-                      vertical: "top",
-                      horizontal: "left",
-                    }}
-                    transformOrigin={{
-                      vertical: "top",
-                      horizontal: "left",
-                    }}
-                  >
-                    <MenuItem>View</MenuItem>
-                    <MenuItem>Rebuild</MenuItem>
-                    <MenuItem>Delete</MenuItem>
-                  </Menu>
-                </ListItemSecondaryAction>
-              </ListItem>
-              <ListItem>
-                <ListItemAvatar>
-                  <Group />
-                </ListItemAvatar>
-                <ListItemText
-                  primary="nodes"
-                  secondary={"Dad's PC; Mum; Olaf; ... 3 more"}
-                />
-              </ListItem>
-            </List>
-          </div>
-        </div>
-        <div className="mt-2 flex w-full justify-evenly">
-          <Button
-            variant="text"
-            className="w-full text-black dark:text-white"
-            startIcon={<Edit />}
-          >
-            Edit
-          </Button>
-          <Button className="w-full text-red" startIcon={<Delete />}>
-            Delete
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

pkgs/ui/src/app/templates/page.tsx

@@ -1,61 +0,0 @@
-import { ChevronRight } from "@mui/icons-material";
-import {
-  Avatar,
-  Divider,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemButton,
-  ListItemSecondaryAction,
-  ListItemText,
-  Typography,
-} from "@mui/material";
-
-const templates = [
-  {
-    id: "1",
-    name: "Office Preset",
-    date: "12 May 2050",
-  },
-  {
-    id: "2",
-    name: "Work",
-    date: "30 Feb 2020",
-  },
-  {
-    id: "3",
-    name: "Family",
-    date: "1 Okt 2022",
-  },
-  {
-    id: "4",
-    name: "Standard",
-    date: "24 Jul 2021",
-  },
-];
-
-export default function ImageOverview() {
-  return (
-    <div className="flex flex-col items-center justify-center">
-      <Typography variant="h4">Templates</Typography>
-      <List className="w-full gap-y-4">
-        {templates.map(({ id, name, date }, idx, all) => (
-          <>
-            <ListItem key={id}>
-              <ListItemButton LinkComponent={"a"} href={`/templates/${id}`}>
-                <ListItemAvatar>
-                  <Avatar className="bg-purple-40">{name.slice(0, 1)}</Avatar>
-                </ListItemAvatar>
-                <ListItemText primary={name} secondary={date} />
-                <ListItemSecondaryAction>
-                  <ChevronRight />
-                </ListItemSecondaryAction>
-              </ListItemButton>
-            </ListItem>
-            {idx < all.length - 1 && <Divider flexItem className="mx-10" />}
-          </>
-        ))}
-      </List>
-    </div>
-  );
-}