feat(web/context): allow separate metadata progress bars colors

Closes #430

web/src/features/dev/debug/context.ts

@@ -19,11 +19,13 @@ export const debugContext = () => {
                 ['label']: 'Body',
                 ['value']: '55%',
                 ['progress']: 55,
+                colorScheme: 'red',
               },
               {
                 ['label']: 'Engine',
                 ['value']: '100%',
                 ['progress']: 100,
+                colorScheme: 'green',
               },
               {
                 ['label']: 'Oil',

web/src/features/menu/context/components/ContextButton.tsx

@@ -145,14 +145,21 @@ const ContextButton: React.FC<{
           {button.image && <Image src={button.image} />}
           {Array.isArray(button.metadata) ? (
             button.metadata.map(
-              (metadata: string | { label: string; value?: any; progress?: number }, index: number) => (
+              (
+                metadata: string | { label: string; value?: any; progress?: number; colorScheme?: string },
+                index: number
+              ) => (
                 <>
                   <Text key={`context-metadata-${index}`}>
                     {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ''}`}
                   </Text>
 
                   {typeof metadata === 'object' && metadata.progress !== undefined && (
-                    <Progress value={metadata.progress} size="sm" color={button.colorScheme || 'dark.3'} />
+                    <Progress
+                      value={metadata.progress}
+                      size="sm"
+                      color={metadata.colorScheme || button.colorScheme || 'dark.3'}
+                    />
                   )}
                 </>
               )

web/src/typings/context.ts

@@ -11,7 +11,10 @@ export interface Option {
   progress?: number;
   colorScheme?: string;
   readOnly?: boolean;
-  metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress?: number }[];
+  metadata?:
+    | string[]
+    | { [key: string]: any }
+    | { label: string; value: any; progress?: number; colorScheme?: string }[];
   disabled?: boolean;
   event?: string;
   serverEvent?: string;