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,6 +156,8 @@ export default function () {
           <Select>{entryTypes}</Select>
         </Box>
       </Flex>
+      <Popover>
+        <PopoverTrigger>
           <Button borderRadius="50%" h="16" w="16">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -160,6 +169,20 @@ export default function () {
               <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>
   );
 }