feat: introduce Accounts Menu screen (#25611)

## **Description**

Implements a new Accounts Menu screen as an intermediary page between
the hamburger menu and settings, improving navigation organization for
users. This is the first iteration and will eventually look like this

<img width="2000" alt="image"
src="https://github.com/user-attachments/assets/cd8add7a-4b45-44c6-8b69-661116803646"
/>


**What is the reason for the change?**
The settings section is difficult to navigate. This new page organizes
settings into logical sections (Settings, Manage, Resources) to improve
UX while we plan a full redesign.

**What is the improvement/solution?**
Created a new AccountsMenu screen with:

- Settings navigation
- Resources section (About MetaMask, Request Feature, Support)
- Log out functionality
- Analytics tracking for all interactions
- Performance optimizations (memoized components, Tailwind styling)
- Comprehensive test coverage (24 tests)

**NOTE:** There will be a follow up PR to address regression related E2E
tests. I am working on them at this moment

## **Changelog**

CHANGELOG entry: Added new Accounts Menu screen to organize settings
navigation with Settings, Manage, and Resources sections

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-397

## **Manual testing steps**

```gherkin
Feature: Accounts Menu Navigation

  Scenario: user navigates from hamburger menu to settings
    Given user is on the main app screen
    When user taps the hamburger menu
    And user sees the new Accounts Menu screen
    Then user should see Settings, Manage, Resources sections
    
  Scenario: user accesses settings from Accounts Menu
    Given user is on the Accounts Menu screen
    When user taps "Settings"
    Then user should navigate to the Settings screen
    And analytics should track SETTINGS_VIEWED event
    
  Scenario: user logs out with confirmation
    Given user is on the Accounts Menu screen
    When user taps "Log Out"
    Then user should see a confirmation alert
    When user confirms logout
    Then app should lock
    And analytics should track NAVIGATION_TAPS_LOGOUT event
    
  Scenario: user cancels logout
    Given user is on the Accounts Menu screen
    When user taps "Log Out"
    And user taps "Cancel" on confirmation alert
    Then alert should dismiss
    And analytics should NOT track logout event
```

## **Screenshots/Recordings**

### First Iteration

<img width="350" alt="image"
src="https://github.com/user-attachments/assets/1e67ed03-543e-4da6-a4ca-cea476152b59"
/>


### Light


https://github.com/user-attachments/assets/f79fbc12-4ce2-42db-978f-259bd6cb73c2

### Dark


https://github.com/user-attachments/assets/384a46ab-5436-4e3c-9482-82271a7efcd4

### **Before**

`~`

### **After**

`~`

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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]
> **Medium Risk**
> Changes the app’s primary navigation path into settings and relocates
logout/support links, which could cause regressions in deep links/back
navigation and E2E flows despite added unit/snapshot coverage.
> 
> **Overview**
> Introduces a new `AccountsMenu` screen that sits between the
hamburger/menu entry and the existing settings pages, providing *Manage*
and *Resources* sections (Settings, Contacts, optional MetaMask Card,
optional Permissions, About, Request Feature, Support, and Log out) with
associated analytics events and a logout confirmation flow.
> 
> Updates navigation so the Settings tab and `SettingsFlow` now land on
`Routes.ACCOUNTS_MENU_VIEW` first, adds the new route constants, and
removes the SDK connections section from `SecuritySettings` plus several
resource/contact/logout rows from the `Settings` screen; tests,
snapshots, and Detox page objects/smoke tests are updated accordingly.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
cc6905d. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Amanda Yeoh <147617420+amandaye0h@users.noreply.github.com>

Author: vinnyhoward

app/component-library/components/Navigation/TabBar/TabBar.test.tsx

@@ -160,7 +160,7 @@ describe('TabBar', () => {
 
     fireEvent.press(getByTestId(`tab-bar-item-${TabBarIconKey.Setting}`));
     expect(navigation.navigate).toHaveBeenCalledWith(Routes.SETTINGS_VIEW, {
-      screen: 'Settings',
+      screen: Routes.ACCOUNTS_MENU_VIEW,
     });
   });
 

app/component-library/components/Navigation/TabBar/TabBar.tsx

@@ -98,7 +98,7 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
             break;
           case Routes.SETTINGS_VIEW:
             navigation.navigate(Routes.SETTINGS_VIEW, {
-              screen: 'Settings',
+              screen: Routes.ACCOUNTS_MENU_VIEW,
             });
             break;
           case Routes.TRENDING_VIEW:

app/components/Nav/Main/MainNavigator.js

@@ -7,6 +7,7 @@ import Browser from '../../Views/Browser';
 import { ChainId } from '@metamask/controller-utils';
 import AddBookmark from '../../Views/AddBookmark';
 import SimpleWebview from '../../Views/SimpleWebview';
+import AccountsMenu from '../../Views/AccountsMenu';
 import Settings from '../../Views/Settings';
 import GeneralSettings from '../../Views/Settings/GeneralSettings';
 import AdvancedSettings from '../../Views/Settings/AdvancedSettings';
@@ -354,7 +355,12 @@ const NotificationsOptInStack = () => (
 );
 
 const SettingsFlow = () => (
-  <Stack.Navigator initialRouteName={'Settings'}>
+  <Stack.Navigator initialRouteName={Routes.ACCOUNTS_MENU_VIEW}>
+    <Stack.Screen
+      name={Routes.ACCOUNTS_MENU_VIEW}
+      component={AccountsMenu}
+      options={{ headerShown: false }}
+    />
     <Stack.Screen
       name="Settings"
       component={Settings}