Feat/better_flashcards_ui

[Z4phxr]

This pull request introduces significant improvements to the student flashcards dashboard and study experience, focusing on accessibility, UI consistency, and usability. The main changes include the addition of pagination to the flashcard decks list, collapsible subdeck sections, improved navigation button styling, and richer rendering of flashcard content in the study view. Below are the most important changes grouped by theme:

Flashcard Deck Dashboard Improvements:

• Added pagination to the flashcard decks list in dashboard/flashcards/page.tsx, including navigation controls and page reset logic when filters change. This ensures the UI remains performant and user-friendly even with large numbers of decks. [1] [2] [3] [4]
• Implemented collapsible subdeck lists for each main deck, with accessible toggle buttons and improved labeling to avoid redundant titles. This enhances the organization and clarity of deck sections.

UI Consistency and Navigation:

• Updated all "Back to dashboard" buttons across student-facing pages to use the new studentGlassFooterNavButton style and a consistent minimum width, improving visual consistency and accessibility. [1] [2] [3] [4] [5]

Flashcard Study Experience Enhancements:

• Replaced the custom LaTeX rendering logic with the FlashcardRichText component, allowing flashcard questions and answers to use GitHub Flavored Markdown and KaTeX for math rendering, resulting in a richer and more reliable study experience. [1] [2]
• Updated flashcard study card interface to support direct image URLs, enabling students to view media without requiring admin-only API access.

Technical/UX Details:

• Improved accessibility and responsive design in dashboard components, including ARIA attributes for collapsible regions and better layout for deck and subdeck cards. [1] [2]

These changes collectively provide a more scalable, accessible, and visually coherent flashcard experience for students.

[Copilot]

Pull request overview

This PR improves the student flashcards experience (deck browsing + study UI), while also tightening theme SSR consistency and making media delivery CSP-friendly by serving private-bucket assets same-origin.

Changes:

• Enhanced flashcards deck tree UX with pagination and collapsible subdeck sections.
• Upgraded flashcard study rendering to GFM Markdown + KaTeX, and attached student-safe media URLs server-side.
• Added theme cookie + provider for consistent SSR theme, and updated media serving to stream from S3 instead of redirecting to signed URLs.

Reviewed changes

Copilot reviewed 30 out of 30 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
LearningPlatform/test/unit/resolve-theme-preference.test.ts	Adds unit coverage for cookie/LS theme resolution logic.
LearningPlatform/src/payload/collections/Tasks.ts	Sanitizes media relationship fields on read to avoid invalid media refs.
LearningPlatform/src/payload/collections/Lessons.ts	Sanitizes attachment/image block media refs on read.
LearningPlatform/src/payload/collections/Courses.ts	Sanitizes course cover image media refs on read.
LearningPlatform/lib/valid-payload-media-id.ts	Introduces UUID/placeholder validation for Payload media IDs.
LearningPlatform/lib/theme-cookie.ts	Adds theme cookie read/write helpers for SSR theme classing.
LearningPlatform/lib/student-glass-styles.ts	Adds shared glass footer nav button style token.
LearningPlatform/lib/sanitize-payload-media-refs.ts	Adds sanitizers for invalid Payload media relationship values.
LearningPlatform/lib/s3.ts	Adds HEAD existence checks and same-origin private media streaming helpers.
LearningPlatform/lib/resolve-theme-preference.ts	Centralizes theme resolution order (localStorage → cookie → default).
LearningPlatform/lib/flashcard-media-urls.ts	Resolves Payload media IDs to /api/media/serve/... URLs and attaches them to card payloads.
LearningPlatform/documentation/PLATFORM_FEATURES.md	Documents new same-origin media streaming behavior + flashcard image support.
LearningPlatform/documentation/ADAPTIVE_LEARNING.md	Documents flashcard Markdown/KaTeX/images behavior in study UI.
LearningPlatform/components/useIsDark.tsx	Switches dark-mode hook to use the new theme preference provider.
LearningPlatform/components/theme-toggle.tsx	Writes theme cookie on toggle and relies on shared theme state.
LearningPlatform/components/theme-preference-provider.tsx	Adds provider + context for consistent theme state across the app.
LearningPlatform/components/student/markdown-theory-body.tsx	Exposes shared Markdown component mapping for reuse in flashcards.
LearningPlatform/components/student/flashcard-markdown.tsx	Adds FlashcardRichText renderer (GFM + KaTeX in text nodes).
LearningPlatform/components/dashboard/flashcard-section.tsx	Updates dashboard flashcard footer nav to consistent glass styling.
LearningPlatform/components/dashboard/all-courses-promo.tsx	Adjusts LiquidEther palette for better light/dark consistency.
LearningPlatform/components/admin/topbar.tsx	Mirrors theme changes into cookie for SSR consistency.
LearningPlatform/components/admin/add-flashcard-dialog.tsx	Updates helper text to reflect Markdown + KaTeX support.
LearningPlatform/app/layout.tsx	Uses theme cookie to SSR <html class="dark"> and wraps app in ThemePreferenceProvider.
LearningPlatform/app/api/media/serve/[filename]/route.ts	Streams private-bucket media same-origin (CSP-friendly) and adds S3 HEAD existence checks.
LearningPlatform/app/api/flashcards/study/route.ts	Attaches resolved media URLs to study responses.
LearningPlatform/app/api/flashcards/[id]/review/route.ts	Includes image IDs + resolved URLs in review responses.
LearningPlatform/app/(student)/(shell)/dashboard/flashcards/study/page.tsx	Reworks study card UI for Markdown+KaTeX rendering, 3D flip behavior, and server-resolved image URLs.
LearningPlatform/app/(student)/(shell)/dashboard/flashcards/page.tsx	Adds deck list pagination, collapsible subdecks, and consistent “Back to dashboard” styling.
LearningPlatform/app/(student)/(shell)/dashboard/flashcards/browse/page.tsx	Updates “Back to dashboard” styling for consistency.
LearningPlatform/app/(student)/(shell)/courses/page.tsx	Updates “Back to dashboard” styling for consistency.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.