UI: Redesign Issue Status and Priority Dropdowns

[timothyfroehlich]

Following the _issue-status-redesign plan, we need to upgrade the status, severity, priority, and consistency dropdowns to use rich UI components instead of standard HTML select elements.

Requirements:

• Visual Design: Match _issue-status-redesign/03_dropdown_status.png.
• Text Selectors: Use custom trigger designs that show icons and colors.
• Categorization: Use SelectGroup and SelectSeparator to divide statuses into 'New', 'In Progress', and 'Closed' groups as defined in src/lib/issues/status.ts.
• Icons & Colors: Every entry should include its respective icon and maintain the established color system (e.g., Cyan for New, Purple for In Progress, etc.).
• Descriptions/Tooltips:
  • Include tooltips for each status entry that show their detailed description from STATUS_CONFIG.
  • Note: Do NOT include subtitles (descriptions) directly in the dropdown items for severity (as they were removed/redundant).
• Functionality:
  • Maintain progressive enhancement support where possible (or ensure the custom components work reliably with Server Actions).
  • Auto-submit form on value change (matching current behavior).

Proposed Plan:

1. Create shared Select components: Create StatusSelect, SeveritySelect, PrioritySelect, and ConsistencySelect in src/components/issues/fields/.
2. Integrate tooltips: Wrap SelectItem or the content within it with Tooltip components from shadcn/ui.
3. Update update forms: Replace standard <select> in:
   • src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-status-form.tsx
   • src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-severity-form.tsx
   • src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-priority-form.tsx
   • src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-consistency-form.tsx
4. Update Unified Report Form: Apply the same rich selectors to src/app/report/unified-report-form.tsx.

Reference Documentation:

• _issue-status-redesign/README.md
• src/lib/issues/status.ts (Config and mapping source of truth)

[traycerai]

Plan

Observations

The codebase currently uses standard HTML <select> elements in all issue forms with manual submit buttons. The file:src/components/issues/StatusIndicator.tsx component already demonstrates a pattern for status configuration with icons and descriptions using lucide-react. The forms use useActionState with Server Actions for progressive enhancement. The shadcn/ui Select and Tooltip components are available and ready to use. No STATUS_CONFIG exists yet in file:src/lib/issues/status.ts, and the "consistency" field mentioned in the ticket doesn't exist in the codebase.

Approach

The implementation will follow a component-based architecture by first creating comprehensive configuration objects with icons, colors, and descriptions in the status utility file, then building reusable Select components that integrate tooltips and auto-submit functionality. These components will replace the existing HTML selects across all forms while maintaining the current Server Action integration. The status dropdown will use SelectGroup and SelectSeparator to organize statuses into logical categories (New, In Progress, Closed). The approach prioritizes reusability and consistency while preserving progressive enhancement support.

Implementation Steps

1. Enhance Status Configuration File

Update file:src/lib/issues/status.ts to add comprehensive configuration objects:

Add STATUS_CONFIG:

• Create a configuration object mapping each status to its icon (from lucide-react), color classes, description, and category
• Use AlertCircle for "new" (cyan/warning colors), CircleDot for "in_progress" (purple colors), CheckCircle2 for "resolved" (green colors)
• Include descriptions like "This issue has been reported but not yet addressed" for new status
• Add category field: "new" → "New", "in_progress" → "In Progress", "resolved" → "Closed"

Add SEVERITY_CONFIG:

• Map "minor", "playable", "unplayable" to their respective icons and colors
• Use Info icon for minor, AlertTriangle for playable, XCircle for unplayable
• Include descriptions explaining each severity level
• Reuse existing color classes from getIssueSeverityStyles

Add PRIORITY_CONFIG:

• Map "low", "medium", "high", "critical" to icons and colors
• Use ArrowDown for low, Minus for medium, ArrowUp for high, AlertOctagon for critical
• Include descriptions for each priority level
• Reuse existing color classes from getIssuePriorityStyles

Export helper functions:

• getStatusConfig(status: IssueStatus) - returns config for a status
• getSeverityConfig(severity: IssueSeverity) - returns config for a severity
• getPriorityConfig(priority: IssuePriority) - returns config for a priority
• getStatusesByCategory() - returns statuses grouped by category for the dropdown

2. Create Reusable Select Components

Create new directory file:src/components/issues/fields/ and add the following components:

StatusSelect Component (file:src/components/issues/fields/StatusSelect.tsx):

• Accept props: value, onChange, name, disabled
• Use shadcn/ui Select, SelectTrigger, SelectContent, SelectGroup, SelectLabel, SelectSeparator, SelectItem
• Render custom trigger showing selected status icon and label with appropriate colors
• Group items by category using SelectGroup with labels "New", "In Progress", "Closed"
• Add SelectSeparator between groups
• Wrap each SelectItem content with Tooltip from shadcn/ui showing the description
• Each item displays icon, label, and uses appropriate color classes
• Call onChange immediately when value changes (auto-submit behavior)

SeveritySelect Component (file:src/components/issues/fields/SeveritySelect.tsx):

• Similar structure to StatusSelect but without grouping
• Accept props: value, onChange, name, disabled
• Custom trigger with icon and color
• Each item shows icon and label with colors
• Wrap items with Tooltip showing descriptions
• Auto-submit on change

PrioritySelect Component (file:src/components/issues/fields/PrioritySelect.tsx):

• Similar structure to SeveritySelect
• Accept props: value, onChange, name, disabled
• Include all four priority levels: low, medium, high, critical
• Custom trigger with icon and color
• Wrap items with Tooltip showing descriptions
• Auto-submit on change

Implementation notes:

• All components should be client components ("use client")
• Use TooltipProvider wrapper for tooltip functionality
• Ensure proper TypeScript typing with the status/severity/priority types
• Add proper ARIA labels for accessibility
• Include data-testid attributes matching existing test patterns

3. Update Issue Detail Forms

Modify the following form components to use the new Select components and implement auto-submit:

Update file:src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-status-form.tsx:

• Import StatusSelect component
• Replace the <select> element with <StatusSelect>
• Remove the manual submit <Button> component
• Add useRef for form reference
• Implement handleStatusChange that calls form.requestSubmit() on value change
• Keep the hidden issueId input
• Keep success/error message display
• Add loading state indicator (spinner or disabled state) during submission

Update file:src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-severity-form.tsx:

• Import SeveritySelect component
• Replace the <select> element with <SeveritySelect>
• Remove the manual submit button
• Implement auto-submit with form.requestSubmit()
• Keep hidden inputs and error handling

Update file:src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-priority-form.tsx:

• Import PrioritySelect component
• Replace the <select> element with <PrioritySelect>
• Remove the manual submit button
• Implement auto-submit with form.requestSubmit()
• Keep hidden inputs and error handling

Note: The consistency form mentioned in the ticket (update-issue-consistency-form.tsx) does not exist in the codebase, so skip this file.

4. Update Unified Report Form

Modify file:src/app/report/unified-report-form.tsx:

For Severity field (lines 252-275):

• Import SeveritySelect component
• Replace the <select> element with <SeveritySelect>
• Wire up to existing severity state and setSeverity handler
• Keep the required validation
• Maintain the same layout and styling

For Priority field (lines 277-296):

• Import PrioritySelect component
• Replace the <select> element with <PrioritySelect>
• Wire up to existing priority state and setPriority handler
• Keep conditional rendering based on isAdminOrMember
• Maintain the same layout and styling

Note: The unified report form keeps the manual submit button since it's a creation form, not an update form. Only the select components themselves are replaced.

5. Visual Design Considerations

Since the design reference files (_issue-status-redesign/03_dropdown_status.png) don't exist in the codebase, follow these design principles based on the existing StatusIndicator component and Material Design 3 color system:

Trigger Design:

• Display icon on the left, label text in the center, chevron on the right
• Apply appropriate background color with opacity (e.g., bg-status-new/20)
• Use border with matching color (e.g., border-status-new)
• Add glow effect for emphasis where appropriate

Dropdown Items:

• Left-aligned icon with appropriate color
• Label text next to icon
• Checkmark indicator on the right for selected item
• Hover state with bg-accent background
• Proper spacing and padding for touch targets

Tooltips:

• Position to the right or bottom depending on context
• Show bold label and lighter description text
• Use appropriate delay (300ms) for better UX

6. Testing Considerations

While not writing tests, ensure the implementation supports existing test patterns:

• Maintain existing data-testid attributes on form elements
• Ensure Select components accept and forward test IDs
• Keep form submission behavior testable with Server Actions
• Preserve progressive enhancement (forms work without JavaScript)

Architecture Diagram

sequenceDiagram
    participant User
    participant StatusSelect
    participant Form
    participant ServerAction
    participant Database

    User->>StatusSelect: Selects new status
    StatusSelect->>StatusSelect: Show tooltip on hover
    StatusSelect->>Form: onChange triggered
    Form->>Form: form.requestSubmit()
    Form->>ServerAction: Submit FormData
    ServerAction->>Database: Update issue
    Database-->>ServerAction: Success
    ServerAction-->>Form: Return result
    Form->>Form: Revalidate & show feedback
    Form-->>User: Display success message

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

The codebase currently uses standard HTML `<select>` elements in all issue forms with manual submit buttons. The `file:src/components/issues/StatusIndicator.tsx` component already demonstrates a pattern for status configuration with icons and descriptions using lucide-react. The forms use `useActionState` with Server Actions for progressive enhancement. The shadcn/ui Select and Tooltip components are available and ready to use. No `STATUS_CONFIG` exists yet in `file:src/lib/issues/status.ts`, and the "consistency" field mentioned in the ticket doesn't exist in the codebase.

## Approach

The implementation will follow a component-based architecture by first creating comprehensive configuration objects with icons, colors, and descriptions in the status utility file, then building reusable Select components that integrate tooltips and auto-submit functionality. These components will replace the existing HTML selects across all forms while maintaining the current Server Action integration. The status dropdown will use `SelectGroup` and `SelectSeparator` to organize statuses into logical categories (New, In Progress, Closed). The approach prioritizes reusability and consistency while preserving progressive enhancement support.

## Implementation Steps

### 1. Enhance Status Configuration File

Update `file:src/lib/issues/status.ts` to add comprehensive configuration objects:

**Add STATUS_CONFIG:**
- Create a configuration object mapping each status to its icon (from lucide-react), color classes, description, and category
- Use `AlertCircle` for "new" (cyan/warning colors), `CircleDot` for "in_progress" (purple colors), `CheckCircle2` for "resolved" (green colors)
- Include descriptions like "This issue has been reported but not yet addressed" for new status
- Add category field: "new" → "New", "in_progress" → "In Progress", "resolved" → "Closed"

**Add SEVERITY_CONFIG:**
- Map "minor", "playable", "unplayable" to their respective icons and colors
- Use `Info` icon for minor, `AlertTriangle` for playable, `XCircle` for unplayable
- Include descriptions explaining each severity level
- Reuse existing color classes from `getIssueSeverityStyles`

**Add PRIORITY_CONFIG:**
- Map "low", "medium", "high", "critical" to icons and colors
- Use `ArrowDown` for low, `Minus` for medium, `ArrowUp` for high, `AlertOctagon` for critical
- Include descriptions for each priority level
- Reuse existing color classes from `getIssuePriorityStyles`

**Export helper functions:**
- `getStatusConfig(status: IssueStatus)` - returns config for a status
- `getSeverityConfig(severity: IssueSeverity)` - returns config for a severity
- `getPriorityConfig(priority: IssuePriority)` - returns config for a priority
- `getStatusesByCategory()` - returns statuses grouped by category for the dropdown

### 2. Create Reusable Select Components

Create new directory `file:src/components/issues/fields/` and add the following components:

**StatusSelect Component (`file:src/components/issues/fields/StatusSelect.tsx`):**
- Accept props: `value`, `onChange`, `name`, `disabled`
- Use shadcn/ui `Select`, `SelectTrigger`, `SelectContent`, `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectItem`
- Render custom trigger showing selected status icon and label with appropriate colors
- Group items by category using `SelectGroup` with labels "New", "In Progress", "Closed"
- Add `SelectSeparator` between groups
- Wrap each `SelectItem` content with `Tooltip` from shadcn/ui showing the description
- Each item displays icon, label, and uses appropriate color classes
- Call `onChange` immediately when value changes (auto-submit behavior)

**SeveritySelect Component (`file:src/components/issues/fields/SeveritySelect.tsx`):**
- Similar structure to StatusSelect but without grouping
- Accept props: `value`, `onChange`, `name`, `disabled`
- Custom trigger with icon and color
- Each item shows icon and label with colors
- Wrap items with `Tooltip` showing descriptions
- Auto-submit on change

**PrioritySelect Component (`file:src/components/issues/fields/PrioritySelect.tsx`):**
- Similar structure to SeveritySelect
- Accept props: `value`, `onChange`, `name`, `disabled`
- Include all four priority levels: low, medium, high, critical
- Custom trigger with icon and color
- Wrap items with `Tooltip` showing descriptions
- Auto-submit on change

**Implementation notes:**
- All components should be client components ("use client")
- Use `TooltipProvider` wrapper for tooltip functionality
- Ensure proper TypeScript typing with the status/severity/priority types
- Add proper ARIA labels for accessibility
- Include data-testid attributes matching existing test patterns

### 3. Update Issue Detail Forms

Modify the following form components to use the new Select components and implement auto-submit:

**Update `file:src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-status-form.tsx`:**
- Import `StatusSelect` component
- Replace the `<select>` element with `<StatusSelect>`
- Remove the manual submit `<Button>` component
- Add `useRef` for form reference
- Implement `handleStatusChange` that calls `form.requestSubmit()` on value change
- Keep the hidden `issueId` input
- Keep success/error message display
- Add loading state indicator (spinner or disabled state) during submission

**Update `file:src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-severity-form.tsx`:**
- Import `SeveritySelect` component
- Replace the `<select>` element with `<SeveritySelect>`
- Remove the manual submit button
- Implement auto-submit with `form.requestSubmit()`
- Keep hidden inputs and error handling

**Update `file:src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-priority-form.tsx`:**
- Import `PrioritySelect` component
- Replace the `<select>` element with `<PrioritySelect>`
- Remove the manual submit button
- Implement auto-submit with `form.requestSubmit()`
- Keep hidden inputs and error handling

**Note:** The consistency form mentioned in the ticket (`update-issue-consistency-form.tsx`) does not exist in the codebase, so skip this file.

### 4. Update Unified Report Form

Modify `file:src/app/report/unified-report-form.tsx`:

**For Severity field (lines 252-275):**
- Import `SeveritySelect` component
- Replace the `<select>` element with `<SeveritySelect>`
- Wire up to existing `severity` state and `setSeverity` handler
- Keep the required validation
- Maintain the same layout and styling

**For Priority field (lines 277-296):**
- Import `PrioritySelect` component
- Replace the `<select>` element with `<PrioritySelect>`
- Wire up to existing `priority` state and `setPriority` handler
- Keep conditional rendering based on `isAdminOrMember`
- Maintain the same layout and styling

**Note:** The unified report form keeps the manual submit button since it's a creation form, not an update form. Only the select components themselves are replaced.

### 5. Visual Design Considerations

Since the design reference files (`_issue-status-redesign/03_dropdown_status.png`) don't exist in the codebase, follow these design principles based on the existing `StatusIndicator` component and Material Design 3 color system:

**Trigger Design:**
- Display icon on the left, label text in the center, chevron on the right
- Apply appropriate background color with opacity (e.g., `bg-status-new/20`)
- Use border with matching color (e.g., `border-status-new`)
- Add glow effect for emphasis where appropriate

**Dropdown Items:**
- Left-aligned icon with appropriate color
- Label text next to icon
- Checkmark indicator on the right for selected item
- Hover state with `bg-accent` background
- Proper spacing and padding for touch targets

**Tooltips:**
- Position to the right or bottom depending on context
- Show bold label and lighter description text
- Use appropriate delay (300ms) for better UX

### 6. Testing Considerations

While not writing tests, ensure the implementation supports existing test patterns:

- Maintain existing `data-testid` attributes on form elements
- Ensure Select components accept and forward test IDs
- Keep form submission behavior testable with Server Actions
- Preserve progressive enhancement (forms work without JavaScript)

## Architecture Diagram

```mermaid
sequenceDiagram
    participant User
    participant StatusSelect
    participant Form
    participant ServerAction
    participant Database

    User->>StatusSelect: Selects new status
    StatusSelect->>StatusSelect: Show tooltip on hover
    StatusSelect->>Form: onChange triggered
    Form->>Form: form.requestSubmit()
    Form->>ServerAction: Submit FormData
    ServerAction->>Database: Update issue
    Database-->>ServerAction: Success
    ServerAction-->>Form: Return result
    Form->>Form: Revalidate & show feedback
    Form-->>User: Display success message
```

---

Execution Information

Branch: main
Commit: c18c2d3

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[timothyfroehlich]

Closing as completed. Work has been merged. —Claude