feat: added sidepanel icon (#37777)

This PR is to add sidepanel/popup icon to the DS component library.

It also fixes an edge case with the Advanced Settings `Show extension in
full-size view` button where users who have turned sidepanel on after
enabling this will see sidepanel by default.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:null

## **Related issues**

Fixes:
[https://consensyssoftware.atlassian.net/browse/CEUX-684](https://consensyssoftware.atlassian.net/browse/CEUX-684)
)
## **Manual testing steps**

1. In storybook, check sidepanel icon
2. Go to popup view or sidepanel and check the icon in global menu

## **Screenshots/Recordings**
### **Before**

NA

### **After**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
![Screenshot 2025-11-13 at 4 36
06 PM](https://github.com/user-attachments/assets/127b771a-a5e8-4521-a508-ffa0afbf71d2)


![Screenshot 2025-11-13 at 10 10
04 PM](https://github.com/user-attachments/assets/d214efc2-2817-42ab-acf9-5e4ba1e307d7)


## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.





<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds popup/sidepanel icons to the design system, uses them for the
view toggle in the global menu, and enables the full-size opening
behavior from sidepanel too.
> 
> - **Design System / Icons**:
> - Add `app/images/icons/popup.svg` and
`app/images/icons/sidepanel.svg`.
> - Expose `IconName.Popup` and `IconName.Sidepanel` in
`ui/components/component-library/icon/icon.types.ts`.
> - **Global Menu**
(`ui/components/multichain/global-menu/global-menu.tsx`):
> - Replace viewport toggle to use `IconName.Popup`/`IconName.Sidepanel`
and `isSidePanelDefault` logic; update metrics payload and close
behavior.
>   - Add divider after notifications section.
> - **Routing / Behavior** (`ui/pages/routes/routes.component.tsx`):
> - Extend "Show extension in full-size view" to trigger when in
`ENVIRONMENT_TYPE_SIDEPANEL` as well as popup.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
592283c. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: ameliejyc <amelie.chan@gmail.com>

Author: NidhiKJha

app/images/icons/popup.svg

@@ -201,6 +201,7 @@ export enum IconName {
   Plug = 'plug',
   PlusAndMinus = 'plus-and-minus',
   PolicyAlert = 'policy-alert',
+  Popup = 'popup',
   Print = 'print',
   PriorityHigh = 'priority-high',
   PrivacyTip = 'privacy-tip',
@@ -241,6 +242,7 @@ export enum IconName {
   ShieldLock = 'shield-lock',
   ShoppingBag = 'shopping-bag',
   ShoppingCart = 'shopping-cart',
+  Sidepanel = 'sidepanel',
   SignalCellular = 'signal-cellular',
   Slash = 'slash',
   Sms = 'sms',

app/images/icons/sidepanel.svg

@@ -336,6 +336,11 @@ export const GlobalMenu = ({
               <NotificationsTagCounter />
             </Box>
           </MenuItem>
+          <Box
+            borderColor={BorderColor.borderMuted}
+            width={BlockSize.Full}
+            style={{ height: '1px', borderBottomWidth: 0 }}
+          ></Box>
         </>
       )}
       {rewardsEnabled && (
@@ -394,6 +399,32 @@ export const GlobalMenu = ({
         width={BlockSize.Full}
         style={{ height: '1px', borderBottomWidth: 0 }}
       ></Box>
+      {/* Toggle between popup and sidepanel - only for Chrome when sidepanel is enabled */}
+      {getBrowserName() !== PLATFORM_FIREFOX &&
+        isSidePanelEnabled &&
+        (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ||
+          getEnvironmentType() === ENVIRONMENT_TYPE_SIDEPANEL) && (
+          <MenuItem
+            iconName={isSidePanelDefault ? IconName.Popup : IconName.Sidepanel}
+            onClick={async () => {
+              await toggleDefaultView();
+              trackEvent({
+                event: MetaMetricsEventName.ViewportSwitched,
+                category: MetaMetricsEventCategory.Navigation,
+                properties: {
+                  location: METRICS_LOCATION,
+                  to: isSidePanelDefault
+                    ? ENVIRONMENT_TYPE_POPUP
+                    : ENVIRONMENT_TYPE_SIDEPANEL,
+                },
+              });
+              closeMenu();
+            }}
+            data-testid="global-menu-toggle-view"
+          >
+            {isSidePanelDefault ? t('switchToPopup') : t('switchToSidePanel')}
+          </MenuItem>
+        )}
       <MenuItem
         to={
           isGatorPermissionsRevocationFeatureEnabled()
@@ -416,35 +447,6 @@ export const GlobalMenu = ({
       >
         {t('allPermissions')}
       </MenuItem>
-      {/* Toggle between popup and sidepanel - only for Chrome when sidepanel is enabled */}
-      {getBrowserName() !== PLATFORM_FIREFOX &&
-        isSidePanelEnabled &&
-        (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ||
-          getEnvironmentType() === ENVIRONMENT_TYPE_SIDEPANEL) && (
-          <MenuItem
-            iconName={IconName.Expand}
-            onClick={async () => {
-              await toggleDefaultView();
-              trackEvent({
-                event: MetaMetricsEventName.ViewportSwitched,
-                category: MetaMetricsEventCategory.Navigation,
-                properties: {
-                  location: METRICS_LOCATION,
-                  to:
-                    getEnvironmentType() === ENVIRONMENT_TYPE_SIDEPANEL
-                      ? ENVIRONMENT_TYPE_POPUP
-                      : ENVIRONMENT_TYPE_SIDEPANEL,
-                },
-              });
-              closeMenu();
-            }}
-            data-testid="global-menu-toggle-view"
-          >
-            {getEnvironmentType() === ENVIRONMENT_TYPE_SIDEPANEL
-              ? t('switchToPopup')
-              : t('switchToSidePanel')}
-          </MenuItem>
-        )}
       <MenuItem
         data-testid="global-menu-networks"
         iconName={IconName.Hierarchy}

ui/components/component-library/icon/icon.types.ts

@@ -614,7 +614,11 @@ export default function Routes() {
 
   useEffect(() => {
     const windowType = getEnvironmentType();
-    if (showExtensionInFullSizeView && windowType === ENVIRONMENT_TYPE_POPUP) {
+    if (
+      showExtensionInFullSizeView &&
+      (windowType === ENVIRONMENT_TYPE_POPUP ||
+        windowType === ENVIRONMENT_TYPE_SIDEPANEL)
+    ) {
       global.platform?.openExtensionInBrowser?.();
     }
   }, [showExtensionInFullSizeView]);