feat(web/context): allow custom metadata order

web/src/features/menu/ContextMenu.tsx

@@ -17,7 +17,7 @@ debugData<ContextMenuProps>([
         {
           title: "Example button",
           description: "Example button description",
-          metadata: { ["Value 1"]: "Some value", ["Value 2"]: 300 },
+          metadata: [{ label: "Value 1", value: 300 }],
         },
         {
           title: "Menu button",

web/src/features/menu/Item.tsx

@@ -104,9 +104,14 @@ const Item: React.FC<{
                   <PopoverBody>
                     {Array.isArray(option[1].metadata) ? (
                       option[1].metadata.map(
-                        (metadata: string, index: number) => (
+                        (
+                          metadata: string | { label: string; value: any },
+                          index: number
+                        ) => (
                           <Text key={`context-metadata-${index}`}>
-                            {metadata}
+                            {typeof metadata === "string"
+                              ? `${metadata}`
+                              : `${metadata.label}: ${metadata.value}`}
                           </Text>
                         )
                       )

web/src/interfaces/context.ts

@@ -3,7 +3,10 @@ export interface Option {
   title?: string;
   description?: string;
   arrow?: boolean;
-  metadata?: string[] | { [key: string]: any };
+  metadata?:
+    | string[]
+    | { [key: string]: any }
+    | { label: string; value: any }[];
   event?: string;
   serverEvent?: string;
   args?: any;