Skip to content

Refactor/zustand slices chat store#1283

Open
sudorishabh wants to merge 7 commits intoRocketChat:developfrom
sudorishabh:refactor/zustand-slices-chat-store
Open

Refactor/zustand slices chat store#1283
sudorishabh wants to merge 7 commits intoRocketChat:developfrom
sudorishabh:refactor/zustand-slices-chat-store

Conversation

@sudorishabh
Copy link
Copy Markdown

@sudorishabh sudorishabh commented Apr 17, 2026

refactor(react): consolidate Zustand stores via chat layout/data/auth stores

Why

The React package had many tiny Zustand stores (often a single boolean + setter). This increased import churn and made cross-panel logic harder to maintain. Consolidating into slice-like stores reduces fragmentation and simplifies “exclusive panel open” behavior.

Summary

  • Consolidated fragmented Zustand “panel visibility” state into useChatLayoutStore (openExclusivePanel) and migrated all sidebar/panel consumers.
  • Consolidated starred message data into useChatDataStore; removed starredMessageStore.
  • Consolidated login/TOTP modal/loading state into useAuthStore; removed loginStore and totpmodalStore.
  • Removed legacy useSetExclusiveState hook; updated all call sites (including @embeddedchat/markups UserMention).

Fixes #1282

Key changes

  • New stores
    • packages/react/src/store/chatLayoutStore.js
    • packages/react/src/store/chatDataStore.js
    • packages/react/src/store/authStore.js
  • Deleted fragmented stores
    • packages/react/src/store/sidebarStore.js
    • packages/react/src/store/pinnedMessageStore.js
    • packages/react/src/store/searchMessageStore.js
    • packages/react/src/store/fileStore.js
    • packages/react/src/store/mentionsStore.js
    • packages/react/src/store/threadsMessageStore.js
    • packages/react/src/store/starredMessageStore.js
    • packages/react/src/store/loginStore.js
    • packages/react/src/store/totpmodalStore.js
    • packages/react/src/hooks/useSetExclusiveState.js

Test plan

  • Run Storybook and verify sidebar panels:
    • Open each panel from the header menu (Members/Search/Room Info/Threads/Files/Mentions/Pinned/Starred/User Info) and confirm it closes the others.
    • Close panels via the sidebar close button.
  • Verify auth flow:
    • Open login modal, submit invalid credentials (error toast).
    • Trigger TOTP-required flow (login modal closes, TOTP modal opens).
  • Verify starred messages:
    • Open Starred panel and confirm list renders after fetch.

Notes

  • yarn lint failures seen locally are due to pre-existing Prettier CRLF (Delete ␍) issues in unrelated files; not introduced by this PR.
  • Similar store fragmentation still exists in other packages (react-native, layout_editor) and can be refactored separately.

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-1283
after approval.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Refactor: consolidate fragmented Zustand stores using slice pattern

1 participant