4d74091f8d
Replace all inline avatar implementations (initials divs, Bot icons, inline img tags) with the shared ActorAvatar component for consistency. - Extend AssigneePicker with controlled open/onOpenChange, triggerRender, and align props to support batch toolbar and other contexts - Replace BatchAssigneePicker (~130 lines) with shared AssigneePicker - Replace issue-detail sidebar inline DropdownMenu with AssigneePicker - Add canAssignAgent filtering to issue-detail more menu - Replace inline avatars in: filter panel, members-tab, agents page, mention-hover-card, subscribers AvatarGroup - Add data-slot="avatar" to ActorAvatar for AvatarGroup compatibility - Add triggerRender prop to PropertyPicker for custom trigger elements Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";
|
|
import { ActorAvatar } from "@/components/common/actor-avatar";
|
|
import { useWorkspaceStore } from "@/features/workspace";
|
|
|
|
interface MentionHoverCardProps {
|
|
type: string;
|
|
id: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
function MentionHoverCard({ type, id, children }: MentionHoverCardProps) {
|
|
const members = useWorkspaceStore((s) => s.members);
|
|
const agents = useWorkspaceStore((s) => s.agents);
|
|
|
|
if (type === "member") {
|
|
const member = members.find((m) => m.user_id === id);
|
|
if (!member) return <>{children}</>;
|
|
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger render={<span />} className="cursor-default">
|
|
{children}
|
|
</HoverCardTrigger>
|
|
<HoverCardContent align="start" className="w-auto min-w-48 max-w-72">
|
|
<div className="flex items-center gap-2.5">
|
|
<ActorAvatar actorType="member" actorId={id} size={32} />
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium truncate">{member.name}</p>
|
|
<p className="text-xs text-muted-foreground truncate">{member.email}</p>
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
}
|
|
|
|
if (type === "agent") {
|
|
const agent = agents.find((a) => a.id === id);
|
|
if (!agent) return <>{children}</>;
|
|
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger render={<span />} className="cursor-default">
|
|
{children}
|
|
</HoverCardTrigger>
|
|
<HoverCardContent align="start" className="w-auto min-w-48 max-w-72">
|
|
<div className="flex items-center gap-2.5">
|
|
<ActorAvatar actorType="agent" actorId={id} size={32} />
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium truncate">{agent.name}</p>
|
|
{agent.description && (
|
|
<p className="text-xs text-muted-foreground truncate">{agent.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
}
|
|
|
|
return <>{children}</>;
|
|
}
|
|
|
|
export { MentionHoverCard };
|