feat: adds keyboard shortcuts visually (#2344)

* feat: adds keyboard shortcuts visually

* Adds missing file

* uses tags instead

* removes @vueuse/math

* fixes background

assets/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     BarChart: typeof import('./components/BarChart.vue')['default']
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
+    'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
     'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
     'Cil:circle': typeof import('~icons/cil/circle')['default']
     'Cil:columns': typeof import('~icons/cil/columns')['default']
@@ -28,6 +29,7 @@ declare module 'vue' {
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
     InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
+    KeyShortcut: typeof import('./components/KeyShortcut.vue')['default']
     LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
     LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
@@ -48,6 +50,8 @@ declare module 'vue' {
     'Octicon:container24': typeof import('~icons/octicon/container24')['default']
     'Octicon:download24': typeof import('~icons/octicon/download24')['default']
     'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
+    'Ph:command': typeof import('~icons/ph/command')['default']
+    'Ph:controlBold': typeof import('~icons/ph/control-bold')['default']
     Popup: typeof import('./components/Popup.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

assets/components/KeyShortcut.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="tag">
+    <span v-if="modifiers.includes('shift')"><carbon:mac-shift /></span>
+    <span v-if="modifiers.includes('meta')">
+      <ph:command v-if="isMac" />
+      <ph:control-bold v-else />
+    </span>
+    <kbd class="is-uppercase is-family-sans-serif">{{ char }}</kbd>
+  </div>
+</template>
+
+<script lang="ts">
+const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+</script>
+<script lang="ts" setup>
+const { modifiers = ["meta"], char } = defineProps<{ char: string; modifiers?: ("^" | "meta" | "shift")[] }>();
+</script>
+
+<style scoped lang="scss">
+div.tag {
+  gap: 0.1em;
+  line-height: 0.5;
+  background-color: var(--scheme-main-ter);
+}
+</style>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -15,8 +15,9 @@
             <octicon:trash-24 />
           </div>
         </div>
-        <div class="level-right">
+        <div class="level-right is-justify-content-space-between is-flex-grow-1">
           <div class="level-item">{{ $t("toolbar.clear") }}</div>
+          <div class="level-item"><key-shortcut char="k" :modifiers="['shift', 'meta']"></key-shortcut></div>
         </div>
       </div>
     </a>
@@ -40,8 +41,9 @@
             <mdi:light-magnify />
           </div>
         </div>
-        <div class="level-right">
+        <div class="level-right is-justify-content-space-between is-flex-grow-1">
           <div class="level-item">{{ $t("toolbar.search") }}</div>
+          <div class="level-item"><key-shortcut char="f"></key-shortcut></div>
         </div>
       </div>
     </a>
@@ -112,6 +114,7 @@
 <script lang="ts" setup>
 import { type ComputedRef } from "vue";
 import { Container } from "@/models/Container";
+import KeyShortcut from "../KeyShortcut.vue";
 
 const { showSearch } = useSearchFilter();
 const { base } = config;

assets/components/LogViewer/LogContainer.vue

@@ -53,6 +53,13 @@ const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
 function onClearClicked() {
   viewer.value?.clear();
 }
+
+onKeyStroke("k", (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+    onClearClicked();
+    e.preventDefault();
+  }
+});
 </script>
 <style lang="scss" scoped>
 button.delete {

assets/layouts/default.vue

@@ -58,7 +58,7 @@ watchEffect(() => {
 });
 
 onKeyStroke("k", (e) => {
-  if (e.ctrlKey || e.metaKey) {
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
     showFuzzySearch();
     e.preventDefault();
   }

assets/styles.scss

@@ -205,7 +205,7 @@ html.has-custom-scrollbars {
 .modal {
   z-index: 1000;
   .modal-background {
-    backdrop-filter: blur(4px);
+    backdrop-filter: blur(10px);
   }
 }
 

package.json

@@ -57,6 +57,7 @@
   "vue-router": "^4.2.4"
  },
  "devDependencies": {
+  "@iconify-json/ph": "^1.1.6",
   "@pinia/testing": "^0.1.3",
   "@playwright/test": "^1.36.2",
   "@types/d3-array": "^3.0.5",

pnpm-lock.yaml

@@ -91,6 +91,9 @@ dependencies:
     version: 4.2.4(vue@3.3.4)
 
 devDependencies:
+  '@iconify-json/ph':
+    specifier: ^1.1.6
+    version: 1.1.6
   '@pinia/testing':
     specifier: ^0.1.3
     version: 0.1.3(pinia@2.1.6)(vue@3.3.4)
@@ -721,6 +724,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: false
 
+  /@iconify-json/ph@1.1.6:
+    resolution: {integrity: sha512-dexzEndlXQX/sbQhnEpA94Pby6JCGV2tZToSGcPPQpbilDGyk5VMd0ymusYoocRAn6+qLpGRvMoz5XFKGqP+VA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}