We'll see how badly I broke this

regalijan · Nov 7, 2023 · cc3c4af · cc3c4af
1 parent 5fc8a53
commit cc3c4af
Showing 1 changed file with 45 additions and 19 deletions.
diff --git a/app/routes/mod-queue.tsx b/app/routes/mod-queue.tsx
@@ -4,6 +4,7 @@ import {
   Container,
   Flex,
   Heading,
+  HStack,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -368,6 +369,27 @@ export default function () {
     </Select>
   );
 
+  const ToolsContent = (
+    <PopoverContent>
+      <PopoverArrow />
+      <PopoverCloseButton />
+      <PopoverHeader>Tools</PopoverHeader>
+      <PopoverBody>
+        <VStack>
+          {pageProps.item_types.map((item) => (
+            <Button
+              key={item.value}
+              onClick={() => itemModals[item.value].onOpen()}
+              w="100%"
+            >
+              {item.name}
+            </Button>
+          ))}
+        </VStack>
+      </PopoverBody>
+    </PopoverContent>
+  );
+
   return (
     <Container maxW="container.lg">
       <AppealBans
@@ -413,7 +435,28 @@ export default function () {
           )}
         </VStack>
         <Box display={isDesktop ? undefined : "none"} ml="16px" w="248px">
-          {ItemDisplay}
+          <HStack>
+            {ItemDisplay}
+            <Popover placement="bottom-end">
+              <PopoverTrigger>
+                <Button ml="8px">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    fill="currentColor"
+                    viewBox="0 0 16 16"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+                    />
+                  </svg>
+                </Button>
+              </PopoverTrigger>
+              {ToolsContent}
+            </Popover>
+          </HStack>
         </Box>
       </Flex>
       <Popover id="mod-tools" placement="top-end">
@@ -437,24 +480,7 @@ export default function () {
             </svg>
           </Button>
         </PopoverTrigger>
-        <PopoverContent>
-          <PopoverArrow />
-          <PopoverCloseButton />
-          <PopoverHeader>Tools</PopoverHeader>
-          <PopoverBody>
-            <VStack>
-              {pageProps.item_types.map((item) => (
-                <Button
-                  key={item.value}
-                  onClick={() => itemModals[item.value].onOpen()}
-                  w="100%"
-                >
-                  {item.name}
-                </Button>
-              ))}
-            </VStack>
-          </PopoverBody>
-        </PopoverContent>
+        {ToolsContent}
       </Popover>
     </Container>
   );