# Task Bulk Status Popover Auto-Close Fix

## Issue
When changing task status from bulk selected rows, the popover dropdown remained open after selecting a status, requiring manual dismissal.

## Solution
Added controlled state management to the Popover component in the task columns definition:

### Changes Made

**File: `frontend/src/components/task/columns.ts`**

1. **Import ref from Vue**
   - Added `ref` to the Vue imports to enable reactive state management

2. **Restructured createColumns function**
   - Changed from arrow function returning array to function with explicit return
   - This allows creating the ref outside column definitions

3. **Added Popover State Control**
   - Created `isPopoverOpen` ref outside column definitions (persists across renders)
   - Bound the ref to Popover's `open` prop and `onUpdate:open` event
   - Set `isPopoverOpen.value = false` after calling `onBulkStatusChange`

### Implementation Details

```typescript
export const createColumns = (callbacks?: ColumnCallbacks): ColumnDef<Task>[] => {
  // Create ref outside column definitions so it persists across renders
  const isPopoverOpen = ref(false)
  
  return [
    // ... column definitions
    {
      accessorKey: 'status',
      header: ({ column }) => {
        const selectedCount = callbacks?.getSelectedCount?.() || 0
        
        if (selectedCount > 0) {
          return h('div', { class: 'flex items-center gap-2' }, [
            // ... sort button
            h(Popover, {
              open: isPopoverOpen.value,
              'onUpdate:open': (value: boolean) => { isPopoverOpen.value = value }
            }, {
              // ... popover content with status buttons
              onClick: () => {
                callbacks?.onBulkStatusChange?.(status)
                isPopoverOpen.value = false  // Close popover after status change
              }
            })
          ])
        }
      }
    }
  ]
}
```

**Key Point:** The ref must be created outside the column definitions to persist across renders. Creating it inside the `header` function would cause it to reset on every render, preventing the popover from opening.

## User Experience Improvement

- Popover now automatically closes after selecting a status
- Cleaner workflow - no need to click outside or press ESC
- Consistent with standard dropdown behavior
- Immediate visual feedback that the action was completed

## Testing

1. Select multiple tasks using checkboxes
2. Click the dropdown button in the status column header
3. Select any status from the popover
4. Verify the popover closes automatically
5. Verify the status updates are applied to all selected tasks