Move new items box to popover

app/routes/mod-queue.tsx

@@ -3,6 +3,13 @@ import {
   Button,
   Container,
   Flex,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
   Select,
   useBreakpointValue,
   useToast,
@@ -149,17 +156,33 @@ export default function () {
           <Select>{entryTypes}</Select>
         </Box>
       </Flex>
-      <Button borderRadius="50%" h="16" w="16">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-        >
-          <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
-        </svg>
-      </Button>
+      <Popover>
+        <PopoverTrigger>
+          <Button borderRadius="50%" h="16" w="16">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+            >
+              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
+            </svg>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverArrow />
+          <PopoverCloseButton />
+          <PopoverHeader>Create New</PopoverHeader>
+          <PopoverBody>
+            <VStack>
+              {pageProps.item_types.map((item) => {
+                return <Button w="100%">{item.name}</Button>;
+              })}
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
     </Container>
   );
 }