improved global search dialog

vue3/src/components/inputs/GlobalSearchDialog.vue

@@ -1,12 +1,17 @@
 <template>
     <slot name="activator">
-        <v-btn @click="dialog = true"><i class="fas fa-search mr-1"></i> Search</v-btn>
+        <v-btn @click="dialog = true" variant="plain" density="default">
+            <i class="fas fa-search mr-1"></i>
+            <span class="d-none d-sm-block">Search</span>
+            <v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>Ctrl+K</v-chip>
+        </v-btn>
     </slot>
 
     <v-dialog width="90%" max-width="800px" v-model="dialog" location="id_dialog_anchor"
               location-strategy="connected">
 
         <v-card>
+            <!-- search input -->
             <v-card-text class="pb-0">
                 <v-text-field
                     id="id_global_search_input"
@@ -18,17 +23,33 @@
                     variant="solo"
                 ></v-text-field>
             </v-card-text>
-            <v-divider></v-divider>
-            <v-card-text>
 
-                <v-card :variant="cardVariant(index)" v-for="(item, index) in search_results" hover class="mt-1" @click="selected_result = index">
+            <v-divider></v-divider>
+            <!-- search results -->
+            <v-card-text>
+                <v-card :variant="cardVariant(index)" v-for="(item, index) in search_results" hover class="mt-1" @click="selected_result = index" :key="index">
                     <v-card-title @click="goToSelectedRecipe()">
                         <v-avatar v-if="item.image" :image="item.image"></v-avatar>
+                        <v-avatar v-else-if="item.recipe_id !== undefined" color="tandoor">{{ item.name.charAt(0) }}</v-avatar>
                         <v-icon :icon="item.icon" v-if="item.icon"></v-icon>
                         {{ item.name }}
                     </v-card-title>
                 </v-card>
             </v-card-text>
+
+            <v-divider class="d-none d-sm-block"></v-divider>
+            <!-- keybind info shown on screens at least sm -->
+            <v-card-text class="d-none d-sm-block pt-2">
+                <v-chip size="x-small" class="mr-1" label><i class="fas fa-arrow-up"></i></v-chip>
+                <v-chip size="x-small" class="mr-1" label><i class="fas fa-arrow-down"></i></v-chip>
+                <small class="mr-2">to navigate</small>
+                <v-chip size="x-small" class="mr-1" label><i class="fas fa-level-down-alt fa-rotate-90"></i></v-chip>
+                <small class="mr-2">to select</small>
+                <v-chip size="x-small" class="mr-1" label> esc</v-chip>
+                <small>to close</small>
+
+
+            </v-card-text>
         </v-card>
 
 
@@ -49,6 +70,7 @@ export default defineComponent({
             /**
              * since dialog has no opened event watch the variable and focus input after delay (nextTick/directly does not work)
              */
+            this.search_query = ""
             setTimeout(() => {
                 if (newValue) {
                     let search = document.getElementById('id_global_search_input')
@@ -59,6 +81,9 @@ export default defineComponent({
             }, 20)
         },
         search_query: function (newValue) {
+            /**
+             * update selected result if search result length changes due to search_query changes
+             */
             if (this.selected_result >= this.search_results.length) {
                 this.selected_result = this.search_results.length - 1
             }
@@ -74,6 +99,10 @@ export default defineComponent({
         }
     },
     computed: {
+        /**
+         * build array of search results
+         * uses custom type to be able to incorporate recent items, plans, books, ... at a later stage
+         */
         search_results: function () {
             let search_results = [] as Array<SearchResult>
 
@@ -97,6 +126,7 @@ export default defineComponent({
         }
     },
     mounted() {
+        // add keyhandlers
         window.addEventListener('keydown', (e) => {
             if (e.key == 'ArrowUp') {
                 this.selected_result = Math.max(0, this.selected_result - 1)
@@ -107,6 +137,10 @@ export default defineComponent({
             if (e.key == 'Enter') {
                 this.goToSelectedRecipe()
             }
+            if (e.key == 'k' && e.ctrlKey) {
+                this.dialog = true
+                e.preventDefault()
+            }
         })
 
         const api = new ApiApi()
@@ -115,6 +149,10 @@ export default defineComponent({
         })
     },
     methods: {
+        /**
+         * determines the style for selected elements
+         * @param index index of card to determine style for
+         */
         cardVariant(index: number) {
             if (this.selected_result == index) {
                 return 'tonal'
@@ -122,6 +160,9 @@ export default defineComponent({
                 return 'elevated'
             }
         },
+        /**
+         * open selected recipe
+         */
         goToSelectedRecipe() {
             this.dialog = false
             let searchResult = this.search_results[this.selected_result]