From e8a5631ffed88a0d1057e3085c0adc3279b9c3d7 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <6173598+dpschen@users.noreply.github.com>
Date: Tue, 3 Mar 2026 12:37:21 +0100
Subject: [PATCH] feat(frontend): highlight overdue tasks consistently (#958)

---
 .../components/tasks/partials/KanbanCard.vue  |  9 ++---
 .../components/tasks/partials/Reminders.vue   |  4 +--
 .../tasks/partials/SingleTaskInProject.vue    | 36 ++++++++++++-------
 .../partials/SingleTaskInlineReadonly.vue     |  8 +++--
 4 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/tasks/partials/KanbanCard.vue b/frontend/src/components/tasks/partials/KanbanCard.vue
index 593f652b6..6ece2f737 100644
--- a/frontend/src/components/tasks/partials/KanbanCard.vue
+++ b/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 {
diff --git a/frontend/src/components/tasks/partials/Reminders.vue b/frontend/src/components/tasks/partials/Reminders.vue
index 93cdbf077..7de8d9aa4 100644
--- a/frontend/src/components/tasks/partials/Reminders.vue
+++ b/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);
 	}
 
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index b9f899f7e..68b2421a5 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/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,23 +438,24 @@ defineExpose({
 
 		flex: 1 0 50%;
 
-		.dueDate {
-			display: inline-block;
-			margin-inline-start: 5px;
+	}
 
-			&:focus-visible {
-				box-shadow: none;
+	.dueDate {
+		display: inline-block;
+		margin-inline-start: 5px;
 
-				time {
-					box-shadow: 0 0 0 1px hsla(var(--primary-hsl), 0.5);
-					border-radius: 3px;
-				}
+		&:focus-visible {
+			box-shadow: none;
+
+			time {
+				box-shadow: 0 0 0 1px hsla(var(--primary-hsl), 0.5);
+				border-radius: 3px;
 			}
 		}
+	}
 
-		.overdue {
-			color: var(--danger);
-		}
+	&[data-is-overdue] .dueDate {
+		color: var(--danger);
 	}
 
 	.task-project {
diff --git a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue b/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
index 9df5a4652..7b06329f1 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
+++ b/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);
 	}