Use <main> instead of <div> in BoardMainTaskGroups

todoblue/src/app/board/[board]/BoardMain.tsx

@@ -0,0 +1,22 @@
+import {BoardMainTaskGroups} from "@/app/board/[board]/BoardMainTaskGroups"
+import {BoardMainIcon} from "@/app/board/[board]/BoardMainIcon"
+import {useBoardContext} from "@/app/board/[board]/useBoardContext"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {faGear, faArrowsSpin, faExclamationCircle} from "@fortawesome/free-solid-svg-icons"
+
+
+export function BoardMain() {
+	const {websocketState} = useBoardContext()
+
+	switch(websocketState) {
+		case undefined:
+			return <BoardMainIcon icon={<FontAwesomeIcon icon={faGear} spin/>} text={"Caricamento..."}/>
+		case WebSocket.CONNECTING:
+			return <BoardMainIcon icon={<FontAwesomeIcon icon={faArrowsSpin} spin/>} text={"Connessione..."}/>
+		case WebSocket.OPEN:
+			return <BoardMainTaskGroups/>
+		case WebSocket.CLOSING:
+		case WebSocket.CLOSED:
+			return <BoardMainIcon icon={<FontAwesomeIcon icon={faExclamationCircle}/>} text={"Errore"} className={"red"}/>
+	}
+}

todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx

@@ -6,8 +6,8 @@ export function BoardMainTaskGroups() {
 	const {taskGroups} = useBoardContext()
 
 	return (
-		<div className={"chapter-5"}>
+		<main className={"chapter-5"}>
 			{taskGroups.map((tg) => <TaskGroupColumn taskGroup={tg}/>)}
-		</div>
+		</main>
 	)
 }