Problem
The Access section on the About page (project_panel_about.html:189) shows three settings, but only one of them is easy to read at a glance:
- Visibility uses the
project-visibility-badge component (components.html:163). It is a bordered pill with a Lucide icon (globe Public / lock Private) and a line of helper text underneath.
- Issue creation is plain text: "Any signed-in user" or "Members only" (
project_panel_about.html:206).
- Sprints is plain text too: "Enabled" or "Disabled", with helper text (
project_panel_about.html:211).
Because the last two are plain text, it's hard to tell which state they're in.
Expected behavior
Issue creation and Sprints are shown the same way as Visibility: a small bordered badge with an icon and a short state label, and a line of helper text under it.
- Issue creation: e.g. "Anyone signed in" vs "Members only", with icons such as
users / user-lock. Add helper text to match Visibility, e.g. "Any signed-in user can open issues." / "Only members can open issues."
- Sprints: e.g. "Enabled" vs "Disabled", with icons such as
repeat / list-checks. Keep the existing helper text.
- Use the same colour language as Visibility. The open/on state gets a tinted badge and the restricted/off state gets the neutral slate badge. The three rows should look like a set.
Acceptance criteria
- All three Access rows render a badge with an icon and a text label. Icons are
aria-hidden, and the text alone conveys the state.
- The badge markup is shared: generalise
project-visibility-badge or add a sibling component rather than copying inline classes three times.
- Existing hooks keep working (
data-project-visibility, data-project-sprint-mode). Add an equivalent hook for issue creation.
- Badges don't wrap awkwardly in the narrow aside column. They work on mobile and in light and dark modes.
- Tests cover both states of each setting.
Related
- TRACK-68 added the Sprints setting to this section.
- A follow-up issue adds a "your permissions" box above this section.
