From 66179d7ba87321db5e77142527e25369dc6fb6ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 9 Mar 2026 18:43:18 +0100
Subject: [PATCH] style: streamline draft/published badge across recording card
 and admin table

- Replace custom inline span+getStatusColor with Badge component in recording card
- Align admin recordings table badge to same style (outline, green/yellow)
- Use i18n label in admin table instead of raw status string
- Remove unused cn import and getStatusColor helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../recording-card/recording-card.svelte      | 21 +++++++------------
 .../src/routes/admin/recordings/+page.svelte  |  8 ++++---
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/lib/components/recording-card/recording-card.svelte b/packages/frontend/src/lib/components/recording-card/recording-card.svelte
index d7292c6..0df67b9 100644
--- a/packages/frontend/src/lib/components/recording-card/recording-card.svelte
+++ b/packages/frontend/src/lib/components/recording-card/recording-card.svelte
@@ -2,8 +2,8 @@
   import { _ } from "svelte-i18n";
   import { Card, CardContent, CardHeader } from "$lib/components/ui/card";
   import { Button } from "$lib/components/ui/button";
+  import { Badge } from "$lib/components/ui/badge";
   import type { Recording, DeviceInfo } from "$lib/types";
-  import { cn } from "$lib/utils";
 
   interface Props {
     recording: Recording;
@@ -22,16 +22,6 @@
     return `${minutes}:${seconds.toString().padStart(2, "0")}`;
   }
 
-  function getStatusColor(status: string): string {
-    switch (status) {
-      case "published":
-        return "text-green-400 bg-green-400/20";
-      case "draft":
-        return "text-yellow-400 bg-yellow-400/20";
-      default:
-        return "text-gray-400 bg-gray-400/20";
-    }
-  }
 </script>
 
 <Card
@@ -44,9 +34,14 @@
           <h3 class="font-semibold text-card-foreground group-hover:text-primary transition-colors">
             {recording.title}
           </h3>
-          <span class={cn("text-xs px-2 py-0.5 rounded-full", getStatusColor(recording.status))}>
+          <Badge
+            variant="outline"
+            class={recording.status === "published"
+              ? "text-green-600 border-green-500/40 bg-green-500/10"
+              : "text-yellow-600 border-yellow-500/40 bg-yellow-500/10"}
+          >
             {$_(`recording_card.status_${recording.status}`)}
-          </span>
+          </Badge>
         </div>
         {#if recording.description}
           <p class="text-sm text-muted-foreground line-clamp-2">
diff --git a/packages/frontend/src/routes/admin/recordings/+page.svelte b/packages/frontend/src/routes/admin/recordings/+page.svelte
index e6725b1..cf5ddf8 100644
--- a/packages/frontend/src/routes/admin/recordings/+page.svelte
+++ b/packages/frontend/src/routes/admin/recordings/+page.svelte
@@ -131,10 +131,12 @@
             <td class="px-4 py-3 hidden sm:table-cell">
               <div class="flex gap-1">
                 <Badge
-                  variant={recording.status === "published" ? "default" : "outline"}
-                  class={recording.status === "draft" ? "text-muted-foreground" : ""}
+                  variant="outline"
+                  class={recording.status === "published"
+                    ? "text-green-600 border-green-500/40 bg-green-500/10"
+                    : "text-yellow-600 border-yellow-500/40 bg-yellow-500/10"}
                 >
-                  {recording.status}
+                  {$_(`recording_card.status_${recording.status}`)}
                 </Badge>
                 {#if recording.public}
                   <Badge variant="outline" class="text-blue-600 border-blue-500/40 bg-blue-500/10"