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

.env.local.example

@@ -6,6 +6,7 @@
 # (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,19 +5,6 @@ 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()
@@ -220,7 +207,15 @@ describe('Project View Kanban', () => {
 	})
 	
 	it('Should remove a task from the board when deleting it', () => {
-		const task = createSingleTaskInBucket(5)
+		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]
 		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .tasks .task')
@@ -243,43 +238,4 @@ 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]#files', {timeout: 1000})
+	cy.get('input[type=file]', {timeout: 1000})
 		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
 	cy.wait('@uploadAttachment')
 
@@ -112,50 +112,10 @@ 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', () => {
@@ -253,45 +213,6 @@ 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,
@@ -771,7 +692,7 @@ describe('Task', () => {
 				.should('exist')
 		})
 
-		it.only('Can check items off a checklist', () => {
+		it('Can check items off a checklist', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 				description: `
@@ -840,7 +761,7 @@ describe('Task', () => {
 				.should('exist')
 		})
 
-		it('Should render an image from attachment', async () => {
+		it.only('Should render an image from attachment', async () => {
 
 			TaskAttachmentFactory.truncate()
 

env.d.ts

@@ -25,6 +25,7 @@ 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.1",
+    "@kyvg/vue3-notification": "3.1.0",
     "@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.4",
+    "@types/node": "20.10.3",
     "@types/postcss-preset-env": "7.7.0",
     "@types/sortablejs": "1.15.7",
-    "@typescript-eslint/eslint-plugin": "6.14.0",
-    "@typescript-eslint/parser": "6.14.0",
+    "@typescript-eslint/eslint-plugin": "6.13.2",
+    "@typescript-eslint/parser": "6.13.2",
     "@vitejs/plugin-legacy": "5.2.0",
-    "@vitejs/plugin-vue": "4.5.2",
+    "@vitejs/plugin-vue": "4.5.1",
     "@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.30001570",
+    "caniuse-lite": "1.0.30001566",
     "css-has-pseudo": "6.0.0",
-    "csstype": "3.1.3",
+    "csstype": "3.1.2",
     "cypress": "13.6.1",
-    "esbuild": "0.19.9",
+    "esbuild": "0.19.8",
     "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.9.0",
-    "rollup-plugin-visualizer": "5.11.0",
+    "rollup": "4.6.1",
+    "rollup-plugin-visualizer": "5.10.0",
     "sass": "1.69.5",
     "start-server-and-test": "2.0.3",
-    "typescript": "5.3.3",
-    "vite": "5.0.8",
+    "typescript": "5.3.2",
+    "vite": "5.0.6",
     "vite-plugin-inject-preload": "1.3.3",
-    "vite-plugin-pwa": "0.17.4",
+    "vite-plugin-pwa": "0.17.3",
     "vite-plugin-sentry": "1.3.0",
     "vite-svg-loader": "5.1.0",
-    "vitest": "1.0.4",
+    "vitest": "1.0.1",
     "vue-tsc": "1.8.25",
     "wait-on": "7.2.0",
     "workbox-cli": "7.0.0"

src/components/home/ProjectsNavigationItem.vue

@@ -47,6 +47,7 @@
 				<icon :icon="project.isFavorite ? 'star' : ['far', 'star']"/>
 			</BaseButton>
 			<ProjectSettingsDropdown
+				v-if="project.id > 0"
 				class="menu-list-dropdown"
 				:project="project"
 				:level="level"
@@ -57,6 +58,7 @@
 					</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,6 +118,7 @@
 
 <script setup lang="ts">
 import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
+import {refDebounced} from '@vueuse/core'
 
 import EditorToolbar from './EditorToolbar.vue'
 
@@ -172,7 +173,6 @@ 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,9 +200,7 @@ 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() {
@@ -274,6 +272,7 @@ const {
 	showSave = false,
 	placeholder = '',
 	editShortcut = '',
+	initialMode = 'edit',
 } = defineProps<{
 	modelValue: string,
 	uploadCallback?: UploadCallback,
@@ -282,11 +281,13 @@ const {
 	showSave?: boolean,
 	placeholder?: string,
 	editShortcut?: string,
+	initialMode?: Mode,
 }>()
 
 const emit = defineEmits(['update:modelValue', 'save'])
 
-const internalMode = ref<Mode>('edit')
+const inputHTML = ref('')
+const internalMode = ref<Mode>(initialMode)
 const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)
 
 const editor = useEditor({
@@ -358,28 +359,14 @@ const editor = useEditor({
 		TaskItem.configure({
 			nested: true,
 			onReadOnlyChecked: (node: Node, checked: boolean): boolean => {
-				if (!isEditEnabled) {
-					return false
+				if (isEditEnabled) {
+					node.attrs.checked = checked
+					inputHTML.value = editor.value?.getHTML()
+					bubbleSave()
+					return true
 				}
 
-				// 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
+				return false
 			},
 		}),
 
@@ -389,55 +376,52 @@ const editor = useEditor({
 		BubbleMenu,
 	],
 	onUpdate: () => {
-		bubbleNow()
+		inputHTML.value = editor.value!.getHTML()
 	},
 })
 
-watch(
-	() => isEditing.value,
-	() => {
-		editor.value?.setEditable(isEditing.value)
-	},
-	{immediate: true},
-)
-
 watch(
 	() => modelValue,
 	value => {
+		inputHTML.value = value
+
 		if (!editor?.value) return
 
 		if (editor.value.getHTML() === value) {
 			return
 		}
 
-		setModeAndValue(value)
+		editor.value.commands.setContent(value, false)
 	},
-	{immediate: true},
 )
 
-function bubbleNow() {
-	if (editor.value?.getHTML() === modelValue) {
-		return
-	}
+const debouncedInputHTML = refDebounced(inputHTML, 1000)
+watch(debouncedInputHTML, () => bubbleNow())
 
-	emit('update:modelValue', editor.value?.getHTML())
+function bubbleNow() {
+	emit('update:modelValue', inputHTML.value)
 }
 
 function bubbleSave() {
 	bubbleNow()
-	emit('save', editor.value?.getHTML())
+	emit('save', inputHTML.value)
 	if (isEditing.value) {
 		internalMode.value = 'preview'
 	}
 }
 
-function setEdit(focus: boolean = true) {
+function setEdit() {
 	internalMode.value = 'edit'
-	if (focus) {
-		editor.value?.commands.focus()
-	}
+	editor.value?.commands.focus()
 }
 
+watch(
+	() => isEditing.value,
+	() => {
+		editor.value?.setEditable(isEditing.value)
+	},
+)
+
 onBeforeUnmount(() => editor.value?.destroy())
 
 const uploadInputRef = ref<HTMLInputElement | null>(null)
@@ -507,17 +491,15 @@ function setLink() {
 		.run()
 }
 
-onMounted(async () => {
+onMounted(() => {
+	internalMode.value = initialMode
+	nextTick(() => {
+		const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
+		input?.addEventListener('paste', handleImagePaste)
+	})
 	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(() => {
@@ -530,11 +512,6 @@ 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
@@ -544,6 +521,7 @@ 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()])
 	}
 }
@@ -560,7 +538,7 @@ function setFocusToEditor(event) {
 	}
 	event.preventDefault()
 
-	if (!isEditing.value && isEditEnabled) {
+	if (initialMode === 'preview' && isEditEnabled && !isEditing.value) {
 		internalMode.value = 'edit'
 	}
 

src/components/tasks/add-task.vue

@@ -149,15 +149,13 @@ 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
 			}
 
-			const isParent = allParentTasks.includes(t.title)
-			if (t.parent === null && !isParent) {
+			if (t.parent === null) {
 				emit('taskAdded', createdTask)
 				return
 			}
@@ -173,19 +171,10 @@ async function addTask() {
 				relationKind: RELATION_KIND.PARENTTASK,
 			}))
 
-			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [{
-				...createdParentTask,
-				relatedTasks: {}, // To avoid endless references
-			}]
+			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [createdParentTask]
 			// 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,6 +26,7 @@
 			v-model="description"
 			@update:model-value="saveWithDelay"
 			@save="save"
+			:initial-mode="isEditorContentEmpty(description) ? 'edit' : 'preview'"
 		/>
 	</div>
 </template>
@@ -38,6 +39,7 @@ 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,7 +5,6 @@
 			'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()"
@@ -49,10 +48,7 @@
 			</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"
@@ -64,7 +60,7 @@
 				<span class="icon" v-if="task.attachments.length > 0">
 					<icon icon="paperclip"/>	
 				</span>
-				<span v-if="!isEditorContentEmpty(task.description)" class="icon">
+				<span v-if="task.description" class="icon">
 					<icon icon="align-left"/>
 				</span>
 				<span class="icon" v-if="task.repeatAfter.amount > 0">
@@ -95,7 +91,6 @@ 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()
 
@@ -118,7 +113,7 @@ async function toggleTaskDone(task: ITask) {
 			...task,
 			done: !task.done,
 		})
-
+		
 		if (updatedTask.done && useAuthStore().settings.frontendSettings.playSoundWhenDone) {
 			playPopSound()
 		}
@@ -284,16 +279,6 @@ $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="!isEditorContentEmpty(task.description)">
+				<span class="project-task-icon" v-if="task.description">
 					<icon icon="align-left"/>
 				</span>
 				<span class="project-task-icon" v-if="task.repeatAfter.amount > 0">
@@ -184,7 +184,6 @@ 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,6 +11,7 @@ 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,11 +175,7 @@ const tasks = ref<ITask[]>([])
 watch(
 	allTasks,
 	() => {
-		tasks.value = [...allTasks.value]
-		if (projectId < 0) {
-			return
-		}
-		tasks.value = tasks.value.filter(t => typeof t.relatedTasks?.parenttask === 'undefined')
+		tasks.value = [...allTasks.value].filter(t => typeof t.relatedTasks?.parenttask === 'undefined')
 	},
 )
 
@@ -245,9 +241,9 @@ function updateTaskList(task: ITask) {
 		loadTasks()
 	}
 	else {
-		allTasks.value = [
+		tasks.value = [
 			task,
-			...allTasks.value,
+			...tasks.value,
 		]
 	}
 

src/views/tasks/TaskDetailView.vue

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