Display title placeholder in untitled boards

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"
 }

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"
 }

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}/>

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)}>