popiart-node-canvas/.planning/phases/16-store-modularization/16-01-PLAN.md

phase	plan	type
16-store-modularization	1	execute

Extract localStorage helpers and configuration utilities from workflowStore.ts into dedicated modules.

Purpose: Begin store modularization by extracting pure utility functions that don't depend on Zustand state, making them easier to test and reducing the main store file size. Output: New utility modules for localStorage operations and default node data creation, with workflowStore.ts importing from these modules.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/15-test-infrastructure/15-01-SUMMARY.md @src/store/workflowStore.ts

From Phase 15 Summary:

• Vitest and React Testing Library configured
• Zustand store mocking patterns established
• Test infrastructure ready for validating refactored modules

Current Store Analysis (2786 lines): The workflowStore.ts contains several pure utility functions at the top that don't depend on Zustand state:

• localStorage helpers for workflow configs (~40 lines)
• localStorage helpers for cost tracking (~40 lines)
• localStorage helpers for GenerateImage defaults (~40 lines)
• localStorage helpers for provider settings (~50 lines)
• createDefaultNodeData function (~90 lines)
• GROUP_COLORS and GROUP_COLOR_ORDER constants (~15 lines)
• generateWorkflowId utility (~3 lines)

Task 1: Create store utilities module src/store/utils/localStorage.ts Extract all localStorage helpers into a new module: 1. Create src/store/utils/localStorage.ts 2. Move these functions/constants: - STORAGE_KEY constant - COST_DATA_STORAGE_KEY constant - GENERATE_IMAGE_DEFAULTS_KEY constant - PROVIDER_SETTINGS_KEY constant - loadSaveConfigs() - saveSaveConfig() - loadWorkflowCostData() - saveWorkflowCostData() - loadGenerateImageDefaults() (rename from loadNanoBananaDefaults) - saveGenerateImageDefaults() (existing export, keep as-is) - getProviderSettings() - saveProviderSettings() - defaultProviderSettings constant - GenerateImageDefaults interface 3. Export all functions and types 4. Keep backward-compatible aliases (NanoBananaDefaults, saveNanoBananaDefaults) in workflowStore.ts but have them re-export from the new module

Note: These functions use localStorage directly and don't depend on Zustand state, making them safe to extract. npm run build succeeds with no TypeScript errors All localStorage helpers extracted, workflowStore.ts imports from new module, build passes

Task 2: Create node defaults module src/store/utils/nodeDefaults.ts Extract node creation utilities: 1. Create src/store/utils/nodeDefaults.ts 2. Move these items: - createDefaultNodeData() function (~90 lines) - defaultDimensions record (duplicated in addNode and createGroup - consolidate) - GROUP_COLORS record - GROUP_COLOR_ORDER array - GroupColor type import from @/types 3. The createDefaultNodeData function calls loadGenerateImageDefaults() - update import to use new localStorage module 4. Export createDefaultNodeData, defaultNodeDimensions, GROUP_COLORS, GROUP_COLOR_ORDER 5. Update workflowStore.ts to import these from the new module npm run build succeeds, npm test passes all 112+ tests Node defaults extracted, GROUP_COLORS exported from new location, all imports updated, tests pass Task 3: Add unit tests for extracted modules src/store/utils/__tests__/localStorage.test.ts, src/store/utils/__tests__/nodeDefaults.test.ts Create tests for the extracted modules: 1. Create src/store/utils/__tests__/localStorage.test.ts: - Test loadSaveConfigs returns empty object when localStorage empty - Test saveSaveConfig stores and retrieves config - Test loadWorkflowCostData handles missing data - Test loadGenerateImageDefaults returns defaults when localStorage empty - Test getProviderSettings merges with defaults for new providers - Mock localStorage using vi.stubGlobal or in-memory implementation

2. Create src/store/utils/tests/nodeDefaults.test.ts:
   • Test createDefaultNodeData for each node type returns correct structure
   • Test defaultNodeDimensions has all expected node types
   • Test GROUP_COLORS has expected color keys
   • Mock localStorage for createDefaultNodeData's loadGenerateImageDefaults call npm test passes with new tests included, coverage for new modules Unit tests added for both modules, all tests pass including new ones

Before declaring plan complete: - [ ] `npm run build` succeeds without errors - [ ] `npm test` passes all tests (existing + new) - [ ] workflowStore.ts is reduced by ~280 lines - [ ] New modules are properly typed with exports - [ ] Backward compatibility maintained (saveNanoBananaDefaults still works)

<success_criteria>

• All tasks completed
• All verification checks pass
• No TypeScript errors
• workflowStore.ts imports from new utility modules
• New modules have test coverage </success_criteria>

After completion, create `.planning/phases/16-store-modularization/16-01-SUMMARY.md`