Cart Management: Header Cart Icon, Add/Remove Albums, and Cart Detail

[christinofficial]

Summary

Add Cart Management to the Vue Album Viewer. Users can add/remove albums to a cart from the album list, see a cart icon with a count in the header, and open a cart detail panel to review and remove items.

Motivation

Enables basic shopping interactions for the album viewer without backend changes. Improves UX by persisting cart state across sessions and supporting multi-language UI.

Requirements

• Header cart icon displays the current number of albums in the cart.
• Clicking the cart icon opens the cart detail panel.
• From the album list, clicking "Add to Cart" adds the album to the cart.
• In the cart detail, users can remove individual albums.
• Cart is in-memory and persisted to localStorage.
• All new UI strings support English, French, and German (existing i18n setup).

Implementation Details

• Store/Composable

  • Create a reactive cart store (or composable) in album-viewer/src/stores/cart.ts (or src/composables/useCart.ts).
  • State: items: Album[]
  • Methods: add(album: Album), remove(id: number), clear()
  • Getters/Computed: count (number of items), total (sum of prices)
  • Persistence: load from localStorage on init, save on changes (cart:v1).

• Header UI (in album-viewer/src/App.vue)

  • Add a cart icon with a badge bound to cart.count near the language selector.
  • Clicking the icon toggles visibility of a cart panel.

• Cart Detail Component (album-viewer/src/components/CartPanel.vue)

  • Props: visible
  • Emits: close
  • Lists cart.items showing title, artist, price and a "Remove" button for each.
  • Footer: shows Total and a "Clear Cart" button.
  • Keyboard accessible; Escape closes panel.

• Album Card Integration (album-viewer/src/components/AlbumCard.vue)

  • Wire the existing "Add to Cart" button to cart.add(album).

• i18n

  • Add keys to existing locale files (src/i18n/locales/en.json, fr.json, de.json):
    • header.cart, cart.title, cart.empty, cart.total, cart.clear, cart.remove, cart.added

• Styling

  • Scoped styles in CartPanel.vue for a simple drawer/modal.
  • Badge styles in the header.

Acceptance Criteria

• Header badge shows the current count and updates on add/remove.
• Clicking the cart icon opens/closes the cart panel.
• Cart panel lists added albums with title, artist, price and per-item remove buttons.
• Total price is displayed and updates when items change.
• "Clear Cart" removes all items and resets count to 0.
• Adding from an album card immediately updates header count and cart panel list.
• Removing from cart updates header count and panel list.
• Cart persists via localStorage; refresh keeps cart items and count.
• All new text appears translated for English, French, and German.
• Accessible: cart icon has an ARIA label; panel and buttons are keyboard-navigable.

Out of Scope

• Checkout, payments, user accounts, server-side persistence.

Test Plan

• Unit
  • Cart store: add, remove, clear, count, total, persistence.
• Component
  • CartPanel: renders list, total, remove and clear actions.
  • App header: badge count reflects cart.count, toggles panel.
  • AlbumCard: "Add to Cart" adds item.
• Manual/E2E (optional)
  • Add items from list, verify count and panel contents, remove items, clear cart, reload page to verify persistence.

Tasks

• Create cart store/composable with localStorage persistence
• Header: add cart icon + badge + toggle
• Build CartPanel.vue with list, remove, total, clear
• Wire AlbumCard "Add to Cart"
• Add i18n keys in EN/FR/DE and use them throughout
• Add unit/component tests for store and UI
• Styling and accessibility polish