feat : update analis page

components/public/analytics-dashboard.tsx

@@ -5,6 +5,7 @@ import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
 import { CheckIcon, MinusIcon } from "lucide-react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CatalogItemImage } from "@/components/catalog-item-image";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
@@ -95,7 +96,7 @@ function UsageRanking({ title, description, items, characterItems = false }: {
                           {item.name.slice(0, 1)}
                         </AvatarFallback>
                       </Avatar>
-                      <span className="flex min-w-0 flex-col gap-0.5 break-words">
+                      <span className="flex min-w-0 flex-col gap-0.5 wrap-break-word">
                         <span>{item.name}</span>
                         <span className="text-xs text-muted-foreground">{rarityLabel(item.rarity)}</span>
                       </span>
@@ -168,6 +169,10 @@ export function AnalyticsDashboard({ data }: { data: PublicAnalytics }) {
                 className="h-auto min-h-11 max-w-full whitespace-normal text-left"
                 aria-label={`นับไกด์ ${guide.name}`} aria-pressed={included} disabled={source === "stygian" && !includeStygian}
                 onClick={() => toggleGuide(guide.id)}>
+                {guide.character?.imageUrl ? <CatalogItemImage
+                  item={guide.character} kind="character" alt=""
+                  className="size-7 shrink-0 rounded-md" sizes="28px" loading="lazy"
+                /> : null}
                 {included ? <CheckIcon data-icon="inline-start" aria-hidden="true" /> : <MinusIcon data-icon="inline-start" aria-hidden="true" />}
                 {guide.name}
               </Button>;