8a61c94b98
- Status labels use colored pill badges (solid bg for active, muted for inactive) - Board columns have tinted backgrounds matching their status color - Priority badges use orange (--priority) design token for clear distinction from status - Issue cards restructured: identifier, title, then assignee/priority/date row - Agent avatar default color changed from blue to gray - New Issue button in header changed to solid/primary style - Reduced hover shadow on board cards - Added inheritColor prop to StatusIcon and PriorityIcon for badge use
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { Bot } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useActorName } from "@/features/workspace";
|
|
|
|
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 actorNameHook = useActorName();
|
|
const resolveName = getName ?? actorNameHook.getActorName;
|
|
const resolveInitials = getInitials ?? actorNameHook.getActorInitials;
|
|
|
|
const name = resolveName(actorType, actorId);
|
|
const initials = resolveInitials(actorType, actorId);
|
|
const isAgent = actorType === "agent";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"inline-flex shrink-0 items-center justify-center rounded-full font-medium",
|
|
"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 };
|