feat: add link icons + divider to package hover

[nitodeco]

Resolves #21.

Added a package and book icon to npmx links and a horizontal divider to differentiate npmx from VS Code's native npm integration:

Unfortunately centering the icons vertically is not possible due to vscodes markdown renderer lacking support for the custom html we'd need for this. See here for reference.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added a new exported constant SPACER = ' ' in src/constants.ts. Updated src/providers/hover/npmx.ts to import SPACER and use it to place a non-breaking space between icon tokens and labels: the provenance label now uses $(verified)${SPACER}Verified provenance, and packageLink / docsLink are constructed as individual markdown strings prefixed with their icon tokens and separated from labels by SPACER. The footer is now formed by concatenating packageLink + " | " + docsLink (the prior array-join and trailing newline were removed). No public interfaces or exported signatures were changed.

Possibly related PRs

• npmx-dev/vscode-npmx PR 18 — modifies src/providers/hover/npmx.ts, including link/provenance construction and related hover markdown rendering.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description relates to the changeset by explaining the addition of package and book icons to npmx links, which aligns with the code changes adding the SPACER constant and updating the npmx.ts file.
Linked Issues check	✅ Passed	The changes successfully address issue #21 by keeping npmx links at the bottom of the hover card with consistent positioning, preventing layout shift and accidental misclicks when navigating to npmx.
Out of Scope Changes check	✅ Passed	All code changes are scoped to resolving issue #21: the SPACER constant addition and npmx link icon updates directly support the objective of differentiating npmx links and maintaining their position.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

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

[9romise]

May I ask which system you're using? For better comparison, on my macOS, VS Code appears to have a built‑in horizontal divider and the icon is vertically aligned.
Before the PR:

After:

[nitodeco]

@9romise I'm on macOS 26.2, although using Cursor.

Heres the full version info:

Version: 2.4.28
VSCode Version: 1.105.1
Commit: f3f5cec40024283013878b50c4f9be4002e0b580
Date: 2026-02-03T00:56:18.293Z
Build Type: Stable
Release Track: Early Access
Electron: 39.2.7
Chromium: 142.0.7444.235
Node.js: 22.21.1
V8: 14.2.231.21-electron.0
OS: Darwin arm64 25.2.0

In base VS Code I do indeed have the divider, looks like its a Cursor-specific quirk that its missing:

It looks like the icons are also centered when using regular VS Code:

I'm gonna remove the divider considering its a Cursor-specific issue that its missing and not related to VS Code directly.

[9romise]

Thank you! ❤️