fix(ui): use prehydrate to prevent kbd hint layout shift

Author: danielroe

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;

app/components/Button/Base.vue

@@ -27,6 +27,7 @@ const props = withDefaults(
 const el = useTemplateRef('el')
 
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
+const showKbdHint = computed(() => keyboardShortcutsEnabled.value && !!props.ariaKeyshortcuts)
 
 defineExpose({
   focus: () => el.value?.focus(),
@@ -63,7 +64,8 @@ defineExpose({
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <kbd
-      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
+      v-if="showKbdHint"
+      data-kbd-hint
       class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >

app/components/Link/Base.vue

@@ -60,6 +60,7 @@ const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
+const showKbdHint = computed(() => keyboardShortcutsEnabled.value && !!props.ariaKeyshortcuts)
 </script>
 
 <template>
@@ -115,7 +116,8 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
       aria-hidden="true"
     />
     <kbd
-      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
+      v-if="showKbdHint"
+      data-kbd-hint
       class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >

app/utils/prehydrate.ts

@@ -53,5 +53,10 @@ export function initPreferencesOnPrehydrate() {
     document.documentElement.dataset.pm = pm
 
     document.documentElement.dataset.collapsed = settings.sidebar?.collapsed?.join(' ') ?? ''
+
+    // Keyboard shortcuts (default: true)
+    if (settings.keyboardShortcuts === false) {
+      document.documentElement.dataset.kbdShortcuts = 'false'
+    }
   })
 }