# Asset Detail Panel Refactor

## Overview
Refactored the AssetDetailPanel to match the TaskDetailPanel layout with tabs at the top and a cleaner information structure. Also updated the interaction model to use double-click to launch the panel with slide-in/slide-out animations.

## Changes Made

### 0. Interaction Model
- **Double-Click to Open**: Asset detail panel now opens on double-click instead of single click
  - In grid view: Double-click on asset card
  - In list view: Double-click on table row
- **Single Click Selection**: Single click now only selects/deselects the asset
- **Slide Animations**: Panel slides in from the right when opening and slides out when closing
  - Enter animation: 300ms ease-out transition
  - Leave animation: 300ms ease-in transition
  - Uses Vue's Transition component with transform classes

### 1. Layout Structure
- **Header**: Simplified to show only asset name, status badge, and close button
- **Tabs**: Moved to top of panel (below header) with 3 tabs: Infos, Notes, References
- **Content**: Each tab has scrollable content area

### 2. Tab Structure

#### Infos Tab (Default)
Contains all asset information in a clean, organized layout:
- **Asset Name**: Large, prominent display
- **Category & Status**: Side-by-side badges
- **Description**: Full description text
- **Task Progress**: Progress bar showing completion percentage
- **Tasks List**: All tasks with their status and assignee
  - Click on any task to view task details
  - Shows task type, assignee name, and status badge
- **Timestamps**: Created and updated dates

#### Notes Tab
Shows all notes from all tasks associated with this asset:
- **Aggregated Notes**: Combines notes from all asset tasks
- **Task Context**: Each note shows which task it belongs to
- **Task Type Badge**: Visual indicator of the task type
- **Sorted by Date**: Newest notes first
- **Author & Timestamp**: Shows who created the note and when
- **Empty State**: Friendly message when no notes exist

#### References Tab
Shows all reference files (attachments) from all asset tasks:
- **Aggregated References**: Combines attachments from all asset tasks
- **Grid Layout**: 2-column responsive grid
- **Image Preview**: Shows thumbnail for image files
- **File Icon**: Generic icon for non-image files
- **Task Context**: Each reference shows which task it belongs to
- **Task Type Badge**: Visual indicator of the task type
- **Download Button**: Quick download action
- **File Info**: Name, task, and upload date
- **Empty State**: Friendly message when no references exist

### 3. New Components Created

#### AssetNotes.vue
- Displays aggregated notes from all asset tasks
- Shows task context (task name and type) for each note
- Sorted by date (newest first)
- Matches TaskNotes.vue layout style

#### AssetReferences.vue
- Displays aggregated reference files from all asset tasks
- Grid layout with image previews
- Shows task context for each reference
- Download functionality
- Matches TaskAttachments.vue layout style

### 4. Data Loading
- **Tasks**: Loaded when asset details are fetched
- **Notes**: Loaded after tasks are available, aggregated from all tasks
- **References**: Loaded after tasks are available, aggregated from all tasks
- **Watchers**: Automatically reload notes and references when tasks change

### 5. Removed Features
- Removed "Versions" tab (not implemented in backend)
- Removed separate "Add Task" button (tasks shown in Infos tab)
- Removed inline task creation UI
- Simplified header to match TaskDetailPanel

## Benefits

1. **Consistent UX**: Matches TaskDetailPanel layout for familiar user experience
2. **Better Organization**: Information is logically grouped in tabs
3. **Cleaner Header**: Less cluttered, more focused
4. **Aggregated Data**: Notes and references from all tasks in one place
5. **Task Context**: Easy to see which task each note/reference belongs to
6. **Responsive**: Works well on different screen sizes
7. **Scrollable Content**: Each tab has independent scrolling

## Technical Details

### Props
- `projectId: number` - The project ID
- `assetId: number` - The asset ID to display

### Emits
- `close` - Close the detail panel
- `select-task` - Navigate to task detail (when clicking a task)

### Data Structure
```typescript
interface Note {
  id: number
  content: string
  author_name: string
  created_at: string
  task_name: string      // Added for context
  task_type: string      // Added for context
}

interface Reference {
  id: number
  file_name: string
  file_path: string
  created_at: string
  task_name: string      // Added for context
  task_type: string      // Added for context
}
```

## Animation Details

### Slide-In Animation
- **Duration**: 300ms
- **Easing**: ease-out
- **Transform**: Slides from right (translate-x-full) to position (translate-x-0)
- **Trigger**: Double-click on asset card or table row

### Slide-Out Animation
- **Duration**: 300ms
- **Easing**: ease-in
- **Transform**: Slides from position (translate-x-0) to right (translate-x-full)
- **Trigger**: Click close button in panel header

### Implementation
```vue
<Transition
  enter-active-class="transition-transform duration-300 ease-out"
  enter-from-class="translate-x-full"
  enter-to-class="translate-x-0"
  leave-active-class="transition-transform duration-300 ease-in"
  leave-from-class="translate-x-0"
  leave-to-class="translate-x-full"
>
  <div v-if="selectedAsset && isDetailPanelVisible" class="fixed right-0 ...">
    <AssetDetailPanel ... />
  </div>
</Transition>
```

## User Interaction Changes

### Before
- Single click on asset card/row → Opens detail panel
- No animations

### After
- Single click on asset card/row → Selects/deselects asset
- Double-click on asset card/row → Opens detail panel with slide-in animation
- Close button → Closes panel with slide-out animation
- Supports multi-select with Ctrl/Cmd + click
- Supports range select with Shift + click

## Future Enhancements

1. **Asset-Level Notes**: Add ability to create notes directly on the asset (not just task notes)
2. **Asset-Level References**: Add ability to upload references directly to the asset
3. **Filtering**: Add filters for notes and references by task type
4. **Search**: Add search functionality for notes content
5. **Versions Tab**: Implement version tracking when backend support is added
6. **Edit Asset**: Add inline editing capabilities
7. **Task Creation**: Add quick task creation from the Infos tab
8. **Keyboard Shortcuts**: Add Enter key to open detail panel for selected asset
9. **Animation Preferences**: Allow users to disable animations in settings