fix(quick actions): always open quick actions with hotkey, even if other inputs are focused

Resolves vikunja/frontend#3743

src/components/home/TheNavigation.vue

@@ -27,10 +27,7 @@
 		</div>
 
 		<div class="navbar-end">
-			<BaseButton @click="openQuickActions" class="trigger-button" v-shortcut="'Control+k'"
-				:title="$t('keyboardShortcuts.quickSearch')">
-				<icon icon="search" />
-			</BaseButton>
+			<OpenQuickActions/>
 			<Notifications />
 			<dropdown>
 				<template #trigger="{ toggleOpen, open }">
@@ -80,6 +77,7 @@ import Notifications from '@/components/notifications/notifications.vue'
 import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
+import OpenQuickActions from '@/components/misc/OpenQuickActions.vue'
 
 import { getProjectTitle } from '@/helpers/getProjectTitle'
 
@@ -98,10 +96,6 @@ const authStore = useAuthStore()
 const configStore = useConfigStore()
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
 const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
-
-function openQuickActions() {
-	baseStore.setQuickActionsActive(true)
-}
 </script>
 
 <style lang="scss" scoped>

src/components/misc/OpenQuickActions.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import BaseButton from '@/components/base/BaseButton.vue'
+import {useBaseStore} from '@/stores/base'
+import {onBeforeUnmount, onMounted} from 'vue'
+import {eventToHotkeyString} from '@github/hotkey'
+
+const baseStore = useBaseStore()
+const GLOBAL_HOTKEY = 'Control+k'
+
+// See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
+function openQuickActionsViaHotkey(event) {
+	const hotkeyString = eventToHotkeyString(event)
+	if (!hotkeyString) return
+	if (hotkeyString !== GLOBAL_HOTKEY) return
+	event.preventDefault()
+
+	openQuickActions()
+}
+
+onMounted(() => {
+	document.addEventListener('keydown', openQuickActionsViaHotkey)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', openQuickActionsViaHotkey)
+})
+
+function openQuickActions() {
+	baseStore.setQuickActionsActive(true)
+}
+</script>
+
+<template>
+	<BaseButton
+		@click="openQuickActions"
+		class="trigger-button"
+		:title="$t('keyboardShortcuts.quickSearch')"
+	>
+		<icon icon="search"/>
+	</BaseButton>
+</template>