# Task Detail Panel Tabs Refactor

## Overview
Restructured the TaskDetailPanel component to match the ShotDetailPanel layout with a tabbed interface.

## Changes Made

### 1. Header Simplification
- **Before**: Header showed "Task Details" title with task name and description in the content area
- **After**: Header shows task name and status badge, with close button on the right
- Task description moved to the Infos tab content

### 2. Tab Layout
- **Before**: Nested tabs for Notes/Attachments/Submissions at the bottom of a scrolling content area
- **After**: Top-level tabs (Infos | Notes | Attachments | Submissions) similar to ShotDetailPanel
- Tabs are positioned at the top with rounded-none and border-b styling
- Each tab shows badge counts for Notes, Attachments, and Submissions

### 3. Infos Tab Content
The Infos tab now contains all task information in organized sections:

- **Description**: Task description (if available)
- **Quick Actions**: Start Task, Submit Work, Reassign buttons
- **Status**: Status dropdown selector
- **Task Information**: 
  - Type (with badge)
  - Deadline (with calendar icon and color coding)
  - Assigned user (with avatar)
  - Created/Updated timestamps
- **Context**: Project, Episode, Shot, Asset information

### 4. Other Tabs
- **Notes Tab**: Full-page TaskNotes component
- **Attachments Tab**: Full-page TaskAttachments component
- **Submissions Tab**: Full-page TaskSubmissions component

## Visual Structure

```
┌─────────────────────────────────────────┐
│ [Task Name] [Status Badge]         [X] │ ← Header
├─────────────────────────────────────────┤
│ Infos | Notes (2) | Attachments | Sub. │ ← Tabs
├─────────────────────────────────────────┤
│                                         │
│  Tab Content (scrollable)               │
│                                         │
│  - Description                          │
│  - Quick Actions                        │
│  - Status                               │
│  - Task Information                     │
│  - Context                              │
│                                         │
└─────────────────────────────────────────┘
```

## Benefits

1. **Consistency**: Matches ShotDetailPanel design pattern
2. **Better Organization**: Information is grouped logically in sections
3. **Improved UX**: Tabs are always visible at the top, making navigation easier
4. **Cleaner Header**: Simplified header focuses on task identity
5. **More Space**: Each tab gets full panel space for its content

## Technical Details

- Removed `Separator` component (no longer needed with tab layout)
- Added `Label` component for form labels
- Fixed TypeScript errors related to avatar properties
- Maintained all existing functionality (status updates, assignments, quick actions)
- Preserved loading and error states

## Files Modified

- `frontend/src/components/task/TaskDetailPanel.vue`