🛒 Feature: Cart Management for Album Viewer

[atheissen1]

Description

Add shopping cart functionality to the album viewer application, allowing users to add/remove albums to/from their cart and view the cart contents.

User Stories

As a user browsing the album list, I want to:

• See the number of albums in my cart displayed on a cart icon in the header
• View the contents of my cart by clicking on the cart icon
• Add albums to my cart by clicking an "Add to Cart" button on each album
• Remove albums from my cart in the cart detail view

Implementation Details

Components to Create/Modify

1. CartIcon.vue (new component)

   • Display cart icon with badge showing item count
   • Toggle cart drawer/modal on click
   • Position in the app header

2. CartDrawer.vue (new component)

   • Display list of albums in cart
   • Show album details (cover, title, artist)
   • Remove button for each item
   • Show total number of items
   • Empty cart state message

3. AlbumCard.vue (modify)

   • Add "Add to Cart" button
   • Disable button if album already in cart
   • Visual feedback on add action

4. App.vue (modify)

   • Integrate CartIcon component in header
   • Manage cart drawer visibility state

State Management

• Create a cart store/composable (src/composables/useCart.ts or Pinia store)
• Cart state should include:
  • Array of album items
  • Methods: addToCart(), removeFromCart(), isInCart(), getCartCount()
• Consider using localStorage or sessionStorage for cart persistence

Type Definitions

• Extend src/types/album.ts if needed
• Create cart-specific types if required

Internationalization

• Add translations to src/locales/:
  • cart.addToCart
  • cart.removeFromCart
  • cart.itemsInCart
  • cart.emptyCart
  • cart.title

Acceptance Criteria

• Cart icon is visible in the application header
• Cart icon displays a badge with the current number of items (hidden when cart is empty)
• Clicking the cart icon opens a drawer/modal showing cart contents
• Each album card has an "Add to Cart" button
• Clicking "Add to Cart" adds the album to the cart and updates the count
• Albums already in cart show a disabled "Add to Cart" button or an "In Cart" indicator
• Cart drawer displays all added albums with their details (cover, title, artist)
• Each item in the cart has a "Remove" button
• Clicking "Remove" removes the album from cart and updates the count
• Empty cart shows an appropriate message
• Cart state persists across page refreshes (localStorage)
• All text is internationalized (supports EN, DE, FR based on existing locales)
• Visual feedback when adding/removing items (e.g., animation, toast notification)
• Responsive design works on mobile and desktop

Technical Considerations

• State Management: Consider using Vue 3 Composition API with ref/reactive or integrate Pinia if more complex state management is needed
• Persistence: Use localStorage to persist cart between sessions
• Performance: Ensure cart operations don't cause unnecessary re-renders
• Accessibility: Ensure cart icon has proper ARIA labels and keyboard navigation works
• Testing: Add unit tests for cart operations in src/utils/ or component tests

Optional Enhancements (Future)

• Cart quantity management (multiple copies of same album)
• Cart total price calculation
• Clear all items button
• Animation transitions when opening/closing cart
• Undo functionality for removed items