Restyle assessment dropdown with colored set badge

[Copilot]

The assessment dropdown only showed pl_assessment_title, with no visual indication of the assessment set. Needed a colored badge (pl_assessment_set_abbreviation + pl_assessment_number, background derived from pl_assessment_set_color) prefixing the title, with both badge and title flush left, matching the PrairieLearn styling.

Backend

• AssessmentDTO now includes pl_assessment_set_abbreviation, pl_assessment_number, and pl_assessment_set_color (sourced from the existing PlAssessment entity fields).
• AssessmentManagementDTO (used by the instructor-facing lock/unlock modal) also now includes pl_assessment_set_abbreviation, pl_assessment_number, and pl_assessment_set_color, so the same badge can be rendered there.
• AssessmentController now injects PlColorRepository and translates pl_assessment_set_color (a PrairieLearn color name like gray1, as stored on PlAssessment) into its hex code via the pl_color table (populated by ReadPLColorsJob) before returning it in AssessmentDTO/AssessmentManagementDTO, so the value can be applied directly as a CSS background color.

Frontend

• Introduced a shared PrairieLearnAssessment component (frontend/src/main/components/Scaffold/PrairieLearnAssessment.tsx) that renders a rounded, colored badge before the title, both flush left, with a gap between badge and text. Badge is omitted when abbreviation/number data isn't available yet (pre PL-API sync).
• Badge text color is computed dynamically per the ITU-R BT.601 perceived-luminance formula (Luminance = R×0.299 + G×0.587 + B×0.114): white text when the background's luminance is ≤150, black text otherwise, for optimal legibility and accessibility contrast against any pl_assessment_set_color.
• Badge min-width increased by 75px (from 36px to 111px, extracted as a BADGE_MIN_WIDTH constant) to comfortably fit longer set abbreviation + number combinations.
• Assessments are now sorted by the combination of pl_assessment_set_abbreviation + pl_assessment_number wherever they are listed: both in the AssessmentSelect dropdown and in the UnlockAssessmentsModal instructor list (via a shared compareByAssessmentSetAndNumber comparator in conceptGraphUtils.ts).
• AssessmentSelect (Scaffold) now uses PrairieLearnAssessment for both the closed control and each dropdown option.
• UnlockAssessmentsModal (Scaffold) now also uses PrairieLearnAssessment for each assessment's label, so instructors see the same colored badge when locking/unlocking assessments.
• Assessment and AssessmentManagementDTO types extended with the new optional fields.

<PrairieLearnAssessment assessment={a} />
// renders: Badge  Title… (both flush left)

Note: this only affects the non-legacy AssessmentSelect/UnlockAssessmentsModal used by ConceptGraphPage. LegacyAssessmentSelect/LegacyHomePage use a frozen Assessment model without these fields and are unchanged.

[pconrad]

@copilot One correction: Please align both the badges and titles flush left. That matches the styling on the PrairieLearn website, which we are trying to emulate.

[pconrad]

@copilot Factor out the combination of the badge and the title formatting into it's own component called and then use it both in the dropdown, and on the Modal that is used by instructors to lock and unlock assessments.

[Copilot]

@copilot One correction: Please align both the badges and titles flush left. That matches the styling on the PrairieLearn website, which we are trying to emulate.

Fixed in e5fa88e — removed the centered badge column; badges and titles are now both flush left.

[pconrad]

@copilot. I see the badges in the DOM, for example:

<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 2px 8px; border-radius: 999px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap;">PQ1</span>

But: the background colors are not showing up.

• Please pull the name of the background color from pl_assessment_set_color.
• Then use the pl_color table to translate that from a name into a hexcode.
• Then apply that background color to the badge.
• Use black, not white, for the text color on the badge.

[Copilot]

@copilot Factor out the combination of the badge and the title formatting into it's own component called and then use it both in the dropdown, and on the Modal that is used by...

Done in 13e0800 — extracted PrairieLearnAssessment (in frontend/src/main/components/Scaffold/PrairieLearnAssessment.tsx) and now use it in both AssessmentSelect and UnlockAssessmentsModal. Also added the pl_assessment_set_*/pl_assessment_number fields to AssessmentManagementDTO (backend + frontend type) so the modal has the data needed to render the badge.

[Copilot]

@copilot. I see the badges in the DOM, for example:

...

Fixed in 3e459d2 — AssessmentController now injects PlColorRepository, loads the pl_color name→hex map, and translates pl_assessment_set_color into its hex code before returning it in AssessmentDTO/AssessmentManagementDTO, so the badge background renders correctly. Also switched badge text color from white to black.

[pconrad]

@copilot Please address the jacoco coverage failure.

[Copilot]

@copilot Please address the jacoco coverage failure.

Fixed in the latest commit — added a test case with pl_assessment_set_color set to a blank string ("") in setLocked_can_lock_an_assessment, which exercises the previously-uncovered isBlank() branch in AssessmentController.resolveColorHex. Verified locally with mvn verify: 780 tests pass and jacoco branch coverage is now 100%.

[pconrad]

@copilot Please use this formula to determine whether to show the badge with a white text or black text:

Choose white text for backgrounds with a luminance value ≤ 150, and black text for backgrounds >150. To calculate this, extract the background’s sRGB values and apply the formula: (\text{Luminance} = (R \times 0.299 + G \times 0.587 + B \times 0.114)). This ensures optimal legibility and meets accessibility contrast ratio.

Also: please sort the assessments by the combination of the pl_assessment_set_abbreviation + pl_assessment_number when they appear in the modal and in the dropdown.

Finally, increase the field for the badge by 75 pixels.

[Copilot]

@copilot Please use this formula to determine whether to show the badge with a white text or black text:

Choose white text for backgrounds with a luminance value ≤ 150, and black text for backg...

Addressed in 8e... commits: badge text color now uses the luminance formula (white for luminance ≤150, black otherwise), assessments in the dropdown and unlock modal are sorted by pl_assessment_set_abbreviation + pl_assessment_number, and the badge's min-width was increased by 75px (36→111, extracted as BADGE_MIN_WIDTH).