fix(ui) : simplify admin controls and artifact selection

components/catalog-select.tsx

@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 
 import { CatalogItemImage, type CatalogItemKind } from "@/components/catalog-item-image";
 import { TeamArtifactIcon } from "@/components/public/team-search";
+import { Button } from "@/components/ui/button";
 import {
   ComboboxContent,
   ComboboxEmpty,
@@ -255,6 +256,7 @@ type MultipleArtifactSelectProps<Item extends AdminCatalogItem> = Omit<
   onValuesChange: (values: string[]) => void;
   label: string;
   max?: number;
+  presentation?: "dropdown" | "slot";
   className?: string;
 };
 
@@ -272,6 +274,7 @@ export function ArtifactSelect<Item extends AdminCatalogItem>(
     emptyLabel = "ไม่พบชุด Artifact",
     invalid = false,
     max = 2,
+    presentation = "slot",
     searchNames = (item) => [item.name, ...(item.aliases ?? [])],
     className,
   } = props;
@@ -298,8 +301,11 @@ export function ArtifactSelect<Item extends AdminCatalogItem>(
       <ComboboxTrigger
         aria-label={selected.length ? `${label}: ${selected.map((item) => item.name).join(", ")}` : label}
         aria-invalid={invalid}
+        render={presentation === "dropdown" ? <Button variant="outline" /> : undefined}
         className={cn(
-          "relative aspect-square w-full overflow-hidden rounded-md border bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&>svg]:hidden",
+          presentation === "dropdown"
+            ? "h-auto min-h-10 w-full min-w-0 justify-start gap-2 py-1.5"
+            : "relative aspect-square w-full overflow-hidden rounded-md border bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&>svg]:hidden",
           className,
         )}
       >
@@ -307,12 +313,17 @@ export function ArtifactSelect<Item extends AdminCatalogItem>(
           <TeamArtifactIcon
             first={iconValue(selected[0])}
             second={iconValue(selected[1])}
-            className="border-0"
-            sizes="96px"
+            className={presentation === "dropdown" ? "size-8 shrink-0 border-0" : "border-0"}
+            sizes={presentation === "dropdown" ? "32px" : "96px"}
           />
         ) : (
           <CircleHelpIcon className="size-8 text-muted-foreground" aria-hidden="true" />
         )}
+        {presentation === "dropdown" ? (
+          <span className="min-w-0 flex-1 truncate text-left">
+            {selected.length ? selected.map((item) => item.name).join(" + ") : label}
+          </span>
+        ) : null}
       </ComboboxTrigger>
       <ComboboxContent className="min-w-72">
         <ComboboxInput placeholder={placeholder} showClear showTrigger={false} />