From cc3c4afa68477d3aba5f0dea65d2f2fb940f23d6 Mon Sep 17 00:00:00 2001
From: Regalijan <r@regalijan.com>
Date: Tue, 7 Nov 2023 13:35:21 -0500
Subject: [PATCH] We'll see how badly I broke this

---
 app/routes/mod-queue.tsx | 64 ++++++++++++++++++++++++++++------------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/app/routes/mod-queue.tsx b/app/routes/mod-queue.tsx
index 342219e..56665de 100644
--- 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>
   );