nav-menu: build out tools sub section

[wesrupert]

Stack: master <- ../1 <- ../2 <- ../3 <- feat/wr/nav/pr/4 <- ../5
Can merge separate from children? No
See PR 5 for screenshots of final product.
Figma: link

---

Fleshes out the NavTools dropdown for the top nav: dual output controls, notifications, and the platform indicator, fixing a live dual-output bug along the way.

• Extract DualOutputControls/DualOutputIcons into a shared component reused by the editor header and nav
• Update logic for "Studio Mode on" -> "Toggle Dual Output" to match the other way around (see toggleStudioMode)
• Split NotificationsArea into NotificationsBell and toast host, and replace the width-polling interval with a ResizeObserver
• Rework PlatformIndicator for the nav dropdown
• Add a user avatar placeholder image
• Minor SwitchInput/i18n additions

[bundlemon]

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	renderer.(hash).js	10.27MB (+28.48KB +0.27%)	-

Unchanged files (3)

Status	Path	Size	Limits
✅	vendors~renderer.(hash).js	4.66MB	-
✅	updater.js	115.29KB	-
✅	guest-api.js	40.23KB	-

Total files change +28.48KB +0.18%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[Copilot]

Pull request overview

Builds out the top-nav “Tools” dropdown (NavTools) by wiring in dual output controls, studio mode toggle behavior, notifications, and a richer platform/user indicator, while refactoring shared UI pieces (DualOutputControls, notifications host) to be reused across surfaces.

Changes:

• Extracts/centralizes dual-output UI into a shared React component and updates mutual-exclusion flows between Studio Mode and Dual Output.
• Splits notifications UI into a bell control plus a dedicated toast host, replacing width polling with a ResizeObserver.
• Expands NavTools dropdown contents (settings, notifications, profile menu, dev tools) and updates related i18n + e2e expectations.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
test/regular/streaming/dual-output.ts	Updates e2e selector/assertion for the new Dual Output / Studio Mode mutual-exclusion modal UI.
app/i18n/en-US/streaming.json	Adds strings for the Dual Output enabled modal and the updated Studio Mode restriction message.
app/i18n/en-US/common.json	Adds “Dev Tools” and “%{platform} User” strings; removes unused generic logout prompt key from en-US.
app/components-react/shared/inputs/SwitchInput.tsx	Makes horizontal labels clickable to toggle the switch (but needs disabled/readOnly + keyboard handling).
app/components-react/shared/DualOutputToggle.tsx	Updates analytics source options, swaps some toast/error behavior to modal alerts, and adds tooltip disable override.
app/components-react/shared/DualOutputToggle.m.less	Removes message/toast error styling that’s no longer used.
app/components-react/shared/DualOutputControls.tsx	New shared component for dual output display toggles + the Dual Output enable switch.
app/components-react/shared/DualOutputControls.m.less	Styling for the new shared DualOutputControls component.
app/components-react/root/StudioFooter.tsx	Adds the new NotificationsToastHost to centralize antd message/toast rendering.
app/components-react/root/StudioEditor.tsx	Removes the in-file DualOutputControls implementation in preparation for shared usage elsewhere.
app/components-react/root/StudioEditor.m.less	Removes styles that belonged to the deleted in-file DualOutputControls implementation.
app/components-react/root/NotificationsArea.tsx	Splits into NotificationsBell + NotificationsToastHost; switches from interval polling to ResizeObserver.
app/components-react/root/NotificationsArea.m.less	Adjusts layout to support the new bell + toast-host separation and nav alignment.
app/components-react/nav-menu/PlatformIndicator.tsx	Reworks platform indicator rendering; introduces a container styling regression (style vs className).
app/components-react/nav-menu/PlatformIndicator.m.less	Adds a platform icons container class for the nav dropdown layout.
app/components-react/nav-menu/NavTools.tsx	Major rebuild of the tools dropdown: dual output controls, studio mode toggle, notifications bell, profile dropdown, and logout flow.
app/components-react/nav-menu/NavTools.m.less	New styling for the rebuilt nav tools dropdown and profile menu.

Suppressed comments (1)

app/components-react/shared/inputs/SwitchInput.tsx:71

• Same issue as the left-aligned label: clicking the label can toggle even when the switch is disabled/readOnly, and the label isn’t keyboard-accessible.

          <span
            style={{ marginLeft: '10px' }}
            onClick={() => inputAttrs.onChange(!inputAttrs.value)}
          >
            {p.label}

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[wesrupert]

Will add disabled/readOnly checks.

[michelinewu]

Not sure if it's intended, but I personally would expect to have studio mode toggled as well as dual output mode toggled off

[wesrupert]

I took the behavior of the vice versa modal originally, but yeah I agree. Will update.

[michelinewu]

Maybe consider breaking this out into its own functional component at the bottom?