Merge branch 'feat/action-bar' of https://github.com/MatteoGabriele/npmx.dev into feat/action-bar

Author: MatteoGabriele

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<HTMLInputElement>(
@@ -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
   },

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/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?.()
 </script>
 
 <template>
@@ -81,7 +82,7 @@ const showModal = () => modalRef.value?.showModal?.()
             <p class="mb-2 font-mono text-fg-subtle">
               {{ $t('shortcuts.section.package') }}
             </p>
-            <ul class="mb-6 flex flex-col gap-2">
+            <ul class="mb-8 flex flex-col gap-2">
               <li class="flex gap-2 items-center">
                 <kbd class="kbd">.</kbd>
                 <span>{{ $t('shortcuts.open_code_view') }}</span>
@@ -95,6 +96,19 @@ const showModal = () => modalRef.value?.showModal?.()
                 <span>{{ $t('shortcuts.compare_from_package') }}</span>
               </li>
             </ul>
+            <p class="text-fg-muted leading-relaxed">
+              <i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
+                <template #settings>
+                  <NuxtLink
+                    :to="{ name: 'settings' }"
+                    class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
+                    @click="closeModal"
+                  >
+                    {{ $t('settings.title') }}
+                  </NuxtLink>
+                </template>
+              </i18n-t>
+            </p>
           </Modal>
           <LinkBase :to="NPMX_DOCS_SITE">
             {{ $t('footer.docs') }}

app/components/AppHeader.vue

@@ -4,6 +4,8 @@ import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
+const keyboardShortcuts = useKeyboardShortcuts()
+
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -175,7 +177,7 @@ function handleSearchFocus() {
 
 onKeyStroke(
   e => {
-    if (isEditableElement(e.target)) {
+    if (!keyboardShortcuts.value || isEditableElement(e.target)) {
       return
     }
 

app/components/Button/Base.vue

@@ -26,6 +26,8 @@ const props = withDefaults(
 
 const el = useTemplateRef('el')
 
+const keyboardShortcutsEnabled = useKeyboardShortcuts()
+
 defineExpose({
   focus: () => el.value?.focus(),
   getBoundingClientRect: () => el.value?.getBoundingClientRect(),
@@ -56,12 +58,13 @@ defineExpose({
        */
       disabled ? true : undefined
     "
-    :aria-keyshortcuts="ariaKeyshortcuts"
+    :aria-keyshortcuts="keyboardShortcutsEnabled ? ariaKeyshortcuts : undefined"
   >
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <kbd
-      v-if="ariaKeyshortcuts"
+      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
+      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/Compare/PackageSelector.vue

@@ -301,7 +301,7 @@ onClickOutside(containerRef, () => {
               v-if="result.description"
               class="text-xs text-fg-muted truncate mt-0.5 w-full block"
             >
-              {{ decodeHtmlEntities(result.description) }}
+              {{ stripHtmlTags(decodeHtmlEntities(result.description)) }}
             </span>
           </ButtonBase>
         </div>

app/components/Link/Base.vue

@@ -59,6 +59,7 @@ const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const keyboardShortcutsEnabled = useKeyboardShortcuts()
 </script>
 
 <template>
@@ -97,7 +98,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
         variant === 'button-primary',
     }"
     :to="to"
-    :aria-keyshortcuts="ariaKeyshortcuts"
+    :aria-keyshortcuts="keyboardShortcutsEnabled ? ariaKeyshortcuts : undefined"
     :target="isLinkExternal ? '_blank' : undefined"
   >
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
@@ -114,7 +115,8 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
       aria-hidden="true"
     />
     <kbd
-      v-if="ariaKeyshortcuts"
+      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
+      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/components/Package/TableRow.vue

@@ -73,7 +73,7 @@ const allMaintainersText = computed(() => {
       v-if="isColumnVisible('description')"
       class="py-2 px-3 text-sm text-fg-muted max-w-xs truncate"
     >
-      {{ decodeHtmlEntities(pkg.description || '-') }}
+      {{ stripHtmlTags(decodeHtmlEntities(pkg.description || '-')) }}
     </td>
 
     <!-- Downloads -->

app/components/Package/TrendsChart.vue

@@ -1729,10 +1729,10 @@ watch(selectedMetric, value => {
           v-if="showResetButton"
           type="button"
           aria-label="Reset date range"
-          class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+          class="self-end flex items-center justify-center px-2.5 py-2.25 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
           @click="resetDateRange"
         >
-          <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
+          <span class="block i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
         </button>
       </div>
 

app/components/Package/WeeklyDownloadStats.vue

@@ -296,7 +296,7 @@ const config = computed<VueUiSparklineConfig>(() => {
         <span v-else-if="isLoadingWeeklyDownloads" class="min-w-6 min-h-6 -m-1 p-1" />
       </template>
 
-      <div class="w-full overflow-hidden h-[110px] motion-safe:h-[140px]">
+      <div class="w-full overflow-hidden h-[76px] motion-safe:h-[calc(92px+0.75rem)]">
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
           <ClientOnly>
             <VueUiSparkline class="w-full max-w-xs" :dataset :config>