- 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.
- Added a new page for displaying experimenta annual passes, integrating ProductCard and ProductGrid components for product presentation.
- Updated API to filter products by category, allowing for specific product queries.
- Enhanced navigation components, including AreaTabs and RoleSwitcher, to improve user experience and accessibility.
- Refactored existing components for better styling consistency and responsiveness.
- Improved dropdown menu components with updated styles and hover effects for better usability.
- Added new AppHeader and BottomNav components for better navigation across the application.
- Introduced AreaTabs for product area navigation and integrated RoleSwitcher for user role management.
- Created CartButton component to display cart status and item count.
- Implemented UserMenu with login/logout functionality and user greeting.
- Added Badge component for notifications and status indicators.
- Updated layout to accommodate new navigation components and ensure mobile responsiveness.
- Created product detail demo page to showcase design patterns and features.
- Enhanced existing components with improved styling and functionality.
- Created a new product detail page to display individual product information, including images, descriptions, and pricing.
- Implemented a product listing page to showcase all available products using the ProductCard and ProductGrid components.
- Added API endpoints for fetching product data, ensuring only active products are returned.
- Introduced a database seed script to populate the database with initial mock product data for development and testing.
- Updated settings to include new database seeding command and adjusted routing for product links.
- Simplified template structure by removing unnecessary line breaks and indentation.
- Enhanced badge and discount badge styles for better visual appeal.
- Updated class names for consistency and improved hover effects on buttons.
- Maintained functionality while improving code clarity and maintainability.
- Introduced ProductCard component to display individual product details, including image, title, description, price, and optional badges.
- Added ProductGrid component to create a flexible grid layout for displaying multiple ProductCard components, supporting 1-4 columns.
- Created a demo page to showcase the ProductCard and ProductGrid components in action, highlighting their responsive design and features.
- Updated styleguide to include links and descriptions for the new components.
- Added ConfigProvider component to prevent body scrolling when modals are open, enhancing user experience.
- Included comments explaining the rationale behind the scroll-body setting to avoid layout shifts caused by dropdown menus.
- Introduced Password Grant Flow for user authentication, allowing direct login with email and password.
- Updated `useAuth` composable to manage login and logout processes, including Single Sign-Out from Cidaas.
- Enhanced user interface with a new `UserMenu` component displaying user information and logout functionality.
- Updated homepage to show personalized greetings for logged-in users and a login prompt for guests.
- Added logout confirmation page with a countdown redirect to the homepage.
- Documented the implementation details and future enhancements for OAuth2 flows in CLAUDE.md and other relevant documentation.
- Added test credentials and guidelines for automated testing in the new TESTING.md file.
- Remove inline secure connection checks from LoginForm and replace them with a new SecureConnectionIndicator component.
- The SecureConnectionIndicator displays secure connection status messages based on the current protocol.
- Clean up LoginForm template for improved readability and maintainability.
- Change isSecureConnection from computed to ref and initialize it on component mount.
- Wrap secure connection status messages in ClientOnly to prevent rendering issues during server-side rendering.
- Change links in the registration form to direct users to the external Datenschutzerklärung and Nutzungsbedingungen pages.
- Ensure links open in a new tab for better user experience.
- Add orange AlertCircle icon to FormMessage component for better visibility of validation errors.
- Update styleguide to demonstrate new alert components with icons for error, success, and warning messages.
- Refactor CSS for status messages and form error messages to improve layout and accessibility compliance.
- Update CLAUDE.md to mandate informal "Du" form for user communication in all UI text and emails.
- Modify LoginForm and RegisterForm components to reflect informal language in validation messages and placeholders.
- Add secure connection indicators in LoginForm for user awareness.
- Update alert component styles for better visual feedback.
- Introduce experimenta company information document for user reference.
- Update LoginForm component to display error messages directly from the authentication response.
- Modify useAuth composable to handle login errors more effectively, ensuring proper error messages are thrown.
- Enhance login API response to return structured error messages for invalid credentials.
- Adjust Cidaas utility to throw specific errors for invalid username/password scenarios.
- Update login API to support direct authentication via email and password, removing the OAuth2 redirect flow.
- Modify LoginForm component to include password field and validation.
- Refactor useAuth composable to handle login with both email and password.
- Remove unnecessary OAuth2 callback handler and PKCE utilities.
- Update relevant documentation and error handling for the new login method.
- Update TabsList.vue to adjust height and border radius for a more modern look
- Modify TabsTrigger.vue to enhance padding, font size, and line height for better readability and user experience
- Add authentication middleware to protect routes
- Create API endpoints for login, logout, registration, and user info
- Develop UI components for login and registration forms
- Integrate VeeValidate for form validation
- Update environment configuration for Cidaas settings
- Add i18n support for English and German languages
- Enhance Tailwind CSS for improved styling of auth components
- Document authentication flow and testing procedures
Bastian Masanek