Merge pull request #143 from peelar/peelar/create-pr-logo-fix

Author: peelar

.changeset/sour-rabbits-hear.md

@@ -0,0 +1,5 @@
+---
+"dopeshot-app": patch
+---
+
+Apply brand logos automatically for testimonial layouts when auto-apply is enabled, not only screenshot layouts. Update the brand panel copy to reflect that the setting applies across assets, and add regression coverage for testimonial auto-apply behavior.

apps/app/src/components/brand/brand-panel.tsx

@@ -423,7 +423,7 @@ export function BrandPanel() {
                 htmlFor="use-logo"
                 className="cursor-pointer text-sm font-normal"
               >
-                Apply to all screenshots
+                Apply automatically to all assets
               </Label>
               <Switch
                 id="use-logo"

apps/app/src/hooks/use-brand-logo-auto-apply.ts

@@ -6,6 +6,7 @@ import { brandSettingsAtom, configAtom, assetsAtom } from "@/hooks/atoms";
 import { loadedMemoryItemIdAtom } from "@/hooks/atoms/memory";
 import { useSession } from "@/lib/auth/auth-client";
 import type { Asset } from "@/domain/asset/types";
+import { getLayoutFormat } from "@/domain/layout-def/definitions";
 
 /**
  * Automatically loads and applies brand logo for NEW designs (not loaded from memory).
@@ -21,6 +22,9 @@ export function useBrandLogoAutoApply(options: { enabled: boolean } = { enabled:
   const loadedItemId = useAtomValue(loadedMemoryItemIdAtom);
   const [error, setError] = useState<string | null>(null);
   const hasAppliedRef = useRef(false);
+  const currentFormat = getLayoutFormat(config.layoutId);
+  const canAutoApplyInCurrentFormat =
+    currentFormat === "testimonial" || Boolean(config.assets?.screenshot);
   const prefetchPromiseRef = useRef<Promise<{ logoUrl: string; logoPath: string } | null> | null>(
     null,
   );
@@ -92,15 +96,15 @@ export function useBrandLogoAutoApply(options: { enabled: boolean } = { enabled:
     // - Feature is disabled
     // - Already applied this session
     // - Toggle is off
-    // - Screenshot not uploaded yet
+    // - Current format is not ready (screenshot formats require an uploaded screenshot)
     // - Logo already exists
     // - User not logged in
     // - Design was loaded from memory (brand logo handled in useMemory)
     if (
       !options.enabled ||
       hasAppliedRef.current ||
       !brandSettings.useLogoOnScreenshots ||
-      !config.assets?.screenshot ||
+      !canAutoApplyInCurrentFormat ||
       config.assets?.logo ||
       !session?.user ||
       loadedItemId // Skip for loaded designs - handled in useMemory
@@ -131,7 +135,7 @@ export function useBrandLogoAutoApply(options: { enabled: boolean } = { enabled:
           (asset) => asset.kind === "logo" && asset.url === logoUrl,
         );
 
-        // Apply logo to screenshot
+        // Apply logo to the current canvas
         const brandLogoAsset: Asset = existingBrandLogo ?? {
           id: `brand-logo-${Date.now()}`,
           projectId: "brand",
@@ -167,10 +171,12 @@ export function useBrandLogoAutoApply(options: { enabled: boolean } = { enabled:
     assets,
     session?.user?.id,
     brandSettings.useLogoOnScreenshots,
+    canAutoApplyInCurrentFormat,
     config.assets?.logo,
+    config.assets?.screenshot,
+    config.layoutId,
     options.enabled,
     loadedItemId,
-    setBrandSettings,
     setAssets,
     setConfig,
   ]);

apps/app/tests/ui/brand-logo-auto-apply.test.tsx

@@ -1,15 +1,17 @@
-import { act, render, screen, waitFor } from "@testing-library/react";
+import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
 import { Provider, createStore, useAtomValue } from "jotai";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { brandSettingsAtom, configAtom, assetsAtom, getEmptyCanvasConfig } from "@/hooks/atoms";
 import { loadedMemoryItemIdAtom } from "@/hooks/atoms/memory";
 import { useBrandLogoAutoApply } from "@/hooks/use-brand-logo-auto-apply";
+import { getLayoutDefinition } from "@/domain/layout-def/definitions";
 
 vi.mock("@/lib/auth/auth-client", () => ({
   useSession: () => ({ data: { user: { id: "user-1" } } }),
 }));
 
 afterEach(() => {
+  cleanup();
   vi.unstubAllGlobals();
 });
 
@@ -27,6 +29,38 @@ function LogoProbe() {
 }
 
 describe("useBrandLogoAutoApply", () => {
+  it("applies brand logo automatically on testimonial layouts", async () => {
+    const store = createStore();
+    const testimonialLayout = getLayoutDefinition("testimonial");
+    if (!testimonialLayout) {
+      throw new Error("testimonial layout definition is required for this test");
+    }
+    const testimonialConfig = testimonialLayout.createConfig();
+
+    store.set(brandSettingsAtom, {
+      logoUrl: "https://cdn.test/logo.png",
+      logoPath: "user-1/logo.png",
+      useLogoOnScreenshots: true,
+      accent: "#6366F1",
+      mode: "dark",
+      personality: "founder",
+    });
+    store.set(configAtom, testimonialConfig);
+    store.set(assetsAtom, []);
+    store.set(loadedMemoryItemIdAtom, null);
+
+    render(
+      <Provider store={store}>
+        <LogoProbe />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("logo-id").textContent).not.toBe("none");
+      expect(screen.getByTestId("asset-count").textContent).toBe("1");
+    });
+  });
+
   it("reapplies the brand logo after resetting to a new design", async () => {
     const store = createStore();
     const screenshotAsset = {