fix: show display labels in Select triggers instead of raw values (#167)

* fix: show display labels in Select triggers instead of raw values

@base-ui/react Select.Value does not auto-mirror SelectItem text the way
Radix UI does — it renders the raw value string. Resolve the label
explicitly and pass it as children so ActivityScopeFilter (__standalone__,
__all__, activity name), FilterSelect (regular, __all__), and FilterBar
all display human-readable text.

Fixes display in shop, check-in, task, banner, lottery filter bars.

https://claude.ai/code/session_01NjUj8jpfA6rBuCYzqKaZmD

* fix: add keepMounted to SelectContent so Select.Value auto-mirrors labels

Without keepMounted, SelectItem children (and their ItemText registrations)
are unmounted when the popup is closed. On initial render with a programmatic
value, no items have ever mounted, so Select.Value falls back to showing the
raw value string.

keepMounted keeps items always mounted in the background, giving Select.Value
access to every option's label at all times — fixes all remaining raw-value
display issues across the codebase without touching individual callsites.

https://claude.ai/code/session_01NjUj8jpfA6rBuCYzqKaZmD

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: dengzhaofun

apps/admin/src/components/activity/ActivityScopeFilter.tsx

@@ -43,6 +43,13 @@ export function ActivityScopeFilter({
         ? ALL
         : value.activityId
 
+  const selectLabel =
+    value.kind === "standalone"
+      ? m.activity_scope_standalone()
+      : value.kind === "all"
+        ? m.activity_scope_all()
+        : (activities ?? []).find((a) => a.id === value.activityId)?.name ?? selectValue
+
   return (
     <div className="flex items-center gap-2">
       <span className="text-xs text-muted-foreground">{label ?? m.activity_scope_label()}</span>
@@ -55,7 +62,7 @@ export function ActivityScopeFilter({
         }}
       >
         <SelectTrigger className="h-8 w-auto min-w-48">
-          <SelectValue />
+          <SelectValue>{selectLabel}</SelectValue>
         </SelectTrigger>
         <SelectContent>
           <SelectItem value={STANDALONE}>{m.activity_scope_standalone()}</SelectItem>

apps/admin/src/components/patterns/FilterBar.tsx

@@ -64,14 +64,18 @@ export function FilterBar({ search, filters = [], actions, className }: FilterBa
         </div>
       )}
 
-      {filters.map((filter) => (
+      {filters.map((filter) => {
+        const allOption = { value: filter.allValue ?? "all", label: filter.label }
+        const allOptions = [allOption, ...filter.options]
+        const displayLabel = allOptions.find((o) => o.value === filter.value)?.label ?? filter.label
+        return (
         <Select
           key={filter.key}
           value={filter.value}
           onValueChange={((v: string | null) => filter.onChange(v ?? filter.allValue ?? "all")) as SelectChangeHandler}
         >
           <SelectTrigger className="w-auto min-w-[120px] shrink-0">
-            <SelectValue placeholder={filter.label} />
+            <SelectValue>{displayLabel}</SelectValue>
           </SelectTrigger>
           <SelectContent>
             <SelectItem value={filter.allValue ?? "all"}>
@@ -84,7 +88,8 @@ export function FilterBar({ search, filters = [], actions, className }: FilterBa
             ))}
           </SelectContent>
         </Select>
-      ))}
+        )
+      })}
 
       {actions && (
         <div className="ml-auto flex shrink-0 items-center gap-2">

apps/admin/src/components/ui/select.tsx

@@ -81,6 +81,7 @@ function SelectContent({
         className="isolate z-50"
       >
         <SelectPrimitive.Popup
+          keepMounted
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}

apps/admin/src/routes/_dashboard/o.$orgSlug/p.$projectSlug/shop/index.tsx

@@ -321,14 +321,15 @@ interface FilterSelectProps {
 }
 
 function FilterSelect({ label, value, onChange, options }: FilterSelectProps) {
+  const displayLabel = options.find((o) => o.value === value)?.label ?? label
   return (
     <div className="space-y-1">
       <label className="text-xs font-medium text-muted-foreground">
         {label}
       </label>
       <Select value={value} onValueChange={(v) => onChange(v ?? "")}>
         <SelectTrigger className="w-44">
-          <SelectValue />
+          <SelectValue>{displayLabel}</SelectValue>
         </SelectTrigger>
         <SelectContent>
           {options.map((o) => (