chore: merged dev into show-connected-robots

ref: N25B-142

src/pages/Home/Home.module.css

@@ -1,12 +1,24 @@
 .read_the_docs {
   color: #888;
 }
+
 .card {
   padding: 2em;
 }
 
 .links {
-    display: flex;
-    flex-direction: column;
-    gap: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: center;
+}
+
+.gap-xl {
+  gap: 2rem;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 }

src/pages/Home/Home.tsx

@@ -4,19 +4,17 @@ import styles from './Home.module.css'
 
 function Home() {
   return (
-    <>
+    <div className={`flex-col ${styles.gapXl}`}>
       <div className="logoPepperScaling">
         <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
           <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
         </a>
       </div>
       <div className={styles.links}>
-        <Link to={"/ServerComms"}>Robot interaction →</Link>
-        <Link to={"/visprog"}>Node editor →</Link>
-        <Link to={"/logging"}>Logs →</Link>
-        <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
+        <Link to={"/robot"}>Robot Interaction →</Link>
+        <Link to={"/template"}>Template →</Link>
       </div>
-    </>
+    </div>
   )
 }
 

src/pages/Robot/Robot.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 
-export default function ServerComms() {
+export default function Robot() {
   const [message, setMessage] = useState('');
 
   const [listening, setListening] = useState(false);
@@ -29,12 +29,12 @@ export default function ServerComms() {
 
     eventSource.onmessage = (event) => {
       try {
-          const data = JSON.parse(event.data);
-          if ("voice_active" in data) setListening(data.voice_active);
-          if ("speech" in data) setConversation(conversation => [...conversation, {"role": "user", "content": data.speech}]);
-          if ("llm_response" in data) setConversation(conversation => [...conversation, {"role": "assistant", "content": data.llm_response}]);
+        const data = JSON.parse(event.data);
+        if ("voice_active" in data) setListening(data.voice_active);
+        if ("speech" in data) setConversation(conversation => [...conversation, {"role": "user", "content": data.speech}]);
+        if ("llm_response" in data) setConversation(conversation => [...conversation, {"role": "assistant", "content": data.llm_response}]);
       } catch {
-          console.log("Unparsable SSE message:", event.data);
+        console.log("Unparsable SSE message:", event.data);
       }
     };
 
@@ -49,7 +49,7 @@ export default function ServerComms() {
   }, [conversation]);
 
   return (
-    <div>
+    <>
       <h1>Robot interaction</h1>
       <h2>Force robot speech</h2>
       <div className={"flex-row gap-md justify-center"}>
@@ -62,17 +62,17 @@ export default function ServerComms() {
         />
         <button onClick={sendMessage}>Speak</button>
       </div>
-      <div className={"flex-col gap-lg"}>
+      <div className={"flex-col gap-lg align-center"}>
         <h2>Conversation</h2>
         <p>Listening {listening ? "🟢" : "🔴"}</p>
         <div style={{ maxHeight: "200px", maxWidth: "600px", overflowY: "auto"}} ref={conversationRef}>
-          {conversation.map((item) => (
-            <p
+          {conversation.map((item, i) => (
+            <p key={i}
               style={{
-                  backgroundColor: item["role"] == "user"
-                      ? "color-mix(in oklab, canvas, blue 20%)"
-                      : "color-mix(in oklab, canvas, gray 20%)",
-                  whiteSpace: "pre-line",
+                backgroundColor: item["role"] == "user"
+                  ? "color-mix(in oklab, canvas, blue 20%)"
+                  : "color-mix(in oklab, canvas, gray 20%)",
+                whiteSpace: "pre-line",
               }}
               className={"round-md padding-md"}
             >{item["content"]}</p>
@@ -80,15 +80,15 @@ export default function ServerComms() {
         </div>
         <div className={"flex-row gap-md justify-center"}>
           <button onClick={() => {
-              setConversationIndex((conversationIndex) => conversationIndex + 1)
-              setConversation([])
+            setConversationIndex((conversationIndex) => conversationIndex + 1)
+            setConversation([])
           }}>Reset</button>
           <button onClick={() => {
-              setConversationIndex((conversationIndex) => conversationIndex == -1 ? 0 : -1)
-              setConversation([])
+            setConversationIndex((conversationIndex) => conversationIndex == -1 ? 0 : -1)
+            setConversation([])
           }}>{conversationIndex == -1 ? "Start" : "Stop"}</button>
         </div>
       </div>
-    </div>
+    </>
   );
 }

src/pages/TemplatePage/Template.module.css

@@ -1,4 +0,0 @@
-button.reset:hover {
-  background-color: yellow;
-}
-

src/pages/TemplatePage/Template.tsx

@@ -1,23 +1,9 @@
-import { useState } from 'react'
-import { Link } from 'react-router'
 import Counter from '../../components/components.tsx'
-//import style from './Template.module.css'
-import '../../App.css'
-
-//this is your css file where you can style your buttons and such
-//you can still use css parts from App.css, but also overwrite them
 
 function TemplatePage() {
-  
-
   return (
     <>
       <Counter />
-      <Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
-        <button className= 'movePage left' onClick={() :void => {}}>
-          Page {'<'}-- Go Home
-        </button>
-      </Link>
     </>
   )
 }