From e3ef55b9993600ec7e0f56516bbb7d900738844a Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Thu, 24 Mar 2022 20:00:09 +0100
Subject: [PATCH] feat(nui): Metadata popover

---
 web/src/components/ContextMenu.tsx | 141 ++++++++++++++++++-----------
 web/src/index.css                  |   8 ++
 2 files changed, 95 insertions(+), 54 deletions(-)

diff --git a/web/src/components/ContextMenu.tsx b/web/src/components/ContextMenu.tsx
index 3ce226e..6c84346 100644
--- a/web/src/components/ContextMenu.tsx
+++ b/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,64 +59,89 @@ const ContextMenu: React.FC = () => {
   });
 
   return (
-    <>
-      <Box position="absolute" w="xs" h="fit-content" top="20%" right="25%">
-        <Box borderRadius="md" bg="gray.700" mb={3}>
-          <Text
-            fontFamily="Poppins"
-            fontSize="md"
-            p={2}
-            textAlign="center"
-            fontWeight="light"
-          >
-            {contextMenu.title}
-          </Text>
-        </Box>
+    <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"
+          fontSize="md"
+          p={2}
+          textAlign="center"
+          fontWeight="light"
+        >
+          {contextMenu.title}
+        </Text>
+      </Box>
+      <Box maxH="33rem" overflowY="scroll">
         {Object.entries(contextMenu.options).map((option, index) => (
-          <Box
-            bg="gray.700"
-            borderRadius="md"
-            h="fit-content"
-            w="100%"
-            p={2}
-            mb={1}
-            fontFamily="Poppins"
-            fontSize="md"
-            transition="300ms"
-            _hover={{ bg: "gray.800" }}
-            key={`option-${index}`}
+          <Popover
+            placement="right-start"
+            trigger="hover"
+            eventListeners={{ scroll: true }}
+            isLazy
           >
-            {/* TODO: react-markdown (?) */}
-            <Box paddingBottom={1}>
-              <Text w="100%" fontWeight="medium">
-                {option[0]}
-              </Text>
-            </Box>
-            {option[1].description && (
-              <Box paddingBottom={1}>
-                <Text>{option[1].description}</Text>
+            <PopoverTrigger>
+              <Box
+                bg="gray.700"
+                borderRadius="md"
+                h="fit-content"
+                w="100%"
+                p={2}
+                mb={1}
+                fontFamily="Poppins"
+                fontSize="md"
+                transition="300ms"
+                _hover={{ bg: "gray.800" }}
+                key={`option-${index}`}
+              >
+                {/* TODO: react-markdown (?) */}
+                <Box paddingBottom={1}>
+                  <Text w="100%" fontWeight="medium">
+                    {option[0]}
+                  </Text>
+                </Box>
+                {option[1].description && (
+                  <Box paddingBottom={1}>
+                    <Text>{option[1].description}</Text>
+                  </Box>
+                )}
+                <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>
+                        ))
+                      ) : (
+                        <>
+                          {typeof option[1].metadata === "object" &&
+                            Object.entries(option[1].metadata).map(
+                              (metadata: { [key: string]: any }, index) => (
+                                <Text key={`context-metadata-${index}`}>
+                                  {metadata[0]}: {metadata[1]}
+                                </Text>
+                              )
+                            )}
+                        </>
+                      )}
+                    </PopoverBody>
+                  </PopoverContent>
+                </Portal>
               </Box>
-            )}
-            {option[1]?.metadata && Array.isArray(option[1].metadata) ? (
-              option[1].metadata.map((metadata: string, index) => (
-                <Text key={`context-metadata-${index}`}>{metadata}</Text>
-              ))
-            ) : (
-              <>
-                {typeof option[1].metadata === "object" &&
-                  Object.entries(option[1].metadata).map(
-                    (metadata: { [key: string]: any }, index) => (
-                      <Text key={`context-metadata-${index}`}>
-                        {metadata[0]}: {metadata[1]}
-                      </Text>
-                    )
-                  )}
-              </>
-            )}
-          </Box>
+            </PopoverTrigger>
+          </Popover>
         ))}
       </Box>
-    </>
+    </Box>
   );
 };
 
diff --git a/web/src/index.css b/web/src/index.css
index 0278447..f54aa11 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -40,3 +40,11 @@ code {
     width: 100%;
   }
 }
+
+::-webkit-scrollbar {
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  width: 0;
+  height: 0;
+}