qol(rg): make sublist show public queue number and active queues only

app/(ui)/rubgram/admin/client.tsx

@@ -30,11 +30,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { shared } from "@/lib/comms";
 import { sse } from "@/lib/db/sse-endpoints";
 import { cn } from "@/lib/utils";
@@ -60,10 +56,7 @@ export function SidebarLink({
   return (
     <Link
       href={`/rubgram/admin/${submission.id}`}
-      className={cn(
-        className,
-        id === submission.id && "bg-accent text-accent-foreground",
-      )}
+      className={cn(className, id === submission.id && "bg-accent text-accent-foreground")}
       prefetch={prefetch}
       onClick={(ev) => {
         if ((ev.target as HTMLButtonElement).type === "button") {
@@ -251,6 +244,7 @@ export function SubmissionList({
     name: string;
     checked: boolean;
     queue: number;
+    publicQueue: number;
     paid: boolean;
     archived: boolean;
   }[];
@@ -260,9 +254,10 @@ export function SubmissionList({
   const bottomRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
+    void debug;
     // Scrolls to the dummy div whenever 'items' changes
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, []);
+  }, [debug]);
 
   return (
     <>
@@ -274,8 +269,7 @@ export function SubmissionList({
       {subs
         .filter(
           (s) =>
-            (debug || s.paid) &&
-            (s.queue + s.name).toLowerCase().includes(query),
+            (debug || (s.paid && !s.archived)) && (s.queue + s.name).toLowerCase().includes(query),
         )
         .map((s) => (
           <SidebarMenuButton
@@ -283,7 +277,10 @@ export function SubmissionList({
             asChild
             className={cn(((debug && !s.paid) || s.archived) && "opacity-50")}
           >
-            <SidebarLink submission={s} prefetch={!s.archived} />
+            <SidebarLink
+              submission={debug ? s : { ...s, queue: s.publicQueue }}
+              prefetch={!s.archived}
+            />
           </SidebarMenuButton>
         ))}
       <div ref={bottomRef} />

app/(ui)/rubgram/admin/layout.tsx

@@ -43,6 +43,7 @@ export default async function AdminLayout({
       name: endgameSubmissions.name,
       checked: endgameSubmissions.checked,
       queue: endgameSubmissions.queue,
+      publicQueue: endgameSubmissions.publicQueue,
       paid: endgameSubmissions.paid,
       archived: endgameSubmissions.archived,
     })

app/(ui)/rubgram/page.tsx

@@ -1,4 +1,4 @@
-import { and, eq, gt, lt, not, or, sql } from "drizzle-orm";
+import { and, eq, gt, lt, not, or } from "drizzle-orm";
 import { AlertCircle, BookAlert, CircleDollarSign, SendHorizonal, X } from "lucide-react";
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
@@ -66,14 +66,7 @@ export default async function EndgamePage() {
         .select({
           // Using endgame.submissions.queue here because
           // ${endgameSubmissions.queue} does not work
-          queue: sql<number>`
-            ${endgameSubmissions.queue} - (
-              select count(*)
-              from ${endgameSubmissions} as e2
-              where e2.checked = true
-              and e2.queue < endgame.submissions.queue
-            )
-          `.as("queue"),
+          queue: endgameSubmissions.publicQueue,
           paid: endgameSubmissions.paid,
           price: endgameSubmissions.price,
           expires: endgameSubmissions.expires,

lib/db/schema.ts

@@ -134,6 +134,17 @@ export const endgameSubmissions = endgame.table("submissions", {
     }),
   expires: timestamp().$defaultFn(() => new Date(Date.now() + 20 * 60 * 1000)), // 20 minutes to pay
   queue: serial(),
+  publicQueue: integer()
+    .notNull()
+    .generatedAlwaysAs(
+      (): SQL => sql`
+        ${endgameSubmissions.queue} - (
+          select count(*)
+          from ${endgameSubmissions} as e2
+          where e2.checked = true
+          and e2.queue < endgame.submissions.queue
+        )`,
+    ),
   server: endgameServer().notNull(),
   service: text()
     .references(() => endgameTypes.id)
@@ -146,10 +157,7 @@ export const endgameSubmissions = endgame.table("submissions", {
     .notNull()
     .generatedAlwaysAs(
       (): SQL =>
-        or(
-          lte(endgameSubmissions.price, sql.raw("0")),
-          isNotNull(endgameSubmissions.slip),
-        )!,
+        or(lte(endgameSubmissions.price, sql.raw("0")), isNotNull(endgameSubmissions.slip))!,
     ),
   archived: boolean().notNull().default(false),
 });