fix:add to modal

app/(ui)/admin/@modal/tl/ver/[type]/create/page.tsx

@@ -14,7 +14,7 @@ import {
 } from "@/components/form";
 import { ModalBase } from "@/components/modal";
 import { Button } from "@/components/ui/button";
-import { DialogFooter } from "@/components/ui/dialog";
+import { DialogClose, DialogFooter } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Kbd, KbdGroup } from "@/components/ui/kbd";
 import {
@@ -178,9 +178,9 @@ export default async function TlVersionCreatePage({
           </FormInput>
         </FormRow>
         <DialogFooter>
-          <FormAction type="clear" asChild>
-            <Button variant="outline">Clear</Button>
-          </FormAction>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
           <Button asChild>
             <FormAction
               type="submit"

app/(ui)/admin/@modal/tl/ver/[type]/edit/page.tsx

@@ -39,12 +39,13 @@ export default async function TlTypeEditPage({
       id: string;
       order: string;
       image: string;
+      mode: string;
     }>,
   ) {
     "use server";
     if (!(await adminCheck())) redirect("/login");
 
-    for (const field of ["name", "id", "order"] as const) {
+    for (const field of ["name", "id", "order", "mode"] as const) {
       if (!form.get(field)) {
         return { error: `Field "${field}" is required.` };
       }
@@ -58,6 +59,7 @@ export default async function TlTypeEditPage({
         name: form.get("name")!,
         image: form.get("image")!,
         order: parseInt(form.get("order")!, 10),
+        mode: form.get("mode")!,
       };
       await db
         .update(tierlistTypes)
@@ -104,6 +106,9 @@ export default async function TlTypeEditPage({
         <FormInput name="order" label="Order">
           <Input placeholder="1" />
         </FormInput>
+        <FormInput name="mode" label="Mode">
+          <Input placeholder="Maybe pls let me sleep my mom gonaa kill me soon :sob:" />
+        </FormInput>
 
         <FormInput name="image" label="Image" subLabel="optional">
           <CdnChooser />

app/(ui)/admin/@modal/tl/ver/create/page.tsx

@@ -7,7 +7,7 @@ import { CdnChooser } from "@/components/chooser";
 import { FormAction, FormInput, FormProvider } from "@/components/form";
 import { ModalBase } from "@/components/modal";
 import { Button } from "@/components/ui/button";
-import { DialogFooter } from "@/components/ui/dialog";
+import { DialogClose, DialogFooter } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import { actionLog } from "@/lib/api";
@@ -27,12 +27,13 @@ export default async function TlTypeCreatePage() {
       id: string;
       order: string;
       image: string;
+      mode: string;
     }>,
   ) {
     "use server";
     if (!(await adminCheck())) redirect("/login");
 
-    for (const field of ["name", "id", "order"] as const) {
+    for (const field of ["name", "id", "order", "mode"] as const) {
       if (!form.get(field)) {
         return { error: `Field "${field}" is required.` };
       }
@@ -45,6 +46,7 @@ export default async function TlTypeCreatePage() {
         id: form.get("id")!,
         name: form.get("name")!,
         image: form.get("image")!,
+        mode: form.get("mode")!,
         order: parseInt(form.get("order")!, 10),
       };
       await db.insert(tierlistTypes).values(data);
@@ -81,13 +83,16 @@ export default async function TlTypeCreatePage() {
         <FormInput name="order" label="Order">
           <Input placeholder="1" defaultValue={maxOrder + 10} />
         </FormInput>
+        <FormInput name="mode" label="Mode">
+          <Input placeholder="Maybe pls let me sleep my mom gonaa kill me soon :sob:" />
+        </FormInput>
         <FormInput name="image" label="Image" subLabel="optional">
           <CdnChooser />
         </FormInput>
         <DialogFooter>
-          <FormAction type="clear" asChild>
-            <Button variant="outline">Clear</Button>
-          </FormAction>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
           <Button asChild>
             <FormAction
               type="submit"

app/(ui)/admin/tl/ver/page.tsx

@@ -30,7 +30,7 @@ export default async function TierlistManagerPage() {
       </Button>
       {vers.map((t) => (
         <div className="flex flex-col gap-1 group/type" key={t.id}>
-          <div className="font-bold text-4xl flex items-center gap-2">
+          <div className="font-semibold text-4xl flex items-center gap-2 w-fit text-nowrap">
             <div className="px-2 py-1 border w-min rounded-md bg-[#2228] flex">
               {t.name} <Kbd>{t.id}</Kbd>
             </div>