Return mobile client hint and user agent in thrown responses and handle direct entity requests

app/routes/mod-queue.tsx

@@ -26,11 +26,19 @@ import NewInactivityNotice from "../../components/NewInactivityNotice.js";
 
 export async function loader({ context }: { context: RequestContext }) {
   const { current_user: currentUser } = context.data;
+  const ch = context.request.headers.get("sec-ch-ua-mobile");
+  const ua = context.request.headers.get("user-agent");
 
   if (!currentUser)
-    throw new Response(null, {
-      status: 401,
-    });
+    throw new Response(
+      JSON.stringify({
+        ch,
+        ua,
+      }),
+      {
+        status: 401,
+      }
+    );
 
   const departments = {
     DM: 1 << 2,
@@ -77,7 +85,7 @@ export async function loader({ context }: { context: RequestContext }) {
   }
 
   if (!allowedTypes.length)
-    throw new Response(null, {
+    throw new Response(JSON.stringify({ ch, ua }), {
       status: 403,
     });
 
@@ -119,7 +127,7 @@ export default function () {
 
   async function updateQueue(
     queue_type: string,
-    before = 0,
+    before = Date.now(),
     show_closed = false
   ): Promise<void> {
     const queueReq = await fetch(
@@ -140,9 +148,33 @@ export default function () {
       return;
     }
 
+    const searchParams = new URLSearchParams(location.search);
+    const itemId = searchParams.get("id");
+    const itemType = searchParams.get("type");
+
     const entryData: { [k: string]: any }[] = await queueReq.json();
     const newEntries = [...entries];
 
+    if (itemId && itemType && ["appeal", "gma", "report"].includes(itemType)) {
+      const itemReq = await fetch(`/api/mod-queue/${itemType}/${itemId}`);
+
+      if (!itemReq.ok) {
+        useToast()({
+          description: ((await itemReq.json()) as { error: string }).error,
+          duration: 10000,
+          isClosable: true,
+          status: "error",
+          title: "Failed to load item with id " + itemId,
+        });
+      } else {
+        const itemData: { [k: string]: any } = await itemReq.json();
+
+        entryData.unshift(itemData);
+      }
+    }
+
+    if (!entryData.length) return;
+
     for (const entry of entryData) {
       switch (queue_type) {
         case "appeal":
@@ -180,6 +212,10 @@ export default function () {
   };
 
   useEffect(() => {
+    (async function () {
+      await updateQueue(pageProps.entry_types[0].value);
+    })();
+
     const searchParams = new URLSearchParams(location.search);
     const modal = searchParams.get("modal");