rubgram public side

Co-authored-by: Gunshin <[email protected]>
2025-11-27 12:12:21 -05:00
parent 45f6d06cc9
commit 8a96ea8573
44 changed files with 2140 additions and 412 deletions
@@ -0,0 +1,46 @@
+"use client";
+
+import { Copy, CopyCheck, Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function EnkaBrowser({ uid }: { uid: string }) {
+  const [id, setId] = useState(uid);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    setId(uid);
+    setReady(false);
+  }, [uid]);
+  return (
+    <div className="h-full w-full relative">
+      {!ready && (
+        <Loader2 className="animate-spin absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-8 text-muted-foreground z-100" />
+      )}
+      <iframe
+        src={`https://enka.network/u/${id}`}
+        className={cn(
+          "w-full border-0 bg-card -mt-20 h-[calc(100%+5rem)]",
+          !ready && "grayscale blur-md brightness-50 pointer-events-none",
+        )}
+        title="Enka Network"
+        onLoad={() => setReady(true)}
+      />
+    </div>
+  );
+}
+
+export function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  async function copy() {
+    if (copied) return;
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+  return (
+    <Button variant="ghost" size="icon" onClick={copy} disabled={copied}>
+      {copied ? <CopyCheck /> : <Copy />}
+    </Button>
+  );
+}
@@ -0,0 +1,58 @@
+import { eq } from "drizzle-orm";
+import Avatar from "@/components/avatar";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getArtifactConfig } from "@/lib/api";
+import { db } from "@/lib/db";
+import { characters, submissions } from "@/lib/db/schema";
+import { CopyButton, EnkaBrowser } from "./client";
+
+export default async function AdminSubmissionView({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const [sub] = await db
+    .select()
+    .from(submissions)
+    .where(eq(submissions.id, id))
+    .limit(1);
+  const [char] = await db
+    .select()
+    .from(characters)
+    .where(eq(characters.name, sub?.char || ""))
+    .limit(1);
+  const { enka } = await getArtifactConfig();
+  return (
+    <div className="p-2 h-full">
+      <div className="flex flex-col h-full w-full gap-2">
+        <div className="flex w-full justify-between gap-2">
+          <Card className="w-full pb-1 rounded-md">
+            <CardHeader>
+              <CardTitle>
+                {sub.queue}. {sub.name}
+              </CardTitle>
+              <CardDescription>{sub.comment}</CardDescription>
+            </CardHeader>
+            <CardFooter className="h-full items-end">
+              <div className="flex items-center">
+                <span className="text-gray-500">{sub.uid}</span>
+                <CopyButton text={sub.uid} />
+              </div>
+            </CardFooter>
+          </Card>
+          <Avatar char={char} />
+        </div>
+        <div className="border rounded-md h-full overflow-hidden">
+          {enka && <EnkaBrowser uid={sub?.uid || ""} />}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,230 @@
+"use client";
+
+import { useProgress } from "@bprogress/next";
+import { Lock, Unlock } from "lucide-react";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { setLimit, toggleCheck, toggleLock } from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+export function SidebarLink({
+  submission,
+  className,
+}: {
+  submission: { id: string; name: string; checked: boolean; queue: number };
+  className?: string;
+}) {
+  const { stop } = useProgress();
+  const { id } = useParams();
+  const [checked, setChecked] = useState(submission.checked);
+
+  useEffect(() => {
+    setChecked(submission.checked);
+  }, [submission.checked]);
+
+  return (
+    <Link
+      href={`/artifact/admin/${submission.id}`}
+      className={cn(
+        className,
+        id === submission.id && "bg-accent text-accent-foreground",
+      )}
+      prefetch
+      onClick={(ev) => {
+        if ((ev.target as HTMLButtonElement).type === "button") {
+          ev.preventDefault();
+        }
+      }}
+    >
+      {submission.queue}. {submission.name}
+      <SidebarMenuBadge className="pointer-events-auto">
+        <Checkbox
+          className="mr-2"
+          checked={checked}
+          onCheckedChange={async () => {
+            setChecked((x) => !x);
+            await toggleCheck(submission.id);
+            stop();
+          }}
+        />
+      </SidebarMenuBadge>
+    </Link>
+  );
+}
+
+export function LimitManager({
+  config,
+  length,
+  ...props
+}: React.ComponentProps<typeof SidebarMenu> & {
+  config: Awaited<ReturnType<typeof import("@/lib/api").getArtifactConfig>>;
+  length: number;
+}) {
+  return (
+    <SidebarMenu {...props}>
+      <SidebarMenuItem>
+        <Dialog>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton>
+                <Tooltip>
+                  {config.locked ? (
+                    <>
+                      <TooltipTrigger asChild>
+                        <Lock className="text-red-500" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>ปิดรับ</p>
+                      </TooltipContent>
+                    </>
+                  ) : config.limit >= 0 && length > config.limit ? (
+                    <>
+                      <TooltipTrigger asChild>
+                        <Lock className="text-orange-400" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>เต็มแล้ว</p>
+                      </TooltipContent>
+                    </>
+                  ) : (
+                    <>
+                      <TooltipTrigger asChild>
+                        <Unlock className="text-sky-400" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>เปิดรับ</p>
+                      </TooltipContent>
+                    </>
+                  )}
+                </Tooltip>{" "}
+                จำนวน
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="right" align="end">
+              <DialogTrigger asChild>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                  <span>ตั้ง Limit</span>
+                </DropdownMenuItem>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>ตั้ง Limit</DialogTitle>
+                </DialogHeader>
+                <form
+                  id="limit-form"
+                  action={async (data: FormData) =>
+                    setLimit(Number(data.get("limit")) || -1)
+                  }
+                >
+                  <Input
+                    id="limit"
+                    name="limit"
+                    type="number"
+                    placeholder="ไม่จำกัด"
+                    defaultValue={config.limit >= 0 ? config.limit : ""}
+                  />
+                </form>
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button variant="outline">ยกเลิก</Button>
+                  </DialogClose>
+                  <DialogClose asChild>
+                    <Button type="submit" form="limit-form">
+                      บันทึกการเปลี่ยนแปลง
+                    </Button>
+                  </DialogClose>
+                </DialogFooter>
+              </DialogContent>
+              <DropdownMenuItem onClick={toggleLock}>
+                <span>{config.locked && "เ"}ปิดรับ</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Dialog>
+        <SidebarMenuBadge>
+          {length}
+          {config.limit >= 0 ? `/${config.limit}` : ""}
+        </SidebarMenuBadge>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
+
+export function SubmissionList({
+  subs,
+}: {
+  subs: { id: string; name: string; checked: boolean; queue: number }[];
+}) {
+  const [query, setQuery] = useState("");
+  return (
+    <>
+      <Input
+        placeholder="Search..."
+        type="search"
+        onChange={(ev) => setQuery(ev.target.value.toLowerCase())}
+      />
+      {subs
+        .filter((s) => (s.queue + s.name).toLowerCase().includes(query))
+        .map((s) => (
+          <SidebarMenuButton key={s.id} asChild>
+            <SidebarLink submission={s} />
+          </SidebarMenuButton>
+        ))}
+    </>
+  );
+}
+
+export function Watcher() {
+  const router = useRouter();
+  const count = useRef<number | undefined>(undefined);
+  useEffect(() => {
+    const es = new EventSource(`/api/artifact/ev`);
+    es.addEventListener("update", () => router.refresh());
+    const interval = setInterval(() => {
+      fetch("/api/artifact/count")
+        .then((r) => r.json())
+        .then((r) => {
+          if (typeof count.current === "undefined") count.current = r;
+          if (count.current !== r) router.refresh();
+          count.current = r;
+        })
+        .catch((e) => console.error("Fetching artifact count failed", e));
+    }, 60000);
+    return () => {
+      es.close();
+      clearInterval(interval);
+    };
+  }, [router]);
+
+  return <div></div>;
+}
@@ -0,0 +1,111 @@
+import { Dice3, Trash2 } from "lucide-react";
+import { redirect } from "next/navigation";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarProvider,
+} from "@/components/ui/sidebar";
+import { getArtifactConfig, random, wipe } from "@/lib/api";
+import { adminCheck } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { submissions } from "@/lib/db/schema";
+import { LimitManager, SubmissionList, Watcher } from "./client";
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  if (!(await adminCheck())) redirect("/");
+  const subs = await db
+    .select({
+      id: submissions.id,
+      name: submissions.name,
+      checked: submissions.checked,
+      queue: submissions.queue,
+    })
+    .from(submissions)
+    .orderBy(submissions.id);
+  const config = await getArtifactConfig();
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <div className="flex justify-between items-center">
+            <b>Admin</b>
+            <div className="flex gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-8"
+                onClick={random}
+              >
+                <Dice3 size={24} className="size-6" />
+              </Button>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="ghost" size="icon" className="size-8">
+                    <Trash2 size={24} className="size-6 text-red-500" />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent className="z-101">
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      คุณมั่นใจที่จะล้างข้อมูลทั้งหมดใช่ไหม?
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      การกระทำนี้ไม่สามารถย้อนกลับได้ 
+                      เราจะลบบัญชีของท่านออกจากระบบ
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
+                    <AlertDialogAction onClick={wipe}>
+                      ดำเนินการต่อ
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>เสือกไอดีชาวบ้าน</SidebarGroupLabel>
+            <SidebarMenu>
+              <SubmissionList subs={subs} />
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarGroup>
+            <SidebarGroupLabel>การตั้งค่า</SidebarGroupLabel>
+            <LimitManager config={config} length={subs.length} />
+          </SidebarGroup>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset className="bg-transparent">
+        {children}
+        <Watcher />
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
@@ -0,0 +1,14 @@
+import generate from "@/lib/og";
+
+// Image metadata
+export const size = {
+  width: 1222,
+  height: 560,
+};
+
+export const contentType = "image/png";
+
+// Image generation
+export default async function Image() {
+  return generate({ title: "รับกรรมแทนทางบ้าน", sub: "(ฝั่งแอดมิน)" });
+}
@@ -0,0 +1,7 @@
+export const metadata = {
+  title: "เสือกไอดีชาวบ้าน (แอดมิน)",
+};
+
+export default function AdminPage() {
+  return <div></div>;
+}