LinkDesk/openspec/changes/add-shot-data-table-column-display-switch-to-sidebar/tasks.md

1. Create Column Visibility Store

• 1.1 Create Pinia store useColumnVisibilityStore in frontend/src/stores/
• 1.2 Add localStorage persistence for column visibility state
• 1.3 Define default column visibility (Thumbnail, Shot Name, Episode, Status visible; task types hidden)
• 1.4 Add getter methods for checking column visibility
• 1.5 Add action methods for toggling column visibility

2. Create Sidebar Column Switch Component

• 2.1 Create new component SidebarColumnSwitch.vue in frontend/src/components/ui/sidebar/
• 2.2 Implement column visibility toggle UI (checkboxes or switches)
• 2.3 Integrate with useColumnVisibilityStore
• 2.4 Style component for sidebar context (compact, collapsible)

3. Integrate Component into Sidebar

• 3.1 Import SidebarColumnSwitch into AppSidebar.vue
• 3.2 Add new SidebarGroup for "View Settings" in AppSidebar.vue
• 3.3 Place SidebarColumnSwitch inside the new group
• 3.4 Test visibility when sidebar is collapsed

4. Update Existing Shot Column Control

• 4.1 Modify ShotColumnVisibilityControl.vue to use useColumnVisibilityStore
• 4.2 Remove local state management from Shot page column control
• 4.3 Ensure changes in Shot page reflect in Sidebar and vice versa

5. Testing and Verification

• 5.1 Test column toggle from Sidebar updates Shot table
• 5.2 Test column toggle from Shot page updates Sidebar control
• 5.3 Test persistence - preferences survive page refresh
• 5.4 Test default visibility for new users
• 5.5 Test behavior when sidebar is collapsed/expanded

6. Edge Cases

• 6.1 Handle case when no project is selected
• 6.2 Handle case when task types list is empty
• 6.3 Test responsiveness on mobile (sidebar behavior)