## 1. Create Column Visibility Store - [x] 1.1 Create Pinia store `useColumnVisibilityStore` in `frontend/src/stores/` - [x] 1.2 Add localStorage persistence for column visibility state - [x] 1.3 Define default column visibility (Thumbnail, Shot Name, Episode, Status visible; task types hidden) - [x] 1.4 Add getter methods for checking column visibility - [x] 1.5 Add action methods for toggling column visibility ## 2. Create Sidebar Column Switch Component - [x] 2.1 Create new component `SidebarColumnSwitch.vue` in `frontend/src/components/ui/sidebar/` - [x] 2.2 Implement column visibility toggle UI (checkboxes or switches) - [x] 2.3 Integrate with `useColumnVisibilityStore` - [x] 2.4 Style component for sidebar context (compact, collapsible) ## 3. Integrate Component into Sidebar - [x] 3.1 Import `SidebarColumnSwitch` into `AppSidebar.vue` - [x] 3.2 Add new `SidebarGroup` for "View Settings" in `AppSidebar.vue` - [x] 3.3 Place `SidebarColumnSwitch` inside the new group - [ ] 3.4 Test visibility when sidebar is collapsed ## 4. Update Existing Shot Column Control - [x] 4.1 Modify `ShotColumnVisibilityControl.vue` to use `useColumnVisibilityStore` - [x] 4.2 Remove local state management from Shot page column control - [x] 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)