✅ Issue Fixed Successfully
Problem: The detail panel toggle button was always disabled because there was no way to select shots in table view.
Solution: Added row click functionality to select shots without opening the detail panel.
🔧 Implementation Details
1. Added Row Click Handler to ShotsDataTable.vue
// Added click event to table rows:
<TableRow
v-for="row in table.getRowModel().rows"
:key="row.id"
:data-state="row.getIsSelected() ? 'selected' : undefined"
class="cursor-pointer hover:bg-muted/50"
:class="{ 'bg-muted/30': row.getIsSelected() }"
@click="handleRowClick(row.original, $event)"
>
// Added emit for row-click:
const emit = defineEmits<{
'update:sorting': [sorting: SortingState]
'update:columnVisibility': [visibility: VisibilityState]
'row-click': [shot: Shot, event: MouseEvent] // ← NEW
'selection-cleared': []
}>()
// Added comprehensive click handler with event filtering:
const handleRowClick = (shot: Shot, event: MouseEvent) => {
// Prevents clicks on interactive elements (buttons, dropdowns, etc.)
// Only emits row-click for actual row clicks
// ... (comprehensive event filtering logic)
emit('row-click', shot, event)
}
2. Connected Row Click to Shot Selection in ShotBrowser.vue
// Added row-click handler to ShotsDataTable usage:
<ShotsDataTable
v-else-if="viewMode === 'table'"
:columns="shotColumns"
:data="filteredShots"
:sorting="sorting"
:column-visibility="columnVisibility"
:all-task-types="allTaskTypes"
@update:sorting="sorting = $event"
@update:column-visibility="handleColumnVisibilityChange"
@row-click="handleRowClick" // ← NEW
/>
// Added handleRowClick function:
const handleRowClick = (shot: Shot, event: MouseEvent) => {
// Don't handle row clicks if any dialog is open
if (showDeleteDialog.value || showCreateDialog.value || showBulkCreateDialog.value || showEditDialog.value) {
return
}
// Single click selects the shot but doesn't open detail panel
// This enables the toggle button so users can control panel visibility
selectedShot.value = shot
}