fix: initialize course colors on mount

[condyl]

This pull request improves how course colors are initialized and managed in the course list components. The main focus is to ensure that every course gets a color assigned as soon as it appears, and that color assignment is consistent and avoids color conflicts. The changes also make the color assignment logic more robust by using React hooks and references to keep state updates in sync.

Improvements to course color initialization and assignment:

• Added a new initializeCourseColor function in CourseColorsContext to explicitly assign a color to a course if it doesn't already have one, and updated CourseListItemComponent to call this function when a new course appears.
• Updated the color assignment logic to use a usedColorsRef reference to always have the latest state, preventing stale state issues when determining available colors.

General code improvements:

• Refactored imports to include necessary React hooks (useEffect, useCallback) in both CourseListItemComponent.jsx and CourseColorsContext.jsx.
• Ensured that the context value now provides the new initializeCourseColor function to consumers.

These changes make color assignment more reliable and ensure that UI components always display courses with assigned, non-conflicting colors.