- Adjusted button margin in UserMenu.vue for better alignment.
- Updated container classes in AppHeader.vue to use max-width for improved responsiveness.
- Modified max-width settings in product detail page to enhance layout consistency across different states (loading, error, product display).
- Renamed the 'red' color to 'experimenta-red' in tailwind.config.ts for better clarity.
- Replaced SVG error icons with the AlertCircle component in CheckoutForm.vue for improved visual consistency.
- Streamlined Input component structure in CheckoutForm.vue for cleaner code.
- Updated styleguide.vue to reflect changes in color representation for better documentation.
- Ensuring existing items are displayed immediately.
- This enhancement improves user experience by providing instant visibility of cart contents after authentication.
- Updated SelectTrigger and SelectItem components to use variant props for error handling, enhancing visual feedback.
- Refactored styles in SelectContent and SelectItem for better alignment and responsiveness.
- Added new variant handling in the SelectTrigger component to streamline class management.
- Updated styleguide.vue to include examples of the Select component with error and disabled states for better documentation.
- Increased the simulated PayPal redirect duration from 1 second to 3 seconds for a more realistic user experience.
- Refactored button structure in MockPayPalButton.vue for cleaner code and improved readability.
- Updated z-index values in SheetContent.vue and sheet/index.ts to ensure proper layering of UI elements, enhancing visibility and interaction.
- Added an Edit3 icon from 'lucide-vue-next' to the "Warenkorb bearbeiten" button for improved visual clarity.
- Refactored button structure for better alignment and responsiveness, consolidating button attributes into a single line for cleaner code.
- Updated confetti animation to trigger only on desktop devices, reducing distraction on mobile.
- Added media query check to ensure confetti effects are only applied at the md breakpoint and above, improving user experience across different screen sizes.
- Replaced CartSheet and CartSidebar components with a new CartResponsive component that adapts to screen size, providing a unified cart experience.
- Implemented responsive animations for the cart, allowing it to slide in from the right on desktop and from the bottom on mobile.
- Updated styles and layout in tailwind.css to support new animation effects for the cart component.
- Updated comments for clarity on highlight clearing timing after animations.
- Reinforced the logic to ensure highlights are cleared after all animations complete, improving visual consistency.
- Updated tab styling to include a relative positioning for better layout control.
- Introduced a new highlight animation for newly added tabs, replacing the previous background gradient with an opacity fade effect for improved visual feedback.
- Enhanced the tab-highlight class to include a pseudo-element for a more dynamic appearance during animations.
- Updated highlight animation for newly added tabs to include a two-blink effect followed by a gradual fade-out.
- Adjusted timing for clearing highlights to ensure it occurs after the fade-out completes.
- Introduced a new background animation that stays visible during blinks and fades out slowly, enhancing visual feedback for users.
- Added a resetRoles function in useActiveRole to clear user roles upon logout, ensuring a clean state.
- Updated UserMenu.vue to call resetRoles during logout for improved role management.
- Enhanced AreaTabs.vue to support multiple newly added tabs with staggered confetti animations, improving user engagement.
- Refactored logic to track newly added areas and their visibility, ensuring a smoother navigation experience.
- Increased particle count and spread for a more vibrant confetti effect.
- Adjusted ticks and gravity for improved animation speed and realism.
- Reduced initial velocity for a smoother visual experience during confetti bursts.
- Integrated the 'canvas-confetti' library to enhance user experience by triggering confetti animations when new tabs are added.
- Implemented logic to track newly added areas and animate their appearance with a highlight effect.
- Updated the AreaTabs.vue component to include transition animations for tab entries and exits, improving visual feedback during navigation.
- Enhanced styling for newly added tabs to draw attention and improve user engagement.
- Introduced role visibility checks in AreaTabs.vue to filter displayed areas based on the user's active role, improving user experience and accessibility.
- Updated RoleSwitcher.vue to enhance accessibility with a high-contrast checkmark for better visibility.
- Modified useActiveRole.ts to streamline role initialization and refresh logic for role-based product visibility.
- Added explicit keys for role-based data fetching in product-related pages to ensure accurate data refresh.
- Enhanced API endpoint for product retrieval to return 404 if a product is not accessible based on the user's role, ensuring security and clarity.
- Introduced a new composable `useActiveRole` for managing user roles, including fetching role status and switching roles with server validation.
- Updated `RoleSwitcher.vue` to utilize the new composable, enhancing role selection with improved error handling and UI feedback.
- Added new API endpoints for role management, including fetching user role status and switching active roles.
- Enhanced product visibility logic to filter based on the user's active role, ensuring a tailored experience.
- Updated database schema to support last active role tracking for users, improving session management.
- Refined UI components across the application to reflect role-based changes and improve user experience.
- Added ArrowLeftIcon and ShoppingCartIcon from 'lucide-vue-next' for better visual representation in the product page.
- Updated the "Add to Cart" button to include an icon, enhancing user experience and clarity.
- Improved navigation link with an icon for a more cohesive design.
- Imported HouseIcon and HandbagIcon from 'lucide-vue-next' for better visual representation.
- Simplified SVG elements by removing unnecessary line breaks and ensuring consistent formatting.
- Enhanced loading and success states with improved icon integration for a more cohesive user experience.
- Swapped the X icon for CircleX in the DialogClose component to enhance the design.
- Adjusted icon size for better alignment with the overall UI aesthetics.
- Changed role descriptions for 'individual' and 'educator' to provide clearer context.
- Added a new 'company' role with appropriate details.
- Improved accessibility for the role switcher by implementing a high-contrast checkmark for better visibility.
- Updated instructional text to clarify the role's impact on product visibility.
These changes aim to improve user understanding and accessibility within the role selection interface.
- Updated AppHeader.vue to show the role switcher only when the user is logged in, improving the relevance of displayed options.
- Modified CartButton.vue to adjust spacing based on item presence, enhancing visual consistency.
These changes aim to refine user navigation and ensure a more tailored experience within the application.
- Updated UserMenu.vue to enhance button styling and spacing for a more modern look.
- Simplified CartFAB.vue to always show the cart button when items are present, regardless of the route.
- Adjusted AppHeader.vue for better alignment of elements.
- Enhanced AreaTabs.vue to enable the educator tab and improve badge styling.
- Refined BottomNav.vue to handle cart visibility and navigation more effectively.
These changes aim to enhance user navigation and overall experience within the application.
- Enhanced UserMenu.vue by implementing an extended user type for better user data handling and updated user initials logic.
- Adjusted AppHeader.vue and AreaTabs.vue for improved layout and spacing, ensuring a more cohesive design.
- Updated CartButton.vue and Tabs components for consistent styling and better responsiveness.
These changes aim to enhance the overall usability and visual appeal of the application, providing a smoother user experience.
- Adjusted AppHeader.vue for better spacing and alignment of elements, enhancing the overall visual appeal.
- Updated AreaTabs.vue to include a new 'Start' tab with a home icon, improving navigation options.
- Modified route handling in AreaTabs.vue to dynamically determine the current area based on the route.
- Changed default redirect destination in useAuth.ts to the root path for a more intuitive user experience.
- Enhanced index.vue to provide a more welcoming message and improved content presentation.
These changes aim to enhance user navigation and overall experience within the application.
- Updated UserMenu.vue to enhance button and avatar styles for a more modern look.
- Adjusted alert component styles in index.ts for consistent rounded corners.
- Simplified loading state markup in order confirmation page for cleaner code.
- Enhanced button and link text for better clarity and user navigation.
These changes aim to improve the overall aesthetic and usability of the application, ensuring a more cohesive user experience.
- Refactored CheckoutForm.vue to utilize an extended user type, incorporating additional address fields for improved user data handling.
- Updated OrderSummary.vue to conditionally display salutation based on user input.
- Standardized error alert styling across multiple pages, changing variant from 'destructive' to 'error' for consistency.
- Adjusted button styles in various components to align with the new 'experimenta' variant.
These changes aim to improve user experience by ensuring accurate data representation and consistent UI elements across the checkout and order processes.
- Added 'select-none' class to subtotal and remove button in CartItem.vue to prevent text selection during user interaction, improving the overall user experience.
- Added Checkout and Payment pages to handle user authentication and order processing.
- Introduced MockPayPalButton for simulating payment during development.
- Updated CartSheet and CartSidebar components to navigate to the new checkout page.
- Enhanced Cart UI with responsive design for mobile and desktop views.
- Implemented order confirmation and success pages to provide feedback after payment completion.
These changes complete the checkout and payment functionality, improving the overall user experience and ensuring a seamless transition from cart to order confirmation.
- Added AddressForm and CheckoutForm components for user input during checkout.
- Implemented validation using Zod and VeeValidate for billing address fields.
- Created OrderSummary and MockPayPalButton components for order confirmation and payment simulation.
- Updated CartSheet and CartSidebar to navigate to the new checkout page at '/kasse'.
- Introduced new API endpoints for validating checkout data and creating orders.
- Enhanced user experience with responsive design and error handling.
These changes complete the checkout functionality, allowing users to enter billing information, simulate payment, and confirm orders.
- Disabled the educator tab in AreaTabs and added a 'Demnächst' badge for future visibility.
- Updated the experimenta page header to singular form for consistency and improved layout of ProductCard components for better readability.
These changes enhance the user experience by clarifying product availability and improving the overall presentation of the educator annual pass.
- Introduced a new page for educator annual passes, displaying relevant products with a dedicated layout and loading/error states.
- Updated AreaTabs component to include the educator tab and adjusted routing logic.
- Modified useAuth to redirect users to the products page after login.
- Adjusted mock product prices and stock quantities in the database seeding script to reflect new pricing strategy.
These changes enhance the user experience for educators and improve product visibility in the application.
- Simplified Transition component structure in CartFAB.vue for better readability.
- Enhanced FAB button size and adjusted ShoppingCart icon scale for improved visibility.
- Updated Badge component styling for better alignment and visual appeal.
- Modified CartSidebar.vue to adjust empty state layout, improving user experience when the cart is empty.
These changes aim to enhance the overall user interface and interaction within the shopping cart components.
- Added CartItem, CartSummary, CartEmpty, CartSidebar, and CartSheet components for managing cart display and interactions.
- Integrated useCart and useCartUI composables for cart state management and UI control.
- Implemented API endpoints for cart operations, including fetching, adding, updating, and removing items.
- Enhanced user experience with loading states and notifications using vue-sonner for cart actions.
- Configured session management for guest and authenticated users, ensuring cart persistence across sessions.
This commit completes the shopping cart feature, enabling users to add items, view their cart, and proceed to checkout.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Implemented desktop cart button in navigation header that displays:
- Shopping cart icon with item count badge (red, top-right)
- Total cart price in German locale (EUR)
- Click opens CartSidebar via useCartUI() composable
- Responsive: visible only on lg breakpoint and above
- Hidden on mobile (FAB is used instead)
Uses useCart() composable for itemCount and total, with proper
Intl.NumberFormat formatting for EUR display.
Also standardized CartFAB price formatting to use Intl.NumberFormat
for consistency with rest of codebase.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated labels for 'experimenta' and 'makerspace' to singular form for consistency.
- Adjusted computed property to return simplified area identifiers for improved routing clarity.
- Updated product area IDs for 'experimenta' and 'makerspace' to enhance clarity and navigation consistency.
- Maintained existing functionality while improving the overall structure of the AreaTabs component.
- Changed product area IDs for 'experimenta' and 'makerspace' to simplify navigation.
- Updated visibility settings for areas to ensure 'experimenta' and 'labs' are now visible.
- Adjusted logic in computed property to reflect new area IDs for improved routing consistency.
- Updated the template structure to make the entire card clickable by wrapping the CTA button in a div instead of a NuxtLink.
- Improved the visual indication of the CTA button with clearer comments and hover effects for better user experience.
- Introduced RoleSwitcher component to the styleguide, allowing users to switch between different roles (individual, educator, company).
- Enhanced the styleguide with a live example, design features, and component usage instructions for better clarity and usability.
- Updated layout to include a new section for the Role Switcher, improving overall navigation and user experience.
- Updated role descriptions for clarity by removing unnecessary phrases.
- Enhanced template structure for better readability and consistency in styling.
- Adjusted dropdown menu width for improved layout and user experience.
Bastian Masanek