prepare for select clan from history

pkgs/ui/src/app/layout.tsx

@@ -17,8 +17,7 @@ import { Toaster } from "react-hot-toast";
 import "./globals.css";
 import { darkTheme, lightTheme } from "./theme/themes";
 
-import Background from "@/components/background";
+import { WithAppState } from "@/components/hooks/useAppContext";
-import { AppContext, WithAppState } from "@/components/hooks/useAppContext";
 
 const roboto = localFont({
   src: [
@@ -58,61 +57,47 @@ export default function RootLayout({
             <CssBaseline />
             <Toaster />
             <WithAppState>
-              <AppContext.Consumer>
+              <div className="flex h-screen overflow-hidden bg-neutral-95">
-                {(appState) => {
+                <ThemeProvider theme={darkTheme}>
-                  const showSidebarDerived = Boolean(
+                  <Sidebar
-                    showSidebar && !appState.isLoading && appState.data.isJoined
+                    show={showSidebar}
-                  );
+                    onClose={() => setShowSidebar(false)}
-                  return (
+                  />
-                    <>
+                </ThemeProvider>
-                      <Background />
+                <div
-                      <div className="flex h-screen overflow-hidden bg-neutral-95">
+                  className={tw`${
-                        <ThemeProvider theme={darkTheme}>
+                    !showSidebar && translate
-                          <Sidebar
+                  } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
-                            show={showSidebarDerived}
+                >
-                            onClose={() => setShowSidebar(false)}
+                  <div className="static top-0 mb-2 py-2">
-                          />
+                    <div className="grid grid-cols-3">
-                        </ThemeProvider>
+                      <div className="col-span-1">
-                        <div
+                        <IconButton
-                          className={tw`${
+                          hidden={showSidebar}
-                            !showSidebarDerived && translate
+                          onClick={() => setShowSidebar((c) => !c)}
-                          } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
                         >
-                          <div className="static top-0 mb-2 py-2">
+                          {!showSidebar && <MenuIcon />}
-                            <div className="grid grid-cols-3">
+                        </IconButton>
-                              <div className="col-span-1">
-                                <IconButton
-                                  hidden={true}
-                                  onClick={() => setShowSidebar((c) => !c)}
-                                >
-                                  {!showSidebar && appState.data.isJoined && (
-                                    <MenuIcon />
-                                  )}
-                                </IconButton>
-                              </div>
-                              <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
-                                <Image
-                                  src="/favicon.png"
-                                  alt="Clan Logo"
-                                  width={58}
-                                  height={58}
-                                  priority
-                                />
-                              </div>
-                            </div>
-                          </div>
-
-                          <div className="px-1">
-                            <div className="relative flex h-full flex-1 flex-col">
-                              <main>{children}</main>
-                            </div>
-                          </div>
-                        </div>
                       </div>
-                    </>
+                      <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
-                  );
+                        <Image
-                }}
+                          src="/favicon.png"
-              </AppContext.Consumer>
+                          alt="Clan Logo"
+                          width={58}
+                          height={58}
+                          priority
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="px-1">
+                    <div className="relative flex h-full flex-1 flex-col">
+                      <main>{children}</main>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </WithAppState>
           </body>
         </ThemeProvider>

pkgs/ui/src/app/page.tsx

@@ -1,75 +1,27 @@
-"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();
+  return (
-  if (isLoading) {
+    <div className="flex w-full">
-    return (
+      <div className="grid w-full grid-flow-row grid-cols-3 gap-4">
-      <div className="grid h-full place-items-center">
+        <div className="row-span-2">
-        <div className="mt-8 w-full max-w-xl">
+          <NetworkOverview />
-          <LoadingOverlay
-            title="Clan Experience"
-            subtitle="Loading"
-            variant="circle"
-          />
         </div>
-      </div>
+        <div className="col-span-2">
-    );
+          <AppOverview />
-  }
-  if (!data.isJoined) {
-    return <JoinPrequel />;
-  }
-  if (data.isJoined) {
-    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 className="row-span-2">
+          <RecentActivity />
+        </div>
+        <QuickActions />
+        <Notifications />
+        <TaskQueue />
       </div>
-    );
+    </div>
-  }
+  );
 }

pkgs/ui/src/components/background.tsx

@@ -3,18 +3,15 @@ import {
   default as clanDark,
   default as clanLight,
 } from "../../public/clan-dark.png";
-import { useAppState } from "./hooks/useAppContext";
 
 export default function Background() {
-  const { data, isLoading } = useAppState();
-
   return (
     <div
       className={
-        "fixed -z-10 h-[100vh] w-[100vw] overflow-hidden opacity-10 blur-md dark:opacity-40"
+        "fixed top-0 h-[100vh] w-[100vw] overflow-hidden opacity-10 blur-md dark:opacity-40"
       }
     >
-      {(isLoading || !data.isJoined) && (
+      {
         <>
           <Image
             className="dark:hidden"
@@ -41,7 +38,7 @@ export default function Background() {
             }}
           />
         </>
-      )}
+      }
     </div>
   );
 }

pkgs/ui/src/components/sidebar/index.tsx

@@ -11,18 +11,18 @@ import Image from "next/image";
 import { ReactNode } from "react";
 
 import { tw } from "@/utils/tailwind";
-import AppsIcon from "@mui/icons-material/Apps";
 import BackupIcon from "@mui/icons-material/Backup";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import DashboardIcon from "@mui/icons-material/Dashboard";
 import DevicesIcon from "@mui/icons-material/Devices";
+import WorkspacesIcon from "@mui/icons-material/Workspaces";
 import Link from "next/link";
 
 type MenuEntry = {
   icon: ReactNode;
   label: string;
   to: string;
-  disabled: boolean;
+  disabled?: boolean;
 } & {
   subMenuEntries?: MenuEntry[];
 };
@@ -32,19 +32,16 @@ const menuEntries: MenuEntry[] = [
     icon: <DashboardIcon />,
     label: "Dashoard",
     to: "/",
-    disabled: false,
   },
   {
     icon: <DevicesIcon />,
     label: "Machines",
     to: "/machines",
-    disabled: false,
   },
   {
-    icon: <AppsIcon />,
+    icon: <WorkspacesIcon />,
-    label: "Applications",
+    label: "Manage",
-    to: "/applications",
+    to: "/join",
-    disabled: true,
   },
   {
     icon: <BackupIcon />,