From 85794b4b522f7b48a67829ec91fbea4719bfacce Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Fri, 15 May 2026 10:57:39 +0200
Subject: [PATCH] fix: add missing SyncStatusPill component to repo

---
 src/components/SyncStatusPill.tsx | 48 +++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/SyncStatusPill.tsx

diff --git a/src/components/SyncStatusPill.tsx b/src/components/SyncStatusPill.tsx
new file mode 100644
index 0000000..36ad72a
--- /dev/null
+++ b/src/components/SyncStatusPill.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+
+type SyncStatus = 'pending' | 'bc_pending' | 'synced' | 'failed' | 'saved' | 'edited' | 'error' | string | undefined;
+
+interface SyncStatusPillProps {
+  status: SyncStatus;
+  className?: string;
+}
+
+export function SyncStatusPill({ status, className }: SyncStatusPillProps) {
+  const normalized = String(status || '').toLowerCase();
+
+  const meta = (() => {
+    if (normalized === 'bc_pending') {
+      return { label: 'Pending BC', tone: 'bg-blue-500/10 text-blue-300 border-blue-500/20' };
+    }
+    if (normalized === 'previewed') {
+      return { label: 'Previewed', tone: 'bg-indigo-500/10 text-indigo-300 border-indigo-500/20' };
+    }
+    if (normalized === 'syncing') {
+      return { label: 'Syncing BC', tone: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20' };
+    }
+    if (normalized === 'pending' || normalized === 'edited') {
+      return { label: 'Pending app', tone: 'bg-amber-500/10 text-amber-300 border-amber-500/20' };
+    }
+    if (normalized === 'synced' || normalized === 'saved') {
+      return { label: 'Synced BC', tone: 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20' };
+    }
+    if (normalized === 'failed' || normalized === 'error') {
+      return { label: 'BC failed', tone: 'bg-red-500/10 text-red-300 border-red-500/20' };
+    }
+    if (!status) {
+      return { label: 'In app', tone: 'bg-slate-500/10 text-slate-300 border-slate-500/20' };
+    }
+    return { label: String(status), tone: 'bg-slate-500/10 text-slate-300 border-slate-500/20' };
+  })();
+
+  return (
+    <span className={cn(
+      'inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border whitespace-nowrap',
+      meta.tone,
+      className
+    )}>
+      {meta.label}
+    </span>
+  );
+}