feat: style home page + unique tab labels + launch link from home + A…

README.md

@@ -1,4 +1,4 @@
-# ROS2 Offline Dashboard
+# CPRT WebUI
 
 A web dashboard for monitoring and interacting with your ROS2-powered rover. This dashboard integrates various panels—including a map view, telemetry, video stream, node manager, waypoint list, and more—using a Mosaic layout for a flexible, modular experience.
 

src/app/dashboard/MosaicDashboardClient.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const MosaicDashboard = dynamic(
+  () => import("@/components/panels/MosaicDashboard"),
+  { ssr: false }
+);
+
+export default function MosaicDashboardClient() {
+  return <MosaicDashboard />;
+}

src/app/dashboard/page.tsx

@@ -1,16 +1,16 @@
-"use client";
-
-import dynamic from 'next/dynamic';
 import Layout from '@/components/Layout';
+import type { Metadata } from "next";
+import MosaicDashboardClient from "./MosaicDashboardClient";
 
-const MosaicDashboard = dynamic(() => import('@/components/panels/MosaicDashboard'), { ssr: false });
+export const metadata: Metadata = {
+  title: "Dashboard - CPRT webUI",
+  description: "Carleton Planetary Robotics Team's ROS2 Web Interface",
+};
 
-const Dashboard = () => {
+export default function Dashboard() {
   return (
     <Layout>
-      <MosaicDashboard />
+      <MosaicDashboardClient />
     </Layout>
   );
-};
-
-export default Dashboard;
+}

src/app/launch/ContainerListClient.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const ContainerList = dynamic(
+  () => import("@/components/ContainerList"),
+  { ssr: false }
+);
+
+export default function ContainerListClient() {
+  return <ContainerList />;
+}

src/app/launch/page.tsx

@@ -1,15 +1,17 @@
-'use client';
-
 import Layout from "../../components/Layout";
+import type { Metadata } from "next";
 import { Toaster } from "react-hot-toast";
-import dynamic from 'next/dynamic';
+import ContainerListClient from "./ContainerListClient";
 
-const ContainerListPage = dynamic(() => import("../../components/ContainerList"), { ssr: false });
+export const metadata: Metadata = {
+  title: "Launch - CPRT webUI",
+  description: "Carleton Planetary Robotics Team's ROS2 Web Interface",
+};
 
 export default function Launch() {
   return (
     <Layout>
-      <ContainerListPage/>
+      <ContainerListClient/>
       <Toaster />
     </Layout>
   );

src/app/layout.tsx

@@ -17,7 +17,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "BOB ROS2",
+  title: "CPRT webUI",
   description: "Carleton Planetary Robotics Team's ROS2 Web Interface",
 };
 

src/app/page.tsx

@@ -116,38 +116,107 @@ const HomePage = () => {
   return (
     <Layout>
       <div className="home">
-        {names.map((name, idx) => (
-          <a key={name} href={"/dashboard?layout=" + encodeURIComponent(JSON.stringify(layouts[idx]))} style={{ borderColor: colors[idx] }}>{name}</a>
-        ))}
+        <div className="preset-section">
+          <h1>Dashboard Presets</h1>
+
+          <div className="preset-links">
+            {names.map((name, idx) => (
+              <a
+                key={name}
+                href={"/dashboard?layout=" + encodeURIComponent(JSON.stringify(layouts[idx]))}
+                style={{
+                  borderColor: colors[idx],
+                  '--hover-color': colors[idx],
+                } as React.CSSProperties}
+              >
+                {name}
+              </a>
+            ))}
+          </div>
+        </div>
+
+        <div className="tool-section">
+          <h1>Tools</h1>
+
+          <a href="/launch" >
+            Launch
+          </a>
+          <a href="http://192.168.0.2">
+            Base Station AP
+          </a>
+          <a href="http://192.168.0.3">
+            Rover AP
+          </a>
+        </div>
       </div>
-      <style jsx >{`
+
+      <style jsx>{`
         .home {
           display: flex;
+          flex-direction: column;
           justify-content: center;
           align-items: center;
           height: 100%;
           font-weight: bold;
         }
 
+        .preset-section,
+        .tool-section {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .preset-links {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+        }
+
+        h1 {
+          color: #222;
+          margin: 10px;
+          text-align: center;
+        }
+
+        /* Dashboard preset boxes */
         .home a {
           height: 100px;
           width: 100px;
           margin: 10px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
           text-align: center;
-          align-content: center;
           border-radius: 5px;
           border: 5px solid #fff;
           background: #222;
+          color: #fff;
+          transition: background 0.2s, color 0.2s;
         }
 
         .home a:hover {
           background: #000;
-          color: #fff;
+          color: var(--hover-color);
+          text-decoration: none;
+        }
+
+        .tool-section a {
+          height: 70px;
+          width: 220px;
+          border-radius: 8px;
+          border: 5px solid #b6b6b6;
+        }
+
+        .tool-section a:hover {
+          background: #000;
+          color: #b6b6b6;
           text-decoration: none;
         }
       `}</style>
     </Layout>
   );
 };
 
-export default HomePage;
+export default HomePage;

src/components/Layout.tsx

@@ -13,7 +13,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     <div className="pageContainer">
       <header className="header">
         <div className="header-left">
-          <a href="/"><h1 className="title">ROS2 Offline Dashboard</h1></a>
+          <a href="/"><h1 className="title">CPRT webUI</h1></a>
         </div>
         <div className="header-center">
           <ConnectionStatusDisplay />