diff --git a/app/app.vue b/app/app.vue index 1ea249300..af500571e 100644 --- a/app/app.vue +++ b/app/app.vue @@ -47,10 +47,12 @@ if (import.meta.server) { setJsonLd(createWebSiteSchema()) } +const keyboardShortcuts = useKeyboardShortcuts() + onKeyDown( '/', e => { - if (isEditableElement(e.target)) return + if (!keyboardShortcuts.value || isEditableElement(e.target)) return e.preventDefault() const searchInput = document.querySelector( @@ -70,7 +72,7 @@ onKeyDown( onKeyDown( '?', e => { - if (isEditableElement(e.target)) return + if (!keyboardShortcuts.value || isEditableElement(e.target)) return e.preventDefault() showKbdHints.value = true }, @@ -80,7 +82,7 @@ onKeyDown( onKeyUp( '?', e => { - if (isEditableElement(e.target)) return + if (!keyboardShortcuts.value || isEditableElement(e.target)) return e.preventDefault() showKbdHints.value = false }, diff --git a/app/assets/main.css b/app/assets/main.css index ef87c5050..0de1fb5fc 100644 --- a/app/assets/main.css +++ b/app/assets/main.css @@ -335,6 +335,11 @@ input[type='search']::-webkit-search-results-decoration { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } +/* Hide keyboard shortcut hints before hydration when user disabled them */ +:root[data-kbd-shortcuts='false'] [data-kbd-hint] { + display: none; +} + /* Locking the scroll whenever any of the modals are open */ html:has(dialog:modal) { overflow: hidden; diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue index ad0c82daf..43ead35e4 100644 --- a/app/components/AppFooter.vue +++ b/app/components/AppFooter.vue @@ -6,6 +6,7 @@ const isHome = computed(() => route.name === 'index') const modalRef = useTemplateRef('modalRef') const showModal = () => modalRef.value?.showModal?.() +const closeModal = () => modalRef.value?.close?.()