Font weights in todo list reflect due date better

This commit is contained in:
2026-05-25 15:46:54 +02:00
parent da3ceeaff3
commit baddc945f6
+10 -6
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue"
import { Todo } from "@/types";
import { toLocalDate, toDuration, isToday, daysFromNow } from "@/lib/utils";
import { toDuration, isToday, isSoon, daysFromNow } from "@/lib/utils";
import { Mail, PhoneCall, ClipboardCheck, Repeat } from "lucide-vue-next"
import { Badge } from '@/components/ui/crm-badge'
@@ -131,9 +131,10 @@ const shouldDisplay = (todo: Todo) => {
<div v-if="todos" v-for="group in groupedTodos">
<div v-if="!todosEmpty(group.todos)">
<!-- Group header -->
<h3 class="mt-4 mb-2 text-sm text-muted-foreground" :class="{
'text-destructive! font-bold': group.key === 'overdue',
'text-warning! font-bold': group.key === 'today'
<h3 class="mt-4 mb-2 text-sm font-bold" :class="{
'text-destructive': group.key === 'overdue',
'text-warning': group.key === 'today',
'text-muted-foreground': group.key === 'noDueDate'
}">
{{ groupNameForKey(group.key) }}
</h3>
@@ -161,7 +162,10 @@ const shouldDisplay = (todo: Todo) => {
<span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
<!-- Title -->
<label :for="todo.id" class="my-0 px-0 border-0 outline-0 shadow-none" :class="{
<label :for="todo.id" class="my-0 px-0 border-0 outline-0 shadow-none text-sm" :class="{
'font-bold': group.key === 'overdue',
'font-semibold': group.key === 'tomorrow' || group.key === 'today',
'font-medium': isSoon(todo.dueDate || ''),
'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed'
}">
{{ todoTitle(todo.title) }}
@@ -169,7 +173,7 @@ const shouldDisplay = (todo: Todo) => {
<!-- Date -->
<div class="text-xs text-muted-foreground flex gap-3 items-center mt-1">
<Badge v-if="props.showTodoable && todoBadge(todo.title)" variant="outline">{{
<Badge v-if="props.showTodoable && todoBadge(todo.title)" variant="secondary">{{
todoBadge(todo.title)
}}
</Badge>