feat(rubgram):indicate free queues,style(artifact): kbd quene

app/(ui)/artifact/page.tsx

@@ -34,6 +34,7 @@ import { CharacterChooser, ClearCookie, Disclaimer } from "./client";
 import { ArtifactFormWrapper } from "./form";
 import { LiveButton } from "./live";
 import { RulesDialog } from "./rules";
+import { Kbd } from "@/components/ui/kbd";
 
 export const metadata: Metadata = {
   title: "เสือกไอดีชาวบ้าน",
@@ -246,9 +247,9 @@ export default async function ArtifactFormPage({
             )}
           </div>
           <div className="flex gap-2 items-center">
-            <span className="p-1">
-              {count} / {config.limit < 0 ? "∞" : config.limit}
-            </span>
+            <Kbd>
+              {count} / {config.limit < 0 ? "∞" : config.limit} คิว
+            </Kbd>
             <SimpleTooltip text="ส่งเลยจัฟลูกพี่">
               <Button
                 type="submit"

app/(ui)/rubgram/client.tsx

@@ -23,7 +23,7 @@ import {
   calcPrice,
   cancel,
   type getDiscordSession,
-  type getEndgameConfig,
+  getEndgameConfig,
   loginDiscord,
 } from "./api";
 import { RulesDialog } from "./rules";
@@ -76,6 +76,8 @@ export function WelcomeScreening({
 export function ServiceSelector({
   types,
   allDiscount,
+  free,
+  count,
 }: Awaited<ReturnType<typeof getEndgameConfig>>) {
   const [selected, setSelected] = shared.state("rubgram.services");
 
@@ -94,7 +96,20 @@ export function ServiceSelector({
           <MultiSelectGroup>
             {types.map((t) => (
               <MultiSelectItem value={t.id} key={t.id}>
-                {t.display} <Kbd>{t.price} บาท</Kbd>
+                {t.display}{" "}
+                <Kbd>
+                  {free > 0 && count < free ? (
+                    <>
+                      <span className="line-through opacity-50">{t.price}</span>{" "}
+                      <span className="text-emerald-500">ฟรี</span>
+                    </>
+                  ) : (
+                    <>
+                      {t.price} {" "}
+                      <span className="opacity-50">บาท</span>
+                    </>
+                  )}
+                </Kbd>
               </MultiSelectItem>
             ))}
           </MultiSelectGroup>

app/(ui)/rubgram/page.tsx

@@ -297,7 +297,7 @@ export default async function EndgamePage() {
           <div className="flex gap-2 items-center">
             {!q && <PriceEstimation />}
             <Kbd>
-              {count} / {config.limit < 0 ? "∞" : config.limit}
+              {count} / {config.limit < 0 ? "∞" : config.limit} คิว
             </Kbd>
             <SimpleTooltip text="ถัดไป">
               <Button