feat(web/context): allow manually sorting the options

In order to have the options in the same order as defined, you need to not use keys, instead a normal index table and define the title for the option

web/src/features/menu/ContextMenu.tsx

@@ -12,31 +12,27 @@ debugData<ContextMenuProps>([
     action: "showContext",
     data: {
       title: "Vehicle garage",
-      options: {
+      options: [
-        "Dinka Blista": {
+        { title: "Empty button" },
-          description: "Super cool vehicle",
+        {
-          menu: "some_other_identifier",
+          title: "Example button",
-          metadata: {
+          description: "Example button description",
-            Plate: "KLT 192",
+          metadata: { ["Value 1"]: "Some value", ["Value 2"]: 300 },
-            Status: "In garage",
-            Health: "30%",
-          },
         },
-        "Elegy Nitro": {
+        {
-          description: "Even cooler vehicle",
+          title: "Menu button",
-          metadata: ["Plate: JGM 971", "Status: In garage"],
+          menu: "other_example_menu",
+          description: "Takes you to another menu",
+          metadata: ["It also has metadata support"],
         },
-        Burger: {
+        {
-          description: "Make a delicious burger",
+          title: "Event button",
-          metadata: {
+          description: "Open a menu and send event data",
-            Bun: 3,
+          arrow: true,
-            Lettuce: 2,
+          event: "some_event",
-            Meat: 1,
+          args: { value1: 300, value2: "Other value" },
-            Tomato: 1,
-            Cheese: 2,
-          },
         },
-      },
+      ],
     },
   },
 ]);

web/src/features/menu/Item.tsx

@@ -68,7 +68,7 @@ const Item: React.FC<{
               <Box>
                 <Box paddingBottom={option[1].description ? 1 : 0}>
                   <Text w="100%" fontWeight="medium">
-                    {option[0]}
+                    {option[1].title ? option[1].title : option[0]}
                   </Text>
                 </Box>
                 {option[1].description && (

web/src/interfaces/context.ts

@@ -1,5 +1,6 @@
 export interface Option {
   menu?: string;
+  title?: string;
   description?: string;
   arrow?: boolean;
   metadata?: string[] | { [key: string]: any };
@@ -15,5 +16,5 @@ export interface Options {
 export interface ContextMenuProps {
   title: string;
   menu?: string;
-  options: Options;
+  options: Options | Option[];
 }