From ced9053789d2493ccad0dc2374e9d8b0f4a60239 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 11 Aug 2023 19:31:33 +0200
Subject: [PATCH] Various fixes

---
 todoblue/public/manifest.json                 |  4 +-
 .../(page)/(edit)/TaskEditor.module.css       |  3 +-
 .../(page)/(header)/BoardHeader.module.css    |  1 +
 .../[board]/(page)/(header)/BoardHeader.tsx   |  2 +-
 .../(page)/(view)/TaskViewer.module.css       |  6 ++-
 .../[board]/(page)/(view)/TaskViewer.tsx      | 41 +++++++++++++++----
 .../[lang]/board/[board]/(page)/BoardPage.tsx | 40 ++++++++++++++++++
 .../app/[lang]/board/[board]/page.module.css  |  5 +--
 .../src/app/[lang]/board/[board]/page.tsx     | 29 ++-----------
 todoblue/src/app/[lang]/layout.tsx            |  3 +-
 10 files changed, 91 insertions(+), 43 deletions(-)
 create mode 100644 todoblue/src/app/[lang]/board/[board]/(page)/BoardPage.tsx

diff --git a/todoblue/public/manifest.json b/todoblue/public/manifest.json
index fddb137..55bff94 100644
--- a/todoblue/public/manifest.json
+++ b/todoblue/public/manifest.json
@@ -1,8 +1,10 @@
 {
     "name": "Todocolors",
-    "short_name": "Todocolors",
+    "short_name": "Todo",
 	"start_url": ".",
+	"scope": "/",
     "display": "standalone",
+	"theme_color": "#0d193b",
     "background_color": "#0c193b",
     "description": "Self-hostable multiplayer todo app",
 	"categories": ["productivity"],
diff --git a/todoblue/src/app/[lang]/board/[board]/(page)/(edit)/TaskEditor.module.css b/todoblue/src/app/[lang]/board/[board]/(page)/(edit)/TaskEditor.module.css
index f523dc3..c2bef14 100644
--- a/todoblue/src/app/[lang]/board/[board]/(page)/(edit)/TaskEditor.module.css
+++ b/todoblue/src/app/[lang]/board/[board]/(page)/(edit)/TaskEditor.module.css
@@ -1,5 +1,6 @@
 .taskEditorContainer {
 	display: flex;
+	flex-direction: column;
 	justify-content: center;
 }
 
@@ -8,8 +9,6 @@
 	align-items: center;
 	border-style: dashed;
 
-	width: 100%;
-	max-width: 480px;
 	height: 100%;
 }
 
diff --git a/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.module.css b/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.module.css
index cc86f4c..eba2815 100644
--- a/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.module.css
+++ b/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.module.css
@@ -36,6 +36,7 @@
 
 .titleArea {
 	grid-area: title;
+	height: 72px;
 }
 
 .titleDisplay {
diff --git a/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.tsx b/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.tsx
index 74ed245..b3e5458 100644
--- a/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.tsx
+++ b/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.tsx
@@ -22,12 +22,12 @@ interface BoardHeaderProps {
 export function BoardHeader({lang, className, metadataHook, layoutHook: {columningHook, groupingHook, sortingHook}}: BoardHeaderProps) {
 	return (
 		<header className={cn(style.boardHeader, className)}>
-			<BoardHeaderTitle className={style.titleArea} editorHook={metadataHook}/>
 			<div className={cn(style.buttonsArea, style.leftButtonsArea)}>
 				<NavigateHomeButton lang={lang}/>
 				<ToggleStarredButton lang={lang}/>
 				<ToggleEditingButton lang={lang} metadataHook={metadataHook}/>
 			</div>
+			<BoardHeaderTitle className={style.titleArea} editorHook={metadataHook}/>
 			<div className={cn(style.buttonsArea, style.rightButtonsArea)}>
 				<CycleColumningButton lang={lang} value={columningHook.value} next={columningHook.next}/>
 				<CycleGroupingButton lang={lang} next={groupingHook.next}/>
diff --git a/todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.module.css b/todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.module.css
index d64ded1..126affb 100644
--- a/todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.module.css
+++ b/todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.module.css
@@ -18,5 +18,9 @@
 }
 
 .taskViewerBack {
-	flex-direction: row-reverse;
+	justify-content: end;
+}
+
+.taskViewerDebug {
+	font-size: xx-small;
 }
diff --git a/todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.tsx b/todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.tsx
index 7977290..8144eef 100644
--- a/todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.tsx
+++ b/todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.tsx
@@ -9,12 +9,23 @@ import {TaskWithId} from "@/app/[lang]/board/[board]/(page)/(view)/(task)/TaskWi
 import {faTrashArrowUp} from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import cn from "classnames"
-import {Dispatch, MouseEvent, SetStateAction, useCallback, useState} from "react"
+import {Dispatch, SyntheticEvent, SetStateAction, useCallback, useState} from "react"
 
 
 export function TaskViewer({lang, task, setEditorInput}: {lang: string, task: TaskWithId, setEditorInput: Dispatch<SetStateAction<string>>}) {
     const [isFlipped, setFlipped] = useState<boolean>(false)
 
+	const toggleFlipped = useCallback((e: SyntheticEvent<HTMLElement>) => {
+		if("key" in e && typeof e["key"] === "string") {
+			if(!["Enter", " "].includes(e.key)) {
+				return;
+			}
+		}
+		e.preventDefault()
+		e.stopPropagation()
+		setFlipped(prev => !prev)
+	}, [])
+
 	return (
 		<div
 			className={cn({
@@ -23,17 +34,23 @@ export function TaskViewer({lang, task, setEditorInput}: {lang: string, task: Ta
 				[style.taskViewerFront]: !isFlipped,
 				[style.taskViewerBack]: isFlipped,
 			}, taskClassNames(task[1]))}
-			onClick={() => setFlipped(prev => !prev)}
+			onClick={toggleFlipped}
+			onKeyDownCapture={toggleFlipped}
 		>
 			{isFlipped ? <TaskViewerBack lang={lang} task={task} setEditorInput={setEditorInput}/> : <TaskViewerFront lang={lang} task={task}/>}
 		</div>
 	)
 }
 
-function TaskViewerFront({lang, task}: {lang: string, task: TaskWithId}) {
+function TaskViewerFront({task}: {lang: string, task: TaskWithId}) {
 	const {sendRequest} = useBoardConsumer()
 
-	const toggleStatus = useCallback((e: MouseEvent<HTMLDivElement>) => {
+	const toggleStatus = useCallback((e: SyntheticEvent<HTMLDivElement>) => {
+		if("key" in e && typeof e["key"] === "string") {
+			if(!["Enter", " "].includes(e.key)) {
+				return;
+			}
+		}
 		e.preventDefault()
 		e.stopPropagation()
 		let request: ModifyTaskBoardRequest
@@ -52,7 +69,7 @@ function TaskViewerFront({lang, task}: {lang: string, task: TaskWithId}) {
 	}, [task, sendRequest])
 
     return <>
-		<div className={style.taskIcon} onClick={toggleStatus} tabIndex={0}>
+		<div className={style.taskIcon} onClick={toggleStatus} onKeyDown={toggleStatus} tabIndex={0}>
 			<FontAwesomeIcon
 				size={"lg"}
 				icon={task[1].status === TaskStatus.Complete ? TASK_ICON_TO_FONTAWESOME_SOLID[task[1].icon] : TASK_ICON_TO_FONTAWESOME_REGULAR[task[1].icon]}
@@ -69,7 +86,12 @@ function TaskViewerBack({lang, task, setEditorInput}: {lang: string, task: TaskW
 	const {t} = useClientTranslation(lang, "board")
 	const {sendRequest} = useBoardConsumer()
 
-	const recreateTask = useCallback((e: MouseEvent<HTMLButtonElement>) => {
+	const recreateTask = useCallback((e: SyntheticEvent<HTMLButtonElement>) => {
+		if("key" in e && typeof e["key"] === "string") {
+			if(!["Enter", " "].includes(e.key)) {
+				return;
+			}
+		}
 		e.preventDefault()
 		e.stopPropagation()
 		setEditorInput(taskToString(task[1]))
@@ -78,8 +100,11 @@ function TaskViewerBack({lang, task, setEditorInput}: {lang: string, task: TaskW
 	}, [task, setEditorInput, sendRequest])
 
 	return <>
-		<div className={style.taskButtons}>
-			<button title={t("taskButtonRecreate")} onClick={recreateTask}>
+		<div className={style.taskViewerDebug}>
+			{task[0]}
+		</div>
+		<div className={style.taskViewerButtons}>
+			<button title={t("taskButtonRecreate")} onClick={recreateTask} onKeyDown={recreateTask} tabIndex={0}>
 				<FontAwesomeIcon size={"sm"} icon={faTrashArrowUp}/>
 			</button>
 		</div>
diff --git a/todoblue/src/app/[lang]/board/[board]/(page)/BoardPage.tsx b/todoblue/src/app/[lang]/board/[board]/(page)/BoardPage.tsx
new file mode 100644
index 0000000..edb0187
--- /dev/null
+++ b/todoblue/src/app/[lang]/board/[board]/(page)/BoardPage.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import {TaskEditor} from "@/app/[lang]/board/[board]/(page)/(edit)/TaskEditor"
+import {BoardHeader} from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeader"
+import {BoardMain} from "@/app/[lang]/board/[board]/(page)/(view)/BoardMain"
+import {useBoardLayoutEditor} from "@/app/[lang]/board/[board]/(page)/useBoardLayoutEditor"
+import {useBoardMetadataEditor} from "@/app/[lang]/board/[board]/(page)/useBoardMetadataEditor"
+import {useTaskEditor} from "@/app/[lang]/board/[board]/(page)/useTaskEditor"
+import style from "@/app/[lang]/board/[board]/page.module.css"
+
+
+export function BoardPage({lang}: {lang: string}) {
+	const metadataHook = useBoardMetadataEditor()
+	const layoutHook = useBoardLayoutEditor()
+	const editorHook = useTaskEditor()
+
+	return (
+		<div className={style.pageRoot}>
+			<BoardHeader
+				lang={lang}
+				className={style.pageHeader}
+				metadataHook={metadataHook}
+				layoutHook={layoutHook}
+			/>
+			<BoardMain
+				lang={lang}
+				className={style.pageMain}
+				columning={layoutHook.columningHook.value}
+				grouping={layoutHook.groupingHook.value}
+				sorting={layoutHook.sortingHook.value}
+				setEditorInput={editorHook.setInput}
+			/>
+			<TaskEditor
+				lang={lang}
+				className={style.pageEditor}
+				editorHook={editorHook}
+			/>
+		</div>
+	)
+}
diff --git a/todoblue/src/app/[lang]/board/[board]/page.module.css b/todoblue/src/app/[lang]/board/[board]/page.module.css
index 8e47800..6ec183c 100644
--- a/todoblue/src/app/[lang]/board/[board]/page.module.css
+++ b/todoblue/src/app/[lang]/board/[board]/page.module.css
@@ -6,7 +6,8 @@
 		"main"
 		"editor"
 	;
-	grid-template-rows: 72px 1fr 48px;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto 1fr 48px;
 	grid-row-gap: 8px;
 
 	justify-content: stretch;
@@ -30,6 +31,4 @@
 
 .pageEditor {
 	grid-area: editor;
-
-	min-height: 44px;
 }
diff --git a/todoblue/src/app/[lang]/board/[board]/page.tsx b/todoblue/src/app/[lang]/board/[board]/page.tsx
index 4eb876d..b7e7330 100644
--- a/todoblue/src/app/[lang]/board/[board]/page.tsx
+++ b/todoblue/src/app/[lang]/board/[board]/page.tsx
@@ -1,39 +1,16 @@
-"use client";
 import {TaskEditor} from "@/app/[lang]/board/[board]/(page)/(edit)/TaskEditor"
+import {BoardPage} from "@/app/[lang]/board/[board]/(page)/BoardPage"
 import {useBoardLayoutEditor} from "@/app/[lang]/board/[board]/(page)/useBoardLayoutEditor"
 import {useBoardMetadataEditor} from "@/app/[lang]/board/[board]/(page)/useBoardMetadataEditor"
 import {BoardMain} from "@/app/[lang]/board/[board]/(page)/(view)/BoardMain"
 import {BoardHeader} from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeader"
 import {useTaskEditor} from "@/app/[lang]/board/[board]/(page)/useTaskEditor"
+import {Metadata} from "next"
 import style from "./page.module.css"
 
 
 export default function page({params: {lang}}: {params: {lang: string}}) {
-	const metadataHook = useBoardMetadataEditor()
-	const layoutHook = useBoardLayoutEditor()
-	const editorHook = useTaskEditor()
-
 	return (
-		<div className={style.pageRoot}>
-			<BoardHeader
-				lang={lang}
-				className={style.pageHeader}
-				metadataHook={metadataHook}
-				layoutHook={layoutHook}
-			/>
-			<BoardMain
-				lang={lang}
-				className={style.pageMain}
-				columning={layoutHook.columningHook.value}
-				grouping={layoutHook.groupingHook.value}
-				sorting={layoutHook.sortingHook.value}
-				setEditorInput={editorHook.setInput}
-			/>
-			<TaskEditor
-				lang={lang}
-				className={style.pageEditor}
-				editorHook={editorHook}
-			/>
-		</div>
+		<BoardPage lang={lang}/>
 	)
 }
diff --git a/todoblue/src/app/[lang]/layout.tsx b/todoblue/src/app/[lang]/layout.tsx
index afe4a4e..97e4bc0 100644
--- a/todoblue/src/app/[lang]/layout.tsx
+++ b/todoblue/src/app/[lang]/layout.tsx
@@ -18,7 +18,8 @@ export const metadata: NextMetadata = {
 	creator: "Steffo",
 	robots: "noindex, nofollow",
 	manifest: "manifest.json",
-	icons: "favicon-wbg.ico"
+	icons: "favicon-wbg.ico",
+	themeColor: "#0d193b"
 }
 
 export default function layout({children}: { children: ReactNode }) {