Study Tracker- Display user's Agenda

[avatarit]

📝 Description

When a user is selected from the dropdown, display their agenda — a list of topics and their upcoming revision dates — in chronological order.
If no agenda exists, show a clear message to the user.

---

✅ Acceptance Criteria

•  When a user is selected, the app calls getAgenda(userId) from storage.js.

•  If the user has topics, show them in a table or list format.

•  Each entry should show revision date and topic name.

•  The list should be sorted by date (soonest first).

•  Past revision dates are filtered out — only upcoming ones appear.

•  If the user has no agenda, show: “No topics yet — add one below!”

•  The section updates automatically when a new topic is added (no reload).

•  Works with keyboard and passes Lighthouse Accessibility (100%).

---

⚙️ Technical Details

• Function: renderAgenda(userId) should handle fetching, filtering, and displaying topics.

• Use getAgenda(userId) from storage.js (async).

• Filtering example:

  const today = new Date();
  const upcoming = agenda
    .filter(item => new Date(item.date) >= today)
    .sort((a, b) => new Date(a.date) - new Date(b.date));
  

• Display example:

  <section id="agenda">
    <h2>Upcoming Revisions</h2>
    <ul id="agendaList"></ul>
  </section>
  

• Style with consistent colors and spacing (same as Feature 1).

• Include empty-state <p> for users without an agenda.

---

🕒 Time Estimate

Task | Estimated Time -- | -- Fetch + filter user agenda | 1 h Render agenda dynamically (list or table) | 1.5 h Add empty state message | 0.5 h Sort + test date logic | 1 h Accessibility + styling | 1 h Review + merge | 0.5 h Total | ~5.5 hours