Add user lookup to item thing

app/routes/mod-queue.tsx

@@ -14,7 +14,7 @@ import {
   useBreakpointValue,
   useDisclosure,
   useToast,
-  VStack
+  VStack,
 } from "@chakra-ui/react";
 import { type ReactElement, useEffect, useState } from "react";
 import AppealCard from "../../components/AppealCard.js";
@@ -31,40 +31,42 @@ export async function loader({ context }: { context: RequestContext }) {
 
   if (!currentUser)
     throw new Response(null, {
-      status: 401
+      status: 401,
     });
 
   const departments = {
     DM: 1 << 2,
     ET: 1 << 3,
     FM: 1 << 10,
-    WM: 1 << 9
+    WM: 1 << 9,
   };
 
   const newItemPermissions = {
     game_ban: [1 << 5],
     inactivity: [1 << 2, 1 << 9, 1 << 10],
-    infraction: [1 << 0, 1 << 2, 1 << 6, 1 << 7]
+    infraction: [1 << 0, 1 << 2, 1 << 6, 1 << 7],
+    user_lookup: [1 << 5, 1 << 8],
   };
 
   const newItemNames: { [k: string]: string } = {
-    game_ban: "Game Ban",
+    game_ban: "New Game Ban",
-    inactivity: "Inactivity Notice",
+    inactivity: "New Inactivity Notice",
-    infraction: "Infraction"
+    infraction: "New Infraction",
+    user_lookup: "User Lookup",
   };
 
   const typePermissions = {
     appeal: [1 << 0, 1 << 1],
     gma: [1 << 5],
     inactivity: [1 << 4, 1 << 6, 1 << 7, 1 << 11, 1 << 12],
-    report: [1 << 5]
+    report: [1 << 5],
   };
 
   const typeNames: { [k: string]: string } = {
     appeal: "Discord Appeals",
     gma: "Game Appeals",
     inactivity: "Inactivity Notices",
-    report: "Game Reports"
+    report: "Game Reports",
   };
 
   const allowedNewItems = [];
@@ -82,32 +84,32 @@ export async function loader({ context }: { context: RequestContext }) {
 
   if (!allowedTypes.length)
     throw new Response(null, {
-      status: 403
+      status: 403,
     });
 
   return {
     can_edit_ban_users: [
       "165594923586945025",
       "289372404541554689",
-      "396347223736057866"
+      "396347223736057866",
     ].includes(currentUser.id),
     departments: Object.entries(departments)
       .filter((d) => d[1] & currentUser.permissions)
       .map((arr) => arr[0]),
     entry_types: allowedTypes,
-    item_types: allowedNewItems
+    item_types: allowedNewItems,
   };
 }
 
 export function meta() {
   return [
     {
-      title: "Moderation Queue - Car Crushers"
+      title: "Moderation Queue - Car Crushers",
-    }
+    },
   ];
 }
 
-export default function() {
+export default function () {
   const pageProps = useLoaderData<typeof loader>();
   const isDesktop = useBreakpointValue({ base: false, lg: true });
   const entryTypes = [];
@@ -119,17 +121,17 @@ export default function() {
     entryTypes.push(
       <option key={type.value} value={type.value}>
         {type.name}
-      </option>
+      </option>,
     );
 
   async function updateQueue(
     queue_type: string,
     before: number,
     show_closed = false,
-    jump_item_to_top = false
+    jump_item_to_top = false,
   ): Promise<void> {
     const queueReq = await fetch(
-      `/api/mod-queue/list?before=${before}&showClosed=${show_closed}&type=${queue_type}`
+      `/api/mod-queue/list?before=${before}&showClosed=${show_closed}&type=${queue_type}`,
     );
 
     if (!queueReq.ok) {
@@ -140,7 +142,7 @@ export default function() {
         duration: 10000,
         isClosable: true,
         status: "error",
-        title: "Failed to load queue"
+        title: "Failed to load queue",
       });
 
       return;
@@ -173,7 +175,7 @@ export default function() {
             duration: 10000,
             isClosable: true,
             status: "error",
-            title: ((await itemReq.json()) as { error: string }).error
+            title: ((await itemReq.json()) as { error: string }).error,
           });
         } else {
           const itemData: { [k: string]: any } = await itemReq.json();
@@ -215,7 +217,7 @@ export default function() {
 
         case "inactivity":
           newEntries.push(
-            <InactivityNoticeCard {...(entry as InactivityNoticeProps)} />
+            <InactivityNoticeCard {...(entry as InactivityNoticeProps)} />,
           );
 
           break;
@@ -241,11 +243,16 @@ export default function() {
   } = {
     game_ban: useDisclosure(),
     inactivity: useDisclosure(),
-    infraction: useDisclosure()
+    infraction: useDisclosure(),
+    user_lookup: {
+      isOpen: false,
+      onClose: () => {},
+      onOpen: () => location.assign("/hammer"),
+    },
   };
 
   useEffect(() => {
-    (async function() {
+    (async function () {
       await updateQueue(pageProps.entry_types[0].value, before, false, true);
     })();
 
@@ -286,7 +293,7 @@ export default function() {
 
               await updateQueue(
                 target.options[target.selectedIndex].value,
-                Date.now()
+                Date.now(),
               );
             }}
           >
@@ -311,15 +318,14 @@ export default function() {
               fill="currentColor"
               viewBox="0 0 16 16"
             >
-              <path
+              <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" />
-                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>
+          <PopoverHeader>Tools</PopoverHeader>
           <PopoverBody>
             <VStack>
               {pageProps.item_types.map((item) => (