My fixing attempt #1

app/api/artifact/ev/route.ts

@@ -0,0 +1,8 @@
+import { notFound } from "next/navigation";
+import { apiAuthCheck } from "@/lib/auth";
+import { sse } from "@/lib/utils";
+
+export async function GET() {
+  if (!apiAuthCheck()) return notFound();
+  return sse.new("artifact-ev");
+}

app/artifact/admin/client.tsx

@@ -2,8 +2,8 @@
 
 import { Lock, Unlock } from "lucide-react";
 import Link from "next/link";
-import { useParams } from "next/navigation";
-import { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -44,6 +44,7 @@ export function SidebarLink({
   className?: string;
 }) {
   const { id } = useParams();
+  const router = useRouter();
   return (
     <Link
       href={`/artifact/admin/${submission.id}`}
@@ -57,7 +58,10 @@ export function SidebarLink({
         <Checkbox
           className="mr-2"
           checked={submission.checked}
-          onCheckedChange={() => toggleCheck(submission.id)}
+          onCheckedChange={async () => {
+            await toggleCheck(submission.id);
+            router.refresh();
+          }}
         />
       </SidebarMenuBadge>
     </Link>
@@ -184,4 +188,15 @@ export function SubmissionList({
         ))}
     </>
   );
+}
+
+export function Watcher() {
+  const router = useRouter();
+  useEffect(() => {
+    const es = new EventSource(`/api/artifact/ev`);
+    es.addEventListener("update", () => router.refresh());
+    return () => es.close();
+  }, [router]);
+
+  return <div></div>;
 }

app/artifact/admin/layout.tsx

@@ -1,4 +1,15 @@
 import { Dice3, Trash2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
   Sidebar,
@@ -13,7 +24,7 @@ import {
 import { getArtifactConfig, random, wipe } from "@/lib/api";
 import { db } from "@/lib/db";
 import { submissions } from "@/lib/db/schema";
-import { LimitManager, SubmissionList } from "./client";
+import { LimitManager, SubmissionList, Watcher } from "./client";
 
 export default async function AdminLayout({
   children,
@@ -45,14 +56,30 @@ export default async function AdminLayout({
               >
                 <Dice3 size={24} className="size-6" />
               </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-8"
-                onClick={wipe}
-              >
-                <Trash2 size={24} className="size-6 text-red-500" />
-              </Button>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="ghost" size="icon" className="size-8">
+                    <Trash2 size={24} className="size-6 text-red-500" />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      Are you absolutely sure?
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This action cannot be undone. This will permanently delete
+                      your account and remove your data from our servers.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction onClick={wipe}>
+                      Continue
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
             </div>
           </div>
         </SidebarHeader>
@@ -71,7 +98,10 @@ export default async function AdminLayout({
           </SidebarGroup>
         </SidebarFooter>
       </Sidebar>
-      <SidebarInset className="bg-transparent">{children}</SidebarInset>
+      <SidebarInset className="bg-transparent">
+        {children}
+        <Watcher />
+      </SidebarInset>
     </SidebarProvider>
   );
 }

app/artifact/client.tsx

@@ -122,3 +122,8 @@ export function Disclaimer() {
     </Blocker>
   );
 }
+
+export async function ClearCookie() {
+  cookieStore.delete("sid");
+  return <></>;
+}

app/artifact/form.tsx

@@ -7,7 +7,6 @@ import { submitArtifact } from "@/lib/api";
 export function ArtifactFormWrapper(props: React.ComponentProps<"form">) {
   const router = useRouter();
   async function submit(data: FormData) {
-    console.log(Object.fromEntries(data.entries()));
     submitArtifact(data)
       .then((q) => {
         if (typeof q === "string") return toast.error(q);

app/artifact/page.tsx

@@ -23,7 +23,7 @@ import { Tooltip, TooltipContent } from "@/components/ui/tooltip";
 import { getArtifactConfig } from "@/lib/api";
 import { db } from "@/lib/db";
 import { characters, submissions } from "@/lib/db/schema";
-import { CharacterChooser, Disclaimer } from "./client";
+import { CharacterChooser, ClearCookie, Disclaimer } from "./client";
 import { ArtifactFormWrapper } from "./form";
 import { LiveButton } from "./live";
 import { RulesDialog } from "./rules";
@@ -37,7 +37,6 @@ export default async function ArtifactFormPage() {
         .from(submissions)
         .where(eq(submissions.id, sid.value))
     : [];
-  if (sid && !q) cookie.delete("sid");
   const config = await getArtifactConfig();
   const count = await db.$count(submissions);
 
@@ -198,6 +197,7 @@ export default async function ArtifactFormPage() {
           </Tooltip>
         </CardFooter>
       </Card>
+      {sid && !q && <ClearCookie />}
     </div>
   );
 }

lib/api.ts

@@ -12,6 +12,7 @@ import {
   settings,
   submissions,
 } from "./db/schema";
+import { sse } from "./utils";
 
 export async function getCharacters(chars: string[]) {
   return await db
@@ -63,6 +64,7 @@ export async function submitArtifact(formData: FormData) {
     })
     .returning({ queue: submissions.queue, id: submissions.id });
   revalidatePath("/artifact/admin");
+  sse.publish({}, { topic: "artifact-ev", event: "update" });
   return queue;
 }
 
@@ -113,6 +115,9 @@ export async function setLimit(limit: number) {
 export async function wipe() {
   if (!(await apiAuthCheck())) throw "Unauthorized";
   await db.delete(submissions);
+  await db.execute(
+    sql`ALTER SEQUENCE artifact.submissions_queue_seq RESTART WITH 1`,
+  );
   revalidatePath("/artifact/admin");
   redirect("/artifact/admin");
 }

lib/utils.ts

@@ -1,6 +1,95 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+
+type ServerEventSource = {
+  send: (data: object, event?: string) => void;
+  write: (msg: string) => void;
+  close: () => void;
+  topic: string;
+  id: number;
+};
+
+declare global {
+  var sseList: ServerEventSource[];
+}
+
+if (!globalThis.sseList) {
+  globalThis.sseList = [];
+}
+
+export class EventSourceManager {
+  private id = 0;
+  new(topic = "_global"): Response {
+    let timeout: NodeJS.Timeout | undefined;
+    this.id++;
+    if (this.id > 100000) this.id = 0;
+    const id = this.id;
+
+    const push = (s: ServerEventSource) => {
+      globalThis.sseList.push(s);
+    };
+    const remove = (id: number) => {
+      globalThis.sseList = globalThis.sseList.toSpliced(
+        globalThis.sseList.findIndex((e) => e.id === id),
+        1,
+      );
+    };
+    return new Response(
+      new ReadableStream({
+        start(controller) {
+          const encoder = new TextEncoder();
+          // Register this client
+          const res = {
+            send: (data: object, event?: string) =>
+              res.write(
+                `${event ? `event: ${event}\n` : ""}data: ${JSON.stringify(data)}\n\n`,
+              ),
+            write: (msg: string) => controller.enqueue(encoder.encode(msg)),
+            close: () => {
+              try {
+                controller.close();
+              } catch {}
+              clearTimeout(timeout);
+              remove(res.id);
+            },
+            topic,
+            id,
+          };
+          timeout = setInterval(() => {
+            try {
+              res.write(`:ping\n\n`);
+            } catch {
+              res.close();
+            }
+          }, 5000);
+          push(res);
+        },
+      }),
+      {
+        headers: {
+          "Content-Type": "text/event-stream",
+          "Cache-Control": "no-cache",
+          Connection: "keep-alive",
+          "X-Accel-Buffering": "no",
+        },
+      },
+    );
+  }
+  publish(
+    data: object,
+    { event, topic = "_global" }: { event?: string; topic?: string },
+  ) {
+    for (const s of globalThis.sseList) {
+      if (s.topic !== topic) continue;
+      try {
+        s.send(data, event);
+      } catch {}
+    }
+  }
+}
+
+export const sse = new EventSourceManager();