feat(ui): padroniza avatares e paleta visual da interface

src/features/categories/components/categories-page.tsx

@@ -177,7 +177,6 @@ export function CategoriesPage({ categories }: CategoriesPageProps) {
 																<CategoryIconBadge
 																	icon={category.icon}
 																	name={category.name}
-																	colorIndex={index}
 																	size="md"
 																/>
 															</TableCell>

src/features/categories/components/category-detail-header.tsx

@@ -77,7 +77,6 @@ export function CategoryDetailHeader({
 					<CategoryIconBadge
 						icon={category.icon}
 						name={category.name}
-						colorIndex={0}
 						size="lg"
 					/>
 					<div className="space-y-2">

src/features/categories/components/category-icon-badge.tsx

@@ -1,76 +1,6 @@
-"use client";
-
-import {
-	buildCategoryInitials,
-	getCategoryBgColor,
-	getCategoryColor,
-} from "@/shared/utils/category-colors";
-import { getIconComponent } from "@/shared/utils/icons";
-import { cn } from "@/shared/utils/ui";
-
-const sizeVariants = {
-	sm: {
-		container: "size-8",
-		icon: "size-4",
-		text: "text-[10px]",
-	},
-	md: {
-		container: "size-9",
-		icon: "size-5",
-		text: "text-xs",
-	},
-	lg: {
-		container: "size-12",
-		icon: "size-6",
-		text: "text-sm",
-	},
-} as const;
-
-export type CategoryIconBadgeSize = keyof typeof sizeVariants;
-
-export interface CategoryIconBadgeProps {
-	/** Nome do ícone Remix (ex: "RiShoppingBag3Line") */
-	icon?: string | null;
-	/** Nome da categoria (usado para gerar iniciais como fallback) */
-	name: string;
-	/** Índice para determinar a cor (cicla entre as cores disponíveis) */
-	colorIndex: number;
-	/** Tamanho do badge: sm (32px), md (36px), lg (48px) */
-	size?: CategoryIconBadgeSize;
-	/** Classes adicionais para o container */
-	className?: string;
-}
-
-export function CategoryIconBadge({
-	icon,
-	name,
-	colorIndex,
-	size = "md",
-	className,
-}: CategoryIconBadgeProps) {
-	const IconComponent = icon ? getIconComponent(icon) : null;
-	const initials = buildCategoryInitials(name);
-	const color = getCategoryColor(colorIndex);
-	const bgColor = getCategoryBgColor(colorIndex);
-	const variant = sizeVariants[size];
-
-	return (
-		<div
-			className={cn(
-				"flex shrink-0 items-center justify-center overflow-hidden rounded-full",
-				variant.container,
-				className,
-			)}
-			style={{ backgroundColor: bgColor }}
-		>
-			{IconComponent ? (
-				// @ts-expect-error icon accepts style but type is too narrow
-				<IconComponent className={variant.icon} style={{ color }} />
-			) : (
-				<span className={cn("uppercase", variant.text)} style={{ color }}>
-					{initials}
-				</span>
-			)}
-		</div>
-	);
-}
+// Re-export from shared — componente movido para src/shared/components/entity-avatar/
+export {
+	CategoryIconBadge,
+	type CategoryIconBadgeProps,
+	type CategoryIconBadgeSize,
+} from "@/shared/components/entity-avatar";