fix(deps): update dependency @kyvg/vue3-notification to v3.1.1

This would lead to failing attempts when updating the task later on (for example marking it as favorite)

.env.local.example

@@ -6,7 +6,6 @@
 # (2) Comment in and adjust the values as needed.
 
 # VITE_IS_ONLINE=true
-# VITE_WORKBOX_DEBUG=false
 # SENTRY_AUTH_TOKEN=YOUR_TOKEN
 # SENTRY_ORG=vikunja
 # SENTRY_PROJECT=frontend-oss

cypress/e2e/project/project-view-kanban.spec.ts

@@ -5,6 +5,19 @@ import {ProjectFactory} from '../../factories/project'
 import {TaskFactory} from '../../factories/task'
 import {prepareProjects} from './prepareProjects'
 
+function createSingleTaskInBucket(count = 1, attrs = {}) {
+	const projects = ProjectFactory.create(1)
+	const buckets = BucketFactory.create(2, {
+		project_id: projects[0].id,
+	})
+	const tasks = TaskFactory.create(count, {
+		project_id: projects[0].id,
+		bucket_id: buckets[0].id,
+		...attrs,
+	})
+	return tasks[0]
+}
+
 describe('Project View Kanban', () => {
 	createFakeUserAndLogin()
 	prepareProjects()
@@ -207,15 +220,7 @@ describe('Project View Kanban', () => {
 	})
 	
 	it('Should remove a task from the board when deleting it', () => {
-		const projects = ProjectFactory.create(1)
-		const buckets = BucketFactory.create(2, {
-			project_id: projects[0].id,
-		})
-		const tasks = TaskFactory.create(5, {
-			project_id: 1,
-			bucket_id: buckets[0].id,
-		})
-		const task = tasks[0]
+		const task = createSingleTaskInBucket(5)
 		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .tasks .task')
@@ -238,4 +243,43 @@ describe('Project View Kanban', () => {
 		cy.get('.kanban .bucket .tasks')
 			.should('not.contain', task.title)
 	})
+
+	it('Should show a task description icon if the task has a description', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
+		const task = createSingleTaskInBucket(1, {
+			description: 'Lorem Ipsum',
+		})
+
+		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.wait('@loadTasks')
+
+		cy.get('.bucket .tasks .task .footer .icon svg')
+			.should('exist')
+	})
+
+	it('Should not show a task description icon if the task has an empty description', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
+		const task = createSingleTaskInBucket(1, {
+			description: '',
+		})
+
+		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.wait('@loadTasks')
+
+		cy.get('.bucket .tasks .task .footer .icon svg')
+			.should('not.exist')
+	})
+
+	it('Should not show a task description icon if the task has a description containing only an empty p tag', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
+		const task = createSingleTaskInBucket(1, {
+			description: '<p></p>',
+		})
+
+		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.wait('@loadTasks')
+
+		cy.get('.bucket .tasks .task .footer .icon svg')
+			.should('not.exist')
+	})
 })

cypress/e2e/task/task.spec.ts

@@ -36,7 +36,7 @@ function uploadAttachmentAndVerify(taskId: number) {
 	cy.get('.task-view .action-buttons .button')
 		.contains('Add Attachments')
 		.click()
-	cy.get('input[type=file]', {timeout: 1000})
+	cy.get('input[type=file]#files', {timeout: 1000})
 		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
 	cy.wait('@uploadAttachment')
 
@@ -112,10 +112,50 @@ describe('Task', () => {
 			.should('contain', 'Favorites')
 	})
 
+	it('Should show a task description icon if the task has a description', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		TaskFactory.create(1, {
+			description: 'Lorem Ipsum',
+		})
+
+		cy.visit('/projects/1/list')
+		cy.wait('@loadTasks')
+
+		cy.get('.tasks .task .project-task-icon')
+			.should('exist')
+	})
+
+	it('Should not show a task description icon if the task has an empty description', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		TaskFactory.create(1, {
+			description: '',
+		})
+
+		cy.visit('/projects/1/list')
+		cy.wait('@loadTasks')
+
+		cy.get('.tasks .task .project-task-icon')
+			.should('not.exist')
+	})
+
+	it('Should not show a task description icon if the task has a description containing only an empty p tag', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		TaskFactory.create(1, {
+			description: '<p></p>',
+		})
+
+		cy.visit('/projects/1/list')
+		cy.wait('@loadTasks')
+
+		cy.get('.tasks .task .project-task-icon')
+			.should('not.exist')
+	})
+
 	describe('Task Detail View', () => {
 		beforeEach(() => {
 			TaskCommentFactory.truncate()
 			LabelTaskFactory.truncate()
+			TaskAttachmentFactory.truncate()
 		})
 
 		it('Shows all task details', () => {
@@ -213,6 +253,45 @@ describe('Task', () => {
 				.should('exist')
 		})
 
+		it('Shows an empty editor when the description of a task is empty', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: '',
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
+				.should('have.attr', 'data-placeholder')
+			cy.get('.task-view .details.content.description .tiptap button.done-edit')
+				.should('not.exist')
+		})
+
+		it('Shows a preview editor when the description of a task is not empty', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: 'Lorem Ipsum dolor sit amet',
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
+				.should('not.have.attr', 'data-placeholder')
+			cy.get('.task-view .details.content.description .tiptap button.done-edit')
+				.should('exist')
+		})
+
+		it('Shows a preview editor when the description of a task contains html', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: '<p>Lorem Ipsum dolor sit amet</p>',
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
+				.should('not.have.attr', 'data-placeholder')
+			cy.get('.task-view .details.content.description .tiptap button.done-edit')
+				.should('exist')
+		})
+
 		it('Can add a new comment', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
@@ -692,7 +771,7 @@ describe('Task', () => {
 				.should('exist')
 		})
 
-		it('Can check items off a checklist', () => {
+		it.only('Can check items off a checklist', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 				description: `
@@ -761,7 +840,7 @@ describe('Task', () => {
 				.should('exist')
 		})
 
-		it.only('Should render an image from attachment', async () => {
+		it('Should render an image from attachment', async () => {
 
 			TaskAttachmentFactory.truncate()
 

env.d.ts

@@ -25,7 +25,6 @@ interface ImportMetaEnv {
 	readonly SENTRY_ORG?: string
 	readonly SENTRY_PROJECT?: string
 
-	readonly VITE_WORKBOX_DEBUG?: boolean
 	readonly VITE_IS_ONLINE: boolean
 }
 

package.json

@@ -52,7 +52,7 @@
     "@github/hotkey": "2.3.1",
     "@infectoone/vue-ganttastic": "2.2.0",
     "@intlify/unplugin-vue-i18n": "1.5.0",
-    "@kyvg/vue3-notification": "3.1.0",
+    "@kyvg/vue3-notification": "3.1.1",
     "@sentry/tracing": "7.85.0",
     "@sentry/vue": "7.85.0",
     "@tiptap/core": "2.1.13",
@@ -136,23 +136,23 @@
     "@types/is-touch-device": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
     "@types/marked": "5.0.2",
-    "@types/node": "20.10.3",
+    "@types/node": "20.10.4",
     "@types/postcss-preset-env": "7.7.0",
     "@types/sortablejs": "1.15.7",
-    "@typescript-eslint/eslint-plugin": "6.13.2",
-    "@typescript-eslint/parser": "6.13.2",
+    "@typescript-eslint/eslint-plugin": "6.14.0",
+    "@typescript-eslint/parser": "6.14.0",
     "@vitejs/plugin-legacy": "5.2.0",
-    "@vitejs/plugin-vue": "4.5.1",
+    "@vitejs/plugin-vue": "4.5.2",
     "@vue/eslint-config-typescript": "12.0.0",
     "@vue/test-utils": "2.4.3",
     "@vue/tsconfig": "0.4.0",
     "autoprefixer": "10.4.16",
     "browserslist": "4.22.2",
-    "caniuse-lite": "1.0.30001566",
+    "caniuse-lite": "1.0.30001570",
     "css-has-pseudo": "6.0.0",
-    "csstype": "3.1.2",
+    "csstype": "3.1.3",
     "cypress": "13.6.1",
-    "esbuild": "0.19.8",
+    "esbuild": "0.19.9",
     "eslint": "8.55.0",
     "eslint-plugin-vue": "9.19.2",
     "happy-dom": "12.10.3",
@@ -162,17 +162,17 @@
     "postcss-easings": "4.0.0",
     "postcss-focus-within": "8.0.0",
     "postcss-preset-env": "9.3.0",
-    "rollup": "4.6.1",
-    "rollup-plugin-visualizer": "5.10.0",
+    "rollup": "4.9.0",
+    "rollup-plugin-visualizer": "5.11.0",
     "sass": "1.69.5",
     "start-server-and-test": "2.0.3",
-    "typescript": "5.3.2",
-    "vite": "5.0.6",
+    "typescript": "5.3.3",
+    "vite": "5.0.8",
     "vite-plugin-inject-preload": "1.3.3",
-    "vite-plugin-pwa": "0.17.3",
+    "vite-plugin-pwa": "0.17.4",
     "vite-plugin-sentry": "1.3.0",
     "vite-svg-loader": "5.1.0",
-    "vitest": "1.0.1",
+    "vitest": "1.0.4",
     "vue-tsc": "1.8.25",
     "wait-on": "7.2.0",
     "workbox-cli": "7.0.0"

src/components/home/ProjectsNavigationItem.vue

@@ -47,7 +47,6 @@
 				<icon :icon="project.isFavorite ? 'star' : ['far', 'star']"/>
 			</BaseButton>
 			<ProjectSettingsDropdown
-				v-if="project.id > 0"
 				class="menu-list-dropdown"
 				:project="project"
 				:level="level"
@@ -58,7 +57,6 @@
 					</BaseButton>
 				</template>
 			</ProjectSettingsDropdown>
-			<span class="list-setting-spacer" v-else></span>
 		</div>
 		<ProjectsNavigation
 			v-if="canNestDeeper && childProjectsOpen && canCollapse"

src/components/input/editor/TipTap.vue

@@ -118,7 +118,6 @@
 
 <script setup lang="ts">
 import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
-import {refDebounced} from '@vueuse/core'
 
 import EditorToolbar from './EditorToolbar.vue'
 
@@ -173,6 +172,7 @@ import {Placeholder} from '@tiptap/extension-placeholder'
 import {eventToHotkeyString} from '@github/hotkey'
 import {mergeAttributes} from '@tiptap/core'
 import {createRandomID} from '@/helpers/randomId'
+import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
 
 const tiptapInstanceRef = ref<HTMLInputElement | null>(null)
 
@@ -200,7 +200,9 @@ const CustomTableCell = TableCell.extend({
 })
 
 type CacheKey = `${ITask['id']}-${IAttachment['id']}`
-const loadedAttachments = ref<{ [key: CacheKey]: string }>({})
+const loadedAttachments = ref<{
+	[key: CacheKey]: string
+}>({})
 
 const CustomImage = Image.extend({
 	addAttributes() {
@@ -272,7 +274,6 @@ const {
 	showSave = false,
 	placeholder = '',
 	editShortcut = '',
-	initialMode = 'edit',
 } = defineProps<{
 	modelValue: string,
 	uploadCallback?: UploadCallback,
@@ -281,13 +282,11 @@ const {
 	showSave?: boolean,
 	placeholder?: string,
 	editShortcut?: string,
-	initialMode?: Mode,
 }>()
 
 const emit = defineEmits(['update:modelValue', 'save'])
 
-const inputHTML = ref('')
-const internalMode = ref<Mode>(initialMode)
+const internalMode = ref<Mode>('edit')
 const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)
 
 const editor = useEditor({
@@ -359,14 +358,28 @@ const editor = useEditor({
 		TaskItem.configure({
 			nested: true,
 			onReadOnlyChecked: (node: Node, checked: boolean): boolean => {
-				if (isEditEnabled) {
-					node.attrs.checked = checked
-					inputHTML.value = editor.value?.getHTML()
-					bubbleSave()
-					return true
+				if (!isEditEnabled) {
+					return false
 				}
 
-				return false
+				// The following is a workaround for this bug:
+				// https://github.com/ueberdosis/tiptap/issues/4521
+				// https://github.com/ueberdosis/tiptap/issues/3676
+
+				editor.value!.state.doc.descendants((subnode, pos) => {
+					if (node.eq(subnode)) {
+						const {tr} = editor.value!.state
+						tr.setNodeMarkup(pos, undefined, {
+							...node.attrs,
+							checked,
+						})
+						editor.value!.view.dispatch(tr)
+						bubbleSave()
+					}
+				})
+
+
+				return true
 			},
 		}),
 
@@ -376,52 +389,55 @@ const editor = useEditor({
 		BubbleMenu,
 	],
 	onUpdate: () => {
-		inputHTML.value = editor.value!.getHTML()
+		bubbleNow()
 	},
 })
 
-watch(
-	() => modelValue,
-	value => {
-		inputHTML.value = value
-
-		if (!editor?.value) return
-
-		if (editor.value.getHTML() === value) {
-			return
-		}
-
-		editor.value.commands.setContent(value, false)
-	},
-)
-
-const debouncedInputHTML = refDebounced(inputHTML, 1000)
-watch(debouncedInputHTML, () => bubbleNow())
-
-function bubbleNow() {
-	emit('update:modelValue', inputHTML.value)
-}
-
-function bubbleSave() {
-	bubbleNow()
-	emit('save', inputHTML.value)
-	if (isEditing.value) {
-		internalMode.value = 'preview'
-	}
-}
-
-function setEdit() {
-	internalMode.value = 'edit'
-	editor.value?.commands.focus()
-}
-
 watch(
 	() => isEditing.value,
 	() => {
 		editor.value?.setEditable(isEditing.value)
 	},
+	{immediate: true},
 )
 
+watch(
+	() => modelValue,
+	value => {
+		if (!editor?.value) return
+
+		if (editor.value.getHTML() === value) {
+			return
+		}
+
+		setModeAndValue(value)
+	},
+	{immediate: true},
+)
+
+function bubbleNow() {
+	if (editor.value?.getHTML() === modelValue) {
+		return
+	}
+
+	emit('update:modelValue', editor.value?.getHTML())
+}
+
+function bubbleSave() {
+	bubbleNow()
+	emit('save', editor.value?.getHTML())
+	if (isEditing.value) {
+		internalMode.value = 'preview'
+	}
+}
+
+function setEdit(focus: boolean = true) {
+	internalMode.value = 'edit'
+	if (focus) {
+		editor.value?.commands.focus()
+	}
+}
+
 onBeforeUnmount(() => editor.value?.destroy())
 
 const uploadInputRef = ref<HTMLInputElement | null>(null)
@@ -491,15 +507,17 @@ function setLink() {
 		.run()
 }
 
-onMounted(() => {
-	internalMode.value = initialMode
-	nextTick(() => {
-		const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
-		input?.addEventListener('paste', handleImagePaste)
-	})
+onMounted(async () => {
 	if (editShortcut !== '') {
 		document.addEventListener('keydown', setFocusToEditor)
 	}
+
+	await nextTick()
+
+	const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
+	input?.addEventListener('paste', handleImagePaste)
+
+	setModeAndValue(modelValue)
 })
 
 onBeforeUnmount(() => {
@@ -512,6 +530,11 @@ onBeforeUnmount(() => {
 	}
 })
 
+function setModeAndValue(value: string) {
+	internalMode.value = isEditorContentEmpty(value) ? 'edit' : 'preview'
+	editor.value?.commands.setContent(value, false)
+}
+
 function handleImagePaste(event) {
 	if (event?.clipboardData?.items?.length === 0) {
 		return
@@ -521,7 +544,6 @@ function handleImagePaste(event) {
 
 	const image = event.clipboardData.items[0]
 	if (image.kind === 'file' && image.type.startsWith('image/')) {
-		console.log('img', image.getAsFile())
 		uploadAndInsertFiles([image.getAsFile()])
 	}
 }
@@ -538,7 +560,7 @@ function setFocusToEditor(event) {
 	}
 	event.preventDefault()
 
-	if (initialMode === 'preview' && isEditEnabled && !isEditing.value) {
+	if (!isEditing.value && isEditEnabled) {
 		internalMode.value = 'edit'
 	}
 

src/components/tasks/add-task.vue

@@ -149,13 +149,15 @@ async function addTask() {
 		await Promise.all(newTasks)
 
 		const taskRelationService = new TaskRelationService()
+		const allParentTasks = tasksToCreate.filter(t => t.parent !== null).map(t => t.parent)
 		const relations = tasksToCreate.map(async t => {
 			const createdTask = createdTasks[t.title]
 			if (typeof createdTask === 'undefined') {
 				return
 			}
 
-			if (t.parent === null) {
+			const isParent = allParentTasks.includes(t.title)
+			if (t.parent === null && !isParent) {
 				emit('taskAdded', createdTask)
 				return
 			}
@@ -171,10 +173,19 @@ async function addTask() {
 				relationKind: RELATION_KIND.PARENTTASK,
 			}))
 
-			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [createdParentTask]
+			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [{
+				...createdParentTask,
+				relatedTasks: {}, // To avoid endless references
+			}]
 			// we're only emitting here so that the relation shows up in the project
 			emit('taskAdded', createdTask)
 
+			createdParentTask.relatedTasks[RELATION_KIND.SUBTASK] = [{
+				...createdTask,
+				relatedTasks: {}, // To avoid endless references
+			}]
+			emit('taskAdded', createdParentTask)
+
 			return rel
 		})
 		await Promise.all(relations)

src/components/tasks/partials/description.vue

@@ -26,7 +26,6 @@
 			v-model="description"
 			@update:model-value="saveWithDelay"
 			@save="save"
-			:initial-mode="isEditorContentEmpty(description) ? 'edit' : 'preview'"
 		/>
 	</div>
 </template>
@@ -39,7 +38,6 @@ import Editor from '@/components/input/AsyncEditor'
 
 import type {ITask} from '@/modelTypes/ITask'
 import {useTaskStore} from '@/stores/tasks'
-import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
 
 type AttachmentUploadFunction = (file: File, onSuccess: (attachmentUrl: string) => void) => Promise<string>
 

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

@@ -5,6 +5,7 @@
 			'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,
 		}"
 		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : undefined}"
 		@click.exact="openTaskDetail()"
@@ -48,7 +49,10 @@
 			</progress>
 			<div class="footer">
 				<labels :labels="task.labels"/>
-				<priority-label :priority="task.priority" :done="task.done" class="is-inline-flex is-align-items-center"/>
+				<priority-label
+					:priority="task.priority"
+					:done="task.done"
+					class="is-inline-flex is-align-items-center"/>
 				<assignee-list
 					v-if="task.assignees.length > 0"
 					:assignees="task.assignees"
@@ -60,7 +64,7 @@
 				<span class="icon" v-if="task.attachments.length > 0">
 					<icon icon="paperclip"/>	
 				</span>
-				<span v-if="task.description" class="icon">
+				<span v-if="!isEditorContentEmpty(task.description)" class="icon">
 					<icon icon="align-left"/>
 				</span>
 				<span class="icon" v-if="task.repeatAfter.amount > 0">
@@ -91,6 +95,7 @@ import {useTaskStore} from '@/stores/tasks'
 import AssigneeList from '@/components/tasks/partials/assigneeList.vue'
 import {useAuthStore} from '@/stores/auth'
 import {playPopSound} from '@/helpers/playPop'
+import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
 
 const router = useRouter()
 
@@ -113,7 +118,7 @@ async function toggleTaskDone(task: ITask) {
 			...task,
 			done: !task.done,
 		})
-		
+
 		if (updatedTask.done && useAuthStore().settings.frontendSettings.playSoundWhenDone) {
 			playPopSound()
 		}
@@ -279,6 +284,16 @@ $task-background: var(--white);
 		width: auto;
 	}
 
+	&.has-custom-background-color {
+		color: hsl(215, 27.9%, 16.9%); // copied from grey-800 to avoid different values in dark mode
+
+		.footer .icon,
+		.due-date,
+		.priority-label {
+			background: hsl(220, 13%, 91%);
+		}
+	}
+
 	&.has-light-text {
 		color: var(--white);
 

src/components/tasks/partials/singleTaskInProject.vue

@@ -93,7 +93,7 @@
 				<span class="project-task-icon" v-if="task.attachments.length > 0">
 					<icon icon="paperclip"/>
 				</span>
-				<span class="project-task-icon" v-if="task.description">
+				<span class="project-task-icon" v-if="!isEditorContentEmpty(task.description)">
 					<icon icon="align-left"/>
 				</span>
 				<span class="project-task-icon" v-if="task.repeatAfter.amount > 0">
@@ -184,6 +184,7 @@ import AssigneeList from '@/components/tasks/partials/assigneeList.vue'
 import {useIntervalFn} from '@vueuse/core'
 import {playPopSound} from '@/helpers/playPop'
 import {useAuthStore} from '@/stores/auth'
+import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
 
 const {
 	theTask,

src/sw.ts

@@ -11,7 +11,6 @@ const workboxVersion = 'v7.0.0'
 importScripts(`${fullBaseUrl}workbox-${workboxVersion}/workbox-sw.js`)
 workbox.setConfig({
 	modulePathPrefix: `${fullBaseUrl}workbox-${workboxVersion}`,
-	debug: Boolean(import.meta.env.VITE_WORKBOX_DEBUG),
 })
 
 import { precacheAndRoute } from 'workbox-precaching'

src/views/project/ProjectList.vue

@@ -175,7 +175,11 @@ const tasks = ref<ITask[]>([])
 watch(
 	allTasks,
 	() => {
-		tasks.value = [...allTasks.value].filter(t => typeof t.relatedTasks?.parenttask === 'undefined')
+		tasks.value = [...allTasks.value]
+		if (projectId < 0) {
+			return
+		}
+		tasks.value = tasks.value.filter(t => typeof t.relatedTasks?.parenttask === 'undefined')
 	},
 )
 
@@ -241,9 +245,9 @@ function updateTaskList(task: ITask) {
 		loadTasks()
 	}
 	else {
-		tasks.value = [
+		allTasks.value = [
 			task,
-			...tasks.value,
+			...allTasks.value,
 		]
 	}
 

src/views/tasks/TaskDetailView.vue

@@ -6,7 +6,8 @@
 			'is-modal': isModal,
 		}"
 	>
-		<div class="task-view">
+		<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
+		<div class="task-view" v-if="visible">
 			<Heading
 				:task="task"
 				@update:task="Object.assign(task, $event)"
@@ -605,7 +606,8 @@ watch(
 		}
 
 		try {
-			Object.assign(task.value, await taskService.get({id}))
+			const loaded = await taskService.get({id})
+			Object.assign(task.value, loaded)
 			attachmentStore.set(task.value.attachments)
 			taskColor.value = task.value.hexColor
 			setActiveFields()