Feature Request: Multi-select and Batch Editing

[timothyfroehlich]

Add a button to enable checkboxes on the issue list to allow selecting multiple issues. Implement batch actions to modify properties (status, assignee, etc.) for all selected issues simultaneously.

[traycerai]

Plan

Observations

The PinPoint application is a Next.js issue tracking system with a server-rendered issues list (file:src/app/(app)/issues/page.tsx) displaying individual IssueRow components. The codebase uses Radix UI primitives, server actions for mutations (file:src/app/(app)/issues/actions.ts), and a service layer (file:src/services/issues.ts) with transaction support. Currently, all issue updates operate on single issues with no batch operation support. The UI follows shadcn/ui patterns with Tailwind CSS styling.

Approach

The implementation will introduce a client-side selection mode that can be toggled on/off, allowing users to select multiple issues via checkboxes. A batch actions dropdown will provide options to modify properties (status, assignee, severity, priority, consistency) for all selected issues simultaneously. The solution will leverage the existing service layer patterns, extend them with batch operations, create new server actions for batch updates, and maintain the current permission model. The issues page will be converted to a hybrid approach with a client component wrapper managing selection state while preserving server-side data fetching.

Implementation Steps

1. Install Dependencies

Add the Radix UI checkbox primitive to file:package.json:

• Install @radix-ui/react-checkbox package

2. Create Checkbox UI Component

Create file:src/components/ui/checkbox.tsx:

• Implement a Radix UI checkbox wrapper following the existing UI component patterns
• Style consistently with other form components using Tailwind classes
• Support checked, indeterminate, and disabled states
• Include proper accessibility attributes

3. Extend Service Layer with Batch Operations

Update file:src/services/issues.ts:

• Add batchUpdateIssueStatus function accepting issueIds: string[] and status: IssueStatus
• Add batchUpdateIssueSeverity function accepting issueIds: string[] and severity: IssueSeverity
• Add batchUpdateIssuePriority function accepting issueIds: string[] and priority: IssuePriority
• Add batchUpdateIssueConsistency function accepting issueIds: string[] and consistency: IssueConsistency
• Add batchAssignIssues function accepting issueIds: string[] and assignedTo: string | null
• Each function should use database transactions
• Create timeline events for each affected issue
• Trigger notifications appropriately
• Return success/failure results for each issue

4. Create Batch Action Schemas

Create or update file:src/app/(app)/issues/schemas.ts:

• Add batchUpdateIssueStatusSchema with issueIds: z.array(z.string()) and status
• Add batchUpdateIssueSeveritySchema with issueIds and severity
• Add batchUpdateIssuePrioritySchema with issueIds and priority
• Add batchUpdateIssueConsistencySchema with issueIds and consistency
• Add batchAssignIssuesSchema with issueIds and assignedTo

5. Create Batch Server Actions

Update file:src/app/(app)/issues/actions.ts:

• Add batchUpdateIssueStatusAction that validates input, checks permissions for each issue, calls service function
• Add batchUpdateIssueSeverityAction following same pattern
• Add batchUpdateIssuePriorityAction following same pattern
• Add batchUpdateIssueConsistencyAction following same pattern
• Add batchAssignIssuesAction following same pattern
• Each action should verify user has permission to update all selected issues
• Return aggregated results indicating success/failure per issue
• Revalidate paths for affected issues and machines

6. Create Batch Actions UI Component

Create file:src/components/issues/BatchActionsMenu.tsx:

• Client component accepting selectedIssueIds: string[] and onComplete: () => void
• Use DropdownMenu component for batch action options
• Include sections for: Status, Severity, Priority, Consistency, Assignee
• Each section shows available values as menu items
• Use useActionState or useTransition for optimistic updates
• Display loading states during batch operations
• Show toast notifications for success/failure using sonner
• Disable menu when no issues selected

7. Update IssueRow Component

Modify file:src/components/issues/IssueRow.tsx:

• Add optional selectionMode: boolean prop
• Add optional isSelected: boolean prop
• Add optional onToggleSelect: (issueId: string) => void prop
• Conditionally render checkbox at the start of the row when selectionMode is true
• Update layout to accommodate checkbox without breaking existing design
• Maintain current hover and styling behavior

8. Create Issues List Client Wrapper

Create file:src/components/issues/IssuesListClient.tsx:

• Client component accepting issues array as prop
• Manage selection state with useState<Set<string>>(new Set())
• Manage selection mode with useState<boolean>(false)
• Provide toggleSelectionMode function to enable/disable checkboxes
• Provide toggleIssueSelection function to add/remove from selection
• Provide selectAll and clearSelection functions
• Render selection mode toggle button (e.g., "Select Issues" / "Cancel")
• Show selection count when issues are selected (e.g., "3 issues selected")
• Render BatchActionsMenu when issues are selected
• Map through issues and render IssueRow components with selection props
• Clear selection after batch operations complete

9. Update Issues Page

Modify file:src/app/(app)/issues/page.tsx:

• Keep server component for data fetching
• Replace direct IssueRow mapping with IssuesListClient component
• Pass fetched issues array to client wrapper
• Maintain existing filtering and empty state logic

10. Add Batch Actions Button

Update file:src/components/issues/IssuesListClient.tsx:

• Add a toolbar area above the issues list
• Include "Select Issues" button (outline variant) to toggle selection mode
• When selection mode is active, show:
  • "Cancel" button to exit selection mode
  • Selection count badge (e.g., "3 selected")
  • "Select All" / "Clear Selection" buttons
  • BatchActionsMenu component
• Position toolbar between filters and issues list

11. Handle Permissions

In batch action server actions:

• For each selected issue, fetch issue details with machine owner info
• Use existing canUpdateIssue function from file:src/lib/permissions.ts
• Filter out issues user doesn't have permission to update
• Return clear error messages for permission failures
• Only process issues user has permission to modify

12. Add Loading and Error States

In file:src/components/issues/BatchActionsMenu.tsx:

• Show loading spinner on dropdown trigger during batch operations
• Disable all menu items during processing
• Use toast.promise from sonner for operation feedback
• Display success message with count of updated issues
• Display error message if any issues fail to update
• Provide detailed error information in console for debugging

13. Optimize Batch Operations

In service layer batch functions:

• Use Promise.all for parallel processing where safe
• Wrap all operations in a single transaction for atomicity
• Use inArray from Drizzle ORM for efficient bulk queries
• Limit batch size (e.g., max 50 issues per operation) to prevent timeouts
• Return detailed results array indicating success/failure per issue

14. Add Visual Feedback

In file:src/components/issues/IssueRow.tsx:

• Add visual indicator when row is selected (e.g., background color change)
• Use cn() utility to conditionally apply selection styles
• Ensure selected state is clearly visible but not overwhelming
• Maintain accessibility with proper ARIA attributes

sequenceDiagram
    participant User
    participant IssuesPage
    participant IssuesListClient
    participant IssueRow
    participant BatchActionsMenu
    participant ServerAction
    participant Service
    participant Database

    User->>IssuesPage: Visit /issues
    IssuesPage->>Database: Fetch issues (server)
    Database-->>IssuesPage: Return issues
    IssuesPage->>IssuesListClient: Render with issues
    
    User->>IssuesListClient: Click "Select Issues"
    IssuesListClient->>IssuesListClient: Enable selection mode
    IssuesListClient->>IssueRow: Render with checkboxes
    
    User->>IssueRow: Check multiple issues
    IssueRow->>IssuesListClient: Update selection state
    IssuesListClient->>IssuesListClient: Add to selectedIds Set
    
    User->>BatchActionsMenu: Select batch action
    BatchActionsMenu->>ServerAction: Call batch action (issueIds, newValue)
    ServerAction->>ServerAction: Validate & check permissions
    ServerAction->>Service: Execute batch update
    Service->>Database: Transaction: Update multiple issues
    Database-->>Service: Confirm updates
    Service->>Database: Create timeline events
    Service->>Database: Trigger notifications
    Service-->>ServerAction: Return results
    ServerAction->>ServerAction: Revalidate paths
    ServerAction-->>BatchActionsMenu: Return success/errors
    BatchActionsMenu->>User: Show toast notification
    IssuesListClient->>IssuesListClient: Clear selection
    IssuesPage->>IssuesPage: Re-render with updated data

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

The PinPoint application is a Next.js issue tracking system with a server-rendered issues list (`file:src/app/(app)/issues/page.tsx`) displaying individual `IssueRow` components. The codebase uses Radix UI primitives, server actions for mutations (`file:src/app/(app)/issues/actions.ts`), and a service layer (`file:src/services/issues.ts`) with transaction support. Currently, all issue updates operate on single issues with no batch operation support. The UI follows shadcn/ui patterns with Tailwind CSS styling.

## Approach

The implementation will introduce a client-side selection mode that can be toggled on/off, allowing users to select multiple issues via checkboxes. A batch actions dropdown will provide options to modify properties (status, assignee, severity, priority, consistency) for all selected issues simultaneously. The solution will leverage the existing service layer patterns, extend them with batch operations, create new server actions for batch updates, and maintain the current permission model. The issues page will be converted to a hybrid approach with a client component wrapper managing selection state while preserving server-side data fetching.

## Implementation Steps

### 1. Install Dependencies

Add the Radix UI checkbox primitive to `file:package.json`:
- Install `@radix-ui/react-checkbox` package

### 2. Create Checkbox UI Component

Create `file:src/components/ui/checkbox.tsx`:
- Implement a Radix UI checkbox wrapper following the existing UI component patterns
- Style consistently with other form components using Tailwind classes
- Support checked, indeterminate, and disabled states
- Include proper accessibility attributes

### 3. Extend Service Layer with Batch Operations

Update `file:src/services/issues.ts`:
- Add `batchUpdateIssueStatus` function accepting `issueIds: string[]` and `status: IssueStatus`
- Add `batchUpdateIssueSeverity` function accepting `issueIds: string[]` and `severity: IssueSeverity`
- Add `batchUpdateIssuePriority` function accepting `issueIds: string[]` and `priority: IssuePriority`
- Add `batchUpdateIssueConsistency` function accepting `issueIds: string[]` and `consistency: IssueConsistency`
- Add `batchAssignIssues` function accepting `issueIds: string[]` and `assignedTo: string | null`
- Each function should use database transactions
- Create timeline events for each affected issue
- Trigger notifications appropriately
- Return success/failure results for each issue

### 4. Create Batch Action Schemas

Create or update `file:src/app/(app)/issues/schemas.ts`:
- Add `batchUpdateIssueStatusSchema` with `issueIds: z.array(z.string())` and `status`
- Add `batchUpdateIssueSeveritySchema` with `issueIds` and `severity`
- Add `batchUpdateIssuePrioritySchema` with `issueIds` and `priority`
- Add `batchUpdateIssueConsistencySchema` with `issueIds` and `consistency`
- Add `batchAssignIssuesSchema` with `issueIds` and `assignedTo`

### 5. Create Batch Server Actions

Update `file:src/app/(app)/issues/actions.ts`:
- Add `batchUpdateIssueStatusAction` that validates input, checks permissions for each issue, calls service function
- Add `batchUpdateIssueSeverityAction` following same pattern
- Add `batchUpdateIssuePriorityAction` following same pattern
- Add `batchUpdateIssueConsistencyAction` following same pattern
- Add `batchAssignIssuesAction` following same pattern
- Each action should verify user has permission to update all selected issues
- Return aggregated results indicating success/failure per issue
- Revalidate paths for affected issues and machines

### 6. Create Batch Actions UI Component

Create `file:src/components/issues/BatchActionsMenu.tsx`:
- Client component accepting `selectedIssueIds: string[]` and `onComplete: () => void`
- Use `DropdownMenu` component for batch action options
- Include sections for: Status, Severity, Priority, Consistency, Assignee
- Each section shows available values as menu items
- Use `useActionState` or `useTransition` for optimistic updates
- Display loading states during batch operations
- Show toast notifications for success/failure using `sonner`
- Disable menu when no issues selected

### 7. Update IssueRow Component

Modify `file:src/components/issues/IssueRow.tsx`:
- Add optional `selectionMode: boolean` prop
- Add optional `isSelected: boolean` prop
- Add optional `onToggleSelect: (issueId: string) => void` prop
- Conditionally render checkbox at the start of the row when `selectionMode` is true
- Update layout to accommodate checkbox without breaking existing design
- Maintain current hover and styling behavior

### 8. Create Issues List Client Wrapper

Create `file:src/components/issues/IssuesListClient.tsx`:
- Client component accepting `issues` array as prop
- Manage selection state with `useState<Set<string>>(new Set())`
- Manage selection mode with `useState<boolean>(false)`
- Provide `toggleSelectionMode` function to enable/disable checkboxes
- Provide `toggleIssueSelection` function to add/remove from selection
- Provide `selectAll` and `clearSelection` functions
- Render selection mode toggle button (e.g., "Select Issues" / "Cancel")
- Show selection count when issues are selected (e.g., "3 issues selected")
- Render `BatchActionsMenu` when issues are selected
- Map through issues and render `IssueRow` components with selection props
- Clear selection after batch operations complete

### 9. Update Issues Page

Modify `file:src/app/(app)/issues/page.tsx`:
- Keep server component for data fetching
- Replace direct `IssueRow` mapping with `IssuesListClient` component
- Pass fetched issues array to client wrapper
- Maintain existing filtering and empty state logic

### 10. Add Batch Actions Button

Update `file:src/components/issues/IssuesListClient.tsx`:
- Add a toolbar area above the issues list
- Include "Select Issues" button (outline variant) to toggle selection mode
- When selection mode is active, show:
  - "Cancel" button to exit selection mode
  - Selection count badge (e.g., "3 selected")
  - "Select All" / "Clear Selection" buttons
  - `BatchActionsMenu` component
- Position toolbar between filters and issues list

### 11. Handle Permissions

In batch action server actions:
- For each selected issue, fetch issue details with machine owner info
- Use existing `canUpdateIssue` function from `file:src/lib/permissions.ts`
- Filter out issues user doesn't have permission to update
- Return clear error messages for permission failures
- Only process issues user has permission to modify

### 12. Add Loading and Error States

In `file:src/components/issues/BatchActionsMenu.tsx`:
- Show loading spinner on dropdown trigger during batch operations
- Disable all menu items during processing
- Use `toast.promise` from `sonner` for operation feedback
- Display success message with count of updated issues
- Display error message if any issues fail to update
- Provide detailed error information in console for debugging

### 13. Optimize Batch Operations

In service layer batch functions:
- Use `Promise.all` for parallel processing where safe
- Wrap all operations in a single transaction for atomicity
- Use `inArray` from Drizzle ORM for efficient bulk queries
- Limit batch size (e.g., max 50 issues per operation) to prevent timeouts
- Return detailed results array indicating success/failure per issue

### 14. Add Visual Feedback

In `file:src/components/issues/IssueRow.tsx`:
- Add visual indicator when row is selected (e.g., background color change)
- Use `cn()` utility to conditionally apply selection styles
- Ensure selected state is clearly visible but not overwhelming
- Maintain accessibility with proper ARIA attributes

```mermaid
sequenceDiagram
    participant User
    participant IssuesPage
    participant IssuesListClient
    participant IssueRow
    participant BatchActionsMenu
    participant ServerAction
    participant Service
    participant Database

    User->>IssuesPage: Visit /issues
    IssuesPage->>Database: Fetch issues (server)
    Database-->>IssuesPage: Return issues
    IssuesPage->>IssuesListClient: Render with issues
    
    User->>IssuesListClient: Click "Select Issues"
    IssuesListClient->>IssuesListClient: Enable selection mode
    IssuesListClient->>IssueRow: Render with checkboxes
    
    User->>IssueRow: Check multiple issues
    IssueRow->>IssuesListClient: Update selection state
    IssuesListClient->>IssuesListClient: Add to selectedIds Set
    
    User->>BatchActionsMenu: Select batch action
    BatchActionsMenu->>ServerAction: Call batch action (issueIds, newValue)
    ServerAction->>ServerAction: Validate & check permissions
    ServerAction->>Service: Execute batch update
    Service->>Database: Transaction: Update multiple issues
    Database-->>Service: Confirm updates
    Service->>Database: Create timeline events
    Service->>Database: Trigger notifications
    Service-->>ServerAction: Return results
    ServerAction->>ServerAction: Revalidate paths
    ServerAction-->>BatchActionsMenu: Return success/errors
    BatchActionsMenu->>User: Show toast notification
    IssuesListClient->>IssuesListClient: Clear selection
    IssuesPage->>IssuesPage: Re-render with updated data
```

---

Execution Information

Branch: main
Commit: d9e5bdd

---

💡 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.