Clever way to manage Multi-Account Containers

[ForDefault]

Problem:I have a lot of containers and its annoying I can not group them directly or they do not change their order in sidebery at times.
Solution: The ability to create container categories in sidebery. The categories do nothing to the container themselves; all it does is add an extra layer in the selection process if desired. Meaning, by default nothing changes unless the user wants to group some.

The picture below is a rendering of what I think it could look like:

I tried to do this but I am awful at addons at the moment. But I am 90% sure this is where/how it would be done

the popup.context-menu.vue I have been trying

// Define the Category type structure
interface Category {
  id: string;
  name: string;
  groups: Group[];
}

// Define the Group type structure
interface Group {
  id: string;
  name: string;
  options: MenuOption[]; // This can be an empty array for now
}

// Populate categories with your data
state.categories = [
  // Example category
  {
    id: 'gmail',
    name: 'Gmail_Emails',
    groups: [
      {
        id: 'gmail_work', // Actual container name
        name: 'Work Emails', // Display name for the group
        options: [], // Empty array, ready for future options
      },
      {
        id: 'gmail_school',
        name: 'School Emails', // Display name for the group
        options: [], // Empty array, ready for future options
      },
      // ... more groups  ...
    ],
  },
  // ... more categories ...
];

// Existing code after the insertion point
Menu.onClose(() => {
  state.tickActive = false;
  state.tackActive = false;
  state.sub = null;
});