fix(nav): render the wishlist count badge the UI has always tried to update

[MOHITKOURAV01]

What this fixes

Closes #1714

updateWishlistCount() in frontend/scripts/ui.js is wired into initializeUI() right beside the cart counter:

updateCartCount();
updateWishlistCount();

…and then returns early on every call, because the element it needs exists in no markup in the repository:

const badge = document.getElementById("wishlist-badge");
if (!badge) {
    return;                     // <-- taken every time
}

The styling was already shipping — ~30 lines in components.css and a dark-theme rule in base.css, on every page load, for an element that never rendered.

What changed

frontend/components/navbar.html

• Desktop: the badge, inside a .wishlist-icon-wrapper positioning context, mirroring the .cart-icon-wrapper structure of the cart link directly below it.
• Mobile: a #mobile-wishlist-badge on the drawer's Wishlist row, where the Cart row already had #mobile-cart-badge.

frontend/styles/components.css — #wishlist-badge inherited a bare 5-property rule that assumed normal flow. It now carries the same absolute positioning, offsets, sizing and pointer-events: none as #cart-badge, plus the wrapper rule it anchors to. Without the wrapper the absolutely positioned badge escapes to the nearest positioned ancestor and lands elsewhere in the nav.

frontend/styles/base.css — the dark-theme rule now covers both mobile badges too, which it never did.

frontend/scripts/ui.js — updates the mobile badge as well as the desktop one, matching how updateCartCount() handles its pair.

frontend/scripts/utils.js — a second, quieter half of the bug: updateWishlistCount() was only ever called from initializeUI(), so even with markup the count would go stale the moment an item was saved. saveWishlist() is the single choke point every wishlist mutation passes through, so the refresh hangs off it.

Deliberate choices

• Refresh from saveWishlist(), not from each call site. The cart badge takes the other approach — every mutation site remembers to call updateCartCount() — and that is exactly why the cart count can drift. One choke point cannot be forgotten.
• The refresh is feature-detected (typeof window !== "undefined" and typeof window.updateWishlistCount === "function"), so utils.js stays usable on pages that do not load ui.js, and in the Node-based tests that require it.
• Reused .mobile-badge for the drawer rather than adding a second style, so the two drawer rows stay visually identical.
• pointer-events: none on the badge, copied from the cart badge, so the counter cannot swallow a click meant for the wishlist link.

Tests

New backend/tests/wishlistBadge.test.js, 17 cases across markup placement (badge inside the wishlist link, not loose in the nav), the accessible label, the positioning contract (asserting the desktop badge's top/right match #cart-badge's values rather than hardcoding them), dark-mode coverage on both surfaces, and the refresh path including its feature-detection guard.

Verified the guard is meaningful: with the frontend changes reverted and only the test applied, 13 of the 17 fail. With the fix in place all 17 pass.

Tests:       17 passed, 17 total

check-a11y-landmarks passes (31 page(s)), and the appUtilsExports / a11y / asset suites are green at 238 tests — utils.js picking up a new call did not change its export surface.

Scope

One nav component, two stylesheets, two scripts, one new test file. No backend, route or schema changes.

---

CI note

Syntax check is red on this branch, and on every open PR in the repo right now. The single failure is inherited from main:

❌ 1 of 653 JavaScript file(s) failed to parse:
  frontend/scripts/shop.js:2499
      Unexpected end of input

No file this PR touches is implicated — shop.js is untouched here. It is tracked as #1696 with a fix open in #1701. Because Syntax check gates the rest of the workflow, Backend tests and Server boots report skipping rather than running; both suites pass locally on this branch.

The red Vercel check is the repo-wide Authorization required to deploy (team bhuvanshs-projects) and is unrelated to this change.

[hydra-maintainer]

🔍 Quality Gate Report

✅ All quality gates passed!

Status	Check	Details
✅	Linked Issue	PR description references a closing issue ✅

[hydra-maintainer]

🤖 AI Code Review

🔴 Score: 50/100 | comment

AI review unavailable at this time.

---

Automated AI review — a human maintainer will also review.

[vercel]

@MOHITKOURAV01 is attempting to deploy a commit to the Bhuvansh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[hydra-maintainer]

💡 Suggested reviewers based on relevant file history: @Aditya8369, @Pcmhacker-hero