LinkDesk/frontend/docs/shot-detail-tabs-implementation.md

Shot Detail Panel - Tabbed Interface Implementation

Overview

Enhanced the Shot Detail Panel with a tabbed interface to better organize shot information across five distinct categories: Notes, Tasks, Assets, References, and Design.

Implementation Date

November 16, 2025

Changes Made

1. Component Structure

File: frontend/src/components/shot/ShotDetailPanel.vue

Added shadcn-vue Tabs component to organize content into five tabs:

• Notes: Production notes and comments
• Tasks: Task list and management (existing functionality)
• Assets: Linked assets used in the shot
• References: Reference files (images, videos, documents)
• Design: Design information (camera, lighting, animation notes)

2. New Imports

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { MessageSquare, Package, Image } from 'lucide-vue-next'

3. New Event Emitters

Added four new event emitters for tab-specific actions:

interface Emits {
  (e: 'create-note'): void
  (e: 'link-asset'): void
  (e: 'upload-reference'): void
  (e: 'edit-design'): void
}

4. Permission Computed Properties

Added role-based permission checks for each tab action:

const canCreateNote = computed(() => {
  return authStore.user?.role === 'coordinator' || authStore.user?.is_admin
})

const canLinkAssets = computed(() => {
  return authStore.user?.role === 'coordinator' || authStore.user?.is_admin
})

const canUploadReferences = computed(() => {
  return true // All users can upload references
})

const canEditDesign = computed(() => {
  return authStore.user?.role === 'coordinator' || authStore.user?.is_admin
})

5. Bug Fix

Fixed incorrect method call:

• Before: shotService.getShot(props.projectId, props.shotId)
• After: shotService.getShot(props.shotId)

Tab Details

Notes Tab

• Purpose: Production notes and comments about the shot
• Actions: "Add Note" button (coordinators/admins only)
• Empty State: Helpful message encouraging users to add notes
• Icon: MessageSquare
• Status: UI complete, backend integration pending

Tasks Tab

• Purpose: List and manage tasks for the shot
• Actions: "Add Task" button (coordinators/admins only)
• Features:
  • Task status badges
  • Assignment information
  • Click to open task detail
  • Loading and empty states
• Status: Fully functional

Assets Tab

• Purpose: Link and display assets used in the shot
• Actions: "Link Asset" button (coordinators/admins only)
• Empty State: Helpful message about linking assets
• Icon: Package
• Status: UI complete, backend integration pending

References Tab

• Purpose: Upload and display reference files
• Actions: "Upload Reference" button (all users)
• Empty State: Helpful message about uploading references
• Icon: Image
• Status: UI complete, backend integration pending

Design Tab

• Purpose: Design information and notes
• Sections:
  • Camera notes
  • Lighting notes
  • Animation notes
• Actions: "Edit Design" button (coordinators/admins only)
• Status: UI complete, backend integration pending

User Experience

Layout

1. Shot header with name, frame range, and actions
2. Status badge
3. Shot information (description, dates)
4. Progress overview (above tabs)
5. Tabbed content area

Navigation

• Tabs are horizontally arranged below the progress overview
• Default tab: "Tasks"
• Smooth tab switching
• Each tab maintains its own state

Permissions

Action	Coordinators	Admins	Artists
Add Note	✓	✓	✗
Add Task	✓	✓	✗
Link Asset	✓	✓	✗
Upload Reference	✓	✓	✓
Edit Design	✓	✓	✗

Testing

Manual Testing Steps

1. Start frontend: npm run dev
2. Navigate to a project's shots view
3. Click on any shot to open the detail panel
4. Verify all 5 tabs are visible
5. Click each tab to verify content displays
6. Check that action buttons appear based on user role
7. Verify the Tasks tab shows existing tasks
8. Test tab switching performance

Test File

Created frontend/test-shot-detail-tabs.html for visual documentation and testing reference.

Next Steps

Backend Integration Required

1. Notes Tab:

   • Create ProductionNote model (if not exists)
   • Add API endpoints for notes CRUD
   • Implement notes display and creation

2. Assets Tab:

   • Create shot-asset relationship model
   • Add API endpoints for linking/unlinking assets
   • Implement asset display and linking UI

3. References Tab:

   • Create ReferenceFile model
   • Add file upload endpoints
   • Implement file gallery display
   • Add file type validation

4. Design Tab:

   • Add design fields to Shot model
   • Create API endpoints for design updates
   • Implement design editing form

Frontend Enhancements

1. Add real-time updates for notes
2. Implement drag-and-drop for reference uploads
3. Add image preview/lightbox for references
4. Add rich text editor for design notes
5. Implement asset search/filter for linking

Related Files

• Component: frontend/src/components/shot/ShotDetailPanel.vue
• Service: frontend/src/services/shot.ts
• Test: frontend/test-shot-detail-tabs.html
• Documentation: frontend/docs/shot-detail-tabs-implementation.md

Dependencies

• shadcn-vue Tabs component
• lucide-vue-next icons (MessageSquare, Package, Image)
• Existing auth and shot services

Breaking Changes

None. This is a backward-compatible enhancement.

Performance Considerations

• Tabs use lazy loading (content only renders when tab is active)
• Task loading is optimized with existing caching
• Empty states prevent unnecessary API calls

Accessibility

• Keyboard navigation supported via Tabs component
• ARIA labels provided by shadcn-vue
• Focus management handled automatically
• Screen reader friendly

Browser Compatibility

Tested and compatible with:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

Notes

• The Tasks tab retains all existing functionality
• Progress overview remains visible above all tabs
• Empty states encourage user engagement
• Permission checks prevent unauthorized actions