feat: surface kb shortcuts

[whitep4nth3r]

I'm not sure how good this is.

Initially thought about using native HTML popover etc, but thought I would try and make it more Vue like.

Closes #1111

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 8, 2026 6:41pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 8, 2026 6:41pm
npmx-lunaria	Ignored		Feb 8, 2026 6:41pm

[github-actions]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
lunaria/files/en-GB.json	Localization changed, will be marked as complete. 🔄️
lunaria/files/en-US.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a keyboard shortcuts modal to AppFooter.vue. Introduces a modalRef via useTemplateRef('modalRef') and a showModal function; adds a keyboard_shortcuts button in the desktop footer that opens the modal. The Modal renders categorized shortcut sections (global, search, package) with key glyph visuals and translated labels; includes a scoped .kbd style. Localization files (en.json, en-GB.json, en-US.json) gain footer.keyboard_shortcuts and a top-level shortcuts object. No public API changes.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is related to the changeset, providing context about keyboard shortcuts implementation and including visual examples, though expressing author uncertainty.
Linked Issues check	✅ Passed	The pull request implements the core requirements from #1111: surfaces keyboard shortcuts in a modal, provides a trigger in the footer, and organises shortcuts into categories with discoverable UI.
Out of Scope Changes check	✅ Passed	All changes directly support keyboard shortcuts functionality: Vue component enhancements, translation additions for all shortcut labels and sections, and i18n configuration updates.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch surface-kb-shortcuts

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

app/components/AppFooter.vue (1)

116-119: Ensure .kbd is a flex container when using alignment utilities.
items-center / justify-center have no effect without flex or inline-flex.

♻️ Suggested tweak

 .kbd {
-  `@apply` items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2;
+  `@apply` inline-flex items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2;
 }

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

app/components/AppFooter.vue (2)

103-110: Add aria-modal for the dialog.

Helps assistive tech treat this as a true modal.

✅ Suggested tweak

-                    role="dialog"
+                    role="dialog"
+                    aria-modal="true"

---

115-121: Prefer colon-syntax for the icon class.

Use the preset-icons colon form to keep resolution consistent.

♻️ Suggested change

-                        <span aria-hidden="true" class="size-5 i-lucide-x" />
+                        <span aria-hidden="true" class="size-5 i-lucide:x" />

Based on learnings, “prefer colon-syntax for icons (e.g., i-carbon:checkmark) over the dash-separated form … apply this pattern to all Vue components.”

[whitep4nth3r]

@danielroe I have no idea what I am doing but take a look now.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/AppFooter.vue (1)

95-148: Consider extracting repeated kbd styling into a utility class.

The same kbd styling (items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2) is repeated nine times. Extracting this to a utility class or UnoCSS shortcut would reduce duplication and ease future style changes.

♻️ Example approach

In your UnoCSS config, define a shortcut:

shortcuts: {
  'kbd-key': 'items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2',
}

Then simplify each <kbd>:

-                <kbd
-                  class="items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2"
-                  >,</kbd>
+                <kbd class="kbd-key">,</kbd>

[whitep4nth3r]

@ghostdevv I did think about this but

1. Didn't know the best option and
2. Thought that given this is something people won't reference too often, I wanted to free up a shortcut for other things in the future and
3. How to surface this shortcut without putting a long shortcut inline with the link to the modal 😅

[danielroe]

we already have ? which highlights shortcuts in the UI, fwiw.

[whitep4nth3r]

Thank you for cleaning up my nonsense @danielroe

[whitep4nth3r]

we already have ? which highlights shortcuts in the UI, fwiw.

I guess I should put this in the shortcut modal?

[danielroe]

not nonsense at all! and still wondering whether I should not have removed aria-expanded (but it didn't seem semantic for a modal.... 🤔)

[danielroe]

I'm updating the content atm - will push and you can edit/remove

[whitep4nth3r]

@danielroe I approve your addition

[danielroe]

🤝

[whitep4nth3r]

@ghostdevv are you happy to proceed without a shortcut for the shortcuts for now?

[whitep4nth3r]

@ghostdevv I'm gonna merge this and we can add something else later if desired.

We can add another kb shortcut later on if desired.

[ghostdevv]

we already have ? which highlights shortcuts in the UI, fwiw.

ah nice! It looks like github uses that to show the modal, so I wonder if we should too - Discord uses ctrl + ? but they're a chat app - ? would work everywhere but the search box. IMO a modal is better, even though the currently behavior is very cool, because it more easily grabs your attention and alerts you to shortcuts that may not be on your page or viewport

[ghostdevv]

or the shortcuts for now?

ahhh sorry! only just seeing this - happy to createa a follow up pr if we reach a consensus