feat(web): add member mention picker component

surfsense_web/components/chat-comments/member-mention-picker/index.ts

@@ -0,0 +1,4 @@
+export { MemberMentionPicker } from "./member-mention-picker";
+export { MemberMentionItem } from "./member-mention-item";
+export type { MemberOption, MemberMentionPickerProps, MemberMentionItemProps } from "./types";
+

surfsense_web/components/chat-comments/member-mention-picker/member-mention-item.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import type { MemberMentionItemProps } from "./types";
+
+function getInitials(name: string, email: string): string {
+	if (name) {
+		return name
+			.split(" ")
+			.map((part) => part[0])
+			.join("")
+			.toUpperCase()
+			.slice(0, 2);
+	}
+	return email[0].toUpperCase();
+}
+
+export function MemberMentionItem({
+	member,
+	isHighlighted,
+	onSelect,
+	onMouseEnter,
+}: MemberMentionItemProps) {
+	const displayName = member.displayName || member.email.split("@")[0];
+
+	return (
+		<button
+			type="button"
+			className={cn(
+				"flex w-full items-center gap-3 px-3 py-2 text-left transition-colors",
+				isHighlighted ? "bg-accent" : "hover:bg-accent/50"
+			)}
+			onClick={() => onSelect(member)}
+			onMouseEnter={onMouseEnter}
+		>
+			<Avatar className="size-7">
+				{member.avatarUrl && <AvatarImage src={member.avatarUrl} alt={displayName} />}
+				<AvatarFallback className="text-xs">
+					{getInitials(member.displayName, member.email)}
+				</AvatarFallback>
+			</Avatar>
+			<div className="flex min-w-0 flex-1 flex-col">
+				<span className="truncate text-sm font-medium">{displayName}</span>
+				<span className="truncate text-xs text-muted-foreground">{member.email}</span>
+			</div>
+		</button>
+	);
+}
+

surfsense_web/components/chat-comments/member-mention-picker/member-mention-picker.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { MemberMentionItem } from "./member-mention-item";
+import type { MemberMentionPickerProps } from "./types";
+
+export function MemberMentionPicker({
+	members,
+	query,
+	highlightedIndex,
+	isLoading = false,
+	onSelect,
+	onHighlightChange,
+}: MemberMentionPickerProps) {
+	const filteredMembers = query
+		? members.filter(
+				(member) =>
+					member.displayName?.toLowerCase().includes(query.toLowerCase()) ||
+					member.email.toLowerCase().includes(query.toLowerCase())
+			)
+		: members;
+
+	if (isLoading) {
+		return (
+			<div className="flex items-center justify-center py-6">
+				<Loader2 className="size-5 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	if (filteredMembers.length === 0) {
+		return (
+			<div className="px-3 py-6 text-center text-sm text-muted-foreground">
+				{query ? "No members found" : "No members available"}
+			</div>
+		);
+	}
+
+	return (
+		<ScrollArea className="max-h-64">
+			<div className="py-1">
+				{filteredMembers.map((member, index) => (
+					<MemberMentionItem
+						key={member.id}
+						member={member}
+						isHighlighted={index === highlightedIndex}
+						onSelect={onSelect}
+						onMouseEnter={() => onHighlightChange(index)}
+					/>
+				))}
+			</div>
+		</ScrollArea>
+	);
+}
+

surfsense_web/components/chat-comments/member-mention-picker/types.ts

@@ -0,0 +1,23 @@
+export interface MemberOption {
+	id: string;
+	displayName: string;
+	email: string;
+	avatarUrl?: string | null;
+}
+
+export interface MemberMentionPickerProps {
+	members: MemberOption[];
+	query: string;
+	highlightedIndex: number;
+	isLoading?: boolean;
+	onSelect: (member: MemberOption) => void;
+	onHighlightChange: (index: number) => void;
+}
+
+export interface MemberMentionItemProps {
+	member: MemberOption;
+	isHighlighted: boolean;
+	onSelect: (member: MemberOption) => void;
+	onMouseEnter: () => void;
+}
+