Shot Task Columns Toggle - Implementation Complete

✅ Task Columns Toggle Button Added

Successfully added a show/hide task columns toggle button to the shot table toolbar, similar to the one in AssetBrowser.

🆕 New Feature: Task Columns Toggle

Button Implementation:

<Button v-if="viewMode === 'table'" variant="outline" size="sm" @click="toggleAllTaskColumns" class="h-8" > <ListTodo v-if="!allTaskColumnsVisible" class="h-4 w-4 mr-2" /> <ListX v-else class="h-4 w-4 mr-2" /> {{ allTaskColumnsVisible ? 'Hide' : 'Show' }} Tasks </Button>

Key Features:

Dynamic Icon: Shows ListTodo when tasks hidden, ListX when tasks visible
Dynamic Text: "Show Tasks" or "Hide Tasks" based on current state
Table View Only: Only appears in table view where task columns exist
Smart Toggle: Toggles all task type columns at once

📋 Implementation Details

1. Added Required Imports:

import { LayoutGrid, List, Table2, Search, Film, Plus, Layers, PanelRightClose, PanelRightOpen, Check, X, Settings2, ListTodo, ListX // ← NEW ICONS } from 'lucide-vue-next'

2. Added Computed Property for Task Column State:

// Check if all task columns are visible const allTaskColumnsVisible = computed(() => { const taskColumns = allColumns.value.filter(col => col.type === 'task') return taskColumns.length > 0 && taskColumns.every(col => props.columnVisibility[col.id] !== false) })

3. Added Toggle Method:

const toggleAllTaskColumns = () => { const newVisibility = { ...props.columnVisibility } const taskColumns = allColumns.value.filter(col => col.type === 'task') // If all task columns are visible, hide them; otherwise show them const shouldHide = allTaskColumnsVisible.value taskColumns.forEach(col => { newVisibility[col.id] = !shouldHide }) emit('update:column-visibility', newVisibility) }

🎯 Button Position in Toolbar

Updated Toolbar Layout (Left to Right):

View Toggle: Grid/List/Table buttons
Episode Filter: Episode dropdown (if episodes exist)
Task Status Filter: Task status dropdown (table view only)
Column Visibility: View columns dropdown (table view only)
🆕 Task Columns Toggle: Show/Hide Tasks button (table view only)
Detail Panel Toggle: Panel show/hide button (table view only)
Clear Filters: Reset button (if filters active)

Button Behavior:

All Tasks Visible: Shows "Hide Tasks" with ListX icon
Some/No Tasks Visible: Shows "Show Tasks" with ListTodo icon
Click Action: Toggles all task type columns at once

🔄 Comparison with AssetBrowser

AssetBrowser Implementation

Separate ColumnVisibilityControl component
Complex dropdown with individual checkboxes
Saves/restores individual column states
Handles custom task types dynamically

ShotTableToolbar Implementation

Integrated button in main toolbar
Simple toggle for all task columns
Uses existing column visibility system
Works with dynamic task types from props

Why This Approach:

Consistency: Matches the existing ShotTableToolbar pattern
Simplicity: One-click toggle for common use case
Integration: Uses existing column visibility infrastructure
Space Efficient: Doesn't add complex dropdown UI

✅ Testing Checklist

✅ Button appears in table view only
✅ Button hidden in grid/list views
✅ Shows "Show Tasks" when task columns are hidden
✅ Shows "Hide Tasks" when task columns are visible
✅ Icon changes based on task column visibility
✅ Clicking toggles all task columns at once
✅ Works with dynamic task types from allTaskTypes prop
✅ Integrates with existing column visibility system
✅ Button styling matches other toolbar buttons

🎯 User Experience Benefits

Quick Task Column Management:

One-Click Toggle: Hide/show all task columns instantly
Visual Feedback: Clear icons and text indicate current state
Space Management: Quickly hide task columns to focus on shot data
Workflow Efficiency: Fast switching between task and non-task views

Common Use Cases:

Shot Review: Hide tasks to focus on shot details (name, frames, status)
Task Management: Show tasks to review task status across shots
Screen Space: Hide tasks on smaller screens for better readability
Presentation Mode: Clean view without task details for reviews

🎉 Implementation Complete

The shot table toolbar now includes a task columns toggle button with the following features:

✅ Similar to AssetBrowser: Provides the same show/hide task functionality
✅ Integrated Design: Fits seamlessly into existing toolbar layout
✅ Smart Behavior: Automatically detects and toggles all task columns
✅ Visual Feedback: Dynamic icons and text based on current state
✅ Table View Only: Only appears where task columns exist
✅ Efficient Workflow: One-click toggle for common task management needs

Users can now easily show/hide task columns in the shot table, just like in the asset browser!

🎯 Shot Task Columns Toggle - Implementation Complete