[US-4.4 / OBT-207] Render one badge per platform

src/components/common/PlatformMultiSelect.tsx

@@ -1,10 +1,5 @@
 import { cn } from "@/utils/cn"
-
-const PLATFORM_OPTIONS = [
-  { value: "web", label: "Web" },
-  { value: "android", label: "Android" },
-  { value: "ios", label: "iOS" },
-]
+import { PLATFORM_OPTIONS } from "@/constants/platforms"
 
 interface PlatformMultiSelectProps {
   value: string[]

src/components/pages/AppDetailPage.tsx

@@ -33,6 +33,7 @@ import { InfoTooltip } from "@/components/common/InfoTooltip"
 import { ImageUpload } from "@/components/common/ImageUpload"
 import { PlatformMultiSelect } from "@/components/common/PlatformMultiSelect"
 import { ConfirmDialog } from "@/components/common/ConfirmDialog"
+import { platformLabel } from "@/constants/platforms"
 import { Switch } from "@/components/ui/switch"
 
 import { formatDate } from "@/utils/format"
@@ -74,7 +75,9 @@ function AppInfoCard({
       )}
 
       <div className="flex flex-wrap gap-3 mb-4">
-        <Badge variant="default">{app.platforms[0] ?? "web"}</Badge>
+        {app.platforms.map((platform) => (
+          <Badge key={platform} variant="default">{platformLabel(platform)}</Badge>
+        ))}
         <Badge variant={app.is_active ? "active" : "inactive"}>
           {app.is_active ? "Active" : "Inactive"}
         </Badge>

src/components/pages/AppsPage.tsx

@@ -26,6 +26,7 @@ import { ConfirmDialog } from "@/components/common/ConfirmDialog"
 import { ImageUpload } from "@/components/common/ImageUpload"
 import { PlatformMultiSelect } from "@/components/common/PlatformMultiSelect"
 import { Switch } from "@/components/ui/switch"
+import { platformLabel } from "@/constants/platforms"
 
 interface AppFormState {
   app_key: string
@@ -232,8 +233,10 @@ export default function AppsPage() {
                 {app.description && (
                   <p className="text-xs text-verde/60 line-clamp-2 mb-3">{app.description}</p>
                 )}
-                <div className="flex items-center gap-2">
-                  <Badge variant="default">{app.platforms[0] ?? "web"}</Badge>
+                <div className="flex flex-wrap items-center gap-2">
+                  {app.platforms.map((platform) => (
+                    <Badge key={platform} variant="default">{platformLabel(platform)}</Badge>
+                  ))}
                   <Badge variant={app.is_active ? "active" : "inactive"}>
                     {app.is_active ? "Active" : "Inactive"}
                   </Badge>

src/components/pages/dashboard/AppCard.tsx

@@ -3,21 +3,7 @@ import type { UserAppResponse } from "@/types"
 import { cn } from "@/utils/cn"
 import { Badge } from "@/components/ui/badge"
 import { buttonVariants } from "@/components/ui/button"
-
-function platformLabel(platform: string | null): string {
-  switch (platform) {
-    case "ios":
-      return "iOS"
-    case "android":
-      return "Android"
-    case "mobile":
-      return "Mobile"
-    case "both":
-      return "Web + Mobile"
-    default:
-      return "Web"
-  }
-}
+import { platformLabel } from "@/constants/platforms"
 
 export function AppCard({ app }: { app: UserAppResponse }) {
   const hasLinks = app.app_url || app.ios_url || app.android_url
@@ -84,7 +70,9 @@ export function AppCard({ app }: { app: UserAppResponse }) {
           {!app.is_platform_admin && app.roles.length === 0 && (
             <Badge variant="inactive">No role</Badge>
           )}
-          <Badge variant="success">{platformLabel(app.platforms[0] ?? null)}</Badge>
+          {app.platforms.map((platform) => (
+            <Badge key={platform} variant="success">{platformLabel(platform)}</Badge>
+          ))}
         </div>
 
         <div className="flex flex-wrap items-center gap-2 mt-auto pt-3 border-t border-areia/10">

src/constants/platforms.ts

@@ -0,0 +1,13 @@
+export const PLATFORM_OPTIONS = [
+  { value: "web", label: "Web" },
+  { value: "android", label: "Android" },
+  { value: "ios", label: "iOS" },
+]
+
+const PLATFORM_LABELS: Record<string, string> = Object.fromEntries(
+  PLATFORM_OPTIONS.map((o) => [o.value, o.label]),
+)
+
+export function platformLabel(platform: string): string {
+  return PLATFORM_LABELS[platform] ?? platform
+}