43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import type { Member } from "../stores/member.ts";
|
|
|
|
interface MentionDropdownProps {
|
|
query: string;
|
|
members: Member[];
|
|
onSelect: (username: string) => void;
|
|
}
|
|
|
|
export function MentionDropdown({ query, members, onSelect }: MentionDropdownProps) {
|
|
const q = query.toLowerCase();
|
|
const filtered = members
|
|
.filter(
|
|
(m) =>
|
|
m.username.toLowerCase().includes(q) ||
|
|
m.display_name?.toLowerCase().includes(q),
|
|
)
|
|
.slice(0, 6);
|
|
|
|
if (filtered.length === 0) return null;
|
|
|
|
return (
|
|
<div className="absolute bottom-full left-0 mb-1 z-50 w-64 max-h-48 overflow-y-auto bg-gb-bg-s border border-gb-bg-t shadow-lg">
|
|
<div className="px-2 py-1 text-xs text-gb-fg-s font-mono border-b border-gb-bg-t">
|
|
MENTION
|
|
</div>
|
|
{filtered.map((m) => (
|
|
<button
|
|
key={m.id}
|
|
type="button"
|
|
onClick={() => onSelect(m.username)}
|
|
className="w-full px-2 py-1 text-left text-sm font-mono flex items-center gap-2 hover:bg-gb-orange hover:text-gb-bg transition-colors"
|
|
>
|
|
<span className="text-gb-green">●</span>
|
|
<span className="truncate">{m.display_name || m.username}</span>
|
|
{m.display_name && m.display_name !== m.username && (
|
|
<span className="text-gb-fg-f text-xs">({m.username})</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|