Add `UDashboardShortcuts` component

[onmax]

Package

v3.x

Description

I would like to see a component that automatically displays all the defined shortcuts out of the box.

the trigger can be shift ? and displays all the defined shortcuts.

Obviously we can add props and slots accordingly.

I would love to work on this component if you find it interesting :)

Additional context

GitHubs shortcut menu

[benjamincanac]

Did you check https://ui.nuxt.com/docs/components/kbd? 😊

[onmax]

It is not the same?

I am talking about something like this

PS: if it is auto-generated ai response (since the answer was immediately), it could be beneficial to add in the message, something like generated by ai at the end. Now i am confused haha

[benjamincanac]

It was not an auto-generated answer, what do you mean? 🤔 I misunderstood your issue at first since the title was different but I'm not sure this component is relevant as there are many ways to display shortcuts, it can be in a Slideover or a Modal. And for the automatic part, shortcuts defined with defineShortcuts can be done in multiple components / pages, not sure how we could get that data automatically displayed with unknown labels, icons and categories 😅

However, this design you made can be achieved easily using the NavigationMenu and Kbd components:

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const items: NavigationMenuItem[] = [{
  type: 'label',
  label: 'Navigation'
}, {
  icon: 'i-lucide-folder',
  label: 'Go to file manager',
  kbds: ['g', 'h']
}, {
  icon: 'i-lucide-user',
  label: 'Go to user settings',
  kbds: ['u', 'j']
}]
</script>

<template>
  <UNavigationMenu orientation="vertical" :items="items" class="w-64">
    <template #item-trailing="{ item }">
      <UKbd v-for="kbd in item.kbds" :key="kbd" :value="kbd" />
    </template>
  </UNavigationMenu>
</template>

[onmax]

Since you commented immediately after I created the issue and the response was not related to the issue, I thought it was AI. My bad 🙏

But we can close the issue if you think is not worth it. All good 👌