Create monorepo from known-good production state

app/components/common/OwnerBadge.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+export default function OwnerBadge({
+    owner,
+    uploader,
+    className = '',
+}: {
+    owner?: { id?: string | number; username?: string | null } | null;
+    uploader?: string | null;
+    className?: string;
+}) {
+    const hasOwner = !!owner?.id;
+
+    // Prefer owner's username; fall back to uploader; ensure clean text
+    const ownerName = (owner?.username ?? '').trim();
+    const uploaderName = (uploader ?? '').trim();
+    const name = ownerName || uploaderName || '—';
+
+    const label = hasOwner ? 'Owner' : 'Uploader';
+    const title = hasOwner ? 'Owner' : (uploaderName ? 'Original uploader' : '');
+
+    return (
+        <span
+        className={`inline-flex items-center gap-2 text-xs px-2 py-1 rounded-md border border-border bg-card ${className}`}
+        title={title}
+        >
+        <span className="opacity-70">{label}:</span>
+        <span className="font-medium">{name}</span>
+        </span>
+    );
+}