Implement Dynamic Progress Bar Using Stimulus

[loftwah]

We want to add a progress bar to the site that updates as users complete various actions. This will provide visual feedback on their progress and encourage engagement with the platform. We'll implement this feature using a Stimulus controller for smooth, client-side updates.

Tasks:

1. Create a new Stimulus controller:

   • Generate a new controller file: progress_bar_controller.js
   • Set up the basic structure with initialize, connect, and disconnect methods

2. Design the progress bar UI:

   • Create a partial for the progress bar HTML structure
   • Style the progress bar using Tailwind CSS classes

3. Implement the Stimulus controller logic:

   • Define methods to update the progress bar width and text
   • Create a method to fetch the current progress from the server

4. Backend support:

   • Create an API endpoint to return the user's current progress
   • Define what actions contribute to progress and their weightings
   • Implement a service to calculate the overall progress

5. Connect frontend to backend:

   • Use Stimulus to fetch progress data when the page loads
   • Set up periodic refreshes or update on specific actions

6. Add progress update triggers:

   • Identify key user actions that should update the progress
   • Implement custom events or data attributes to trigger progress updates

7. Animations and interactivity:

   • Add smooth transitions for progress bar updates
   • Implement tooltips or popovers to show detailed progress information

8. Testing:

   • Write Jest tests for the Stimulus controller
   • Add system tests to verify progress bar functionality
   • Manually test across different browsers and devices

9. Performance considerations:

   • Ensure progress bar updates don't negatively impact site performance
   • Implement debouncing or throttling if necessary

10. Documentation:

    • Document the progress bar implementation in the project wiki
    • Update any relevant user guides or onboarding materials

11. Accessibility:

    • Ensure the progress bar is accessible to screen readers
    • Add appropriate ARIA attributes

This feature will provide users with visual feedback on their site usage and encourage them to explore and utilize more of Linkarooie's features.