feat(web/progress): progress bar in context menu's metadata (#217)

* feature: progress bar in context menu's metadata

* undefined check `metadata.progress`

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

@@ -9,6 +9,32 @@ export const debugContext = () => {
         title: 'Vehicle garage',
         options: [
           { title: 'Empty button' },
+          {
+            title: 'Karin Kuruma',
+            image: 'https://cdn.discordapp.com/attachments/1063098499027173461/1064276343585505330/screenshot.jpg',
+            arrow: true,
+            colorScheme: 'blue',
+            metadata: [
+              {
+                ["label"]: "Body",
+                ["value"]: "55%",
+                ["progress"]: 55
+              },
+              {
+                ["label"]: "Engine",
+                ["value"]: "100%",
+                ["progress"]: 100
+              },
+              {
+                ["label"]: "Oil",
+                ["progress"]: 11
+              },
+              {
+                ["label"]: "Fuel",
+                ["progress"]: 87
+              },
+            ],
+          },
           {
             title: 'Example button',
             description: 'Example button description',

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

@@ -90,10 +90,16 @@ const ContextButton: React.FC<{
         <HoverCard.Dropdown className={classes.dropdown}>
           {button.image && <Image src={button.image} />}
           {Array.isArray(button.metadata) ? (
-            button.metadata.map((metadata: string | { label: string; value: any }, index: number) => (
+            button.metadata.map((metadata: string | { label: string; value?: any; progress?: number }, index: number) => (
+              <>
                 <Text key={`context-metadata-${index}`}>
-                {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata.value}`}
+                  {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'} />
+                )}
+              </>
             ))
           ) : (
             <>

web/src/interfaces/context.ts

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