Merge branch 'main' into dmgnr/vercel

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

@@ -126,8 +126,8 @@ export function SidebarLink({
           <Checkbox
             className="mr-2"
             checked={checked}
-            onCheckedChange={async () => {
-              setChecked((x) => !x);
+            onCheckedChange={async (checked) => {
+              setChecked(checked === true);
               await toggleCheck(submission.id);
               stop();
             }}

app/(ui)/artifact/form.tsx

@@ -2,10 +2,12 @@
 
 import { useRouter } from "next/navigation";
 import posthog from "posthog-js";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { toast } from "sonner";
 import { checkEnkaStatus, submitArtifact } from "@/lib/api";
 import { shared } from "@/lib/comms";
+import type { ActionSubmitContextData } from "@/components/action-submit-provider";
+import { ActionSubmitContext } from "@/components/action-submit-provider";
 
 export function ArtifactFormWrapper({
   edit,
@@ -20,6 +22,12 @@ export function ArtifactFormWrapper({
   const [, setWarningUid] = shared.state("warning.uid");
   const [warningSrc, setWarningSrc] = shared.state("warning.src");
   const [dataHold, setDataHold] = useState<FormData>();
+  const callback = useRef<() => void>(() => {});
+  const context: ActionSubmitContextData = {
+    listenForComplete(complete) {
+      callback.current = complete;
+    },
+  };
 
   // Disable warning for 60 seconds
   shared.signal(
@@ -34,7 +42,7 @@ export function ArtifactFormWrapper({
         (data.get("character") ?? "").toString(),
       );
       console.log(data.get("uid"), data.get("character"), check);
-      setWarningUid(data.get("character")?.toString());
+      setWarningUid(data.get("uid")?.toString());
       setWarningSrc("submit");
       setDataHold(data);
       if (check) return setDialog(check);
@@ -56,12 +64,16 @@ export function ArtifactFormWrapper({
       .catch((e) => toast.error(`${e.message || e}`));
   }
   return (
-    <form
-      {...props}
-      onSubmit={(e) => {
-        e.preventDefault();
-        submit(new FormData(e.target as HTMLFormElement));
-      }}
-    />
+    <ActionSubmitContext.Provider value={context}>
+      <form
+        {...props}
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit(new FormData(e.target as HTMLFormElement)).finally(() =>
+            setTimeout(callback.current, 1000),
+          );
+        }}
+      />
+    </ActionSubmitContext.Provider>
   );
 }

app/(ui)/artifact/page.tsx

@@ -40,6 +40,7 @@ import {
 import { ArtifactFormWrapper } from "./form";
 import { LiveButton } from "./live";
 import { RulesDialog } from "./rules";
+import { ActionButton } from "@/components/action-button";
 
 export const metadata: Metadata = {
   title: "เสือกไอดีชาวบ้าน",
@@ -152,12 +153,13 @@ export default async function ArtifactFormPage({
             </div>
           </CardTitle>
         </CardHeader>
-        <CardContent>
-          <ArtifactFormWrapper
-            id="mainform"
-            edit={q ? { token: q.editToken, sub: q.id } : undefined}
-            enka={config.enka}
-          >
+        <ArtifactFormWrapper
+          id="mainform"
+          edit={q ? { token: q.editToken, sub: q.id } : undefined}
+          enka={config.enka}
+          className="contents"
+        >
+          <CardContent>
             <div className="flex flex-col gap-3">
               <div className="grid gap-2">
                 <Label htmlFor="name">ชื่อ*</Label>
@@ -221,57 +223,58 @@ export default async function ArtifactFormPage({
                 />
               </div>
             </div>
-          </ArtifactFormWrapper>
-        </CardContent>
-        <CardFooter className="flex justify-between gap-2">
-          <div className="flex gap-2">
-            <SimpleTooltip text="โดเนทลัดคิว ขั้นต่ำ 10 บาท">
-              <Link href="/donate" target="_blank" rel="noreferrer">
-                <Button variant="outline" type="button">
-                  <CircleDollarSign />
-                </Button>
-              </Link>
-            </SimpleTooltip>
-            <Tooltip>
-              <RulesDialog>
-                <TooltipTrigger asChild>
-                  <Button variant="destructive" type="button">
-                    <BookAlert />
+          </CardContent>
+          <CardFooter className="flex justify-between gap-2">
+            <div className="flex gap-2">
+              <SimpleTooltip text="โดเนทลัดคิว ขั้นต่ำ 10 บาท">
+                <Link href="/donate" target="_blank" rel="noreferrer">
+                  <Button variant="outline" type="button">
+                    <CircleDollarSign />
                   </Button>
-                </TooltipTrigger>
-              </RulesDialog>
-              <TooltipContent>อ่านกฏการลงคิว</TooltipContent>
-            </Tooltip>
-            {editing ? (
-              <Button variant="destructive" asChild>
-                <Link href="?">ยกเลิก</Link>
-              </Button>
-            ) : (
-              <Suspense>
-                <LiveButton />
-              </Suspense>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <Kbd>
-              {count} / {config.limit < 0 ? "∞" : config.limit} คิว
-            </Kbd>
-            <SimpleTooltip text="ส่งเลยจัฟลูกพี่">
-              <Button
-                type="submit"
-                form="mainform"
-                disabled={
-                  (!!q ||
-                    config.locked ||
-                    (config.limit >= 0 && count >= config.limit)) &&
-                  !editing
-                }
-              >
-                {editing ? <PencilIcon /> : <SendHorizonal />}
-              </Button>
-            </SimpleTooltip>
-          </div>
-        </CardFooter>
+                </Link>
+              </SimpleTooltip>
+              <Tooltip>
+                <RulesDialog>
+                  <TooltipTrigger asChild>
+                    <Button variant="destructive" type="button">
+                      <BookAlert />
+                    </Button>
+                  </TooltipTrigger>
+                </RulesDialog>
+                <TooltipContent>อ่านกฏการลงคิว</TooltipContent>
+              </Tooltip>
+              {editing ? (
+                <Button variant="destructive" asChild>
+                  <Link href="?">ยกเลิก</Link>
+                </Button>
+              ) : (
+                <Suspense>
+                  <LiveButton />
+                </Suspense>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Kbd>
+                {count} / {config.limit < 0 ? "∞" : config.limit} คิว
+              </Kbd>
+              <SimpleTooltip text="ส่งเลยจัฟลูกพี่">
+                <ActionButton
+                  type="submit"
+                  form="mainform"
+                  action="provider"
+                  disabled={
+                    (!!q ||
+                      config.locked ||
+                      (config.limit >= 0 && count >= config.limit)) &&
+                    !editing
+                  }
+                >
+                  {editing ? <PencilIcon /> : <SendHorizonal />}
+                </ActionButton>
+              </SimpleTooltip>
+            </div>
+          </CardFooter>
+        </ArtifactFormWrapper>
       </Card>
       {sid && !q && <ClearCookie />}
       <WarningDialog />