Add brand logo + favicon across app surfaces

Ship the Podcast Distribution AI wordmark as real assets and replace the
Mic-tile + text placeholder everywhere it appeared.

- public/logo-dark.png (dark wordmark, for light backgrounds) and
  public/logo-light.png (light wordmark, for dark backgrounds)
- New <Logo> component swaps the two via Tailwind dark: variants, so the
  dark logo shows on all non-themed surfaces (marketing, auth, admin,
  public share) and the light logo only in dark-mode app surfaces
- Wire <Logo> into the marketing header/footer, auth layout, app header
  (default branch only - white-label org logos untouched), admin header
  (+ Admin badge), and the public share page
- Favicon via App Router file convention: app/icon.png + app/apple-icon.png

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leon Serfaty
2026-06-20 20:58:14 -04:00
parent 013a3525e5
commit cd1d6a1a28
11 changed files with 59 additions and 40 deletions
+4 -8
View File
@@ -1,5 +1,5 @@
import Link from "next/link";
import { Mic, Plus, Wrench } from "lucide-react";
import { Plus, Wrench } from "lucide-react";
import { requireAuth } from "@/lib/auth/guards";
import { getEffectivePlan } from "@/lib/billing/subscription";
import { getActiveBranding, hexToHslTriplet } from "@/lib/branding";
@@ -11,6 +11,7 @@ import { CommandPalette } from "@/components/app/command-palette";
import { ImpersonationBanner } from "@/components/app/impersonation-banner";
import { ThemeProvider } from "@/components/providers/theme-provider";
import { Button } from "@/components/ui/button";
import { Logo } from "@/components/ui/logo";
// Authed, DB-backed dashboard — never statically prerender.
export const dynamic = "force-dynamic";
@@ -47,7 +48,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
<header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur-md md:px-6">
<div className="flex items-center gap-1">
<AppMobileNav plan={plan} workspaceName={workspaceName} />
<Link href="/dashboard" className="flex items-center gap-2.5 font-display font-bold tracking-tight">
<Link href="/dashboard" className="flex items-center" aria-label={workspaceName}>
{branding?.logoUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img
@@ -56,12 +57,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
className="h-8 w-auto max-w-[160px] object-contain"
/>
) : (
<>
<span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
<Mic className="h-5 w-5" />
</span>
<span className="hidden sm:inline">{workspaceName}</span>
</>
<Logo className="h-7 w-auto" priority />
)}
</Link>
</div>