Refactor BoardManager and other things

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

@@ -1,4 +0,0 @@
-import {UseBoardReturns} from "@/app/board/[board]/useBoard"
-import {createContext, useContext} from "react"
-
-export const BoardContext = createContext<UseBoardReturns | null>(null);

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

@@ -1,12 +1,12 @@
 import style from "./BoardHeader.module.css"
-import {useBoardContext} from "@/app/board/[board]/useBoardContext"
+import {useManagedBoard} from "@/app/board/[board]/BoardManager"
 import {faArrowDownWideShort, faHouse, faPencil, faTableColumns} from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import cn from "classnames"
 
 
 export function BoardHeader() {
-	const {title, isEditingTitle, editTitle, setEditTitle, toggleEditingTitle, nextGrouper, nextSorter, websocketState} = useBoardContext();
+	const {title, isEditingTitle, editTitle, setEditTitle, toggleEditingTitle, nextGrouper, nextSorter, websocketState} = useManagedBoard();
 
 	const isReady = websocketState === WebSocket.OPEN
 

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

@@ -1,12 +1,12 @@
 import {BoardMainTaskGroups} from "@/app/board/[board]/BoardMainTaskGroups"
 import {BoardMainIcon} from "@/app/board/[board]/BoardMainIcon"
-import {useBoardContext} from "@/app/board/[board]/useBoardContext"
+import {useManagedBoard} from "@/app/board/[board]/BoardManager"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import {faGear, faArrowsSpin, faExclamationCircle} from "@fortawesome/free-solid-svg-icons"
 
 
 export function BoardMain() {
-	const {websocketState} = useBoardContext()
+	const {websocketState} = useManagedBoard()
 
 	switch(websocketState) {
 		case undefined:

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

@@ -1,10 +1,10 @@
 import {TaskGroupColumn} from "@/app/board/[board]/TaskGroupColumn"
-import {useBoardContext} from "@/app/board/[board]/useBoardContext"
+import {useManagedBoard} from "@/app/board/[board]/BoardManager"
 import style from "./BoardMainTaskGroups.module.css"
 
 
 export function BoardMainTaskGroups() {
-	const {taskGroups} = useBoardContext()
+	const {taskGroups} = useManagedBoard()
 
 	return (
 		<main className={style.boardMainTaskGroups}>

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

@@ -1,8 +1,19 @@
-import {BoardContext} from "@/app/board/[board]/BoardContext"
-import {useBoard} from "@/app/board/[board]/useBoard"
-import {ReactNode} from "react"
+import {useBoard, UseBoardReturns} from "@/app/board/[board]/useBoard"
+import {createContext, ReactNode, useContext} from "react"
 
 
+/**
+ * **Context** where {@link UseBoardReturns} are stored in.
+ */
+const BoardContext = createContext<UseBoardReturns | null>(null);
+
+/**
+ * **Component** handling everything displayed in a board's page and allowing children to access it via {@link useManagedBoard}.
+ *
+ * @param name The name of the board to connect to.
+ * @param children The nodes to which provide access to {@link useManagedBoard}.
+ * @constructor
+ */
 export function BoardManager({name, children}: {name: string, children: ReactNode}) {
 	const context = useBoard(name);
 
@@ -12,3 +23,17 @@ export function BoardManager({name, children}: {name: string, children: ReactNod
 		</BoardContext.Provider>
 	)
 }
+
+/**
+ * **Hook** allowing components to access values managed by {@link useBoard}.
+ */
+export function useManagedBoard(): UseBoardReturns {
+	const context = useContext(BoardContext);
+
+	if(context === null) {
+		console.error("[useBoardManager] Was used outside of a BoardContext!")
+		throw Error()
+	}
+
+	return context
+}

todoblue/src/app/board/[board]/TaskDiv.module.css

@@ -25,12 +25,23 @@
 .taskIcon {
 	grid-area: icon;
 	justify-self: start;
+
+	display: flex;
+	width: 28px;
+	height: 100%;
+	flex-direction: column;
+	justify-content: center;
 }
 
 .taskDescription {
 	grid-area: description;
 	justify-self: start;
 	width: 100%;
+
+	display: flex;
+	height: 100%;
+	flex-direction: column;
+	justify-content: center;
 }
 
 .taskDescriptionComplete {

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

@@ -1,14 +1,14 @@
 import {TaskIconEl} from "@/app/board/[board]/TaskIconEl"
-import {Task, TaskWithId} from "@/app/board/[board]/Types"
-import {useBoardContext} from "@/app/board/[board]/useBoardContext"
+import {TaskWithId} from "@/app/board/[board]/Types"
+import {useManagedBoard} from "@/app/board/[board]/BoardManager"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import {useCallback, useState, MouseEvent} from "react"
-import {faArrowTurnRight, faTrashCanArrowUp} from "@fortawesome/free-solid-svg-icons"
+import {faTrashCanArrowUp} from "@fortawesome/free-solid-svg-icons"
 import style from "./TaskDiv.module.css"
 import cn from "classnames"
 
 export function TaskDiv({task}: {task: TaskWithId}) {
-	const {send} = useBoardContext()
+	const {send} = useManagedBoard()
 	const [isDisplayingActions, setDisplayingActions] = useState<boolean>(false)
 
 	const toggleStatus = useCallback((e: MouseEvent<HTMLDivElement>) => {

todoblue/src/app/board/[board]/useBoardContext.ts

@@ -1,14 +0,0 @@
-import {BoardContext} from "@/app/board/[board]/BoardContext"
-import {UseBoardReturns} from "@/app/board/[board]/useBoard"
-import {useContext} from "react"
-
-
-export function useBoardContext(): UseBoardReturns {
-	const context = useContext(BoardContext);
-
-	if(context === null) {
-		throw Error()
-	}
-
-	return context
-}

todoblue/src/app/board/[board]/useBoardTaskEditor.ts

@@ -0,0 +1,19 @@
+import {Task} from "@/app/board/[board]/Types"
+import {useState} from "react"
+
+
+const PRIORITY_RE = /[^][1-5]\b/
+const IMPORTANCE_RE = /[!][1-5]\b/
+const ICON_RE = /\[[A-Za-z]+]\b/
+
+
+export function rawToEvent(raw: string): Task {
+	return {
+
+	}
+}
+
+
+export function useBoardTaskEditor() {
+	const [raw, setRaw] = useState<string>();
+}