Fix sidebar header to show logo + brand name inline, improve favicon update logic

- Update AppLayout to display logo and brand name together in all headers (sidebar, public, mobile)
- Improve favicon update in useBranding to create link element if not exists
- Update opengraph metadata to use local image instead of lovable.dev URL
- Change author/meta to WithDwindi branding

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/AppLayout.tsx

@@ -108,11 +108,10 @@ export function AppLayout({ children }: AppLayoutProps) {
         <header className="border-b-2 border-border bg-background sticky top-0 z-50">
           <div className="container mx-auto px-4 py-4 flex items-center justify-between">
             <Link to="/" className="text-2xl font-bold flex items-center gap-2">
-              {logoUrl ? (
+              {logoUrl && (
                 <img src={logoUrl} alt={brandName} className="h-8 object-contain" />
-              ) : (
-                brandName
               )}
+              <span>{brandName}</span>
             </Link>
             <nav className="flex items-center gap-4">
               <Link to="/products" className="hover:underline font-medium">Produk</Link>
@@ -148,11 +147,10 @@ export function AppLayout({ children }: AppLayoutProps) {
       <aside className="hidden md:flex flex-col w-64 border-r-2 border-border bg-sidebar fixed h-screen">
         <div className="p-4 border-b-2 border-border">
           <Link to="/" className="text-xl font-bold flex items-center gap-2">
-            {logoUrl ? (
+            {logoUrl && (
               <img src={logoUrl} alt={brandName} className="h-8 object-contain" />
-            ) : (
-              brandName
             )}
+            <span>{brandName}</span>
           </Link>
         </div>
         
@@ -201,11 +199,10 @@ export function AppLayout({ children }: AppLayoutProps) {
         {/* Mobile Header */}
         <header className="md:hidden sticky top-0 z-50 border-b-2 border-border bg-background px-4 py-3 flex items-center justify-between">
           <Link to="/" className="text-xl font-bold flex items-center gap-2">
-            {logoUrl ? (
+            {logoUrl && (
               <img src={logoUrl} alt={brandName} className="h-6 object-contain" />
-            ) : (
-              brandName
             )}
+            <span>{brandName}</span>
           </Link>
           <div className="flex items-center gap-2">
             <Link to="/checkout" className="relative p-2">

src/hooks/useBranding.tsx

@@ -93,8 +93,13 @@ export function BrandingProvider({ children }: { children: ReactNode }) {
 
       // Update favicon if set
       if (data.brand_favicon_url) {
-        const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
-        if (link) link.href = data.brand_favicon_url;
+        let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
+        if (!link) {
+          link = document.createElement('link');
+          link.rel = 'icon';
+          document.head.appendChild(link);
+        }
+        link.href = data.brand_favicon_url;
       }
 
       // Update document title