Cursor rule

1---
2alwaysApply: false
3---
4 
5## Decouple State Management from UI
6 
7The provider component should be the only place that knows how state is managed.
8UI components consume the context interface—they don't know if state comes from
9useState, Zustand, or a server sync.
10 
11**Incorrect (UI coupled to state implementation):**
12 
13```tsx
14function ChannelComposer({ channelId }: { channelId: string }) {
15  // UI component knows about global state implementation
16  const state = useGlobalChannelState(channelId)
17  const { submit, updateInput } = useChannelSync(channelId)
18 
19  return (
20    <Composer.Frame>
21      <Composer.Input
22        value={state.input}
23        onChange={(text) => sync.updateInput(text)}
24      />
25      <Composer.Submit onPress={() => sync.submit()} />
26    </Composer.Frame>
27  )
28}
29```
30 
31**Correct (state management isolated in provider):**
32 
33```tsx
34// Provider handles all state management details
35function ChannelProvider({
36  channelId,
37  children,
38}: {
39  channelId: string
40  children: React.ReactNode
41}) {
42  const { state, update, submit } = useGlobalChannel(channelId)
43  const inputRef = useRef(null)
44 
45  return (
46    <Composer.Provider
47      state={state}
48      actions={{ update, submit }}
49      meta={{ inputRef }}
50    >
51      {children}
52    </Composer.Provider>
53  )
54}
55 
56// UI component only knows about the context interface
57function ChannelComposer() {
58  return (
59    <Composer.Frame>
60      <Composer.Header />
61      <Composer.Input />
62      <Composer.Footer>
63        <Composer.Submit />
64      </Composer.Footer>
65    </Composer.Frame>
66  )
67}
68 
69// Usage
70function Channel({ channelId }: { channelId: string }) {
71  return (
72    <ChannelProvider channelId={channelId}>
73      <ChannelComposer />
74    </ChannelProvider>
75  )
76}
77```
78 
79**Different providers, same UI:**
80 
81```tsx
82// Local state for ephemeral forms
83function ForwardMessageProvider({ children }) {
84  const [state, setState] = useState(initialState)
85  const forwardMessage = useForwardMessage()
86 
87  return (
88    <Composer.Provider
89      state={state}
90      actions={{ update: setState, submit: forwardMessage }}
91    >
92      {children}
93    </Composer.Provider>
94  )
95}
96 
97// Global synced state for channels
98function ChannelProvider({ channelId, children }) {
99  const { state, update, submit } = useGlobalChannel(channelId)
100 
101  return (
102    <Composer.Provider state={state} actions={{ update, submit }}>
103      {children}
104    </Composer.Provider>
105  )
106}
107```
108 
109The same `Composer.Input` component works with both providers because it only
110depends on the context interface, not the implementation.
111