I'm done with artifact

app/artifact/client.tsx

@@ -2,10 +2,11 @@
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: Not needed */
 "use client";
 
-import { BookAlert, CircleX, Loader2 } from "lucide-react";
+import { BookAlert, CircleX, Loader2, Search } from "lucide-react";
 import { useEffect, useState } from "react";
 import Avatar from "@/components/avatar";
 import { Blocker } from "@/components/blocker";
+import { ComboBox } from "@/components/combobox";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -17,12 +18,20 @@ import { cn } from "@/lib/utils";
 import type { EnkaNetworkUser } from "@/types/enka";
 import { RulesDialog } from "./rules";
 
-export function CharacterChooser() {
+export function CharacterChooser({
+  clist,
+}: {
+  clist: {
+    value: string;
+    label: string;
+  }[];
+}) {
   const [uid, setUid] = useState("");
   const [chars, setChars] = useState<(typeof characters.$inferSelect)[]>([]);
   const [selected, setSelected] = useState<string | undefined>();
   const [isError, setIsError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [manual, setManual] = useState(false);
 
   useEffect(() => {
     setIsLoading(true);
@@ -59,40 +68,78 @@ export function CharacterChooser() {
           onChange={(ev) => setUid(ev.target.value)}
         />
       </div>
-      <Label htmlFor="character">เลือกตัวละครที่ต้องการ</Label>
-      <ScrollArea>
-        {isError ? (
-          <Placeholder>
-            <CircleX className="text-red-500" /> เกิดข้อผิดพลาดในการดึงข้อมูล
-          </Placeholder>
-        ) : isLoading ? (
-          <Placeholder>
-            <Loader2 className="animate-spin" /> กำลังโหลดตัวละคร...
-          </Placeholder>
-        ) : !chars.length ? (
-          <div className="flex gap-2 mb-2">
-            <Placeholder />
-            <Placeholder />
-            <Placeholder />
-            <Placeholder />
-            <Placeholder />
-          </div>
+      <Label htmlFor="character">
+        เลือกตัวละครที่ต้องการ
+        {manual ? (
+          <u
+            className="ml-auto cursor-pointer"
+            onClick={() => setManual(false)}
+          >
+            เลือกจากลิสต์
+          </u>
         ) : (
-          <div className="flex gap-2 mb-2">
-            {chars.map((c) => (
-              <Button key={c.id} asChild onClick={() => setSelected(c.name)}>
-                <Avatar
-                  scale={0.6}
-                  char={c}
-                  selected={selected ? selected === c.name : 0}
-                />
-              </Button>
-            ))}
-          </div>
+          <span className="ml-auto">
+            หาไม่เจอ?{" "}
+            <u className="cursor-pointer" onClick={() => setManual(true)}>
+              เลือกเอง
+            </u>
+          </span>
         )}
-        <ScrollBar orientation="horizontal" />
-        <input id="character" name="character" type="hidden" value={selected} />
-      </ScrollArea>
+      </Label>
+      {manual ? (
+        <ComboBox
+          placeholder="ค้นหาตัวละคร"
+          id="character"
+          name="character"
+          data={clist}
+          className="w-full bg-transparent! hover:bg-accent!"
+        />
+      ) : (
+        <ScrollArea>
+          {isError ? (
+            <Placeholder>
+              <CircleX className="text-red-500" /> เกิดข้อผิดพลาดในการดึงข้อมูล
+            </Placeholder>
+          ) : isLoading ? (
+            <Placeholder>
+              <Loader2 className="animate-spin" /> กำลังโหลดตัวละคร...
+            </Placeholder>
+          ) : !chars.length ? (
+            <div className="flex gap-2 mb-2">
+              <Placeholder />
+              <Placeholder />
+              <Placeholder />
+              <Placeholder />
+              <Placeholder />
+            </div>
+          ) : (
+            <div className="flex gap-2 mb-2">
+              <Placeholder
+                className="w-[76.8px] cursor-pointer rounded-sm"
+                onClick={() => setManual(true)}
+              >
+                <Search />
+              </Placeholder>
+              {chars.map((c) => (
+                <Button key={c.id} asChild onClick={() => setSelected(c.name)}>
+                  <Avatar
+                    scale={0.6}
+                    char={c}
+                    selected={selected ? selected === c.name : 0}
+                  />
+                </Button>
+              ))}
+            </div>
+          )}
+          <ScrollBar orientation="horizontal" />
+          <input
+            id="character"
+            name="character"
+            type="hidden"
+            value={selected}
+          />
+        </ScrollArea>
+      )}
     </>
   );
 }

app/artifact/page.tsx

@@ -37,6 +37,12 @@ export default async function ArtifactFormPage() {
         .from(submissions)
         .where(eq(submissions.id, sid.value))
     : [];
+  const clist = await db
+    .select({
+      label: characters.name,
+      value: characters.name,
+    })
+    .from(characters);
   const config = await getArtifactConfig();
   const count = await db.$count(submissions);
 
@@ -95,7 +101,7 @@ export default async function ArtifactFormPage() {
                 />
               </div>
               {config.enka ? (
-                <CharacterChooser />
+                <CharacterChooser clist={clist} />
               ) : (
                 <>
                   <div className="grid gap-2">
@@ -115,15 +121,8 @@ export default async function ArtifactFormPage() {
                       placeholder="ค้นหาตัวละคร"
                       id="character"
                       name="character"
-                      data={
-                        await db
-                          .select({
-                            label: characters.name,
-                            value: characters.name,
-                          })
-                          .from(characters)
-                      }
-                      className="w-full"
+                      data={clist}
+                      className="w-full bg-transparent! hover:bg-accent!"
                     />
                   </div>
                 </>
@@ -134,7 +133,7 @@ export default async function ArtifactFormPage() {
                   id="comment"
                   name="comment"
                   placeholder="(ไม่บังคับ)"
-                  className="bg-card"
+                  className="bg-card!"
                   maxLength={512}
                 />
               </div>

components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

lib/api.ts

@@ -93,6 +93,7 @@ export async function toggleLock() {
   )
     await db.insert(artifactSettings).values({ locked: true });
   revalidatePath("/artifact/admin");
+  revalidatePath("/");
 }
 
 export async function setLimit(limit: number) {
@@ -110,6 +111,7 @@ export async function setLimit(limit: number) {
   )
     await db.insert(artifactSettings).values({ limit });
   revalidatePath("/artifact/admin");
+  revalidatePath("/");
 }
 
 export async function wipe() {