Migrate tree sort order from localStorage to Redux Toolkit

[Copilot]

The useTreeSortOrder hook was using localStorage directly while the rest of the application uses Redux Toolkit with redux-persist for state management. This migration standardizes state persistence and enables better debugging through Redux DevTools.

Challenge

Sort orders must persist across projects (not reset on ProjectActions.changeProject), unlike most Redux slices in the codebase which reset their state when switching projects.

Changes

New global Redux slice (treeSortOrderSlice.ts)

• Stores sort orders keyed by {projectId}-{storageKey} for multi-project isolation
• Explicitly omits ProjectActions.changeProject handler to preserve state across project switches
• Uses redux-persist with localStorage as storage engine

Updated hook (useTreeSortOrder.ts)

• Replaced localStorage calls with Redux useAppSelector and dispatch
• Maintains identical API - no component changes required

// Hook API unchanged - backward compatible
const { sortOrder, updateSortOrder } = useTreeSortOrder(
  "code-sort-order",
  projectId,
  allItemIds
);

Store integration (store.ts)

• Added treeSortOrder reducer to persisted reducers section

Migration Impact

Existing users will lose their current sort orders once (stored under old localStorage keys). Sort orders can be quickly re-created via drag-and-drop.

Pattern Established

This creates a reusable pattern for global cross-project state:

1. Omit ProjectActions.changeProject from extraReducers
2. Use composite keys: {projectId}-{key}
3. Persist via redux-persist

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.