feat(logo): migrar token Logo.dev para runtime server-side

NEXT_PUBLIC_LOGO_DEV_TOKEN renomeado para LOGO_DEV_TOKEN — lido apenas
em runtime no servidor. URL construída nos endpoints /api/logo/mapping e
/api/logo/search; cliente nunca recebe o token. Novo server.ts com
isLogoDevEnabled() e buildLogoDevUrl(). LogoDevProvider (Context) propaga
flag `enabled` para Client Components. Build arg removido do Dockerfile
e do workflow docker-publish.yml.

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

src/shared/components/entity-avatar/category-icon-badge.tsx

@@ -13,7 +13,7 @@ const sizeVariants = {
 	sm: {
 		container: "size-8",
 		icon: "size-4",
-		text: "text-[10px]",
+		text: "text-xs",
 	},
 	md: {
 		container: "size-9",

src/shared/components/entity-avatar/establishment-logo-picker.tsx

@@ -9,7 +9,7 @@ import {
 	PopoverTrigger,
 } from "@/shared/components/ui/popover";
 import { Spinner } from "@/shared/components/ui/spinner";
-import { buildLogoDevUrl, logoQueryKeys, toNameKey } from "@/shared/lib/logo";
+import { logoQueryKeys, toNameKey } from "@/shared/lib/logo";
 import {
 	removeEstablishmentLogoAction,
 	saveEstablishmentLogoAction,
@@ -24,6 +24,8 @@ import { cn } from "@/shared/utils/ui";
 interface LogoResult {
 	name: string;
 	domain: string;
+	/** URL da imagem construída server-side — cliente usa direto sem token. */
+	logoUrl: string | null;
 }
 
 async function fetchLogoResults(query: string): Promise<LogoResult[]> {
@@ -77,13 +79,14 @@ export function EstablishmentLogoPicker({
 		staleTime: 1000 * 60 * 60,
 	});
 
-	function handleSelect(domain: string) {
+	function handleSelect(result: LogoResult) {
 		startTransition(async () => {
-			await saveEstablishmentLogoAction(name, domain);
+			await saveEstablishmentLogoAction(name, result.domain);
 			queryClient.setQueryData(logoQueryKeys.mapping(toNameKey(name)), {
-				domain,
+				domain: result.domain,
+				logoUrl: result.logoUrl,
 			});
-			onSelect(domain);
+			onSelect(result.domain);
 		});
 	}
 
@@ -92,6 +95,7 @@ export function EstablishmentLogoPicker({
 			await removeEstablishmentLogoAction(name);
 			queryClient.setQueryData(logoQueryKeys.mapping(toNameKey(name)), {
 				domain: null,
+				logoUrl: null,
 			});
 			onSelect(null);
 		});
@@ -143,7 +147,7 @@ export function EstablishmentLogoPicker({
 								>
 									{buildInitials(name)}
 								</div>
-								<span className="w-full truncate text-[10px] leading-tight text-muted-foreground">
+								<span className="w-full truncate text-xs leading-tight text-muted-foreground">
 									Iniciais
 								</span>
 							</button>
@@ -153,7 +157,7 @@ export function EstablishmentLogoPicker({
 									key={r.domain}
 									type="button"
 									disabled={isPending}
-									onClick={() => handleSelect(r.domain)}
+									onClick={() => handleSelect(r)}
 									className={cn(
 										"flex flex-col items-center gap-1 rounded-md p-1.5 text-center transition-colors hover:bg-accent disabled:opacity-50",
 										resolvedDomain === r.domain &&
@@ -161,9 +165,8 @@ export function EstablishmentLogoPicker({
 									)}
 									title={r.name}
 								>
-									{/* eslint-disable-next-line @next/next/no-img-element */}
 									<img
-										src={buildLogoDevUrl(r.domain) ?? ""}
+										src={r.logoUrl ?? ""}
 										alt={r.name}
 										width={36}
 										height={36}
@@ -173,7 +176,7 @@ export function EstablishmentLogoPicker({
 											(e.target as HTMLImageElement).style.display = "none";
 										}}
 									/>
-									<span className="w-full truncate text-[10px] leading-tight">
+									<span className="w-full truncate text-xs leading-tight">
 										{r.name}
 									</span>
 								</button>

src/shared/components/entity-avatar/establishment-logo.tsx

@@ -2,13 +2,9 @@
 
 import { RiPencilLine } from "@remixicon/react";
 import { useQuery } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-import {
-	buildLogoDevUrl,
-	LOGO_DEV_TOKEN,
-	logoQueryKeys,
-	toNameKey,
-} from "@/shared/lib/logo";
+import { useState } from "react";
+import { useLogoDevEnabled } from "@/shared/components/providers/logo-dev-provider";
+import { logoQueryKeys, toNameKey } from "@/shared/lib/logo";
 import {
 	buildInitials,
 	getCategoryBgColorFromName,
@@ -17,11 +13,14 @@ import {
 import { cn } from "@/shared/utils/ui";
 import { EstablishmentLogoPicker } from "./establishment-logo-picker";
 
-async function fetchLogoMapping(
-	name: string,
-): Promise<{ domain: string | null }> {
+interface LogoMappingResponse {
+	domain: string | null;
+	logoUrl: string | null;
+}
+
+async function fetchLogoMapping(name: string): Promise<LogoMappingResponse> {
 	const res = await fetch(`/api/logo/mapping?name=${encodeURIComponent(name)}`);
-	if (!res.ok) return { domain: null };
+	if (!res.ok) return { domain: null, logoUrl: null };
 	return res.json();
 }
 
@@ -29,6 +28,8 @@ interface EstablishmentLogoProps {
 	name: string;
 	/** Domínio Logo.dev pré-carregado pelo servidor (otimização opcional). */
 	domain?: string | null;
+	/** URL pré-construída no servidor — evita flicker no primeiro render. */
+	logoUrl?: string | null;
 	size?: number;
 	className?: string;
 }
@@ -36,31 +37,33 @@ interface EstablishmentLogoProps {
 export function EstablishmentLogo({
 	name,
 	domain: initialDomain,
+	logoUrl: initialLogoUrl,
 	size = 32,
 	className,
 }: EstablishmentLogoProps) {
+	const logoDevEnabled = useLogoDevEnabled();
 	const [pickerOpen, setPickerOpen] = useState(false);
 	const [imgError, setImgError] = useState(false);
 
+	const hasPlaceholder =
+		initialDomain !== undefined || initialLogoUrl !== undefined;
+
 	const { data: mappingData } = useQuery({
 		queryKey: logoQueryKeys.mapping(toNameKey(name)),
 		queryFn: () => fetchLogoMapping(name),
-		placeholderData:
-			initialDomain !== undefined
-				? { domain: initialDomain ?? null }
-				: undefined,
+		placeholderData: hasPlaceholder
+			? {
+					domain: initialDomain ?? null,
+					logoUrl: initialLogoUrl ?? null,
+				}
+			: undefined,
 		staleTime: 1000 * 60 * 5,
-		enabled: LOGO_DEV_TOKEN !== undefined && LOGO_DEV_TOKEN !== "",
+		enabled: logoDevEnabled,
 	});
 
 	const resolvedDomain = mappingData?.domain ?? null;
+	const logoUrl = mappingData?.logoUrl ?? null;
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: resetar imgError é o efeito de domain mudar
-	useEffect(() => {
-		setImgError(false);
-	}, [resolvedDomain]);
-
-	const logoUrl = buildLogoDevUrl(resolvedDomain);
 	const showLogo = Boolean(logoUrl) && !imgError;
 
 	const initials = buildInitials(name);
@@ -85,7 +88,6 @@ export function EstablishmentLogo({
 
 	const logoImage =
 		showLogo && logoUrl ? (
-			// eslint-disable-next-line @next/next/no-img-element
 			<img
 				src={logoUrl}
 				alt={name}
@@ -99,7 +101,7 @@ export function EstablishmentLogo({
 			initialsAvatar
 		);
 
-	if (!LOGO_DEV_TOKEN) {
+	if (!logoDevEnabled) {
 		return (
 			<div className={cn("shrink-0", className)} aria-hidden>
 				{initialsAvatar}

src/shared/components/providers/logo-dev-provider.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+/**
+ * Expõe, para Client Components, se a integração Logo.dev está configurada.
+ *
+ * O valor é determinado server-side (lendo `LOGO_DEV_TOKEN` via
+ * `isLogoDevEnabled()` em `@/shared/lib/logo/server`) e passado como prop
+ * a partir do layout do dashboard — evitando que o cliente precise do token.
+ */
+const LogoDevContext = createContext<boolean>(false);
+
+interface LogoDevProviderProps {
+	enabled: boolean;
+	children: React.ReactNode;
+}
+
+export function LogoDevProvider({ enabled, children }: LogoDevProviderProps) {
+	return (
+		<LogoDevContext.Provider value={enabled}>
+			{children}
+		</LogoDevContext.Provider>
+	);
+}
+
+export function useLogoDevEnabled(): boolean {
+	return useContext(LogoDevContext);
+}

src/shared/lib/logo/index.ts

@@ -1,14 +1,5 @@
-/**
- * Logo utilities
- *
- * Consolidated from:
- * - /lib/logo.ts (utility functions)
- */
-
 /**
  * Normalizes logo path to get just the filename
- * @param logo - Logo path or URL
- * @returns Filename only
  */
 export const normalizeLogo = (logo?: string | null) =>
 	logo?.split("/").filter(Boolean).pop() ?? "";
@@ -45,13 +36,11 @@ export const deriveNameFromLogo = (logo?: string | null) => {
 export const toNameKey = (name: string): string => name.trim().toLowerCase();
 
 // === Logo.dev ===
-
-export const LOGO_DEV_TOKEN = process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN;
-
-export function buildLogoDevUrl(domain?: string | null): string | null {
-	if (!LOGO_DEV_TOKEN || !domain) return null;
-	return `https://img.logo.dev/${domain}?token=${LOGO_DEV_TOKEN}&size=64&format=png`;
-}
+//
+// A construção de URLs e a leitura do token acontecem server-side em
+// `./server.ts`. O cliente consome `logoUrl` pré-construída a partir das
+// API routes (`/api/logo/mapping` e `/api/logo/search`) e usa o
+// `LogoDevProvider` para saber se a integração está habilitada.
 
 export const logoQueryKeys = {
 	mapping: (nameKey: string) => ["logo-mapping", nameKey] as const,

src/shared/lib/logo/server.ts

@@ -0,0 +1,30 @@
+/**
+ * Helpers server-only para Logo.dev.
+ *
+ * IMPORTANTE: este módulo lê `process.env.LOGO_DEV_TOKEN`, que não existe
+ * no bundle do cliente. Nunca importe este arquivo de Client Components
+ * — use o `LogoDevProvider` para propagar o estado `enabled` e consuma
+ * `logoUrl` a partir das respostas das API routes.
+ */
+function getLogoDevToken(): string | undefined {
+	const token = process.env.LOGO_DEV_TOKEN;
+	return token && token.length > 0 ? token : undefined;
+}
+
+/**
+ * Indica se a integração Logo.dev está configurada.
+ * Usado para habilitar o picker e a exibição de logos na UI.
+ */
+export function isLogoDevEnabled(): boolean {
+	return getLogoDevToken() !== undefined;
+}
+
+/**
+ * Constrói a URL final da imagem Logo.dev com o token aplicado server-side.
+ * Retorna null se o token não estiver configurado ou se o domínio for vazio.
+ */
+export function buildLogoDevUrl(domain?: string | null): string | null {
+	const token = getLogoDevToken();
+	if (!token || !domain) return null;
+	return `https://img.logo.dev/${domain}?token=${token}&size=64&format=png`;
+}