Add collapse toggle and remaining-items counter to named wishlists

[Copilot]

Named wishlists with many items required excessive scrolling. This adds a per-list collapse toggle and a "N remaining" counter (unpurchased items) to each named wishlist header. Named wishlists are collapsed by default.

Changes

src/app.ts

• Added expandedWishLists: Set<string> to track expanded state across re-renders within a session
• renderWishListGroup now accepts isExpanded, renders a ▶/▼ toggle button (named lists only), and a remaining-item counter badge
• renderWishList passes expanded state per list and wires up toggle click handlers — toggling the collapsed CSS class and updating the set without a full re-render

css/styles.css

• .wish-list-group.collapsed .wish-list — hides items body when collapsed
• .wish-list-group-counter — pill badge for remaining count
• .wish-list-collapse-btn — minimal icon button with hover state
• .wish-list-group-title — flex row grouping the toggle, name, and counter

Screenshot

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Named wishlist collapse</issue_title>
<issue_description>When the user has many named wishlists and wishlist items within each, it requires a lot of scrolling. Let's add a collapse toggle next to each named wishlist title. They wishlists should be collapsed by default.

In the title bar for each let's add a counter for how many wishlist items still need to be purchased</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Named wishlist collapse #65

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.