feat: Sidebar POC

[NidhiKJha]

This PR is a POC for sidebar

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Adds a Chrome side panel experience with a toggleable default view, context menu entry, environment wiring, and updated UI/CSS/routing to support it.

• Side Panel Integration:
  • Add side_panel entry in app/manifest/v3/chrome.json and permissions sidePanel, contextMenus in _base.json; new sidepanel.html and build pipeline for it.
  • Introduce ENVIRONMENT_TYPE_SIDEPANEL; detect /sidepanel.html in getEnvironmentType and handle background connections/state like popup.
  • Background: track sidePanelIsOpen, include in client-open logic; add context menu “MetaMask Sidepanel” to open panel; initialize and react to preferences.useSidePanelAsDefault via browser.sidePanel.setPanelBehavior; update active tab info on tab activate/update.
• Preferences & Actions:
  • Add preferences.useSidePanelAsDefault (default true) with persistence/metadata; expose setUseSidePanelAsDefault action.
• UI/UX:
  • Global menu: replace “Expand view” with toggle between popupView and sidePanelView; add i18n keys.
  • Treat side panel like popup where relevant (e.g., connected status, active tab derivation, initial state).
  • Routes: add app--sidepanel class; CSS widths for side panel layout; hide app header in side panel when confirmations pending.
  • Onboarding: attempt to open side panel on completion (when supported).
• Misc:
  • Wire side panel rendering in development/build/scripts.js; minor header/menu logic updates to support side panel.

^{Written by Cursor Bugbot for commit ef3ad68. This will update automatically on new commits. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (1 files, +0 -1)

• 📁 ui/
  • 📁 components/
    • 📁 multichain/
      • 📁 account-list-menu/
        • 📄 account-list-menu.tsx +0 -1

---

👨‍🔧 @MetaMask/core-extension-ux (7 files, +110 -10)

• 📁 ui/
  • 📁 components/
    • 📁 multichain/
      • 📁 account-list-menu/
        • 📄 account-list-menu.tsx +0 -1
      • 📁 app-header/
        • 📄 app-header-unlocked-content.tsx +6 -2
        • 📄 app-header.js +13 -2
      • 📁 global-menu/
        • 📄 global-menu.tsx +22 -4
  • 📁 css/
    • 📁 itcss/
      • 📁 components/
        • 📄 newui-sections.scss +59 -0
  • 📁 pages/
    • 📁 home/
      • 📄 home.component.js +7 -1
      • 📄 home.container.js +3 -0

---

🔐 @MetaMask/web3auth (1 files, +21 -6)

• 📁 ui/
  • 📁 pages/
    • 📁 onboarding-flow/
      • 📁 pin-extension/
        • 📄 pin-extension.js +21 -6