Get more stuff to work

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

@@ -5,7 +5,7 @@
 	;
 	grid-template-columns: auto 1fr;
 	align-items: center;
-	min-width: unset;
+	min-width: 300px;
 }
 
 .taskIcon {
@@ -49,34 +49,48 @@
 	padding: 8px;
 }
 
+.asdaf {
+	--something: hsl(150, 1%, 41%), hsl(213, 22%, 61%), hsl(212, 100%, 81%), hsl(6, 66%, 72%), hsl(17, 98%, 52%);
+}
+
 .taskImportanceHighest {
-	--bhsl-current-hue: 100deg;
+	--bhsl-current-hue: 15deg;
-	--bhsl-current-saturation: 37%;
+	--bhsl-current-saturation: 98%;
-	--bhsl-current-lightness: 68.2%;
+	--bhsl-current-lightness: 75%;
+
+	font-weight: 800;
 }
 
 .taskImportanceHigh {
-	--bhsl-current-hue: 159deg;
+	--bhsl-current-hue: 260deg;
-	--bhsl-current-saturation: 30%;
+	--bhsl-current-saturation: 66%;
-	--bhsl-current-lightness: 52%;
+	--bhsl-current-lightness: 72%;
+
+	font-weight: 700;
 }
 
 .taskImportanceNormal {
-	--bhsl-current-hue: 186deg;
+	--bhsl-current-hue: 212deg;
-	--bhsl-current-saturation: 47%;
+	--bhsl-current-saturation: 100%;
-	--bhsl-current-lightness: 38%;
+	--bhsl-current-lightness: 81%;
+
+	font-weight: 400;
 }
 
 .taskImportanceLow {
-	--bhsl-current-hue: 203deg;
+	--bhsl-current-hue: 168deg;
-	--bhsl-current-saturation: 64%;
+	--bhsl-current-saturation: 22%;
-	--bhsl-current-lightness: 32%;
+	--bhsl-current-lightness: 61%;
+
+	font-weight: 300;
 }
 
 .taskImportanceLowest {
-	--bhsl-current-hue: 237deg;
+	--bhsl-current-hue: 120deg;
-	--bhsl-current-saturation: 44%;
+	--bhsl-current-saturation: 30%;
-	--bhsl-current-lightness: 31%;
+	--bhsl-current-lightness: 30%;
+
+	font-weight: 300;
 }
 
 @keyframes inProgress {

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

@@ -28,6 +28,22 @@ export type TaskImportance =
 	"Low" |
 	"Lowest";
 
+export const IMPORTANCE_TO_NUMBER = {
+	"Highest": 5,
+	"High": 4,
+	"Normal": 3,
+	"Low": 2,
+	"Lowest": 1,
+}
+
+export const IMPORTANCE_TO_STRING = {
+	"Highest": "Critico",
+	"High": "Importante",
+	"Normal": "Normale",
+	"Low": "Opzionale",
+	"Lowest": "Irrilevante"
+}
+
 export type TaskPriority =
 	"Highest" |
 	"High" |
@@ -35,6 +51,22 @@ export type TaskPriority =
 	"Low" |
 	"Lowest";
 
+export const PRIORITY_TO_NUMBER = {
+	"Highest": 5,
+	"High": 4,
+	"Normal": 3,
+	"Low": 2,
+	"Lowest": 1,
+}
+
+export const PRIORITY_TO_STRING = {
+	"Highest": "Urgente",
+	"High": "Prioritario",
+	"Normal": "Normale",
+	"Low": "Rimandabile",
+	"Lowest": "In qualsiasi momento"
+}
+
 export type TaskStatus =
 	"Unfinished" |
 	"InProgress" |

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

@@ -1,20 +1,31 @@
 "use client";
 
 import {TaskIconEl} from "@/app/board/[board]/TaskIconEl"
-import {BoardAction} from "@/app/board/[board]/Types"
+import {BoardAction, IMPORTANCE_TO_NUMBER, IMPORTANCE_TO_STRING, PRIORITY_TO_NUMBER, PRIORITY_TO_STRING, TaskImportance, TaskPriority} from "@/app/board/[board]/Types"
-import {TaskIcon, TaskWithId} from "@/app/board/[board]/types"
+import {TaskIcon, TaskWithId} from "@/app/board/[board]/Types"
 import {useBoardWebSocket} from "@/app/board/[board]/useBoardWebSocket"
 import {GroupNamingFunction, GroupSortingFunction, TaskGroup, TaskGroupingFunction, TaskSortingFunction, useBoardTaskArranger} from "@/app/board/[board]/useBoardTaskArranger"
 import {useBoardTitleEditor} from "@/app/board/[board]/useBoardTitleEditor"
 import {useCycleState} from "@/app/useCycleState"
-import {faBell, faBookmark, faBuilding, faCircle, faClock, faComment, faEnvelope, faEye, faFaceSmile, faFile, faFlag, faHand, faHandshake, faHeart, faImage, faMoon, faPaperPlane, faSquare, faStar, faSun, faUser, IconDefinition} from "@fortawesome/free-solid-svg-icons"
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import {Dispatch, SetStateAction} from "react"
 
 function groupTasksByIcon(a: TaskWithId) {return a.icon}
-function sortGroupsByKey(a: TaskGroup, b: TaskGroup) {return a.key.localeCompare(b.key)}
+function groupTasksByImportance(a: TaskWithId) {return a.importance}
+function groupTasksByPriority(a: TaskWithId) {return a.priority}
 
-function nameToFontAwesomeIcon(a: string) {
+function sortGroupsByKey(a: TaskGroup, b: TaskGroup) {return a.key.localeCompare(b.key)}
+function sortGroupsByImportance(a: TaskGroup, b: TaskGroup) {
+	const aN = IMPORTANCE_TO_NUMBER[a.key as TaskImportance]
+	const bN = IMPORTANCE_TO_NUMBER[b.key as TaskImportance]
+	return bN - aN;
+}
+function sortGroupsByPriority(a: TaskGroup, b: TaskGroup) {
+	const aN = PRIORITY_TO_NUMBER[a.key as TaskPriority]
+	const bN = PRIORITY_TO_NUMBER[b.key as TaskPriority]
+	return bN - aN;
+}
+
+function iconToTitle(a: string) {
 	let icon = a as TaskIcon;
 	return <>
 		<TaskIconEl icon={icon} style={"solid"}/>
@@ -22,9 +33,17 @@ function nameToFontAwesomeIcon(a: string) {
 		{a}
 	</>
 }
+function importanceToTitle(a: string) {
+	return IMPORTANCE_TO_STRING[a as TaskImportance];
+}
+function priorityToTitle(a: string) {
+	return PRIORITY_TO_STRING[a as TaskPriority];
+}
 
 const TASK_GROUPERS: [TaskGroupingFunction, GroupSortingFunction, GroupNamingFunction][] = [
-	[groupTasksByIcon, sortGroupsByKey, nameToFontAwesomeIcon],
+	[groupTasksByIcon, sortGroupsByKey, iconToTitle],
+	[groupTasksByImportance, sortGroupsByImportance, importanceToTitle],
+	[groupTasksByPriority, sortGroupsByPriority, priorityToTitle],
 ]
 
 function sortTasksByText(a: TaskWithId, b: TaskWithId) {return a.text.localeCompare(b.text)}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import {Task, TaskWithId} from "@/app/board/[board]/types"
+import {Task, TaskWithId} from "@/app/board/[board]/Types"
 import {ReactNode, useMemo} from "react"
 
 export type TaskGroup = {