From def719d86ff4d9e6a6f5cbb0684df58ff0f87d52 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 13:44:43 +0200
Subject: [PATCH 01/17] Add basic quick actions component

---
 src/components/home/contentAuth.vue           |  5 +-
 .../quick-actions/quick-actions.vue           | 53 +++++++++++++++++++
 src/store/index.js                            |  6 ++-
 src/store/mutation-types.js                   |  1 +
 4 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/components/quick-actions/quick-actions.vue

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 2918915b4..8366e5d0f 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -20,6 +20,8 @@
 			>
 				<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
 
+				<quick-actions/>
+
 				<router-view/>
 
 				<transition name="modal">
@@ -43,10 +45,11 @@
 import {mapState} from 'vuex'
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation'
+import QuickActions from '@/components/quick-actions/quick-actions'
 
 export default {
 	name: 'contentAuth',
-	components: {Navigation},
+	components: {QuickActions, Navigation},
 	watch: {
 		'$route': 'doStuffAfterRoute',
 	},
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
new file mode 100644
index 000000000..f07eaa057
--- /dev/null
+++ b/src/components/quick-actions/quick-actions.vue
@@ -0,0 +1,53 @@
+<template>
+	<modal v-if="active">
+		<div class="card p-4">
+			<input
+				type="text"
+				class="input"
+				placeholder="What do you want to do?"
+				v-focus
+				@keyup="run"
+				v-model="search"/>
+
+			<div v-if="search !== ''">
+				<ul>
+					<li v-for="l in lists" :key="l.id">{{ l.title }}</li>
+				</ul>
+				<nothing v-if="nothing">
+					No results found.
+				</nothing>
+			</div>
+		</div>
+	</modal>
+</template>
+
+<script>
+
+import Nothing from '@/components/misc/nothing'
+export default {
+	name: 'quick-actions',
+	components: {Nothing},
+	data() {
+		return {
+			search: '',
+			results: [],
+		}
+	},
+	computed: {
+		active: () => true, // TODO: use state + keyboard shortcut
+		lists() {
+			return Object.fromEntries(Object.entries(this.$store.state.lists).filter(l => {
+				return l[1].title.toLowerCase().includes(this.search.toLowerCase())
+			}))
+		},
+		nothing() {
+			return this.search === '' || Object.keys(this.lists).length === 0
+		},
+	},
+	methods: {
+		run() {
+			console.log('run', this.search)
+		}
+	},
+}
+</script>
diff --git a/src/store/index.js b/src/store/index.js
index 46a88ca06..4cc6eaab0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,7 +8,7 @@ import {
 	LOADING,
 	LOADING_MODULE,
 	MENU_ACTIVE,
-	ONLINE,
+	ONLINE, QUICK_ACTIONS_ACTIVE,
 } from './mutation-types'
 import config from './modules/config'
 import auth from './modules/auth'
@@ -44,6 +44,7 @@ export const store = new Vuex.Store({
 		hasTasks: false,
 		menuActive: true,
 		keyboardShortcutsActive: false,
+		quickActionsActive: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -127,5 +128,8 @@ export const store = new Vuex.Store({
 		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
 			state.keyboardShortcutsActive = active
 		},
+		[QUICK_ACTIONS_ACTIVE](state, active) {
+			state.quickActionsActive = active
+		},
 	},
 })
\ No newline at end of file
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 4a9043c59..9c6381d24 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -6,6 +6,7 @@ export const CURRENT_LIST = 'currentList'
 export const HAS_TASKS = 'hasTasks'
 export const MENU_ACTIVE = 'menuActive'
 export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
+export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
 
 export const CONFIG = 'config'
 export const AUTH = 'auth'
-- 
2.40.1


From 98744936aab2a9e93c5df37f65b3d3bf19384f33 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 14:25:14 +0200
Subject: [PATCH 02/17] use multiselect

---
 src/components/input/multiselect.vue          | 37 ++++++++++---
 .../quick-actions/quick-actions.vue           | 52 +++++++++----------
 src/styles/components/base/multiselect.scss   |  4 ++
 3 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index 38ce865ba..2bb520518 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -34,7 +34,7 @@
 		</div>
 
 		<transition name="fade">
-			<div class="search-results" v-if="searchResultsVisible">
+			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
 				<button
 					v-if="creatableAvailable"
 					class="is-fullwidth"
@@ -166,6 +166,27 @@ export default {
 				return false
 			},
 		},
+		// If true, displays the search results inline instead of using a dropdown.
+		inline: {
+			type: Boolean,
+			default() {
+				return false
+			},
+		},
+		// If true, shows search results when no query is specified.
+		showEmpty: {
+			type: Boolean,
+			default() {
+				return true
+			},
+		},
+		// The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
+		searchDelay: {
+			type: Number,
+			default() {
+				return 200
+			},
+		},
 	},
 	mounted() {
 		document.addEventListener('click', this.hideSearchResultsHandler)
@@ -181,10 +202,14 @@ export default {
 	},
 	computed: {
 		searchResultsVisible() {
+			if(this.query === '' && !this.showEmpty) {
+				return false
+			}
+
 			return this.showSearchResults && (
-				(this.filteredSearchResults.length > 0) ||
-				(this.creatable && this.query !== '')
-			)
+					(this.filteredSearchResults.length > 0) ||
+					(this.creatable && this.query !== '')
+				)
 		},
 		creatableAvailable() {
 			return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
@@ -211,7 +236,7 @@ export default {
 			// Updating the query with a binding does not work on mobile for some reason,
 			// getting the value manual does.
 			this.query = this.$refs.searchInput.value
-				
+
 			if (this.searchTimeout !== null) {
 				clearTimeout(this.searchTimeout)
 				this.searchTimeout = null
@@ -225,7 +250,7 @@ export default {
 					this.localLoading = false
 				}, 100) // The duration of the loading timeout of the services
 				this.showSearchResults = true
-			}, 200)
+			}, this.searchDelay)
 		},
 		hideSearchResultsHandler(e) {
 			closeWhenClickedOutside(e, this.$refs.multiselectRoot, this.closeSearchResults)
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index f07eaa057..2bb9cb772 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -1,53 +1,51 @@
 <template>
 	<modal v-if="active">
 		<div class="card p-4">
-			<input
-				type="text"
-				class="input"
+			<multiselect
 				placeholder="What do you want to do?"
-				v-focus
-				@keyup="run"
-				v-model="search"/>
-
-			<div v-if="search !== ''">
-				<ul>
-					<li v-for="l in lists" :key="l.id">{{ l.title }}</li>
-				</ul>
-				<nothing v-if="nothing">
-					No results found.
-				</nothing>
-			</div>
+				:search-results="results"
+				label="title"
+				@search="search"
+				:inline="true"
+				:show-empty="false"
+				@select="select"
+				:search-delay="0"
+			/>
 		</div>
 	</modal>
 </template>
 
 <script>
+import Multiselect from '@/components/input/multiselect'
 
-import Nothing from '@/components/misc/nothing'
 export default {
 	name: 'quick-actions',
-	components: {Nothing},
+	components: {
+		Multiselect,
+	},
 	data() {
 		return {
-			search: '',
-			results: [],
+			query: '',
 		}
 	},
 	computed: {
 		active: () => true, // TODO: use state + keyboard shortcut
-		lists() {
-			return Object.fromEntries(Object.entries(this.$store.state.lists).filter(l => {
-				return l[1].title.toLowerCase().includes(this.search.toLowerCase())
-			}))
+		results() {
+			return Object.values(this.$store.state.lists).filter(l => {
+				return l.title.toLowerCase().includes(this.query.toLowerCase())
+			}) ?? []
 		},
 		nothing() {
-			return this.search === '' || Object.keys(this.lists).length === 0
+			return this.search === '' || Object.keys(this.results).length === 0
 		},
 	},
 	methods: {
-		run() {
-			console.log('run', this.search)
-		}
+		search(query) {
+			this.query = query
+		},
+		select(e) {
+			console.log('select', e)
+		},
 	},
 }
 </script>
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
index 2d1997e22..5d42503e9 100644
--- a/src/styles/components/base/multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@@ -72,6 +72,10 @@
 		max-width: 100%;
 		min-width: 100%;
 
+		&-inline {
+			position: static;
+		}
+
 		button {
 			background: transparent;
 			display: block;
-- 
2.40.1


From 4692a1046dbd61e963951fa7edf9e75e060f5890 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 15:02:56 +0200
Subject: [PATCH 03/17] Search for tasks

---
 .../quick-actions/quick-actions.vue           | 74 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 3 deletions(-)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 2bb9cb772..ae1814a30 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -18,6 +18,12 @@
 <script>
 import Multiselect from '@/components/input/multiselect'
 
+import TaskService from '@/services/task'
+
+const TYPE_LIST = 'list'
+const TYPE_TASK = 'task'
+const TYPE_ACTION = 'action'
+
 export default {
 	name: 'quick-actions',
 	components: {
@@ -26,25 +32,87 @@ export default {
 	data() {
 		return {
 			query: '',
+			availableActions: [
+				{
+					title: 'New task',
+				},
+				{
+					title: 'New list',
+				},
+				{
+					title: 'New namespace',
+				},
+				{
+					title: 'New Team',
+				},
+			],
+			foundTasks: [],
+			taskSearchTimeout: null,
+			taskService: null,
+
+			foundTeams: [],
 		}
 	},
 	computed: {
 		active: () => true, // TODO: use state + keyboard shortcut
 		results() {
-			return Object.values(this.$store.state.lists).filter(l => {
+			const lists = (Object.values(this.$store.state.lists).filter(l => {
 				return l.title.toLowerCase().includes(this.query.toLowerCase())
-			}) ?? []
+			}) ?? [])
+				.map(l => {
+					l.type = TYPE_LIST
+					return l
+				})
+
+			const actions = this.availableActions
+				.filter(a => a.title.includes(this.query.toLowerCase()))
+				.map(a => {
+					a.type = TYPE_ACTION
+					return a
+				})
+
+			return [...actions, ...lists, ...this.foundTasks, ...this.foundTeams]
 		},
 		nothing() {
 			return this.search === '' || Object.keys(this.results).length === 0
 		},
 	},
+	created() {
+		this.taskService = new TaskService()
+	},
 	methods: {
 		search(query) {
 			this.query = query
+			this.searchTasks(query)
+		},
+		searchTasks(query) {
+			if (this.taskSearchTimeout !== null) {
+				clearTimeout(this.taskSearchTimeout)
+				this.taskSearchTimeout = null
+			}
+
+			this.taskSearchTimeout = setTimeout(() => {
+				this.taskService.getAll({}, {s: query})
+					.then(r => {
+						r = r.map(t => {
+							t.type = TYPE_TASK
+							return t
+						})
+						this.$set(this, 'foundTasks', r)
+					})
+			}, 150)
 		},
 		select(e) {
-			console.log('select', e)
+			switch (e.type) {
+				case TYPE_LIST:
+					this.$router.push({name: 'list.index', params: {listId: e.id}})
+					break
+				case TYPE_TASK:
+					this.$router.push({name: 'task.detail', params: {id: e.id}})
+					break
+				case TYPE_ACTION:
+					break
+			}
 		},
 	},
 }
-- 
2.40.1


From acd1b9b83abbe4d4538bcc43d3dcb1ce8a85eba3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 16:28:21 +0200
Subject: [PATCH 04/17] Remove multiselect again and diy

---
 .../quick-actions/quick-actions.vue           | 131 +++++++++++++-----
 src/styles/components/_all.scss               |   1 +
 src/styles/components/quick-actions.scss      |  53 +++++++
 3 files changed, 152 insertions(+), 33 deletions(-)
 create mode 100644 src/styles/components/quick-actions.scss

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index ae1814a30..5deb2c22f 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -1,34 +1,51 @@
 <template>
-	<modal v-if="active">
-		<div class="card p-4">
-			<multiselect
-				placeholder="What do you want to do?"
-				:search-results="results"
-				label="title"
-				@search="search"
-				:inline="true"
-				:show-empty="false"
-				@select="select"
-				:search-delay="0"
+	<modal v-if="active" class="quick-actions">
+		<div class="card">
+			<input
+				v-focus
+				class="input"
+				:class="{'is-loading': loading}"
+				v-model="query"
+				placeholder="Type a command or search..."
+				@keyup="search"
+				ref="searchInput"
+				@keydown.down.prevent="() => select(0, 0)"
 			/>
+
+			<div class="results">
+				<div v-for="(r, k) in results" :key="k" class="result">
+					<span class="result-title">
+						{{ r.title }}
+					</span>
+					<div class="result-items">
+						<button
+							v-for="(i, key) in r.items"
+							:key="key"
+							:ref="`result-${k}_${key}`"
+							@keydown.up.prevent="() => select(k, key - 1)"
+							@keydown.down.prevent="() => select(k, key + 1)"
+							@click.prevent.stop="() => doAction(r.type, i)"
+							@keyup.prevent.enter="() => doAction(r.type, i)"
+						>
+							{{ i.title }}
+						</button>
+					</div>
+				</div>
+			</div>
 		</div>
 	</modal>
 </template>
 
 <script>
-import Multiselect from '@/components/input/multiselect'
-
 import TaskService from '@/services/task'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
 const TYPE_ACTION = 'action'
+const TYPE_TEAM = 'team'
 
 export default {
 	name: 'quick-actions',
-	components: {
-		Multiselect,
-	},
 	data() {
 		return {
 			query: '',
@@ -59,40 +76,59 @@ export default {
 			const lists = (Object.values(this.$store.state.lists).filter(l => {
 				return l.title.toLowerCase().includes(this.query.toLowerCase())
 			}) ?? [])
-				.map(l => {
-					l.type = TYPE_LIST
-					return l
-				})
 
 			const actions = this.availableActions
-				.filter(a => a.title.includes(this.query.toLowerCase()))
-				.map(a => {
-					a.type = TYPE_ACTION
-					return a
-				})
+				.filter(a => a.title.toLowerCase().includes(this.query.toLowerCase()))
 
-			return [...actions, ...lists, ...this.foundTasks, ...this.foundTeams]
+			return [
+				{
+					type: TYPE_ACTION,
+					title: 'Actions',
+					items: actions,
+				},
+				{
+					type: TYPE_TASK,
+					title: 'Tasks',
+					items: this.foundTasks,
+				},
+				{
+					type: TYPE_LIST,
+					title: 'Lists',
+					items: lists,
+				},
+				{
+					type: TYPE_TEAM,
+					title: 'Teams',
+					items: this.foundTeams,
+				},
+			].filter(i => i.items.length > 0)
 		},
 		nothing() {
 			return this.search === '' || Object.keys(this.results).length === 0
 		},
+		loading() {
+			return this.taskService.loading
+		},
 	},
 	created() {
 		this.taskService = new TaskService()
 	},
 	methods: {
-		search(query) {
-			this.query = query
-			this.searchTasks(query)
+		search() {
+			this.searchTasks()
 		},
-		searchTasks(query) {
+		searchTasks() {
+			if (this.query === '') {
+				return
+			}
+
 			if (this.taskSearchTimeout !== null) {
 				clearTimeout(this.taskSearchTimeout)
 				this.taskSearchTimeout = null
 			}
 
 			this.taskSearchTimeout = setTimeout(() => {
-				this.taskService.getAll({}, {s: query})
+				this.taskService.getAll({}, {s: this.query})
 					.then(r => {
 						r = r.map(t => {
 							t.type = TYPE_TASK
@@ -102,8 +138,8 @@ export default {
 					})
 			}, 150)
 		},
-		select(e) {
-			switch (e.type) {
+		doAction(type, e) {
+			switch (type) {
 				case TYPE_LIST:
 					this.$router.push({name: 'list.index', params: {listId: e.id}})
 					break
@@ -114,6 +150,35 @@ export default {
 					break
 			}
 		},
+		select(parentIndex, index) {
+
+			if (index < 0 && parentIndex === 0) {
+				this.$refs.searchInput.focus()
+				return
+			}
+
+			if (index < 0) {
+				parentIndex--;
+				index = this.results[parentIndex].items.length - 1
+			}
+
+			let elems = this.$refs[`result-${parentIndex}_${index}`]
+
+			if (this.results[parentIndex].items.length === index) {
+				elems = this.$refs[`result-${parentIndex + 1}_0`]
+			}
+
+			if (typeof elems === 'undefined' || elems.length === 0) {
+				return
+			}
+
+			if (Array.isArray(elems)) {
+				elems[0].focus()
+				return
+			}
+
+			elems.focus()
+		},
 	},
 }
 </script>
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
index 4a1720de2..b870f9648 100644
--- a/src/styles/components/_all.scss
+++ b/src/styles/components/_all.scss
@@ -23,3 +23,4 @@
 @import 'api-config';
 @import 'datepicker';
 @import 'notifications';
+@import 'quick-actions';
diff --git a/src/styles/components/quick-actions.scss b/src/styles/components/quick-actions.scss
new file mode 100644
index 000000000..c403c3d89
--- /dev/null
+++ b/src/styles/components/quick-actions.scss
@@ -0,0 +1,53 @@
+.quick-actions {
+
+	.modal-content {
+		top: 6rem !important;
+		transform: translate(-50%, -3rem) !important;
+	}
+
+	.input {
+		border: 0;
+		font-size: 1.5rem;
+	}
+
+	.results {
+		text-align: left;
+		width: 100%;
+		color: $grey-800;
+
+		.result {
+			&-title {
+				background: $grey-50;
+				padding: .5rem;
+				display: block;
+				font-size: .75rem;
+			}
+
+			&-items {
+				button {
+					font-size: .9rem;
+					width: 100%;
+					background: transparent;
+					text-align: left;
+					box-shadow: none;
+					border-radius: 0;
+					text-transform: none;
+					font-family: $family-sans-serif;
+					font-weight: normal;
+					padding: .5rem .75rem;
+					border: none;
+					cursor: pointer;
+
+					&:focus, &:hover {
+						background: $grey-50;
+						box-shadow: none !important;
+					}
+
+					&:active {
+						background: $grey-100;
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
-- 
2.40.1


From 3fe439462d3669f4c13958cce1104bc5447d1298 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 16:30:11 +0200
Subject: [PATCH 05/17] Add reset on esc

---
 src/components/quick-actions/quick-actions.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 5deb2c22f..d9838f1b4 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -26,6 +26,7 @@
 							@keydown.down.prevent="() => select(k, key + 1)"
 							@click.prevent.stop="() => doAction(r.type, i)"
 							@keyup.prevent.enter="() => doAction(r.type, i)"
+							@keyup.prevent.esc="() => $refs.searchInput.focus()"
 						>
 							{{ i.title }}
 						</button>
-- 
2.40.1


From d8650c9570a844444c55c3fc23828b5e40d85cdc Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 16:46:07 +0200
Subject: [PATCH 06/17] Add support for selecting actions

---
 .../quick-actions/quick-actions.vue           | 64 +++++++++++++++----
 src/styles/components/quick-actions.scss      | 20 +++++-
 2 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index d9838f1b4..e9c774212 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -1,16 +1,22 @@
 <template>
 	<modal v-if="active" class="quick-actions">
 		<div class="card">
-			<input
-				v-focus
-				class="input"
-				:class="{'is-loading': loading}"
-				v-model="query"
-				placeholder="Type a command or search..."
-				@keyup="search"
-				ref="searchInput"
-				@keydown.down.prevent="() => select(0, 0)"
-			/>
+			<div class="action-input" :class="{'has-action': selectedAction !== null}">
+				<div class="selected-action tag" v-if="selectedAction !== null">
+					{{ selectedAction.title }}
+				</div>
+				<input
+					v-focus
+					class="input"
+					:class="{'is-loading': loading}"
+					v-model="query"
+					:placeholder="placeholder"
+					@keyup="search"
+					ref="searchInput"
+					@keydown.down.prevent="() => select(0, 0)"
+					@keyup.prevent.delete="() => selectedAction = null"
+				/>
+			</div>
 
 			<div class="results">
 				<div v-for="(r, k) in results" :key="k" class="result">
@@ -45,6 +51,11 @@ const TYPE_TASK = 'task'
 const TYPE_ACTION = 'action'
 const TYPE_TEAM = 'team'
 
+const ACTION_NEW_TASK = 'newTask'
+const ACTION_NEW_LIST = 'newList'
+const ACTION_NEW_NAMESPACE = 'newNamespace'
+const ACTION_NEW_TEAM = 'newTeam'
+
 export default {
 	name: 'quick-actions',
 	data() {
@@ -53,17 +64,23 @@ export default {
 			availableActions: [
 				{
 					title: 'New task',
+					action: ACTION_NEW_TASK,
 				},
 				{
 					title: 'New list',
+					action: ACTION_NEW_LIST,
 				},
 				{
 					title: 'New namespace',
+					action: ACTION_NEW_NAMESPACE,
 				},
 				{
 					title: 'New Team',
+					action: ACTION_NEW_TEAM,
 				},
 			],
+			selectedAction: null,
+
 			foundTasks: [],
 			taskSearchTimeout: null,
 			taskService: null,
@@ -110,6 +127,22 @@ export default {
 		loading() {
 			return this.taskService.loading
 		},
+		placeholder() {
+			if (this.selectedAction !== null) {
+				switch (this.selectedAction.action) {
+					case ACTION_NEW_TASK:
+						return 'Enter the title of the new task...'
+					case ACTION_NEW_LIST:
+						return 'Enter the title of the new list...'
+					case ACTION_NEW_TEAM:
+						return 'Enter the title of the new team...'
+					case ACTION_NEW_NAMESPACE:
+						return 'Enter the title of the new namespace...'
+				}
+			}
+
+			return 'Type a command or search...'
+		},
 	},
 	created() {
 		this.taskService = new TaskService()
@@ -139,15 +172,18 @@ export default {
 					})
 			}, 150)
 		},
-		doAction(type, e) {
+		doAction(type, item) {
 			switch (type) {
 				case TYPE_LIST:
-					this.$router.push({name: 'list.index', params: {listId: e.id}})
+					this.$router.push({name: 'list.index', params: {listId: item.id}})
 					break
 				case TYPE_TASK:
-					this.$router.push({name: 'task.detail', params: {id: e.id}})
+					this.$router.push({name: 'task.detail', params: {id: item.id}})
 					break
 				case TYPE_ACTION:
+					this.query = ''
+					this.selectedAction = item
+					this.$refs.searchInput.focus()
 					break
 			}
 		},
@@ -159,7 +195,7 @@ export default {
 			}
 
 			if (index < 0) {
-				parentIndex--;
+				parentIndex--
 				index = this.results[parentIndex].items.length - 1
 			}
 
diff --git a/src/styles/components/quick-actions.scss b/src/styles/components/quick-actions.scss
index c403c3d89..1e9de4e0b 100644
--- a/src/styles/components/quick-actions.scss
+++ b/src/styles/components/quick-actions.scss
@@ -5,9 +5,23 @@
 		transform: translate(-50%, -3rem) !important;
 	}
 
-	.input {
-		border: 0;
-		font-size: 1.5rem;
+	.action-input {
+		display: flex;
+		align-items: center;
+
+		.input {
+			border: 0;
+			font-size: 1.5rem;
+		}
+
+		&.has-action .input {
+			padding-left: .5rem;
+		}
+
+		.selected-action {
+			font-size: 1.25rem;
+			margin-left: .5rem;
+		}
 	}
 
 	.results {
-- 
2.40.1


From af1eb8ca43acb6a5daf9e4a05c378b68e4ba8c2b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 16:49:02 +0200
Subject: [PATCH 07/17] Rename action to cmd

---
 .../quick-actions/quick-actions.vue           | 54 +++++++++----------
 src/styles/components/quick-actions.scss      |  4 +-
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index e9c774212..729b24e63 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -1,9 +1,9 @@
 <template>
 	<modal v-if="active" class="quick-actions">
 		<div class="card">
-			<div class="action-input" :class="{'has-action': selectedAction !== null}">
-				<div class="selected-action tag" v-if="selectedAction !== null">
-					{{ selectedAction.title }}
+			<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
+				<div class="active-cmd tag" v-if="selectedCmd !== null">
+					{{ selectedCmd.title }}
 				</div>
 				<input
 					v-focus
@@ -14,7 +14,7 @@
 					@keyup="search"
 					ref="searchInput"
 					@keydown.down.prevent="() => select(0, 0)"
-					@keyup.prevent.delete="() => selectedAction = null"
+					@keyup.prevent.delete="() => selectedCmd = null"
 				/>
 			</div>
 
@@ -48,38 +48,38 @@ import TaskService from '@/services/task'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
-const TYPE_ACTION = 'action'
+const TYPE_CMD = 'cmd'
 const TYPE_TEAM = 'team'
 
-const ACTION_NEW_TASK = 'newTask'
-const ACTION_NEW_LIST = 'newList'
-const ACTION_NEW_NAMESPACE = 'newNamespace'
-const ACTION_NEW_TEAM = 'newTeam'
+const CMD_NEW_TASK = 'newTask'
+const CMD_NEW_LIST = 'newList'
+const CMD_NEW_NAMESPACE = 'newNamespace'
+const CMD_NEW_TEAM = 'newTeam'
 
 export default {
 	name: 'quick-actions',
 	data() {
 		return {
 			query: '',
-			availableActions: [
+			availableCmds: [
 				{
 					title: 'New task',
-					action: ACTION_NEW_TASK,
+					action: CMD_NEW_TASK,
 				},
 				{
 					title: 'New list',
-					action: ACTION_NEW_LIST,
+					action: CMD_NEW_LIST,
 				},
 				{
 					title: 'New namespace',
-					action: ACTION_NEW_NAMESPACE,
+					action: CMD_NEW_NAMESPACE,
 				},
 				{
 					title: 'New Team',
-					action: ACTION_NEW_TEAM,
+					action: CMD_NEW_TEAM,
 				},
 			],
-			selectedAction: null,
+			selectedCmd: null,
 
 			foundTasks: [],
 			taskSearchTimeout: null,
@@ -95,14 +95,14 @@ export default {
 				return l.title.toLowerCase().includes(this.query.toLowerCase())
 			}) ?? [])
 
-			const actions = this.availableActions
+			const cmds = this.availableCmds
 				.filter(a => a.title.toLowerCase().includes(this.query.toLowerCase()))
 
 			return [
 				{
-					type: TYPE_ACTION,
-					title: 'Actions',
-					items: actions,
+					type: TYPE_CMD,
+					title: 'Commands',
+					items: cmds,
 				},
 				{
 					type: TYPE_TASK,
@@ -128,15 +128,15 @@ export default {
 			return this.taskService.loading
 		},
 		placeholder() {
-			if (this.selectedAction !== null) {
-				switch (this.selectedAction.action) {
-					case ACTION_NEW_TASK:
+			if (this.selectedCmd !== null) {
+				switch (this.selectedCmd.action) {
+					case CMD_NEW_TASK:
 						return 'Enter the title of the new task...'
-					case ACTION_NEW_LIST:
+					case CMD_NEW_LIST:
 						return 'Enter the title of the new list...'
-					case ACTION_NEW_TEAM:
+					case CMD_NEW_TEAM:
 						return 'Enter the title of the new team...'
-					case ACTION_NEW_NAMESPACE:
+					case CMD_NEW_NAMESPACE:
 						return 'Enter the title of the new namespace...'
 				}
 			}
@@ -180,9 +180,9 @@ export default {
 				case TYPE_TASK:
 					this.$router.push({name: 'task.detail', params: {id: item.id}})
 					break
-				case TYPE_ACTION:
+				case TYPE_CMD:
 					this.query = ''
-					this.selectedAction = item
+					this.selectedCmd = item
 					this.$refs.searchInput.focus()
 					break
 			}
diff --git a/src/styles/components/quick-actions.scss b/src/styles/components/quick-actions.scss
index 1e9de4e0b..71583e9af 100644
--- a/src/styles/components/quick-actions.scss
+++ b/src/styles/components/quick-actions.scss
@@ -14,11 +14,11 @@
 			font-size: 1.5rem;
 		}
 
-		&.has-action .input {
+		&.has-active-cmd .input {
 			padding-left: .5rem;
 		}
 
-		.selected-action {
+		.active-cmd {
 			font-size: 1.25rem;
 			margin-left: .5rem;
 		}
-- 
2.40.1


From b0bfe3989e7cb2799ec5707d80d7baee10ea5c19 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 16:59:43 +0200
Subject: [PATCH 08/17] Add new team and new namespace cmds

---
 .../quick-actions/quick-actions.vue           | 74 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 3 deletions(-)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 729b24e63..1a4ef714e 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -15,10 +15,11 @@
 					ref="searchInput"
 					@keydown.down.prevent="() => select(0, 0)"
 					@keyup.prevent.delete="() => selectedCmd = null"
+					@keyup.prevent.enter="doCmd"
 				/>
 			</div>
 
-			<div class="results">
+			<div class="results" v-if="selectedCmd === null">
 				<div v-for="(r, k) in results" :key="k" class="result">
 					<span class="result-title">
 						{{ r.title }}
@@ -45,6 +46,12 @@
 
 <script>
 import TaskService from '@/services/task'
+import ListService from '@/services/list'
+import NamespaceService from '@/services/namespace'
+import TeamService from '@/services/team'
+
+import NamespaceModel from '@/models/namespace'
+import TeamModel from '@/models/team'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@@ -86,6 +93,10 @@ export default {
 			taskService: null,
 
 			foundTeams: [],
+			teamService: null,
+
+			namespaceService: null,
+			listService: null,
 		}
 	},
 	computed: {
@@ -134,10 +145,10 @@ export default {
 						return 'Enter the title of the new task...'
 					case CMD_NEW_LIST:
 						return 'Enter the title of the new list...'
-					case CMD_NEW_TEAM:
-						return 'Enter the title of the new team...'
 					case CMD_NEW_NAMESPACE:
 						return 'Enter the title of the new namespace...'
+					case CMD_NEW_TEAM:
+						return 'Enter the name of the new team...'
 				}
 			}
 
@@ -146,6 +157,9 @@ export default {
 	},
 	created() {
 		this.taskService = new TaskService()
+		this.listService = new ListService()
+		this.namespaceService = new NamespaceService()
+		this.teamService = new TeamService()
 	},
 	methods: {
 		search() {
@@ -216,6 +230,60 @@ export default {
 
 			elems.focus()
 		},
+		doCmd() {
+			if (this.selectedCmd === null) {
+				return
+			}
+
+			if (this.query === '') {
+				return
+			}
+
+			switch (this.selectedCmd.action) {
+				case CMD_NEW_TASK:
+					this.newTask()
+					break
+				case CMD_NEW_LIST:
+					this.newList()
+					break
+				case CMD_NEW_NAMESPACE:
+					this.newNamespace()
+					break
+				case CMD_NEW_TEAM:
+					this.newTeam()
+					break
+			}
+		},
+		newTask() {
+		},
+		newList() {
+		},
+		newNamespace() {
+			const newNamespace = new NamespaceModel({title: this.query})
+			this.namespaceService.create(newNamespace)
+				.then(r => {
+					this.$store.commit('namespaces/addNamespace', r)
+					this.success({message: 'The namespace was successfully created.'}, this)
+					this.$router.back()
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
+		},
+		newTeam() {
+			const newTeam = new TeamModel({name: this.query})
+			this.teamService.create(newTeam)
+				.then(r => {
+					this.$router.push({
+						name: 'teams.edit',
+						params: {id: r.id},
+					})
+					this.success({message: 'The team was successfully created.'}, this)
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
+		},
 	},
 }
 </script>
-- 
2.40.1


From 0fcab30629edd4948479ea52645a5686839bda8f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 17:00:15 +0200
Subject: [PATCH 09/17] Reorder

---
 .../quick-actions/quick-actions.vue           | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 1a4ef714e..2594e9e2f 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -201,35 +201,6 @@ export default {
 					break
 			}
 		},
-		select(parentIndex, index) {
-
-			if (index < 0 && parentIndex === 0) {
-				this.$refs.searchInput.focus()
-				return
-			}
-
-			if (index < 0) {
-				parentIndex--
-				index = this.results[parentIndex].items.length - 1
-			}
-
-			let elems = this.$refs[`result-${parentIndex}_${index}`]
-
-			if (this.results[parentIndex].items.length === index) {
-				elems = this.$refs[`result-${parentIndex + 1}_0`]
-			}
-
-			if (typeof elems === 'undefined' || elems.length === 0) {
-				return
-			}
-
-			if (Array.isArray(elems)) {
-				elems[0].focus()
-				return
-			}
-
-			elems.focus()
-		},
 		doCmd() {
 			if (this.selectedCmd === null) {
 				return
@@ -284,6 +255,35 @@ export default {
 					this.error(e, this)
 				})
 		},
+		select(parentIndex, index) {
+
+			if (index < 0 && parentIndex === 0) {
+				this.$refs.searchInput.focus()
+				return
+			}
+
+			if (index < 0) {
+				parentIndex--
+				index = this.results[parentIndex].items.length - 1
+			}
+
+			let elems = this.$refs[`result-${parentIndex}_${index}`]
+
+			if (this.results[parentIndex].items.length === index) {
+				elems = this.$refs[`result-${parentIndex + 1}_0`]
+			}
+
+			if (typeof elems === 'undefined' || elems.length === 0) {
+				return
+			}
+
+			if (Array.isArray(elems)) {
+				elems[0].focus()
+				return
+			}
+
+			elems.focus()
+		},
 	},
 }
 </script>
-- 
2.40.1


From 1cebe3ca8b2b6592160a7227bb995c1435a404fa Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 17:02:36 +0200
Subject: [PATCH 10/17] Fix unselecting a command

---
 src/components/quick-actions/quick-actions.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 2594e9e2f..c7573a9cd 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -14,7 +14,7 @@
 					@keyup="search"
 					ref="searchInput"
 					@keydown.down.prevent="() => select(0, 0)"
-					@keyup.prevent.delete="() => selectedCmd = null"
+					@keyup.prevent.delete="unselectCmd"
 					@keyup.prevent.enter="doCmd"
 				/>
 			</div>
@@ -136,7 +136,10 @@ export default {
 			return this.search === '' || Object.keys(this.results).length === 0
 		},
 		loading() {
-			return this.taskService.loading
+			return this.taskService.loading ||
+				this.listService.loading ||
+				this.namespaceService.loading ||
+				this.teamService.loading
 		},
 		placeholder() {
 			if (this.selectedCmd !== null) {
@@ -284,6 +287,13 @@ export default {
 
 			elems.focus()
 		},
+		unselectCmd() {
+			if (this.query !== '') {
+				return
+			}
+
+			this.selectedCmd = null
+		},
 	},
 }
 </script>
-- 
2.40.1


From 8f94c64e10215eb10ef574501b1f12b15d25591e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 17:29:23 +0200
Subject: [PATCH 11/17] Add creating a new task cmd

---
 src/components/home/contentAuth.vue           |  2 +-
 .../quick-actions/quick-actions.vue           | 22 +++++++++++++++++++
 src/store/index.js                            |  6 +++++
 src/views/tasks/TaskDetailView.vue            |  5 ++++-
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 8366e5d0f..cee4fadbd 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -86,7 +86,7 @@ export default {
 				this.$route.name === 'user.settings' ||
 				this.$route.name === 'namespaces.index'
 			) {
-				this.$store.commit(CURRENT_LIST, {})
+				this.$store.commit(CURRENT_LIST, null)
 			}
 		},
 		renewTokenOnFocus() {
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index c7573a9cd..03f964e58 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -50,9 +50,12 @@ import ListService from '@/services/list'
 import NamespaceService from '@/services/namespace'
 import TeamService from '@/services/team'
 
+import TaskModel from '@/models/task'
 import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 
+import {CURRENT_LIST} from '@/store/mutation-types'
+
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
 const TYPE_CMD = 'cmd'
@@ -157,6 +160,9 @@ export default {
 
 			return 'Type a command or search...'
 		},
+		currentList() {
+			return Object.keys(this.$store.state[CURRENT_LIST]).length === 0 ? null : this.$store.state[CURRENT_LIST]
+		},
 	},
 	created() {
 		this.taskService = new TaskService()
@@ -229,6 +235,22 @@ export default {
 			}
 		},
 		newTask() {
+			if (this.currentList === null) {
+				return
+			}
+
+			const newTask = new TaskModel({
+				title: this.query,
+				listId: this.currentList.id,
+			})
+			this.taskService.create(newTask)
+				.then(r => {
+					this.success({message: 'The task was successfully created.'}, this)
+					this.$router.push({name: 'task.detail', params: {id: r.id}})
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
 		},
 		newList() {
 		},
diff --git a/src/store/index.js b/src/store/index.js
index 4cc6eaab0..260d02705 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -61,6 +61,12 @@ export const store = new Vuex.Store({
 		},
 		[CURRENT_LIST](state, currentList) {
 
+			if (currentList === null) {
+				state.currentList = {}
+				state.background = null
+				return
+			}
+
 			setTitle(currentList.title)
 
 			// Not sure if this is the right way to do it but hey, it works
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 02cb5c65f..6a8918e1e 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -429,6 +429,7 @@ import heading from '@/components/tasks/partials/heading'
 import Datepicker from '@/components/input/datepicker'
 import {playPop} from '@/helpers/playPop'
 import TaskSubscription from '@/components/misc/subscription'
+import {CURRENT_LIST} from '@/store/mutation-types'
 
 export default {
 	name: 'TaskDetailView',
@@ -520,7 +521,9 @@ export default {
 				return null
 			}
 
-			return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+			const list = this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+			this.$store.commit(CURRENT_LIST, list)
+			return list
 		},
 		canWrite() {
 			return this.task && this.task.maxRight && this.task.maxRight > rights.READ
-- 
2.40.1


From a619a89db8141821a8d3041c0f7c44745187e250 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 17:34:30 +0200
Subject: [PATCH 12/17] Make create commands dependent on the context

---
 .../quick-actions/quick-actions.vue           | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 03f964e58..9e0ec98b2 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -71,24 +71,6 @@ export default {
 	data() {
 		return {
 			query: '',
-			availableCmds: [
-				{
-					title: 'New task',
-					action: CMD_NEW_TASK,
-				},
-				{
-					title: 'New list',
-					action: CMD_NEW_LIST,
-				},
-				{
-					title: 'New namespace',
-					action: CMD_NEW_NAMESPACE,
-				},
-				{
-					title: 'New Team',
-					action: CMD_NEW_TEAM,
-				},
-			],
 			selectedCmd: null,
 
 			foundTasks: [],
@@ -163,6 +145,30 @@ export default {
 		currentList() {
 			return Object.keys(this.$store.state[CURRENT_LIST]).length === 0 ? null : this.$store.state[CURRENT_LIST]
 		},
+		availableCmds() {
+			const cmds = []
+
+			if (this.currentList !== null) {
+				cmds.push({
+					title: 'New task',
+					action: CMD_NEW_TASK,
+				})
+				cmds.push({
+					title: 'New list',
+					action: CMD_NEW_LIST,
+				})
+			}
+			cmds.push({
+				title: 'New namespace',
+				action: CMD_NEW_NAMESPACE,
+			})
+			cmds.push({
+				title: 'New Team',
+				action: CMD_NEW_TEAM,
+			})
+
+			return cmds
+		},
 	},
 	created() {
 		this.taskService = new TaskService()
-- 
2.40.1


From 455ccad3c40663bc601f43d95fd743b4cd9767e3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 17:36:17 +0200
Subject: [PATCH 13/17] Add create list cmd

---
 src/components/quick-actions/quick-actions.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 9e0ec98b2..d68d9abcc 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -55,6 +55,7 @@ import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 
 import {CURRENT_LIST} from '@/store/mutation-types'
+import ListModel from '@/models/list'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@@ -259,6 +260,22 @@ export default {
 				})
 		},
 		newList() {
+			if (this.currentList === null) {
+				return
+			}
+
+			const newList = new ListModel({
+				title: this.query,
+				namespaceId: this.currentList.namespaceId,
+			})
+			this.listService.create(newList)
+				.then(r => {
+					this.success({message: 'The list was successfully created.'}, this)
+					this.$router.push({name: 'list.index', params: {listId: r.id}})
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
 		},
 		newNamespace() {
 			const newNamespace = new NamespaceModel({title: this.query})
-- 
2.40.1


From 4566624df221fa5ad30ad6754ab954b09dede1bd Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 17:43:34 +0200
Subject: [PATCH 14/17] Add hint text + some fixes

---
 .../quick-actions/quick-actions.vue           | 21 ++++++++++++++++++-
 src/views/tasks/TaskDetailView.vue            |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index d68d9abcc..98fc9fa27 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -19,6 +19,10 @@
 				/>
 			</div>
 
+			<div class="has-text-grey-light p-4" v-if="hintText !== ''">
+				{{ hintText }}
+			</div>
+
 			<div class="results" v-if="selectedCmd === null">
 				<div v-for="(r, k) in results" :key="k" class="result">
 					<span class="result-title">
@@ -143,6 +147,21 @@ export default {
 
 			return 'Type a command or search...'
 		},
+		hintText() {
+			let namespace
+
+			if (this.selectedCmd !== null) {
+				switch (this.selectedCmd.action) {
+					case CMD_NEW_TASK:
+						return `Create a task in the current list (${this.currentList.title})`
+					case CMD_NEW_LIST:
+						namespace = this.$store.getters['namespaces/getNamespaceById'](this.currentList.namespaceId)
+						return `Create a list in the current namespace (${namespace.title})`
+				}
+			}
+
+			return ''
+		},
 		currentList() {
 			return Object.keys(this.$store.state[CURRENT_LIST]).length === 0 ? null : this.$store.state[CURRENT_LIST]
 		},
@@ -182,7 +201,7 @@ export default {
 			this.searchTasks()
 		},
 		searchTasks() {
-			if (this.query === '') {
+			if (this.query === '' || this.selectedCmd !== null) {
 				return
 			}
 
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 6a8918e1e..b77e96287 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -522,7 +522,7 @@ export default {
 			}
 
 			const list = this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
-			this.$store.commit(CURRENT_LIST, list)
+			this.$store.commit(CURRENT_LIST, list.list)
 			return list
 		},
 		canWrite() {
-- 
2.40.1


From 4dcc377243c95c251928690b645d77452a599a44 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 17:55:52 +0200
Subject: [PATCH 15/17] Add keyboard shortcuts

---
 src/components/home/topNavigation.vue         |  13 +-
 .../notifications/notifications.vue           |   2 +-
 .../quick-actions/quick-actions.vue           |  22 ++-
 src/styles/components/notifications.scss      |  26 +--
 src/styles/theme/navigation.scss              | 181 ++++++++++--------
 5 files changed, 136 insertions(+), 108 deletions(-)

diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index fed0f0a4e..5a475f154 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -37,6 +37,14 @@
 
 		<div class="navbar-end">
 			<update/>
+			<a
+				@click="openQuickActions"
+				class="trigger-button pr-0"
+				@shortkey="openQuickActions"
+				v-shortkey="['ctrl', 'k']"
+			>
+				<icon icon="search"/>
+			</a>
 			<notifications/>
 			<div class="user">
 				<img :src="userAvatar" alt="" class="avatar"/>
@@ -83,7 +91,7 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST} from '@/store/mutation-types'
+import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import Rights from '@/models/rights.json'
 import Update from '@/components/home/update'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
@@ -113,6 +121,9 @@ export default {
 			this.$store.dispatch('auth/logout')
 			this.$router.push({name: 'user.login'})
 		},
+		openQuickActions() {
+			this.$store.commit(QUICK_ACTIONS_ACTIVE, true)
+		},
 	},
 }
 </script>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 3503de591..e0f72422d 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="notifications">
-		<a @click.stop="showNotifications = !showNotifications" class="trigger">
+		<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
 			<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
 			<icon icon="bell"/>
 		</a>
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 98fc9fa27..027b69900 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">
+	<modal v-if="active" class="quick-actions" @close="closeQuickActions">
 		<div class="card">
 			<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
 				<div class="active-cmd tag" v-if="selectedCmd !== null">
@@ -16,6 +16,7 @@
 					@keydown.down.prevent="() => select(0, 0)"
 					@keyup.prevent.delete="unselectCmd"
 					@keyup.prevent.enter="doCmd"
+					@keyup.prevent.esc="closeQuickActions"
 				/>
 			</div>
 
@@ -58,7 +59,7 @@ import TaskModel from '@/models/task'
 import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 
-import {CURRENT_LIST} from '@/store/mutation-types'
+import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
 
 const TYPE_LIST = 'list'
@@ -90,7 +91,13 @@ export default {
 		}
 	},
 	computed: {
-		active: () => true, // TODO: use state + keyboard shortcut
+		active() {
+			const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
+			if (!active) {
+				this.reset()
+			}
+			return active
+		},
 		results() {
 			const lists = (Object.values(this.$store.state.lists).filter(l => {
 				return l.title.toLowerCase().includes(this.query.toLowerCase())
@@ -150,7 +157,7 @@ export default {
 		hintText() {
 			let namespace
 
-			if (this.selectedCmd !== null) {
+			if (this.selectedCmd !== null && this.currentList !== null) {
 				switch (this.selectedCmd.action) {
 					case CMD_NEW_TASK:
 						return `Create a task in the current list (${this.currentList.title})`
@@ -221,6 +228,9 @@ export default {
 					})
 			}, 150)
 		},
+		closeQuickActions() {
+			this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
+		},
 		doAction(type, item) {
 			switch (type) {
 				case TYPE_LIST:
@@ -358,6 +368,10 @@ export default {
 
 			this.selectedCmd = null
 		},
+		reset() {
+			this.query = ''
+			this.selectedCmd = null
+		}
 	},
 }
 </script>
diff --git a/src/styles/components/notifications.scss b/src/styles/components/notifications.scss
index 22fba6eab..e30346701 100644
--- a/src/styles/components/notifications.scss
+++ b/src/styles/components/notifications.scss
@@ -1,24 +1,16 @@
 .notifications {
 	width: 50px;
 
-	.trigger {
-		cursor: pointer;
-		color: $grey-400;
-		padding: 1rem;
-		font-size: 1.25rem;
-		position: relative;
+	.unread-indicator {
+		position: absolute;
+		top: 1rem;
+		right: .75rem;
+		width: .75rem;
+		height: .75rem;
 
-		.unread-indicator {
-			position: absolute;
-			top: 1rem;
-			right: .75rem;
-			width: .75rem;
-			height: .75rem;
-
-			background: $primary;
-			border-radius: 100%;
-			border: 2px solid $white;
-		}
+		background: $primary;
+		border-radius: 100%;
+		border: 2px solid $white;
 	}
 
 	.notifications-list {
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 82c1c7cfd..075aa6bb5 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -318,112 +318,123 @@
           display: inline-block;
         }
       }
+
     }
   }
 }
 
-.navbar .user {
-  span {
-    font-family: $vikunja-font;
+.navbar {
+  .trigger-button {
+    cursor: pointer;
+    color: $grey-400;
+    padding: 1rem;
+    font-size: 1.25rem;
+    position: relative;
   }
 
-  .avatar {
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
-    border-radius: 100%;
-    vertical-align: middle;
-    height: 40px;
-  }
+  .user {
+    span {
+      font-family: $vikunja-font;
+    }
 
-  .logout-icon {
-    color: $grey-900;
-
-    .icon {
+    .avatar {
+      -webkit-border-radius: 100%;
+      -moz-border-radius: 100%;
+      border-radius: 100%;
       vertical-align: middle;
+      height: 40px;
+    }
+
+    .logout-icon {
+      color: $grey-900;
+
+      .icon {
+        vertical-align: middle;
+      }
+    }
+
+    .dropdown-trigger .button {
+      background: none;
+
+      &:focus:not(:active), &:active {
+        outline: none !important;
+        -webkit-box-shadow: none !important;
+        -moz-box-shadow: none !important;
+        box-shadow: none !important;
+      }
     }
   }
 
-  .dropdown-trigger .button {
-    background: none;
-
-    &:focus:not(:active), &:active {
-      outline: none !important;
-      -webkit-box-shadow: none !important;
-      -moz-box-shadow: none !important;
-      box-shadow: none !important;
-    }
-  }
-}
-
-.menu-hide-button, .menu-show-button {
-  display: none;
-  z-index: 31;
-  font-weight: bold;
-  font-size: 2rem;
-  color: $text;
-  line-height: 1;
-
-  &:hover, &:focus {
-    color: $grey-900;
-  }
-}
-
-.menu-hide-button {
-  position: fixed;
-
-  &:hover, &:focus {
+  .menu-hide-button, .menu-show-button {
+    display: none;
+    z-index: 31;
+    font-weight: bold;
+    font-size: 2rem;
     color: $text;
+    line-height: 1;
+
+    &:hover, &:focus {
+      color: $grey-900;
+    }
   }
-}
 
-.navbar-brand .menu-show-button {
-  display: block;
-}
-
-.mobile-overlay {
-  display: none;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(250, 250, 250, 0.8);
-  z-index: 5;
-  opacity: 0;
-  transition: all $transition;
-}
-
-@media screen and (max-width: $tablet) {
   .menu-hide-button {
-    display: block;
-    top: $hamburger-menu-icon-spacing;
-    right: $hamburger-menu-icon-spacing;
+    position: fixed;
+
+    &:hover, &:focus {
+      color: $text;
+    }
   }
 
-  .menu-show-button {
+  .navbar-brand .menu-show-button {
     display: block;
-    margin-left: $hamburger-menu-icon-spacing;
   }
 
   .mobile-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(250, 250, 250, 0.8);
+    z-index: 5;
+    opacity: 0;
+    transition: all $transition;
+  }
+
+  @media screen and (max-width: $tablet) {
+    .menu-hide-button {
+      display: block;
+      top: $hamburger-menu-icon-spacing;
+      right: $hamburger-menu-icon-spacing;
+    }
+
+    .menu-show-button {
+      display: block;
+      margin-left: $hamburger-menu-icon-spacing;
+    }
+
+    .mobile-overlay {
+      display: block;
+      opacity: 1;
+    }
+
+    .navbar.is-dark .navbar-brand > .navbar-item {
+      margin: 0 auto;
+    }
+  }
+
+  .logout-icon {
+    margin-right: 0.85rem !important;
+  }
+
+  .menu-bottom-link {
+    width: 100%;
+    color: $grey-300;
+    text-align: center;
     display: block;
-    opacity: 1;
-  }
-
-  .navbar.is-dark .navbar-brand > .navbar-item {
-    margin: 0 auto;
+    margin: 1rem 0;
+    font-size: .8rem;
   }
 }
-
-.logout-icon {
-  margin-right: 0.85rem !important;
-}
-
-.menu-bottom-link {
-  width: 100%;
-  color: $grey-300;
-  text-align: center;
-  display: block;
-  margin: 1rem 0;
-  font-size: .8rem;
-}
-- 
2.40.1


From 1020f56f176a1f58aadef16f0ffd9ca13bac0069 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 17:57:26 +0200
Subject: [PATCH 16/17] Close the popup after doing an action

---
 src/components/quick-actions/quick-actions.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 027b69900..0eceef81c 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -235,9 +235,11 @@ export default {
 			switch (type) {
 				case TYPE_LIST:
 					this.$router.push({name: 'list.index', params: {listId: item.id}})
+					this.closeQuickActions()
 					break
 				case TYPE_TASK:
 					this.$router.push({name: 'task.detail', params: {id: item.id}})
+					this.closeQuickActions()
 					break
 				case TYPE_CMD:
 					this.query = ''
@@ -283,6 +285,7 @@ export default {
 				.then(r => {
 					this.success({message: 'The task was successfully created.'}, this)
 					this.$router.push({name: 'task.detail', params: {id: r.id}})
+					this.closeQuickActions()
 				})
 				.catch((e) => {
 					this.error(e, this)
@@ -301,6 +304,7 @@ export default {
 				.then(r => {
 					this.success({message: 'The list was successfully created.'}, this)
 					this.$router.push({name: 'list.index', params: {listId: r.id}})
+					this.closeQuickActions()
 				})
 				.catch((e) => {
 					this.error(e, this)
@@ -313,6 +317,7 @@ export default {
 					this.$store.commit('namespaces/addNamespace', r)
 					this.success({message: 'The namespace was successfully created.'}, this)
 					this.$router.back()
+					this.closeQuickActions()
 				})
 				.catch((e) => {
 					this.error(e, this)
@@ -327,6 +332,7 @@ export default {
 						params: {id: r.id},
 					})
 					this.success({message: 'The team was successfully created.'}, this)
+					this.closeQuickActions()
 				})
 				.catch((e) => {
 					this.error(e, this)
-- 
2.40.1


From d706a5d8ccfcebe3993aca01400bbb7794f6e700 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 30 May 2021 18:06:53 +0200
Subject: [PATCH 17/17] Show list title when searching for tasks

---
 src/components/quick-actions/quick-actions.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 0eceef81c..9742fb354 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -222,6 +222,11 @@ export default {
 					.then(r => {
 						r = r.map(t => {
 							t.type = TYPE_TASK
+							const list = this.$store.getters['lists/getListById'](t.listId) === null ? null : this.$store.getters['lists/getListById'](t.listId)
+							if (list !== null) {
+								t.title = `${t.title} (${list.title})`
+							}
+
 							return t
 						})
 						this.$set(this, 'foundTasks', r)
-- 
2.40.1