Restructure layout and add widget

app/(ui)/artifact/live.tsx

@@ -2,9 +2,9 @@ import { TooltipContent, TooltipTrigger } from "@radix-ui/react-tooltip";
 import { TvMinimalPlay } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
+import type { YoutubeLiveInfo } from "@/app/api/live/route";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
-import type { YoutubeLiveInfo } from "../api/live/route";
 
 export async function LiveButton() {
   const live: YoutubeLiveInfo = await fetch(`http://localhost:3000/api/live`)

app/(ui)/artifact/page.tsx

@@ -24,7 +24,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 { PageTransition } from "../transition";
+import { PageTransition } from "../../transition";
 import { CharacterChooser, ClearCookie, Disclaimer } from "./client";
 import { ArtifactFormWrapper } from "./form";
 import { LiveButton } from "./live";

app/(ui)/endgame/page.tsx

@@ -0,0 +1,13 @@
+export default async function EndgamePage() {
+  return (
+    <div className="flex h-full w-full justify-center items-center">
+      <div className="rounded flex flex-col bg-card border p-2">
+        <form>
+          <div className="grid gap-2">
+            
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

app/(ui)/layout.tsx

@@ -0,0 +1,22 @@
+import { AnimatePresence } from "framer-motion";
+import Image from "next/image";
+import { Toaster } from "sonner";
+import Background from "#/bg.jpg";
+import Providers, { VersionCheck } from "../client";
+
+export default function UiLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Image
+        src={Background}
+        alt="Background"
+        className="z-[-1] opacity-20 object-cover fixed top-0 left-0 w-full h-full"
+      />
+      <Providers>
+        <AnimatePresence mode="wait">{children}</AnimatePresence>
+        <VersionCheck />
+      </Providers>
+      <Toaster theme="dark" richColors closeButton />
+    </>
+  );
+}

app/(ui)/page.tsx

@@ -13,7 +13,7 @@ import {
   ItemMedia,
   ItemTitle,
 } from "@/components/ui/item";
-import { PageTransition } from "./transition";
+import { PageTransition } from "../transition";
 
 export default function Home() {
   return (

app/(ui)/tl/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { db } from "@/lib/db";
 import { tierlistTypes, tierlistVersions } from "@/lib/db/schema";
-import { PageTransition } from "../transition";
+import { PageTransition } from "../../transition";
 
 export const metadata = {
   title: "จัดเทียร์ลิสต์",

app/api/active/route.ts

@@ -2,7 +2,7 @@ import { sse } from "@/lib/utils";
 
 const VERSION = crypto.randomUUID();
 
-export function GET() {
+export function GET({ signal }: Request) {
   sse.publish(VERSION, {
     topic: "active",
     event: "version",
@@ -16,5 +16,6 @@ export function GET() {
     onDisconnect() {
       sse.publish(sse.count("active"), { topic: "active", event: "count" });
     },
+    signal,
   });
 }

app/api/artifact/ev/route.ts

@@ -1,8 +1,5 @@
-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/endgame/page.tsx

@@ -1,3 +0,0 @@
-export default async function EndgamePage() {
-  return <span>WIP</span>;
-}

app/error.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import Qiqi from "#/assets/qiqi.webp";
+import Background from "#/bg.jpg";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
@@ -45,52 +46,59 @@ export default function ErrorPage({
   }, [error]);
 
   return (
-    <div className="h-full w-full bg-[#8225] backdrop-hue-rotate-60 backdrop-blur-md flex flex-col gap-2 justify-center items-center">
+    <>
-      <div className="h-full flex flex-col gap-2 justify-center items-center">
+      <Image
-        <div className="p-4 pb-12 bg-white shadow-lg rounded-sm rotate-1 max-sm:landscape:hidden">
+        src={Background}
-          <Image
+        alt="Background"
-            src={Qiqi}
+        className="z-[-1] opacity-20 object-cover fixed top-0 left-0 w-full h-full"
-            alt="Qiqi"
+      />
-            className="bg-gray-300 w-full vintage-filter"
+      <div className="h-full w-full bg-[#8225] backdrop-hue-rotate-60 backdrop-blur-md flex flex-col gap-2 justify-center items-center">
-          />
+        <div className="h-full flex flex-col gap-2 justify-center items-center">
-        </div>
+          <div className="p-4 pb-12 bg-white shadow-lg rounded-sm rotate-1 max-sm:landscape:hidden">
-        <h2 className="font-bold text-2xl">เกิดข้อผิดพลาดขึ้น</h2>
+            <Image
-        <span>{message || <Skeleton className="h-6 w-40" />}</span>
+              src={Qiqi}
-        <div className="flex gap-2">
+              alt="Qiqi"
-          <Link href="/">
+              className="bg-gray-300 w-full vintage-filter"
+            />
+          </div>
+          <h2 className="font-bold text-2xl">เกิดข้อผิดพลาดขึ้น</h2>
+          <span>{message || <Skeleton className="h-6 w-40" />}</span>
+          <div className="flex gap-2">
+            <Link href="/">
+              <Button
+                onClick={() => {
+                  goHome(true);
+                }}
+                disabled={goingHome}
+                variant="destructive"
+              >
+                {goingHome ? <Spinner /> : <Home />}
+                กลับหน้าแรก
+              </Button>
+            </Link>
             <Button
-              onClick={() => {
+              onClick={
-                goHome(true);
+                // Attempt to recover by trying to re-render the segment
-              }}
+                () => {
-              disabled={goingHome}
+                  setLoading(true);
-              variant="destructive"
+                  setTimeout(() => reset(), 500);
-            >
+                }
-              {goingHome ? <Spinner /> : <Home />}
-              กลับหน้าแรก
-            </Button>
-          </Link>
-          <Button
-            onClick={
-              // Attempt to recover by trying to re-render the segment
-              () => {
-                setLoading(true);
-                setTimeout(() => reset(), 500);
               }
-            }
+              disabled={loading}
-            disabled={loading}
+              variant="secondary"
-            variant="secondary"
+            >
-          >
+              {loading ? <Spinner /> : <RefreshCw />}
-            {loading ? <Spinner /> : <RefreshCw />}
+              ลองใหม่
-            ลองใหม่
+            </Button>
-          </Button>
+          </div>
         </div>
+        <Link href="https://status.gunshiz.top" className="m-2">
+          <Button variant="link" className="text-secondary-foreground">
+            <Activity />
+            สถานะเว็บไซต์
+          </Button>
+        </Link>
       </div>
-      <Link href="https://status.gunshiz.top" className="m-2">
+    </>
-        <Button variant="link" className="text-secondary-foreground">
-          <Activity />
-          สถานะเว็บไซต์
-        </Button>
-      </Link>
-    </div>
   );
 }

app/layout.tsx

@@ -1,11 +1,6 @@
 import type { Metadata } from "next";
 import { Anuphan, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { AnimatePresence } from "framer-motion";
-import Image from "next/image";
-import { Toaster } from "sonner";
-import Background from "#/bg.jpg";
-import Providers, { VersionCheck } from "./client";
 
 const anuphan = Anuphan({
   variable: "--font-anuphan",
@@ -40,16 +35,7 @@ export default function RootLayout({
       <body
         className={`${anuphan.variable} ${geistMono.variable} font-sans antialiased h-full`}
       >
-        <Image
+        {children}
-          src={Background}
-          alt="Background"
-          className="z-[-1] opacity-20 object-cover fixed top-0 left-0 w-full h-full"
-        />
-        <Providers>
-          <AnimatePresence mode="wait">{children}</AnimatePresence>
-          <VersionCheck />
-        </Providers>
-        <Toaster theme="dark" richColors closeButton />
       </body>
     </html>
   );

app/not-found.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import Lost from "#/assets/lost_traveler.webp";
+import Background from "#/bg.jpg";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
@@ -36,38 +37,45 @@ export default function ErrorPage() {
   }, []);
 
   return (
-    <div className="h-full w-full bg-[#2225] backdrop-grayscale backdrop-blur-md flex flex-col gap-2 justify-center items-center">
+    <>
-      <div className="p-4 pb-12 bg-white shadow-lg rounded-sm rotate-1 max-sm:landscape:hidden">
+      <Image
-        <Image
+        src={Background}
-          src={Lost}
+        alt="Background"
-          alt="Lost Traveler"
+        className="z-[-1] opacity-20 object-cover fixed top-0 left-0 w-full h-full"
-          className="bg-gray-300 w-64 h-64 vintage-filter"
+      />
-          width={256}
+      <div className="h-full w-full bg-[#2225] backdrop-grayscale backdrop-blur-md flex flex-col gap-2 justify-center items-center">
-          height={256}
+        <div className="p-4 pb-12 bg-white shadow-lg rounded-sm rotate-1 max-sm:landscape:hidden">
-        />
+          <Image
+            src={Lost}
+            alt="Lost Traveler"
+            className="bg-gray-300 w-64 h-64 vintage-filter"
+            width={256}
+            height={256}
+          />
+        </div>
+        <h2 className="font-bold text-2xl">404 ไม่พบหน้านี้</h2>
+        <span>{message || <Skeleton className="h-6 w-40" />}</span>
+        <div className="flex gap-2">
+          <Link href="/">
+            <Button
+              onClick={() => {
+                goHome(true);
+              }}
+              disabled={goingHome}
+              variant="destructive"
+            >
+              {goingHome ? <Spinner /> : <Home />}
+              กลับหน้าแรก
+            </Button>
+          </Link>
+          <Link href="https://status.gunshiz.top">
+            <Button variant="link" className="text-secondary-foreground">
+              <Activity />
+              สถานะเว็บไซต์
+            </Button>
+          </Link>
+        </div>
       </div>
-      <h2 className="font-bold text-2xl">404 ไม่พบหน้านี้</h2>
+    </>
-      <span>{message || <Skeleton className="h-6 w-40" />}</span>
-      <div className="flex gap-2">
-        <Link href="/">
-          <Button
-            onClick={() => {
-              goHome(true);
-            }}
-            disabled={goingHome}
-            variant="destructive"
-          >
-            {goingHome ? <Spinner /> : <Home />}
-            กลับหน้าแรก
-          </Button>
-        </Link>
-        <Link href="https://status.gunshiz.top">
-          <Button variant="link" className="text-secondary-foreground">
-            <Activity />
-            สถานะเว็บไซต์
-          </Button>
-        </Link>
-      </div>
-    </div>
   );
 }

app/widget/artifact-count/page.tsx

@@ -0,0 +1,16 @@
+import { Watcher } from "@/app/(ui)/artifact/admin/client";
+import { getArtifactConfig } from "@/lib/api";
+import { db } from "@/lib/db";
+import { submissions } from "@/lib/db/schema";
+
+export default async function ArtifactCountWidget() {
+  const config = await getArtifactConfig();
+  const count = await db.$count(submissions);
+
+  return (
+    <span className="p-1">
+      {count} / {config.limit < 0 ? "∞" : config.limit}
+      <Watcher />
+    </span>
+  );
+}

lib/comms.tsx

@@ -80,10 +80,14 @@ export default function CommsProvider({
 export const comms = {
   var(name: keyof WebsiteComms) {
     const comms = use(CommsContext);
-    if(!comms.active) {
+    if (!comms.active) {
-      console.warn("Inter-component communication used outside of provider. Using local state instead.");
+      console.warn(
+        "Inter-component communication used outside of provider. Using local state instead.",
+      );
     }
-    const [state, setState] = useState(comms.active?comms.get(name): undefined);
+    const [state, setState] = useState(
+      comms.active ? comms.get(name) : undefined,
+    );
     useEffect(() => {
       function listener(value: WebsiteComms[typeof name]) {
         setState(value);
@@ -97,7 +101,7 @@ export const comms = {
         | ((prev: WebsiteComms[typeof name]) => WebsiteComms[typeof name]),
     ) {
       const v = typeof value === "function" ? value(comms.get(name)) : value;
-      if(comms.active) comms.set(name, v);
+      if (comms.active) comms.set(name, v);
       else setState(v);
     }
 

lib/utils.ts

@@ -13,37 +13,40 @@ type ServerEventSource = {
   id: number;
 };
 
-declare global {
-  var sseList: ServerEventSource[];
-}
-
-if (!globalThis.sseList) {
-  globalThis.sseList = [];
-}
-
 export class EventSourceManager {
+  private list: ServerEventSource[] = [];
   private id = 0;
   new(
     topic = "_global",
-    { onDisconnect }: { onDisconnect?: () => void } = {},
+    {
+      onDisconnect,
+      signal,
+    }: { onDisconnect?: () => void; signal?: AbortSignal } = {},
   ): Response {
     let timeout: NodeJS.Timeout | undefined;
     this.id++;
     if (this.id > 100000) this.id = 0;
     const id = this.id;
-    console.log(` SUB ${topic}#${id}`);
+    console.log(` SUB ${topic}#${id} (C${this.list.length})`);
 
     const push = (s: ServerEventSource) => {
-      globalThis.sseList.push(s);
+      this.list.push(s);
     };
     const remove = (id: number) => {
-      globalThis.sseList = globalThis.sseList.toSpliced(
+      if (this.list.findIndex((e) => e.id === id) < 0) return;
-        globalThis.sseList.findIndex((e) => e.id === id),
+      console.log(` DSC ${topic}#${id}`);
+      this.list = this.list.toSpliced(
+        this.list.findIndex((e) => e.id === id),
         1,
       );
       onDisconnect?.();
-      console.log(` DSC ${topic}#${id}`);
     };
+
+    signal?.addEventListener("abort", () => {
+      clearInterval(timeout);
+      remove(id);
+    });
+
     return new Response(
       new ReadableStream({
         start(controller) {
@@ -66,6 +69,7 @@ export class EventSourceManager {
             id,
           };
           timeout = setInterval(() => {
+            if (controller.desiredSize === null) return res.close();
             try {
               res.write(`:ping\n\n`);
             } catch {
@@ -74,6 +78,10 @@ export class EventSourceManager {
           }, 5000);
           push(res);
         },
+        cancel() {
+          clearTimeout(timeout);
+          remove(id);
+        },
       }),
       {
         headers: {
@@ -92,7 +100,7 @@ export class EventSourceManager {
   ) {
     console.log(` PUB #${topic}`);
     setImmediate(() => {
-      for (const s of globalThis.sseList) {
+      for (const s of this.list) {
         if (s.topic !== topic) continue;
         try {
           s.send(data, event);
@@ -102,7 +110,7 @@ export class EventSourceManager {
   }
 
   count(topic = "_global") {
-    return sseList.reduce((c, s) => c + (s.topic === topic ? 1 : 0), 0);
+    return this.list.reduce((c, s) => c + (s.topic === topic ? 1 : 0), 0);
   }
 }