Add basic quick actions component

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',
 	},

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>

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
+		},
 	},
 })

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'