From 6e985405d82cc53f62014dc4e480028a2f95a60e Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 16 Aug 2023 15:43:44 +0200
Subject: [PATCH] Display title placeholder in untitled boards

---
 .../src/app/(i18n)/(locales)/(board)/en-US.json   |  3 ++-
 .../src/app/(i18n)/(locales)/(board)/it-IT.json   |  3 ++-
 .../board/[board]/(page)/(header)/BoardHeader.tsx |  6 +++++-
 .../[board]/(page)/(header)/BoardHeaderTitle.tsx  | 15 +++++++++++++--
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/todoblue/src/app/(i18n)/(locales)/(board)/en-US.json b/todoblue/src/app/(i18n)/(locales)/(board)/en-US.json
index ea46f74..bef7db2 100644
--- a/todoblue/src/app/(i18n)/(locales)/(board)/en-US.json
+++ b/todoblue/src/app/(i18n)/(locales)/(board)/en-US.json
@@ -27,5 +27,6 @@
 	"columnHeaderTaskStatusComplete": "Complete",
 	"taskButtonDelete": "Delete this task",
 	"taskButtonRecreate": "Delete and go back to editing this task",
-	"editorPlaceholder": "What do you want to do?"
+	"editorPlaceholder": "What do you want to do?",
+	"noTitlePlaceholder": "Untitled board"
 }
diff --git a/todoblue/src/app/(i18n)/(locales)/(board)/it-IT.json b/todoblue/src/app/(i18n)/(locales)/(board)/it-IT.json
index c363baa..8f1b42d 100644
--- a/todoblue/src/app/(i18n)/(locales)/(board)/it-IT.json
+++ b/todoblue/src/app/(i18n)/(locales)/(board)/it-IT.json
@@ -27,5 +27,6 @@
 	"columnHeaderTaskStatusComplete": "Completata",
 	"taskButtonDelete": "Elimina questa attività",
 	"taskButtonRecreate": "Elimina questa attività e torna a modificarla",
-	"editorPlaceholder": "Cosa vuoi fare?"
+	"editorPlaceholder": "Cosa vuoi fare?",
+	"noTitlePlaceholder": "Board senza titolo"
 }
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 b3e5458..87bccf2 100644
--- a/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.tsx
+++ b/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.tsx
@@ -27,7 +27,11 @@ export function BoardHeader({lang, className, metadataHook, layoutHook: {columni
 				<ToggleStarredButton lang={lang}/>
 				<ToggleEditingButton lang={lang} metadataHook={metadataHook}/>
 			</div>
-			<BoardHeaderTitle className={style.titleArea} editorHook={metadataHook}/>
+			<BoardHeaderTitle
+				lang={lang}
+				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)/(header)/BoardHeaderTitle.tsx b/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeaderTitle.tsx
index 1b30f33..1f03008 100644
--- a/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeaderTitle.tsx
+++ b/todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeaderTitle.tsx
@@ -1,3 +1,4 @@
+import {useClientTranslation} from "@/app/(i18n)/client"
 import {usePageTitleSetter} from "@/app/(utils)/usePageTitleSetter"
 import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
 import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderTitle.module.css"
@@ -6,7 +7,8 @@ import cn from "classnames"
 import {useMemo} from "react"
 
 
-export function BoardHeaderTitle({className, editorHook}: {className?: string, editorHook: ReturnType<typeof useBoardMetadataEditor>}) {
+export function BoardHeaderTitle({lang, className, editorHook}: {lang: string, className?: string, editorHook: ReturnType<typeof useBoardMetadataEditor>}) {
+	const {t} = useClientTranslation(lang, "board")
 	const {isReady, boardState: {title: titleFromState}} = useBoardConsumer()
 
 	const pageTitle = useMemo(() => {
@@ -33,7 +35,7 @@ export function BoardHeaderTitle({className, editorHook}: {className?: string, e
 			</form>
 		)
 	}
-	else {
+	else if(titleFromState.length > 0) {
 		contents = (
 			<div
 				className={style.boardHeaderTitleDisplay}
@@ -42,6 +44,15 @@ export function BoardHeaderTitle({className, editorHook}: {className?: string, e
 			</div>
 		)
 	}
+	else {
+		contents = (
+			<div
+				className={cn(style.boardHeaderTitleDisplay, "fade")}
+			>
+				{t("noTitlePlaceholder")}
+			</div>
+		)
+	}
 
 	return (
 		<h1 className={cn(style.boardHeaderTitle, className)}>