refactor(store): Extract UI slice from app-store.ts #710
Conversation
- Extract UI-related state and actions into store/slices/ui-slice.ts - Add UISliceState and UISliceActions interfaces to store/types/ui-types.ts - First implementation of Zustand slice pattern in the codebase - Fix pre-existing bug: fontSans/fontMono -> fontFamilySans/fontFamilyMono - Maintain backward compatibility through re-exports Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Summary of ChangesHello @Shironex, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request refactors the application's state management by extracting all user interface-specific state and actions into a new, modular Zustand slice. This change improves the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📝 WalkthroughWalkthroughExtracts all UI-related state and actions into a new Zustand UI slice (UISlice) and integrates it into the root app store by spreading Changes
Sequence Diagram(s)sequenceDiagram
participant AppInit as App Init
participant RootStore as useAppStore (root)
participant UISlice as createUISlice
participant Storage as LocalStorage
AppInit->>RootStore: call create<AppState & AppActions>((set,get,store) => ...)
RootStore->>UISlice: call createUISlice(set,get,store)
UISlice-->>RootStore: returns UI state & actions (merged into root)
Note right of UISlice: UI actions call persistence helpers
UISlice->>Storage: saveTheme / saveFont... (on action)
AppInit->>RootStore: components use store selectors/actions
RootStore->>UISlice: routed UI action calls delegate to slice handlers
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This is an excellent pull request that significantly improves the structure and maintainability of the application's state management by introducing the Zustand slice pattern for UI state. The refactoring is clean, well-documented, and successfully isolates UI-related concerns into a dedicated slice. The inclusion of a bug fix for font property names is also a great addition. I've added a couple of suggestions to further enhance code clarity and reduce duplication, but overall, this is a very solid contribution.
| setBoardBackground: (projectPath: string, imagePath: string | null) => | ||
| set((state) => ({ | ||
| boardBackgroundByProject: { | ||
| ...state.boardBackgroundByProject, | ||
| [projectPath]: { | ||
| ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings), | ||
| imagePath, | ||
| imageVersion: Date.now(), // Bust cache on image change | ||
| }, | ||
| }, | ||
| })), | ||
|
|
||
| setCardOpacity: (projectPath: string, opacity: number) => | ||
| set((state) => ({ | ||
| boardBackgroundByProject: { | ||
| ...state.boardBackgroundByProject, | ||
| [projectPath]: { | ||
| ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings), | ||
| cardOpacity: opacity, | ||
| }, | ||
| }, | ||
| })), | ||
|
|
||
| setColumnOpacity: (projectPath: string, opacity: number) => | ||
| set((state) => ({ | ||
| boardBackgroundByProject: { | ||
| ...state.boardBackgroundByProject, | ||
| [projectPath]: { | ||
| ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings), | ||
| columnOpacity: opacity, | ||
| }, | ||
| }, | ||
| })), | ||
|
|
||
| setColumnBorderEnabled: (projectPath: string, enabled: boolean) => | ||
| set((state) => ({ | ||
| boardBackgroundByProject: { | ||
| ...state.boardBackgroundByProject, | ||
| [projectPath]: { | ||
| ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings), | ||
| columnBorderEnabled: enabled, | ||
| }, | ||
| }, | ||
| })), | ||
|
|
||
| setCardGlassmorphism: (projectPath: string, enabled: boolean) => | ||
| set((state) => ({ | ||
| boardBackgroundByProject: { | ||
| ...state.boardBackgroundByProject, | ||
| [projectPath]: { | ||
| ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings), | ||
| cardGlassmorphism: enabled, | ||
| }, | ||
| }, | ||
| })), | ||
|
|
||
| setCardBorderEnabled: (projectPath: string, enabled: boolean) => | ||
| set((state) => ({ | ||
| boardBackgroundByProject: { | ||
| ...state.boardBackgroundByProject, | ||
| [projectPath]: { | ||
| ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings), | ||
| cardBorderEnabled: enabled, | ||
| }, | ||
| }, | ||
| })), | ||
|
|
||
| setCardBorderOpacity: (projectPath: string, opacity: number) => | ||
| set((state) => ({ | ||
| boardBackgroundByProject: { | ||
| ...state.boardBackgroundByProject, | ||
| [projectPath]: { | ||
| ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings), | ||
| cardBorderOpacity: opacity, | ||
| }, | ||
| }, | ||
| })), | ||
|
|
||
| setHideScrollbar: (projectPath: string, hide: boolean) => | ||
| set((state) => ({ | ||
| boardBackgroundByProject: { | ||
| ...state.boardBackgroundByProject, | ||
| [projectPath]: { | ||
| ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings), | ||
| hideScrollbar: hide, | ||
| }, | ||
| }, | ||
| })), |
There was a problem hiding this comment.
This is a great implementation of the UI slice! To improve maintainability and reduce code duplication, you could extract the logic for updating boardBackgroundByProject into a helper function. Many of the set... actions for board backgrounds follow the same pattern.
For example, you could create a helper like this:
const updateBoardBackground = (
projectPath: string,
updates: Partial<BackgroundSettings>
) => (state: UISliceState) => ({
boardBackgroundByProject: {
...state.boardBackgroundByProject,
[projectPath]: {
...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
...updates,
},
},
});And then use it in your actions:
setCardOpacity: (projectPath: string, opacity: number) =>
set(updateBoardBackground(projectPath, { cardOpacity: opacity })),
setColumnOpacity: (projectPath: string, opacity: number) =>
set(updateBoardBackground(projectPath, { columnOpacity: opacity })),
// etc.This would make the actions more concise and easier to manage.
Shironex
added
Testers-Requested
Resolve merge conflict in app-store.ts by keeping UI slice implementation of getEffectiveFontSans/getEffectiveFontMono (already provided by ui-slice.ts) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/ui/src/store/app-store.ts (1)
1-8: Remove unused imports from line 8.The imports
UI_SANS_FONT_OPTIONSandUI_MONO_FONT_OPTIONSare not used in this file and should be removed.Remove unused imports
-import { UI_SANS_FONT_OPTIONS, UI_MONO_FONT_OPTIONS } from '@/config/ui-font-options';
Summary
app-store.tsinto a dedicated UI slice using Zustand slice patternUISliceStateandUISliceActionsinterfaces tostore/types/ui-types.tsfontSans/fontMono→fontFamilySans/fontFamilyMonoapp-store.tsChanges
New Files Created (
apps/ui/src/store/slices/)ui-slice.tsindex.tsFiles Modified
apps/ui/src/store/types/ui-types.tsUISliceStateandUISliceActionsinterfacesapps/ui/src/store/app-store.tsState Extracted to UI Slice
currentView,sidebarOpen,sidebarStyle,collapsedNavSections,mobileSidebarHiddentheme,previewThemefontFamilySans,fontFamilyMonoboardViewMode,boardBackgroundByProjectkeyboardShortcuts,muteDoneSound,disableSplashScreen,showQueryDevtools,chatHistoryOpenworktreePanelCollapsed,worktreePanelVisibleByProject,showInitScriptIndicatorByProject,autoDismissInitScriptIndicatorByProjectlastProjectDir,recentFoldersActions Extracted to UI Slice
setCurrentView,toggleSidebar,setSidebarOpen,setSidebarStyle,setCollapsedNavSections,toggleNavSection,toggleMobileSidebarHidden,setMobileSidebarHiddensetTheme,getEffectiveTheme,setPreviewThemesetFontSans,setFontMono,getEffectiveFontSans,getEffectiveFontMonosetBoardViewMode,setBoardBackground,setCardOpacity,setColumnOpacity,setColumnBorderEnabled,setCardGlassmorphism,setCardBorderEnabled,setCardBorderOpacity,setHideScrollbar,getBoardBackground,clearBoardBackgroundsetKeyboardShortcut,setKeyboardShortcuts,resetKeyboardShortcuts,setMuteDoneSound,setDisableSplashScreen,setShowQueryDevtools,setChatHistoryOpen,toggleChatHistorysetWorktreePanelCollapsed,setWorktreePanelVisible,getWorktreePanelVisible,setShowInitScriptIndicator,getShowInitScriptIndicator,setAutoDismissInitScriptIndicator,getAutoDismissInitScriptIndicatorsetLastProjectDir,setRecentFolders,addRecentFolderActions Kept in Main Store
These actions modify project entities, not just UI state:
setProjectTheme- modifiesprojects[]andcurrentProjectsetProjectFontSans- modifiesprojects[]andcurrentProjectsetProjectFontMono- modifiesprojects[]andcurrentProjectBug Fix
Fixed pre-existing bug where code accessed
currentProject?.fontSans/fontMonobut theProjectinterface hasfontFamilySans/fontFamilyMono.Backward Compatibility
All existing imports from
@/store/app-storecontinue to work:New types available:
Test Plan
npm run build)npm run lint- 0 errors, pre-existing warnings only)npm run test:packages- 519 tests)npm run test:server- 1,415 tests)Manual Testing Before Merge
View Navigation
Sidebar
Theme
Fonts
Board View
Keyboard Shortcuts
Settings UI
Panel Visibility
File Picker
🤖 Generated with Claude Code
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.