Tweak more task stuff

I seems like I can't do atomic commits right in this project

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

@@ -1,23 +1,36 @@
 .taskDiv {
 	display: grid;
+	align-items: center;
+	min-width: unset;
+	width: 240px;
+	height: 44px;
+
+	cursor: pointer;
+}
+
+.taskDivFront {
 	grid-template-areas:
 		"icon description"
 	;
 	grid-template-columns: auto 1fr;
-	align-items: center;
-	min-width: unset;
+}
+
+.taskDivBack {
+	grid-template-areas:
+		"buttons"
+	;
+	grid-template-columns: 1fr;
 }
 
 .taskIcon {
 	grid-area: icon;
 	justify-self: start;
-
-	cursor: pointer;
 }
 
 .taskDescription {
 	grid-area: description;
 	justify-self: start;
+	width: 100%;
 }
 
 .taskDescriptionComplete {
@@ -89,16 +102,7 @@
 	font-weight: 300;
 }
 
-@keyframes inProgress {
-	0% {
-		filter: brightness(100%);
-	}
-
-	100% {
-		filter: brightness(150%);
-	}
-}
-
-.taskStatusInProgress {
-	animation: 1.7s inProgress ease-out infinite alternate-reverse;
+.taskButtons {
+	grid-area: buttons;
+	justify-self: end;
 }

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

@@ -1,15 +1,22 @@
 import {TaskIconEl} from "@/app/board/[board]/TaskIconEl"
 import {Task, TaskWithId} from "@/app/board/[board]/Types"
 import {useBoardContext} from "@/app/board/[board]/useBoardContext"
-import {useCallback} from "react"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {useCallback, useState, MouseEvent} from "react"
+import {faArrowTurnRight, 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 [isDisplayingActions, setDisplayingActions] = useState<boolean>(false)
 
-	const toggleStatus = useCallback(() => {
+	const toggleStatus = useCallback((e: MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
 		if(task.status === "Unfinished") {
+			send({"Task": [task.id, {...task, status: "InProgress"}]})
+		}
+		if(task.status === "InProgress") {
 			send({"Task": [task.id, {...task, status: "Complete"}]})
 		}
 		else if(task.status === "Complete") {
@@ -17,10 +24,34 @@ export function TaskDiv({task}: {task: TaskWithId}) {
 		}
 	}, [send, task])
 
+	let contents;
+	if(isDisplayingActions) {
+		contents = <div className={style.taskButtons}>
+			<button>
+				<FontAwesomeIcon icon={faTrashCanArrowUp}/>&nbsp;Ricrea
+			</button>
+		</div>
+	}
+	else {
+		contents = <>
+			<div className={style.taskIcon} onClick={toggleStatus} tabIndex={0}>
+				<TaskIconEl size={"lg"} icon={task.icon} status={task.status}/>
+			</div>
+			<div className={cn({
+				[style.taskDescription]: true,
+				[style.taskDescriptionComplete]: task.status === "Complete",
+			})} tabIndex={0}>
+				{task.text}
+			</div>
+		</>
+	}
+
 	return (
-		<div onClick={toggleStatus} tabIndex={0} className={cn({
+		<div className={cn({
 			"panel": true,
 			[style.taskDiv]: true,
+			[style.taskDivFront]: !isDisplayingActions,
+			[style.taskDivBack]: isDisplayingActions,
 			[style.taskPriorityHighest]: task.priority === "Highest",
 			[style.taskPriorityHigh]: task.priority === "High",
 			[style.taskPriorityNormal]: task.priority === "Normal",
@@ -34,16 +65,8 @@ export function TaskDiv({task}: {task: TaskWithId}) {
 			[style.taskStatusUnfinished]: task.status === "Unfinished",
 			[style.taskStatusInProgress]: task.status === "InProgress",
 			[style.taskStatusComplete]: task.status === "Complete",
-		})}>
-			<div className={style.taskIcon}>
-				<TaskIconEl size={"lg"} icon={task.icon} style={task.status === "Complete" ? "solid" : "regular"}/>
-			</div>
-			<div className={cn({
-				[style.taskDescription]: true,
-				[style.taskDescriptionComplete]: task.status === "Complete",
-			})}>
-				{task.text}
-			</div>
+		})} onClick={() => setDisplayingActions(!isDisplayingActions)}>
+			{contents}
 		</div>
 	)
 }

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

@@ -1,4 +1,4 @@
-import {TaskIcon} from "@/app/board/[board]/Types"
+import {TaskIcon, TaskStatus} from "@/app/board/[board]/Types"
 import {SizeProp} from "@fortawesome/fontawesome-svg-core"
 import {
 	faUser as faUserSolid,
@@ -99,8 +99,8 @@ export const ICONS = {
 }
 
 
-export function TaskIconEl({icon, style, size}: {icon: TaskIcon, style: "solid" | "regular", size?: SizeProp}) {
+export function TaskIconEl({icon, status, size}: {icon: TaskIcon, status: TaskStatus, size?: SizeProp}) {
 	return (
-		<FontAwesomeIcon icon={ICONS[style][icon]} size={size}/>
+		<FontAwesomeIcon icon={ICONS[status === "Complete" ? "solid" : "regular"][icon]} size={size} beatFade={status === "InProgress"}/>
 	)
 }

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

@@ -28,7 +28,7 @@ function sortGroupsByPriority(a: TaskGroup, b: TaskGroup) {
 function iconToTitle(a: string) {
 	let icon = a as TaskIcon;
 	return <>
-		<TaskIconEl icon={icon} style={"solid"}/>
+		<TaskIconEl icon={icon} status={"Complete"} size={"lg"}/>
 		&nbsp;
 		{a}
 	</>

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

@@ -1,6 +1,6 @@
 "use client";
 
-import {BoardAction, Task, TaskBoardAction, TitleBoardAction} from "@/app/board/[board]/types"
+import {BoardAction, Task, TaskBoardAction, TitleBoardAction} from "@/app/board/[board]/Types"
 import {Reducer, useReducer} from "react"