🎯 Shot Table Detail Panel Toggle - Complete Implementation

✅ All Changes Successfully Implemented

The shot data table has been completely updated to remove all row click events that show the detail panel. Only the icon button in the toolbar now controls panel visibility.

📋 Complete Changes Summary

1. ShotsDataTable.vue - Removed All Row Click Events

❌ BEFORE:
@click="handleRowClick(row.original, $event)" @dblclick="handleRowDoubleClick(row.original)" class="cursor-pointer hover:bg-muted/50" // Emits 'row-click': [shot: Shot, event: MouseEvent] 'row-double-click': [shot: Shot] // Functions const handleRowClick = (shot: Shot, event: MouseEvent) => { ... } const handleRowDoubleClick = (shot: Shot) => { ... }
✅ AFTER:
// NO click events on table rows class="hover:bg-muted/50" // Emits 'update:sorting': [sorting: SortingState] 'update:columnVisibility': [visibility: VisibilityState] 'selection-cleared': [] // NO row click functions

2. ShotBrowser.vue - Removed Row Event Handlers

❌ BEFORE:
@row-click="handleRowClick" @row-double-click="handleRowDoubleClick" const handleRowClick = (shot: Shot, event: MouseEvent) => { selectedShot.value = shot } const handleRowDoubleClick = (shot: Shot) => { selectShot(shot) }
✅ AFTER:
// NO row event handlers in ShotsDataTable usage // NO handleRowClick function // NO handleRowDoubleClick function

3. ShotTableToolbar.vue - Icon-Only Toggle Button

❌ BEFORE:
<Button class="h-8" :disabled="!selectedShot" > <PanelRightClose class="h-4 w-4 mr-2" /> {{ isDetailPanelVisible ? 'Hide' : 'Show' }} Details </Button>
✅ AFTER:
<Button class="h-8 w-8 p-0" :disabled="!selectedShot" :title="isDetailPanelVisible ? 'Hide Details Panel' : 'Show Details Panel'" > <PanelRightClose v-if="isDetailPanelVisible" class="h-4 w-4" /> <PanelRightOpen v-else class="h-4 w-4" /> </Button>

4. columns.ts - Cleaned Up Unused Code

❌ BEFORE:
import { ..., ListTodo, ... } from 'lucide-vue-next' export interface ShotColumnMeta { onViewTasks: (shot: Shot) => void // ... other props } // "View Tasks" menu item in actions dropdown
✅ AFTER:
// Removed unused ListTodo import export interface ShotColumnMeta { // Removed onViewTasks callback // ... other props } // No "View Tasks" menu item

🎯 New User Interaction Flow

  1. Row Interaction:
    • Single click: No action (no shot selection)
    • Double click: No action (completely removed)
    • Hover: Visual feedback only
  2. Shot Selection:
    • Only through actions dropdown menu (Edit/Delete)
    • Or programmatically via other components
  3. Detail Panel Control:
    • Only via toolbar icon button
    • Button disabled when no shot selected
    • Icon changes based on panel state
    • Tooltip for accessibility

🔧 Technical Implementation Details

Event Propagation Handling

All interactive elements within table cells (checkboxes, dropdowns, task status components) properly use e.stopPropagation() to prevent any unintended row interactions.

Button States

Clean Architecture

✅ Testing Checklist

🎉 Implementation Complete

All requested changes have been successfully implemented:

The shot table now provides a clean, predictable user experience where: