Skip to content

chore: refactor header shortcuts #2372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
43081j merged 6 commits into from
Apr 4, 2026
Merged

chore: refactor header shortcuts #2372

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9d52025
chore: refactor header shortcuts
43081j Apr 3, 2026
dc6195e
feat: try extract shortcuts
43081j Apr 3, 2026
3b214f8
[autofix.ci] apply automated fixes
autofix-ci[bot] Apr 3, 2026
b7250d1
chore: add missing import
43081j Apr 4, 2026
5c21dc8
Merge branch 'main' into jg/keyboard-longcuts
ghostdevv Apr 4, 2026
b369d3c
chore: remove unused `false` type
43081j Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 20 additions & 52 deletions app/components/Package/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ function hasProvenance(version: PackumentVersion | null): boolean {
return !!(version.dist as { attestations?: unknown }).attestations
}

const router = useRouter()
// Docs URL: use our generated API docs
const docsLink = computed(() => {
if (!props.resolvedVersion) return null
Expand Down Expand Up @@ -122,57 +121,26 @@ const diffLink = computed((): RouteLocationRaw | null => {

const keyboardShortcuts = useKeyboardShortcuts()

onKeyStroke(
e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
e => {
if (codeLink.value === null) return
e.preventDefault()

navigateTo(codeLink.value)
},
{ dedupe: true },
)

onKeyStroke(
e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'm') && !isEditableElement(e.target),
e => {
if (mainLink.value === null) return
e.preventDefault()

navigateTo(mainLink.value)
},
{ dedupe: true },
)

onKeyStroke(
e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'd') && !isEditableElement(e.target),
e => {
if (!docsLink.value) return
e.preventDefault()
navigateTo(docsLink.value)
},
{ dedupe: true },
)

onKeyStroke(
e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'c') && !isEditableElement(e.target),
e => {
if (!props.pkg) return
e.preventDefault()
router.push({ name: 'compare', query: { packages: props.pkg.name } })
},
{ dedupe: true },
)

onKeyStroke(
e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'f') && !isEditableElement(e.target),
e => {
if (diffLink.value === null) return
e.preventDefault()
navigateTo(diffLink.value)
},
{ dedupe: true },
)
const shortcuts: [string, () => RouteLocationRaw | null | false | undefined][] = [
['.', () => codeLink.value],
['m', () => mainLink.value],
['d', () => docsLink.value],
['c', () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } }],
['f', () => diffLink.value],
]

for (const [key, getTarget] of shortcuts) {
onKeyStroke(
e => keyboardShortcuts.value && isKeyWithoutModifiers(e, key) && !isEditableElement(e.target),
e => {
const target = getTarget()
if (!target) return
e.preventDefault()
navigateTo(target)
},
{ dedupe: true },
)
}

const fundingUrl = computed(() => {
let funding = props.displayVersion?.funding
Expand Down
Loading