8f4680c0e9
- Add success/warning/info semantic design tokens to globals.css - Replace all raw HTML elements (input, select, textarea, button, label) with shadcn components (Input, Select, Textarea, Button, Label, Dialog) across settings, issues, agents, inbox, knowledge-base, and pair pages - Replace all hardcoded Tailwind colors with design tokens (text-red-500 → text-destructive, text-green-600 → text-success, etc.) - Extract shared ActorAvatar component to packages/ui/components/common - Update status and priority configs to use semantic tokens - Update CLAUDE.md with component organization guidelines - Fix login page tests to use label-based queries Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
44 lines
1 KiB
TypeScript
44 lines
1 KiB
TypeScript
import { Bot } from "lucide-react";
|
|
import { cn } from "@multica/ui/lib/utils";
|
|
|
|
interface ActorAvatarProps {
|
|
actorType: string;
|
|
actorId: string;
|
|
size?: number;
|
|
getName?: (type: string, id: string) => string;
|
|
getInitials?: (type: string, id: string) => string;
|
|
className?: string;
|
|
}
|
|
|
|
function ActorAvatar({
|
|
actorType,
|
|
actorId,
|
|
size = 20,
|
|
getName,
|
|
getInitials,
|
|
className,
|
|
}: ActorAvatarProps) {
|
|
const name = getName?.(actorType, actorId);
|
|
const initials = getInitials?.(actorType, actorId);
|
|
const isAgent = actorType === "agent";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"inline-flex shrink-0 items-center justify-center rounded-full font-medium",
|
|
isAgent ? "bg-info/10 text-info" : "bg-muted text-muted-foreground",
|
|
className
|
|
)}
|
|
style={{ width: size, height: size, fontSize: size * 0.45 }}
|
|
title={name}
|
|
>
|
|
{isAgent ? (
|
|
<Bot style={{ width: size * 0.55, height: size * 0.55 }} />
|
|
) : (
|
|
initials
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { ActorAvatar, type ActorAvatarProps };
|