add branding option

src/components/BrandLogo.jsx

@@ -0,0 +1,35 @@
+import { Video } from 'lucide-react';
+import { useBranding } from '../contexts/BrandingContext';
+
+const sizes = {
+  sm: { box: 'w-8 h-8', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
+  md: { box: 'w-9 h-9', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
+  lg: { box: 'w-10 h-10', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
+};
+
+export default function BrandLogo({ size = 'md', className = '' }) {
+  const { appName, hasLogo, logoUrl } = useBranding();
+  const s = sizes[size] || sizes.md;
+
+  if (hasLogo && logoUrl) {
+    return (
+      <div className={`flex items-center gap-2.5 ${className}`}>
+        <img
+          src={logoUrl}
+          alt={appName}
+          className={`${s.box} ${s.rounded} object-contain`}
+        />
+        <span className={`${s.text} font-bold gradient-text`}>{appName}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex items-center gap-2.5 ${className}`}>
+      <div className={`${s.box} gradient-bg ${s.rounded} flex items-center justify-center`}>
+        <Video size={s.icon} className="text-white" />
+      </div>
+      <span className={`${s.text} font-bold gradient-text`}>{appName}</span>
+    </div>
+  );
+}