From 1c5f4d6ac8597177651281c6b3a9803710025797 Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Sat, 28 Oct 2023 18:30:28 +0200
Subject: [PATCH] feat(web/context): allow separate metadata progress bars
 colors

Closes #430
---
 package/client/resource/interface/context.ts          |  5 ++++-
 web/src/features/dev/debug/context.ts                 |  2 ++
 .../menu/context/components/ContextButton.tsx         | 11 +++++++++--
 web/src/typings/context.ts                            |  5 ++++-
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/package/client/resource/interface/context.ts b/package/client/resource/interface/context.ts
index ff8fda8..20180bd 100644
--- a/package/client/resource/interface/context.ts
+++ b/package/client/resource/interface/context.ts
@@ -12,7 +12,10 @@ interface ContextMenuItem {
   colorScheme?: string;
   onSelect?: (args: any) => void;
   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;
diff --git a/web/src/features/dev/debug/context.ts b/web/src/features/dev/debug/context.ts
index cfefefb..2a3114f 100644
--- a/web/src/features/dev/debug/context.ts
+++ b/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',
diff --git a/web/src/features/menu/context/components/ContextButton.tsx b/web/src/features/menu/context/components/ContextButton.tsx
index 534541f..9ea3eee 100644
--- a/web/src/features/menu/context/components/ContextButton.tsx
+++ b/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'}
+                    />
                   )}
                 </>
               )
diff --git a/web/src/typings/context.ts b/web/src/typings/context.ts
index c9f6c4f..1bcfd14 100644
--- a/web/src/typings/context.ts
+++ b/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;