Add function for sidebar shot column switch

2026-03-07 09:33:44 +08:00
parent 1f229bff6c
commit 19bc4e8a23
17 changed files with 632 additions and 26 deletions
@@ -0,0 +1,41 @@
+## 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)