feat: modify shortcut and add tooltips (#1598)

Author: konpeki622

packages/app-frontend/src/features/components/ComponentsInspector.vue

@@ -42,7 +42,7 @@ export default defineComponent({
     } = useComponentPick()
 
     onKeyDown(event => {
-      if (event.key === 'f' && event.ctrlKey) {
+      if (event.key === 'f' && event.altKey) {
         treeFilterInput.value.focus()
         return false
       }
@@ -90,6 +90,10 @@ export default defineComponent({
       <template #left>
         <div class="flex flex-col h-full">
           <VueInput
+            v-tooltip="{
+              content: $t('ComponentTree.filter.tooltip'),
+              html: true
+            }"
             ref="treeFilterInput"
             v-model="treeFilter"
             icon-left="search"

packages/app-frontend/src/features/components/SelectedComponentPane.vue

@@ -4,6 +4,7 @@ import EmptyPane from '@front/features/layout/EmptyPane.vue'
 import RenderCode from './RenderCode.vue'
 
 import { defineComponent, ref, watch, computed } from '@vue/composition-api'
+import { onKeyDown } from '@front/util/keyboard'
 import { useSelectedComponent } from './composable'
 
 // @ts-ignore
@@ -26,12 +27,22 @@ export default defineComponent({
       }
     })
 
+    const stateFilterInput = ref()
+  
+    onKeyDown(event => {
+      if (event.key === 'd' && event.altKey) {
+        stateFilterInput.value.focus()
+        return false
+      }
+    })
+
     const sameApp = computed(() => selectedComponent.data.value?.id.split(':')[0] === selectedComponentId.value?.split(':')[0])
 
     return {
       ...selectedComponent,
       showRenderCode,
       inspector,
+      stateFilterInput,
       sameApp,
     }
   },
@@ -53,6 +64,11 @@ export default defineComponent({
       </div>
 
       <VueInput
+        v-tooltip="{
+          content: $t('StateInspector.filter.tooltip'),
+          html: true
+        }"
+        ref="stateFilterInput"
         v-model="stateFilter"
         icon-left="search"
         placeholder="Filter state..."

packages/app-frontend/src/locales/en.js

@@ -26,6 +26,9 @@ export default {
     dataType: {
       tooltip: '[[{{keys.ctrl}}]] + <<mouse>>: Collapse All<br>[[{{keys.shift}}]] + <<mouse>>: Expand All',
     },
+    filter: {
+      tooltip: '[[{{keys.alt}}]] + [[D]] Filter state by name',
+    },
   },
   DataField: {
     edit: {
@@ -54,7 +57,7 @@ export default {
       tooltip: '[[S]] Select component in the page',
     },
     filter: {
-      tooltip: '[[{{keys.ctrl}}]] + [[F]] Filter components by name',
+      tooltip: '[[{{keys.alt}}]] + [[F]] Filter components by name',
     },
   },
   ComponentInstance: {