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>
+  );
+}

src/components/Sidebar.jsx

@@ -1,5 +1,6 @@
 import { NavLink } from 'react-router-dom';
-import { LayoutDashboard, Settings, Shield, Video, X, Palette } from 'lucide-react';
+import { LayoutDashboard, Settings, Shield, X, Palette } from 'lucide-react';
+import BrandLogo from './BrandLogo';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import ThemeSelector from './ThemeSelector';
@@ -36,14 +37,7 @@ export default function Sidebar({ open, onClose }) {
         <div className="flex flex-col h-full">
           {/* Logo */}
           <div className="flex items-center justify-between h-16 px-4 border-b border-th-border">
-            <div className="flex items-center gap-2.5">
-              <div className="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
-                <Video size={18} className="text-white" />
-              </div>
-              <div>
-                <h1 className="text-lg font-bold gradient-text">Redlight</h1>
-              </div>
-            </div>
+            <BrandLogo size="sm" />
             <button
               onClick={onClose}
               className="lg:hidden p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"