viewer: CTRL+K to focus in search field

github: closes #328

1 files changed, 14 insertions, 2 deletions

diff --git a/viewer/src/views/layout/left/LayoutTagInput.vue b/viewer/src/views/layout/left/LayoutTagInput.vue
index a37c546..9ee6f8a 100644
--- a/viewer/src/views/layout/left/LayoutTagInput.vue
+++ b/viewer/src/views/layout/left/LayoutTagInput.vue
@@ -23,7 +23,7 @@
     v-model="search"
     :placeholder="t('tagInput.placeholder')"
     :tabindex="50"
-    @focus="e => (e.target as HTMLInputElement).select()"
+    @focus="(e: FocusEvent) => (e.target as HTMLInputElement).select()"
     @keypress.enter="inputEnter"
     @keydown.backspace="inputBackspace"
   />
@@ -58,7 +58,8 @@ import LdDropdown from '@/components/LdDropdown.vue';
 import LdInput from '@/components/LdInput.vue';
 import { useIndexFactory } from '@/services/indexFactory';
 import { useGalleryStore } from '@/store/galleryStore';
-import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core';
+import { useUiStore } from '@/store/uiStore';
+import { computedEager, onKeyStroke, useElementBounding, useFocus, useKeyModifier, useVModel } from '@vueuse/core';
 import { computed, ref, StyleValue, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -69,6 +70,7 @@ const emit = defineEmits(['update:modelValue', 'search', 'opening', 'closing']);
 const model = useVModel(props, 'modelValue', emit);
 
 const { t } = useI18n();
+const uiStore = useUiStore();
 const galeryStore = useGalleryStore();
 const indexFactory = useIndexFactory();
 
@@ -88,6 +90,16 @@ const { focused } = useFocus(input);
 
 // ---
 
+const controlState = useKeyModifier('Control');
+onKeyStroke('k', e => {
+  if (!controlState.value || focused.value) return;
+  e.preventDefault();
+  uiStore.toggleFullWidth(false);
+  focused.value = true;
+});
+
+// ---
+
 const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false)
   .filter(filterAlreadyPresent)
   .sort((a, b) => b.items.length - a.items.length));