Commit graph

13 commits

Author SHA1 Message Date
43c368e4e4 feat: add lazy loading to product images across market components
- Implemented lazy loading for product images in CartItem, CartSummary, ProductCard, ProductDetailDialog, CheckoutPage, and StallView components.
- This enhancement improves performance by deferring the loading of off-screen images, resulting in faster initial page load times and a smoother user experience.

These changes optimize image handling across the market module, contributing to better resource management and user interaction.
2025-09-27 18:48:57 +02:00
e68a7a9ed5 refactor: simplify LoadingErrorState and enhance MarketSearchBar functionality
- Removed unnecessary imports and streamlined the LoadingErrorState component by eliminating redundant props.
- Improved keyboard handling in MarketSearchBar to support basic Escape key functionality and enhanced keyboard shortcuts.
- Updated MerchantStore and MarketPage components to utilize the revised LoadingErrorState and MarketSearchBar, ensuring consistent loading/error handling and search capabilities.
- Enhanced StallView to provide better category filtering and product search experience.

These changes improve code clarity and maintainability while enhancing user interaction across the market module.
2025-09-27 09:51:00 +02:00
c8860dc937 feat: extract and consolidate common UI patterns across market module
## Component Extraction
  - Create MarketSearchBar component with dual-mode support (enhanced/simple)
    - Enhanced mode: suggestions, keyboard shortcuts, category filters
    - Simple mode: basic search functionality
    - Dynamic imports for performance optimization
  - Extract LoadingErrorState component for consistent loading/error handling
    - Configurable compact/full modes with custom messages
    - Built-in retry functionality
    - Standardized spinner and error displays
  - Consolidate CartButton component (already extracted in previous commit)

  ## UI Standardization
  - Replace inline category badges in StallView with CategoryFilterBar component
  - Add missing state management for category filtering (filterMode, setFilterMode)
  - Ensure consistent filtering UI between MarketPage and StallView
  - Standardize loading states across MarketPage, ProductGrid, and MerchantStore

  ## Code Organization
  - MarketPage: Uses enhanced MarketSearchBar with full feature set
  - StallView: Uses simple MarketSearchBar for cleaner stall-specific search
  - Both views now share CategoryFilterBar, CartButton, and ProductGrid
  - LoadingErrorState provides unified loading/error UX patterns

  ## Technical Improvements
  - Eliminate code duplication following DRY principles
  - Improve maintainability with single source of truth for UI patterns
  - Optimize performance with conditional feature loading
  - Enhance accessibility with consistent keyboard shortcuts and ARIA labels
  - Ensure mobile-responsive designs with unified behavior

  BREAKING CHANGE: MarketFuzzySearch component replaced by MarketSearchBar
2025-09-27 09:45:33 +02:00
da5c4d6de1 feat: add CartButton component for consistent cart access across views
- Introduced a new CartButton component to encapsulate cart summary functionality, improving code reusability and maintainability.
- Updated MarketPage.vue and StallView.vue to utilize the CartButton component, enhancing user navigation to the cart.
- Removed redundant cart summary code from both views, streamlining the component structure.

These changes provide a unified and consistent user experience for accessing the cart across different market views.
2025-09-27 00:07:37 +02:00
688bf5e105 feat: add cart summary button to StallView for improved user navigation
- Introduced a cart summary button in StallView.vue that displays the total number of items in the cart.
- Implemented a click handler to navigate users to the cart page, enhancing the shopping experience.
- Imported the ShoppingCart icon from lucide-vue-next for visual representation.

These changes provide users with quick access to their cart, improving overall usability and navigation within the market interface.
2025-09-26 23:57:56 +02:00
56bcb8ec04 refactor: update ProductCard, ProductGrid, and MarketPage components for improved product handling and internal state management
- Removed direct store dependency from ProductCard.vue, replacing it with event emission for adding products to the cart.
- Enhanced ProductGrid.vue to manage product detail dialog internally, improving user interaction and state handling.
- Streamlined MarketPage.vue by removing redundant product detail dialog logic, focusing on cleaner component structure.
- Updated event handling for adding products to the cart with quantity support, enhancing flexibility in product management.

These changes improve the modularity and maintainability of the market components, providing a better user experience when interacting with products.
2025-09-26 23:56:37 +02:00
3f47d2ff26 feat: introduce CategoryFilterBar and ProductGrid components for enhanced product filtering and display
- Added CategoryFilterBar.vue to manage category filtering with AND/OR toggle options and clear all functionality.
- Implemented ProductGrid.vue to display products with loading and empty states, improving user experience.
- Refactored MarketPage.vue to utilize the new components, streamlining the layout and enhancing responsiveness.
- Updated StallView.vue to incorporate ProductGrid for consistent product display across views.

These changes enhance the overall usability and visual appeal of the market components, providing users with a more intuitive filtering and browsing experience.
2025-09-26 23:39:08 +02:00
478b83ddd3 FIX BUILD ERRORS & AVOID INFINITE RECURSION: Enhance product enrichment and type definitions in MerchantStore component
- Updated the product enrichment logic in MerchantStore.vue to ensure all necessary properties match the Product interface, improving data consistency.
- Added optional properties for active status, pending state, and configuration in the Product interface within market.ts, enhancing flexibility for merchant store management.
- Improved type assertions in MarketPage.vue and StallView.vue to ensure proper type handling for product data, enhancing type safety and clarity.

These changes improve the robustness and reliability of product data handling across the market components, enhancing the overall user experience.
2025-09-26 17:20:59 +02:00
0e6a4a7451 Refactor StallView component for enhanced layout and visual appeal
- Redesigned the Stall Info Card to improve responsiveness and aesthetics, incorporating a more compact layout and enhanced logo display.
- Updated the styling of stall statistics and category badges for better alignment with the design system, improving user interaction.
- Enhanced the overall structure and clarity of stall information, making it more visually engaging and user-friendly.

These changes provide a more cohesive and appealing interface in the StallView component, improving the overall user experience.
2025-09-26 17:02:01 +02:00
0a94c7b23d Refactor StallView layout for improved responsiveness and visual clarity
- Adjusted padding, margins, and font sizes throughout the StallView component to enhance mobile responsiveness and overall user experience.
- Updated the styling of various elements, including buttons, statistics, and category badges, to ensure better alignment with the design system and improved accessibility.
- Enhanced the layout of the stall information and search/filter bar for a more cohesive appearance across different screen sizes.

These changes provide a more visually appealing and user-friendly interface in the StallView component.
2025-09-26 17:02:01 +02:00
5d55dfe9d1 Refactor StallView styles for improved visual consistency
- Updated background and text colors in StallView to align with the new design system, enhancing overall aesthetics and readability.
- Adjusted styles for logo and product statistics to ensure better integration with the updated theme.
- Improved accessibility by refining text colors for better contrast and visibility.

These changes enhance the user experience by providing a more cohesive and visually appealing interface in the StallView component.
2025-09-26 00:49:43 +02:00
8aa575ffb1 Add MarketFuzzySearch component for enhanced product searching
- Introduced a new MarketFuzzySearch component to provide an advanced search interface with keyboard shortcuts, search suggestions, and recent searches functionality.
- Updated MarketPage and StallView to integrate the new fuzzy search component, replacing the previous search input implementations.
- Enhanced search capabilities with configurable options for better user experience and product discovery.

These changes improve the search functionality across the market module, making it easier for users to find products efficiently.
2025-09-25 23:02:47 +02:00
86d3133978 Add stall view and product detail dialog in market module
- Introduced a new route for viewing individual stalls, allowing users to navigate to a specific stall's page.
- Created a ProductDetailDialog component to display detailed information about products, including images, descriptions, and stock status.
- Updated MarketPage to handle stall navigation and integrate the new dialog for product details.

These enhancements improve the user experience by providing more detailed product information and easier navigation within the market module.
2025-09-25 22:53:12 +02:00