From c8209c6c104e96a1b45776ba3a3e2582d903c9ad Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Mon, 5 Jul 2021 10:29:04 +0000
Subject: [PATCH] Quick add magic for tasks (#570)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/570
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
---
 src/components/misc/keyboard-shortcuts.vue    |   2 +-
 src/components/modal/modal.vue                |   4 +-
 .../quick-actions/quick-actions.vue           |  22 +-
 src/components/tasks/mixins/createTask.js     | 124 ++++++
 .../tasks/partials/quick-add-magic.vue        |  82 ++++
 src/helpers/parseDateOrNull.js                |   4 +
 src/helpers/parseTaskText.js                  | 103 +++++
 src/helpers/parseTaskText.test.js             | 409 ++++++++++++++++++
 src/helpers/replaceAll.js                     |  15 +
 src/helpers/time/parseDate.js                 | 290 +++++++++++++
 src/i18n/lang/en.json                         |  22 +
 src/store/modules/lists.js                    |   6 +
 src/styles/components/_all.scss               |   1 +
 src/styles/components/hint-modal.scss         |  43 ++
 src/styles/components/keyboard-shortcuts.scss |  39 --
 src/views/filters/CreateSavedFilter.vue       |   2 +-
 src/views/list/views/Kanban.vue               |  32 +-
 src/views/list/views/List.vue                 | 156 +------
 18 files changed, 1136 insertions(+), 220 deletions(-)
 create mode 100644 src/components/tasks/mixins/createTask.js
 create mode 100644 src/components/tasks/partials/quick-add-magic.vue
 create mode 100644 src/helpers/parseTaskText.js
 create mode 100644 src/helpers/parseTaskText.test.js
 create mode 100644 src/helpers/replaceAll.js
 create mode 100644 src/helpers/time/parseDate.js
 create mode 100644 src/styles/components/hint-modal.scss

diff --git a/src/components/misc/keyboard-shortcuts.vue b/src/components/misc/keyboard-shortcuts.vue
index d0fb9d44..d87a005d 100644
--- a/src/components/misc/keyboard-shortcuts.vue
+++ b/src/components/misc/keyboard-shortcuts.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="modal-mask keyboard-shortcuts-modal">
+	<div class="modal-mask hint-modal">
 		<div @click.self="close()" class="modal-container">
 			<div class="modal-content">
 				<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 4f0057cc..0ce9880d 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,7 +1,7 @@
 <template>
 	<transition name="modal">
-		<div class="modal-mask">
-			<div class="modal-container" @mousedown.self.prevent.stop="$emit('close')">
+		<div class="modal-mask has-overflow" :class="{'has-overflow': overflow}">
+			<div class="modal-container" @mousedown.self.prevent.stop="$emit('close')" :class="{'has-overflow': overflow}">
 				<div class="modal-content" :class="{'has-overflow': overflow, 'is-wide': wide}">
 					<slot>
 						<div class="header">
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index db919381..633c6e08 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -1,5 +1,5 @@
 <template>
-	<modal v-if="active" class="quick-actions" @close="closeQuickActions">
+	<modal v-if="active" class="quick-actions" @close="closeQuickActions" :overflow="isNewTaskCommand">
 		<div class="card">
 			<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
 				<div class="active-cmd tag" v-if="selectedCmd !== null">
@@ -20,10 +20,12 @@
 				/>
 			</div>
 
-			<div class="help has-text-grey-light p-2" v-if="hintText !== ''">
+			<div class="help has-text-grey-light p-2" v-if="hintText !== '' && !isNewTaskCommand">
 				{{ hintText }}
 			</div>
 
+			<quick-add-magic class="p-2 modal-container-smaller" v-if="isNewTaskCommand"/>
+
 			<div class="results" v-if="selectedCmd === null">
 				<div v-for="(r, k) in results" :key="k" class="result">
 					<span class="result-title">
@@ -53,12 +55,13 @@
 import TaskService from '@/services/task'
 import TeamService from '@/services/team'
 
-import TaskModel from '@/models/task'
 import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 
 import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
+import createTask from '@/components/tasks/mixins/createTask'
+import QuickAddMagic from '@/components/tasks/partials/quick-add-magic'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@@ -77,6 +80,7 @@ const SEARCH_MODE_TEAMS = 'teams'
 
 export default {
 	name: 'quick-actions',
+	components: {QuickAddMagic},
 	data() {
 		return {
 			query: '',
@@ -91,6 +95,9 @@ export default {
 			teamService: null,
 		}
 	},
+	mixins: [
+		createTask,
+	],
 	computed: {
 		active() {
 			const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
@@ -222,6 +229,9 @@ export default {
 
 			return SEARCH_MODE_ALL
 		},
+		isNewTaskCommand() {
+			return this.selectedCmd !== null && this.selectedCmd.action === CMD_NEW_TASK
+		},
 	},
 	created() {
 		this.taskService = new TaskService()
@@ -348,11 +358,7 @@ export default {
 				return
 			}
 
-			const newTask = new TaskModel({
-				title: this.query,
-				listId: this.currentList.id,
-			})
-			this.taskService.create(newTask)
+			this.createNewTask(this.query, 0, this.currentList.id)
 				.then(r => {
 					this.success({message: this.$t('task.createSuccess')})
 					this.$router.push({name: 'task.detail', params: {id: r.id}})
diff --git a/src/components/tasks/mixins/createTask.js b/src/components/tasks/mixins/createTask.js
new file mode 100644
index 00000000..2b7b8c8d
--- /dev/null
+++ b/src/components/tasks/mixins/createTask.js
@@ -0,0 +1,124 @@
+import {parseTaskText} from '@/helpers/parseTaskText'
+import TaskModel from '@/models/task'
+import {formatISO} from 'date-fns'
+import LabelTask from '@/models/labelTask'
+import LabelModel from '@/models/label'
+import LabelTaskService from '@/services/labelTask'
+import {mapState} from 'vuex'
+import UserService from '@/services/user'
+
+export default {
+	data() {
+		return {
+			labelTaskService: LabelTaskService,
+			userService: UserService,
+		}
+	},
+	created() {
+		this.labelTaskService = new LabelTaskService()
+		this.userService = new UserService()
+	},
+	computed: mapState({
+		labels: state => state.labels.labels,
+	}),
+	methods: {
+		createNewTask(newTaskTitle, bucketId = 0, lId = 0) {
+			const parsedTask = parseTaskText(newTaskTitle)
+			const assignees = []
+
+			let listId = null
+			if (parsedTask.list !== null) {
+				const list = this.$store.getters['lists/findListByExactname'](parsedTask.list)
+				listId = list === null ? null : list.id
+			}
+			if (listId === null) {
+				listId = lId !== 0 ? lId : this.$route.params.listId
+			}
+
+			// Separate closure because we need to wait for the results of the user search if users were entered in the
+			// task create request. Because _that_ happens in a promise, we'll need something to call when it resolves.
+			const createTask = () => {
+				const task = new TaskModel({
+					title: parsedTask.text,
+					listId: listId,
+					dueDate: parsedTask.date !== null ? formatISO(parsedTask.date) : null, // I don't know why, but it all goes up in flames when I just pass in the date normally.
+					priority: parsedTask.priority,
+					assignees: assignees,
+					bucketId: bucketId,
+				})
+				return this.taskService.create(task)
+					.then(task => {
+
+						if (parsedTask.labels.length > 0) {
+
+							const labelAddsToWaitFor = []
+
+							const addLabelToTask = label => {
+								const labelTask = new LabelTask({
+									taskId: task.id,
+									labelId: label.id,
+								})
+								return this.labelTaskService.create(labelTask)
+									.then(result => {
+										task.labels.push(label)
+										return Promise.resolve(result)
+									})
+									.catch(e => Promise.reject(e))
+							}
+
+							// Then do everything that is involved in finding, creating and adding the label to the task
+							parsedTask.labels.forEach(labelTitle => {
+								// Check if the label exists
+								const label = Object.values(this.labels).find(l => {
+									return l.title.toLowerCase() === labelTitle.toLowerCase()
+								})
+
+								// Label found, use it
+								if (typeof label !== 'undefined') {
+									labelAddsToWaitFor.push(addLabelToTask(label))
+								} else {
+									// label not found, create it
+									const label = new LabelModel({title: labelTitle})
+									labelAddsToWaitFor.push(this.$store.dispatch('labels/createLabel', label)
+										.then(res => {
+											return addLabelToTask(res)
+										})
+										.catch(e => Promise.reject(e))
+									)
+								}
+							})
+
+							// This waits until all labels are created and added to the task
+							return Promise.all(labelAddsToWaitFor)
+								.then(() => {
+									return Promise.resolve(task)
+								})
+						}
+
+						return Promise.resolve(task)
+					})
+					.catch(e => Promise.reject(e))
+			}
+
+			if (parsedTask.assignees.length > 0) {
+				const searches = []
+				parsedTask.assignees.forEach(a => {
+					searches.push(this.userService.getAll({}, {s: a})
+						.then(users => {
+							const user = users.find(u => u.username.toLowerCase() === a.toLowerCase())
+							if (typeof user !== 'undefined') {
+								assignees.push(user)
+							}
+							return Promise.resolve(users)
+						})
+					)
+				})
+
+				return Promise.all(searches)
+					.then(() => createTask())
+			}
+
+			return createTask()
+		},
+	},
+}
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
new file mode 100644
index 00000000..172d41af
--- /dev/null
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -0,0 +1,82 @@
+<template>
+	<div>
+		<p class="help has-text-grey">
+			{{ $t('task.quickAddMagic.hint') }}.
+			<a @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</a>
+		</p>
+		<transition name="fade">
+			<div class="modal-mask hint-modal" v-if="visible">
+				<div @click.self="() => visible = false" class="modal-container">
+					<div class="modal-content">
+						<card class="has-background-white has-no-shadow" :title="$t('task.quickAddMagic.title')">
+							<p>{{ $t('task.quickAddMagic.intro') }}</p>
+
+							<h3>{{ $t('task.attributes.labels') }}</h3>
+							<p>
+								{{ $t('task.quickAddMagic.label1', {prefix: '~'}) }}
+								{{ $t('task.quickAddMagic.label2') }}
+								{{ $t('task.quickAddMagic.multiple') }}
+							</p>
+							<p>
+								{{ $t('task.quickAddMagic.label3') }}
+								{{ $t('task.quickAddMagic.label4', {prefix: '~'}) }}
+							</p>
+
+							<h3>{{ $t('task.attributes.priority') }}</h3>
+							<p>
+								{{ $t('task.quickAddMagic.priority1', {prefix: '!'}) }}
+								{{ $t('task.quickAddMagic.priority2') }}
+							</p>
+
+							<h3>{{ $t('task.attributes.assignees') }}</h3>
+							<p>
+								{{ $t('task.quickAddMagic.assignees') }}
+								{{ $t('task.quickAddMagic.multiple') }}
+							</p>
+
+							<h3>{{ $t('list.list.title') }}</h3>
+							<p>
+								{{ $t('task.quickAddMagic.list1', {prefix: '*'}) }}
+								{{ $t('task.quickAddMagic.list2') }}
+							</p>
+
+							<h3>{{ $t('task.quickAddMagic.dateAndTime') }}</h3>
+							<p>
+								{{ $t('task.quickAddMagic.date') }}
+							</p>
+							<ul>
+								<!-- Not localized because these only work in english -->
+								<li>Today</li>
+								<li>Tomorrow</li>
+								<li>Next monday</li>
+								<li>This weekend</li>
+								<li>Later this week</li>
+								<li>Later next week</li>
+								<li>Next week</li>
+								<li>Next month</li>
+								<li>End of month</li>
+								<li>In 5 days [hours/weeks/months]</li>
+								<li>Tuesday ({{ $t('task.quickAddMagic.dateWeekday') }})</li>
+								<li>17/02/2021</li>
+								<li>Feb 17 ({{ $t('task.quickAddMagic.dateCurrentYear') }})</li>
+								<li>17th ({{ $t('task.quickAddMagic.dateNth', {day: '17'}) }})</li>
+							</ul>
+							<p>{{ $t('task.quickAddMagic.dateTime', {time: 'at 17:00', timePM: '5pm'}) }}</p>
+						</card>
+					</div>
+				</div>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'quick-add-magic',
+	data() {
+		return {
+			visible: false,
+		}
+	},
+}
+</script>
diff --git a/src/helpers/parseDateOrNull.js b/src/helpers/parseDateOrNull.js
index 08022e8a..7fd1cf28 100644
--- a/src/helpers/parseDateOrNull.js
+++ b/src/helpers/parseDateOrNull.js
@@ -1,4 +1,8 @@
 export const parseDateOrNull = date => {
+	if (date instanceof Date) {
+		return date
+	}
+
 	if (date && !date.startsWith('0001')) {
 		return new Date(date)
 	}
diff --git a/src/helpers/parseTaskText.js b/src/helpers/parseTaskText.js
new file mode 100644
index 00000000..0039a6d8
--- /dev/null
+++ b/src/helpers/parseTaskText.js
@@ -0,0 +1,103 @@
+import {parseDate} from './time/parseDate'
+import priorities from '../models/priorities.json'
+
+const LABEL_PREFIX = '~'
+const LIST_PREFIX = '*'
+const PRIORITY_PREFIX = '!'
+const ASSIGNEE_PREFIX = '@'
+
+/**
+ * Parses task text for dates, assignees, labels, lists, priorities and returns an object with all found intents.
+ *
+ * @param text
+ */
+export const parseTaskText = text => {
+	const result = {
+		text: text,
+		date: null,
+		labels: [],
+		list: null,
+		priority: null,
+		assignees: [],
+	}
+
+	result.labels = getItemsFromPrefix(text, LABEL_PREFIX)
+
+	const lists = getItemsFromPrefix(text, LIST_PREFIX)
+	result.list = lists.length > 0 ? lists[0] : null
+
+	result.priority = getPriority(text)
+
+	result.assignees = getItemsFromPrefix(text, ASSIGNEE_PREFIX)
+
+	const {newText, date} = parseDate(text)
+	result.text = newText
+	result.date = date
+
+	return cleanupResult(result)
+}
+
+const getItemsFromPrefix = (text, prefix) => {
+	const items = []
+
+	const itemParts = text.split(prefix)
+	itemParts.forEach((p, index) => {
+		// First part contains the rest
+		if (index < 1) {
+			return
+		}
+
+		let labelText
+		if (p.charAt(0) === `'`) {
+			labelText = p.split(`'`)[1]
+		} else if (p.charAt(0) === `"`) {
+			labelText = p.split(`"`)[1]
+		} else {
+			// Only until the next space
+			labelText = p.split(' ')[0]
+		}
+		items.push(labelText)
+	})
+
+	return Array.from(new Set(items))
+}
+
+const getPriority = text => {
+	const ps = getItemsFromPrefix(text, PRIORITY_PREFIX)
+	if (ps.length === 0) {
+		return null
+	}
+
+	for (const p of ps) {
+		for (const pi in priorities) {
+			if (priorities[pi] === parseInt(p)) {
+				return parseInt(p)
+			}
+		}
+	}
+
+	return null
+}
+
+const cleanupItemText = (text, items, prefix) => {
+	items.forEach(l => {
+		text = text
+			.replace(`${prefix}'${l}' `, '')
+			.replace(`${prefix}'${l}'`, '')
+			.replace(`${prefix}"${l}" `, '')
+			.replace(`${prefix}"${l}"`, '')
+			.replace(`${prefix}${l} `, '')
+			.replace(`${prefix}${l}`, '')
+	})
+	return text
+}
+
+const cleanupResult = result => {
+	result.text = cleanupItemText(result.text, result.labels, LABEL_PREFIX)
+	result.text = cleanupItemText(result.text, [result.list], LIST_PREFIX)
+	result.text = cleanupItemText(result.text, [result.priority], PRIORITY_PREFIX)
+	result.text = cleanupItemText(result.text, result.assignees, ASSIGNEE_PREFIX)
+	result.text = result.text.trim()
+
+	return result
+}
diff --git a/src/helpers/parseTaskText.test.js b/src/helpers/parseTaskText.test.js
new file mode 100644
index 00000000..618e9722
--- /dev/null
+++ b/src/helpers/parseTaskText.test.js
@@ -0,0 +1,409 @@
+import {parseTaskText} from './parseTaskText'
+import {getDateFromText, getDateFromTextIn} from './time/parseDate'
+import {calculateDayInterval} from './time/calculateDayInterval'
+import priorities from '../models/priorities.json'
+
+describe('Parse Task Text', () => {
+	it('should return text with no intents as is', () => {
+		expect(parseTaskText('Lorem Ipsum').text).toBe('Lorem Ipsum')
+	})
+
+	describe('Date Parsing', () => {
+		it('should not return any date if none was provided', () => {
+			const result = parseTaskText('Lorem Ipsum')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.date).toBeNull()
+		})
+		it('should ignore casing', () => {
+			const result = parseTaskText('Lorem Ipsum ToDay')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const now = new Date()
+			expect(result.date.getFullYear()).toBe(now.getFullYear())
+			expect(result.date.getMonth()).toBe(now.getMonth())
+			expect(result.date.getDate()).toBe(now.getDate())
+		})
+		it('should recognize today', () => {
+			const result = parseTaskText('Lorem Ipsum today')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const now = new Date()
+			expect(result.date.getFullYear()).toBe(now.getFullYear())
+			expect(result.date.getMonth()).toBe(now.getMonth())
+			expect(result.date.getDate()).toBe(now.getDate())
+		})
+		describe('should recognize today with a time', () => {
+			const cases = {
+				'at 15:00': '15:0',
+				'@ 15:00': '15:0',
+				'at 15:30': '15:30',
+				'@ 3pm': '15:0',
+				'at 3pm': '15:0',
+				'at 3 pm': '15:0',
+				'at 3am': '3:0',
+				'at 3:12 am': '3:12',
+				'at 3:12 pm': '15:12',
+			}
+
+			for (const c in cases) {
+				it('should recognize today with a time ' + c, () => {
+					const result = parseTaskText('Lorem Ipsum today ' + c)
+
+					expect(result.text).toBe('Lorem Ipsum')
+					const now = new Date()
+					expect(result.date.getFullYear()).toBe(now.getFullYear())
+					expect(result.date.getMonth()).toBe(now.getMonth())
+					expect(result.date.getDate()).toBe(now.getDate())
+					expect(`${result.date.getHours()}:${result.date.getMinutes()}`).toBe(cases[c])
+					expect(result.date.getSeconds()).toBe(0)
+				})
+			}
+		})
+		it('should recognize tomorrow', () => {
+			const result = parseTaskText('Lorem Ipsum tomorrow')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const tomorrow = new Date()
+			tomorrow.setDate(tomorrow.getDate() + 1)
+			expect(result.date.getFullYear()).toBe(tomorrow.getFullYear())
+			expect(result.date.getMonth()).toBe(tomorrow.getMonth())
+			expect(result.date.getDate()).toBe(tomorrow.getDate())
+		})
+		it('should recognize next monday', () => {
+			const result = parseTaskText('Lorem Ipsum next monday')
+
+			const untilNextMonday = calculateDayInterval('nextMonday')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const nextMonday = new Date()
+			nextMonday.setDate(nextMonday.getDate() + untilNextMonday)
+			expect(result.date.getFullYear()).toBe(nextMonday.getFullYear())
+			expect(result.date.getMonth()).toBe(nextMonday.getMonth())
+			expect(result.date.getDate()).toBe(nextMonday.getDate())
+		})
+		it('should recognize this weekend', () => {
+			const result = parseTaskText('Lorem Ipsum this weekend')
+
+			const untilThisWeekend = calculateDayInterval('thisWeekend')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const thisWeekend = new Date()
+			thisWeekend.setDate(thisWeekend.getDate() + untilThisWeekend)
+			expect(result.date.getFullYear()).toBe(thisWeekend.getFullYear())
+			expect(result.date.getMonth()).toBe(thisWeekend.getMonth())
+			expect(result.date.getDate()).toBe(thisWeekend.getDate())
+		})
+		it('should recognize later this week', () => {
+			const result = parseTaskText('Lorem Ipsum later this week')
+
+			const untilLaterThisWeek = calculateDayInterval('laterThisWeek')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const laterThisWeek = new Date()
+			laterThisWeek.setDate(laterThisWeek.getDate() + untilLaterThisWeek)
+			expect(result.date.getFullYear()).toBe(laterThisWeek.getFullYear())
+			expect(result.date.getMonth()).toBe(laterThisWeek.getMonth())
+			expect(result.date.getDate()).toBe(laterThisWeek.getDate())
+		})
+		it('should recognize later next week', () => {
+			const result = parseTaskText('Lorem Ipsum later next week')
+
+			const untilLaterNextWeek = calculateDayInterval('laterNextWeek')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const laterNextWeek = new Date()
+			laterNextWeek.setDate(laterNextWeek.getDate() + untilLaterNextWeek)
+			expect(result.date.getFullYear()).toBe(laterNextWeek.getFullYear())
+			expect(result.date.getMonth()).toBe(laterNextWeek.getMonth())
+			expect(result.date.getDate()).toBe(laterNextWeek.getDate())
+		})
+		it('should recognize next week', () => {
+			const result = parseTaskText('Lorem Ipsum next week')
+
+			const untilNextWeek = calculateDayInterval('nextWeek')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const nextWeek = new Date()
+			nextWeek.setDate(nextWeek.getDate() + untilNextWeek)
+			expect(result.date.getFullYear()).toBe(nextWeek.getFullYear())
+			expect(result.date.getMonth()).toBe(nextWeek.getMonth())
+			expect(result.date.getDate()).toBe(nextWeek.getDate())
+		})
+		it('should recognize next month', () => {
+			const result = parseTaskText('Lorem Ipsum next month')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const nextMonth = new Date()
+			nextMonth.setDate(1)
+			nextMonth.setMonth(nextMonth.getMonth() + 1)
+			expect(result.date.getFullYear()).toBe(nextMonth.getFullYear())
+			expect(result.date.getMonth()).toBe(nextMonth.getMonth())
+			expect(result.date.getDate()).toBe(nextMonth.getDate())
+		})
+		it('should recognize a date', () => {
+			const result = parseTaskText('Lorem Ipsum 06/26/2021')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const date = new Date()
+			date.setFullYear(2021, 5, 26)
+			expect(result.date.getFullYear()).toBe(date.getFullYear())
+			expect(result.date.getMonth()).toBe(date.getMonth())
+			expect(result.date.getDate()).toBe(date.getDate())
+		})
+		it('should recognize end of month', () => {
+			const result = parseTaskText('Lorem Ipsum end of month')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const curDate = new Date()
+			const date = new Date(curDate.getFullYear(), curDate.getMonth() + 1, 0)
+			expect(result.date.getFullYear()).toBe(date.getFullYear())
+			expect(result.date.getMonth()).toBe(date.getMonth())
+			expect(result.date.getDate()).toBe(date.getDate())
+		})
+		it('should recognize weekdays', () => {
+			const result = parseTaskText('Lorem Ipsum thu')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const nextThursday = new Date()
+			nextThursday.setDate(nextThursday.getDate() + ((4 + 7 - nextThursday.getDay()) % 7))
+			expect(`${result.date.getFullYear()}-${result.date.getMonth()}-${result.date.getDate()}`).toBe(`${nextThursday.getFullYear()}-${nextThursday.getMonth()}-${nextThursday.getDate()}`)
+			expect(+new Date(result.date)).toBeGreaterThan(+new Date() - 10) // In on thursdays, this may be different by one second and thus fails the test
+		})
+		it('should recognize weekdays with time', () => {
+			const result = parseTaskText('Lorem Ipsum thu at 14:00')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			const nextThursday = new Date()
+			nextThursday.setDate(nextThursday.getDate() + ((4 + 7 - nextThursday.getDay()) % 7))
+			expect(`${result.date.getFullYear()}-${result.date.getMonth()}-${result.date.getDate()}`).toBe(`${nextThursday.getFullYear()}-${nextThursday.getMonth()}-${nextThursday.getDate()}`)
+			expect(`${result.date.getHours()}:${result.date.getMinutes()}`).toBe('14:0')
+			expect(+new Date(result.date)).toBeGreaterThan(+new Date() - 10) // In on thursdays, this may be different by one second and thus fails the test
+		})
+		it('should recognize dates of the month in the past but next month', () => {
+			const date = new Date()
+			date.setDate(date.getDate() - 1)
+			const result = parseTaskText(`Lorem Ipsum ${date.getDate()}nd`)
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.date.getDate()).toBe(date.getDate())
+			expect(result.date.getMonth()).toBe(date.getMonth() + 1)
+		})
+		it('should recognize dates of the month in the future', () => {
+			const date = new Date()
+			const result = parseTaskText(`Lorem Ipsum ${date.getDate() + 1}nd`)
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.date.getDate()).toBe(date.getDate() + 1)
+		})
+
+		describe('Parse date from text', () => {
+			const now = new Date()
+			now.setFullYear(2021, 5, 24)
+
+			const cases = {
+				'Lorem Ipsum 06/08/2021 ad': '2021-6-8',
+				'Lorem Ipsum 6/7/21 ad': '2021-6-7',
+				'27/07/2021,': null,
+				'2021/07/06,': '2021-7-6',
+				'2021-07-06': '2021-7-6',
+				'27 jan': '2022-1-27',
+				'27/1': '2022-1-27',
+				'27/01': '2022-1-27',
+				'16/12': '2021-12-16',
+				'01/27': '2022-1-27',
+				'1/27': '2022-1-27',
+				'Jan 27': '2022-1-27',
+				'jan 27': '2022-1-27',
+				'feb 21': '2022-2-21',
+				'mar 21': '2022-3-21',
+				'apr 21': '2022-4-21',
+				'may 21': '2022-5-21',
+				'jun 21': '2022-6-21',
+				'jul 21': '2021-7-21',
+				'aug 21': '2021-8-21',
+				'sep 21': '2021-9-21',
+				'oct 21': '2021-10-21',
+				'nov 21': '2021-11-21',
+				'dec 21': '2021-12-21',
+			}
+
+			for (const c in cases) {
+				it(`should parse '${c}' as '${cases[c]}'`, () => {
+					const {date} = getDateFromText(c, now)
+					if (date === null && cases[c] === null) {
+						expect(date).toBeNull()
+						return
+					}
+
+					expect(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`).toBe(cases[c])
+				})
+			}
+		})
+
+		describe('Parse date from text in', () => {
+			const now = new Date()
+			now.setFullYear(2021, 5, 24)
+			now.setHours(12)
+			now.setMinutes(0)
+			now.setSeconds(0)
+
+			const cases = {
+				'Lorem Ipsum in 1 hour': '2021-6-24 13:0',
+				'in 2 hours': '2021-6-24 14:0',
+				'in 1 day': '2021-6-25 12:0',
+				'in 2 days': '2021-6-26 12:0',
+				'in 1 week': '2021-7-1 12:0',
+				'in 2 weeks': '2021-7-8 12:0',
+				'in 4 weeks': '2021-7-22 12:0',
+				'in 1 month': '2021-7-24 12:0',
+				'in 3 months': '2021-9-24 12:0',
+			}
+
+			for (const c in cases) {
+				it(`should parse '${c}' as '${cases[c]}'`, () => {
+					const {date} = getDateFromTextIn(c, now)
+					if (date === null && cases[c] === null) {
+						expect(date).toBeNull()
+						return
+					}
+
+					expect(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`).toBe(cases[c])
+				})
+			}
+		})
+
+	})
+
+	describe('Labels', () => {
+		it('should parse labels', () => {
+			const result = parseTaskText('Lorem Ipsum ~label1 ~label2')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.labels).toHaveLength(2)
+			expect(result.labels[0]).toBe('label1')
+			expect(result.labels[1]).toBe('label2')
+		})
+		it('should parse labels from the start', () => {
+			const result = parseTaskText('~label1 Lorem Ipsum ~label2')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.labels).toHaveLength(2)
+			expect(result.labels[0]).toBe('label1')
+			expect(result.labels[1]).toBe('label2')
+		})
+		it('should resolve duplicate labels', () => {
+			const result = parseTaskText('Lorem Ipsum ~label1 ~label1 ~label2')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.labels).toHaveLength(2)
+			expect(result.labels[0]).toBe('label1')
+			expect(result.labels[1]).toBe('label2')
+		})
+		it('should correctly parse labels with spaces in them', () => {
+			const result = parseTaskText(`Lorem ~'label with space' Ipsum`)
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.labels).toHaveLength(1)
+			expect(result.labels[0]).toBe('label with space')
+		})
+		it('should correctly parse labels with spaces in them and "', () => {
+			const result = parseTaskText('Lorem ~"label with space" Ipsum')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.labels).toHaveLength(1)
+			expect(result.labels[0]).toBe('label with space')
+		})
+	})
+
+	describe('List', () => {
+		it('should parse a list', () => {
+			const result = parseTaskText('Lorem Ipsum *list')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.list).toBe('list')
+		})
+		it('should parse a list with a space in it', () => {
+			const result = parseTaskText(`Lorem Ipsum *'list with long name'`)
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.list).toBe('list with long name')
+		})
+		it('should parse a list with a space in it and "', () => {
+			const result = parseTaskText(`Lorem Ipsum *"list with long name"`)
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.list).toBe('list with long name')
+		})
+		it('should parse only the first list', () => {
+			const result = parseTaskText(`Lorem Ipsum *list1 *list2 *list3`)
+
+			expect(result.text).toBe('Lorem Ipsum *list2 *list3')
+			expect(result.list).toBe('list1')
+		})
+	})
+
+	describe('Priority', () => {
+		for (const p in priorities) {
+			it(`should parse priority ${p}`, () => {
+				const result = parseTaskText(`Lorem Ipsum !${priorities[p]}`)
+
+				expect(result.text).toBe('Lorem Ipsum')
+				expect(result.priority).toBe(priorities[p])
+			})
+		}
+		it(`should not parse an invalid priority`, () => {
+			const result = parseTaskText(`Lorem Ipsum !9999`)
+
+			expect(result.text).toBe('Lorem Ipsum !9999')
+			expect(result.priority).toBe(null)
+		})
+		it(`should not parse an invalid priority but use the first valid one it finds`, () => {
+			const result = parseTaskText(`Lorem Ipsum !9999 !1`)
+
+			expect(result.text).toBe('Lorem Ipsum !9999')
+			expect(result.priority).toBe(1)
+		})
+	})
+
+	describe('Assignee', () => {
+		it('should parse an assignee', () => {
+			const result = parseTaskText('Lorem Ipsum @user')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.assignees).toHaveLength(1)
+			expect(result.assignees[0]).toBe('user')
+		})
+		it('should parse multiple assignees', () => {
+			const result = parseTaskText('Lorem Ipsum @user1 @user2 @user3')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.assignees).toHaveLength(3)
+			expect(result.assignees[0]).toBe('user1')
+			expect(result.assignees[1]).toBe('user2')
+			expect(result.assignees[2]).toBe('user3')
+		})
+		it('should parse avoid duplicate assignees', () => {
+			const result = parseTaskText('Lorem Ipsum @user1 @user1 @user2')
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.assignees).toHaveLength(2)
+			expect(result.assignees[0]).toBe('user1')
+			expect(result.assignees[1]).toBe('user2')
+		})
+		it('should parse an assignee with a space in it', () => {
+			const result = parseTaskText(`Lorem Ipsum @'user with long name'`)
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.assignees).toHaveLength(1)
+			expect(result.assignees[0]).toBe('user with long name')
+		})
+		it('should parse an assignee with a space in it and "', () => {
+			const result = parseTaskText(`Lorem Ipsum @"user with long name"`)
+
+			expect(result.text).toBe('Lorem Ipsum')
+			expect(result.assignees).toHaveLength(1)
+			expect(result.assignees[0]).toBe('user with long name')
+		})
+	})
+})
diff --git a/src/helpers/replaceAll.js b/src/helpers/replaceAll.js
new file mode 100644
index 00000000..db6834b1
--- /dev/null
+++ b/src/helpers/replaceAll.js
@@ -0,0 +1,15 @@
+/**
+ * This function replaces all text, no matter the case.
+ *
+ * See https://stackoverflow.com/a/7313467/10924593
+ *
+ * @parma str
+ * @param search
+ * @param replace
+ * @returns {*}
+ */
+export const replaceAll = (str, search, replace) => {
+	const esc = search.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+	const reg = new RegExp(esc, 'ig');
+	return str.replace(reg, replace);
+}
\ No newline at end of file
diff --git a/src/helpers/time/parseDate.js b/src/helpers/time/parseDate.js
new file mode 100644
index 00000000..77e7fb9e
--- /dev/null
+++ b/src/helpers/time/parseDate.js
@@ -0,0 +1,290 @@
+import {calculateDayInterval} from './calculateDayInterval'
+import {calculateNearestHours} from './calculateNearestHours'
+import {replaceAll} from '../replaceAll'
+
+export const parseDate = text => {
+	const lowerText = text.toLowerCase()
+
+	if (lowerText.includes('today')) {
+		return addTimeToDate(text, getDateFromInterval(calculateDayInterval('today')), 'today')
+	}
+	if (lowerText.includes('tomorrow')) {
+		return addTimeToDate(text, getDateFromInterval(calculateDayInterval('tomorrow')), 'tomorrow')
+	}
+	if (lowerText.includes('next monday')) {
+		return addTimeToDate(text, getDateFromInterval(calculateDayInterval('nextMonday')), 'next monday')
+	}
+	if (lowerText.includes('this weekend')) {
+		return addTimeToDate(text, getDateFromInterval(calculateDayInterval('thisWeekend')), 'this weekend')
+	}
+	if (lowerText.includes('later this week')) {
+		return addTimeToDate(text, getDateFromInterval(calculateDayInterval('laterThisWeek')), 'later this week')
+	}
+	if (lowerText.includes('later next week')) {
+		return addTimeToDate(text, getDateFromInterval(calculateDayInterval('laterNextWeek')), 'later next week')
+	}
+	if (lowerText.includes('next week')) {
+		return addTimeToDate(text, getDateFromInterval(calculateDayInterval('nextWeek')), 'next week')
+	}
+	if (lowerText.includes('next month')) {
+		const date = new Date()
+		date.setDate(1)
+		date.setMonth(date.getMonth() + 1)
+		date.setHours(calculateNearestHours(date))
+		date.setMinutes(0)
+		date.setSeconds(0)
+
+		return addTimeToDate(text, date, 'next month')
+	}
+	if (lowerText.includes('end of month')) {
+		const curDate = new Date()
+		const date = new Date(curDate.getFullYear(), curDate.getMonth() + 1, 0)
+		date.setHours(calculateNearestHours(date))
+		date.setMinutes(0)
+		date.setSeconds(0)
+
+		return addTimeToDate(text, date, 'end of month')
+	}
+
+	let parsed = getDateFromWeekday(text)
+	if (parsed.date !== null) {
+		return addTimeToDate(text, parsed.date, parsed.foundText)
+	}
+
+	parsed = getDayFromText(text)
+	if (parsed.date !== null) {
+		return addTimeToDate(text, parsed.date, parsed.foundText)
+	}
+
+	parsed = getDateFromTextIn(text)
+	if (parsed.date !== null) {
+		return {
+			newText: replaceAll(text, parsed.foundText, ''),
+			date: parsed.date,
+		}
+	}
+
+	parsed = getDateFromText(text)
+
+	return {
+		newText: replaceAll(text, parsed.foundText, ''),
+		date: parsed.date,
+	}
+}
+
+const addTimeToDate = (text, date, match) => {
+	const matcher = new RegExp(`(${match} (at|@) )([0-9][0-9]?(:[0-9][0-9]?)?( ?(a|p)m)?)`, 'ig')
+	const results = matcher.exec(text)
+
+	if (results !== null) {
+		const time = results[3]
+		const parts = time.split(':')
+		let hours = parseInt(parts[0])
+		let minutes = 0
+		if (time.endsWith('pm')) {
+			hours += 12
+		}
+		if (parts.length > 1) {
+			minutes = parseInt(parts[1])
+		}
+
+		date.setHours(hours)
+		date.setMinutes(minutes)
+		date.setSeconds(0)
+	}
+
+	const replace = results !== null ? results[0] : match
+	return {
+		newText: replaceAll(text, replace, ''),
+		date: date,
+	}
+}
+
+export const getDateFromText = (text, now = new Date()) => {
+	const fullDateRegex = /([0-9][0-9]?\/[0-9][0-9]?\/[0-9][0-9]([0-9][0-9])?|[0-9][0-9][0-9][0-9]\/[0-9][0-9]?\/[0-9][0-9]?|[0-9][0-9][0-9][0-9]-[0-9][0-9]?-[0-9][0-9]?)/ig
+
+	// 1. Try parsing the text as a "usual" date, like 2021-06-24 or 06/24/2021
+	let results = fullDateRegex.exec(text)
+	let result = results === null ? null : results[0]
+	let foundText = result
+	let containsYear = true
+	if (result === null) {
+		// 2. Try parsing the date as something like "jan 21" or "21 jan"
+		const monthRegex = /((jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) [0-9][0-9]?|[0-9][0-9]? (jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec))/ig
+		results = monthRegex.exec(text)
+		result = results === null ? null : `${results[0]} ${now.getFullYear()}`
+		foundText = results === null ? '' : results[0]
+		containsYear = false
+
+		if (result === null) {
+			// 3. Try parsing the date as "27/01" or "01/27"
+			const monthNumericRegex = /([0-9][0-9]?\/[0-9][0-9]?)/ig
+			results = monthNumericRegex.exec(text)
+
+			// Put the year before or after the date, depending on what works
+			result = results === null ? null : `${now.getFullYear()}/${results[0]}`
+			foundText = results === null ? '' : results[0]
+			if (isNaN(new Date(result))) {
+				result = results === null ? null : `${results[0]}/${now.getFullYear()}`
+			}
+			if (isNaN(new Date(result)) && results[0] !== null) {
+				const parts = results[0].split('/')
+				result = `${parts[1]}/${parts[0]}/${now.getFullYear()}`
+			}
+		}
+	}
+
+	if (result === null) {
+		return {
+			foundText,
+			date: null,
+		}
+	}
+
+	const date = new Date(result)
+	if (isNaN(date)) {
+		return {
+			foundText,
+			date: null,
+		}
+	}
+
+	if (!containsYear && date < now) {
+		date.setFullYear(date.getFullYear() + 1)
+	}
+
+	return {
+		foundText,
+		date,
+	}
+}
+
+export const getDateFromTextIn = (text, now = new Date()) => {
+	const regex = /(in [0-9]+ (hours?|days?|weeks?|months?))/ig
+	const results = regex.exec(text)
+	if (results === null) {
+		return {
+			foundText: '',
+			date: null,
+		}
+	}
+
+	let foundText = results[0]
+	const date = new Date(now)
+	const parts = foundText.split(' ')
+	switch (parts[2]) {
+		case 'hours':
+		case 'hour':
+			date.setHours(date.getHours() + parseInt(parts[1]))
+			break
+		case 'days':
+		case 'day':
+			date.setDate(date.getDate() + parseInt(parts[1]))
+			break
+		case 'weeks':
+		case 'week':
+			date.setDate(date.getDate() + parseInt(parts[1]) * 7)
+			break
+		case 'months':
+		case 'month':
+			date.setMonth(date.getMonth() + parseInt(parts[1]))
+			break
+	}
+
+	return {
+		foundText,
+		date,
+	}
+}
+
+const getDateFromWeekday = text => {
+	const matcher = /(mon|monday|tue|tuesday|wed|wednesday|thu|thursday|fri|friday|sat|saturday|sun|sunday)/ig
+	const results = matcher.exec(text)
+	if (results === null) {
+		return {
+			foundText: null,
+			date: null,
+		}
+	}
+
+	const date = new Date()
+	const currentDay = date.getDay()
+	let day = 0
+
+	switch (results[0]) {
+		case 'mon':
+		case 'monday':
+			day = 1
+			break
+		case 'tue':
+		case 'tuesday':
+			day = 2
+			break
+		case 'wed':
+		case 'wednesday':
+			day = 3
+			break
+		case 'thu':
+		case 'thursday':
+			day = 4
+			break
+		case 'fri':
+		case 'friday':
+			day = 5
+			break
+		case 'sat':
+		case 'saturday':
+			day = 6
+			break
+		case 'sun':
+		case 'sunday':
+			day = 0
+			break
+		default:
+			return {
+				foundText: null,
+				date: null,
+			}
+	}
+
+	const distance = (day + 7 - currentDay) % 7
+	date.setDate(date.getDate() + distance)
+
+	return {
+		foundText: results[0],
+		date: date,
+	}
+}
+
+const getDayFromText = text => {
+	const matcher = /(([1-2][0-9])|(3[01])|(0?[1-9]))(st|nd|rd|th|\.)/ig
+	const results = matcher.exec(text)
+	if (results === null) {
+		return {
+			foundText: null,
+			date: null,
+		}
+	}
+
+	const date = new Date()
+	date.setDate(parseInt(results[0]))
+
+	if (date < new Date()) {
+		date.setMonth(date.getMonth() + 1)
+	}
+
+	return {
+		foundText: results[0],
+		date: date,
+	}
+}
+
+const getDateFromInterval = interval => {
+	const newDate = new Date()
+	newDate.setDate(newDate.getDate() + interval)
+	newDate.setHours(calculateNearestHours(newDate))
+	newDate.setMinutes(0)
+	newDate.setSeconds(0)
+
+	return newDate
+}
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 87d1091f..f7ba7f71 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -597,6 +597,28 @@
       "weeks": "Weeks",
       "months": "Months",
       "years": "Years"
+    },
+    "quickAddMagic": {
+      "hint": "You can use Quick Add Magic",
+      "what": "What?",
+      "title": "Quick Add Magic",
+      "intro": "When creating a task, you can use special keywords to directly add attributes to the newly created task. This allows to add commonly used attributes to tasks much faster.",
+      "multiple": "You can use this multiple times.",
+      "label1": "To add a label, simply prefix the name of the label with {prefix}.",
+      "label2": "Vikunja will first check if the label already exist and create it if not.",
+      "label3": "To use spaces, simply add a \" around the label name.",
+      "label4": "For example: {prefix}\"Label with spaces\".",
+      "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
+      "priority2": "The higher the number, the higher the priority.",
+      "assignees": "To directly assign the task to a user, add their username prefixed with @ to the task.",
+      "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
+      "list2": "This will return an error if the list does not exist.",
+      "dateAndTime": "Date and time",
+      "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
+      "dateWeekday": "any weekday, will use the next date with that date",
+      "dateCurrentYear": "will use the current year",
+      "dateNth": "will use the {day}th of the current month",
+      "dateTime": "Combine any of the date formats with \"{time}\" (or {timePM}) to set a time."
     }
   },
   "team": {
diff --git a/src/store/modules/lists.js b/src/store/modules/lists.js
index ace651f6..cd088b86 100644
--- a/src/store/modules/lists.js
+++ b/src/store/modules/lists.js
@@ -25,6 +25,12 @@ export default {
 			}
 			return null
 		},
+		findListByExactname: state => name => {
+			const list = Object.values(state).find(l => {
+				return l.title.toLowerCase() === name.toLowerCase()
+			})
+			return typeof list === 'undefined' ? null : list
+		},
 	},
 	actions: {
 		toggleListFavorite(ctx, list) {
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
index b870f964..5895a11f 100644
--- a/src/styles/components/_all.scss
+++ b/src/styles/components/_all.scss
@@ -24,3 +24,4 @@
 @import 'datepicker';
 @import 'notifications';
 @import 'quick-actions';
+@import 'hint-modal';
diff --git a/src/styles/components/hint-modal.scss b/src/styles/components/hint-modal.scss
new file mode 100644
index 00000000..e82b32d2
--- /dev/null
+++ b/src/styles/components/hint-modal.scss
@@ -0,0 +1,43 @@
+.hint-modal {
+	z-index: 4600;
+
+	.card-content {
+		text-align: left;
+
+		.info {
+			font-style: italic;
+		}
+
+		p {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.shortcuts {
+				display: flex;
+				align-items: center;
+
+				i {
+					padding: 0 .25rem;
+				}
+
+				span {
+					padding: .1rem .35rem;
+					border: 1px solid $grey-300;
+					background: $grey-100;
+					border-radius: 3px;
+					font-size: .75rem;
+				}
+			}
+		}
+
+		.message-body {
+			padding: .5rem .75rem;
+		}
+	}
+}
+
+.modal-container-smaller .hint-modal .modal-container {
+	height: calc(100vh - 5rem);
+}
+
diff --git a/src/styles/components/keyboard-shortcuts.scss b/src/styles/components/keyboard-shortcuts.scss
index 892fb07c..93b3f9e4 100644
--- a/src/styles/components/keyboard-shortcuts.scss
+++ b/src/styles/components/keyboard-shortcuts.scss
@@ -7,42 +7,3 @@
   color: $grey-500;
   transition: color $transition;
 }
-
-.keyboard-shortcuts-modal {
-  z-index: 4600;
-
-  .card-content {
-    text-align: left;
-
-    .info {
-      font-style: italic;
-    }
-
-    p {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .shortcuts {
-        display: flex;
-        align-items: center;
-
-        i {
-          padding: 0 .25rem;
-        }
-
-        span {
-          padding: .1rem .35rem;
-          border: 1px solid $grey-300;
-          background: $grey-100;
-          border-radius: 3px;
-          font-size: .75rem;
-        }
-      }
-    }
-
-    .message-body {
-      padding: .5rem .75rem;
-    }
-  }
-}
diff --git a/src/views/filters/CreateSavedFilter.vue b/src/views/filters/CreateSavedFilter.vue
index 331e923d..6bbd7652 100644
--- a/src/views/filters/CreateSavedFilter.vue
+++ b/src/views/filters/CreateSavedFilter.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="modal-mask keyboard-shortcuts-modal">
+	<div class="modal-mask hint-modal">
 		<div @click.self="$router.back()" class="modal-container">
 			<div class="modal-content">
 				<card class="has-background-white has-no-shadow" :title="$t('filters.create.title')">
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index ba256fcc..b9bea14e 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -71,7 +71,9 @@
 								</div>
 							</div>
 							<template v-else>
-								{{ $t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit') }) }}
+								{{
+									$t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit')})
+								}}
 							</template>
 						</a>
 						<a
@@ -264,7 +266,6 @@
 
 <script>
 import TaskService from '../../../services/task'
-import TaskModel from '../../../models/task'
 import BucketModel from '../../../models/bucket'
 
 import {Container, Draggable} from 'vue-smooth-dnd'
@@ -281,6 +282,7 @@ import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import FilterPopup from '@/components/list/partials/filter-popup'
 import Dropdown from '@/components/misc/dropdown'
 import {playPop} from '@/helpers/playPop'
+import createTask from '@/components/tasks/mixins/createTask'
 
 export default {
 	name: 'Kanban',
@@ -328,6 +330,9 @@ export default {
 			filtersChanged: false, // To trigger a reload of the board
 		}
 	},
+	mixins: [
+		createTask,
+	],
 	created() {
 		this.taskService = new TaskService()
 		this.loadBuckets()
@@ -488,24 +493,7 @@ export default {
 			}
 			this.$set(this.newTaskError, bucketId, false)
 
-			// We need the actual bucket index so we put that in a seperate function
-			const bucketIndex = () => {
-				for (const t in this.buckets) {
-					if (this.buckets[t].id === bucketId) {
-						return t
-					}
-				}
-			}
-
-			const bi = bucketIndex()
-
-			const task = new TaskModel({
-				title: this.newTaskText,
-				bucketId: this.buckets[bi].id,
-				listId: this.$route.params.listId,
-			})
-
-			this.taskService.create(task)
+			this.createNewTask(this.newTaskText, bucketId)
 				.then(r => {
 					this.newTaskText = ''
 					this.$store.commit('kanban/addTaskToBucket', r)
@@ -514,10 +502,10 @@ export default {
 					this.error(e)
 				})
 				.finally(() => {
-					if (!this.$refs[`tasks-container${task.bucketId}`][0]) {
+					if (!this.$refs[`tasks-container${bucketId}`][0]) {
 						return
 					}
-					this.$refs[`tasks-container${task.bucketId}`][0].scrollTop = this.$refs[`tasks-container${task.bucketId}`][0].scrollHeight
+					this.$refs[`tasks-container${bucketId}`][0].scrollTop = this.$refs[`tasks-container${bucketId}`][0].scrollHeight
 				})
 		},
 		createNewBucket() {
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index a10e956a..f93da345 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -82,6 +82,7 @@
 				<p class="help is-danger" v-if="showError && newTaskText === ''">
 					{{ $t('list.list.addTitleRequired') }}
 				</p>
+				<quick-add-magic v-if="!showError"/>
 			</div>
 
 			<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
@@ -109,7 +110,8 @@
 				</div>
 				<card
 					v-if="isTaskEdit"
-					class="taskedit mt-0" :title="$t('list.list.editTask')" :has-close="true" @close="() => isTaskEdit = false"
+					class="taskedit mt-0" :title="$t('list.list.editTask')" :has-close="true"
+					@close="() => isTaskEdit = false"
 					:shadow="false">
 					<edit-task :task="taskEditTask"/>
 				</card>
@@ -156,15 +158,13 @@
 			<router-view/>
 		</transition>
 
+
 	</div>
 </template>
 
 <script>
 import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
-import LabelTaskService from '../../../services/labelTask'
-import LabelTask from '../../../models/labelTask'
-import LabelModel from '../../../models/label'
 
 import EditTask from '../../../components/tasks/edit-task'
 import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
@@ -173,8 +173,9 @@ import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/rights.json'
 import {mapState} from 'vuex'
 import FilterPopup from '@/components/list/partials/filter-popup'
-import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing'
+import createTask from '@/components/tasks/mixins/createTask'
+import QuickAddMagic from '@/components/tasks/partials/quick-add-magic'
 
 export default {
 	name: 'List',
@@ -184,17 +185,16 @@ export default {
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
 			newTaskText: '',
-
 			showError: false,
-			labelTaskService: LabelTaskService,
-
 			ctaVisible: false,
 		}
 	},
 	mixins: [
 		taskList,
+		createTask,
 	],
 	components: {
+		QuickAddMagic,
 		Nothing,
 		FilterPopup,
 		SingleTaskInList,
@@ -202,7 +202,6 @@ export default {
 	},
 	created() {
 		this.taskService = new TaskService()
-		this.labelTaskService = new LabelTaskService()
 
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
@@ -229,148 +228,11 @@ export default {
 			}
 			this.showError = false
 
-			let task = new TaskModel({title: this.newTaskText, listId: this.$route.params.listId})
-			this.taskService.create(task)
+			this.createNewTask(this.newTaskText)
 				.then(task => {
 					this.tasks.push(task)
 					this.sortTasks()
 					this.newTaskText = ''
-
-					// Unlike a proper programming language, Javascript only knows references to objects and does not
-					// allow you to control what is a reference and what isnt. Because of this we can't just add
-					// all labels to the task they belong to right after we found and added them to the task since
-					// the task update method also ensures all data the api sees has the right format. That means
-					// it processes labels. That processing changes the date format and the label color and makes
-					// the label pretty much unusable for everything else. Normally, this is not a big deal, because
-					// the labels on a task get thrown away anyway and replaced with the new models from the api
-					// when we get the updated answer back. However, in this specific case because we're passing a
-					// label we obtained from vuex that reference is kept and not thrown away. The task itself gets
-					// a new label object - you won't notice the bad reference until you want to add the same label
-					// again and notice it doesn't have a color anymore.
-					// I think this is what happens: (or rather would happen without the hack I've put in)
-					//   1. Query the store for a label which matches the name
-					//   2. Find one - remember, we get only a *reference* to the label from the store, not a new label object.
-					//      (Now there's *two* places with a reference to the same label object: in the store and in the
-					//      variable which holds the label from the search in the store)
-					//   3. .push the label to the task
-					//   4. Update the task to remove the labels from the name
-					//   4.1. The task update processes all labels belonging to that task, changing attributes of our
-					//        label in the process. Because this is a reference, it is also "updated" in the store.
-					//   5. Get an api response back. The service handler now creates a new label object for all labels
-					//      returned from the api. It will throw away all references to the old label in the process.
-					//   6. Now we have two objects with the same label data: The old one we originally obtained from
-					//      the store and the one that was created when parsing the api response. The old one was
-					//      modified before sending the api request and thus, our store which still holds a reference
-					//      to the old label now contains old data.
-					//      I guess this is the point where normally the GC would come in and collect the old label
-					//      object if the store wouldn't still hold a reference to it.
-					//
-					// Now, as a workaround, I'm putting all new labels added to that task in this separate variable to
-					// add them only after the task was updated to circumvent the task update service processing the
-					// label before sending it. Feels more hacky than it probably is.
-					const newLabels = []
-
-					// Check if the task has words starting with ~ in the title and make them to labels
-					const parts = task.title.split(' ~')
-					// The first element will always contain the title, even if there is no occurrence of ~
-					if (parts.length > 1) {
-
-						// First, create an unresolved promise for each entry in the array to wait
-						// until all labels are added to update the task title once again
-						let labelAddings = []
-						let labelAddsToWaitFor = []
-						parts.forEach((p, index) => {
-							if (index < 1) {
-								return
-							}
-
-							labelAddsToWaitFor.push(new Promise((resolve, reject) => {
-								labelAddings.push({resolve: resolve, reject: reject})
-							}))
-						})
-
-						// Then do everything that is involved in finding, creating and adding the label to the task
-						parts.forEach((p, index) => {
-							if (index < 1) {
-								return
-							}
-
-							// The part up until the next space
-							const labelTitle = p.split(' ')[0]
-
-							// Don't create an empty label
-							if (labelTitle === '') {
-								return
-							}
-
-							// Check if the label exists
-							const label = Object.values(this.$store.state.labels.labels).find(l => {
-								return l.title.toLowerCase() === labelTitle.toLowerCase()
-							})
-
-							// Label found, use it
-							if (typeof label !== 'undefined') {
-								const labelTask = new LabelTask({
-									taskId: task.id,
-									labelId: label.id,
-								})
-								this.labelTaskService.create(labelTask)
-									.then(result => {
-										newLabels.push(label)
-
-										// Remove the label text from the task title
-										task.title = task.title.replace(` ~${labelTitle}`, '')
-
-										// Make the promise done (the one with the index 0 does not exist)
-										labelAddings[index - 1].resolve(result)
-									})
-									.catch(e => {
-										this.error(e)
-									})
-							} else {
-								// label not found, create it
-								const label = new LabelModel({title: labelTitle})
-								this.$store.dispatch('labels/createLabel', label)
-									.then(res => {
-										const labelTask = new LabelTask({
-											taskId: task.id,
-											labelId: res.id,
-										})
-										this.labelTaskService.create(labelTask)
-											.then(result => {
-												newLabels.push(res)
-
-												// Remove the label text from the task title
-												task.title = task.title.replace(` ~${labelTitle}`, '')
-
-												// Make the promise done (the one with the index 0 does not exist)
-												labelAddings[index - 1].resolve(result)
-											})
-											.catch(e => {
-												this.error(e)
-											})
-									})
-									.catch(e => {
-										this.error(e)
-									})
-							}
-						})
-
-						// This waits to update the task until all labels have been added and the title has
-						// been modified to remove each label text
-						Promise.all(labelAddsToWaitFor)
-							.then(() => {
-								this.taskService.update(task)
-									.then(updatedTask => {
-										updatedTask.labels = newLabels
-										this.updateTasks(updatedTask)
-										this.$store.commit(HAS_TASKS, true)
-									})
-									.catch(e => {
-										this.error(e)
-									})
-							})
-					}
 				})
 				.catch(e => {
 					this.error(e)