feat(frontend): highlight overdue tasks consistently

frontend/src/components/tasks/partials/KanbanCard.vue

@@ -10,6 +10,7 @@
 		:style="{'background-color': color ?? undefined}"
 		:data-task-id="task.id"
 		:data-project-id="task.projectId"
+		:data-is-overdue="isOverdue || undefined"
 		@click.exact="openTaskDetail()"
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
@@ -44,7 +45,6 @@
 				<span
 					v-if="task.dueDate > 0"
 					v-tooltip="formatDateLong(task.dueDate)"
-					:class="{'overdue': isOverdue}"
 					class="due-date"
 				>
 					<span class="icon">
@@ -277,9 +277,10 @@ $task-background: var(--white);
 			margin-inline-end: .25rem;
 		}
 
-		&.overdue {
-			color: var(--danger);
 	}
+
+	&[data-is-overdue] .due-date {
+		color: var(--danger);
 	}
 
 	.label-wrapper .tag {

frontend/src/components/tasks/partials/Reminders.vue

@@ -3,7 +3,7 @@
 		<div
 			v-for="(r, index) in reminders"
 			:key="index"
-			:class="{ 'overdue': r.reminder < now }"
+			:data-is-overdue="r.reminder < now || undefined"
 			class="reminder-input"
 		>
 			<ReminderDetail
@@ -111,7 +111,7 @@ function removeReminderByIndex(index: number) {
 	display: flex;
 	align-items: center;
 
-	&.overdue :deep(.datepicker .show) {
+	&[data-is-overdue] :deep(.datepicker .show) {
 		color: var(--danger);
 	}
 

frontend/src/components/tasks/partials/SingleTaskInProject.vue

@@ -8,6 +8,7 @@
 			:class="{'is-loading': taskService.loading}"
 			class="task loader-container single-task"
 			tabindex="-1"
+			:data-is-overdue="isOverdue || undefined"
 			@click="openTaskDetail"
 			@keyup.enter="openTaskDetail"
 		>
@@ -89,7 +90,6 @@
 						>	
 							<time
 								:datetime="formatISO(task.dueDate)"
-								:class="{'overdue': task.dueDate <= new Date() && !task.done}"
 								class="is-italic"
 								:aria-expanded="isOpen ? 'true' : 'false'"
 							>
@@ -223,6 +223,7 @@ import {useIntervalFn} from '@vueuse/core'
 import {playPopSound} from '@/helpers/playPop'
 import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
 import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
+import {useGlobalNow} from '@/composables/useGlobalNow'
 
 const props = withDefaults(defineProps<{
 	theTask: ITask,
@@ -308,6 +309,14 @@ onMounted(updateDueDate)
 
 watch(() => task.value.dueDate, updateDueDate)
 
+const {now} = useGlobalNow()
+const isOverdue = computed(() => (
+       !task.value.done &&
+       task.value.dueDate !== null &&
+       task.value.dueDate.getTime() > 0 &&
+       task.value.dueDate.getTime() <= now.value.getTime()
+))
+
 let oldTask
 
 async function markAsDone(checked: boolean, wasReverted: boolean = false) {
@@ -429,6 +438,8 @@ defineExpose({
 
 		flex: 1 0 50%;
 
+	}
+
 	.dueDate {
 		display: inline-block;
 		margin-inline-start: 5px;
@@ -443,10 +454,9 @@ defineExpose({
 		}
 	}
 
-		.overdue {
+	&[data-is-overdue] .dueDate {
 		color: var(--danger);
 	}
-	}
 
 	.task-project {
 		inline-size: auto;

frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="task">
+	<div
+		class="task"
+		:data-is-overdue="task.dueDate <= new Date() && !task.done || undefined"
+	>
 		<span>
 			<span
 				v-if="showProject && typeof project !== 'undefined'"
@@ -55,7 +58,6 @@
 		>
 			<time
 				:datetime="formatISO(task.dueDate)"
-				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
 				class="is-italic"
 			>
 				– {{ $t('task.detail.due', {at: formatDisplayDate(task.dueDate)}) }}
@@ -151,7 +153,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
 		margin-inline-start: 5px;
 	}
 
-	.overdue {
+	&[data-is-overdue] .dueDate {
 		color: var(--danger);
 	}