web/src/components/app-shell.tsx

"use client";

import { usePathname } from "next/navigation";
import type { ReactNode } from "react";

import { PresenceProvider } from "@/components/presence-provider";
import { TopNav } from "@/components/top-nav";
import { useBranding } from "@/lib/branding";

export function AppShell({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const branding = useBranding({ applyDocument: true, documentKey: pathname });
  const normalizedPath = pathname.replace(/\/+$/, "") || "/";
  const isLoginPage = normalizedPath === "/login";
  // 批量生图页是画图页的副本，布局沿用画图页那套（浮动导航 + 无外框卡片）。
  const isImagePage = normalizedPath === "/image" || normalizedPath === "/batch";

  if (isLoginPage) {
    return <main className="h-dvh overflow-hidden text-stone-900">{children}</main>;
  }

  if (isImagePage) {
    return (
      <main className="app-page-background min-h-screen overflow-x-hidden px-4 pt-0 pb-2 text-stone-900 sm:px-6 lg:px-8">
        <div className="fixed inset-x-0 top-0 z-40 bg-transparent px-4 pt-[env(safe-area-inset-top)] pb-2 sm:px-6 sm:pt-2 lg:px-8">
          <div className="mx-auto max-w-[1440px]">
            <TopNav branding={branding} />
          </div>
        </div>
        <div className="mx-auto box-border flex min-h-screen max-w-[1440px] flex-col gap-2 pt-[calc(env(safe-area-inset-top)+7.75rem)] sm:gap-5 lg:pt-[5.25rem]">
          <PresenceProvider>{children}</PresenceProvider>
        </div>
      </main>
    );
  }

  return (
    <main className="min-h-screen overflow-x-hidden bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.92),_rgba(245,239,231,0.96)_42%,_rgba(240,235,227,0.99)_100%)] px-4 pt-0 pb-2 text-stone-900 sm:px-6 sm:pt-2 lg:px-8">
      <div className="fixed inset-x-0 top-0 z-40 bg-transparent px-4 pt-[env(safe-area-inset-top)] pb-2 sm:px-6 sm:pt-2 lg:px-8">
        <div className="mx-auto max-w-[1440px]">
          <TopNav branding={branding} />
        </div>
      </div>
      <div className="mx-auto box-border flex min-h-screen max-w-[1440px] flex-col gap-2 pt-[calc(env(safe-area-inset-top)+7.75rem)] sm:gap-5 lg:pt-[5.25rem]">
        <PresenceProvider>{children}</PresenceProvider>
      </div>
    </main>
  );
}