Visual fixes

todoblue/src/app/(i18n)/(locales)/(board)/en-US.json

@@ -5,8 +5,8 @@
     "removeStarredButtonTitle": "Unstar this board",
     "navigateHomeButtonTitle": "Return to the home page",
 	"cycleColumningButtonTitle": "Change column arrangement",
-	"cycleGroupingButtonTitle": "Change column grouping",
+	"cycleGroupingButtonTitle": "Change column task grouping",
-	"cycleSortingButtonTitle": "Change column sorting",
+	"cycleSortingButtonTitle": "Change column task sorting",
 	"boardPreparing": "Preparing...",
 	"boardConnecting": "Connecting...",
 	"boardEmpty": "This board is empty.",

todoblue/src/app/(i18n)/(locales)/(board)/it-IT.json

@@ -0,0 +1,31 @@
+{
+    "startEditingButtonTitle": "Modifica impostazioni globali del board",
+    "stopEditingButtonTitle": "Salva e termina modifiche alle impostazioni globali del board",
+    "addStarredButtonTitle": "Salva il board tra i preferiti",
+    "removeStarredButtonTitle": "Rimuovi il board dai preferiti",
+    "navigateHomeButtonTitle": "Torna alla pagina iniziale",
+	"cycleColumningButtonTitle": "Cambia disposizione colonne",
+	"cycleGroupingButtonTitle": "Cambia raggruppamento attività in colonne",
+	"cycleSortingButtonTitle": "Cambia ordinamento attività nelle colonne",
+	"boardPreparing": "Preparazione...",
+	"boardConnecting": "Connessione...",
+	"boardEmpty": "Il board è vuoto.",
+	"boardDisconnecting": "Disconnessione...",
+	"boardDisconnected": "Disconnesso, riconnessione tra {{retryingInSeconds}} s",
+	"columnHeaderTaskImportanceHighest": "Critica",
+	"columnHeaderTaskImportanceHigh": "Importante",
+	"columnHeaderTaskImportanceNormal": "Normale",
+	"columnHeaderTaskImportanceLow": "Opzionale",
+	"columnHeaderTaskImportanceLowest": "Irrelevante",
+	"columnHeaderTaskPriorityHighest": "Immediata",
+	"columnHeaderTaskPriorityHigh": "Urgente",
+	"columnHeaderTaskPriorityNormal": "Normale",
+	"columnHeaderTaskPriorityLow": "Senza fretta",
+	"columnHeaderTaskPriorityLowest": "Una qualche volta",
+	"columnHeaderTaskStatusUnfinished": "Da fare",
+	"columnHeaderTaskStatusInProgress": "In corso",
+	"columnHeaderTaskStatusComplete": "Completata",
+	"taskButtonDelete": "Elimina questa attività",
+	"taskButtonRecreate": "Elimina questa attività e torna a modificarla",
+	"editorPlaceholder": "Cosa vuoi fare?"
+}

todoblue/src/app/(i18n)/(locales)/(root)/it-IT.json

@@ -0,0 +1,32 @@
+{
+    "title": "Todocolors",
+    "createBoardTitle": "Crea un nuovo board",
+    "createPublicBoardTitle": "Pubblico",
+    "createPublicBoardDescription": "Quando crei un board pubblico, devi scegliere un codice che gli altri utilizzeranno per accedervi!",
+    "createPublicBoardSmall": "Se un board con il codice inserito esiste già, vi sarai redirezionato.",
+    "createPublicBoardCodeLeft": "Codice",
+    "createPublicBoardCodePlaceholder": "il-mio-nuovo-board",
+    "createPublicBoardSubmitText": "Crea board pubblico",
+    "createPrivateBoardTitle": "Privato",
+    "createPrivateBoardLoadingDescription": "La tua connessione sta venendo controllata per verificare se essa supporta la creazione di board privati.",
+    "createPrivateBoardLoadingSmall": "Solo un momento...",
+    "createPrivateBoardUnavailableDescription": "La tua connessione non supporta board privati.",
+    "createPrivateBoardUnavailableSmall": "Stai usando HTTPS?",
+    "createPrivateBoardDescription": "Quando crei un board privato, un codice sicuro e casuale vi sarà assegnato automaticamente; potrai condividerlo con gli altri per dare loro accesso al board.",
+    "createPrivateBoardSmall": "Non condividere questo codice con chiunque non vuoi che abbia accesso al board!",
+    "createPrivateBoardSubmitText": "Crea board privato",
+    "existingBoardTitle": "Usa un board esistente",
+    "existingKnownBoardsTitle": "Accedi con un codice",
+    "existingKnownBoardsDescription": "Se conosci il codice di un board, puoi accedervi inserendolo qui.",
+    "existingKnownBoardsSmall": "Inserire un codice non valido creerà un nuovo board pubblico con il dato codice.",
+    "existingKnownBoardsCodeLeft": "Codice",
+    "existingKnownBoardsCodePlaceholder": "il-tuo-nuovo-board",
+    "existingKnownBoardsSubmitText": "Accedi al board tramite codice",
+    "existingStarredBoardsTitle": "Board preferiti",
+    "existingStarredBoardsLoadingDescription": "Il tuo browser sta scaricando l'elenco dei tuoi board preferiti.",
+    "existingStarredBoardsLoadingSmall": "Solo un momento...",
+    "existingStarredBoardsEmptyDescription": "Non hai messo nessun board tra i preferiti per ora. Trova o crea un board, poi torna qui!",
+    "existingStarredBoardsEmptySmall": "Una volta aperto, puoi aggiungere un board ai preferiti premendo il secondo bottone in alto a sinistra.",
+    "existingStarredBoardsDescription": "Questi sono i codici per i tuoi board preferiti. Clicca su uno di essi per accedere al board corrispondente.",
+    "existingStarredBoardsSmall": "Una volta aperto, puoi rimuovere un board dai preferiti cliccando di nuovo il secondo bottone in alto a destra."
+}

todoblue/src/app/(i18n)/(locales)/index.ts

@@ -1,3 +1,4 @@
 export const AVAILABLE_LOCALES: string[] = [
     "en-US",
+	"it-IT",
 ]

todoblue/src/app/[lang]/board/[board]/(page)/(edit)/BoardEditor.module.css

@@ -0,0 +1,7 @@
+.boardEditor {
+	display: flex;
+	flex-direction: row;
+
+	width: 100%;
+	height: 100%;
+}

todoblue/src/app/[lang]/board/[board]/(page)/(edit)/BoardEditor.tsx

@@ -0,0 +1,13 @@
+import {TaskEditor} from "@/app/[lang]/board/[board]/(page)/(edit)/TaskEditor"
+import {useTaskEditor} from "@/app/[lang]/board/[board]/(page)/useTaskEditor"
+import cn from "classnames"
+import style from "./BoardEditor.module.css"
+
+
+export function BoardEditor({className, lang, editorHook}: {className?: string, lang: string, editorHook: ReturnType<typeof useTaskEditor>}) {
+	return (
+		<section className={cn(style.boardEditor, className)}>
+			<TaskEditor lang={lang} editorHook={editorHook}/>
+		</section>
+	)
+}

todoblue/src/app/[lang]/board/[board]/(page)/(edit)/TaskEditor.module.css

@@ -1,7 +1,19 @@
 .taskEditorContainer {
+	padding-left: 4px;
+	padding-right: 4px;
+
+	max-width: 488px;
+	width: 100%;
+	height: 100%;
+
+	margin-left: auto;
+	margin-right: auto;
+
+	flex-shrink: 1;
+	flex-grow: 0;
+
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
 }
 
 .taskEditor {
@@ -9,6 +21,7 @@
 	align-items: center;
 	border-style: dashed;
 
+	min-width: 240px;
 	height: 100%;
 }
 

todoblue/src/app/[lang]/board/[board]/(page)/(edit)/TaskEditor.tsx

@@ -27,7 +27,7 @@ export function TaskEditor({lang, className, editorHook: {input, setInput, task}
 			className={cn(className, style.taskEditorContainer)}
 		>
 			<form
-				className={cn("panel", style.taskEditor, inputClassName)}
+				className={cn("panel", style.taskEditor, className, inputClassName)}
 				onSubmit={submitTask}
 			>
 				<div className={style.taskEditorIcon}>

todoblue/src/app/[lang]/board/[board]/(page)/(view)/(sorting)/sortingModeToSortingFunction.ts

@@ -20,8 +20,8 @@ const TASK_PRIORITY_TO_VALUE = {
 }
 
 const TASK_STATUS_TO_VALUE = {
-	[TaskStatus.Unfinished]: 1,
+	[TaskStatus.Unfinished]: 2,
-	[TaskStatus.InProgress]: 2,
+	[TaskStatus.InProgress]: 1,
 	[TaskStatus.Complete]: 3,
 }
 

todoblue/src/app/[lang]/board/[board]/(page)/(view)/BoardViewer.module.css

@@ -7,9 +7,11 @@
 	flex-direction: column;
 
 	justify-content: flex-start;
-	align-items: stretch;
+	align-items: center;
 
 	overflow-y: scroll;
+
+	gap: 16px;
 }
 
 .boardMainTaskGroupsMultiColumn {
@@ -27,15 +29,10 @@
 
 .boardColumn {
 	flex-shrink: 0;
-	flex-grow: 1;
 
 	display: flex;
 	flex-direction: column;
-	justify-content: stretch;
 	gap: 8px;
-
-	margin-left: auto;
-	margin-right: auto;
 }
 
 .boardMainTaskGroupsSingleColumn .boardColumn {
@@ -44,9 +41,13 @@
 }
 
 .boardMainTaskGroupsMultiColumn .boardColumn {
-	width: 248px;
+	min-width: 248px;
 	max-width: 488px;
+
 	height: 100%;
+
+	flex-grow: 1;
+	flex-shrink: 1;
 }
 
 .boardColumnContents {

todoblue/src/app/[lang]/board/[board]/(page)/(view)/TaskViewer.module.css

@@ -9,6 +9,8 @@
 
 .taskIcon {
 	display: flex;
+	flex-shrink: 0;
+
 	width: 28px;
 	height: 100%;
 	flex-direction: column;

todoblue/src/app/[lang]/board/[board]/(page)/BoardPage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {TaskEditor} from "@/app/[lang]/board/[board]/(page)/(edit)/TaskEditor"
+import {BoardEditor} from "@/app/[lang]/board/[board]/(page)/(edit)/BoardEditor"
 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"
@@ -30,7 +30,7 @@ export function BoardPage({lang}: {lang: string}) {
 				sorting={layoutHook.sortingHook.value}
 				setEditorInput={editorHook.setInput}
 			/>
-			<TaskEditor
+			<BoardEditor
 				lang={lang}
 				className={style.pageEditor}
 				editorHook={editorHook}

todoblue/src/app/[lang]/board/[board]/(page)/useBoardLayoutEditor.ts

@@ -26,19 +26,35 @@ export function useBoardLayoutEditor() {
 	])
 	const sortingHook = useCycler(useLocalStorage<number | undefined>(localStorageKeySorting, undefined), [
         [
-            SortingMode.ByStatus,
+			SortingMode.ByStatus,
             SortingMode.ByPriority,
             SortingMode.ByImportance,
             SortingMode.ByIcon,
             SortingMode.ByText,
         ],
         [
-            SortingMode.ByStatus,
+			SortingMode.ByStatus,
             SortingMode.ByImportance,
             SortingMode.ByPriority,
             SortingMode.ByIcon,
             SortingMode.ByText,
         ],
+		[
+			SortingMode.ByStatus,
+			SortingMode.ByText,
+		],
+		[
+			SortingMode.ByPriority,
+			SortingMode.ByImportance,
+			SortingMode.ByIcon,
+			SortingMode.ByText,
+		],
+		[
+			SortingMode.ByImportance,
+			SortingMode.ByPriority,
+			SortingMode.ByIcon,
+			SortingMode.ByText,
+		],
 		[
 			SortingMode.ByText,
 		]

todoblue/src/app/[lang]/board/[board]/page.module.css

@@ -10,13 +10,15 @@
 	grid-template-rows: auto 1fr 48px;
 	grid-row-gap: 8px;
 
-	justify-content: stretch;
+	justify-content: center;
 	align-items: stretch;
 
 	width: 100%;
 	height: 100%;
 
 	padding: 8px;
+
+	overflow: hidden;
 }
 
 .pageHeader {