feat(nui): Metadata popover

web/src/components/ContextMenu.tsx

@@ -1,5 +1,13 @@
 import { useNuiEvent } from "../hooks/useNuiEvent";
-import { Box, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Text,
+  Popover,
+  PopoverTrigger,
+  Portal,
+  PopoverContent,
+  PopoverBody,
+} from "@chakra-ui/react";
 import { debugData } from "../utils/debugData";
 import { useState } from "react";
 
@@ -51,8 +59,14 @@ const ContextMenu: React.FC = () => {
   });
 
   return (
-    <>
-      <Box position="absolute" w="xs" h="fit-content" top="20%" right="25%">
+    <Box
+      position="absolute"
+      w="xs"
+      h="fit-content"
+      maxH="20rem"
+      top="20%"
+      right="25%"
+    >
       <Box borderRadius="md" bg="gray.700" mb={3}>
         <Text
           fontFamily="Poppins"
@@ -64,7 +78,15 @@ const ContextMenu: React.FC = () => {
           {contextMenu.title}
         </Text>
       </Box>
+      <Box maxH="33rem" overflowY="scroll">
         {Object.entries(contextMenu.options).map((option, index) => (
+          <Popover
+            placement="right-start"
+            trigger="hover"
+            eventListeners={{ scroll: true }}
+            isLazy
+          >
+            <PopoverTrigger>
               <Box
                 bg="gray.700"
                 borderRadius="md"
@@ -89,9 +111,15 @@ const ContextMenu: React.FC = () => {
                     <Text>{option[1].description}</Text>
                   </Box>
                 )}
-            {option[1]?.metadata && Array.isArray(option[1].metadata) ? (
+                <Portal>
+                  <PopoverContent fontFamily="Poppins" bg="gray.800">
+                    <PopoverBody>
+                      {option[1]?.metadata &&
+                      Array.isArray(option[1].metadata) ? (
                         option[1].metadata.map((metadata: string, index) => (
-                <Text key={`context-metadata-${index}`}>{metadata}</Text>
+                          <Text key={`context-metadata-${index}`}>
+                            {metadata}
+                          </Text>
                         ))
                       ) : (
                         <>
@@ -105,10 +133,15 @@ const ContextMenu: React.FC = () => {
                             )}
                         </>
                       )}
+                    </PopoverBody>
+                  </PopoverContent>
+                </Portal>
               </Box>
+            </PopoverTrigger>
+          </Popover>
         ))}
       </Box>
-    </>
+    </Box>
   );
 };
 

web/src/index.css

@@ -40,3 +40,11 @@ code {
     width: 100%;
   }
 }
+
+::-webkit-scrollbar {
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  width: 0;
+  height: 0;
+}