Merge branch 'main' of ssh://kolaente.dev:9022/vikunja/frontend into main

.drone.yml

@@ -95,7 +95,7 @@ steps:
       CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
       YARN_CACHE_FOLDER: .cache/yarn/
       CYPRESS_CACHE_FOLDER: .cache/cypress/
-      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 10000
+      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 20000
     commands:
       - sed -i 's/localhost/api/g' public/index.html
       - yarn serve & npx wait-on http://localhost:8080

cypress.json

@@ -4,5 +4,8 @@
     "API_URL": "http://localhost:3456/api/v1",
     "TEST_SECRET": "testingS3cr3et"
   },
-  "video": false
+  "video": false,
+  "retries": {
+    "runMode": 2
+  }
 }

cypress/integration/list/list.spec.js

@@ -10,10 +10,12 @@ import {BucketFactory} from '../../factories/bucket'
 import '../../support/authenticateUser'
 
 describe('Lists', () => {
+	let lists
+
 	beforeEach(() => {
 		UserFactory.create(1)
 		NamespaceFactory.create(1)
-		const lists = ListFactory.create(1, {
+		lists = ListFactory.create(1, {
 			title: 'First List'
 		})
 		TaskFactory.truncate()
@@ -54,6 +56,64 @@ describe('Lists', () => {
 			.should('contain', '/lists/1/kanban')
 	})
 
+	it('Should rename the list in all places', () => {
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+		})
+		const newListName = 'New list name'
+
+		cy.visit('/lists/1')
+		cy.get('.list-title h1')
+			.should('contain', 'First List')
+
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
+			.click()
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
+			.contains('Edit')
+			.click()
+		cy.get('#listtext')
+			.type(`{selectall}${newListName}`)
+		cy.get('footer.modal-card-foot .button')
+			.contains('Save')
+			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.list-title h1')
+			.should('contain', newListName)
+			.should('not.contain', lists[0].title)
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child')
+			.should('contain', newListName)
+			.should('not.contain', lists[0].title)
+		cy.visit('/')
+		cy.get('.card-content .tasks')
+			.should('contain', newListName)
+			.should('not.contain', lists[0].title)
+	})
+
+	it('Should remove a list', () => {
+		cy.visit(`/lists/${lists[0].id}`)
+
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
+			.click()
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
+			.contains('Delete')
+			.click()
+		cy.url()
+			.should('contain', '/settings/delete')
+		cy.get('.modal-mask .modal-container .modal-content .actions a.button')
+			.contains('Do it')
+			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
+			.should('not.contain', lists[0].title)
+		cy.location('pathname')
+			.should('equal', '/')
+	})
+
 	describe('List View', () => {
 		it('Should be an empty list', () => {
 			cy.visit('/lists/1')
@@ -202,11 +262,15 @@ describe('Lists', () => {
 
 		it('Shows tasks from the current and next month', () => {
 			const now = new Date()
+			const nextMonth = now
+			nextMonth.setDate(1)
+			nextMonth.setMonth(now.getMonth() + 1)
+
 			cy.visit('/lists/1/gantt')
 
 			cy.get('.gantt-chart-container .gantt-chart .months')
 				.should('contain', format(now, 'MMMM'))
-				.should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM'))
+				.should('contain', format(nextMonth, 'MMMM'))
 		})
 
 		it('Shows tasks with dates', () => {
@@ -401,7 +465,7 @@ describe('Lists', () => {
 			})
 			cy.visit('/lists/1/kanban')
 
-			cy.getAttached('.kanban .bucket .tasks .task')
+			cy.getSettled('.kanban .bucket .tasks .task')
 				.contains(tasks[0].title)
 				.should('be.visible')
 				.click()
@@ -423,7 +487,7 @@ describe('Lists', () => {
 			const task = tasks[0]
 			cy.visit('/lists/1/kanban')
 
-			cy.getAttached('.kanban .bucket .tasks .task')
+			cy.getSettled('.kanban .bucket .tasks .task')
 				.contains(task.title)
 				.should('be.visible')
 				.click()

cypress/integration/list/namespaces.spec.js

@@ -3,6 +3,7 @@ import {UserFactory} from '../../factories/user'
 import '../../support/authenticateUser'
 import {ListFactory} from '../../factories/list'
 import {NamespaceFactory} from '../../factories/namespace'
+import {TaskFactory} from '../../factories/task'
 
 describe('Namepaces', () => {
 	let namespaces
@@ -20,20 +21,82 @@ describe('Namepaces', () => {
 	})
 
 	it('Should create a new Namespace', () => {
+		const newNamespaceTitle = 'New Namespace'
+
 		cy.visit('/namespaces')
 		cy.get('a.button')
 			.contains('Create namespace')
 			.click()
+
 		cy.url()
 			.should('contain', '/namespaces/new')
 		cy.get('.card-header-title')
 			.should('contain', 'Create a new namespace')
 		cy.get('input.input')
-			.type('New Namespace')
+			.type(newNamespaceTitle)
 		cy.get('.button')
 			.contains('Create')
 			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.namespace-container')
+			.should('contain', newNamespaceTitle)
 		cy.url()
 			.should('contain', '/namespaces')
 	})
+
+	it('Should rename the namespace all places', () => {
+		const newNamespaces = NamespaceFactory.create(5)
+		const newNamespaceName = 'New namespace name'
+
+		cy.visit('/namespaces')
+
+		cy.get(`.namespace-container .menu.namespaces-lists .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
+			.click()
+		cy.get('.namespace-container .menu.namespaces-lists .namespace-title .dropdown .dropdown-content')
+			.contains('Edit')
+			.click()
+		cy.url()
+			.should('contain', '/settings/edit')
+		cy.get('#namespacetext')
+			.invoke('val')
+			.should('equal', newNamespaces[0].title) // wait until the namespace data is loaded
+		cy.get('#namespacetext')
+			.type(`{selectall}${newNamespaceName}`)
+		cy.get('footer.modal-card-foot .button')
+			.contains('Save')
+			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.namespace-container .menu.namespaces-lists')
+			.should('contain', newNamespaceName)
+			.should('not.contain', newNamespaces[0].title)
+		cy.get('.content.namespaces-list')
+			.should('contain', newNamespaceName)
+			.should('not.contain', newNamespaces[0].title)
+	})
+
+	it('Should remove a namespace when deleting it', () => {
+		const newNamespaces = NamespaceFactory.create(5)
+
+		cy.visit('/')
+
+		cy.get(`.namespace-container .menu.namespaces-lists .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
+			.click()
+		cy.get('.namespace-container .menu.namespaces-lists .namespace-title .dropdown .dropdown-content')
+			.contains('Delete')
+			.click()
+		cy.url()
+			.should('contain', '/settings/delete')
+		cy.get('.modal-mask .modal-container .modal-content .actions a.button')
+			.contains('Do it')
+			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.namespace-container .menu.namespaces-lists')
+			.should('not.contain', newNamespaces[0].title)
+	})
 })

cypress/integration/task/task.spec.js

@@ -11,6 +11,7 @@ import '../../support/authenticateUser'
 import {TaskAssigneeFactory} from '../../factories/task_assignee'
 import {LabelFactory} from '../../factories/labels'
 import {LabelTaskFactory} from '../../factories/label_task'
+import {BucketFactory} from '../../factories/bucket'
 
 describe('Task', () => {
 	let namespaces
@@ -112,9 +113,10 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .heading .is-done')
-				.should('exist')
+				.should('be.visible')
 				.should('contain', 'Done')
 			cy.get('.task-view .action-buttons p.created')
+				.should('be.visible')
 				.should('contain', 'Done')
 		})
 
@@ -182,9 +184,11 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .comments .media.comment .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
+				.should('be.visible')
 				.type('{selectall}New Comment')
 			cy.get('.task-view .comments .media.comment .button:not([disabled])')
 				.contains('Comment')
+				.should('be.visible')
 				.click()
 
 			cy.get('.task-view .comments .media.comment .editor')
@@ -195,6 +199,9 @@ describe('Task', () => {
 
 		it('Can move a task to another list', () => {
 			const lists = ListFactory.create(2)
+			BucketFactory.create(2, {
+				list_id: '{increment}'
+			})
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 				list_id: lists[0].id,
@@ -228,6 +235,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .action-buttons .button')
+				.should('be.visible')
 				.contains('Delete task')
 				.click()
 			cy.get('.modal-mask .modal-container .modal-content .header')
@@ -310,6 +318,7 @@ describe('Task', () => {
 
 			cy.get('.task-view .action-buttons .button')
 				.contains('Add labels')
+				.should('be.visible')
 				.click()
 			cy.get('.task-view .details.labels-list .multiselect input')
 				.type(newLabelText)
@@ -365,6 +374,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
+				.should('be.visible')
 				.should('contain', labels[0].title)
 			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
 				.children()

cypress/support/commands.js

@@ -1,17 +1,33 @@
 /**
- * getAttached(selector)
- * getAttached(selectorFn)
+ * Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
  *
- * Waits until the selector finds an attached element, then yields it (wrapped).
- * selectorFn, if provided, is passed $(document). Don't use cy methods inside selectorFn.
- *
- * Source: https://github.com/cypress-io/cypress/issues/5743#issuecomment-650421731
+ * Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
  */
-Cypress.Commands.add('getAttached', selector => {
-	const getElement = typeof selector === 'function' ? selector : $d => $d.find(selector);
-	let $el = null;
-	return cy.document().should($d => {
-		$el = getElement(Cypress.$($d));
-		expect(Cypress.dom.isDetached($el)).to.be.false;
-	}).then(() => cy.wrap($el));
-});
+Cypress.Commands.add('getSettled', (selector, opts = {}) => {
+	const retries = opts.retries || 3
+	const delay = opts.delay || 100
+
+	const isAttached = (resolve, count = 0) => {
+		const el = Cypress.$(selector)
+
+		// is element attached to the DOM?
+		count = Cypress.dom.isAttached(el) ? count + 1 : 0
+
+		// hit our base case, return the element
+		if (count >= retries) {
+			return resolve(el)
+		}
+
+		// retry after a bit of a delay
+		setTimeout(() => isAttached(resolve, count), delay)
+	}
+
+	// wrap, so we can chain cypress commands off the result
+	return cy.wrap(null).then(() => {
+		return new Cypress.Promise((resolve) => {
+			return isAttached(resolve, 0)
+		}).then((el) => {
+			return cy.wrap(el)
+		})
+	})
+})

package.json

@@ -17,16 +17,16 @@
     "bulma": "0.9.2",
     "camel-case": "4.1.2",
     "copy-to-clipboard": "3.3.1",
-    "date-fns": "2.21.3",
-    "dompurify": "2.2.8",
-    "highlight.js": "10.7.2",
+    "date-fns": "2.22.1",
+    "dompurify": "2.2.9",
+    "highlight.js": "11.0.0",
     "lodash": "4.17.21",
-    "marked": "2.0.5",
+    "marked": "2.0.7",
     "register-service-worker": "1.7.2",
     "sass": "1.34.0",
     "snake-case": "3.0.4",
     "verte": "0.0.12",
-    "vue": "2.6.12",
+    "vue": "2.6.13",
     "vue-advanced-cropper": "1.6.0",
     "vue-drag-resize": "1.5.4",
     "vue-easymde": "1.4.0",
@@ -49,14 +49,14 @@
     "cypress": "7.4.0",
     "cypress-file-upload": "5.0.7",
     "eslint": "7.27.0",
-    "eslint-plugin-vue": "7.9.0",
+    "eslint-plugin-vue": "7.10.0",
     "faker": "5.5.3",
-    "jest": "27.0.1",
+    "jest": "27.0.3",
     "sass-loader": "10.2.0",
     "vue-flatpickr-component": "8.1.6",
     "vue-notification": "1.3.20",
     "vue-router": "3.5.1",
-    "vue-template-compiler": "2.6.12",
+    "vue-template-compiler": "2.6.13",
     "wait-on": "5.3.0"
   },
   "eslintConfig": {

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',
 	},
@@ -83,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() {

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>

src/components/input/editor.vue

@@ -369,7 +369,7 @@ export default {
 				highlight: function (code, language) {
 					const hljs = require('highlight.js')
 					const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
-					return hljs.highlight(validLanguage, code).value
+					return hljs.highlight(code, {language: validLanguage}).value
 				},
 			})
 
@@ -448,7 +448,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../node_modules/highlight.js/scss/atelier-heath-light';
+@import '../../../node_modules/highlight.js/scss/base16/equilibrium-gray-light';
 @import '../../../node_modules/easymde/dist/easymde.min.css';
 @import '../../styles/theme/variables/all';
 

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)

src/components/misc/keyboard-shortcuts.vue

@@ -3,14 +3,23 @@
 		<div @click.self="close()" class="modal-container">
 			<div class="modal-content">
 				<card class="has-background-white has-no-shadow" title="Available Keyboard Shortcuts">
+					<div class="message is-primary">
+						<div class="message-body">
+							These shortcuts work on all pages.
+						</div>
+					</div>
 					<p>
 						<strong>Toggle The Menu</strong>
 						<shortcut :keys="['ctrl', 'e']"/>
 					</p>
+					<p>
+						<strong>Open the search/quick action bar</strong>
+						<shortcut :keys="['ctrl', 'k']"/>
+					</p>
 					<h3>Kanban</h3>
 					<div class="message is-primary" v-if="$route.name === 'list.kanban'">
 						<div class="message-body">
-							These shortcuts work on the current page.
+							These shortcuts work only on the current page.
 						</div>
 					</div>
 					<p>
@@ -22,7 +31,7 @@
 						class="message is-primary"
 						v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
 						<div class="message-body">
-							These shortcuts work on the current page.
+							These shortcuts work only on the current page.
 						</div>
 					</div>
 					<p>

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>

src/components/quick-actions/quick-actions.vue

@@ -0,0 +1,388 @@
+<template>
+	<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">
+					{{ selectedCmd.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="unselectCmd"
+					@keyup.prevent.enter="doCmd"
+					@keyup.prevent.esc="closeQuickActions"
+				/>
+			</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">
+						{{ 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)"
+							@keyup.prevent.esc="() => $refs.searchInput.focus()"
+						>
+							{{ i.title }}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</modal>
+</template>
+
+<script>
+import TaskService from '@/services/task'
+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, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
+import ListModel from '@/models/list'
+
+const TYPE_LIST = 'list'
+const TYPE_TASK = 'task'
+const TYPE_CMD = 'cmd'
+const TYPE_TEAM = 'team'
+
+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: '',
+			selectedCmd: null,
+
+			foundTasks: [],
+			taskSearchTimeout: null,
+			taskService: null,
+
+			foundTeams: [],
+			teamService: null,
+
+			namespaceService: null,
+			listService: null,
+		}
+	},
+	computed: {
+		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())
+			}) ?? [])
+
+			const cmds = this.availableCmds
+				.filter(a => a.title.toLowerCase().includes(this.query.toLowerCase()))
+
+			return [
+				{
+					type: TYPE_CMD,
+					title: 'Commands',
+					items: cmds,
+				},
+				{
+					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 ||
+				this.listService.loading ||
+				this.namespaceService.loading ||
+				this.teamService.loading
+		},
+		placeholder() {
+			if (this.selectedCmd !== null) {
+				switch (this.selectedCmd.action) {
+					case CMD_NEW_TASK:
+						return 'Enter the title of the new task...'
+					case CMD_NEW_LIST:
+						return 'Enter the title of the new list...'
+					case CMD_NEW_NAMESPACE:
+						return 'Enter the title of the new namespace...'
+					case CMD_NEW_TEAM:
+						return 'Enter the name of the new team...'
+				}
+			}
+
+			return 'Type a command or search...'
+		},
+		hintText() {
+			let namespace
+
+			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})`
+					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]
+		},
+		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()
+		this.listService = new ListService()
+		this.namespaceService = new NamespaceService()
+		this.teamService = new TeamService()
+	},
+	methods: {
+		search() {
+			this.searchTasks()
+		},
+		searchTasks() {
+			if (this.query === '' || this.selectedCmd !== null) {
+				return
+			}
+
+			if (this.taskSearchTimeout !== null) {
+				clearTimeout(this.taskSearchTimeout)
+				this.taskSearchTimeout = null
+			}
+
+			this.taskSearchTimeout = setTimeout(() => {
+				this.taskService.getAll({}, {s: this.query})
+					.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)
+					})
+			}, 150)
+		},
+		closeQuickActions() {
+			this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
+		},
+		doAction(type, item) {
+			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 = ''
+					this.selectedCmd = item
+					this.$refs.searchInput.focus()
+					break
+			}
+		},
+		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() {
+			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}})
+					this.closeQuickActions()
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
+		},
+		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}})
+					this.closeQuickActions()
+				})
+				.catch((e) => {
+					this.error(e, this)
+				})
+		},
+		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()
+					this.closeQuickActions()
+				})
+				.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)
+					this.closeQuickActions()
+				})
+				.catch((e) => {
+					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()
+		},
+		unselectCmd() {
+			if (this.query !== '') {
+				return
+			}
+
+			this.selectedCmd = null
+		},
+		reset() {
+			this.query = ''
+			this.selectedCmd = null
+		}
+	},
+}
+</script>

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) {
@@ -60,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
@@ -127,5 +134,8 @@ export const store = new Vuex.Store({
 		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
 			state.keyboardShortcutsActive = active
 		},
+		[QUICK_ACTIONS_ACTIVE](state, active) {
+			state.quickActionsActive = active
+		},
 	},
 })

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'

src/styles/components/_all.scss

@@ -23,3 +23,4 @@
 @import 'api-config';
 @import 'datepicker';
 @import 'notifications';
+@import 'quick-actions';

src/styles/components/base/multiselect.scss

@@ -72,6 +72,10 @@
 		max-width: 100%;
 		min-width: 100%;
 
+		&-inline {
+			position: static;
+		}
+
 		button {
 			background: transparent;
 			display: block;

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 {

src/styles/components/quick-actions.scss

@@ -0,0 +1,67 @@
+.quick-actions {
+
+	.modal-content {
+		top: 6rem !important;
+		transform: translate(-50%, -3rem) !important;
+	}
+
+	.action-input {
+		display: flex;
+		align-items: center;
+
+		.input {
+			border: 0;
+			font-size: 1.5rem;
+		}
+
+		&.has-active-cmd .input {
+			padding-left: .5rem;
+		}
+
+		.active-cmd {
+			font-size: 1.25rem;
+			margin-left: .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;
+					}
+				}
+			}
+		}
+	}
+}

src/styles/theme/navigation.scss

@@ -318,39 +318,50 @@
           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;
-  }
-
-  .logout-icon {
-    color: $grey-900;
-
-    .icon {
-      vertical-align: middle;
+  .user {
+    span {
+      font-family: $vikunja-font;
     }
-  }
 
-  .dropdown-trigger .button {
-    background: none;
+    .avatar {
+      -webkit-border-radius: 100%;
+      -moz-border-radius: 100%;
+      border-radius: 100%;
+      vertical-align: middle;
+      height: 40px;
+    }
 
-    &:focus:not(:active), &:active {
-      outline: none !important;
-      -webkit-box-shadow: none !important;
-      -moz-box-shadow: none !important;
-      box-shadow: none !important;
+    .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;
+      }
     }
   }
 }

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.list)
+			return list
 		},
 		canWrite() {
 			return this.task && this.task.maxRight && this.task.maxRight > rights.READ