feat: add global ui and modal redux slice (#113)

[aruotes]

Hey team! This PR takes care of #113 by setting up our global UI state using Redux Toolkit.

I've added a new uiSlice that handles all the core interface toggles. It tracks whether the sidebar is open, which device we're previewing (desktop, tablet, or mobile), and which builder tab is currently active. I also set up a clean dictionary to manage our modal states (like the AI prompt, delete confirmations, and integrations) so we can easily pop them open or closed from anywhere in the app.

Everything is fully typed and already hooked up to the main store. Let me know what you think or if you need any tweaks!

• Add centralized UI state for the sidebar, preview device, builder tab, and key modals.
• The implementation covers the core UI controls. To strengthen the PR, clarify how other interface components should use these actions and state.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Warning

Review limit reached

Next included review available in 55 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Advanced

Run ID: ec01e3fd-1aec-4b6c-a929-85614643705d

📥 Commits

Reviewing files that changed from the base of the PR and between 4b124fd and 70645a1.

📒 Files selected for processing (1)

• apps/web/store/store.ts

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Advanced

Run ID: 71588612-61a8-457b-bbdd-de6686d01a9a

📥 Commits

Reviewing files that changed from the base of the PR and between d4ac7ac and 4b124fd.

📒 Files selected for processing (2)

• apps/web/store/slices/uiSlice.ts
• apps/web/store/store.ts

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📜 Recent review details

🔇 Additional comments (2)

apps/web/store/slices/uiSlice.ts (1)

3-55: LGTM!

apps/web/store/store.ts (1)

2-2: LGTM!

Also applies to: 7-7

---

📝 Walkthrough

Walkthrough

The pull request adds a typed Redux Toolkit slice for sidebar, preview-device, builder-tab, and modal state. It registers the slice reducer in the Redux store.

Changes

UI State

Layer / File(s)	Summary
Define UI state and register the reducer apps/web/store/slices/uiSlice.ts, apps/web/store/store.ts	Adds typed UI state with initial values and reducers for sidebar, preview device, active tab, and modal state. Exports the slice actions and reducer, then registers the reducer under the ui key in the store.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Suggested reviewers: yashraj639

Merge Risk: ⚪ Minimal · up to 4b124

The UI state addition appears mergeable after normal checks.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 4b124

The new state controls interface visibility, not deletion or integration permissions. No connected privileged action was identified, but how future modal users will enforce those permissions is not established.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The new state is reachable by descendants of the root client provider. The evidenced blast radius is interface state in the web app, not a server-side privilege or persistent-data boundary.

Trust Boundaries and Controls

• observed — Neither the TypeScript modal key nor its visibility boolean is an authorization check. The reviewed action path ends at local state mutation; controls for any eventual sensitive modal operation are outside this path and remain unverified.

Hardening Proposals

• proposed — If delete or integration flows later consume these modal flags, enforce authorization at the operation itself and associate asynchronous confirmations with their intended target rather than treating visibility as authority.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a global UI and modal Redux slice.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

⚔️ Resolve merge conflicts 💡

• Resolve merge conflict in branch main

🧪 Generate unit tests (beta)

• Create a new PR

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit hops beside the state,
The canvas tab is set to wait.
The sidebar opens, previews gleam,
Three modals rest inside the team.
The store now keeps this UI scheme.}

_{Comment @coderabbitai help to get the list of available commands.}

[Basharkhan7776]

Approve,