chore: rearrange footer items

[iiio2]

There is one thing I want to say. We've added keyboard shortcuts in footer recently. Now in footer some items are related to within our app like about, privacy policy. Some footer items are external links which open in a new tab like docs.npmx.dev, chat.npmx.dev etc. And external links have also icon in the footer so that we can understand it is external. I think keyboard shortcuts is not external things. So I think we can group it together with the internal footer items like about and privacy policy. But currently keyboard shortcuts is with external links. So I think maybe it looks better if we rearrange this.

Before:

After:

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 9, 2026 6:01am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 9, 2026 6:01am
npmx-lunaria	Ignored		Feb 9, 2026 6:01am

[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]

📝 Walkthrough

Walkthrough

The pull request relocates four external documentation links (docs, source, social, and chat) within the desktop footer component. These links are moved from their original position in the top-right inline footer navigation to a lower placement following the modal section. Additionally, a cursor-pointer class is added to the footer button styling to modify its cursor behaviour. The component maintains the same links and functionality whilst adjusting their visual positioning within the footer layout.

Possibly related PRs

• fix: visible focus rendering of footer's privacy policy link #1110: Modifies desktop footer link structure and classes within the same AppFooter.vue component, adjusting the relationship between links and their containers
• chore: remove duplicated footer content #986: Addresses footer content organisation by removing and relocating duplicated footer items across components to consolidate footer structure

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the rationale for reorganising footer items, grouping internal items (about, privacy policy, keyboard shortcuts) separately from external links, with before/after visual evidence.

_{✏️ 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

---

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

[coderabbitai]

Actionable comments posted: 1

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Remove inline focus-visible utilities from the button.

The class still includes focus-visible:(decoration-accent text-accent) on a <button>, which conflicts with the project rule to keep focus-visible styling for buttons/selects in global CSS. If you need accent styling on focus, extend the global rule instead.

Suggested change

-            class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) transition-colors duration-200"

Based on learnings, “focus-visible styling for button and select elements is implemented globally in app/assets/main.css… Do not apply per-element inline utility classes like focus-visible:outline-accent/70 on these elements.”

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<button
	type="button"
	class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
	class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
	@click.prevent="showModal"
	<button
	type="button"
	class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) transition-colors duration-200"
	`@click.prevent`="showModal"

[whitep4nth3r]

This is a good change. How does the mobile menu match this thinking now? Are there any changes needed?

[iiio2]

@whitep4nth3r , I think in mobile version, there is no keyboard shortcuts options anywhere currently. It is only for desktop.