chore: merged dev into show-connected-robots

ref: N25B-142

.githooks/commit-msg

@@ -0,0 +1,17 @@
+#!/bin/sh
+
+commit_msg_file=$1
+commit_msg=$(cat "$commit_msg_file")
+
+if echo "$commit_msg" | grep -Eq "^(feat|fix|refactor|perf|style|test|docs|build|chore|revert): .+"; then
+  if echo "$commit_msg" | grep -Eq "^(ref|close):\sN25B-.+"; then
+    echo "🎉 commit message is Valid"
+    exit 0
+  else
+    echo "❌ Commit message invalid! Must end with [ref/close]: N25B-000"
+    exit 1
+  fi
+else
+  echo "❌ Commit message invalid! Must start with <type>: <description>"
+  exit 1
+fi

.githooks/pre-commit

@@ -0,0 +1,18 @@
+#!/bin/sh
+
+# Get current branch
+branch=$(git rev-parse --abbrev-ref HEAD)
+
+if echo "$branch" | grep -Eq "(dev|main)"; then
+  echo 0
+fi
+
+# allowed pattern <type/>
+if echo "$branch" | grep -Eq "^(feat|fix|refactor|perf|style|test|docs|build|chore|revert)\/\w+(-\w+){0,5}$"; then
+  echo "✅ Branch name valid: $branch"
+  exit 0
+else
+  echo "❌ Invalid branch name: $branch"
+  echo "Branch must be named <type>/<description-of-branch> (must have one to six words separated by a dash)"
+  exit 1
+fi

.githooks/prepare-commit-msg

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+echo "#<type>: <description>
+
+#[optional body]
+
+#[optional footer(s)]
+
+#[ref/close]: <issue identifier>" > $1

README.md

@@ -27,3 +27,17 @@ npm run dev
 ```
 
 It should automatically reload when you save changes.
+
+## GitHooks
+
+To activate automatic commits/branch name checks run:
+
+```shell
+git config --local core.hooksPath .githooks
+```
+
+If your commit fails its either:
+branch name != <type>/description-of-branch
+commit name !=  <type>: description of the commit.
+                <ref>: N25B-Num's
+

src/App.css

@@ -1,12 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-
-
 .logopepper {
   height: 8em;
   padding: 1.5em;
@@ -92,61 +83,80 @@ button.movePage:hover{
 
 
 
+header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
 
+  padding: 1rem;
+
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  backdrop-filter: blur(10px);
+  z-index: 1; /* Otherwise any translated elements render above the blur?? */
+}
+
+main {
+  padding: 1rem 0;
+}
 
 .flex-row {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 .flex-col {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .flex-1 {
-    flex: 1;
+  flex: 1;
 }
 
 .flex-wrap {
-    flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .align-center {
-    align-items: center;
+  align-items: center;
 }
 .justify-center {
-    justify-content: center;
+  justify-content: center;
 }
 .justify-between {
-    justify-content: space-between;
+  justify-content: space-between;
 }
 
 .gap-sm {
-    gap: .25rem;
+  gap: .25rem;
 }
 .gap-md {
-    gap: .5rem;
+  gap: .5rem;
 }
 .gap-lg {
-    gap: 1rem;
+  gap: 1rem;
 }
 
 .padding-sm {
-    padding: .25rem;
+  padding: .25rem;
 }
 .padding-md {
-    padding: .5rem;
+  padding: .5rem;
 }
 .padding-lg {
-    padding: 1rem;
+  padding: 1rem;
 }
 
 .round-sm {
-    border-radius: .25rem;
+  border-radius: .25rem;
 }
 .round-md {
-    border-radius: .5rem;
+  border-radius: .5rem;
 }
 .round-lg {
-    border-radius: 1rem;
+  border-radius: 1rem;
 }

src/App.tsx

@@ -3,10 +3,7 @@ import { useState } from 'react'
 import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
-import ServerComms from './pages/ServerComms/ServerComms.tsx'
-import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
-import Logging from './pages/Logging/Logging.tsx'
-import VisProg from "./pages/VisProgPage/VisProg.tsx";
+import Robot from './pages/Robot/Robot.tsx';
 
 function App(){
 
@@ -22,25 +19,16 @@ function App(){
 
   return (
     <div>
-      {/* Should not use inline styles like this */}
-      <Link style={{position: "fixed", top: "1rem", left: "50%", translate: "-50%"}} to={"/"}>Home</Link>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/Template" element={<TemplatePage />} />
-        <Route path="/ServerComms" element = {<ServerComms />} />
-        <Route path="/visprog" element={<VisProg />} />
-        <Route path="/logging" element = {<Logging />} />
-        <Route
-          path="/ConnectedRobots"
-          // Pass the useState to the page to update from there
-          element={
-            <ConnectedRobots
-               connectedRobots={connectedRobots}
-               setConnectedRobots={setConnectedRobots}
-             />
-            }
-        />
-      </Routes>
+      <header>
+        <Link to={"/"}>Home</Link>
+      </header>
+      <main className={"flex-col align-center"}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/template" element={<TemplatePage />} />
+          <Route path="/robot" element={<Robot />} />
+        </Routes>
+      </main>
     </div>
   )
 }

src/components/components.tsx

@@ -1,14 +1,11 @@
-// src/components/Counter.tsx
 import { useState } from 'react'
-//import style from './Counter.module.css' // optional, if you want a CSS module for reset button
-import '../App.css'
 
 function Counter() {
   const [count, setCount] = useState(0)
 
   return (
     <div className="card">
-      <button onClick={() => setCount((count) => count + 3)}>
+      <button onClick={() => setCount((count) => count + 1)}>
         count is {count}
       </button>
       <button className='reset' onClick={() => setCount(0)}>

src/index.css

@@ -13,6 +13,16 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+html, body {
+  margin: 0;
+  padding: 0;
+
+  height: 100dvh;
+  width: 100dvw;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -22,14 +32,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
 h1 {
   font-size: 3.2em;
   line-height: 1.1;

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>
     </>
   )
 }

vite.config.ts

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  css: {
+    modules: {
+      localsConvention: "camelCase",
+    }
+  },
 })