fix(deps): update dependency ufo to v1.4.0

Setting an actual reminder date (not a relative one) flowed only from the component to the outside when setting it. When editing it, the reminder date would not be populated, causing the datepicker date to stay at the current date.

cypress/e2e/task/task.spec.ts

@@ -562,7 +562,7 @@ describe('Task', () => {
 				.click()
 
 			const today = new Date()
-			const day = today.toLocaleString('default', {day: '2-digit'})
+			const day = today.toLocaleString('default', {day: 'numeric'})
 			const month = today.toLocaleString('default', {month: 'short'})
 			const year = today.toLocaleString('default', {year: 'numeric'})
 			const date = `${day} ${month} ${year}, 12:00:00`
@@ -605,7 +605,7 @@ describe('Task', () => {
 				.click()
 
 			const today = new Date()
-			const day = today.toLocaleString('default', {day: '2-digit'})
+			const day = today.toLocaleString('default', {day: 'numeric'})
 			const month = today.toLocaleString('default', {month: 'short'})
 			const year = today.toLocaleString('default', {year: 'numeric'})
 			const date = `${day} ${month} ${year}, 12:00:00`

src/components/home/ProjectsNavigationItem.vue

@@ -30,7 +30,7 @@
 					</span>
 					<span
 						v-if="project.id > 0"
-						class="icon menu-item-icon handle lines-handle"
+						class="icon menu-item-icon handle"
 						:class="{'has-color-bubble': project.hexColor !== ''}"
 					>
 						<icon icon="grip-lines"/>

src/components/input/editor/TipTap.vue

@@ -304,7 +304,6 @@ watch(
 )
 
 const editor = useEditor({
-	content: modelValue,
 	editable: isEditing.value,
 	extensions: [
 		// Starterkit:
@@ -746,7 +745,7 @@ watch(
 		height: auto;
 
 		&.ProseMirror-selectednode {
-			outline: 3px solid #68cef8;
+			outline: 3px solid var(--primary);
 		}
 	}
 

src/components/notifications/notifications.vue

@@ -156,6 +156,8 @@ async function markAllRead() {
 	const notificationService = new NotificationService()
 	await notificationService.markAllRead()
 	success({message: t('notification.markAllReadSuccess')})
+	
+	notifications.value.forEach(n => n.readAt = new Date())
 }
 </script>
 

src/components/tasks/GanttChart.vue

@@ -123,6 +123,23 @@ watch(
 
 function transformTaskToGanttBar(t: ITask) {
 	const black = 'var(--grey-800)'
+	
+	const taskColor = getHexColor(t.hexColor)
+	
+	let textColor = black
+	let backgroundColor = 'var(--grey-100)'
+	if(t.startDate) {
+		backgroundColor = taskColor ?? ''
+		if(typeof taskColor === 'undefined') {
+			textColor = 'white'
+			backgroundColor = 'var(--primary)'
+		} else if(colorIsDark(taskColor)) {
+			textColor = black
+		} else {
+			textColor = 'white'
+		}
+	}
+	
 	return [{
 		startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : props.defaultTaskStartDate),
 		endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : props.defaultTaskEndDate),
@@ -131,8 +148,8 @@ function transformTaskToGanttBar(t: ITask) {
 			label: t.title,
 			hasHandles: true,
 			style: {
-				color: t.startDate ? (colorIsDark(getHexColor(t.hexColor)) ? black : 'white') : black,
-				backgroundColor: t.startDate ? getHexColor(t.hexColor) : 'var(--grey-100)',
+				color: textColor,
+				backgroundColor,
 				border: t.startDate ? '' : '2px dashed var(--grey-300)',
 				'text-decoration': t.done ? 'line-through' : null,
 			},

src/components/tasks/partials/assigneeList.vue

@@ -33,7 +33,7 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
 				:avatar-size="avatarSize"
 				:show-username="false"
 				:user="user"
-				:class="{'m-2': hasDelete, 'mr-3': !hasDelete}"
+				:class="{'m-2': hasDelete}"
 			/>
 			<BaseButton
 				:key="'delete'+user.id"

src/components/tasks/partials/editAssignees.vue

@@ -1,5 +1,7 @@
 <template>
 	<Multiselect
+		class="edit-assignees"
+		:class="{'has-assignees': assignees.length > 0}"
 		:loading="projectUserService.loading"
 		:placeholder="$t('task.assignee.placeholder')"
 		:multiple="true"
@@ -115,3 +117,9 @@ async function findUser(query: string) {
 		})
 }
 </script>
+
+<style lang="scss">
+.edit-assignees.has-assignees.multiselect .input {
+	padding-left: 0;
+}
+</style>

src/components/tasks/partials/kanban-card.vue

@@ -4,10 +4,10 @@
 		:class="{
 			'is-loading': loadingInternal || loading,
 			'draggable': !(loadingInternal || loading),
-			'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
-			'has-custom-background-color': color !== TASK_DEFAULT_COLOR ? color : undefined,
+			'has-light-text': !colorIsDark(color),
+			'has-custom-background-color': color ?? undefined,
 		}"
-		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : undefined}"
+		:style="{'background-color': color ?? undefined}"
 		@click.exact="openTaskDetail()"
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
@@ -83,7 +83,7 @@ import Done from '@/components/misc/Done.vue'
 import Labels from '@/components/tasks/partials/labels.vue'
 import ChecklistSummary from './checklist-summary.vue'
 
-import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
+import {getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
 import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 import AttachmentService from '@/services/attachment'

src/components/tasks/partials/labels.vue

@@ -25,5 +25,9 @@ defineProps({
 <style lang="scss" scoped>
 .label-wrapper {
 	display: inline;
+	
+	:deep(.tag) {
+		margin-bottom: .25rem;
+	}
 }
 </style>

src/components/tasks/partials/reminder-detail.vue

@@ -46,7 +46,7 @@
 					<DatepickerInline
 						v-if="activeForm === 'absolute'"
 						v-model="reminderDate"
-						@update:modelValue="setReminderDate(close)"
+						@update:modelValue="setReminderDateAndClose(close)"
 					/>
 
 					<x-button
@@ -105,7 +105,7 @@ const presets = computed<TaskReminderModel[]>(() => [
 	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: defaultRelativeTo},
 	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: defaultRelativeTo},
 ])
-const reminderDate = ref(null)
+const reminderDate = ref<Date|null>(null)
 
 type availableForms = null | 'relative' | 'absolute'
 
@@ -135,7 +135,17 @@ const reminderText = computed(() => {
 watch(
 	() => modelValue,
 	(newReminder) => {
-		reminder.value = newReminder || new TaskReminderModel()
+		if(newReminder) {
+			reminder.value = newReminder
+			
+			if(newReminder.relativeTo === null) {
+				reminderDate.value = new Date(newReminder.reminder)
+			}
+			
+			return
+		}
+		
+		reminder.value = new TaskReminderModel()
 	},
 	{immediate: true},
 )
@@ -148,7 +158,7 @@ function updateData() {
 	}
 }
 
-function setReminderDate(close) {
+function setReminderDateAndClose(close) {
 	reminder.value.reminder = reminderDate.value === null
 		? null
 		: new Date(reminderDate.value)

src/components/tasks/partials/singleTaskInProject.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div
 			:class="{'is-loading': taskService.loading}"
-			class="task loader-container"
+			class="task loader-container single-task"
 			@mouseup.stop.self="openTaskDetail"
 			@mousedown.stop.self="focusTaskLink"
 			ref="taskContainerRef"
@@ -435,21 +435,12 @@ function focusTaskLink() {
 		}
 	}
 
-	.handle {
-		opacity: 1;
-		transition: opacity $transition;
-		margin-right: .25rem;
-		cursor: grab;
-	}
-
 	@media(hover: hover) and (pointer: fine) {
-		& .favorite,
-		& .handle {
+		& .favorite {
 			opacity: 0;
 		}
 
-		&:hover .favorite,
-		&:hover .handle {
+		&:hover .favorite {
 			opacity: 1;
 		}
 	}

src/models/task.ts

@@ -23,11 +23,9 @@ import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import TaskReminderModel from '@/models/taskReminder'
 import {secondsToPeriod} from '@/helpers/time/period'
 
-export const TASK_DEFAULT_COLOR = '#1973ff'
-
-export function	getHexColor(hexColor: string): string {
+export function	getHexColor(hexColor: string): string | undefined {
 	if (hexColor === '' || hexColor === '#') {
-		return TASK_DEFAULT_COLOR
+		return undefined
 	}
 
 	return hexColor

src/views/project/ProjectList.vue

@@ -333,4 +333,23 @@ function prepareFiltersAndLoadTasks() {
 .control.has-icons-right .icon {
 	transition: all $transition;
 }
+
+:deep(.single-task) {
+	.handle {
+		opacity: 1;
+		transition: opacity $transition;
+		margin-right: .25rem;
+		cursor: grab;
+	}
+
+	@media(hover: hover) and (pointer: fine) {
+		& .handle {
+			opacity: 0;
+		}
+
+		&:hover .handle {
+			opacity: 1;
+		}
+	}
+}
 </style>

src/views/tasks/TaskDetailView.vue

@@ -472,7 +472,7 @@ import {klona} from 'klona/lite'
 import {eventToHotkeyString} from '@github/hotkey'
 
 import TaskService from '@/services/task'
-import TaskModel, {TASK_DEFAULT_COLOR} from '@/models/task'
+import TaskModel from '@/models/task'
 
 import type {ITask} from '@/modelTypes/ITask'
 import type {IProject} from '@/modelTypes/IProject'
@@ -582,9 +582,7 @@ const color = computed(() => {
 		? task.value.getHexColor()
 		: undefined
 
-	return color === TASK_DEFAULT_COLOR
-		? ''
-		: color
+	return color
 })
 
 const hasAttachments = computed(() => attachmentStore.attachments.length > 0)