From fa99caf00a690c2cbc7bd9728edff83bf5fbea14 Mon Sep 17 00:00:00 2001
From: Connor Needham <129120300+ConnorNeed@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:23:24 +0000
Subject: [PATCH] feat: style home page + unique tab labels + launch link from
 home + AP links from home

---
 README.md                                   |  2 +-
 src/app/dashboard/MosaicDashboardClient.tsx | 12 +++
 src/app/dashboard/page.tsx                  | 18 ++---
 src/app/launch/ContainerListClient.tsx      | 12 +++
 src/app/launch/page.tsx                     | 12 +--
 src/app/layout.tsx                          |  2 +-
 src/app/page.tsx                            | 83 +++++++++++++++++++--
 src/components/Layout.tsx                   |  2 +-
 8 files changed, 119 insertions(+), 24 deletions(-)
 create mode 100644 src/app/dashboard/MosaicDashboardClient.tsx
 create mode 100644 src/app/launch/ContainerListClient.tsx

diff --git a/README.md b/README.md
index 612c71c..b88c086 100644
--- a/README.md
+++ b/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.
 
diff --git a/src/app/dashboard/MosaicDashboardClient.tsx b/src/app/dashboard/MosaicDashboardClient.tsx
new file mode 100644
index 0000000..f48e3a0
--- /dev/null
+++ b/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 />;
+}
\ No newline at end of file
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index c92830f..aec256e 100644
--- a/src/app/dashboard/page.tsx
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/launch/ContainerListClient.tsx b/src/app/launch/ContainerListClient.tsx
new file mode 100644
index 0000000..386258c
--- /dev/null
+++ b/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 />;
+}
\ No newline at end of file
diff --git a/src/app/launch/page.tsx b/src/app/launch/page.tsx
index 6d238bc..e4848cc 100644
--- a/src/app/launch/page.tsx
+++ b/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>
   );
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a9f2f92..1c803b9 100644
--- a/src/app/layout.tsx
+++ b/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",
 };
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d226165..e36b401 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -116,33 +116,102 @@ 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>
@@ -150,4 +219,4 @@ const HomePage = () => {
   );
 };
 
-export default HomePage;
+export default HomePage;
\ No newline at end of file
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 34b5584..c7ae316 100644
--- a/src/components/Layout.tsx
+++ b/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 />