Study Tracker - User Selection

[avatarit]

Feature: User Selection Dropdown

Issue type: feature
Priority: High
Sprint: Sprint 1
Deadline: End of Day 2

Description
We need to create a dropdown menu () that allows the user to choose which student/user’s agenda should be displayed. When a user is selected, their stored agenda should be fetched from storage.js and displayed in the agenda section. Acceptance Criteria [ ] A element is visible on the page with the label “Select a user”.

The dropdown options are dynamically populated using the list of users from listUsers() in storage.js.

When a user is selected, the app calls getAgenda(userId) to fetch their data.

If the user has an agenda → display it in the Agenda section (sorted, upcoming dates only).

If the user has no agenda → show a friendly message: “This user has no topics yet. Add one below!”

Works with keyboard navigation (Accessibility).

Technical Notes
Use semantic HTML: Select a user: ….
Add a default option like: “Choose a user…” before selection.
Agenda rendering logic should be in a separate function (e.g., renderAgenda(userId)) for clarity.
Ensure no page reload is needed when selecting a user.

Definition of Done
Dropdown loads users correctly.
Changing the selected user updates the agenda section immediately.
Accessibility test (Lighthouse Snapshot) for this feature = 100%.