feat: UI Improvements

fix: remove `ViewTransition`'s weird zooming effect caused by difference in page height style: move home page footer to a more appropriate location style: re-position home page buttons to be flex feat: start working on slip page, renamed old "archive" table to a more appropriate name "expired". fix(rubgram): add descriptive label for cancel button feat(rules): add link to privacy policy
2026-02-03 13:07:51 +07:00
parent 3f7528d19f
commit 16cf6235e6
8 changed files with 187 additions and 119 deletions
@@ -1,4 +1,5 @@
 import type * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Link } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
@@ -33,6 +34,11 @@ export function RulesDialog({
          สามารถดูได้สูงสุด 8 ตัว
          <br />
          4. โดเนทขั้นต่ำ 10 บาท หากโดเนทมา แล้วลงคิวไปแล้ว แจ้งชื่อที่ลงไปในคิวมาด้วย
+          <br />
+          5. โดยการกดตกลงจะถือเป็นการยอมรับ{" "}
+          <span className="text-blue-500 underline">
+            <Link href="https://sudloh.com/privacy">Privacy policy</Link>
+          </span>
        </p>
        <DialogFooter>
          <DialogClose asChild>
@@ -16,10 +16,10 @@ export default async function UiLayout({
      <Image
        src={Background}
        alt="Background"
-        className="z-[-1] opacity-20 object-cover fixed top-0 left-0 w-full h-full"
+        className="z-[-1] opacity-20 object-cover fixed top-0 left-0 w-full h-full min-h-dvh"
      />
      <Providers>
-        <ViewTransition enter="slide-in">{children}</ViewTransition>
+        <ViewTransition name="fade">{children}</ViewTransition>
        <VersionCheck />
        <SentryDevToolbar />
        <Navbar />
@@ -11,118 +11,119 @@ import { cn } from "@/lib/utils";

 export default function Home() {
  return (
-    <div className="max-w-4xl w-full mx-auto flex flex-col">
-      <section>
-        <center>
-          <Link href="https://www.youtube.com/@Genshinmaichaigamemurtur">
-            <Image
-              src={Banner}
-              alt="Banner"
-              className="rounded-t-xl mt-24 w-3/4 sm:w-125"
-              width={500}
-              height={100}
-              fetchPriority="high"
-            />
-          </Link>
-        </center>
-      </section>
+    <div className="flex w-full justify-center">
+      <div className="max-w-4xl w-full mx-auto flex flex-col min-h-dvh">
+        <section>
+          <center>
+            <Link href="https://www.youtube.com/@Genshinmaichaigamemurtur">
+              <Image
+                src={Banner}
+                alt="Banner"
+                className="rounded-t-xl mt-24 w-3/4 sm:w-125"
+                width={500}
+                height={100}
+                fetchPriority="high"
+              />
+            </Link>
+          </center>
+        </section>

-      <div className="grid grid-cols-2 flex-wrap my-10">
-        <HomeLink
-          name="เสือกไอดีชาวบ้าน"
-          desc="ระบบลงคิวดูอาร์ติแฟกต์เกนชินในไลฟ์สตรีม"
-          href="/artifact"
-          logo={ArtifactLogo}
-        />
-        <HomeLink
-          name="รับกรรมแทนคนดู"
-          desc={
-            <>
-              รับเล่นคอนเท้น Endgame แทนคนดู{" "}
-              <span className="text-red-500">ไม่ฟรีนะคับ</span>
-            </>
-          }
-          href="/rubgram"
-          logo={RubgramLogo}
-        />
-        <HomeLink
-          name="จัดเทียร์ลิสต์อบิส"
-          desc="ระบบจัดเทียร์ลิสต์ตัวละครของคอนเท้น Abyss และ Stygain"
-          href="/tl"
-          logo={TierlistLogo}
-          className="col-span-2"
-        />
-      </div>
-      <footer className="text-muted-foreground">
-        <div className="flex justify-between flex-col text-center gap-2 sm:flex-row sm:text-left">
-          <span className="text-sm my-auto">
-            buzz.sudloh.com is not affiliated with HoYoverse. Game content
-            <br />
-            and materials are trademarks and copyrights of HoYoverse.
-          </span>
-          <div className="flex gap-2 justify-center sm:justify-start">
-            <Link
-              href="https://git.dgnr.us/astral/buzz"
-              className="my-auto"
-              target="_blank"
-            >
-              <svg
-                role="img"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-                className="fill-current hover:fill-white w-5 mx-auto"
+        <div className="flex flex-wrap my-10">
+          <HomeLink
+            name="เสือกไอดีชาวบ้าน"
+            desc="ระบบลงคิวดูอาร์ติแฟกต์เกนชินในไลฟ์สตรีม"
+            href="/artifact"
+            logo={ArtifactLogo}
+          />
+          <HomeLink
+            name="รับกรรมแทนคนดู"
+            desc={
+              <>
+                รับเล่นคอนเท้น Endgame แทนคนดู{" "}
+                <span className="text-red-500">ไม่ฟรีนะคับ</span>
+              </>
+            }
+            href="/rubgram"
+            logo={RubgramLogo}
+          />
+          <HomeLink
+            name="จัดเทียร์ลิสต์อบิส"
+            desc="ระบบจัดเทียร์ลิสต์ตัวละครของคอนเท้น Abyss และ Stygain"
+            href="/tl"
+            logo={TierlistLogo}
+          />
+        </div>
+        <footer className="text-muted-foreground h-full flex flex-col justify-end pb-3 md:justify-center">
+          <div className="flex justify-between flex-col text-center gap-2 sm:flex-row sm:text-left">
+            <span className="text-sm my-auto">
+              buzz.sudloh.com is not affiliated with HoYoverse. Game content
+              <br />
+              and materials are trademarks and copyrights of HoYoverse.
+            </span>
+            <div className="flex gap-2 justify-center sm:justify-start">
+              <Link
+                href="https://git.dgnr.us/astral/buzz"
+                className="my-auto"
+                target="_blank"
              >
-                <title>GitHub</title>
-                <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-              </svg>
-              GitHub
-            </Link>
-            <Link
-              href="https://discord.gg/MWBk4JkefF"
-              className="my-auto"
-              target="_blank"
-            >
-              <svg
-                role="img"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-                className="fill-current hover:fill-white w-5 mx-auto"
+                <svg
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="fill-current hover:fill-white w-5 mx-auto"
+                >
+                  <title>GitHub</title>
+                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                </svg>
+                GitHub
+              </Link>
+              <Link
+                href="https://discord.gg/MWBk4JkefF"
+                className="my-auto"
+                target="_blank"
              >
-                <title>Discord</title>
-                <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-              </svg>
-              Discord
-            </Link>
-            <div className="flex flex-col text-xs justify-around mb-1.5">
-              <span>Made with:</span>
-              <div className="flex gap-1 justify-evenly">
-                <Link href="https://nextjs.org" target="_blank">
-                  <svg
-                    role="img"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="fill-white w-5"
-                  >
-                    <title>Next.js</title>
-                    <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
-                  </svg>
-                </Link>
-                <Link href="https://tailwindcss.com" target="_blank">
-                  <svg
-                    role="img"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="fill-sky-400 w-5"
-                  >
-                    <title>Tailwind CSS</title>
-                    <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
-                  </svg>
-                </Link>
+                <svg
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="fill-current hover:fill-white w-5 mx-auto"
+                >
+                  <title>Discord</title>
+                  <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+                </svg>
+                Discord
+              </Link>
+              <div className="flex flex-col text-xs justify-around mb-1.5">
+                <span>Made with:</span>
+                <div className="flex gap-1 justify-evenly">
+                  <Link href="https://nextjs.org" target="_blank">
+                    <svg
+                      role="img"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="fill-white w-5"
+                    >
+                      <title>Next.js</title>
+                      <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
+                    </svg>
+                  </Link>
+                  <Link href="https://tailwindcss.com" target="_blank">
+                    <svg
+                      role="img"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="fill-sky-400 w-5"
+                    >
+                      <title>Tailwind CSS</title>
+                      <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
+                    </svg>
+                  </Link>
+                </div>
              </div>
            </div>
          </div>
-        </div>
-      </footer>
+        </footer>
+      </div>
    </div>
  );
 }
@@ -153,7 +154,7 @@ function HomeLink({
          width={200}
          height={200}
        />
-        <span>{name}</span>
+        <span className="md:hidden block visible text-xs">{name}</span>
      </Link>
    </SimpleTooltip>
  );
@@ -12,6 +12,7 @@ import { ps } from "@/lib/db/redis";
 import {
  endgameArchive,
  endgameDiscord,
+  endgameExpired,
  endgameSettings,
  endgameSlips,
  endgameSubmissions,
@@ -30,10 +31,23 @@ const {

 export async function wipe() {
  if (!(await adminCheck())) throw "Unauthorized";
-  await db.delete(endgameSubmissions);
-  await db.execute(
-    sql`ALTER SEQUENCE endgame.submissions_queue_seq RESTART WITH 1`,
-  );
+  await db.transaction(async (tx) => {
+    const deleted = await tx.delete(endgameSubmissions).returning();
+    await tx.execute(
+      sql`ALTER SEQUENCE endgame.submissions_queue_seq RESTART WITH 1`,
+    );
+    const [{ maxRound }] = await db
+      .select({ maxRound: sql<number>`MAX(${endgameArchive.round})` })
+      .from(endgameArchive);
+    await db.insert(endgameArchive).values(
+      deleted
+        .filter((e) => e.paid)
+        .map((s) => ({
+          ...s,
+          round: maxRound + 1,
+        })),
+    );
+  });
  revalidatePath("/rubgram/admin");
  revalidatePath("/rubgram");

@@ -227,8 +241,8 @@ export async function submitEndgamePayment(formData: EndgamePaymentFormData) {
      .limit(1);
    const [a] = await tx
      .select()
-      .from(endgameArchive)
-      .where(eq(endgameArchive.id, sid))
+      .from(endgameExpired)
+      .where(eq(endgameExpired.id, sid))
      .limit(1);
    if (!s) {
      if (a)
@@ -351,7 +365,7 @@ export async function removeExpiredSubmissions() {

    // Delete expired submissions
    if (expiredQueues.length)
-      await tx.insert(endgameArchive).values(expiredQueues);
+      await tx.insert(endgameExpired).values(expiredQueues);
    await tx.delete(endgameSubmissions).where(expiredCond);

    // Update queue numbers for remaining submissions
@@ -270,7 +270,7 @@ export default async function EndgamePage() {
                <SimpleTooltip text="ยกเลิกคิว">
                  <AlertDialogTrigger asChild>
                    <Button variant="destructive" type="button">
-                      <X />
+                      <X /> ยกเลิก
                    </Button>
                  </AlertDialogTrigger>
                </SimpleTooltip>
@@ -1,4 +1,5 @@
 import type * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Link } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
@@ -36,6 +37,11 @@ export function RulesDialog({
          4. หากไม่ทักหาเกิน 10 นาทีจะข้ามคิวไปก่อน ถ้ามาแล้วสามารถทักหาได้เลย
          <br />
          5. ไม่แนะนำให้ใช้ Truemoney จ่าย
+          <br />
+          6. โดยการกดตกลงจะถือเป็นการยอมรับ{" "}
+          <span className="text-blue-500 underline">
+            <Link href="https://sudloh.com/privacy">Privacy policy</Link>
+          </span>
        </p>
        <DialogFooter>
          <DialogClose asChild>
@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/correctness/noUnknownTypeSelector: view transitions require me to put transition name in there */
@import "tailwindcss";
@import "tw-animate-css";

@@ -191,3 +192,33 @@ img {
  pointer-events: none;
  border-radius: inherit;
 }
+
+::view-transition-group(fade),
+::view-transition-image-pair(fade),
+::view-transition-old(fade),
+::view-transition-new(fade) {
+  /* animation: none; */
+  mix-blend-mode: normal;
+  transform: none;
+}
+
+::view-transition-old(fade) {
+  opacity: 1;
+  animation: vt-fade-out 250ms ease forwards;
+}
+
+::view-transition-new(fade) {
+  opacity: 0;
+  animation: vt-fade-in 250ms ease forwards;
+}
+
+@keyframes vt-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes vt-fade-in {
+  to {
+    opacity: 1;
+  }
+}
@@ -150,8 +150,18 @@ export const endgameSubmissions = endgame.table("submissions", {
    ),
 });

-// deleted submissions
-export const endgameArchive = endgame.table("archive", {
+export const endgameArchive = endgame.table("sarchive", {
+  id: text().primaryKey(),
+  name: text().notNull(),
+  user: text().notNull(),
+  queue: integer().notNull(),
+  price: integer().notNull(),
+  slip: text().references(() => endgameSlips.id),
+  round: integer().notNull(),
+});
+
+// expired submission
+export const endgameExpired = endgame.table("expired", {
  id: text().primaryKey().$defaultFn(uuidv7),
  name: text().notNull(),
  user: text()